app/routes/admin.media._index.tsx

Functions

Imports

It imports app/components/admin/live-notice.tsx, app/components/admin/media-confirm-dialogs.tsx, app/components/admin/media-display-bar.tsx, app/components/admin/media-empty-state.tsx, app/components/admin/media-facets.tsx, app/components/admin/media-grid.tsx, app/components/admin/media-inspector.tsx, app/components/admin/media-search.tsx, app/components/admin/media-trash-controls.tsx, app/components/admin/media-upload-actions.tsx, app/components/admin/toast.tsx, app/db/index.ts, app/lib/blog-listing.mjs, app/lib/context.ts, app/lib/destructive.mjs, app/lib/media/actions.server.ts, app/lib/media/classify.mjs, app/lib/media/core.server.ts, app/lib/media/resolvers.server.ts, app/lib/media/tags.mjs, app/lib/media/tile-nav.mjs, app/lib/media/upload-contract.mjs, app/lib/media/usage.mjs, app/lib/media/view.mjs, app/lib/negotiate.mjs, app/lib/timing.ts. No module of this repo imports it.

Source

1import { useRef, useState } from "react";
2
3import {
4  Link,
5  data,
6  useLocation,
7  useNavigation,
8  useSearchParams,
9  type ShouldRevalidateFunctionArgs,
10} from "react-router";
11
12import { timed, timedLoader } from "~/lib/timing";
13import { Banner } from "capsomer/react/banner";
14import { Panel } from "capsomer/react/panel";
15
16import { PageHead } from "capsomer/react/page-head";
17import { MediaConfirmDialogs } from "~/components/admin/media-confirm-dialogs";
18import { MediaDisplayBar } from "~/components/admin/media-display-bar";
19import { MediaEmptyState } from "~/components/admin/media-empty-state";
20import { MediaGrid } from "~/components/admin/media-grid";
21import { MediaFacets } from "~/components/admin/media-facets";
22import { MediaInspector } from "~/components/admin/media-inspector";
23import { LiveNotice } from "~/components/admin/live-notice";
24import { MediaSearch } from "~/components/admin/media-search";
25import { MediaToast } from "~/components/admin/toast";
26import { MediaTrashControls } from "~/components/admin/media-trash-controls";
27import { MediaMaintenance, MediaUploadForm } from "~/components/admin/media-upload-actions";
28import {
29  mediaRecord,
30  mediaRefsFor,
31  mediaLensCounts,
32  mediaTagCounts,
33  mediaTrashedCount,
34  mediaTwins,
35  trashedMediaKeys,
36} from "~/db";
37import { readPage } from "~/lib/blog-listing.mjs";
38import { getEnv } from "~/lib/context";
39import { prefersType } from "~/lib/negotiate.mjs";
40import templateRefs from "../../content/generated/template-refs.json";
41import { digestFromKey } from "~/lib/media/classify.mjs";
42import {
43  lensNoteFor,
44  suggestedAlt,
45  suggestedTags,
46  usageStateOf,
47} from "~/lib/media/usage.mjs";
48import { CONFIRM_FIELD, confirmationSatisfied } from "~/lib/destructive.mjs";
49import { parseTags } from "~/lib/media/tags.mjs";
50import {
51  folderPrefix,
52  hrefWith,
53  isModified,
54  onlyDisplayChanged,
55  readDisplayAxes,
56  readView,
57} from "~/lib/media/view.mjs";
58import { rovingKey } from "~/lib/media/tile-nav.mjs";
59import { MEDIA_PAGE_SIZE, isViewable, listMedia, thumbUrl } from "~/lib/media/core.server";
60import {
61  bulkTagMedia,
62  bulkTrashMedia,
63  deleteMedia,
64  emptyMediaTrash,
65  mediaRowTotal,
66  rebuildMedia,
67  restoreMedia,
68  setMediaAlt,
69  setMediaTagsFromForm,
70  trashMedia,
71} from "~/lib/media/actions.server";
72import { resolveCitations } from "~/lib/media/resolvers.server";
73import { uploadErrorSentence } from "~/lib/media/upload-contract.mjs";
74import type { Route } from "./+types/admin.media._index";
75
76export function meta() {
77  return [{ title: "Media · Admin" }, { name: "robots", content: "noindex" }];
78}
79
80const ROLE_IDS = new Set(["content", "generated", "brand", "icon"]);
81
82/** About six rows fit under the search bar before the arrow keys scroll the highlight away. */
83const PALETTE_RESULTS = 6;
84
85/** A build-time import: the scan needs a filesystem and the Worker has none. */
86const TEMPLATE_REFS: Record<string, string[]> = templateRefs.refs;
87const TEMPLATE_REF_KEYS = Object.keys(TEMPLATE_REFS);
88
89/** The one listing query: the page, the picker and the palette each ask it with their own options. */
90function listingFor(env: Env, url: URL, picker: boolean) {
91  const page = readPage(url.searchParams.get("page"));
92  const view = readView(url.searchParams);
93  const requested = url.searchParams.get("role");
94  const filter = requested === "all" || (requested && ROLE_IDS.has(requested))
95    ? requested
96    : "content";
97  const q = view.q;
98  /* A thunk, so the caller's timer brackets the query itself. */
99  const list = () => listMedia(env, {
100    page,
101    limit: picker ? 200 : MEDIA_PAGE_SIZE,
102    ...(picker
103      ? {}
104      : {
105          sort: view.sort,
106          dir: view.dir,
107          tag: view.tag,
108          trashed: view.trash,
109          lens: view.lens,
110          templateKeys: TEMPLATE_REF_KEYS,
111        }),
112    // In SQL, never merged with `role`: a `?role=` must not widen what may be inserted.
113    insertableOnly: picker,
114    ...(picker
115      ? {}
116      : {
117          ...(!view.trash && ROLE_IDS.has(filter) ? { role: filter } : {}),
118          ...(q ? { q } : {}),
119        }),
120  });
121  return { page, view, filter, q, list };
122}
123
124/**
125 * The palette asks for JSON, which a document loader cannot return, so it is answered here, after
126 * the admin layout's middleware has authenticated the request. No usage, citations or twins: three
127 * more queries per keystroke for nothing the palette shows.
128 */
129export const middleware: Route.MiddlewareFunction[] = [
130  async ({ request, context }, next) => {
131    const url = new URL(request.url);
132    if (url.searchParams.get("palette") !== "1" || !prefersType(request, "application/json")) {
133      return next();
134    }
135    const listed = await listingFor(getEnv(context), url, false).list();
136    return Response.json(
137      {
138        results: listed.objects.slice(0, PALETTE_RESULTS).map((object) => ({
139          key: object.key,
140          url: object.url,
141          name: object.originalName ?? object.key.split("/").pop() ?? object.key,
142          dir: folderPrefix(object.key),
143          size: object.size,
144          viewable: isViewable(object.kind),
145        })),
146        hasMore: listed.objects.length > PALETTE_RESULTS || listed.hasMore,
147      },
148      { headers: { "cache-control": "private, no-store" } },
149    );
150  },
151];
152
153export async function loader({ request, context }: Route.LoaderArgs) {
154  const env = getEnv(context);
155  return timedLoader(context, async (timings) => {
156    const url = new URL(request.url);
157    const picker = url.searchParams.get("picker") === "1";
158
159    const { page, view, filter, q, list } = listingFor(env, url, picker);
160    const listed = await timed(timings, "d1_list_media", list);
161    const keys = listed.objects.map((object) => object.key);
162
163    if (picker) {
164      return {
165        picker: true as const,
166        objects: listed.objects.map((object) => ({
167          key: object.key,
168          url: object.url,
169          thumb: thumbUrl(object.key, 320),
170          alt: object.alt,
171        })),
172        truncated: listed.hasMore,
173      };
174    }
175
176    /* Starts here, not at the loader top: earlier branches return and would leave a promise unawaited. */
177    const [resolution, refs, twins, trashedCount, tagCounts, lensCounts] = await timed(
178      timings,
179      "group_listing",
180      () =>
181        Promise.all([
182          timed(timings, "resolve_citations", () => resolveCitations(env, keys)),
183          timed(timings, "d1_media_refs", () => mediaRefsFor(env, keys)),
184          timed(timings, "d1_media_twins", () => mediaTwins(env)),
185          timed(timings, "d1_trashed_count", () => mediaTrashedCount(env)),
186          timed(timings, "d1_tag_counts", () => mediaTagCounts(env)),
187          timed(timings, "d1_lens_counts", () => mediaLensCounts(env, TEMPLATE_REF_KEYS)),
188        ]),
189    );
190
191    /* A parameter, not a route: static keys contain `/`. */
192    const detailKey = url.searchParams.get("key");
193    let detail = null;
194    if (detailKey) {
195      const row = await mediaRecord(env, detailKey);
196      if (row) {
197        const [detailResolution, detailRefs] = await Promise.all([
198          resolveCitations(env, [row.key]),
199          mediaRefsFor(env, [row.key]),
200        ]);
201        detail = {
202          found: true as const,
203          key: row.key,
204          url: row.storage === "static" ? row.key : `/media/${row.key}`,
205          thumb: thumbUrl(row.key, 640),
206          viewable: isViewable(row.kind),
207          deletable: row.storage !== "static",
208          originalName: row.originalName,
209          role: row.role,
210          storage: row.storage,
211          kind: row.kind,
212          mime: row.mime,
213          bytes: row.bytes ?? 0,
214          width: row.width,
215          height: row.height,
216          alt: row.alt,
217          caption: row.caption,
218          uploadedAt: row.uploadedAt,
219          placeholder: row.placeholder,
220          refs: (detailRefs.get(row.key) ?? []).map((ref) => ({
221            sourceType: ref.sourceType,
222            sourceId: ref.sourceId,
223            form: ref.form,
224            detail: ref.detail,
225          })),
226          citations: detailResolution.citations.get(row.key) ?? [],
227          scanComplete: detailResolution.complete,
228          tags: parseTags(row.tags ?? ""),
229          trashedAt: row.trashedAt,
230          hash: digestFromKey(row.key),
231          twins: twins.get(row.key) ?? [],
232          usage: usageStateOf({
233            postRefs: (detailRefs.get(row.key) ?? []).length,
234            citations: (detailResolution.citations.get(row.key) ?? []).length,
235            templateRefs: (TEMPLATE_REFS[row.key] ?? []).length,
236          }),
237          templateRefs: TEMPLATE_REFS[row.key] ?? [],
238          /** Suggested, never applied: a filename posing as alt hides a defect an empty field shows. */
239          altSuggestion: suggestedAlt(row.originalName ?? row.key.split("/").pop() ?? row.key),
240          tagSuggestions: suggestedTags(row.key).filter(
241            (t) => !parseTags(row.tags ?? "").includes(t),
242          ),
243        };
244      } else {
245        detail = { found: false as const, key: detailKey };
246      }
247    }
248
249    const uploaded = url.searchParams.get("uploaded");
250    const uploadError = uploadErrorSentence(url.searchParams.get("upload-error"));
251
252    const payload = {
253      picker: false as const,
254      /* The duplicates lens is filtered in SQL before the page is cut, so every row here belongs. */
255      objects: listed.objects.map((object) => ({
256        ...object,
257        thumb: thumbUrl(object.key, 320),
258        viewable: isViewable(object.kind),
259        citations: resolution.citations.get(object.key) ?? [],
260        refCount: (refs.get(object.key) ?? []).length,
261        tags: parseTags(object.tags ?? ""),
262        twinCount: (twins.get(object.key) ?? []).length,
263        usage: usageStateOf({
264          postRefs: (refs.get(object.key) ?? []).length,
265          citations: (resolution.citations.get(object.key) ?? []).length,
266          templateRefs: (TEMPLATE_REFS[object.key] ?? []).length,
267        }),
268        templateRefs: TEMPLATE_REFS[object.key] ?? [],
269      })),
270      page,
271      hasMore: listed.hasMore,
272      filter,
273      q,
274      detail,
275      uploaded,
276      uploadError,
277      scanComplete: resolution.complete,
278      scanFailed: resolution.failed,
279      view,
280      modified: isModified(view),
281      trashedCount,
282      tagCounts,
283
284      lensCounts: {
285        ...lensCounts,
286        duplicates: twins.size,
287      },
288
289      /* The scan sees only literal paths and no external links, hence unattached, not unused. */
290      usageNote:
291        "Usage is asked three ways: what a post cites, what the artifact scan " +
292        "finds, and what repository code references. A file none of them names is " +
293        "unattached rather than unused, because a path the code builds at runtime " +
294        "is invisible to the scan and an external site can link anything.",
295    };
296
297    /* Not timing serialization: the framework encodes turbo-stream, so a stringify would mislead. */
298    return data(payload);
299  });
300}
301
302/*
303 * The dispatch stays here and each intent's work is in lib/media/actions.server.ts. The three
304 * destructive intents check the typed confirmation in their own branch, where check:destructive
305 * reads it, before the handler runs.
306 */
307export async function action({ request, context }: Route.ActionArgs) {
308  const env = getEnv(context);
309  const form = await request.formData();
310  const intent = form.get("intent");
311
312  if (intent === "bulk-add-tag" || intent === "bulk-remove-tag") {
313    return bulkTagMedia(env, form, intent);
314  }
315
316  if (intent === "set-tags") return setMediaTagsFromForm(env, form);
317
318  if (intent === "bulk-trash") return bulkTrashMedia(env, form);
319
320  if (intent === "trash") return trashMedia(env, form);
321
322  if (intent === "restore") return restoreMedia(env, form);
323
324  /* Runs the single delete's citation scan, fails closed on it, then claims per key, so a cited asset is kept. */
325  if (intent === "empty-trash") {
326    const keys = await trashedMediaKeys(env);
327
328    /* Checked here: the confirm button renders enabled without script. */
329    const typed = String(form.get(CONFIRM_FIELD) ?? "").trim();
330    if (!confirmationSatisfied(typed, keys.length)) {
331      return {
332        message:
333          `Nothing was deleted. The trash holds ${keys.length} file(s) and the ` +
334          `confirmation read ${typed || "(blank)"}. Type the count exactly to confirm.`,
335        refused: true,
336      };
337    }
338    return emptyMediaTrash(env, keys);
339  }
340
341  if (intent === "set-alt") return setMediaAlt(env, form);
342
343  if (intent === "rebuild") {
344    /* A rebuild prunes rows whose source is gone. Count 1: the rows at risk are unknowable beforehand. */
345    const typed = String(form.get(CONFIRM_FIELD) ?? "").trim();
346    if (!confirmationSatisfied(typed, 1)) {
347      return { confirmRebuild: await mediaRowTotal(env) };
348    }
349    return rebuildMedia(env);
350  }
351
352  if (intent === "delete") {
353    const key = String(form.get("key") ?? "");
354
355    /* Checked here, not in `onSubmit`, so it holds without script; an uncited object passes the rest. */
356    const typed = String(form.get(CONFIRM_FIELD) ?? "").trim();
357    if (!confirmationSatisfied(typed, 1)) {
358      return { confirmDelete: key };
359    }
360    return deleteMedia(env, key);
361  }
362
363  return data(
364    {
365      message: `Nothing was done: ${String(intent ?? "(none)")} is not an action this page knows.`,
366      refused: true,
367    },
368    { status: 400 },
369  );
370}
371
372export function shouldRevalidate({
373  currentUrl,
374  nextUrl,
375  formMethod,
376  defaultShouldRevalidate,
377}: ShouldRevalidateFunctionArgs) {
378  // A submission always revalidates, so no later edit can make a write invisible.
379  if (formMethod && formMethod !== "GET") return defaultShouldRevalidate;
380  if (onlyDisplayChanged(currentUrl, nextUrl)) return false;
381  return defaultShouldRevalidate;
382}
383
384export default function AdminMedia({
385  loaderData,
386  actionData,
387}: Route.ComponentProps) {
388  /* Every hook before the early return: the JSON branches below return null. */
389  const [displayParams] = useSearchParams();
390  const navigation = useNavigation();
391  const here = useLocation();
392  const [selected, setSelected] = useState<string[]>([]);
393  const [confirmingTrash, setConfirmingTrash] = useState(false);
394  /* The grid tile focus was last on: the roving tab stop follows it. */
395  const [activeTile, setActiveTile] = useState("");
396  const anchor = useRef<string | null>(null);
397
398  /* Narrowed by key: the 400 answer carries only `message`, so the union no longer has these on every arm. */
399  const confirmRebuild =
400    actionData && "confirmRebuild" in actionData ? actionData.confirmRebuild : undefined;
401  const confirmDelete =
402    actionData && "confirmDelete" in actionData ? actionData.confirmDelete : undefined;
403  const message = actionData && "message" in actionData ? actionData.message : undefined;
404  const refused = !!actionData && "refused" in actionData && actionData.refused === true;
405
406  if (loaderData.picker) return null;
407  const {
408    objects,
409    page,
410    hasMore,
411    filter,
412    q,
413    detail,
414    uploaded,
415    uploadError,
416    scanComplete,
417    scanFailed,
418    view: loadedView,
419    modified,
420    trashedCount,
421    tagCounts,
422    lensCounts,
423    usageNote,
424  } = loaderData;
425
426  /* From the URL: `shouldRevalidate` skips the loader for these, so its copy is stale. */
427  const view = { ...loadedView, ...readDisplayAxes(displayParams) };
428
429  const pending =
430    navigation.state === "loading" &&
431    navigation.location != null &&
432    !onlyDisplayChanged(
433      new URL(`${here.pathname}${here.search}`, "https://admin.local"),
434      new URL(
435        `${navigation.location.pathname}${navigation.location.search}`,
436        "https://admin.local",
437      ),
438    );
439
440  const visible = objects.map((o) => o.key);
441  const chosen = selected.filter((key) => visible.includes(key));
442  const allShown = visible.length > 0 && chosen.length === visible.length;
443  const toggle = (key: string) =>
444    setSelected((was) => (was.includes(key) ? was.filter((k) => k !== key) : [...was, key]));
445
446  const selectRange = (key: string, shift: boolean) => {
447    const from = anchor.current;
448    anchor.current = key;
449    if (!shift || !from || from === key) {
450      toggle(key);
451      return;
452    }
453    const a = visible.indexOf(from);
454    const b = visible.indexOf(key);
455    if (a < 0 || b < 0) {
456      toggle(key);
457      return;
458    }
459    const span = visible.slice(Math.min(a, b), Math.max(a, b) + 1);
460    setSelected((was) => [...new Set([...was, ...span])]);
461  };
462
463
464  const linkTo = (over: Parameters<typeof hrefWith>[1] = {}) => hrefWith(view, over);
465
466  return (
467    <div className="app-page">
468      <PageHead
469        title="Media"
470        lead={`${loaderData.lensCounts.all} file${loaderData.lensCounts.all === 1 ? "" : "s"}, ${loaderData.trashedCount} in trash`}
471        actions={<MediaMaintenance />}
472      />
473
474      <Panel title="Upload">
475        <MediaUploadForm />
476      </Panel>
477
478      <MediaSearch q={q} total={lensCounts.all} view={view} linkTo={linkTo} />
479
480      <MediaFacets
481        view={view}
482        lensCounts={lensCounts}
483        trashedCount={trashedCount}
484        tagCounts={tagCounts}
485        linkTo={linkTo}
486      />
487
488      <MediaDisplayBar
489        visible={visible}
490        allShown={allShown}
491        setSelected={setSelected}
492        q={q}
493        filter={filter}
494        modified={modified}
495        view={view}
496        linkTo={linkTo}
497      />
498
499      {!view.trash && lensNoteFor(view.lens) ? (
500        <Banner
501          tone="info"
502          actions={
503            <Link to={linkTo({ lens: "", page: 1 })} className="cap-btn">
504              Show everything
505            </Link>
506          }
507        >
508          {lensNoteFor(view.lens)}
509        </Banner>
510      ) : null}
511
512      <MediaTrashControls view={view} trashedCount={trashedCount} linkTo={linkTo} />
513
514      {/* Usage is what the renderer emitted, so a route-referenced asset reads as uncited. */}
515      {scanComplete ? (
516        <Banner tone="neutral">
517          {usageNote} <strong>Treat not referenced as unknown, not as safe to delete.</strong>
518        </Banner>
519      ) : null}
520
521      {/* With the inspector open the result is announced inside it: the page behind a modal is inert. */}
522      <LiveNotice
523        status={
524          uploaded ? (
525            <>
526              Uploaded {uploaded}. <Link to={linkTo({ key: uploaded })}>Open it</Link>.
527            </>
528          ) : message && !refused && !detail ? (
529            message
530          ) : undefined
531        }
532        alert={uploadError ? uploadError : message && refused && !detail ? message : undefined}
533      />
534
535      {!scanComplete ? (
536        <Banner tone="warn" title="Usage could not be determined">
537          The reference scan failed ({scanFailed.join(", ")}), so nothing below is labeled unused and
538          every delete will be refused until it succeeds.
539        </Banner>
540      ) : null}
541
542      {detail ? (
543        <MediaInspector detail={detail} linkTo={linkTo} message={message} refused={refused} />
544      ) : null}
545
546      {objects.length === 0 ? (
547        <MediaEmptyState q={q} lensCounts={lensCounts} linkTo={linkTo} />
548      ) : (
549        <MediaGrid
550          objects={objects}
551          chosen={chosen}
552          selectRange={selectRange}
553          setSelected={setSelected}
554          setConfirmingTrash={setConfirmingTrash}
555          linkTo={linkTo}
556          view={view}
557          pending={pending}
558          scanComplete={scanComplete}
559          tagCounts={tagCounts}
560          tabStop={rovingKey(visible, activeTile, view.key)}
561          setActive={setActiveTile}
562        />
563      )}
564
565      <MediaConfirmDialogs
566        chosen={chosen}
567        confirmingTrash={confirmingTrash}
568        setConfirmingTrash={setConfirmingTrash}
569        confirmRebuild={confirmRebuild}
570        confirmDelete={confirmDelete}
571        linkTo={linkTo}
572      />
573
574      <MediaToast />
575
576      {hasMore || page > 1 ? (
577        <nav className="cap-pagination" aria-label="Media pages">
578          <ul className="cap-pagination-list">
579            {page > 1 ? (
580              <li>
581                <Link className="cap-page" data-kind="prev" rel="prev" to={linkTo({ page: page - 1 })}>
582                  Previous
583                </Link>
584              </li>
585            ) : null}
586            <li className="cap-pagination-where">Page {page}</li>
587            {hasMore ? (
588              <li>
589                <Link className="cap-page" data-kind="next" rel="next" to={linkTo({ page: page + 1 })}>
590                  Next
591                </Link>
592              </li>
593            ) : null}
594          </ul>
595        </nav>
596      ) : null}
597    </div>
598  );
599}