app/routes/media.tsx

Functions

Imports

It imports app/components/media/detail-panel.tsx, app/components/media/format.ts, app/components/media/results.tsx, app/components/project-tabs.tsx, app/lib/context.ts, app/lib/media.server.ts, app/lib/projects.server.ts, app/lib/roles.ts, app/lib/sites.server.ts. No module of this repo imports it.

Source

1// The media library for one site (stage 3, and the v0.4.0 writes): browse, search, filter by tag,
2// upload, edit a file's alt text and tags, move files to the trash and back, delete for good, over the
3// site API's media group. The files are the site's, in its own storage and served by it; this page is
4// only the screen. A Reader browses, an Editor also uploads, edits alt text and tags and uses the
5// trash, and only the Owner deletes for good or empties the trash, and then only what the site's own
6// reference check lets go. Each write is optional per site (the site's meta says which); the screen
7// shows only what the site offers.
8//
9// The tiles, the bulk bar, the drop zone and the confirm dialog are Capsomer's; the details are a panel
10// on the page, not a modal dialog, so they work without script (each edit is a form that posts).
11// Selection and the bulk bar need script. Capsomer's own inspector autosaves through a client call;
12// this page keeps server forms so the versioned writes, their refusals and the authorship record are
13// one path. There are no folders: the dustinedwards media schema has none.
14
15import { useEffect, useRef, useState } from "react";
16import { Form, Link, useFetcher, useNavigation, useRevalidator } from "react-router";
17import { Alert, Banner } from "capsomer/react/banner";
18import { BulkBar } from "capsomer/react/bulk-bar";
19import { Button } from "capsomer/react/button";
20import { ConfirmDialog } from "capsomer/react/confirm-dialog";
21import { Disclosure } from "capsomer/react/disclosure";
22import { DropZone } from "capsomer/react/drop-zone";
23import { Empty } from "capsomer/react/empty";
24import { Field } from "capsomer/react/field";
25import { Panel } from "capsomer/react/panel";
26import { Status } from "capsomer/react/status";
27import { PageHead } from "capsomer/react/page-head";
28
29import { ProjectTabs } from "~/components/project-tabs";
30import { MediaDetailPanel } from "~/components/media/detail-panel";
31import { size } from "~/components/media/format";
32import { BulkResultPanel, TrashEmptiedPanel, type FileOutcome } from "~/components/media/results";
33
34import { getEnv, getViewer } from "~/lib/context";
35import {
36  cleanMediaTag,
37  deleteMedia,
38  emptyMediaTrash,
39  listMedia,
40  listTrash,
41  mediaDetail,
42  mediaMeta,
43  parseMediaTags,
44  restoreMedia,
45  setMediaAlt,
46  setMediaTags,
47  trashMedia,
48  uploadMedia,
49  type MediaOffers,
50  type WriteOutcome,
51} from "~/lib/media.server";
52import { requireSiteProject } from "~/lib/projects.server";
53import { can } from "~/lib/roles";
54import { siteConnection, siteEntry, SiteNotConnected } from "~/lib/sites.server";
55import { SiteApiError } from "@dustinedwards/site-api/client";
56
57import type { Route } from "./+types/media";
58
59export function meta({ loaderData: data }: Route.MetaArgs) {
60  return [{ title: data ? `Media · ${data.project.name} · Carrel` : "Carrel" }];
61}
62
63function reason(error: unknown): string | null {
64  if (error instanceof SiteNotConnected) return `This site is not connected yet: ${error.detail}`;
65  if (error instanceof SiteApiError) {
66    if (error.status === 501) return "This site has no media library yet.";
67    return error.body ? `The site refused: ${error.body.message}` : `The site answered ${error.status}.`;
68  }
69  return null;
70}
71
72export async function loader({ params, request, context }: Route.LoaderArgs) {
73  const env = getEnv(context);
74  const project = await requireSiteProject(env.DB, getViewer(context), params.project, "read");
75  const url = new URL(request.url);
76  const q = url.searchParams.get("q")?.trim().slice(0, 200) ?? "";
77  const cursor = url.searchParams.get("cursor") ?? "";
78  const id = url.searchParams.get("id") ?? "";
79  const tagText = url.searchParams.get("tag")?.trim() ?? "";
80  const tag = tagText ? cleanMediaTag(tagText) : null;
81  const wantsTrash = url.searchParams.get("view") === "trash";
82  const base = {
83    project: { slug: project.slug, name: project.name, site: siteEntry(project.site).name, mentions: can(project.role, "read_mentions") },
84    canUpload: can(project.role, "edit"),
85    canDelete: can(project.role, "delete_media"),
86    q,
87    cursor,
88  };
89  const noOffers: MediaOffers = { alt: false, tags: false, trash: false };
90  const empty = {
91    limits: null,
92    offers: noOffers,
93    view: "library" as "library" | "trash",
94    tag: "",
95    tagInvalid: false,
96    trashFiles: [] as { id: string; label: string }[],
97    trashMore: false,
98    items: [],
99    nextCursor: null,
100    detail: null,
101    missingId: null,
102  };
103  const connection = siteConnection(env, project.site);
104  if (connection.state !== "connected") return { ...base, ...empty, unavailable: `This site is not connected yet: ${connection.detail}` };
105  try {
106    // The limits first: a site on the v0.1.0 contract has no media routes to ask.
107    const meta = await mediaMeta(env, project);
108    if (!meta) return { ...base, ...empty, unavailable: "This site has no media library yet." };
109    const { limits, offers } = meta;
110    // A site that offers no trash has no Trash view; a site that keeps no tags ignores the tag filter.
111    const view: "library" | "trash" = wantsTrash && offers.trash ? "trash" : "library";
112    const [list, detail, trash] = await Promise.all([
113      listMedia(env, project, { q: q || undefined, tag: offers.tags && tag ? tag : undefined, trashed: view === "trash" ? "only" : undefined, cursor: cursor || undefined, limit: 48 }),
114      id ? mediaDetail(env, project, id) : Promise.resolve(null),
115      // Emptying the trash names every file it will delete, so the Owner's Trash view lists them all (up to one request's worth).
116      view === "trash" && can(project.role, "delete_media") ? listTrash(env, project) : Promise.resolve(null),
117    ]);
118    return {
119      ...base,
120      unavailable: null,
121      limits,
122      offers,
123      view,
124      tag: offers.tags && tag ? tag : "",
125      tagInvalid: Boolean(offers.tags && tagText && !tag),
126      trashFiles: trash ? trash.items.map((i) => ({ id: i.id, label: i.filename ?? i.id })) : [],
127      trashMore: trash?.more ?? false,
128      items: list.items,
129      nextCursor: list.nextCursor,
130      detail,
131      missingId: id && !detail ? id : null,
132    };
133  } catch (error) {
134    const message = reason(error);
135    if (message === null) throw error;
136    return { ...base, ...empty, unavailable: message };
137  }
138}
139
140type WriteIntent = "set-alt" | "set-tags" | "trash" | "restore";
141type Refusal = { id: string; message: string; usedBy: { type: string; id: string; title: string; detail: string }[] };
142
143type ActionResult =
144  | { intent: WriteIntent; ok: true; id: string; recorded: boolean }
145  | { intent: WriteIntent; ok: false; id: string; message: string; conflict: boolean }
146  | { intent: "empty-trash"; needsConfirm: true }
147  | { intent: "empty-trash"; ok: true; deleted: string[]; refused: Refusal[]; more: boolean; unrecorded: number }
148  | { intent: "empty-trash"; ok: false; message: string }
149  | { intent: "upload"; ok: true; id: string; name: string }
150  | { intent: "upload"; ok: false; message: string }
151  | { intent: "delete"; needsConfirm: true; id: string }
152  | { intent: "delete"; ok: true; id: string }
153  | { intent: "delete"; ok: false; id: string; message: string; usedBy: { type: string; id: string; title: string; detail: string }[] };
154
155export async function action({ params, request, context }: Route.ActionArgs): Promise<ActionResult> {
156  const env = getEnv(context);
157  const viewer = getViewer(context);
158  const form = await request.formData();
159  const intent = String(form.get("intent") ?? "");
160  if (intent === "upload") {
161    const project = await requireSiteProject(env.DB, viewer, params.project, "edit");
162    const file = form.get("file");
163    if (!(file instanceof File) || file.size === 0) return { intent, ok: false, message: "No file was chosen." };
164    try {
165      const outcome = await uploadMedia(env, project, { viewer }, { name: file.name, type: file.type, size: file.size, bytes: () => file.arrayBuffer() }, String(form.get("alt") ?? ""));
166      return outcome.ok ? { intent, ok: true, id: outcome.item.id, name: outcome.item.filename ?? outcome.item.id } : { intent, ok: false, message: outcome.message };
167    } catch (error) {
168      const message = reason(error);
169      if (message === null) throw error;
170      return { intent, ok: false, message };
171    }
172  }
173  if (intent === "delete") {
174    const project = await requireSiteProject(env.DB, viewer, params.project, "delete_media");
175    const id = String(form.get("id") ?? "");
176    // Two steps, as a first publish is: the file leaves the site's storage, and no undo brings it back.
177    if (form.get("confirm") !== "delete") return { intent, needsConfirm: true, id };
178    try {
179      const outcome = await deleteMedia(env, project, { viewer }, id);
180      return outcome.ok ? { intent, ok: true, id } : { intent, ok: false, id, message: outcome.message, usedBy: outcome.usedBy };
181    } catch (error) {
182      const message = reason(error);
183      if (message === null) throw error;
184      return { intent, ok: false, id, message, usedBy: [] };
185    }
186  }
187  if (intent === "set-alt" || intent === "set-tags" || intent === "trash" || intent === "restore") {
188    const project = await requireSiteProject(env.DB, viewer, params.project, "edit");
189    const id = String(form.get("id") ?? "");
190    const version = String(form.get("version") ?? "");
191    const outcome = await writeOutcome(async (): Promise<WriteOutcome> => {
192      if (!version) return { ok: false, conflict: false, message: "Carrel does not know this file's version, so nothing was sent. Reload the page and try again." };
193      if (intent === "set-alt") return setMediaAlt(env, project, { viewer }, id, String(form.get("alt") ?? ""), version);
194      if (intent === "trash") return trashMedia(env, project, { viewer }, id, version);
195      if (intent === "restore") return restoreMedia(env, project, { viewer }, id, version);
196      const parsed = parseMediaTags(String(form.get("tags") ?? ""));
197      if (!parsed.ok) return { ok: false, conflict: false, message: parsed.message };
198      return setMediaTags(env, project, { viewer }, id, parsed.tags, version);
199    });
200    return outcome.ok ? { intent, ok: true, id, recorded: outcome.recorded } : { intent, ok: false, id, message: outcome.message, conflict: outcome.conflict };
201  }
202  if (intent === "empty-trash") {
203    const project = await requireSiteProject(env.DB, viewer, params.project, "delete_media");
204    // Two steps, like delete: the page names every file first, because the files leave the site's storage for good.
205    if (form.get("confirm") !== "empty") return { intent, needsConfirm: true };
206    try {
207      return { intent, ok: true, ...(await emptyMediaTrash(env, project, { viewer })) };
208    } catch (error) {
209      const message = error instanceof Response ? await error.text() : reason(error);
210      if (message === null) throw error;
211      return { intent, ok: false, message: message || "The site did not empty the trash." };
212    }
213  }
214  throw new Response("Bad request", { status: 400 });
215}
216
217/** A site that is not connected or cannot be reached, said plainly for a write instead of a crash. */
218async function writeOutcome(run: () => Promise<WriteOutcome>): Promise<WriteOutcome> {
219  try {
220    return await run();
221  } catch (error) {
222    const message = reason(error);
223    if (message === null) throw error;
224    return { ok: false, conflict: false, message };
225  }
226}
227
228type BulkOp = "trash" | "restore" | "delete" | "add-tags" | "remove-tags";
229
230const WRITE_INTENTS: readonly string[] = ["set-alt", "set-tags", "trash", "restore"];
231
232export default function MediaLibrary({ loaderData, actionData }: Route.ComponentProps) {
233  const { project, canUpload, canDelete, q, tag, tagInvalid, view, offers, trashFiles, trashMore, unavailable, limits, items, nextCursor, detail, missingId } = loaderData;
234  const navigation = useNavigation();
235  const revalidator = useRevalidator();
236  const busy = navigation.state !== "idle";
237  const deleter = useFetcher<ActionResult>();
238  const [confirming, setConfirming] = useState<HTMLElement | null>(null);
239  const [asking, setAsking] = useState(false);
240  const [emptying, setEmptying] = useState(false);
241  // The selection is by file id; a file no longer listed (a filter, the trash, a delete) drops out of it.
242  const [selected, setSelected] = useState<string[]>([]);
243  const [bulkTags, setBulkTags] = useState("");
244  const [bulkResult, setBulkResult] = useState<{ what: string; outcomes: FileOutcome[] } | null>(null);
245  const resultRef = useRef<HTMLElement>(null);
246  useEffect(() => {
247    const el = resultRef.current;
248    if (bulkResult && el) {
249      el.tabIndex = -1;
250      el.focus();
251    }
252  }, [bulkResult]);
253
254  const trashView = view === "trash";
255  const here = (over: Record<string, string>) => {
256    const params = new URLSearchParams();
257    const next = { q, tag, view: trashView ? "trash" : "", id: "", cursor: "", ...over };
258    for (const [k, v] of Object.entries(next)) if (v) params.set(k, v);
259    const text = params.toString();
260    return text ? `?${text}` : ".";
261  };
262  const result = deleter.data ?? actionData;
263  // Without script the Delete button posts and the server asks; with script the dialog asks first.
264  const serverAsks = result?.intent === "delete" && "needsConfirm" in result ? result.id : null;
265  const refused = result?.intent === "delete" && "ok" in result && !result.ok ? result : null;
266  const written = result && WRITE_INTENTS.includes(result.intent) && "ok" in result ? (result as Extract<ActionResult, { intent: WriteIntent }>) : null;
267  const emptied = result?.intent === "empty-trash" ? result : null;
268  const name = detail ? (detail.filename ?? detail.id) : "";
269
270  // Selection and the bulk bar: only where the site has the v0.4.0 routes and the person may write.
271  const bulkOffered = canUpload && (offers.tags || offers.trash);
272  const versions = new Map(items.map((i) => [i.id, i.version ?? ""]));
273  const chosen = items.filter((i) => selected.includes(i.id));
274  const label = (i: { id: string; filename: string | null }) => i.filename ?? i.id;
275  const run = (op: BulkOp, what: string) => async (picked: readonly { id: string; label: string }[]) => {
276    if ((op === "add-tags" || op === "remove-tags") && bulkTags.trim() === "") throw new Error("Type a tag first.");
277    const form = new FormData();
278    form.set("op", op);
279    if (op === "add-tags" || op === "remove-tags") form.set("tags", bulkTags);
280    for (const p of picked) form.append("item", `${p.id}\t${versions.get(p.id) ?? ""}`);
281    const response = await fetch(`/p/${encodeURIComponent(project.slug)}/media/bulk`, { method: "POST", body: form, headers: { accept: "application/json" } });
282    const body = (await response.json().catch(() => null)) as { results?: FileOutcome[]; error?: string } | null;
283    if (!response.ok || !body?.results) throw new Error(body?.error ?? `The server answered ${response.status}.`);
284    setBulkResult({ what, outcomes: body.results });
285    setSelected([]);
286    void revalidator.revalidate();
287  };
288  const done = "Done. The result for each file is listed above the files.";
289  const bulkActions = [
290    ...(offers.tags
291      ? [
292          { id: "add-tags", label: "Add tag", said: done, run: run("add-tags", "Add tag") },
293          { id: "remove-tags", label: "Remove tag", said: done, run: run("remove-tags", "Remove tag") },
294        ]
295      : []),
296    ...(offers.trash
297      ? [trashView ? { id: "restore", label: "Restore", said: done, run: run("restore", "Restore") } : { id: "trash", label: "Move to trash", said: done, run: run("trash", "Move to trash") }]
298      : []),
299    ...(canDelete
300      ? [
301          {
302            id: "delete",
303            label: "Delete for good",
304            destructive: true,
305            confirmTitle: "Delete {n} file{s} from the site?",
306            confirmLead: `Each file below leaves ${project.site}'s storage, and nothing in Carrel can bring it back. The site's check refuses any file a post still uses, and that file stays.`,
307            confirmAction: "Delete {n} file{s}",
308            said: done,
309            run: run("delete", "Delete for good"),
310          },
311        ]
312      : []),
313  ];
314
315  return (
316    <div className="app-page">
317      <PageHead title={project.name} lead={`The files on ${project.site}, kept and served by the site. Carrel only shows them here.`} />
318
319      <ProjectTabs slug={project.slug} current="media" mentions={project.mentions} />
320
321      {unavailable ? (
322        <Banner tone="warn">{unavailable}</Banner>
323      ) : (
324        <>
325          {/* An alert on a refusal, a status on success: one is an event to act on, the other a confirmation. */}
326          {actionData?.intent === "upload" ? (
327            actionData.ok ? (
328              <Banner tone="ok">
329                Uploaded {actionData.name}. <Link to={here({ id: actionData.id })}>See its details</Link>.
330              </Banner>
331            ) : (
332              <Alert tone="crit">{actionData.message}</Alert>
333            )
334          ) : null}
335          {result?.intent === "delete" && "ok" in result && result.ok ? <Banner tone="ok">Deleted {result.id} from the site.</Banner> : null}
336
337          {bulkResult ? <BulkResultPanel bulkResult={bulkResult} resultRef={resultRef} onClear={() => setBulkResult(null)} /> : null}
338
339          {emptied && "ok" in emptied && emptied.ok ? <TrashEmptiedPanel emptied={emptied} /> : null}
340          {emptied && "ok" in emptied && !emptied.ok ? <Alert tone="crit">{emptied.message}</Alert> : null}
341          {emptied && "needsConfirm" in emptied ? (
342            <Alert tone="warn" title={`Delete everything in the trash from ${project.site}?`}>
343              <Form method="post" className="app-form">
344                <p>These files leave the site's storage, and nothing in Carrel can bring them back. The site refuses any a post still uses.</p>
345                <ul className="app-list">
346                  {trashFiles.map((f) => (
347                    <li key={f.id}>{f.label}</li>
348                  ))}
349                </ul>
350                {trashMore ? <p>The trash holds more than one request handles; the rest stay until you empty it again.</p> : null}
351                <input type="hidden" name="confirm" value="empty" />
352                <div className="app-actions">
353                  <Button type="submit" name="intent" value="empty-trash" variant="danger" pending={busy}>
354                    Empty the trash
355                  </Button>
356                  <Link to={here({})} className="cap-btn">
357                    Keep them
358                  </Link>
359                </div>
360              </Form>
361            </Alert>
362          ) : null}
363
364          <div className="app-media" data-detail={detail || missingId ? "" : undefined}>
365            <Panel
366              title={trashView ? "Trash" : "Files"}
367              count={items.length}
368              src={`On ${project.site}`}
369              flush
370              actions={
371                trashView && canDelete && trashFiles.length > 0 ? (
372                  <Form method="post">
373                    <Button
374                      type="submit"
375                      name="intent"
376                      value="empty-trash"
377                      variant="danger"
378                      size="sm"
379                      onClick={(event) => {
380                        event.preventDefault();
381                        setConfirming(event.currentTarget);
382                        setEmptying(true);
383                      }}
384                    >
385                      Empty the trash
386                    </Button>
387                  </Form>
388                ) : undefined
389              }
390            >
391              <div className="cap-panel-pad">
392                {offers.trash ? (
393                  <nav className="app-actions" aria-label="Library or trash">
394                    <Link to={here({ view: "" })} className="cap-btn" data-variant={trashView ? undefined : "primary"} aria-current={trashView ? undefined : "page"}>
395                      Library
396                    </Link>
397                    <Link to={here({ view: "trash" })} className="cap-btn" data-variant={trashView ? "primary" : undefined} aria-current={trashView ? "page" : undefined}>
398                      Trash
399                    </Link>
400                  </nav>
401                ) : null}
402                <Form method="get" className="app-filters" role="search" aria-label="Search media">
403                  {trashView ? <input type="hidden" name="view" value="trash" /> : null}
404                  <Field label="Search">
405                    <input className="cap-input" type="search" name="q" defaultValue={q} placeholder="Name, address or alt text" />
406                  </Field>
407                  {offers.tags ? (
408                    <Field label="Tag" error={tagInvalid ? "A tag is lower case words joined by hyphens." : undefined}>
409                      <input className="cap-input" type="text" name="tag" defaultValue={tag} autoComplete="off" placeholder="Only files with this tag" />
410                    </Field>
411                  ) : null}
412                  <div className="app-actions">
413                    <Button type="submit" variant="primary">
414                      Search
415                    </Button>
416                    {q || tag ? (
417                      <Link to={trashView ? "?view=trash" : "."} className="cap-btn">
418                        Clear
419                      </Link>
420                    ) : null}
421                  </div>
422                </Form>
423                {canUpload && limits && !trashView ? (
424                  <Disclosure summary="Upload a file" defaultOpen={actionData?.intent === "upload" && !actionData.ok}>
425                    <Form method="post" encType="multipart/form-data" className="app-form">
426                      <DropZone name="file" accept={limits.types.join(",")} maxBytes={limits.maxBytes} maxFiles={1} hint={`Up to ${size(limits.maxBytes)}: ${limits.types.map((t) => t.split("/")[1]).join(", ")}.`} />
427                      <Field label="Alt text" help="What the image shows, for someone who cannot see it.">
428                        <input className="cap-input" type="text" name="alt" autoComplete="off" />
429                      </Field>
430                      <div className="app-actions">
431                        <Button type="submit" name="intent" value="upload" variant="primary" pending={busy && navigation.formData?.get("intent") === "upload"}>
432                          Upload
433                        </Button>
434                      </div>
435                    </Form>
436                  </Disclosure>
437                ) : null}
438              </div>
439              {items.length === 0 ? (
440                <Empty
441                  kind={q || tag ? "no-match" : "nothing-yet"}
442                  flush
443                  title={q || tag ? "Nothing matches" : trashView ? "The trash is empty" : "No files yet"}
444                  action={q || tag ? <Link to={trashView ? "?view=trash" : "."} className="cap-btn">Clear the search</Link> : undefined}
445                >
446                  {q || tag
447                    ? "Try the name, the address, the alt text or another tag."
448                    : trashView
449                      ? "Files you move to the trash wait here until you restore them or empty the trash."
450                      : canUpload
451                        ? "Upload the first file above, or drop one into a post's editor."
452                        : "Files appear here once someone uploads them."}
453                </Empty>
454              ) : (
455                <div className="cap-panel-pad">
456                  <div className="cap-media" data-size="m">
457                    <ul className="cap-media-grid" role="list" aria-label={trashView ? "Files in the trash" : "Files"}>
458                      {items.map((item) => {
459                        const image = item.contentType.startsWith("image/");
460                        const itemLabel = label(item);
461                        return (
462                          <li key={item.id} className="cap-media-tile" data-active={detail?.id === item.id ? "" : undefined} data-selected={selected.includes(item.id) ? "" : undefined}>
463                            {/* The whole tile is the link, named for the file: one tab stop per file. */}
464                            <Link to={here({ id: item.id })} className="cap-media-open" preventScrollReset aria-describedby={`flags-${item.id}`} aria-current={detail?.id === item.id ? "true" : undefined}>
465                              <span className="cap-media-thumb">
466                                {image ? (
467                                  <img src={item.src} alt="" loading="lazy" decoding="async" width={320} height={320} />
468                                ) : (
469                                  <span className="cap-media-doc" aria-hidden="true">
470                                    {(item.contentType.split("/").pop() ?? "file").slice(0, 5).toUpperCase()}
471                                  </span>
472                                )}
473                              </span>
474                              <span className="cap-media-name" title={item.id}>
475                                {itemLabel}
476                              </span>
477                              <span className="cap-media-meta">
478                                {(item.contentType.split("/").pop() ?? "").toUpperCase()} · {size(item.bytes)}
479                              </span>
480                            </Link>
481                            <span className="cap-media-flags" id={`flags-${item.id}`}>
482                              {image && !item.alt && !trashView ? <Status tone="warn">No alt text</Status> : null}
483                              {item.tags && item.tags.length > 0 ? <span className="cap-muted">{item.tags.join(", ")}</span> : null}
484                            </span>
485                            {bulkOffered ? (
486                              <label className="cap-media-check">
487                                <input
488                                  type="checkbox"
489                                  value={item.id}
490                                  aria-label={`Select ${itemLabel}`}
491                                  checked={selected.includes(item.id)}
492                                  onChange={(event) => setSelected((now) => (event.target.checked ? [...now, item.id] : now.filter((id) => id !== item.id)))}
493                                />
494                                <span className="cap-media-check-box" aria-hidden="true">
495                                  <svg viewBox="0 0 16 16">
496                                    <path fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round" d="M3.5 8.5l3 3 6-7" />
497                                  </svg>
498                                </span>
499                                <span className="cap-media-check-word" aria-hidden="true">
500                                  Selected
501                                </span>
502                              </label>
503                            ) : null}
504                          </li>
505                        );
506                      })}
507                    </ul>
508                  </div>
509                  {nextCursor ? (
510                    <p className="app-more">
511                      <Link to={here({ cursor: nextCursor })} className="cap-btn">
512                        Next page
513                      </Link>
514                    </p>
515                  ) : null}
516                </div>
517              )}
518            </Panel>
519
520            {missingId ? (
521              <Panel title="Details">
522                <p>
523                  The site has no file {missingId}. It may have been deleted. <Link to={here({})}>Back to the library</Link>.
524                </p>
525              </Panel>
526            ) : null}
527
528            {detail ? (
529              <MediaDetailPanel
530                detail={detail}
531                site={project.site}
532                offers={offers}
533                canUpload={canUpload}
534                canDelete={canDelete}
535                written={written}
536                refused={refused}
537                serverAsks={serverAsks}
538                busy={busy}
539                pending={busy ? String(navigation.formData?.get("intent") ?? "") : null}
540                here={here}
541                onAskDelete={(button) => {
542                  setConfirming(button);
543                  setAsking(true);
544                }}
545              />
546            ) : null}
547          </div>
548
549          {bulkOffered && items.length > 0 ? (
550            <BulkBar
551              items={chosen.map((i) => ({ id: i.id, label: label(i) }))}
552              total={items.length}
553              onSelectAll={() => setSelected(items.map((i) => i.id))}
554              onClear={() => setSelected([])}
555              actions={bulkActions}
556            >
557              {offers.tags ? (
558                <span className="cap-bulk-field">
559                  <label htmlFor="bulk-tags">Tag</label>
560                  <input className="cap-input" id="bulk-tags" value={bulkTags} onChange={(event) => setBulkTags(event.target.value)} autoComplete="off" />
561                </span>
562              ) : null}
563            </BulkBar>
564          ) : null}
565
566          <ConfirmDialog
567            open={asking}
568            title={`Delete ${name} from the site?`}
569            lead="The file leaves the site's storage, and nothing in Carrel can bring it back."
570            body={detail && detail.usedBy.length > 0 ? ["The site's check lists places that use it, and may refuse."] : []}
571            action="Delete from the site"
572            returnTo={confirming}
573            perform={async () => {
574              if (!detail) return;
575              await deleter.submit({ intent: "delete", id: detail.id, confirm: "delete" }, { method: "post" });
576            }}
577            onClose={() => setAsking(false)}
578          />
579
580          <ConfirmDialog
581            open={emptying}
582            title={`Delete ${trashFiles.length} ${trashFiles.length === 1 ? "file" : "files"} in the trash?`}
583            lead={`Every file below leaves ${project.site}'s storage, and nothing in Carrel can bring it back. The site refuses any file a post still uses, and that file stays in the trash.`}
584            body={[...trashFiles.map((f) => f.label), ...(trashMore ? ["The trash holds more than one request handles; the rest stay until you empty it again."] : [])]}
585            action="Empty the trash"
586            returnTo={confirming}
587            perform={async () => {
588              await deleter.submit({ intent: "empty-trash", confirm: "empty" }, { method: "post" });
589            }}
590            onClose={() => setEmptying(false)}
591          />
592        </>
593      )}
594    </div>
595  );
596}