fofos-admin/web/sections/PagesPanel.tsx

import { useCallback, useEffect, useRef, useState } from 'react';
import { ChevronDown, ChevronUp, Loader2, Lock, Plus, Trash2 } from 'lucide-react';
import { useSearchParams } from 'react-router';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { useClient } from 'hooks/useClient';
import { readableError } from '../errors';
import { useFlash } from '../useFlash';
import { useSaveTarget } from '../SaveTarget';
import { usePages, type Page } from '../usePages';

/**
 * The site's pages: what they are called, where they live, and in what order.
 *
 * ── Three kinds of change, and they are not saved the same way ──
 *
 * The TEXT of a page — its title, its menu label, its address — is drafted and written by the one Save
 * in the bar, like every other section. Typing is a thing people do halfway and change their minds
 * about, and a field that wrote on every keystroke would fill the site with half-typed page names.
 *
 * ADDING, DELETING and REORDERING are immediate. Each is a single deliberate gesture with an obvious
 * result, and holding them in a draft would mean a list on screen that does not exist yet — then a
 * Save that has to decide what order to apply three kinds of change in, which is a bug waiting to be
 * written.
 *
 * ── Home ──
 *
 * Its address is fixed and it cannot be deleted, so those two controls are absent rather than disabled
 * for it. Its title is a field like any other: that is what the browser tab says, and it is the field
 * most likely to be wrong on a site whose front page is currently called "Home".
 */
