atelier/web/Gallery/Gallery.tsx

import { Link, useSearchParams } from 'react-router';
import { X } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { fileUrl } from '../lib/api';
import type { GenerationRow } from '../lib/api';
import { Lightbox } from './Lightbox';
import { useLightboxManager } from './useLightboxManager';
import { useGalleryManager } from './useGalleryManager';

/**
 * The main surface: every image, or one collection's images when `?collection=` is set.
 *
 * The collection view is HERE rather than in the Collections panel because that panel is a narrow
 * selector — showing a grid of images inside it meant two thumbnails per row, and it replaced the
 * list you were selecting from with the thing you selected.
 */
export const Gallery = () => {
  const [searchParams] = useSearchParams();
  const collectionId = searchParams.get('collection') ?? undefined;
  const manager = useGalleryManager(collectionId);
  // Hooks run before any early return, or the order changes between renders.
  const lightbox = useLightboxManager(manager.rows);

  const allImagesTo = (() => {
    const next = new URLSearchParams(searchParams);
    next.delete('collection');
    next.delete('selected');
    const search = next.toString();
    return { search: search ? `?${search}` : '' };
  })();

  if (manager.loading) return <p className="p-4 text-sm text-muted-foreground">Loading…</p>;
  if (manager.error) return <p className="p-4 text-sm text-destructive">{manager.error}</p>;

  return (
    <div className="h-full space-y-6 overflow-y-auto p-4">
      <div className="flex items-center justify-between gap-3">
        <div className="flex min-w-0 items-baseline gap-3">
          {manager.collection && (
            <>
              <h2 className="truncate text-lg font-semibold">{manager.collection.name}</h2>
              <Link to={allImagesTo} className="shrink-0 text-sm text-muted-foreground hover:text-foreground">
                All images
              </Link>
            </>
          )}
          <p className="shrink-0 text-sm text-muted-foreground">
            {manager.succeeded.length} image{manager.succeeded.length === 1 ? '' : 's'}
            {manager.totalCost > 0 && ` · $${manager.totalCost.toFixed(4)} total`}
          </p>
        </div>
        <Button variant="ghost" size="sm" onClick={() => void manager.refresh()}>
          Refresh
        </Button>
      </div>

      {manager.rows.length === 0 ? (
        <p className="text-sm text-muted-foreground">
          {manager.collection ? 'Nothing filed here yet.' : 'Nothing generated yet.'}
        </p>
      ) : (
        <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
          {manager.rows.map((row) => (
            <Tile
              key={row.id}
              row={row}
              searchParams={searchParams}
              onRemove={manager.collection ? () => void manager.removeFromCollection(row.id) : undefined}
            />
          ))}
        </div>
      )}

      <Lightbox manager={lightbox} />
    </div>
  );
};

type TileProps = { row: GenerationRow; searchParams: URLSearchParams; onRemove?: () => void };

const Tile = ({ row, searchParams, onRemove }: TileProps) => {
  const src = fileUrl(row.url);
  const to = (() => {
    const next = new URLSearchParams(searchParams);
    next.set('selected', row.id);
    return { search: `?${next.toString()}` };
  })();

  return (
    <figure className="group relative space-y-2">
      <div className="flex aspect-square items-center justify-center overflow-hidden rounded-lg border border-border bg-muted/30">
        {src ? (
          // A real link, not a button with an onClick — the selection lives in the URL
          // (`?selected=<id>`), so this is a navigation and it earns cmd-click, middle-click and
          // focus-visible for free.
          <Link
            to={to}
            aria-label={`Open: ${row.prompt.slice(0, 80)}`}
            className="size-full cursor-zoom-in transition hover:opacity-90 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-amber-400"
          >
            <img src={src} alt={row.prompt} loading="lazy" className="size-full object-cover" />
          </Link>
        ) : (
          <span className="px-3 text-center text-xs text-muted-foreground">{row.error ?? row.status}</span>
        )}
      </div>

      {/* Only in collection mode: "remove" means remove from THIS collection, and on the all-images
          view there is nothing to remove it from. */}
      {onRemove && (
        <button
          type="button"
          onClick={onRemove}
          title="Remove from this collection"
          className="absolute right-2 top-2 rounded bg-black/60 p-1.5 text-white/70 opacity-0 transition group-hover:opacity-100 hover:text-white"
        >
          <X className="size-3.5" />
        </button>
      )}

      <figcaption className="space-y-1">
        <p className="line-clamp-2 text-xs text-foreground/80">{row.prompt}</p>
        <p className="text-[11px] text-muted-foreground">
          {row.model}
          {row.cost_usd && ` · $${Number(row.cost_usd).toFixed(4)}`}
          {row.duration_ms != null && ` · ${(row.duration_ms / 1000).toFixed(1)}s`}
        </p>
      </figcaption>
    </figure>
  );
};