app/components/admin/media-inspector-sections.tsx

Functions

Imports

It imports app/components/admin/copy-button.tsx, app/lib/media/byte-size.mjs, app/lib/media/usage.mjs. Imported by app/components/admin/media-inspector.tsx.

Source

1import { Form, Link } from "react-router";
2import { Pill, Status } from "capsomer/react/status";
3
4import { CopyButton } from "~/components/admin/copy-button";
5import { byteSize } from "~/lib/media/byte-size.mjs";
6import { usageDescriptor } from "~/lib/media/usage.mjs";
7
8import type { Route } from "../../routes/+types/admin.media._index";
9
10type Listing = Extract<Route.ComponentProps["loaderData"], { detail: unknown }>;
11type Detail = NonNullable<Listing["detail"]>;
12export type FoundDetail = Extract<Detail, { found: true }>;
13
14/** The address and every fact the system assigns: read-only, because a rebuild recomputes them. */
15export function InspectorFacts({ detail }: { detail: FoundDetail }) {
16  return (
17    <>
18      {/* The no-script copy path: a readonly input selects and copies with the platform's own keys. */}
19      <div className="cap-field">
20        <label className="cap-field-label" htmlFor="media-detail-url">
21          Address
22        </label>
23        <div className="app-actions">
24          <input id="media-detail-url" className="cap-input" readOnly value={detail.url} />
25          <CopyButton value={detail.url} label={detail.originalName ?? detail.key} />
26        </div>
27      </div>
28
29      {/* Derived: `rebuildMediaIndex` recomputes all of this, so an edit here would be overwritten. */}
30      <div className="cap-field">
31        <span className="cap-field-label">Assigned by the system</span>
32        <dl className="app-facts">
33          <dt>Key</dt>
34          <dd className="cap-mono">{detail.key}</dd>
35          <dt>Role</dt>
36          <dd>
37            <Pill variant="outline">{detail.role}</Pill> {detail.storage} · {detail.kind}
38          </dd>
39          <dt>Type</dt>
40          <dd>{detail.mime ?? "unknown"}</dd>
41          <dt>Size</dt>
42          <dd>{byteSize(detail.bytes)}</dd>
43          <dt>Dimensions</dt>
44          <dd>
45            {detail.width && detail.height ? `${detail.width}×${detail.height}` : "not measured"}
46          </dd>
47          <dt>Uploaded</dt>
48          <dd>{detail.uploadedAt ? detail.uploadedAt.slice(0, 10) : "ships with the repo"}</dd>
49        </dl>
50      </div>
51    </>
52  );
53}
54
55/** The alt text form, or the note that a document takes none. */
56export function InspectorAltForm({ detail }: { detail: FoundDetail }) {
57  return (
58    <>
59      {/* Authored: a rebuild preserves it because nothing can recompute it. */}
60      {detail.viewable ? (
61        <Form method="post" className="cap-field">
62          <input type="hidden" name="key" value={detail.key} />
63          <label className="cap-field-label" htmlFor="detail-alt">
64            Alt text <span className="cap-muted">yours to edit</span>
65          </label>
66          <input
67            id="detail-alt"
68            className="cap-input"
69            name="alt"
70            defaultValue={detail.alt}
71            placeholder="Describe this image"
72            aria-invalid={detail.alt.trim() ? undefined : true}
73          />
74          <div className="app-actions">
75            <button type="submit" name="intent" value="set-alt" className="cap-btn" data-size="sm">
76              Save alt
77            </button>
78            {/* Through the same `set-alt` intent, so the server keeps one writer. Offered only while the
79                field is empty, so it never invites overwriting a written sentence. */}
80            {!detail.alt.trim() && detail.altSuggestion ? (
81              <button
82                type="submit"
83                name="alt"
84                value={detail.altSuggestion}
85                className="cap-btn"
86                data-variant="quiet"
87                data-size="sm"
88                aria-label={`Use suggested alt text: ${detail.altSuggestion}`}
89              >
90                Use suggested: {detail.altSuggestion}
91              </button>
92            ) : null}
93          </div>
94        </Form>
95      ) : (
96        <p className="cap-muted">
97          A document takes no alt text. Its link text is what a reader hears, and that lives in the
98          post.
99        </p>
100      )}
101    </>
102  );
103}
104
105/** The tags field and the chip form that removes, clears or adds one tag at a time. */
106export function InspectorTagForms({ detail }: { detail: FoundDetail }) {
107  return (
108    <>
109      {/* The parsed list joined with commas, never the delimiter-wrapped storage form. */}
110      <Form method="post" className="cap-field">
111        <input type="hidden" name="key" value={detail.key} />
112        <label className="cap-field-label" htmlFor="detail-tags">
113          Tags
114        </label>
115        <input
116          id="detail-tags"
117          className="cap-input"
118          name="tags"
119          defaultValue={detail.tags.join(", ")}
120          placeholder="photo, roster, 2019"
121        />
122        <div>
123          <button type="submit" name="intent" value="set-tags" className="cap-btn" data-size="sm">
124            Save tags
125          </button>
126        </div>
127      </Form>
128
129      {/* Each chip submits the whole resulting list on `set-tags`, except the last one, which submits
130          `clear`: an empty value is not an instruction to clear. */}
131      {detail.tags.length > 0 || detail.tagSuggestions.length > 0 ? (
132        <Form method="post" className="app-pills">
133          <input type="hidden" name="key" value={detail.key} />
134          <input type="hidden" name="intent" value="set-tags" />
135          {detail.tags.map((tag) => (
136            <button
137              key={`applied-${tag}`}
138              type="submit"
139              {...(detail.tags.length === 1
140                ? { name: "clear", value: "1" }
141                : {
142                    name: "tags",
143                    value: detail.tags.filter((t) => t !== tag).join(", "),
144                  })}
145              className="cap-btn"
146              data-size="xs"
147              aria-label={`Remove tag ${tag}`}
148              title={`Remove tag ${tag}`}
149            >
150              {tag} <span aria-hidden="true">&times;</span>
151            </button>
152          ))}
153          {/* Shown only above one tag: at one, the chip already does this. */}
154          {detail.tags.length > 1 ? (
155            <button
156              type="submit"
157              name="clear"
158              value="1"
159              className="cap-btn"
160              data-size="xs"
161              data-variant="quiet"
162              title={`Remove all ${detail.tags.length} tags`}
163            >
164              Clear all
165            </button>
166          ) : null}
167          {detail.tagSuggestions.map((tag) => (
168            <button
169              key={`suggested-${tag}`}
170              type="submit"
171              name="tags"
172              value={[...detail.tags, tag].join(", ")}
173              className="cap-btn"
174              data-size="xs"
175              data-variant="quiet"
176              aria-label={`Add suggested tag ${tag}`}
177            >
178              <span aria-hidden="true">+</span> {tag}
179            </button>
180          ))}
181        </Form>
182      ) : null}
183    </>
184  );
185}
186
187const USAGE_TONE: Record<string, "ok" | "warn" | "nodata"> = {
188  used: "ok",
189  unattached: "warn",
190  unknown: "nodata",
191};
192
193/** Where the file is used: posts, artifact citations and template files, or that the scan failed. */
194export function InspectorUsage({ detail }: { detail: FoundDetail }) {
195  return (
196    <div className="cap-field">
197      <h3 className="cap-field-label">Usage</h3>
198      {!detail.scanComplete ? (
199        <p className="cap-muted">The reference scan failed, so usage is unknown.</p>
200      ) : (
201        <>
202          <p>
203            <Status tone={USAGE_TONE[detail.usage] ?? "nodata"}>{usageDescriptor(detail.usage).title}</Status>{" "}
204            {usageDescriptor(detail.usage).note}
205          </p>
206
207          {detail.refs.length > 0 || detail.citations.length > 0 ? (
208            <ul className="app-form">
209              {detail.refs.map((ref) => (
210                <li key={`ref-${ref.sourceId}-${ref.form}-${ref.detail ?? ""}`}>
211                  <Link to={`/admin/posts/${ref.sourceId}/edit`}>{ref.sourceId}</Link>{" "}
212                  <span className="cap-muted">
213                    {ref.form}
214                    {ref.detail ? `, ${ref.detail}` : ""}
215                  </span>
216                </li>
217              ))}
218              {detail.citations.map((citation) => (
219                <li key={`cite-${citation.id}-${citation.form}-${citation.detail}`}>
220                  <Link to={`/admin/posts/${citation.id}/edit`}>{citation.title}</Link>{" "}
221                  <span className="cap-muted">
222                    {citation.form}, {citation.detail}, from the artifact scan
223                  </span>
224                </li>
225              ))}
226            </ul>
227          ) : null}
228
229          {/* Not links: the admin has no source browser, and a link to nothing is worse than text. */}
230          {detail.templateRefs.length > 0 ? (
231            <ul className="app-form">
232              {detail.templateRefs.map((file) => (
233                <li key={`tpl-${file}`}>
234                  <code className="cap-mono">{file}</code>{" "}
235                  <span className="cap-muted">references this address</span>
236                </li>
237              ))}
238            </ul>
239          ) : null}
240        </>
241      )}
242    </div>
243  );
244}
245
246/** Trash or restore, then delete: the reversible action first, the permanent one last. */
247export function InspectorDangerZone({ detail }: { detail: FoundDetail }) {
248  return (
249    <>
250      {/* No confirm on purpose: trashing is reversible and invisible to readers, and always-harmless
251          ceremony teaches people to click through. */}
252      {detail.trashedAt ? (
253        <Form method="post">
254          <input type="hidden" name="key" value={detail.key} />
255          <button type="submit" name="intent" value="restore" className="cap-btn">
256            Restore to the library
257          </button>
258        </Form>
259      ) : (
260        <Form method="post" className="app-actions">
261          <input type="hidden" name="key" value={detail.key} />
262          <button type="submit" name="intent" value="trash" className="cap-btn" data-variant="danger">
263            Move to trash
264          </button>
265          <span className="cap-muted">Hides it here. The address keeps working.</span>
266        </Form>
267      )}
268
269      {detail.deletable ? (
270        <Form method="post">
271          <input type="hidden" name="key" value={detail.key} />
272          {/* No confirmation field: the action refuses and opens the typed confirmation, script or not. */}
273          <button type="submit" name="intent" value="delete" className="cap-btn" data-variant="danger">
274            Delete
275          </button>
276        </Form>
277      ) : (
278        <p className="cap-muted">Ships with the repo. Remove it with a commit.</p>
279      )}
280    </>
281  );
282}