export const PagesPanel = () => {
  const client = useClient();
  const clientRef = useRef(client);
  clientRef.current = client;

  const [params, setParams] = useSearchParams();
  const selected = Number(params.get('page')) || null;

  const [stored, setStored] = useState<Page[] | null>(null);
  const [draft, setDraft] = useState<Page[]>([]);
  const [busy, setBusy] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [saved, flashSaved] = useFlash();
  const { announce } = usePages();

  const apply = useCallback(
    (rows: Page[]) => {
      setStored(rows);
      setDraft(rows);
      // The nav draws these too, and it is a sibling panel — so the list is announced rather than
      // fetched twice and left to drift.
      announce(rows);
    },
    [announce],
  );

  const load = useCallback(async () => {
    try {
      apply((await clientRef.current.get<{ data: Page[] }>('/fofos-admin/pages')).data);
    } catch (failure) {
      setError(readableError(failure));
    }
  }, [apply]);

  useEffect(() => {
    void load();
  }, [load]);

  const edit = (id: number, patch: Partial<Page>) =>
    setDraft((rows) => rows.map((row) => (row.id === id ? { ...row, ...patch } : row)));

  /** Only what actually changed, so a save touches the rows somebody edited and no others. */
  const changed = () =>
    draft.filter((row) => {
      const was = stored?.find((other) => other.id === row.id);
      return was && (was.title !== row.title || was.menu_label !== row.menu_label || was.slug !== row.slug);
    });

  const dirty = Boolean(stored) && changed().length > 0;

  const save = async () => {
    setBusy(true);
    setError(null);
    try {
      for (const row of changed()) {
        await clientRef.current.patch(`/fofos-admin/pages/${row.id}`, {
          title: row.title,
          menu_label: row.menu_label,
          // Home's is dropped by the API, so it costs nothing to send and keeps one code path here.
          slug: row.slug,
        });
      }
      await load();
      flashSaved();
    } catch (failure) {
      setError(readableError(failure));
      // Back to what the server has. A failed save that left the fields as typed would look saved.
      await load();
    } finally {
      setBusy(false);
    }
  };

  useSaveTarget(dirty, busy, save);

  const act = async (run: () => Promise<unknown>) => {
    setBusy(true);
    setError(null);
    try {
      await run();
      await load();
    } catch (failure) {
      setError(readableError(failure));
    } finally {
      setBusy(false);
    }
  };

  const add = () =>
    act(async () => {
      const created = await clientRef.current.post<{ data: Page }>('/fofos-admin/pages', { title: 'New page' });
      // Selected on arrival: a new row at the bottom of a long list is easy to lose, and the next
      // thing anybody does is rename it.
      const next = new URLSearchParams(params);
      next.set('page', String(created.data.id));
      setParams(next, { replace: true });
    });

  const remove = (page: Page) =>
    act(async () => {
      await clientRef.current.delete(`/fofos-admin/pages/${page.id}`);
      if (selected === page.id) {
        const next = new URLSearchParams(params);
        next.delete('page');
        setParams(next, { replace: true });
      }
    });

  const move = (index: number, by: number) => {
    const to = index + by;
    if (to < 0 || to >= draft.length) return;
    const ids = draft.map((row) => row.id);
    const [id] = ids.splice(index, 1);
    ids.splice(to, 0, id!);
    return act(() => clientRef.current.put('/fofos-admin/pages/order', { ids }));
  };

  if (!stored) return <div className="p-4 text-xs text-muted-foreground">{error ?? 'Loading…'}</div>;

  return (
    <div className="flex size-full flex-col gap-3 overflow-auto p-4">
      {saved && <p className="shrink-0 text-xs text-success">Saved</p>}
      {error && <p className="shrink-0 text-xs text-destructive">{error}</p>}

      <div className="flex flex-col gap-2">
        {draft.map((page, index) => (
          <div
            key={page.id}
            onPointerDown={() => {
              const next = new URLSearchParams(params);
              next.set('page', String(page.id));
              setParams(next, { replace: true });
            }}
            className={`flex flex-col gap-2 rounded-lg border p-3 ${
              selected === page.id ? 'border-primary' : 'border-border'
            }`}
          >
            <div className="flex items-center gap-2">
              <div className="flex shrink-0 flex-col text-muted-foreground">
                <button
                  type="button"
                  className="leading-none hover:text-foreground disabled:opacity-30"
                  onClick={() => void move(index, -1)}
                  disabled={index === 0 || busy}
                  title="Move up"
                >
                  <ChevronUp className="size-3.5" />
                </button>
                <button
                  type="button"
                  className="leading-none hover:text-foreground disabled:opacity-30"
                  onClick={() => void move(index, 1)}
                  disabled={index === draft.length - 1 || busy}
                  title="Move down"
                >
                  <ChevronDown className="size-3.5" />
                </button>
              </div>

              <div className="flex min-w-0 flex-1 flex-col gap-1">
                <label className="text-[10px] text-muted-foreground">Page title</label>
                <Input value={page.title} onChange={(event) => edit(page.id, { title: event.currentTarget.value })} />
              </div>

              <div className="flex min-w-0 flex-1 flex-col gap-1">
                <label className="text-[10px] text-muted-foreground">Menu item</label>
                <Input
                  value={page.menu_label ?? ''}
                  placeholder="Not in the menu"
                  onChange={(event) => edit(page.id, { menu_label: event.currentTarget.value || null })}
                />
              </div>

              <div className="flex w-52 shrink-0 flex-col gap-1">
                <label className="text-[10px] text-muted-foreground">Address</label>
                {page.is_home ? (
                  // Absent rather than disabled. The front page is always `/`, and a greyed field
                  // invites a person to work out why they cannot use it.
                  <div className="flex h-9 items-center gap-1.5 rounded-md border border-input px-3 text-xs text-muted-foreground">
                    <Lock className="size-3" />/
                  </div>
                ) : (
                  <Input
                    value={page.slug}
                    onChange={(event) => edit(page.id, { slug: event.currentTarget.value })}
                    // Said, not enforced: the server cleans it, and a field that fights while you type
                    // is worse than one that tidies up after you.
                    placeholder="about-us"
                  />
                )}
              </div>

              {page.is_home ? (
                <div className="size-7 shrink-0" />
              ) : (
                <Button
                  size="sm"
                  variant="ghost"
                  className="size-7 shrink-0 p-0 text-muted-foreground hover:text-destructive"
                  onClick={() => void remove(page)}
                  disabled={busy}
                  title={`Delete ${page.title}`}
                >
                  <Trash2 className="size-3.5" />
                </Button>
              )}
            </div>
          </div>
        ))}
      </div>

      <Button size="sm" variant="outline" className="self-start" onClick={() => void add()} disabled={busy}>
        {busy ? <Loader2 className="size-3.5 animate-spin" /> : <Plus className="size-3.5" />}
        Add page
      </Button>
    </div>
  );
};