feat(files): share a folder by link — its page lists what is in it, plays a video above the list

A /watch link may now open one of its owner's own folders (migration 0108: folder_id beside job_id,
exactly one set; a folder's links go with it). The page shows what is in the folder when it is
opened, newest first: a video or a song plays in the same player a file link has, above the list,
each keeping its own resume point; a document only downloads, never opens as a page. A file moved
out stops opening through the link at its next request. Password, expiry and stream-only work as on
a file link; the unfurl names the folder and counts its files, never their names. Source folders
and the Hub cannot be shared.

The folder menu gets "Copy link" and "Share with a link…" (the Share dialog's link half); the rail
marks a folder a live link opens.

Two fixes in the Share dialog on the way: revoking the last link no longer mints a new one at once,
and the new-link form goes back to downloadable after making a link.

frontend/src/components/ApiTokens.dom.test.tsx

@@ -50,6 +50,7 @@ const folder = (id: number, extra: Partial<FileFolder>): FileFolder => ({
   count: 1,
   size_bytes: 0,
   created_at: null,
+  has_link: false,
   ...extra,
 });
 

frontend/src/components/DownloadTray.tsx

@@ -195,7 +195,10 @@ export default function DownloadTray() {
         title,
       }),
       message: t(job.asset?.media_kind === "file" ? "tray.done.file" : "tray.done.phone"),
-      action: { label: t("tray.done.copyLink"), onClick: () => void quickShareLink(qc, job, t) },
+      action: {
+        label: t("tray.done.copyLink"),
+        onClick: () => void quickShareLink(qc, { kind: "file", id: job.id }, t),
+      },
       secondaryAction: {
         label: t("tray.done.open"),
         onClick: () => openFile(job.id, job.folder_id),
@@ -295,7 +298,7 @@ export default function DownloadTray() {
         id: "copyLink",
         label: t("tray.done.copyLink"),
         icon: <Link className="w-4 h-4" />,
-        onSelect: () => void quickShareLink(qc, job, t),
+        onSelect: () => void quickShareLink(qc, { kind: "file", id: job.id }, t),
       },
     ]);
   const menuItems = menu.target

frontend/src/components/Files.menu.dom.test.tsx

@@ -151,6 +151,7 @@ const folder = (id: number, extra: Partial<FileFolder>): FileFolder => ({
   count: 1,
   size_bytes: 0,
   created_at: null,
+  has_link: false,
   ...extra,
 });
 const YT = folder(1, { source_key: "youtube" });
