@geekity/cms 0.34.0 → 0.36.1

package/dist/admin/media.d.ts

@@ -1,32 +1,32 @@
 /**
- * The media screen: what is under `content/uploads/`, what links to it, and
- * the things that can be done to it — add one, describe one, take one away,
- * and queue the sweep that strips metadata from the ones uploaded before
- * uploads were stripped on arrival.
+ * The media screen: what is under `content/uploads/` as a grid of tiles, a
+ * details screen per file with what links to it, and the things that can be
+ * done to one — add one, describe one, take one away.
  */
 import type { Hono } from 'hono';
-import type { CatalogReader } from '../content/store.ts';
 import type { GeekityEnv } from '../web/env.ts';
+import type { UploadKind } from '../files/upload-types.ts';
 import type { RemoveDerived } from '../media/library.ts';
 import type { AdminRender } from './documents.ts';
 /** Where the media screen lives. */
 export declare const MEDIA_PATH = "/admin/media";
 /** The navigation section the screen marks as current. */
 export declare const MEDIA_SECTION = "media";
+/** Where one file's details screen lives, with the file as `?path=`. */
+export declare const MEDIA_FILE_PATH = "/admin/media/file";
 /** Where the screen's upload form posts. */
 export declare const MEDIA_UPLOAD_PATH = "/admin/media/upload";
-/** Where a row's Delete button posts. */
+/** Where a file's Delete button posts. */
 export declare const MEDIA_DELETE_PATH = "/admin/media/delete";
-/** Where a row's alt-text form posts. */
+/** Where a file's alt-text form posts. */
 export declare const MEDIA_ALT_PATH = "/admin/media/alt";
-export declare const MEDIA_STRIP_METADATA_PATH = "/admin/media/strip-metadata";
 /** How many files one page of the library shows. */
 export declare const MEDIA_PER_PAGE = 24;
