app/components/admin/settings-drawer.tsx

Functions

Imports

It imports app/components/admin/copy-button.tsx, app/components/admin/media-picker.tsx, app/components/admin/social-previews.tsx, app/lib/editor/datetime-local.ts, app/lib/seo.ts. Imported by app/components/admin/post-editor.tsx.

Source

1import { useEffect, useRef, useState } from "react";
2import { Dialog, DialogBody, DialogHeader, DialogTitle } from "capsomer/react/dialog";
3
4import { CopyTextButton } from "./copy-button";
5import { MediaPicker } from "./media-picker";
6import { OgPreview, SerpPreview, type PreviewPost } from "./social-previews";
7
8import { anHourFromNowLocal, toIso, toLocalInput } from "~/lib/editor/datetime-local";
9import { SERP_DESCRIPTION_LIMIT } from "~/lib/seo";
10
11// Each control carries form={formId}: the editing form is outside the dialog, and association is by
12// attribute. A closed dialog is display:none, which does not stop its fields submitting.
13export function SettingsDrawer({
14  open,
15  onClose,
16  formId,
17  slug,
18  isNew,
19  description,
20  onDescriptionChange,
21  tags,
22  onTagsChange,
23  tagOptions,
24  coverSrc,
25  onCoverSrcChange,
26  coverAlt,
27  onCoverAltChange,
28  date,
29  publishAt,
30  onPublishAtChange,
31  previewPost,
32  previewLinkSlot,
33  historySlot,
34  dangerSlot,
35}: {
36  open: boolean;
37  onClose: () => void;
38  formId: string;
39  slug: string;
40  isNew: boolean;
41  description: string;
42  onDescriptionChange: (value: string) => void;
43  tags: string[];
44  onTagsChange: (value: string[]) => void;
45  tagOptions: string[];
46  coverSrc: string;
47  onCoverSrcChange: (value: string) => void;
48  coverAlt: string;
49  onCoverAltChange: (value: string) => void;
50  date: string;
51  publishAt: string;
52  onPublishAtChange: (value: string) => void;
53  previewPost: PreviewPost;
54  /** Absent on a published post, so there is nothing to press rather than a disabled button that reads as an offer. */
55  previewLinkSlot?: React.ReactNode;
56  historySlot?: React.ReactNode;
57  dangerSlot?: React.ReactNode;
58}) {
59  const overLimit = description.length > SERP_DESCRIPTION_LIMIT;
60  const coverNeedsAlt = coverSrc.trim() !== "" && coverAlt.trim() === "";
61
62  return (
63    <Dialog
64      open={open}
65      onOpenChange={(next) => {
66        if (!next) onClose();
67      }}
68      placement="right"
69      size="md"
70      aria-labelledby="drawer-title"
71    >
72      <DialogHeader divider>
73        <DialogTitle id="drawer-title">Post settings</DialogTitle>
74      </DialogHeader>
75
76      <DialogBody>
77        <div className="app-form">
78          <SlugField formId={formId} slug={slug} isNew={isNew} />
79
80          <div className="cap-field">
81            <label className="cap-field-label" htmlFor="field-description">
82              Description
83              {/* Out of the name, into the description: the count is a hint, not what the field is. */}
84              <span id="description-count" aria-hidden="true">
85                {" "}
86                {description.length}/{SERP_DESCRIPTION_LIMIT}
87              </span>
88            </label>
89            <input
90              id="field-description"
91              className="cap-input"
92              form={formId}
93              name="description"
94              value={description}
95              onChange={(event) => onDescriptionChange(event.target.value)}
96              required
97              autoComplete="off"
98              /* No aria-invalid: the limit is advisory, and the save accepts a long description. */
99              aria-describedby={overLimit ? "description-count description-alarm" : "description-count"}
100            />
101            {/* Alarms, never blocks: the server gates own validity. */}
102            {overLimit ? (
103              <p className="cap-field-error" id="description-alarm">
104                {description.length - SERP_DESCRIPTION_LIMIT} over. Search results
105                truncate around {SERP_DESCRIPTION_LIMIT}.
106              </p>
107            ) : null}
108          </div>
109
110          <section className="app-form" aria-labelledby="drawer-appears">
111            <h3 className="cap-field-label" id="drawer-appears">
112              How this appears
113            </h3>
114            <SerpPreview post={previewPost} />
115            <OgPreview post={previewPost} />
116          </section>
117
118          <TagField formId={formId} tags={tags} onChange={onTagsChange} options={tagOptions} />
119
120          <CoverField
121            formId={formId}
122            src={coverSrc}
123            onSrcChange={onCoverSrcChange}
124            alt={coverAlt}
125            onAltChange={onCoverAltChange}
126            needsAlt={coverNeedsAlt}
127          />
128
129          <ScheduleField
130            formId={formId}
131            date={date}
132            publishAt={publishAt}
133            onPublishAtChange={onPublishAtChange}
134          />
135
136          {previewLinkSlot ? (
137            <section className="app-form" aria-labelledby="drawer-preview-links">
138              <h3 className="cap-field-label" id="drawer-preview-links">
139                Preview links
140              </h3>
141              {previewLinkSlot}
142            </section>
143          ) : null}
144
145          {historySlot ? (
146            <section className="app-form" aria-labelledby="drawer-history">
147              <h3 className="cap-field-label" id="drawer-history">
148                Version history
149              </h3>
150              {historySlot}
151            </section>
152          ) : null}
153
154          {dangerSlot ? (
155            <section className="app-form" aria-labelledby="drawer-danger">
156              <h3 className="cap-field-label" id="drawer-danger">
157                Danger zone
158              </h3>
159              {dangerSlot}
160            </section>
161          ) : null}
162        </div>
163      </DialogBody>
164    </Dialog>
165  );
166}
167
168// Only the new-post flow gets an input: changing the slug later would be a rename plus a redirect.
169function SlugField({
170  formId,
171  slug,
172  isNew,
173}: {
174  formId: string;
175  slug: string;
176  isNew: boolean;
177}) {
178  if (isNew) {
179    return (
180      <p className="cap-field-help">
181        The slug is set once, next to the title, and becomes the public URL.
182      </p>
183    );
184  }
185
186  return (
187    <div className="cap-field">
188      <span className="cap-field-label">URL</span>
189      <div className="app-actions">
190        <code className="cap-mono">/writing/{slug}</code>
191        <CopyTextButton
192          value={`/writing/${slug}`}
193          label="Copy URL"
194          name={`/writing/${slug}`}
195          subject={`the URL /writing/${slug}`}
196        />
197      </div>
198      {/* Read-only, not disabled: a disabled field submits nothing, and without the slug every save
199          looks like a new post. */}
200      <input type="hidden" form={formId} name="slug" value={slug} />
201      <span className="cap-field-help">
202        Fixed after the first save. It is the filename and the public URL.
203      </span>
204    </div>
205  );
206}
207
208function TagField({
209  formId,
210  tags,
211  onChange,
212  options,
213}: {
214  formId: string;
215  tags: string[];
216  onChange: (tags: string[]) => void;
217  options: string[];
218}) {
219  const [entry, setEntry] = useState("");
220  // What the last add or remove did, for the status region: a token appearing is silent otherwise.
221  const [note, setNote] = useState("");
222  const entryRef = useRef<HTMLInputElement>(null);
223  const listId = "tag-options";
224
225  const add = (raw: string) => {
226    const value = raw.trim().toLowerCase();
227    if (!value || tags.includes(value)) {
228      setEntry("");
229      return;
230    }
231    onChange([...tags, value]);
232    setNote(`Added tag ${value}.`);
233    setEntry("");
234  };
235
236  const remove = (tag: string) => {
237    onChange(tags.filter((t) => t !== tag));
238    setNote(`Removed tag ${tag}.`);
239  };
240
241  return (
242    <div className="cap-field">
243      <span className="cap-field-label" id="tags-label">
244        Tags
245      </span>
246      <ul className="app-pills" aria-labelledby="tags-label">
247        {tags.map((tag) => (
248          <li key={tag}>
249            <span className="cap-pill" data-variant="outline">
250              {tag}
251              <button
252                type="button"
253                className="cap-link-btn"
254                onClick={() => {
255                  remove(tag);
256                  // The button goes with its token, so focus moves to the field rather than to the page.
257                  entryRef.current?.focus();
258                }}
259              >
260                <span aria-hidden="true">x</span>
261                <span className="cap-sr-only">Remove tag {tag}</span>
262              </button>
263            </span>
264          </li>
265        ))}
266      </ul>
267      <input
268        ref={entryRef}
269        className="cap-input"
270        value={entry}
271        list={listId}
272        aria-label="Add a tag"
273        placeholder="Add a tag"
274        autoComplete="off"
275        onChange={(event) => {
276          const value = event.target.value;
277          if (value.endsWith(",")) add(value.slice(0, -1));
278          else setEntry(value);
279        }}
280        onKeyDown={(event) => {
281          if (event.key === "Enter") {
282            event.preventDefault();
283            add(entry);
284          }
285          const last = tags[tags.length - 1];
286          if (event.key === "Backspace" && entry === "" && last !== undefined) {
287            remove(last);
288          }
289        }}
290        onBlur={() => add(entry)}
291      />
292      <datalist id={listId}>
293        {options
294          .filter((option) => !tags.includes(option))
295          .map((option) => (
296            <option key={option} value={option} />
297          ))}
298      </datalist>
299      <input type="hidden" form={formId} name="tags" value={tags.join(", ")} />
300      <p className="cap-sr-only" role="status">
301        {note}
302      </p>
303    </div>
304  );
305}
306
307function CoverField({
308  formId,
309  src,
310  onSrcChange,
311  alt,
312  onAltChange,
313  needsAlt,
314}: {
315  formId: string;
316  src: string;
317  onSrcChange: (value: string) => void;
318  alt: string;
319  onAltChange: (value: string) => void;
320  needsAlt: boolean;
321}) {
322  const [picking, setPicking] = useState(false);
323  const chooseRef = useRef<HTMLButtonElement>(null);
324  // Picking or cancelling unmounts the picker and the focused control with it, so focus goes back
325  // to the button that opened it.
326  const closePicker = () => {
327    setPicking(false);
328    chooseRef.current?.focus();
329  };
330
331  return (
332    <div className="cap-field">
333      <span className="cap-field-label">Cover image</span>
334
335      {src ? (
336        <div className="app-actions">
337          <img src={src} alt="" className="app-thumb" width={96} height={54} />
338          <code className="cap-mono">{src}</code>
339          <button
340            type="button"
341            className="cap-btn"
342            data-size="sm"
343            data-variant="quiet"
344            onClick={() => onSrcChange("")}
345          >
346            Remove
347          </button>
348        </div>
349      ) : null}
350
351      <div>
352        <button
353          ref={chooseRef}
354          type="button"
355          className="cap-btn"
356          data-size="sm"
357          aria-expanded={picking}
358          onClick={() => setPicking((was) => !was)}
359        >
360          {src ? "Choose a different image" : "Choose an image"}
361        </button>
362      </div>
363
364      {/* Picking pre-fills alt only when the field is empty: an alt already written for this cover
365          outranks the stored one. */}
366      {picking ? (
367        <MediaPicker
368          onCancel={closePicker}
369          onPick={(picked) => {
370            onSrcChange(picked.url);
371            if (picked.alt && !alt.trim()) onAltChange(picked.alt);
372            closePicker();
373          }}
374        />
375      ) : null}
376
377      <input type="hidden" form={formId} name="coverSrc" value={src} />
378
379      <label className="cap-field-label" htmlFor="field-cover-alt">
380        Cover alt text
381      </label>
382      <input
383        id="field-cover-alt"
384        className="cap-input"
385        form={formId}
386        name="coverAlt"
387        value={alt}
388        onChange={(event) => onAltChange(event.target.value)}
389        autoComplete="off"
390        aria-invalid={needsAlt}
391        aria-describedby={needsAlt ? "cover-alt-alarm" : undefined}
392      />
393      {needsAlt ? (
394        <p className="cap-field-error" id="cover-alt-alarm">
395          A cover without alt text will be refused by the save gate.
396        </p>
397      ) : null}
398    </div>
399  );
400}
401
402// The visible control is unnamed so it stays out of the payload; the hidden publishAt carries the ISO.
403// With scripting off a schedule cannot be changed, but the hidden field preserves an existing one.
404function ScheduleField({
405  formId,
406  date,
407  publishAt,
408  onPublishAtChange,
409}: {
410  formId: string;
411  date: string;
412  publishAt: string;
413  onPublishAtChange: (value: string) => void;
414}) {
415  /*
416   * The hold and the typed time are kept apart from `publishAt`: clearing the field used to set it
417   * to "", which silently dropped the hold. Now only the checkbox drops it, and a cleared or invalid
418   * time leaves the last valid one in place and says so.
419   */
420  const [holding, setHolding] = useState(publishAt.trim() !== "");
421  const [raw, setRaw] = useState(() => toLocalInput(publishAt));
422  const rawValid = toIso(raw) !== "";
423
424  // A change from elsewhere (the publish dialog) wins; a cleared field leaves `publishAt` unchanged, so this does not run.
425  useEffect(() => {
426    setHolding(publishAt.trim() !== "");
427    setRaw((current) => (toIso(current) === publishAt ? current : toLocalInput(publishAt)));
428  }, [publishAt]);
429
430  return (
431    <div className="cap-field">
432      <label className="cap-field-label" htmlFor="field-date">
433        Post date
434      </label>
435      <input
436        id="field-date"
437        className="cap-input"
438        form={formId}
439        name="date"
440        type="date"
441        defaultValue={date}
442        required
443      />
444
445      <span className="cap-field-label">Publication</span>
446      {/* Unnamed on purpose: a control with no `name` is never submitted, so the toggle stays out
447          of the payload. */}
448      <label className="cap-check">
449        <input
450          type="checkbox"
451          checked={holding}
452          onChange={(event) => {
453            if (event.target.checked) {
454              const local = anHourFromNowLocal();
455              setRaw(local);
456              setHolding(true);
457              onPublishAtChange(toIso(local));
458            } else {
459              setHolding(false);
460              onPublishAtChange("");
461            }
462          }}
463        />
464        Hold until a set time, rather than going live on publish
465      </label>
466
467      {holding ? (
468        <>
469          <label className="cap-field-label" htmlFor="field-schedule">
470            Goes live at (your local time)
471          </label>
472          <input
473            id="field-schedule"
474            className="cap-input"
475            type="datetime-local"
476            value={raw}
477            onChange={(event) => {
478              setRaw(event.target.value);
479              const next = toIso(event.target.value);
480              if (next) onPublishAtChange(next);
481            }}
482            aria-invalid={!rawValid}
483            aria-describedby={rawValid ? undefined : "field-schedule-problem"}
484          />
485          {rawValid ? (
486            <span className="cap-field-help">Stored as {publishAt} (UTC).</span>
487          ) : (
488            <p className="cap-field-error" id="field-schedule-problem">
489              Not a valid date and time. Saving keeps the last valid one, {publishAt} (UTC).
490            </p>
491          )}
492        </>
493      ) : null}
494
495      <input type="hidden" form={formId} name="publishAt" value={publishAt} />
496    </div>
497  );
498}