@@ -853,12 +854,14 @@ describe("Files · the grid", () => {
 describe("Files · the open folder's menu", () => {
   const folderMenu = () => screen.getByRole("button", { name: "files.folder.menu" });
 
-  it("an own folder is renamed, kept for a while, or deleted", async () => {
+  it("an own folder is shared by link, renamed, kept for a while, or deleted", async () => {
     mocks.files = [];
     mocks.folders = [YT, OWN];
     mount({ kind: "folder", id: 2 });
     await openMenu(() => fireEvent.click(folderMenu()));
     expect(menuRows()).toEqual([
+      "files.actions.copyLink",
+      "files.folder.shareLink",
       "files.folder.rename",
       "files.folder.retention",
       "files.folder.delete",

frontend/src/components/Files.tsx

@@ -751,6 +751,7 @@ export default function Files() {
           ariaLabel={t("files.folder.menu")}
           items={folderMenu.target ? folderActions.items(folderMenu.target) : []}
         />
+        {folderActions.dialog}
         <Suspense fallback={null}>
           {upload && (
             <UploadDialog

frontend/src/components/FilesRail.dom.test.tsx

@@ -62,6 +62,7 @@ const folder = (id: number, extra: Partial<FileFolder>): FileFolder => ({
   count: 1,
   size_bytes: 0,
   created_at: null,
+  has_link: false,
   ...extra,
 });
 const YT = folder(1, { source_key: "youtube" });
@@ -124,6 +125,8 @@ describe("FilesRail · folders", () => {
     });
     await waitFor(() =>
       expect(menuRows()).toEqual([
+        "files.actions.copyLink",
+        "files.folder.shareLink",
         "files.folder.rename",
         "files.folder.retention",
         "files.folder.delete",
@@ -196,3 +199,62 @@ describe("FilesRail · what it says when a part is empty or missing", () => {
     expect(await screen.findByText("files.usage.failed")).toBeTruthy();
   });
 });
+
+describe("FilesRail · a folder shared by link", () => {
+  it("marks the folder a live link opens, and only that one", async () => {
+    const work = folder(5, { kind: "own", name: "Munka", retention_days: null });
+    await mount([YT, { ...OWN, has_link: true }, work]);
+    expect(entry("Receptek").textContent).toContain("files.folder.shared");
+    expect(entry("Munka").textContent).not.toContain("files.folder.shared");
+    expect(entry("files.source.youtube").textContent).not.toContain("files.folder.shared");
+  });
+
+  it("copies the folder's link in one click, making it the first time", async () => {
+    await mount();
+    const list = vi.spyOn(api, "folderLinks").mockResolvedValue([]);
+    const make = vi
+      .spyOn(api, "createFolderLink")
+      .mockResolvedValue({ id: 1, url: "/watch/f" } as never);
+    act(() => {
+      fireEvent.contextMenu(entry("Receptek"));
+    });
+    await waitFor(() => expect(menuRows()).toContain("files.actions.copyLink"));
+    fireEvent.click(
+      screen
+        .getAllByRole("menuitem", { hidden: true })
+        .find((b) => b.textContent === "files.actions.copyLink")!,
+    );
+    await waitFor(() => expect(make).toHaveBeenCalledWith(2, {}));
+    expect(list).toHaveBeenCalledWith(2);
+  });
+
+  it("opens the folder's Share dialog", async () => {
+    await mount();
+    vi.spyOn(api, "folderLinks").mockResolvedValue([
+      {
+        id: 1,
+        token: "f",
+        url: "/watch/f",
+        allow_download: true,
+        has_password: false,
+        expires_at: null,
+        view_count: 0,
+        created_at: null,
+      },
+    ]);
+    act(() => {
+      fireEvent.contextMenu(entry("Receptek"));
+    });
+    await waitFor(() => expect(menuRows()).toContain("files.folder.shareLink"));
+    fireEvent.click(
+      screen
+        .getAllByRole("menuitem", { hidden: true })
+        .find((b) => b.textContent === "files.folder.shareLink")!,
+    );
+    // The dialog is its own chunk, fetched on first use: slower than a re-render under a full run.
+    expect(
+      await screen.findByText("downloads.share.folderLinkHint", {}, { timeout: 5000 }),
+    ).toBeTruthy();
+    expect(await screen.findByDisplayValue(`${window.location.origin}/watch/f`)).toBeTruthy();
+  });
+});

frontend/src/components/FilesRail.tsx

@@ -3,7 +3,7 @@ import { Meter } from "./ui/Meter";
 import { useQuery } from "@tanstack/react-query";
 import { useTranslation } from "react-i18next";
 import clsx from "clsx";
-import { FolderOpen, FolderPlus, HardDrive, Users } from "lucide-react";
+import { FolderOpen, FolderPlus, HardDrive, Link2, Users } from "lucide-react";
 import { api, type FileFolder } from "../lib/api";
 import { compareText } from "../lib/collate";
 import { formatBytes } from "../lib/format";
@@ -36,16 +36,20 @@ function Entry({
   view,
   trigger,
   folderId,
+  shared = false,
 }: {
   icon: React.ComponentType<{ className?: string }>;
   label: string;
   count?: number;
+  /** A live public link opens the folder: what is moved in is shown to whoever holds the link. */
+  shared?: boolean;
   view: FilesView;
   /** The folder's menu triggers (right click, long press, Shift+F10). */
   trigger?: Record<string, unknown>;
   /** A folder's entry is found by it, to hand the keyboard back after a rename. */
   folderId?: number;
 }) {
+  const { t } = useTranslation();
   const { view: current } = useFiles();
   const { setView } = useFilesActions();
   const active = sameView(view, current);
@@ -64,6 +68,12 @@ function Entry({
     >
       <Icon className={clsx("size-4 shrink-0", !active && "text-muted")} />
       <span className="min-w-0 flex-1 truncate text-left">{label}</span>
+      {shared && (
+        <span title={t("files.folder.shared")} className="shrink-0">
+          <Link2 aria-hidden className="size-3.5 text-accent" />
+          <span className="sr-only">{t("files.folder.shared")}</span>
+        </span>
+      )}
       {count !== undefined && <span className="text-xs tabular-nums text-muted">{count}</span>}
     </Pressable>
   );
@@ -176,6 +186,7 @@ export default function FilesRail({
         icon={folderIcon(f)}
         label={folderLabel(f, t)}
         count={f.count}
+        shared={f.has_link}
         view={{ kind: "folder", id: f.id }}
         trigger={menu.triggerProps(f)}
         folderId={f.id}
@@ -267,6 +278,7 @@ export default function FilesRail({
         ariaLabel={t("files.folder.menu")}
         items={menu.target ? folderActions.items(menu.target) : []}
       />
+      {folderActions.dialog}
     </FilterRail>
   );
 }

frontend/src/components/ShareDialog.dom.test.tsx

@@ -5,7 +5,7 @@
 // colour class outranks them (clsx does not merge Tailwind), so a password-protected link looked
 // unprotected and Revoke hovered neutral. They live on the ICON now; this pins them there.
 import { describe, it, expect, afterEach, beforeEach, vi } from "vitest";
-import { render, screen, cleanup } from "@testing-library/react";
+import { render, screen, cleanup, fireEvent, waitFor } from "@testing-library/react";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import type { ReactNode } from "react";
 
@@ -15,12 +15,30 @@ vi.mock("react-i18next", async (importOriginal) => ({
   ...(await importOriginal<typeof import("react-i18next")>()),
   useTranslation: () => ({ t: (k: string) => k, i18n: { language: "en" } }),
 }));
-vi.mock("./ui/Modal", () => ({ default: ({ children }: { children: ReactNode }) => children }));
-vi.mock("./confirmContext", () => ({ useConfirm: () => async () => false }));
-const h = vi.hoisted(() => ({ links: null as unknown[] | null }));
+vi.mock("./ui/Modal", () => ({
+  default: ({ title, children }: { title: string; children: ReactNode }) => (
+    <div>
+      <h2>{title}</h2>
+      {children}
+    </div>
+  ),
+}));
+vi.mock("./confirmContext", () => ({ useConfirm: () => async () => h.confirm }));
+const h = vi.hoisted(() => ({
+  confirm: false,
+  revokeDownloadLink: vi.fn(),
+  links: null as unknown[] | null,
+  folderLinks: vi.fn(),
+  createFolderLink: vi.fn(),
+  createDownloadLink: vi.fn(),
+}));
 vi.mock("../lib/api", () => ({
   api: {
     shareRecipients: async () => [],
+    folderLinks: h.folderLinks,
+    createFolderLink: h.createFolderLink,
+    createDownloadLink: h.createDownloadLink,
+    revokeDownloadLink: h.revokeDownloadLink,
     downloadLinks: async () =>
       h.links ?? [
         {
@@ -53,6 +71,7 @@ import type { DownloadJob } from "../lib/api";
 afterEach(cleanup);
 beforeEach(() => {
   h.links = null;
+  h.confirm = false;
 });
 
 const iconClass = (button: HTMLElement) => button.querySelector("svg")?.getAttribute("class") ?? "";
@@ -106,3 +125,86 @@ describe("ShareDialog · a link whose address cannot be shown again", () => {
     expect(screen.getAllByRole("button", { name: "downloads.share.revoke" })).toHaveLength(2);
   });
 });
+
+describe("ShareDialog · a folder", () => {
+  const link = (id: number) => ({
+    id,
+    token: `f${id}`,
+    url: `/watch/f${id}`,
+    allow_download: true,
+    has_password: false,
+    expires_at: null,
+    view_count: 0,
+    created_at: null,
+  });
+
+  it("shares by link only, says what a folder link shows, and makes it for the folder", async () => {
+    h.folderLinks.mockReset().mockResolvedValue([link(4)]);
+    h.createFolderLink.mockReset().mockResolvedValue(link(5));
+    const qc = new QueryClient({ defaultOptions: { queries: { retry: false } } });
+    render(
+      <QueryClientProvider client={qc}>
+        <ShareDialog folder={{ id: 7, name: "Friends" }} onClose={() => {}} />
+      </QueryClientProvider>,
+    );
+    expect(await screen.findByDisplayValue(`${window.location.origin}/watch/f4`)).toBeTruthy();
+    expect(h.folderLinks).toHaveBeenCalledWith(7);
+    expect(screen.getByRole("heading").textContent).toBe("downloads.share.folderTitle");
+    expect(screen.getByText("downloads.share.folderLinkHint")).toBeTruthy();
+    // No sharing with a user: "Shared with me" lists files, not folders.
+    expect(screen.queryByText("downloads.share.userSection")).toBeNull();
+
+    // A stream-only link, then the form is back at its default for the next one: downloadable.
+    fireEvent.click(screen.getByRole("button", { name: "downloads.share.newLink" }));
+    // The form's own checkbox, under the link rows' (each row has its own).
+    const allow = () => {
+      const boxes = screen.getAllByRole("checkbox", { name: "downloads.share.allowDownload" });
+      return boxes[boxes.length - 1]!;
+    };
+    fireEvent.click(allow());
+    expect((allow() as HTMLInputElement).checked).toBe(false);
+    fireEvent.click(screen.getByRole("button", { name: "downloads.share.createLink" }));
+    await waitFor(() =>
+      expect(h.createFolderLink).toHaveBeenCalledWith(
+        7,
+        expect.objectContaining({
+          allow_download: false,
+        }),
+      ),
+    );
+    expect(h.createDownloadLink).not.toHaveBeenCalled();
+    fireEvent.click(await screen.findByRole("button", { name: "downloads.share.newLink" }));
+    expect((allow() as HTMLInputElement).checked).toBe(true);
+  });
+
+  it("makes a link on opening with none, but never right after the last one was revoked", async () => {
+    h.folderLinks.mockReset().mockResolvedValue([]);
+    h.createFolderLink.mockReset().mockResolvedValue(link(6));
+    const qc = new QueryClient({ defaultOptions: { queries: { retry: false } } });
+    const view = render(
+      <QueryClientProvider client={qc}>
+        <ShareDialog folder={{ id: 7, name: "Friends" }} onClose={() => {}} />
+      </QueryClientProvider>,
+    );
+    await waitFor(() => expect(h.createFolderLink).toHaveBeenCalledTimes(1));
+    view.unmount();
+
+    h.confirm = true;
+    h.folderLinks
+      .mockReset()
+      .mockResolvedValueOnce([link(4)])
+      .mockResolvedValue([]);
+    h.createFolderLink.mockReset();
+    h.revokeDownloadLink.mockReset().mockResolvedValue({ ok: true, deleted: 4 });
+    const qc2 = new QueryClient({ defaultOptions: { queries: { retry: false } } });
+    render(
+      <QueryClientProvider client={qc2}>
+        <ShareDialog folder={{ id: 7, name: "Friends" }} onClose={() => {}} />
+      </QueryClientProvider>,
+    );
+    fireEvent.click(await screen.findByRole("button", { name: "downloads.share.revoke" }));
+    await waitFor(() => expect(h.revokeDownloadLink).toHaveBeenCalledWith(4));
+    await screen.findByText("downloads.share.noLinks");
+    expect(h.createFolderLink).not.toHaveBeenCalled();
+  });
+});

frontend/src/components/ShareDialog.tsx

@@ -10,6 +10,7 @@ import { notifyActionError } from "../lib/actionErrors";
 import { copyText } from "../lib/clipboard";
 import { formatDate } from "../lib/format";
 import { api, type DownloadJob, type ShareLink, type ShareRecipient } from "../lib/api";
+import { fetchLinks, invalidateLinks, linksKey, makeLink, type LinkTarget } from "../lib/downloads";
 import { Button } from "./ui/Button";
 import { IconButton } from "./ui/IconButton";
 import { Input, InnerInput } from "./ui/Input";
@@ -237,12 +238,12 @@ function LinkRow({ link, onChanged }: { link: ShareLink; onChanged: () => void }
   );
 }
 
-function LinkShare({ job }: { job: DownloadJob }) {
+function LinkShare({ target }: { target: LinkTarget }) {
   const { t } = useTranslation();
   const qc = useQueryClient();
   const links = useQuery({
-    queryKey: qk.downloadLinks(job.id),
-    queryFn: () => api.downloadLinks(job.id),
+    queryKey: linksKey(target),
+    queryFn: () => fetchLinks(target),
   });
   const [creating, setCreating] = useState(false);
   // Downloadable by default — matches the one-click Share (which relies on the backend
@@ -250,11 +251,11 @@ function LinkShare({ job }: { job: DownloadJob }) {
   const [allowDownload, setAllowDownload] = useState(true);
   const [expiryDays, setExpiryDays] = useState<number | null>(null);
   const [password, setPassword] = useState("");
-  const invalidate = () => void qc.invalidateQueries({ queryKey: qk.downloadLinks(job.id) });
+  const invalidate = () => invalidateLinks(qc, target);
 
   const create = useMutation({
     mutationFn: () =>
-      api.createDownloadLink(job.id, {
+      makeLink(target, {
         allow_download: allowDownload,
         expires_days: expiryDays,
         password: password.trim() || undefined,
@@ -262,7 +263,8 @@ function LinkShare({ job }: { job: DownloadJob }) {
     onSuccess: () => {
       invalidate();
       setCreating(false);
-      setAllowDownload(false);
+      // Back to the form's own default for the next link: downloadable.
+      setAllowDownload(true);
       setExpiryDays(null);
       setPassword("");
     },
@@ -276,21 +278,26 @@ function LinkShare({ job }: { job: DownloadJob }) {
   const autoTried = useRef(false);
   // The mutation OBJECT is rebuilt every render; `mutate` is not (react-query memoises it), so the
   // two halves the effect actually uses can be named while `links.data` stays the only real trigger.
-  // The autoTried ref is what makes it fire exactly once.
-  const { mutate: createLink, isPending: createPending } = create;
+  // The autoTried ref is what makes it fire exactly once — and only on the list the dialog OPENED
+  // with: revoking the last link empties the list too, and minting a fresh public link right after
+  // the owner revoked one is the opposite of what they asked for.
+  const { mutate: createLink } = create;
   useEffect(() => {
-    if (links.data && links.data.length === 0 && !autoTried.current && !createPending) {
-      autoTried.current = true;
-      createLink();
-    }
-  }, [links.data, createLink, createPending]);
+    if (!links.data || autoTried.current) return;
+    autoTried.current = true;
+    if (links.data.length === 0) createLink();
+  }, [links.data, createLink]);
 
   return (
     <div>
       <div className="flex items-center gap-2 text-sm font-medium mb-1">
         <Link2 className="w-4 h-4 text-muted" /> {t("downloads.share.linkSection")}
       </div>
-      <p className="text-xs text-muted mb-2">{t("downloads.share.linkHint")}</p>
+      <p className="text-xs text-muted mb-2">
+        {t(
+          target.kind === "folder" ? "downloads.share.folderLinkHint" : "downloads.share.linkHint",
+        )}
+      </p>
 
       <div className="space-y-2">
         {(links.data ?? []).map((l) => (
@@ -359,14 +366,31 @@ function LinkShare({ job }: { job: DownloadJob }) {
   );
 }
 
-export default function ShareDialog({ job, onClose }: { job: DownloadJob; onClose: () => void }) {
+// A file is shared with a registered user and by link; a folder by link only — "Shared with me" lists
+// files, and a folder link already shows its files to whoever has it.
+type ShareDialogProps = { onClose: () => void } & (
+  | { job: DownloadJob; folder?: never }
+  | { folder: { id: number; name: string }; job?: never }
+);
+
+export default function ShareDialog({ job, folder, onClose }: ShareDialogProps) {
   const { t } = useTranslation();
+  if (folder)
+    return (
+      <Modal
+        initialFocus="close"
+        title={t("downloads.share.folderTitle", { name: folder.name })}
+        onClose={onClose}
+      >
+        <LinkShare target={{ kind: "folder", id: folder.id }} />
+      </Modal>
+    );
   return (
     <Modal initialFocus="close" title={t("downloads.share.title")} onClose={onClose}>
       <div className="space-y-5">
         <UserShare job={job} />
         <div className="border-t border-border" />
-        <LinkShare job={job} />
+        <LinkShare target={{ kind: "file", id: job.id }} />
       </div>
     </Modal>
   );

frontend/src/components/WatchPage.dom.test.tsx

@@ -324,3 +324,106 @@ describe("WatchPage resume", () => {
     expect(loaded(other.container.querySelector("video")!).currentTime).toBe(0);
   });
 });
+
+// A folder link opens the folder's list: a video or a song plays in the same player a file link has,
+// above the list; a document only downloads; Download follows the link's own setting.
+describe("WatchPage folder", () => {
+  const file = (id: number, extra: Record<string, unknown> = {}) => ({
+    id,
+    title: `Clip ${id}`,
+    audio: false,
+    media_kind: "video",
+    size_bytes: 1000,
+    duration_s: 71,
+    file_url: `/api/public/watch/tok-folder/files/${id}/file`,
+    poster_url: null,
+    ...extra,
+  });
+  const folder = (extra: Record<string, unknown> = {}) => ({
+    needs_password: false,
+    kind: "folder",
+    name: "Friends",
+    allow_download: true,
+    files: [file(1), file(2), file(3, { title: "Plan.pdf", media_kind: "file", duration_s: null })],
+    ...extra,
+  });
+  const scrolled = vi.fn();
+  Element.prototype.scrollIntoView = scrolled;
+
+  it("lists the folder's files and plays the one picked above the list", async () => {
+    window.history.replaceState({}, "", "/watch/tok-folder");
+    mockMeta(folder());
+    const page = render(<WatchPage />);
+    expect((await page.findByRole("heading", { level: 1 })).textContent).toBe("Friends");
+    expect(page.getByText(/^3 files/)).toBeTruthy();
+    expect(page.container.querySelector("video")).toBeNull();
+
+    fireEvent.click(page.getByRole("button", { name: "Play: Clip 2" }));
+    const video = page.container.querySelector("video")!;
+    expect(video.getAttribute("src")).toBe("/api/public/watch/tok-folder/files/2/file");
+    expect(video.autoplay).toBe(true);
+    expect(page.getByRole("button", { name: "Play: Clip 2" }).getAttribute("aria-current")).toBe(
+      "true",
+    );
+    // The file's title sits under the folder's, one level down.
+    expect(page.getByRole("heading", { level: 2 }).textContent).toBe("Clip 2");
+    expect(scrolled).toHaveBeenCalled();
+
+    fireEvent.click(page.getByRole("button", { name: "Play: Clip 1" }));
+    expect(page.container.querySelector("video")!.getAttribute("src")).toBe(
+      "/api/public/watch/tok-folder/files/1/file",
+    );
+  });
+
+  it("offers a document for download only, and Download only where the link allows it", async () => {
+    window.history.replaceState({}, "", "/watch/tok-folder");
+    mockMeta(folder());
+    const page = render(<WatchPage />);
+    await page.findByText("Plan.pdf");
+    expect(page.queryByRole("button", { name: "Play: Plan.pdf" })).toBeNull();
+    const pdf = page.getByRole("link", { name: "Download: Plan.pdf" });
+    expect(pdf.getAttribute("href")).toBe("/api/public/watch/tok-folder/files/3/file");
+    cleanup();
+
+    mockMeta(folder({ allow_download: false }));
+    const streamOnly = render(<WatchPage />);
+    await streamOnly.findByText("Plan.pdf");
+    expect(streamOnly.queryAllByRole("link", { name: /^Download/ })).toEqual([]);
+  });
+
+  it("each file keeps its own place in a folder", async () => {
+    window.history.replaceState({}, "", "/watch/tok-folder-resume");
+    mockMeta(folder());
+    const page = render(<WatchPage />);
+    fireEvent.click(await page.findByRole("button", { name: "Play: Clip 1" }));
+    const video = page.container.querySelector("video")!;
+    let t = 0;
+    Object.defineProperties(video, {
+      currentTime: { get: () => t, set: (v: number) => void (t = v), configurable: true },
+      duration: { get: () => 600, configurable: true },
+      readyState: { get: () => 1, configurable: true },
+    });
+    video.dispatchEvent(new Event("loadedmetadata"));
+    video.dispatchEvent(new Event("playing"));
+    video.currentTime = 250;
+    video.dispatchEvent(new Event("pause"));
+    const points = JSON.stringify(localStorage);
+    expect(points).toContain("tok-folder-resume/1");
+    expect(points).not.toContain('"tok-folder-resume"');
+  });
+
+  it("says when the folder is empty", async () => {
+    window.history.replaceState({}, "", "/watch/tok-folder");
+    mockMeta(folder({ files: [] }));
+    const page = render(<WatchPage />);
+    expect(await page.findByText("This folder is empty.")).toBeTruthy();
+    expect(page.getByText("0 files")).toBeTruthy();
+  });
+
+  it("a password folder link asks for the folder's password", async () => {
+    window.history.replaceState({}, "", "/watch/tok-folder-locked");
+    mockMeta({ needs_password: true, kind: "folder" });
+    const page = render(<WatchPage />);
+    expect(await page.findByText("This folder is password-protected")).toBeTruthy();
+  });
+});

frontend/src/components/WatchPage.tsx

@@ -1,8 +1,22 @@
 import { useEffect, useId, useState } from "react";
-import { Download, File as FileIcon, Link2, Lock, PlayCircle, Repeat } from "lucide-react";
+import clsx from "clsx";
+import {
+  Download,
+  File as FileIcon,
+  Film,
+  Link2,
+  Lock,
+  Music,
+  Play,
+  PlayCircle,
+  Repeat,
+} from "lucide-react";
 import { Button } from "./ui/Button";
 import { Chip } from "./ui/Chip";
-import { formatBytes } from "../lib/format";
+import { Pressable } from "./ui/Pressable";
+import RemoteImage from "./ui/RemoteImage";
+import { MEDIA_BADGE } from "./ui/mediaCardStyles";
+import { formatBytes, formatDuration } from "../lib/format";
 import { exposeVideoToBackgroundPlay } from "../lib/browserBackgroundPlay";
 import { useMediaSession } from "../lib/mediaSession";
 import { useMediaKeys } from "../lib/mediaKeys";
@@ -11,15 +25,17 @@ import { LS, readJSON, writeJSON } from "../lib/storage";
 import { send } from "../lib/http";
 import { Input } from "./ui/Input";
 import { SURFACE } from "./ui/surfaces";
-import { LinkButton } from "./ui/LinkButton";
+import { IconLink, LinkButton } from "./ui/LinkButton";
 import { T, lang } from "./watchStrings";
 
-// Standalone, login-free video page for a shared /watch/<token> link. Its own entry (watchMain.tsx,
-// watch.html): no auth, no providers, none of the app's bundle. Uses plain fetch and a tiny
-// self-contained i18n dict (`watchStrings`: the public viewer has no app language preference).
+// Standalone, login-free page for a shared /watch/<token> link: one file, or a folder's list of them.
+// Its own entry (watchMain.tsx, watch.html): no auth, no providers, none of the app's bundle. Uses
+// plain fetch and a tiny self-contained i18n dict (`watchStrings`: the public viewer has no app
+// language preference).
 
-type Meta = {
-  needs_password: boolean;
+// One shared file: a file link's page, or one row of a folder link's.
+type FileMeta = {
+  kind?: "file";
   title?: string | null;
   uploader?: string | null;
   uploader_url?: string | null;
@@ -35,6 +51,21 @@ type Meta = {
   poster_url?: string | null;
 };
 
+// A folder link's page: what is in the folder now, newest first.
+type FolderMeta = {
+  kind: "folder";
+  name: string;
+  allow_download: boolean;
+  files: (FileMeta & { id: number })[];
+};
+
+type Meta = FileMeta | FolderMeta;
+
+// What the link answers before it is opened: a password link says only which kind it is.
+type Answer =
+  | (Meta & { needs_password?: false })
+  | { needs_password: true; kind?: "file" | "folder" };
+
 // Compact display of a URL: drop the protocol + trailing slash so it fits on one line.
 function displayUrl(url: string): string {
   try {
@@ -60,37 +91,12 @@ export default function WatchPage() {
     "loading" | "ready" | "password" | "gone" | "preparing" | "error"
   >(token ? "loading" : "gone");
   const [meta, setMeta] = useState<Meta | null>(null);
+  // A password link's kind, for its title, until it is unlocked.
+  const [locked, setLocked] = useState<"file" | "folder">("file");
   const [password, setPassword] = useState("");
   const [error, setError] = useState<string | null>(null);
   const errorId = useId();
   const [unlocking, setUnlocking] = useState(false);
-  // Whichever element renders (video or audio-only), as state: the OS's media controls, the keys and
-  // the resume bind to it once it exists.
-  const [media, setMedia] = useState<HTMLMediaElement | null>(null);
-  useMediaSession(
-    status === "ready" ? media : null,
-    meta && {
-      title: meta.title || "Video",
-      artist: meta.uploader || "Siftlode",
-      artwork: meta.poster_url,
-    },
-  );
-  useMediaKeys(media);
-  // It opens where this browser stopped in this link (the viewer has no account to keep it in).
-  // Read once per link, at render: the point a later checkpoint writes must not move the start.
-  const [start] = useState(() => (token ? linkPoint(token) : 0));
-  useResume(media, token || null, start, (position, duration) =>
-    saveLinkPoint(token, position, duration),
-  );
-
-  // Repeat the shared media when it ends — on unless the viewer turned it off. Remembered per browser
-  // (this page has no account); an unreadable storage just means the default.
-  const [repeat, setRepeat] = useState(() => readJSON<boolean>(LS.watchRepeat, true) !== false);
-  const toggleRepeat = () => {
-    const next = !repeat;
-    setRepeat(next);
-    writeJSON(LS.watchRepeat, next);
-  };
 
   // Bumped by Retry, which asks again.
   const [attempt, setAttempt] = useState(0);
@@ -101,18 +107,20 @@ export default function WatchPage() {
   useEffect(() => {
     if (!token) return; // the seed above already says "gone"
     send(`/api/public/watch/${encodeURIComponent(token)}`)
-      .then((r): Promise<Meta | "preparing" | "gone"> => {
+      .then((r): Promise<Answer | "preparing" | "gone"> => {
         // Only a 404 says the link is gone (unknown, expired, revoked, or its file removed) — or that
         // its video is being made again (`notFoundState`). Anything else — a 5xx while the server
         // restarts, a dropped connection — is a failure worth retrying, not a dead link.
         if (r.status === 404) return notFoundState(r);
         if (!r.ok) throw new Error(`HTTP ${r.status}`);
-        return r.json() as Promise<Meta>;
+        return r.json() as Promise<Answer>;
       })
       .then((m) => {
         if (typeof m === "string") setStatus(m);
-        else if (m.needs_password) setStatus("password");
-        else {
+        else if (m.needs_password) {
+          setLocked(m.kind ?? "file");
+          setStatus("password");
+        } else {
           setMeta(m);
           setStatus("ready");
         }
@@ -231,7 +239,8 @@ export default function WatchPage() {
           <div className="flex-1 grid place-items-center">
             <div className={`${SURFACE.panel} w-full max-w-sm p-6`}>
               <div className="flex items-center gap-2 font-medium mb-4">
-                <Lock className="w-4 h-4 text-accent" /> {T.passwordTitle}
+                <Lock className="w-4 h-4 text-accent" />{" "}
+                {locked === "folder" ? T.passwordTitleFolder : T.passwordTitle}
               </div>
               <Input
                 className="w-full"
@@ -263,137 +272,290 @@ export default function WatchPage() {
           </div>
         )}
 
-        {status === "ready" && meta && meta.media_kind === "file" && (
-          /* A generic uploaded file has no player — just an info card (name/type/size) and, if the
-             link allows it, a Download. The backend serves the file force-download regardless, so
-             gating the button on allow_download only mirrors the owner's ACL, matching the media
-             branch's download affordance below. It is the page's one action, so it is the filled
-             primary, as the unlock card's Watch is. */
-          <div className="flex-1 grid place-items-center">
-            <div className={`${SURFACE.panel} w-full max-w-md p-6 text-center`}>
-              <div className="mx-auto w-16 h-16 rounded-xl bg-surface grid place-items-center mb-4">
-                <FileIcon className="w-8 h-8 text-accent" />
-              </div>
-              <h1 className="text-lg font-semibold leading-snug break-words">
-                {meta.title || T.file}
-              </h1>
-              <div className="text-sm text-muted mt-1">
-                {[meta.container?.toUpperCase(), formatBytes(meta.size_bytes, lang)]
-                  .filter(Boolean)
-                  .join(" · ")}
-              </div>
-              {meta.allow_download && (
-                <LinkButton
-                  href={meta.file_url}
-                  variant="primary"
-                  icon={<Download />}
-                  className="mt-5"
-                >
-                  {T.download}
-                </LinkButton>
-              )}
-            </div>
-          </div>
+        {status === "ready" && meta?.kind === "folder" && (
+          <FolderView folder={meta} token={token} />
         )}
-
-        {status === "ready" && meta && meta.media_kind !== "file" && (
-          <div>
-            {meta.audio ? (
-              /* Audio-only asset (mp3): WebKit won't play it in a <video>, so render a native
-                 <audio>. No poster exists for these, so present it as a deliberate padded bar on
-                 the surface (not the black video box) so it looks intentional without artwork. */
-              <div className={`${SURFACE.card} p-4`}>
-                <audio
-                  ref={setMedia}
-                  controls
-                  loop={repeat}
-                  src={meta.file_url}
-                  className="w-full block"
-                />
-              </div>
-            ) : (
-              /* Shrink-wrap the player to the video so a vertical/short clip renders as a narrow
-                 player instead of a wide box with black bars; a landscape clip fills the width. */
-              <div className="rounded-xl overflow-hidden bg-black border border-border w-fit max-w-full mx-auto">
-                <video
-                  ref={(el) => {
-                    setMedia(el);
-                    // So Brave iOS's background play keeps it going when the app is left.
-                    exposeVideoToBackgroundPlay(el);
-                  }}
-                  controls
-                  playsInline
-                  loop={repeat}
-                  src={meta.file_url}
-                  poster={meta.poster_url || undefined}
-                  className="max-h-[80dvh] max-w-full mx-auto block"
-                />
-              </div>
-            )}
-            {/* The actions wrap under the title when the row is too narrow for both (a phone), rather
-                than squeezing the title into a column a word wide. */}
-            <div className={`${SURFACE.panel} mt-3 flex flex-wrap items-start gap-x-3 gap-y-2 p-3`}>
-              <div className="min-w-0 flex-1 basis-60">
-                <h1 className="text-lg font-semibold leading-snug break-words">
-                  {meta.title || "Video"}
-                </h1>
-                {meta.uploader &&
-                  (meta.uploader_url ? (
-                    <a
-                      href={meta.uploader_url}
-                      target="_blank"
-                      rel="noopener noreferrer"
-                      className="text-sm text-muted hover:text-accent hover:underline"
-                    >
-                      {meta.uploader}
-                    </a>
-                  ) : (
-                    <div className="text-sm text-muted">{meta.uploader}</div>
-                  ))}
-              </div>
-              <div className="flex shrink-0 items-center gap-2">
-                {/* An on/off toggle, so the shared pressed-pill paint (a solid fill when on) — not a
-                    Button, whose variants differ only in colour. */}
-                <Chip
-                  size="md"
-                  pressed={repeat}
-                  icon={<Repeat className="size-3.5" aria-hidden />}
-                  onClick={toggleRepeat}
-                  className="font-medium"
-                >
-                  {T.repeat}
-                </Chip>
-                {/* The toolbar rung, level with the Repeat chip beside it (one row, one height). */}
-                {meta.allow_download && (
-                  <LinkButton href={meta.file_url} icon={<Download />} size="sm" variant="glass">
-                    {T.download}
-                  </LinkButton>
-                )}
-              </div>
-            </div>
-            {(meta.source_url || (meta.extra_links && meta.extra_links.length > 0)) && (
-              <div className="mt-3 flex flex-col gap-1.5">
-                {[meta.source_url, ...(meta.extra_links ?? [])]
-                  .filter((u): u is string => !!u)
-                  .map((url) => (
-                    <a
-                      key={url}
-                      href={url}
-                      target="_blank"
-                      rel="noopener noreferrer"
-                      title={url}
-                      className="inline-flex min-h-6 items-center gap-1.5 text-sm text-muted hover:text-accent hover:underline min-w-0 touch-target"
-                    >
-                      <Link2 className="w-3.5 h-3.5 shrink-0" />
-                      <span className="truncate">{displayUrl(url)}</span>
-                    </a>
-                  ))}
-              </div>
-            )}
-          </div>
+        {status === "ready" && meta && meta.kind !== "folder" && (
+          <FileView meta={meta} pointKey={token} />
         )}
       </div>
       <div className="text-xs text-muted py-4">{T.brand}</div>
     </div>
   );
 }
+
+/** One shared file: its player (or, for a document, its card), title and actions. `pointKey` is where
+ *  this browser keeps the point it stopped at: the link's token, or the token and the file's id in a
+ *  folder. `nested` is a file shown inside a folder's page, whose heading is the folder's. */
+function FileView({
+  meta,
+  pointKey,
+  nested = false,
+}: {
+  meta: FileMeta;
+  pointKey: string;
+  nested?: boolean;
+}) {
+  const Heading = nested ? "h2" : "h1";
+  // Whichever element renders (video or audio-only), as state: the OS's media controls, the keys and
+  // the resume bind to it once it exists.
+  const [media, setMedia] = useState<HTMLMediaElement | null>(null);
+  useMediaSession(media, {
+    title: meta.title || "Video",
+    artist: meta.uploader || "Siftlode",
+    artwork: meta.poster_url,
+  });
+  useMediaKeys(media);
+  // It opens where this browser stopped in this file (the viewer has no account to keep it in).
+  // Read once per file, at render: the point a later checkpoint writes must not move the start.
+  const [start] = useState(() => linkPoint(pointKey));
+  useResume(media, pointKey, start, (position, duration) =>
+    saveLinkPoint(pointKey, position, duration),
+  );
+
+  // Repeat the shared media when it ends — on unless the viewer turned it off. Remembered per browser
+  // (this page has no account); an unreadable storage just means the default.
+  const [repeat, setRepeat] = useState(() => readJSON<boolean>(LS.watchRepeat, true) !== false);
+  const toggleRepeat = () => {
+    const next = !repeat;
+    setRepeat(next);
+    writeJSON(LS.watchRepeat, next);
+  };
+
+  if (meta.media_kind === "file")
+    /* A generic uploaded file has no player — just an info card (name/type/size) and, if the
+       link allows it, a Download. The backend serves the file force-download regardless, so
+       gating the button on allow_download only mirrors the owner's ACL, matching the media
+       branch's download affordance below. It is the page's one action, so it is the filled
+       primary, as the unlock card's Watch is. */
+    return (
+      <div className="flex-1 grid place-items-center">
+        <div className={`${SURFACE.panel} w-full max-w-md p-6 text-center`}>
+          <div className="mx-auto w-16 h-16 rounded-xl bg-surface grid place-items-center mb-4">
+            <FileIcon className="w-8 h-8 text-accent" />
+          </div>
+          <Heading className="text-lg font-semibold leading-snug break-words">
+            {meta.title || T.file}
+          </Heading>
+          <div className="text-sm text-muted mt-1">
+            {[meta.container?.toUpperCase(), formatBytes(meta.size_bytes, lang)]
+              .filter(Boolean)
+              .join(" · ")}
+          </div>
+          {meta.allow_download && (
+            <LinkButton href={meta.file_url} variant="primary" icon={<Download />} className="mt-5">
+              {T.download}
+            </LinkButton>
+          )}
+        </div>
+      </div>
+    );
+
+  return (
+    <div>
+      {meta.audio ? (
+        /* Audio-only asset (mp3): WebKit won't play it in a <video>, so render a native
+           <audio>. No poster exists for these, so present it as a deliberate padded bar on
+           the surface (not the black video box) so it looks intentional without artwork. */
+        <div className={`${SURFACE.card} p-4`}>
+          <audio
+            ref={setMedia}
+            controls
+            autoPlay={nested}
+            loop={repeat}
+            src={meta.file_url}
+            className="w-full block"
+          />
+        </div>
+      ) : (
+        /* Shrink-wrap the player to the video so a vertical/short clip renders as a narrow
+           player instead of a wide box with black bars; a landscape clip fills the width. */
+        <div className="rounded-xl overflow-hidden bg-black border border-border w-fit max-w-full mx-auto">
+          <video
+            ref={(el) => {
+              setMedia(el);
+              // So Brave iOS's background play keeps it going when the app is left.
+              exposeVideoToBackgroundPlay(el);
+            }}
+            controls
+            playsInline
+            // In a folder the viewer picked it from the list just now: it starts.
+            autoPlay={nested}
+            loop={repeat}
+            src={meta.file_url}
+            poster={meta.poster_url || undefined}
+            className={clsx("max-w-full mx-auto block", nested ? "max-h-[60dvh]" : "max-h-[80dvh]")}
+          />
+        </div>
+      )}
+      {/* The actions wrap under the title when the row is too narrow for both (a phone), rather
+          than squeezing the title into a column a word wide. */}
+      <div className={`${SURFACE.panel} mt-3 flex flex-wrap items-start gap-x-3 gap-y-2 p-3`}>
+        <div className="min-w-0 flex-1 basis-60">
+          <Heading className="text-lg font-semibold leading-snug break-words">
+            {meta.title || "Video"}
+          </Heading>
+          {meta.uploader &&
+            (meta.uploader_url ? (
+              <a
+                href={meta.uploader_url}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="text-sm text-muted hover:text-accent hover:underline"
+              >
+                {meta.uploader}
+              </a>
+            ) : (
+              <div className="text-sm text-muted">{meta.uploader}</div>
+            ))}
+        </div>
+        <div className="flex shrink-0 items-center gap-2">
+          {/* An on/off toggle, so the shared pressed-pill paint (a solid fill when on) — not a
+              Button, whose variants differ only in colour. */}
+          <Chip
+            size="md"
+            pressed={repeat}
+            icon={<Repeat className="size-3.5" aria-hidden />}
+            onClick={toggleRepeat}
+            className="font-medium"
+          >
+            {T.repeat}
+          </Chip>
+          {/* The toolbar rung, level with the Repeat chip beside it (one row, one height). */}
+          {meta.allow_download && (
+            <LinkButton href={meta.file_url} icon={<Download />} size="sm" variant="glass">
+              {T.download}
+            </LinkButton>
+          )}
+        </div>
+      </div>
+      {(meta.source_url || (meta.extra_links && meta.extra_links.length > 0)) && (
+        <div className="mt-3 flex flex-col gap-1.5">
+          {[meta.source_url, ...(meta.extra_links ?? [])]
+            .filter((u): u is string => !!u)
+            .map((url) => (
+              <a
+                key={url}
+                href={url}
+                target="_blank"
+                rel="noopener noreferrer"
+                title={url}
+                className="inline-flex min-h-6 items-center gap-1.5 text-sm text-muted hover:text-accent hover:underline min-w-0 touch-target"
+              >
+                <Link2 className="w-3.5 h-3.5 shrink-0" />
+                <span className="truncate">{displayUrl(url)}</span>
+              </a>
+            ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+/** A file's picture in the folder list: its poster frame, else a glyph of its kind; a video or a
+ *  song carries its length. */
+function RowThumb({ file }: { file: FileMeta }) {
+  const Glyph = file.media_kind === "file" ? FileIcon : file.audio ? Music : Film;
+  const length = file.media_kind !== "file" && file.duration_s ? file.duration_s : null;
+  // Above the length badge when there is one, so the badge never covers it.
+  const glyph = (
+    <Glyph
+      aria-hidden
+      className={clsx(
+        "absolute inset-x-0 mx-auto text-muted",
+        length ? "top-1 size-4" : "inset-y-0 my-auto size-5",
+      )}
+    />
+  );
+  return (
+    <div className="relative h-10 w-16 shrink-0 overflow-hidden rounded-lg bg-surface">
+      <RemoteImage
+        src={file.poster_url}
+        alt=""
+        loading="lazy"
+        className="h-full w-full object-cover"
+        fallback={glyph}
+      />
+      {length ? (
+        <span className={clsx(MEDIA_BADGE, "bottom-0.5 right-0.5")}>{formatDuration(length)}</span>
+      ) : null}
+    </div>
+  );
+}
+
+/** A folder link's page: the folder's name, its files, and the one playing above them. Play opens the
+ *  same player a file link has; a document only downloads. */
+function FolderView({ folder, token }: { folder: FolderMeta; token: string }) {
+  const [playing, setPlaying] = useState<number | null>(null);
+  const current = folder.files.find((f) => f.id === playing);
+  const total = folder.files.reduce((n, f) => n + (f.size_bytes ?? 0), 0);
+  return (
+    <div className="flex flex-col gap-4">
+      <div>
+        <h1 className="text-xl font-bold leading-snug break-words">{folder.name}</h1>
+        <div className="text-sm text-muted">
+          {[T.files(folder.files.length), folder.files.length > 0 && formatBytes(total, lang)]
+            .filter(Boolean)
+            .join(" · ")}
+        </div>
+      </div>
+      {current && (
+        // Keyed by the file, so a new pick is a new player (its own resume point, its own media
+        // session) and brings the player into view — on a phone it is above the row just tapped.
+        <div key={current.id} ref={(el) => el?.scrollIntoView({ block: "start" })}>
+          <FileView meta={current} pointKey={`${token}/${current.id}`} nested />
+        </div>
+      )}
+      {folder.files.length === 0 ? (
+        <p className="text-sm text-muted">{T.folderEmpty}</p>
+      ) : (
+        <ul className="flex flex-col">
+          {folder.files.map((f) => {
+            const title = f.title || T.file;
+            const body = (
+              <>
+                <RowThumb file={f} />
+                <span className="min-w-0 flex-1">
+                  <span className="block truncate text-sm">{title}</span>
+                  <span className="block text-xs text-muted">
+                    {formatBytes(f.size_bytes, lang)}
+                  </span>
+                </span>
+              </>
+            );
+            return (
+              <li
+                key={f.id}
+                className={clsx(
+                  "flex items-center gap-1 rounded-lg",
+                  f.id === playing && "bg-accent/10",
+                )}
+              >
+                {f.media_kind === "file" ? (
+                  <div className="flex min-w-0 flex-1 items-center gap-3 px-1.5 py-1.5">{body}</div>
+                ) : (
+                  <Pressable
+                    layer
+                    selectable
+                    aria-current={f.id === playing ? "true" : undefined}
+                    aria-label={`${T.play}: ${title}`}
+                    onClick={() => setPlaying(f.id)}
+                    className="flex min-w-0 flex-1 items-center gap-3 rounded-lg px-1.5 py-1.5"
+                  >
+                    {body}
+                    <Play aria-hidden className="size-4 shrink-0 text-muted" />
+                  </Pressable>
+                )}
+                {folder.allow_download && (
+                  <IconLink href={f.file_url} label={`${T.download}: ${title}`}>
+                    <Download />
+                  </IconLink>
+                )}
+              </li>
+            );
+          })}
+        </ul>
+      )}
+    </div>
+  );
+}

frontend/src/components/useFileActions.tsx

@@ -108,7 +108,7 @@ export function useFileActions({
   const quickShare = async (file: LibraryFile) => {
     if (sharingId !== null) return;
     setSharingId(file.id);
-    await quickShareLink(qc, file, t).finally(() => setSharingId(null));
+    await quickShareLink(qc, { kind: "file", id: file.id }, t).finally(() => setSharingId(null));
   };
 
   const icon = (I: typeof PlayCircle) => <I className="w-4 h-4" />;

frontend/src/components/useFolderActions.tsx

@@ -1,18 +1,22 @@
+import { lazy, Suspense, useState } from "react";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { useTranslation } from "react-i18next";
-import { Clock, Pencil, Trash2 } from "lucide-react";
+import { Clock, Link, Pencil, Share2, Trash2 } from "lucide-react";
 import { api, type FileFolder, type FolderPatch } from "../lib/api";
 import { notifyActionError } from "../lib/actionErrors";
-import { invalidateDownloads } from "../lib/downloads";
+import { invalidateDownloads, quickShareLink } from "../lib/downloads";
 import { useConfirm } from "./confirmContext";
 import { folderLabel } from "./fileFolders";
 import { type ActionMenuItem } from "./ui/ActionMenu";
 import { menuGroups } from "./ui/menuGroups";
 
 // A library folder's ONE menu — the rail entry's right click and the Files page's "…" beside an open
-// folder's name. An own folder is renamed (inline, where it is named), kept for a while and deleted; a
-// source folder is named by its origin and cannot go, so only how long it keeps its files is its
-// user's to set (the server holds the same rules: `routes/files.py`).
+// folder's name. An own folder is shared by link (its link opens whatever is in it), renamed (inline,
+// where it is named), kept for a while and deleted; a source folder is named by its origin and cannot
+// go, so only how long it keeps its files is its user's to set (the server holds the same rules:
+// `routes/files.py`, `routes/downloads.py`).
+
+const ShareDialog = lazy(() => import("./ShareDialog"));
 
 /** The choices the Retention submenu offers (days; null = until the user deletes the file). */
 const RETENTION_CHOICES: readonly (number | null)[] = [7, 30, 90, null];
@@ -25,6 +29,9 @@ export function useFolderActions({ onRename }: { onRename: (folder: FileFolder)
   const qc = useQueryClient();
   const { t } = useTranslation();
   const confirm = useConfirm();
+  // The own folder whose Share dialog is open (the hook's caller renders `dialog`).
+  const [sharing, setSharing] = useState<FileFolder | null>(null);
+  const [copying, setCopying] = useState(false);
 
   // Every write lands in the listings too: a retention change moves its files' expiry, a delete moves
   // the files themselves.
@@ -83,10 +90,34 @@ export function useFolderActions({ onRename }: { onRename: (folder: FileFolder)
     if (ok) remove.mutate(folder.id);
   };
 
+  // The same two a file row has, in its order: one click copies the folder's link (made the first
+  // time), the dialog is for a password, an expiry or revoking it.
+  const share = (folder: FileFolder): ActionMenuItem[] => [
+    {
+      id: "copy-link",
+      label: t("files.actions.copyLink"),
+      icon: icon(Link),
+      disabled: copying,
+      onSelect: () => {
+        setCopying(true);
+        void quickShareLink(qc, { kind: "folder", id: folder.id }, t).finally(() =>
+          setCopying(false),
+        );
+      },
+    },
+    {
+      id: "share-link",
+      label: t("files.folder.shareLink"),
+      icon: icon(Share2),
+      onSelect: () => setSharing(folder),
+    },
+  ];
+
   /** The folder's menu rows. */
   const items = (folder: FileFolder): ActionMenuItem[] =>
     folder.kind === "own"
       ? menuGroups(
+          share(folder),
           [
             {
               id: "rename",
@@ -126,5 +157,14 @@ export function useFolderActions({ onRename }: { onRename: (folder: FileFolder)
     }
   };
 
-  return { items, rename, add };
+  const dialog = sharing && (
+    <Suspense fallback={null}>
+      <ShareDialog
+        folder={{ id: sharing.id, name: folderLabel(sharing, t) }}
+        onClose={() => setSharing(null)}
+      />
+    </Suspense>
+  );
+
+  return { items, rename, add, dialog };
 }

frontend/src/components/watchStrings.ts

@@ -26,6 +26,10 @@ const STR = {
     crashTitle: "Something went wrong.",
     crashHint: "Reload the page to try again.",
     reload: "Reload",
+    passwordTitleFolder: "This folder is password-protected",
+    folderEmpty: "This folder is empty.",
+    play: "Play",
+    files: (n: number) => (n === 1 ? "1 file" : `${n} files`),
   },
   hu: {
     loading: "Betöltés…",
@@ -50,6 +54,10 @@ const STR = {
     crashTitle: "Valami hiba történt.",
     crashHint: "Töltsd újra az oldalt, és próbáld újra.",
     reload: "Újratöltés",
+    passwordTitleFolder: "Ez a mappa jelszóval védett",
+    folderEmpty: "Ez a mappa üres.",
+    play: "Lejátszás",
+    files: (n: number) => `${n} fájl`,
   },
   de: {
     loading: "Wird geladen…",
@@ -74,6 +82,10 @@ const STR = {
     crashTitle: "Etwas ist schiefgelaufen.",
     crashHint: "Lade die Seite neu und versuche es erneut.",
     reload: "Neu laden",
+    passwordTitleFolder: "Dieser Ordner ist passwortgeschützt",
+    folderEmpty: "Dieser Ordner ist leer.",
+    play: "Abspielen",
+    files: (n: number) => (n === 1 ? "1 Datei" : `${n} Dateien`),
   },
 } as const;
 

frontend/src/design-lab/DesignLab.tsx

@@ -6,6 +6,7 @@ import { BatchC } from "./batchC";
 import { BatchD } from "./batchD";
 import { FilesRound } from "./filesRound";
 import { TokensRound } from "./tokensRound";
+import { LinksRound } from "./linksRound";
 import { Chip } from "../components/ui/Chip";
 import { Slider } from "../components/ui/NativeControls";
 import { SURFACE } from "../components/ui/surfaces";
@@ -105,6 +106,14 @@ export default function DesignLab() {
             Resize the window to tablet size to see them there too.
           </p>
         </header>
+        <header id="open-links" className="mt-6 scroll-mt-20">
+          <h2 className="text-xl font-bold">Decided · Folder links</h2>
+          <p className="text-sm text-muted">
+            A /watch link that opens a whole folder. Picked: A, A, A — the variants with the accent
+            edge (built; on the public list a picture-less row keeps its glyph above the length).
+          </p>
+        </header>
+        <LinksRound />
         <header id="open-tokens" className="mt-6 scroll-mt-20">
           <h2 className="text-xl font-bold">Decided · API tokens, a machine&apos;s key to Files</h2>
           <p className="text-sm text-muted">

frontend/src/design-lab/linksRound.tsx

@@ -0,0 +1,420 @@
+import clsx from "clsx";
+import type { ReactNode } from "react";
+import {
+  Clock,
+  Copy,
+  Download,
+  Eye,
+  FileText,
+  Folder,
+  FolderPlus,
+  Link2,
+  Lock,
+  Pencil,
+  Play,
+  Trash2,
+  Users,
+  X,
+} from "lucide-react";
+import { Decision, Sample, Variant } from "./labKit";
+import { SURFACE } from "../components/ui/surfaces";
+import { buttonClass, iconButtonClass } from "../components/ui/buttonStyles";
+import { MEDIA_BADGE } from "../components/ui/mediaCardStyles";
+
+// The folder links round: a /watch link that opens a whole folder, not one file. Static markup on
+// purpose (the lab's rule); the folder and its files are the owner's own kind of content.
+
+const ICON = iconButtonClass({ variant: "ghost", size: "sm" });
+
+type File = { name: string; size: string; length?: string; doc?: boolean; hue: string };
+const FILES: File[] = [
+  { name: "Balaton 2026 — a móló", size: "48,1 MB", length: "2:14", hue: "from-accent/45" },
+  { name: "Szülinapi torta, gyertyafújás", size: "19,9 MB", length: "1:11", hue: "from-rating/45" },
+  { name: "Útvonal és szállás.pdf", size: "640 KB", doc: true, hue: "from-fg/20" },
+  { name: "Esti tábortűz", size: "7,3 MB", length: "0:38", hue: "from-success/40" },
+];
+
+function Thumb({ file, className }: { file: File; className: string }) {
+  return (
+    <div
+      className={clsx(
+        "relative shrink-0 overflow-hidden rounded-lg bg-linear-to-br to-card",
+        file.hue,
+        className,
+      )}
+    >
+      {file.doc && <FileText className="absolute inset-0 m-auto size-5 text-muted" />}
+      {file.length && <span className={clsx(MEDIA_BADGE, "bottom-1 right-1")}>{file.length}</span>}
+    </div>
+  );
+}
+
+// ── L1: making a folder link ────────────────────────────────────────────────────────────────────
+
+function RailEntry({
+  label,
+  count,
+  shared,
+  active,
+}: {
+  label: string;
+  count: number;
+  shared?: boolean;
+  active?: boolean;
+}) {
+  return (
+    <span
+      className={clsx(
+        "flex h-8 items-center gap-2 rounded-lg px-2 text-sm",
+        active ? "bg-accent/12 font-medium text-accent" : "text-muted",
+      )}
+    >
+      <Folder className="size-4 shrink-0" />
+      <span className="flex-1 truncate">{label}</span>
+      {shared && <Link2 className="size-3.5 shrink-0 text-accent" aria-label="Linkkel megosztva" />}
+      <span className="text-xs tabular-nums">{count}</span>
+    </span>
+  );
+}
+
+function Rail({ marked }: { marked: boolean }) {
+  return (
+    <aside className="flex w-52 shrink-0 flex-col gap-0.5">
+      <span className="flex items-center px-2 text-2xs uppercase tracking-wider text-muted">
+        <span className="flex-1">Saját mappák</span>
+        <FolderPlus className="size-3.5" />
+      </span>
+      <RailEntry label="Cimboráknak" count={4} shared={marked} active />
+      <RailEntry label="Receptek" count={1} />
+      <RailEntry label="Munka" count={7} shared={marked} />
+    </aside>
+  );
+}
+
+function FolderMenu({ quickCopy }: { quickCopy: boolean }) {
+  const row = "flex items-center gap-2.5 rounded-lg px-2 py-1.5 text-sm";
+  const groups: [typeof Folder, string, boolean?][][] = [
+    quickCopy
+      ? [
+          [Link2, "Link másolása"],
+          [Users, "Megosztás linkkel…"],
+        ]
+      : [[Users, "Megosztás linkkel…"]],
+    [
+      [Clock, "Megőrzés"],
+      [Pencil, "Átnevezés"],
+    ],
+    [[Trash2, "Törlés", true]],
+  ];
+  return (
+    <div className={clsx(SURFACE.menu, "w-56 shadow-float")}>
+      {groups.map((g, gi) => (
+        <div key={gi}>
+          {gi > 0 && <div className="my-1 h-px bg-border" />}
+          {g.map(([Icon, label, danger], i) => (
+            <span
+              key={label}
+              className={clsx(row, danger && "text-danger", gi === 0 && i === 0 && "bg-fg/8")}
+            >
+              <Icon className={clsx("size-4 shrink-0", danger ? "text-danger" : "text-muted")} />
+              {label}
+            </span>
+          ))}
+        </div>
+      ))}
+    </div>
+  );
+}
+
+function LinkRow({ views, pw }: { views: number; pw?: boolean }) {
+  return (
+    <div className={clsx(SURFACE.card, "flex flex-col gap-2 p-2.5")}>
+      <div className="flex items-center gap-2">
+        <Link2 className="size-4 shrink-0 text-muted" />
+        <span className="flex-1 truncate text-xs text-muted">
+          https://siftlode.example/watch/Qk7vN2x…
+        </span>
+        <span className={ICON}>
+          <Copy className="size-4" />
+        </span>
+        <span className={ICON}>
+          <Lock className={clsx("size-4", pw && "text-accent")} />
+        </span>
+        <span className={ICON}>
+          <Trash2 className="size-4 text-danger" />
+        </span>
+      </div>
+      <div className="flex items-center gap-2 text-xs text-muted">
+        <Eye className="size-3" /> {views} megtekintés
+        {pw && <span className="rounded-sm bg-surface px-1.5 py-0.5">jelszóval</span>}
+        <span className="rounded-sm bg-surface px-1.5 py-0.5">letölthető</span>
+      </div>
+    </div>
+  );
+}
+
+function FolderShareDialog() {
+  return (
+    <div className={clsx(SURFACE.panel, "flex w-full max-w-md flex-col gap-3 p-4")}>
+      <div className="flex items-center">
+        <h4 className="flex-1 font-semibold">Mappa megosztása · Cimboráknak</h4>
+        <X className="size-4 text-muted" />
+      </div>
+      <div className="flex items-center gap-2 text-sm font-medium">
+        <Link2 className="size-4 text-muted" /> Megosztás linkkel
+      </div>
+      <p className="-mt-2 text-xs text-muted">
+        A link birtokában bárki megnézheti a mappát — fiók nélkül is. Mindig a mappa aktuális
+        tartalmát látja: az ide később tett fájlokat is, a kivetteket már nem.
+      </p>
+      <LinkRow views={3} />
+      <span className={clsx(buttonClass({ variant: "outline", size: "sm" }), "self-start")}>
+        <Link2 className="size-4" /> Link létrehozása
+      </span>
+    </div>
+  );
+}
+
+// ── L2: the page the link opens ─────────────────────────────────────────────────────────────────
+
+function Brand() {
+  return <span className="text-xs text-muted">Megosztva a Siftlode-dal</span>;
+}
+
+function PageFrame({ phone, children }: { phone?: boolean; children: ReactNode }) {
+  return (
+    <div
+      className={clsx(
+        "flex flex-col gap-3 rounded-xl bg-bg p-3 ring-1 ring-border",
+        phone ? "w-[23.5rem] max-w-full" : "w-full",
+      )}
+    >
+      {children}
+    </div>
+  );
+}
+
+function Header() {
+  return (
+    <div className="flex items-end gap-2">
+      <div className="flex-1">
+        <h4 className="text-lg font-bold">Cimboráknak</h4>
+        <span className="text-xs text-muted">4 fájl · 76 MB</span>
+      </div>
+      <Brand />
+    </div>
+  );
+}
+
+function Player({ file }: { file: File }) {
+  return (
+    <div className="flex flex-col gap-1.5">
+      <div
+        className={clsx(
+          "relative aspect-video w-full overflow-hidden rounded-xl bg-linear-to-br to-card",
+          file.hue,
+        )}
+      >
+        <span className="absolute inset-x-3 bottom-2 flex items-center gap-2 text-xs text-fg/80">
+          <Play className="size-3.5" /> 0:41 / {file.length}
+          <span className="h-1 flex-1 rounded-full bg-fg/20">
+            <span className="block h-full w-1/3 rounded-full bg-accent" />
+          </span>
+        </span>
+      </div>
+      <div className="flex items-center gap-2">
+        <span className="flex-1 truncate text-sm font-semibold">{file.name}</span>
+        <span className={buttonClass({ variant: "outline", size: "xs" })}>
+          <Download className="size-3.5" /> Letöltés
+        </span>
+      </div>
+    </div>
+  );
+}
+
+function ListPage({ phone, playing }: { phone?: boolean; playing?: boolean }) {
+  return (
+    <PageFrame phone={phone}>
+      <Header />
+      {playing && <Player file={FILES[1]!} />}
+      <div className="flex flex-col">
+        {FILES.map((f, i) => (
+          <div
+            key={f.name}
+            className={clsx(
+              "flex items-center gap-3 rounded-lg px-1.5 py-1.5",
+              playing && i === 1 && "bg-accent/10",
+            )}
+          >
+            <Thumb file={f} className="h-10 w-16" />
+            <div className="min-w-0 flex-1">
+              <div className="truncate text-sm">{f.name}</div>
+              <div className="text-xs text-muted">{f.size}</div>
+            </div>
+            {!f.doc && (
+              <span className={ICON}>
+                <Play className="size-4" />
+              </span>
+            )}
+            <span className={ICON}>
+              <Download className="size-4" />
+            </span>
+          </div>
+        ))}
+      </div>
+    </PageFrame>
+  );
+}
+
+function GridPage() {
+  return (
+    <PageFrame>
+      <Header />
+      <div className="grid grid-cols-2 gap-3">
+        {FILES.map((f) => (
+          <div key={f.name} className="flex flex-col gap-1">
+            <Thumb file={f} className="aspect-video w-full" />
+            <span className="truncate text-sm">{f.name}</span>
+            <span className="flex items-center gap-1 text-xs text-muted">
+              <span className="flex-1">{f.size}</span>
+              <Download className="size-3.5" />
+            </span>
+          </div>
+        ))}
+      </div>
+    </PageFrame>
+  );
+}
+
+function DownloadOnlyPage() {
+  return (
+    <PageFrame>
+      <Header />
+      <div className="flex flex-col divide-y divide-border/60">
+        {FILES.map((f) => (
+          <div key={f.name} className="flex items-center gap-3 py-2">
+            <FileText className="size-4 shrink-0 text-muted" />
+            <span className="min-w-0 flex-1 truncate text-sm">{f.name}</span>
+            <span className="text-xs text-muted tabular-nums">{f.size}</span>
+            <span className={buttonClass({ variant: "outline", size: "xs" })}>
+              <Download className="size-3.5" /> Letöltés
+            </span>
+          </div>
+        ))}
+      </div>
+    </PageFrame>
+  );
+}
+
+// ── The round ───────────────────────────────────────────────────────────────────────────────────
+
+export function LinksRound() {
+  return (
+    <div className="flex flex-col gap-6">
+      <Decision
+        id="open-links-l1"
+        code="L1"
+        title="Making a folder link"
+        question="A folder's right-click menu gets the share. Does it also get the one-click “Link másolása” a file row has, or only the dialog? The dialog is the file's Share dialog with only its link half (sharing with a user stays per file)."
+        now="Only a file can be shared; a folder menu has Retention, Rename and Delete."
+      >
+        <div className="grid gap-4 xl:grid-cols-3">
+          <Variant
+            letter="A"
+            name="Copy link + Share with link…"
+            recommended
+            why="The same two entries a file row has, in the same order: one click copies the folder's link (making one the first time), the dialog is for a password, an expiry or revoking it."
+          >
+            <Sample label="the folder's right-click menu">
+              <div className="flex gap-3">
+                <Rail marked={false} />
+                <FolderMenu quickCopy />
+              </div>
+            </Sample>
+          </Variant>
+          <Variant
+            letter="B"
+            name="Share with link… only"
+            why="One entry: every folder link goes through the dialog. One more click for the common case, nothing gained but a shorter menu."
+          >
+            <Sample label="the folder's right-click menu">
+              <FolderMenu quickCopy={false} />
+            </Sample>
+          </Variant>
+          <Variant
+            letter="A/B"
+            name="…the dialog either opens"
+            recommended
+            why="It says what a folder link means: whoever has it sees the folder as it is NOW, files put in later included."
+          >
+            <FolderShareDialog />
+          </Variant>
+        </div>
+      </Decision>
+
+      <Decision
+        id="open-links-l2"
+        code="L2"
+        title="The page a folder link opens"
+        question="Signed out, often on a phone: the folder's name and its files. Each video plays right there, each file downloads (when the link allows it); a document is never opened as a web page, only downloaded."
+        now="A /watch link opens one file: its player, title and Download."
+      >
+        <div className="grid gap-4 xl:grid-cols-3">
+          <Variant
+            letter="A"
+            name="A list; Play opens the player above it"
+            recommended
+            why="The watch page's player, over a list you can read on a phone: a long name gets a full line, the playing row stays lit, the next one is one tap away. Mostly videos from a phone — this is the YouTube-playlist shape people know."
+          >
+            <Sample label="desktop, a video playing">
+              <ListPage playing />
+            </Sample>
+            <Sample label="phone">
+              <ListPage phone />
+            </Sample>
+          </Variant>
+          <Variant
+            letter="B"
+            name="Cards"
+            why="Pictures first, like the Files grid. Nicer for a folder of photos-like clips, but names truncate to a line and a document is a grey card."
+          >
+            <GridPage />
+          </Variant>
+          <Variant
+            letter="C"
+            name="A download list only"
+            why="Like a file-transfer page: name, size, Letöltés. Simplest, but a friend has to download a clip to see it — on a phone, on mobile data."
+          >
+            <DownloadOnlyPage />
+          </Variant>
+        </div>
+      </Decision>
+
+      <Decision
+        id="open-links-l3"
+        code="L3"
+        title="Seeing which folders are shared"
+        question="A folder link keeps showing whatever you put in the folder later. Does the rail mark a folder that has a live link, so you know where you drop files in public?"
+        now="Nothing marks a shared file or folder."
+      >
+        <div className="grid gap-4 xl:grid-cols-2">
+          <Variant
+            letter="A"
+            name="A link mark beside the count"
+            recommended
+            why="A folder link is the one place where moving a file in publishes it. The mark is quiet (one small icon), and it goes when the last link is revoked or runs out."
+          >
+            <Rail marked />
+          </Variant>
+          <Variant
+            letter="B"
+            name="No mark"
+            why="A cleaner rail. You learn a folder is shared only from its Share dialog."
+          >
+            <Rail marked={false} />
+          </Variant>
+        </div>
+      </Decision>
+    </div>
+  );
+}

frontend/src/i18n/locales/en/downloads.json

@@ -118,7 +118,9 @@
     "newPassword": "New password",
     "savePassword": "Save",
     "removePassword": "Delete",
-    "removePasswordConfirm": "This makes the link public — anyone with the URL can watch it without a password."
+    "removePasswordConfirm": "This makes the link public — anyone with the URL can watch it without a password.",
+    "folderTitle": "Share folder · {{name}}",
+    "folderLinkHint": "Anyone with the link can see the folder — no account needed. They see what is in it when they open it: files you put in later too, not the ones you take out."
   },
   "confirm": {
     "cancelTitle": "Cancel download?",

frontend/src/i18n/locales/en/errors.json

@@ -199,6 +199,7 @@
     "share_own": "That's already your download",
     "share_password_required": "This link needs a password",
     "share_unfinished": "Only a finished download can be shared",
+    "share_folder_kind": "Only a folder of your own can be shared by link",
     "smtp_failed": "The email couldn't be sent — check the SMTP settings",
     "smtp_off": "SMTP isn't configured",
     "spec_not_object": "The profile's settings are malformed",

frontend/src/i18n/locales/en/files.json

@@ -84,7 +84,9 @@
     "deleteBodyEmpty": "The folder is empty. Nothing else changes.",
     "deleteBody_one": "Its file goes back to the folder it came from, and its retention starts again from today.",
     "deleteBody_other": "Its {{count}} files go back to the folders they came from, and their retention starts again from today.",
-    "deleteAction": "Delete folder"
+    "deleteAction": "Delete folder",
+    "shareLink": "Share with a link…",
+    "shared": "Shared with a link"
   },
   "layout": {
     "label": "View",

frontend/src/i18n/locales/hu/downloads.json

@@ -118,7 +118,9 @@
     "newPassword": "Új jelszó",
     "savePassword": "Mentés",
     "removePassword": "Törlés",
-    "removePasswordConfirm": "Ezzel a link publikus lesz — jelszó nélkül bárki megnézheti, akinek megvan az URL."
+    "removePasswordConfirm": "Ezzel a link publikus lesz — jelszó nélkül bárki megnézheti, akinek megvan az URL.",
+    "folderTitle": "Mappa megosztása · {{name}}",
+    "folderLinkHint": "A link birtokában bárki megnézheti a mappát — fiók nélkül is. Azt látja, ami megnyitáskor benne van: a később betett fájlokat is, a kivetteket már nem."
   },
   "confirm": {
     "cancelTitle": "Megszakítod a letöltést?",

frontend/src/i18n/locales/hu/errors.json

@@ -199,6 +199,7 @@
     "share_own": "Ez már a te letöltésed",
     "share_password_required": "Ehhez a linkhez jelszó kell",
     "share_unfinished": "Csak befejezett letöltés osztható meg",
+    "share_folder_kind": "Linkkel csak saját mappa osztható meg",
     "smtp_failed": "Nem sikerült elküldeni a levelet — ellenőrizd az SMTP-beállításokat",
     "smtp_off": "Az SMTP nincs beállítva",
     "spec_not_object": "A profil beállításai hibás formátumúak",

frontend/src/i18n/locales/hu/files.json

@@ -84,7 +84,9 @@
     "deleteBodyEmpty": "A mappa üres. Más nem változik.",
     "deleteBody_one": "A benne lévő fájl visszakerül abba a mappába, ahonnan jött, és a megőrzési ideje mától újraindul.",
     "deleteBody_other": "A benne lévő {{count}} fájl visszakerül abba a mappába, ahonnan jött, és a megőrzési idejük mától újraindul.",
-    "deleteAction": "Mappa törlése"
+    "deleteAction": "Mappa törlése",
+    "shareLink": "Megosztás linkkel…",
+    "shared": "Linkkel megosztva"
   },
   "layout": {
     "label": "Nézet",

frontend/src/lib/api/downloads.ts

@@ -151,6 +151,13 @@ export interface ShareLink {
   created_at: string | null;
 }
 
+// What a new link is made with; an omitted `allow_download` takes the server's default (true).
+export interface NewShareLink {
+  allow_download?: boolean;
+  expires_days?: number | null;
+  password?: string;
+}
+
 // The width of every user-supplied display name on a job, mirroring the backend's DISPLAY_TEXT_MAX
 // (backend/app/models.py) so an input can stop the user rather than letting the server truncate in
 // silence. The two are held together by `downloads.contract.test.ts` — a number living in two
@@ -258,16 +265,21 @@ export const downloadsApi = {
   shareRecipients: (): Promise<ShareRecipient[]> => req("/api/downloads/recipients"),
   // Public watch links (share by link).
   downloadLinks: (jobId: number): Promise<ShareLink[]> => req(`/api/downloads/${jobId}/links`),
-  createDownloadLink: (
-    jobId: number,
-    body: { allow_download?: boolean; expires_days?: number | null; password?: string },
-  ): Promise<ShareLink> =>
+  createDownloadLink: (jobId: number, body: NewShareLink): Promise<ShareLink> =>
     req(`/api/downloads/${jobId}/links`, { method: "POST", body: JSON.stringify(body) }),
   updateDownloadLink: (
     linkId: number,
     patch: { allow_download?: boolean; expires_days?: number | null; password?: string },
   ): Promise<ShareLink> =>
     req(`/api/downloads/links/${linkId}`, { method: "PATCH", body: JSON.stringify(patch) }),
+  // A link to one of the user's own folders: it opens whatever is in the folder when it is opened.
+  folderLinks: (folderId: number): Promise<ShareLink[]> =>
+    req(`/api/downloads/folders/${folderId}/links`),
+  createFolderLink: (folderId: number, body: NewShareLink): Promise<ShareLink> =>
+    req(`/api/downloads/folders/${folderId}/links`, {
+      method: "POST",
+      body: JSON.stringify(body),
+    }),
   revokeDownloadLink: (linkId: number): Promise<{ ok: true; deleted: number }> =>
     req(`/api/downloads/links/${linkId}`, { method: "DELETE" }),
   // The library player's resume checkpoint. A position too early or too close to the end clears it.

frontend/src/lib/api/files.ts

@@ -18,6 +18,8 @@ export interface FileFolder {
   count: number; // its done files
   size_bytes: number;
   created_at: string | null;
+  // A live public link opens it: whatever is moved in is shown to whoever holds the link.
+  has_link: boolean;
 }
 
 // The most files one list answers with (backend `routes/files.py` MAX_LIST, held equal by

frontend/src/lib/downloads.test.ts

@@ -7,14 +7,19 @@ import { describe, it, expect, beforeEach, vi } from "vitest";
 import { QueryClient } from "@tanstack/react-query";
 
 // vi.mock is hoisted above these consts, so the mock fns must live in a hoisted block too.
-const { downloadLinks, createDownloadLink, copyText, notify } = vi.hoisted(() => ({
-  downloadLinks: vi.fn(),
-  createDownloadLink: vi.fn(),
-  copyText: vi.fn(),
-  notify: vi.fn(),
-}));
+const { downloadLinks, createDownloadLink, folderLinks, createFolderLink, copyText, notify } =
+  vi.hoisted(() => ({
+    downloadLinks: vi.fn(),
+    createDownloadLink: vi.fn(),
+    folderLinks: vi.fn(),
+    createFolderLink: vi.fn(),
+    copyText: vi.fn(),
+    notify: vi.fn(),
+  }));
 
-vi.mock("./api", () => ({ api: { downloadLinks, createDownloadLink } }));
+vi.mock("./api", () => ({
+  api: { downloadLinks, createDownloadLink, folderLinks, createFolderLink },
+}));
 vi.mock("./clipboard", () => ({ copyText }));
 vi.mock("./notifications", () => ({ notify }));
 
@@ -38,6 +43,8 @@ function qc() {
 beforeEach(() => {
   downloadLinks.mockReset();
   createDownloadLink.mockReset();
+  folderLinks.mockReset();
+  createFolderLink.mockReset();
   copyText.mockReset().mockResolvedValue(true);
   notify.mockReset();
 });
@@ -48,7 +55,7 @@ describe("quickShareLink", () => {
     createDownloadLink.mockResolvedValue({ id: 7, url: "/watch/tok7" });
     const openSpy = vi.spyOn(window, "open").mockReturnValue(null);
 
-    const url = await quickShareLink(qc(), { id: 42 }, t);
+    const url = await quickShareLink(qc(), { kind: "file", id: 42 }, t);
 
     expect(url).toBe(`${origin}/watch/tok7`);
     // Minted with an EMPTY body so the backend default (allow_download=true) applies.
@@ -65,7 +72,7 @@ describe("quickShareLink", () => {
   it("reuses an existing link instead of minting a duplicate", async () => {
     downloadLinks.mockResolvedValue([{ id: 3, url: "/watch/old" }]);
 
-    const url = await quickShareLink(qc(), { id: 1 }, t);
+    const url = await quickShareLink(qc(), { kind: "file", id: 1 }, t);
 
     expect(url).toBe(`${origin}/watch/old`);
     expect(createDownloadLink).not.toHaveBeenCalled();
@@ -78,7 +85,7 @@ describe("quickShareLink", () => {
       { id: 3, url: "/watch/older" },
     ]);
 
-    const url = await quickShareLink(qc(), { id: 1 }, t);
+    const url = await quickShareLink(qc(), { kind: "file", id: 1 }, t);
 
     expect(url).toBe(`${origin}/watch/older`);
     expect(createDownloadLink).not.toHaveBeenCalled();
@@ -90,7 +97,7 @@ describe("quickShareLink", () => {
     createDownloadLink.mockResolvedValue({ id: 8, url: "/watch/new" });
     const client = qc();
 
-    const url = await quickShareLink(client, { id: 6 }, t);
+    const url = await quickShareLink(client, { kind: "file", id: 6 }, t);
 
     expect(url).toBe(`${origin}/watch/new`);
     expect(copyText).toHaveBeenCalledWith(`${origin}/watch/new`);
@@ -100,11 +107,29 @@ describe("quickShareLink", () => {
     ]);
   });
 
+  it("a folder's link is the folder's own: listed, made and cached under the folder", async () => {
+    folderLinks.mockResolvedValue([]);
+    createFolderLink.mockResolvedValue({ id: 9, url: "/watch/fold" });
+    const client = qc();
+    client.setQueryData(qk.fileFolders(), []);
+
+    const url = await quickShareLink(client, { kind: "folder", id: 5 }, t);
+
+    expect(url).toBe(`${origin}/watch/fold`);
+    expect(folderLinks).toHaveBeenCalledWith(5);
+    expect(createFolderLink).toHaveBeenCalledWith(5, {});
+    expect(downloadLinks).not.toHaveBeenCalled();
+    expect(createDownloadLink).not.toHaveBeenCalled();
+    expect(client.getQueryData(qk.folderLinks(5))).toEqual([{ id: 9, url: "/watch/fold" }]);
+    // The rail's mark of a shared folder is asked for again.
+    expect(client.getQueryState(qk.fileFolders())!.isInvalidated).toBe(true);
+  });
+
   it("still toasts (warning) with the open action when the clipboard copy fails", async () => {
     downloadLinks.mockResolvedValue([{ id: 5, url: "/watch/x" }]);
     copyText.mockResolvedValue(false);
 
-    const url = await quickShareLink(qc(), { id: 2 }, t);
+    const url = await quickShareLink(qc(), { kind: "file", id: 2 }, t);
 
     expect(url).toBe(`${origin}/watch/x`); // the link is never a dead end
     const arg = firstToast();
@@ -117,7 +142,7 @@ describe("quickShareLink", () => {
     downloadLinks.mockResolvedValue([]);
     createDownloadLink.mockRejectedValue(new Error("boom"));
 
-    const url = await quickShareLink(qc(), { id: 9 }, t);
+    const url = await quickShareLink(qc(), { kind: "file", id: 9 }, t);
 
     expect(url).toBeNull();
     expect(copyText).not.toHaveBeenCalled();

frontend/src/lib/downloads.ts

@@ -1,6 +1,6 @@
 import type { QueryClient } from "@tanstack/react-query";
 import { qk } from "./queryKeys";
-import { api } from "./api";
+import { api, type NewShareLink } from "./api";
 import { copyText } from "./clipboard";
 import { notify } from "./notifications";
 import { notifyActionError } from "./actionErrors";
@@ -16,28 +16,51 @@ export function invalidateDownloads(qc: QueryClient) {
   qc.invalidateQueries({ queryKey: qk.storageUsage() });
 }
 
+// What a public link opens: one file, or one of the user's own folders (whatever is in it when the
+// link is opened).
+export type LinkTarget = { kind: "file"; id: number } | { kind: "folder"; id: number };
+
+export const linksKey = (target: LinkTarget) =>
+  target.kind === "file" ? qk.downloadLinks(target.id) : qk.folderLinks(target.id);
+
+export const fetchLinks = (target: LinkTarget) =>
+  target.kind === "file" ? api.downloadLinks(target.id) : api.folderLinks(target.id);
+
+export const makeLink = (target: LinkTarget, body: NewShareLink) =>
+  target.kind === "file"
+    ? api.createDownloadLink(target.id, body)
+    : api.createFolderLink(target.id, body);
+
+/** After a link was made, changed or revoked: its list, and — for a folder — the rail's mark of the
+ *  folders a live link opens (an expiry change can end it too). */
+export function invalidateLinks(qc: QueryClient, target: LinkTarget) {
+  void qc.invalidateQueries({ queryKey: linksKey(target) });
+  if (target.kind === "folder") void qc.invalidateQueries({ queryKey: qk.fileFolders() });
+}
+
 // One-click share: the row's Share button turns "share this" into a single action.
-// Ensure the job has a public link (minting one on demand — omitting `allow_download` so the backend
-// default makes it downloadable), copy it to the clipboard, and toast with an "open in new tab"
-// action. A copy failure still toasts (warning) WITH that action, so the link is never a dead end.
-// Advanced controls (password, expiry, revoke, share-with-a-user) live in the Share dialog. Returns
-// the shared URL, or null if link creation failed — so the caller/tests can react to the outcome.
+// Ensure the file or folder has a public link (minting one on demand — omitting `allow_download` so
+// the backend default makes it downloadable), copy it to the clipboard, and toast with an "open in
+// new tab" action. A copy failure still toasts (warning) WITH that action, so the link is never a dead
+// end. Advanced controls (password, expiry, revoke, share-with-a-user) live in the Share dialog.
+// Returns the shared URL, or null if link creation failed — so the caller/tests can react to the outcome.
 export async function quickShareLink(
   qc: QueryClient,
-  job: { id: number },
+  target: LinkTarget,
   t: (key: string) => string,
 ): Promise<string | null> {
   let path;
   try {
     const existing = await qc.fetchQuery({
-      queryKey: qk.downloadLinks(job.id),
-      queryFn: () => api.downloadLinks(job.id),
+      queryKey: linksKey(target),
+      queryFn: () => fetchLinks(target),
     });
     // The newest link whose address can still be shown; one that cannot is no use to copy.
     path = existing.find((l) => l.url)?.url;
     if (!path) {
-      const made = await api.createDownloadLink(job.id, {}); // omit allow_download → backend default (true)
-      qc.setQueryData(qk.downloadLinks(job.id), [made, ...existing]);
+      const made = await makeLink(target, {}); // omit allow_download → backend default (true)
+      qc.setQueryData(linksKey(target), [made, ...existing]);
+      if (target.kind === "folder") void qc.invalidateQueries({ queryKey: qk.fileFolders() });
       path = made.url;
     }
     if (!path) throw new Error("the new link came back without its address");

frontend/src/lib/queryKeys.ts

@@ -77,6 +77,7 @@ export const qk = {
   downloadProfiles: () => ["download-profiles"] as const,
   downloadCredentials: () => ["download-credentials"] as const,
   downloadLinks: (jobId: number) => ["download-links", jobId] as const,
+  folderLinks: (folderId: number) => ["folder-links", folderId] as const,
   dlQuota: (userId: number) => ["dl-quota", userId] as const,
   storyboard: (jobId: number) => ["storyboard", jobId] as const,