atelier/web/Collections/Collections.tsx

import { useState } from 'react';
import { Link, useSearchParams } from 'react-router';
import { Folder, FolderOpen, Pencil, Plus, Trash2 } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { Checkbox } from '@/components/ui/checkbox';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from '@/components/ui/dialog';
import { cn } from '@/lib/utils';
import type { CollectionSummary } from '../lib/api';
import { useCollectionsManager } from './useCollectionsManager';
import type { CollectionsManager } from './useCollectionsManager';

/**
 * The collection list: a filter, a create button, and one row per collection.
 *
 * Rows rather than a grid of covers. A grid of thumbnails is a browsing surface and this panel is a
 * selector — it lives in a narrow column beside the gallery, where two cards per row means four
 * collections visible and a lot of scrolling to find the one you meant. A row is a name, a count and
 * its two actions.
 *
 * Selecting one is a LINK, writing `?collection=<id>`. The Gallery panel reads that param and shows
 * the images; nothing here fetches them. That is the whole reason the detail view left this file.
 */
export const Collections = () => {
  const manager = useCollectionsManager();
  const [searchParams] = useSearchParams();
  const selectedId = searchParams.get('collection');
  const [creating, setCreating] = useState(false);
  const [renaming, setRenaming] = useState<CollectionSummary | null>(null);
  const [deleting, setDeleting] = useState<CollectionSummary | null>(null);

  return (
    <div className="flex h-full flex-col gap-3 p-4">
      <div className="flex gap-2">
        <Input
          placeholder="Filter collections"
          value={manager.query}
          onChange={(ev) => manager.setQuery(ev.target.value)}
        />
        <Button size="icon" variant="secondary" title="New collection" onClick={() => setCreating(true)}>
          <Plus className="size-4" />
        </Button>
      </div>

      {manager.error && <p className="text-sm text-destructive">{manager.error}</p>}

      <div className="min-h-0 flex-1 overflow-y-auto">
        {manager.loading ? (
          <p className="text-sm text-muted-foreground">Loading…</p>
        ) : manager.collections.length === 0 ? (
          <p className="text-sm text-muted-foreground">
            {manager.total === 0 ? (
              <>
                No collections yet. Create one, or pass <code className="text-foreground">?collection=name</code> when
                generating and it will be made for you.
              </>
            ) : (
              'Nothing matches that filter.'
            )}
          </p>
        ) : (
          <ul className="space-y-0.5">
            {manager.collections.map((collection) => (
              <Row
                key={collection.id}
                collection={collection}
                selected={collection.id === selectedId}
                searchParams={searchParams}
                onRename={() => setRenaming(collection)}
                onDelete={() => setDeleting(collection)}
              />
            ))}
          </ul>
        )}
      </div>

      <NameDialog
        open={creating}
        title="New collection"
        description="An afternoon, a suite, a client — whatever you will look for it by."
        confirmLabel="Create"
        onClose={() => setCreating(false)}
        onSubmit={(name) => manager.create(name)}
      />

      <NameDialog
        open={!!renaming}
        title="Rename collection"
        initial={renaming?.name ?? ''}
        confirmLabel="Rename"
        onClose={() => setRenaming(null)}
        onSubmit={(name) => manager.rename(renaming!.id, name)}
      />

      <DeleteDialog collection={deleting} manager={manager} onClose={() => setDeleting(null)} />
    </div>
  );
};

type RowProps = {
  collection: CollectionSummary;
  selected: boolean;
  searchParams: URLSearchParams;
  onRename: () => void;
  onDelete: () => void;
};

const Row = ({ collection, selected, searchParams, onRename, onDelete }: RowProps) => {
  const to = (() => {
    const next = new URLSearchParams(searchParams);
    next.set('collection', collection.id);
    // The lightbox selection belongs to whatever was being looked at before; carrying it into another
    // collection opens an image that is not in the list you just switched to.
    next.delete('selected');
    return { search: `?${next.toString()}` };
  })();

  const Icon = selected ? FolderOpen : Folder;

  return (
    <li className={cn('group flex items-center rounded-md pr-1', selected ? 'bg-accent' : 'hover:bg-accent/50')}>
      <Link to={to} className="flex min-w-0 flex-1 items-center gap-2 px-2 py-2">
        <Icon className={cn('size-4 shrink-0', selected ? 'text-foreground' : 'text-muted-foreground')} />
        <span className="min-w-0 flex-1 truncate text-sm">{collection.name}</span>
        <span className="shrink-0 text-xs tabular-nums text-muted-foreground">{collection.item_count}</span>
      </Link>

      {/* Visible on hover, and on keyboard focus — `opacity-0` alone would hide a button you can still
          tab to, which is a control nobody can see but everybody can press. */}
      <span className="flex shrink-0 opacity-0 transition group-hover:opacity-100 focus-within:opacity-100">
        <Button size="icon" variant="ghost" className="size-7" title="Rename" onClick={onRename}>
          <Pencil className="size-3.5" />
        </Button>
        <Button size="icon" variant="ghost" className="size-7" title="Delete" onClick={onDelete}>
          <Trash2 className="size-3.5" />
        </Button>
      </span>
    </li>
  );
};