-/** The fields the forms on the media screen submit. */
+/** The fields the forms on the media screens submit. */
 export declare const MEDIA_FIELDS: {
     /** The file being added, on the upload form. */
     readonly file: 'file';
-    /** The upload being deleted, as a path under `content/uploads/`. */
+    /** The upload being deleted or described, as a path under `content/uploads/`. */
     readonly path: 'path';
     /** Set once the admin has been shown what still references the file. */
     readonly confirm: 'confirm';
@@ -34,35 +34,46 @@ export declare const MEDIA_FIELDS: {
     readonly alt: 'alt';
     /** Present when an image is decorative, which wins over any alt text. */
     readonly decorative: 'decorative';
-    /** The library page an alt-text form was on, so saving it goes back there. */
-    readonly page: 'page';
+    /** The library view a form was posted from, as a query string, so the answer goes back to it. */
+    readonly from: 'from';
 };
-/** One document that mentions an upload, as the confirmation names it. */
+/** The orders the library can be sorted in. Newest is the default and is never written into a URL. */
+declare const SORTS: {
+    readonly newest: 'Newest first';
+    readonly oldest: 'Oldest first';
+    readonly largest: 'Largest first';
+    readonly name: 'Name';
+};
+type MediaSort = keyof typeof SORTS;
+/** One view of the library: what the tabs, the filter form and the page links say. */
+export interface MediaView {
+    kind: UploadKind | undefined;
+    /** Matched against the path and the alt text, ignoring case. Empty matches everything. */
+    search: string;
+    needsAlt: boolean;
+    unused: boolean;
+    sort: MediaSort;
+    page: number;
+}
+/** A view from a query string. Anything it does not recognise is left at its default. */
+export declare function parseMediaView(query: URLSearchParams): MediaView;
+/** A view as a query string, without the `?`, leaving out everything at its default. */
+export declare function mediaViewQuery(view: MediaView): string;
+/** The library showing a view. */
+export declare function mediaLibraryUrl(view: MediaView): string;
+/** One file's details screen, reached from a view of the library. */
+export declare function mediaFileUrl(path: string, view: MediaView): string;
+/** One thing that uses an upload — a document, a setting, a profile — as the screens name it. */
 export interface MediaReference {
-    /** Path relative to the content directory: what identifies the document. */
-    path: string;
-    /** Its title, or its path when it has none worth showing. */
+    /** A document's title, or what the site uses the file as: "The site icon". */
     title: string;
-    /** Where to edit it. */
+    /** Where to change it: the document's editor, the settings page, the user's screen. */
     editUrl: string;
-    /** Whether it is in the trash rather than the live tree. */
+    /** Where it is: a document's path relative to the content directory, or the screen that sets it. */
+    where: string;
+    /** Whether it is a document in the trash rather than the live tree. */
     trashed: boolean;
 }
-/**
- * Every document whose body mentions an upload's URL, trash included.
- *
- * The trash counts. A trashed post can be restored tomorrow, and restoring one
- * whose picture was deleted in the meantime is a broken post nobody was warned
- * about — so a file the trash still points at asks for confirmation exactly as
- * a published one does.
- *
- * This is the one thing on the screen that comes out of the index rather than
- * off the disk. The index is a cache of the files (decision-1), so it may be a
- * moment behind a hand edit; that is acceptable here because the answer is a
- * warning rather than a decision, and the confirmation step is what makes an
- * out-of-date answer harmless in both directions.
- */
-export declare function referencesTo(store: CatalogReader, url: string): MediaReference[];
 /** What {@link mountMediaScreen} needs from the admin around it. */
 export interface MountMediaScreenOptions {
     /** The admin's renderer, which injects the chrome, the CSRF token and the flash. */
@@ -71,13 +82,13 @@ export interface MountMediaScreenOptions {
     removeDerived?: RemoveDerived | undefined;
 }
 /**
- * Register the media screen: the library, the upload form and the delete.
+ * Register the media screens: the library, one file's details, the upload,
+ * the alt text and the delete.
  *
  * Uploading here is {@link storeUpload}, exactly as the editor's control and
  * the avatar are, so what a site accepts is one answer given in one place
  * rather than three screens that might disagree.
  */
 export declare function mountMediaScreen(app: Hono<GeekityEnv>, options: MountMediaScreenOptions): void;
-/** The URL of one page of the library. Page one is the screen's own URL. */
-export declare function mediaPageUrl(page: number): string;
+export {};
 //# sourceMappingURL=media.d.ts.map

package/dist/admin/media.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"media.d.ts","sourceRoot":"","sources":["../../src/admin/media.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAK,EAAW,IAAI,EAAE,MAAM,MAAM,CAAC;AAI1C,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAEzD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAOhD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAMzD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAMlD,oCAAoC;AACpC,eAAO,MAAM,UAAU,iBAA0B,CAAC;AAElD,0DAA0D;AAC1D,eAAO,MAAM,aAAa,UAAU,CAAC;AAErC,4CAA4C;AAC5C,eAAO,MAAM,iBAAiB,wBAAyB,CAAC;AAExD,yCAAyC;AACzC,eAAO,MAAM,iBAAiB,wBAAyB,CAAC;AAExD,yCAAyC;AACzC,eAAO,MAAM,cAAc,qBAAsB,CAAC;AAElD,eAAO,MAAM,yBAAyB,gCAAiC,CAAC;AAExE,oDAAoD;AACpD,eAAO,MAAM,cAAc,KAAK,CAAC;AAEjC,uDAAuD;AACvD,eAAO,MAAM,YAAY;IACvB,gDAAgD;aAChD,IAAI,EAAE,MAAM;IACZ,oEAAoE;aACpE,IAAI,EAAE,MAAM;IACZ,wEAAwE;aACxE,OAAO,EAAE,SAAS;IAClB,2BAA2B;aAC3B,GAAG,EAAE,KAAK;IACV,yEAAyE;aACzE,UAAU,EAAE,YAAY;IACxB,8EAA8E;aAC9E,IAAI,EAAE,MAAM;CACJ,CAAC;AAEX,0EAA0E;AAC1E,MAAM,WAAW,cAAc;IAC7B,4EAA4E;IAC5E,IAAI,EAAE,MAAM,CAAC;IACb,6DAA6D;IAC7D,KAAK,EAAE,MAAM,CAAC;IACd,wBAAwB;IACxB,OAAO,EAAE,MAAM,CAAC;IAChB,4DAA4D;IAC5D,OAAO,EAAE,OAAO,CAAC;CAClB;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,aAAa,EAAE,GAAG,EAAE,MAAM,GAAG,cAAc,EAAE,CAYhF;AAED,oEAAoE;AACpE,MAAM,WAAW,uBAAuB;IACtC,oFAAoF;IACpF,MAAM,EAAE,WAAW,CAAC;IACpB,2FAA2F;IAC3F,aAAa,CAAC,EAAE,aAAa,GAAG,SAAS,CAAC;CAC3C;AAED;;;;;;GAMG;AACH,wBAAgB,gBAAgB,CAAC,GAAG,EAAE,IAAI,CAAC,UAAU,CAAC,EAAE,OAAO,EAAE,uBAAuB,GAAG,IAAI,CAkI9F;AASD,4EAA4E;AAC5E,wBAAgB,YAAY,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAEjD"}
+{"version":3,"file":"media.d.ts","sourceRoot":"","sources":["../../src/admin/media.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAK,EAAW,IAAI,EAAE,MAAM,MAAM,CAAC;AAM1C,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAIhD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAU3D,OAAO,KAAK,EAAa,aAAa,EAAE,MAAM,qBAAqB,CAAC;AASpE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAWlD,oCAAoC;AACpC,eAAO,MAAM,UAAU,iBAA0B,CAAC;AAElD,0DAA0D;AAC1D,eAAO,MAAM,aAAa,UAAU,CAAC;AAErC,wEAAwE;AACxE,eAAO,MAAM,eAAe,sBAAuB,CAAC;AAEpD,4CAA4C;AAC5C,eAAO,MAAM,iBAAiB,wBAAyB,CAAC;AAExD,0CAA0C;AAC1C,eAAO,MAAM,iBAAiB,wBAAyB,CAAC;AAExD,0CAA0C;AAC1C,eAAO,MAAM,cAAc,qBAAsB,CAAC;AAElD,oDAAoD;AACpD,eAAO,MAAM,cAAc,KAAK,CAAC;AAEjC,wDAAwD;AACxD,eAAO,MAAM,YAAY;IACvB,gDAAgD;aAChD,IAAI,EAAE,MAAM;IACZ,iFAAiF;aACjF,IAAI,EAAE,MAAM;IACZ,wEAAwE;aACxE,OAAO,EAAE,SAAS;IAClB,2BAA2B;aAC3B,GAAG,EAAE,KAAK;IACV,yEAAyE;aACzE,UAAU,EAAE,YAAY;IACxB,iGAAiG;aACjG,IAAI,EAAE,MAAM;CACJ,CAAC;AAWX,sGAAsG;AACtG,QAAA,MAAM,KAAK;aACT,MAAM,EAAE,cAAc;aACtB,MAAM,EAAE,cAAc;aACtB,OAAO,EAAE,eAAe;aACxB,IAAI,EAAE,MAAM;CACJ,CAAC;AAEX,KAAK,SAAS,GAAG,MAAM,OAAO,KAAK,CAAC;AAEpC,sFAAsF;AACtF,MAAM,WAAW,SAAS;IACxB,IAAI,EAAE,UAAU,GAAG,SAAS,CAAC;IAC7B,0FAA0F;IAC1F,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,OAAO,CAAC;IAClB,MAAM,EAAE,OAAO,CAAC;IAChB,IAAI,EAAE,SAAS,CAAC;IAChB,IAAI,EAAE,MAAM,CAAC;CACd;AAED,yFAAyF;AACzF,wBAAgB,cAAc,CAAC,KAAK,EAAE,eAAe,GAAG,SAAS,CAWhE;AAED,wFAAwF;AACxF,wBAAgB,cAAc,CAAC,IAAI,EAAE,SAAS,GAAG,MAAM,CAStD;AAED,kCAAkC;AAClC,wBAAgB,eAAe,CAAC,IAAI,EAAE,SAAS,GAAG,MAAM,CAGvD;AAED,qEAAqE;AACrE,wBAAgB,YAAY,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,SAAS,GAAG,MAAM,CAGlE;AAED,iGAAiG;AACjG,MAAM,WAAW,cAAc;IAC7B,8EAA8E;IAC9E,KAAK,EAAE,MAAM,CAAC;IACd,uFAAuF;IACvF,OAAO,EAAE,MAAM,CAAC;IAChB,oGAAoG;IACpG,KAAK,EAAE,MAAM,CAAC;IACd,uEAAuE;IACvE,OAAO,EAAE,OAAO,CAAC;CAClB;AAsJD,oEAAoE;AACpE,MAAM,WAAW,uBAAuB;IACtC,oFAAoF;IACpF,MAAM,EAAE,WAAW,CAAC;IACpB,2FAA2F;IAC3F,aAAa,CAAC,EAAE,aAAa,GAAG,SAAS,CAAC;CAC3C;AAED;;;;;;;GAOG;AACH,wBAAgB,gBAAgB,CAAC,GAAG,EAAE,IAAI,CAAC,UAAU,CAAC,EAAE,OAAO,EAAE,uBAAuB,GAAG,IAAI,CAkN9F"}

package/dist/admin/media.js

@@ -1,44 +1,49 @@
 /**
- * The media screen: what is under `content/uploads/`, what links to it, and
- * the things that can be done to it — add one, describe one, take one away,
- * and queue the sweep that strips metadata from the ones uploaded before
- * uploads were stripped on arrival.
+ * The media screen: what is under `content/uploads/` as a grid of tiles, a
+ * details screen per file with what links to it, and the things that can be
+ * done to one — add one, describe one, take one away.
  */
 import { postLabel } from '../content/post-type.js';
 import { isTrashedPath } from '../content/store.js';
 import { UPLOAD_ASSET_PREFIX } from '../content/uploads.js';
 import { writeAltText } from '../content/alt-text.js';
 import { STRIP_METADATA_JOB } from '../content/metadata/strip-job.js';
-import { finishedResult } from '../jobs/types.js';
-import { removeImageVariants } from '../images/variants.js';
-import { deleteUpload, listUploads, mentionsUpload, resolveUpload } from '../media/library.js';
+import { describeImage, removeImageVariants, thumbnailUrl } from '../images/variants.js';
+import { deleteUpload, listUploads, resolveUpload, usageText, usesUpload, } from '../media/library.js';
 import { refusedUpload, storeUpload } from '../media/uploads.js';
+import { SITE } from '../site/settings.js';
+import { listUsers } from '../site/users.js';
 import { isFile } from '../util/files.js';
 import { stringOrEmpty } from '../util/forms.js';
 import { pageCount } from '../web/pagination.js';
 import { documentEditorPath, PAGE_SCREENS, POST_SCREENS } from './documents.js';
 import { flash } from './flash.js';
-import { jobStatusView, queueJobFromForm } from './job-status.js';
-import { ADMIN_PREFIX } from '../site/admin-paths.js';
+import { jobStatusView } from './job-status.js';
+import { STRIP_METADATA_PANEL, STRIP_METADATA_PATH } from './maintenance.js';
+import { ADMIN_PREFIX, editUserPath } from '../site/admin-paths.js';
+import { SETTINGS_PATH } from './settings.js';
+import { GENERAL_SETTINGS } from './settings-general.js';
+import { ALL_SETTINGS_PAGES } from './settings-pages.js';
 import { ADMIN_TEMPLATES } from './templates.js';
 /** Where the media screen lives. */
 export const MEDIA_PATH = `${ADMIN_PREFIX}/media`;
 /** The navigation section the screen marks as current. */
 export const MEDIA_SECTION = 'media';
+/** Where one file's details screen lives, with the file as `?path=`. */
+export const MEDIA_FILE_PATH = `${MEDIA_PATH}/file`;
 /** Where the screen's upload form posts. */
 export const MEDIA_UPLOAD_PATH = `${MEDIA_PATH}/upload`;
-/** Where a row's Delete button posts. */
+/** Where a file's Delete button posts. */
 export const MEDIA_DELETE_PATH = `${MEDIA_PATH}/delete`;
-/** Where a row's alt-text form posts. */
+/** Where a file's alt-text form posts. */
 export const MEDIA_ALT_PATH = `${MEDIA_PATH}/alt`;
-export const MEDIA_STRIP_METADATA_PATH = `${MEDIA_PATH}/strip-metadata`;
 /** How many files one page of the library shows. */
 export const MEDIA_PER_PAGE = 24;
-/** The fields the forms on the media screen submit. */
+/** The fields the forms on the media screens submit. */
 export const MEDIA_FIELDS = {
     /** The file being added, on the upload form. */
     file: 'file',
-    /** The upload being deleted, as a path under `content/uploads/`. */
+    /** The upload being deleted or described, as a path under `content/uploads/`. */
     path: 'path',
     /** Set once the admin has been shown what still references the file. */
     confirm: 'confirm',
@@ -46,38 +51,192 @@ export const MEDIA_FIELDS = {
     alt: 'alt',
     /** Present when an image is decorative, which wins over any alt text. */
     decorative: 'decorative',
-    /** The library page an alt-text form was on, so saving it goes back there. */
-    page: 'page',
+    /** The library view a form was posted from, as a query string, so the answer goes back to it. */
+    from: 'from',
 };
+/** The kinds the library's tabs pick between. */
+const KIND_TABS = [
+    { kind: undefined, label: 'All' },
+    { kind: 'image', label: 'Images' },
+    { kind: 'audio', label: 'Audio' },
+    { kind: 'video', label: 'Video' },
+    { kind: 'document', label: 'Documents' },
+];
+/** The orders the library can be sorted in. Newest is the default and is never written into a URL. */
+const SORTS = {
+    newest: 'Newest first',
+    oldest: 'Oldest first',
+    largest: 'Largest first',
+    name: 'Name',
+};
+/** A view from a query string. Anything it does not recognise is left at its default. */
+export function parseMediaView(query) {
+    const kind = query.get('kind');
+    const sort = query.get('sort');
+    return {
+        kind: KIND_TABS.find((tab) => tab.kind !== undefined && tab.kind === kind)?.kind,
+        search: (query.get('q') ?? '').trim(),
+        needsAlt: query.get('alt') === 'missing',
+        unused: query.get('unused') === '1',
+        sort: sort !== null && Object.hasOwn(SORTS, sort) ? sort : 'newest',
+        page: pageNumber(query.get('page') ?? undefined),
+    };
+}
+/** A view as a query string, without the `?`, leaving out everything at its default. */
+export function mediaViewQuery(view) {
+    const query = new URLSearchParams();
+    if (view.kind !== undefined)
+        query.set('kind', view.kind);
+    if (view.search !== '')
+        query.set('q', view.search);
+    if (view.needsAlt)
+        query.set('alt', 'missing');
+    if (view.unused)
+        query.set('unused', '1');
+    if (view.sort !== 'newest')
+        query.set('sort', view.sort);
+    if (view.page > 1)
+        query.set('page', String(view.page));
+    return query.toString();
+}
+/** The library showing a view. */
+export function mediaLibraryUrl(view) {
+    const query = mediaViewQuery(view);
+    return query === '' ? MEDIA_PATH : `${MEDIA_PATH}?${query}`;
+}
+/** One file's details screen, reached from a view of the library. */
+export function mediaFileUrl(path, view) {
+    const query = mediaViewQuery(view);
+    return `${MEDIA_FILE_PATH}?path=${encodeURIComponent(path)}${query === '' ? '' : `&${query}`}`;
+}
 /**
- * Every document whose body mentions an upload's URL, trash included.
+ * Everything that could use an upload: every document, live and trashed, and
+ * the site itself — its settings and its users' profiles.
  *
  * The trash counts. A trashed post can be restored tomorrow, and restoring one
  * whose picture was deleted in the meantime is a broken post nobody was warned
  * about — so a file the trash still points at asks for confirmation exactly as
  * a published one does.
  *
- * This is the one thing on the screen that comes out of the index rather than
- * off the disk. The index is a cache of the files (decision-1), so it may be a
- * moment behind a hand edit; that is acceptable here because the answer is a
- * warning rather than a decision, and the confirmation step is what makes an
- * out-of-date answer harmless in both directions.
+ * The documents come out of the index rather than off the disk. The index is
+ * a cache of the files (decision-1), so it may be a moment behind a hand edit;
+ * that is acceptable here because the answer is a warning rather than a
+ * decision, and the confirmation step is what makes an out-of-date answer
+ * harmless in both directions.
  */
-export function referencesTo(store, url) {
+async function referenceSources(c) {
     // Two queries rather than one because `listAll` shows the live tree or the
     // trash and never both, which is the same reason the taxonomy screens ask
     // twice.
-    return [...store.listAll({ trashed: false }), ...store.listAll({ trashed: true })]
-        .filter((document) => mentionsUpload(document.body, url))
-        .map((document) => ({
-        path: document.path,
-        title: postLabel(document),
-        editUrl: documentEditorPath(document.type === 'page' ? PAGE_SCREENS : POST_SCREENS, document),
-        trashed: isTrashedPath(document.path),
-    }));
+    const documents = [
+        ...c.var.store.listAll({ trashed: false }),
+        ...c.var.store.listAll({ trashed: true }),
+    ];
+    return [
+        ...documents.map(documentSource),
+        ...(await settingSources(c.var.settings)),
+        ...userSources(c.var.config.dataDir),
+    ];
+}
+function documentSource(document) {
+    const { html: _html, hash: _hash, path: where, ...written } = document;
+    return {
+        reference: {
+            title: postLabel(document),
+            editUrl: documentEditorPath(document.type === 'page' ? PAGE_SCREENS : POST_SCREENS, document),
+            where,
+            trashed: isTrashedPath(document.path),
+        },
+        text: usageText(written),
+    };
+}
+const SITE_SETTING_TITLES = {
+    icon: 'The site icon',
+    avatar: 'The site’s old avatar, which the site icon falls back to',
+};
+async function settingSources(settings) {
+    const sources = [];
+    for (const ref of settings.list()) {
+        if (ref.declaration.secret === true)
+            continue;
+        const text = usageText(await settings.get(ref));
+        if (!text.includes(UPLOAD_ASSET_PREFIX))
+            continue;
+        const page = ref.namespace === SITE.declaration.namespace ? settingsPageOf(ref.key) : undefined;
+        sources.push({
+            reference: {
+                title: SITE_SETTING_TITLES[ref.key] ?? `The ${ref.namespace} setting ${ref.key}`,
+                editUrl: page?.path ?? SETTINGS_PATH,
+                where: page === undefined ? 'Settings' : (page.heading ?? `Settings › ${page.label}`),
+                trashed: false,
+            },
+            text,
+        });
+    }
+    return sources;
+}
+function settingsPageOf(key) {
+    if (key === 'avatar')
+        return GENERAL_SETTINGS;
+    return ALL_SETTINGS_PAGES.find((page) => page.fields.includes(key));
+}
+function userSources(dataDir) {
+    return listUsers(dataDir).flatMap((user) => {
+        const { avatar, ...rest } = user.profile ?? {};
+        const name = user.profile?.displayName ?? user.username;
+        const reference = { editUrl: editUserPath(user.id), where: 'Users', trashed: false };
+        return [
+            { reference: { ...reference, title: `${name}’s avatar` }, text: avatar ?? '' },
+            { reference: { ...reference, title: `${name}’s profile` }, text: usageText(rest) },
+        ];
+    });
+}
+function referencesAmong(sources, relative) {
+    return sources
+        .filter((source) => usesUpload(source.text, relative))
+        .map((source) => source.reference);
+}
+function libraryFile(config, sources, file) {
+    const image = file.kind === 'image' ? describeImage(config, file.path) : undefined;
+    return {
+        ...file,
+        references: referencesAmong(sources, file.path),
+        thumbnailUrl: file.kind === 'image' ? thumbnailUrl(config, file.path, file.url) : file.url,
+        width: image?.width,
+        height: image?.height,
+    };
+}
+function needsAlt(file) {
+    return file.kind === 'image' && file.alt === undefined;
+}
+/** Whether a file is in a view, leaving the kind tabs and the page aside. */
+function matches(file, view) {
+    if (view.needsAlt && !needsAlt(file))
+        return false;
+    if (view.unused && file.references.length > 0)
+        return false;
+    if (view.search === '')
+        return true;
+    const search = view.search.toLowerCase();
+    const alt = file.alt?.kind === 'described' ? file.alt.text : '';
+    return file.path.toLowerCase().includes(search) || alt.toLowerCase().includes(search);
+}
+/** `listUploads` is newest first already; the other orders are stable sorts of it. */
+function sorted(files, sort) {
+    switch (sort) {
+        case 'newest':
+            return files;
+        case 'oldest':
+            return files.toReversed();
+        case 'largest':
+            return files.toSorted((left, right) => right.bytes - left.bytes);
+        case 'name':
+            return files.toSorted((left, right) => left.name.localeCompare(right.name));
+    }
 }
 /**
- * Register the media screen: the library, the upload form and the delete.
+ * Register the media screens: the library, one file's details, the upload,
+ * the alt text and the delete.
  *
  * Uploading here is {@link storeUpload}, exactly as the editor's control and
  * the avatar are, so what a site accepts is one answer given in one place
@@ -85,7 +244,16 @@ export function referencesTo(store, url) {
  */
 export function mountMediaScreen(app, options) {
     const { render, removeDerived } = options;
-    app.get(MEDIA_PATH, async (c) => render(c, ADMIN_TEMPLATES.media, await screen(c)));
+    app.get(MEDIA_PATH, async (c) => render(c, ADMIN_TEMPLATES.media, await library(c, viewOf(c.req.url))));
+    app.get(MEDIA_FILE_PATH, async (c) => {
+        const view = viewOf(c.req.url);
+        const details = await fileScreen(c, c.req.query('path') ?? '', view);
+        if (details === undefined) {
+            flash(c, 'error', 'That is not a file in this site’s uploads.');
+            return c.redirect(mediaLibraryUrl(view), 303);
+        }
+        return render(c, ADMIN_TEMPLATES.mediaFile, details);
+    });
     app.post(MEDIA_UPLOAD_PATH, async (c) => {
         const body = await c.req.parseBody();
         const outcome = await storeUpload(body[MEDIA_FIELDS.file], c.var.config);
@@ -98,11 +266,12 @@ export function mountMediaScreen(app, options) {
     });
     app.post(MEDIA_ALT_PATH, async (c) => {
         const body = await c.req.parseBody();
+        const view = postedView(body);
         const relative = stringOrEmpty(body[MEDIA_FIELDS.path]).trim();
         const file = relative === '' ? undefined : resolveUpload(c.var.config.contentDir, relative);
         if (file === undefined || !(await isFile(file))) {
             flash(c, 'error', 'That is not a file in this site’s uploads.');
-            return c.redirect(MEDIA_PATH, 303);
+            return c.redirect(mediaLibraryUrl(view), 303);
         }
         const text = stringOrEmpty(body[MEDIA_FIELDS.alt]).trim().replace(/\s+/g, ' ');
         const alt = body[MEDIA_FIELDS.decorative] !== undefined
@@ -112,28 +281,29 @@ export function mountMediaScreen(app, options) {
                 : { kind: 'described', text };
         await writeAltText(c.var.config.contentDir, relative, alt);
         flash(c, 'notice', altSavedMessage(relative, alt));
-        return c.redirect(mediaPageUrl(pageNumber(stringOrEmpty(body[MEDIA_FIELDS.page]).trim())), 303);
+        return c.redirect(mediaFileUrl(relative, view), 303);
     });
-    app.post(MEDIA_STRIP_METADATA_PATH, (c) => queueJobFromForm(c, STRIP_METADATA_JOB, null, {
-        panel: `${MEDIA_PATH}#strip-metadata`,
-        queued: 'Queued the sweep. It runs in the background; its progress is below.',
-        busy: 'A sweep is already queued or running. Nothing new was queued.',
-    }));
     app.post(MEDIA_DELETE_PATH, async (c) => {
         const body = await c.req.parseBody();
+        const view = postedView(body);
         const relative = stringOrEmpty(body[MEDIA_FIELDS.path]).trim();
         const file = relative === '' ? undefined : resolveUpload(c.var.config.contentDir, relative);
         if (file === undefined) {
             flash(c, 'error', 'That is not a file in this site’s uploads.');
-            return c.redirect(MEDIA_PATH, 303);
+            return c.redirect(mediaLibraryUrl(view), 303);
         }
         const url = `${UPLOAD_ASSET_PREFIX}${relative}`;
-        const references = referencesTo(c.var.store, url);
+        const references = referencesAmong(await referenceSources(c), relative);
         // A file something still points at is offered rather than deleted: the
         // bytes do not come back, and the documents naming them are the whole
         // reason to think twice.
         if (references.length > 0 && stringOrEmpty(body[MEDIA_FIELDS.confirm]).trim() === '') {
-            return render(c, ADMIN_TEMPLATES.media, await screen(c, { confirm: { path: relative, url, references } }));
+            const details = await fileScreen(c, relative, view);
+            if (details === undefined) {
+                flash(c, 'error', 'That is not a file in this site’s uploads.');
+                return c.redirect(mediaLibraryUrl(view), 303);
+            }
+            return render(c, ADMIN_TEMPLATES.mediaFile, { ...details, confirm: { url, references } });
         }
         const deleted = await deleteUpload({
             contentDir: c.var.config.contentDir,
@@ -144,43 +314,102 @@ export function mountMediaScreen(app, options) {
             removeDerived: removeDerived ?? ((uploadPath) => removeImageVariants(c.var.config, uploadPath)),
         });
         flash(c, deleted ? 'notice' : 'error', deleted ? `Deleted ${url}.` : `There is no longer a file at ${url}.`);
-        return c.redirect(MEDIA_PATH, 303);
+        return c.redirect(mediaLibraryUrl(view), 303);
     });
-    /** Everything the media template renders. */
-    async function screen(c, extra = {}) {
-        const files = await listUploads(c.var.config.contentDir);
-        const latestSweep = await c.var.jobs.latest(STRIP_METADATA_JOB.name);
-        const page = pageNumber(c.req.query('page'));
-        const start = (page - 1) * MEDIA_PER_PAGE;
+    async function libraryFiles(c) {
+        const sources = await referenceSources(c);
+        return (await listUploads(c.var.config.contentDir)).map((file) => libraryFile(c.var.config, sources, file));
+    }
+    /** Everything the library template renders. */
+    async function library(c, view) {
+        const all = await libraryFiles(c);
+        const matching = all.filter((file) => matches(file, view));
+        const files = sorted(matching.filter((file) => view.kind === undefined || file.kind === view.kind), view.sort);
+        const pages = pageCount(files.length, MEDIA_PER_PAGE);
+        const start = (view.page - 1) * MEDIA_PER_PAGE;
+        const latestSweep = jobStatusView(await c.var.jobs.latest(STRIP_METADATA_JOB.name));
         return {
             section: MEDIA_SECTION,
             child: 'library',
             heading: 'Media',
             listUrl: MEDIA_PATH,
             uploadUrl: MEDIA_UPLOAD_PATH,
-            deleteUrl: MEDIA_DELETE_PATH,
-            altUrl: MEDIA_ALT_PATH,
-            stripMetadataUrl: MEDIA_STRIP_METADATA_PATH,
-            sweep: jobStatusView(latestSweep),
-            sweepReport: finishedResult(STRIP_METADATA_JOB, latestSweep),
             fields: MEDIA_FIELDS,
             accepts: c.var.config.uploadTypes.join(','),
             maxBytes: c.var.config.uploadMaxBytes,
             mediaMaxBytes: c.var.config.uploadMediaMaxBytes,
-            total: files.length,
-            page,
-            pages: pageCount(files.length, MEDIA_PER_PAGE),
-            previousUrl: page > 1 ? mediaPageUrl(page - 1) : undefined,
-            nextUrl: start + MEDIA_PER_PAGE < files.length ? mediaPageUrl(page + 1) : undefined,
-            // Reference counts are one index scan per file on the page rather than
-            // per file in the library, which is what paging is for.
+            // Until a sweep has finished, the older uploads may still carry where
+            // they were taken; after one has, everything since was cleaned on arrival.
+            sweepNotice: latestSweep?.state === 'finished'
+                ? undefined
+                : { sweep: latestSweep, url: STRIP_METADATA_PATH, panelUrl: STRIP_METADATA_PANEL },
+            view,
+            sorts: SORTS,
+            kindTabs: KIND_TABS.map((tab) => ({
+                label: tab.label,
+                url: mediaLibraryUrl({ ...view, kind: tab.kind, page: 1 }),
+                current: tab.kind === view.kind,
+                count: matching.filter((file) => tab.kind === undefined || file.kind === tab.kind).length,
+            })),
+            filtered: view.search !== '' || view.needsAlt || view.unused,
+            clearUrl: mediaLibraryUrl({ ...parseMediaView(new URLSearchParams()), kind: view.kind }),
+            total: all.length,
+            shown: files.length,
+            page: view.page,
+            pages,
+            previousUrl: view.page > 1 ? mediaLibraryUrl({ ...view, page: view.page - 1 }) : undefined,
+            nextUrl: start + MEDIA_PER_PAGE < files.length
+                ? mediaLibraryUrl({ ...view, page: view.page + 1 })
+                : undefined,
             files: files.slice(start, start + MEDIA_PER_PAGE).map((file) => ({
                 ...file,
-                references: referencesTo(c.var.store, file.url),
+                needsAlt: needsAlt(file),
+                detailsUrl: mediaFileUrl(file.path, view),
             })),
-            ...extra,
         };
     }
+    /**
+     * Everything the details template renders, or `undefined` when the path is
+     * not a file in the library.
+     *
+     * Previous and next step through the view the file was opened from. The
+     * file itself always counts as part of that view, so describing the last
+     * image a "needs alt text" view showed does not strand it.
+     */
+    async function fileScreen(c, relative, view) {
+        const all = await libraryFiles(c);
+        const file = all.find((candidate) => candidate.path === relative);
+        if (file === undefined)
+            return undefined;
+        const around = sorted(all.filter((candidate) => candidate === file ||
+            (matches(candidate, view) && (view.kind === undefined || candidate.kind === view.kind))), view.sort);
+        const at = around.indexOf(file);
+        const previous = around[at - 1];
+        const next = around[at + 1];
+        const viewAroundFile = { ...view, page: Math.floor(Math.max(at, 0) / MEDIA_PER_PAGE) + 1 };
+        return {
+            section: MEDIA_SECTION,
+            child: 'library',
+            heading: file.name,
+            file: { ...file, needsAlt: needsAlt(file) },
+            fields: MEDIA_FIELDS,
+            from: mediaViewQuery(view),
+            altUrl: MEDIA_ALT_PATH,
+            deleteUrl: MEDIA_DELETE_PATH,
+            libraryUrl: mediaLibraryUrl(viewAroundFile),
+            selfUrl: mediaFileUrl(file.path, view),
+            previousUrl: previous === undefined ? undefined : mediaFileUrl(previous.path, view),
+            nextUrl: next === undefined ? undefined : mediaFileUrl(next.path, view),
+            position: at + 1,
+            count: around.length,
+        };
+    }
+}
+function viewOf(url) {
+    return parseMediaView(new URL(url).searchParams);
+}
+function postedView(body) {
+    return parseMediaView(new URLSearchParams(stringOrEmpty(body[MEDIA_FIELDS.from])));
 }
 /** What the flash says once an image's alt text has been saved. */
 function altSavedMessage(relative, alt) {
@@ -190,10 +419,6 @@ function altSavedMessage(relative, alt) {
         return `${relative} is marked decorative.`;
     return `Saved the alt text for ${relative}.`;
 }
-/** The URL of one page of the library. Page one is the screen's own URL. */
-export function mediaPageUrl(page) {
-    return page > 1 ? `${MEDIA_PATH}?page=${String(page)}` : MEDIA_PATH;
-}
 /** A `page` query as a page number. Anything that is not one is page one. */
 function pageNumber(value) {
     const parsed = Number(value ?? '1');