type NameDialogProps = {
  open: boolean;
  title: string;
  description?: string;
  initial?: string;
  confirmLabel: string;
  onClose: () => void;
  onSubmit: (name: string) => Promise<boolean>;
};

/** Create and rename are the same dialog: one text field, one verb. */
const NameDialog = ({ open, title, description, initial = '', confirmLabel, onClose, onSubmit }: NameDialogProps) => {
  const [name, setName] = useState(initial);
  const [busy, setBusy] = useState(false);

  const submit = async () => {
    if (!name.trim() || busy) return;
    setBusy(true);
    const ok = await onSubmit(name);
    setBusy(false);
    if (ok) onClose();
  };

  return (
    <Dialog
      open={open}
      onOpenChange={(next) => {
        if (next) setName(initial);
        else onClose();
      }}
    >
      <DialogContent className="sm:max-w-md">
        <DialogHeader>
          <DialogTitle>{title}</DialogTitle>
          {description && <DialogDescription>{description}</DialogDescription>}
        </DialogHeader>

        {/* A form, so Enter submits. A dialog whose only field ignores Enter reads as broken. */}
        <form
          onSubmit={(ev) => {
            ev.preventDefault();
            void submit();
          }}
        >
          <Input autoFocus value={name} onChange={(ev) => setName(ev.target.value)} placeholder="Name" />
          <DialogFooter className="mt-4">
            <Button type="button" variant="ghost" onClick={onClose}>
              Cancel
            </Button>
            <Button type="submit" disabled={!name.trim() || busy}>
              {confirmLabel}
            </Button>
          </DialogFooter>
        </form>
      </DialogContent>
    </Dialog>
  );
};

type DeleteDialogProps = { collection: CollectionSummary | null; manager: CollectionsManager; onClose: () => void };

/**
 * Deleting a collection asks one further question, because there are two different intentions behind
 * it and the wrong guess is unrecoverable: the folder was a mistake (keep the images), or the work in
 * it was (take them too). Unchecked by default — the recoverable answer is the one you get by
 * pressing Enter without reading.
 */
const DeleteDialog = ({ collection, manager, onClose }: DeleteDialogProps) => {
  const [alsoImages, setAlsoImages] = useState(false);
  const [busy, setBusy] = useState(false);
  const count = collection?.item_count ?? 0;

  const confirm = async () => {
    if (!collection || busy) return;
    setBusy(true);
    const ok = await manager.remove(collection.id, alsoImages);
    setBusy(false);
    if (ok) onClose();
  };

  return (
    <Dialog
      open={!!collection}
      onOpenChange={(next) => {
        if (next) setAlsoImages(false);
        else onClose();
      }}
    >
      <DialogContent className="sm:max-w-md">
        <DialogHeader>
          <DialogTitle>Delete “{collection?.name}”?</DialogTitle>
          <DialogDescription>
            {count === 0
              ? 'This collection is empty.'
              : `It holds ${count} image${count === 1 ? '' : 's'}. They stay in the gallery unless you say otherwise.`}
          </DialogDescription>
        </DialogHeader>

        {count > 0 && (
          <Label className="flex items-start gap-3 rounded-md border border-destructive/30 p-3">
            <Checkbox checked={alsoImages} onCheckedChange={(value) => setAlsoImages(value === true)} />
            <span className="grid gap-1">
              <span className="text-sm font-medium">
                Delete the {count} image{count === 1 ? '' : 's'} as well
              </span>
              <span className="text-xs text-muted-foreground">
                Removes them from the gallery and from disk. There is no undo, and an image filed in
                another collection goes from that one too.
              </span>
            </span>
          </Label>
        )}

        <DialogFooter>
          <Button variant="ghost" onClick={onClose}>
            Cancel
          </Button>
          <Button variant="destructive" disabled={busy} onClick={() => void confirm()}>
            {alsoImages ? `Delete collection and ${count} image${count === 1 ? '' : 's'}` : 'Delete collection'}
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
};