@backmatter/studio 0.0.7 → 0.0.9

package/src/pages/MediaGalleryPage.tsx

@@ -6,10 +6,11 @@ import {
   IconSquareBehindSquare1,
   IconTrashCanSimple,
 } from "@central-icons-react/round-outlined-radius-2-stroke-1.5";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { useOutletContext, useSearchParams } from "react-router";
 import * as stylex from "@stylexjs/stylex";
-import { deleteMedia, fetchMedia, uploadMedia } from "../api";
+import { deleteMedia, describeMedia, fetchMedia, uploadMedia } from "../api";
+import { Input } from "../ui/Input";
 import { colors, radius, space, type, z } from "../styles/tokens.stylex";
 import { Button } from "../ui/Button";
 import { ConfirmDialog } from "../ui/ConfirmDialog";
@@ -19,10 +20,10 @@ import { canWriteContent } from "../workspace/permissions";
 import type { WorkspaceOutletContext } from "../workspace/types";
 import {
   beginUploads,
+  describeMedia as rememberDescription,
   emptyMediaGrid,
   failUpload,
   finishUpload,
-  gridLength,
   lightboxImageId,
   mediaIdAfterRemoval,
   nextMediaIndex,
@@ -57,38 +58,69 @@ export function MediaGalleryPage({
   const [deleteError, setDeleteError] = useState<string | null>(null);
   const [selectedId, setSelectedId] = useState<string | null>(null);
   const [settled, setSettled] = useState(false);
+  const urlQuery = searchParams.get("q") ?? "";
+  const [draft, setDraft] = useState(urlQuery);
+  const [query, setQuery] = useState(urlQuery);
   const dragDepth = useRef(0);
   const scroller = useRef<HTMLDivElement>(null);
-  const [scroll, setScroll] = useState({ top: 0, height: 600, width: 800 });
+  const grid = useRef<HTMLDivElement>(null);
+  const [columns, setColumns] = useState(1);
   const loadingPage = useRef(false);
+  const request = useRef(0);
+
+  useEffect(() => {
+    const handle = window.setTimeout(() => setQuery(draft), 200);
+    return () => window.clearTimeout(handle);
+  }, [draft]);
+
+  useEffect(() => {
+    setSearchParams(
+      (current) => {
+        const next = new URLSearchParams(current);
+        if (query) next.set("q", query);
+        else next.delete("q");
+        if (next.get("q") === current.get("q")) return current;
+        return next;
+      },
+      { replace: true },
+    );
+  }, [query, setSearchParams]);
 
   const load = useCallback(
     async (cursor?: string) => {
-      if (loadingPage.current) return;
+      if (cursor && loadingPage.current) return;
+      const ticket = ++request.current;
       loadingPage.current = true;
+      if (!cursor) setState((current) => ({ ...current, nextCursor: null }));
       try {
-        const page = await fetchMedia(workspace.id, { cursor });
+        const page = await fetchMedia(workspace.id, { query: query || undefined, cursor });
+        if (ticket !== request.current) return;
         setState((current) => receivePage(current, page, cursor ? "append" : "replace"));
         setError(null);
       } catch (err) {
+        if (ticket !== request.current) return;
         setError(err instanceof Error ? err.message : "Could not load media");
       } finally {
-        loadingPage.current = false;
-        if (!cursor) setSettled(true);
+        if (ticket === request.current) {
+          loadingPage.current = false;
+          if (!cursor) setSettled(true);
+        }
       }
     },
-    [workspace.id],
+    [query, workspace.id],
   );
 
   useEffect(() => {
     void load();
   }, [load]);
 
-  useEffect(() => {
+  const maybeLoadMore = useCallback(() => {
     const node = scroller.current;
-    if (!node) return;
-    setScroll({ top: node.scrollTop, height: node.clientHeight || 600, width: node.clientWidth || 800 });
-  }, [state.pending.length, state.loaded.length]);
+    if (!node || !state.nextCursor) return;
+    if (node.scrollTop + node.clientHeight > node.scrollHeight - CELL * 2) {
+      void load(state.nextCursor);
+    }
+  }, [load, state.nextCursor]);
 
   const uploadFiles = useCallback(
     (files: File[]) => {
@@ -250,14 +282,8 @@ export function MediaGalleryPage({
     void load(state.nextCursor);
   }, [sharedId, browsable, state.nextCursor, load]);
 
-  const columns = Math.max(2, Math.floor((scroll.width - 24) / (CELL + 12)));
-  const count = gridLength(state);
-  const rows = Math.ceil(count / columns);
-  const startRow = Math.max(0, Math.floor(scroll.top / (CELL + 12)) - 1);
-  const endRow = Math.min(rows, Math.ceil((scroll.top + scroll.height) / (CELL + 12)) + 2);
-
   const cells = useMemo(() => {
-    const out: Array<{ kind: "pending"; item: PendingUpload } | { kind: "media"; item: CatalogMedia } | { kind: "empty" }> = [];
+    const out: Array<{ kind: "pending"; item: PendingUpload } | { kind: "media"; item: CatalogMedia }> = [];
     for (const item of state.pending) {
       if (item.media) out.push({ kind: "media", item: item.media });
       else out.push({ kind: "pending", item });
@@ -266,26 +292,24 @@ export function MediaGalleryPage({
       if (state.pending.some((slot) => slot.media?.id === item.id)) continue;
       out.push({ kind: "media", item });
     }
-    while (out.length < count) out.push({ kind: "empty" });
     return out;
-  }, [state.pending, state.loaded, count]);
-
-  const visible = [];
-  for (let row = startRow; row < endRow; row++) {
-    for (let column = 0; column < columns; column++) {
-      const index = row * columns + column;
-      if (index >= cells.length) break;
-      visible.push({ index, row, column, cell: cells[index]! });
-    }
-  }
+  }, [state.pending, state.loaded]);
 
-  const maybeLoadMore = () => {
-    const node = scroller.current;
-    if (!node || !state.nextCursor) return;
-    if (node.scrollTop + node.clientHeight > node.scrollHeight - CELL * 2) {
-      void load(state.nextCursor);
-    }
-  };
+  useLayoutEffect(() => {
+    const scrollNode = scroller.current;
+    const gridNode = grid.current;
+    if (!scrollNode) return;
+    const measure = () => {
+      const next = gridNode ? columnsInFirstRow(gridNode) : 1;
+      setColumns((current) => (current === next ? current : next));
+      maybeLoadMore();
+    };
+    measure();
+    const observer = new ResizeObserver(measure);
+    observer.observe(scrollNode);
+    if (gridNode) observer.observe(gridNode);
+    return () => observer.disconnect();
+  }, [maybeLoadMore, cells.length]);
 
   useEffect(() => {
     if (pick || sharedId) return;
@@ -343,21 +367,26 @@ export function MediaGalleryPage({
     state.pending.length,
   ]);
 
-  useEffect(() => {
+  useLayoutEffect(() => {
     if (!selectedId || sharedId) return;
-    const index = browsable.findIndex((item) => item.id === selectedId);
-    const node = scroller.current;
-    if (index < 0 || !node) return;
-    const place = mediaPlaces[index];
-    if (place === undefined) return;
-    const row = Math.floor(place / columns);
-    const top = row * (CELL + 12);
-    const bottom = top + CELL;
-    if (top < node.scrollTop) node.scrollTop = top;
-    else if (bottom > node.scrollTop + node.clientHeight) node.scrollTop = bottom - node.clientHeight;
-  }, [browsable, columns, mediaPlaces, selectedId, sharedId, state.pending.length]);
+    const frame = scroller.current;
+    const node = grid.current?.querySelector("[aria-current='true']");
+    if (!frame || !(node instanceof HTMLElement)) return;
+    const item = node.getBoundingClientRect();
+    const bounds = frame.getBoundingClientRect();
+    if (item.top < bounds.top) frame.scrollTop -= bounds.top - item.top;
+    else if (item.bottom > bounds.bottom) frame.scrollTop += item.bottom - bounds.bottom;
+  }, [columns, selectedId, sharedId]);
 
   const open = lightbox >= 0 ? browsable[lightbox] : undefined;
+  const saveText = useCallback(
+    async (text: { alt?: string; caption?: string }) => {
+      if (!open) return;
+      const result = await describeMedia(workspace.id, open.id, text);
+      setState((current) => rememberDescription(current, result.media));
+    },
+    [open, workspace.id],
+  );
   const showEmpty =
     settled && state.pending.length === 0 && state.loaded.length === 0 && state.total === 0;
 
@@ -367,22 +396,34 @@ export function MediaGalleryPage({
         <Text as="h1" size="xl" weight="medium">
           Media
         </Text>
-        <Button variant="secondary" onClick={chooseFiles}>
-          Upload
-        </Button>
+        <div {...stylex.props(styles.toolbarActions)}>
+          <div {...stylex.props(styles.search)}>
+            <Input
+              aria-label="Search media"
+              placeholder="Search"
+              value={draft}
+              onChange={(event) => setDraft(event.target.value)}
+            />
+          </div>
+          <Button variant="secondary" onClick={chooseFiles}>
+            Upload
+          </Button>
+        </div>
       </div>
       {error ? <Text tone="danger">{error}</Text> : null}
       {rejected.length > 0 ? <Text tone="danger">{rejected.join(" · ")}</Text> : null}
       <div
         ref={scroller}
         {...stylex.props(styles.scroller)}
-        onScroll={(event) => {
-          const node = event.currentTarget;
-          setScroll({ top: node.scrollTop, height: node.clientHeight, width: node.clientWidth });
+        onScroll={() => {
           maybeLoadMore();
         }}
       >
-        {showEmpty ? (
+        {showEmpty && query ? (
+          <div {...stylex.props(styles.emptyState)}>
+            <Text tone="muted">No images match this search.</Text>
+          </div>
+        ) : showEmpty ? (
           <div
             {...stylex.props(styles.emptyState)}
             onDragOver={(event) => event.preventDefault()}
@@ -410,20 +451,14 @@ export function MediaGalleryPage({
             </div>
           </div>
         ) : (
-        <div {...stylex.props(styles.canvas)} style={{ height: rows * (CELL + 12) }}>
-          {visible.map(({ index, row, column, cell }) => (
+        <div ref={grid} {...stylex.props(styles.canvas)}>
+          {cells.map((cell) => (
             <div
-              key={cell.kind === "media" ? cell.item.id : cell.kind === "pending" ? cell.item.key : `empty-${index}`}
+              key={cell.kind === "media" ? cell.item.id : cell.item.key}
               {...stylex.props(styles.cell)}
-              style={{
-                width: CELL,
-                height: CELL,
-                transform: `translate(${column * (CELL + 12)}px, ${row * (CELL + 12)}px)`,
-              }}
             >
-              {cell.kind === "empty" ? <div {...stylex.props(styles.empty)} /> : null}
               {cell.kind === "pending" ? (
-                <figure {...stylex.props(styles.figure)}>
+                <figure {...stylex.props(styles.figure, styles.placed)}>
                   <img src={cell.item.previewUrl} alt="" {...stylex.props(styles.image, styles.dimmed)} />
                   {cell.item.status === "error" ? (
                     <figcaption {...stylex.props(styles.caption)}>{cell.item.error}</figcaption>
@@ -478,6 +513,8 @@ export function MediaGalleryPage({
           onPrev={prevLightbox}
           onNext={nextLightbox}
           onDelete={canDelete ? () => requestDelete(open) : undefined}
+          canEdit={canDelete}
+          onDescribe={saveText}
         />
       ) : null}
       <ConfirmDialog
@@ -519,10 +556,10 @@ function MediaHit({
     <button
       type="button"
       aria-current={selected ? "true" : undefined}
-      {...stylex.props(styles.hit, selected && styles.selected)}
+      {...stylex.props(styles.hit, !menu && styles.placed, selected && styles.selected)}
       onClick={onOpen}
     >
-      <img src={item.thumbUrl} alt={item.filename} {...stylex.props(styles.image)} />
+      <img src={item.thumbUrl} alt={item.alt?.trim() || item.filename} {...stylex.props(styles.image)} />
     </button>
   );
   if (!menu) return image;
@@ -572,6 +609,18 @@ function MediaHit({
   );
 }
 
+function columnsInFirstRow(grid: HTMLElement): number {
+  const first = grid.children[0];
+  if (!(first instanceof HTMLElement)) return 1;
+  const top = first.offsetTop;
+  let count = 0;
+  for (const kid of grid.children) {
+    if (!(kid instanceof HTMLElement) || kid.offsetTop - top > 1) break;
+    count += 1;
+  }
+  return Math.max(1, count);
+}
+
 function gridKeyTarget(target: EventTarget | null, scroller: HTMLElement | null): boolean {
   if (!(target instanceof HTMLElement)) return false;
   if (target.closest("input, textarea, select, [contenteditable='true']")) return false;
@@ -594,6 +643,15 @@ const styles = stylex.create({
     gap: space.lg,
     padding: space.xl,
   },
+  toolbarActions: {
+    display: "flex",
+    alignItems: "center",
+    gap: space.md,
+    minWidth: 0,
+  },
+  search: {
+    width: "220px",
+  },
   scroller: {
     flex: 1,
     minHeight: 0,
@@ -645,28 +703,27 @@ const styles = stylex.create({
   },
   canvas: {
     position: "relative",
+    display: "grid",
+    gridTemplateColumns: "repeat(auto-fill, minmax(168px, 1fr))",
+    gap: space.lg,
+    alignItems: "start",
   },
   cell: {
-    position: "absolute",
-    top: 0,
-    left: 0,
-    boxSizing: "border-box",
-    padding: 6,
-  },
-  empty: {
+    position: "relative",
     width: "100%",
-    height: "100%",
-    borderRadius: radius.md,
-    backgroundColor: colors.bgPanel,
+    aspectRatio: "1",
+    minWidth: 0,
+  },
+  placed: {
+    position: "absolute",
+    inset: space.sm,
   },
   figure: {
-    position: "relative",
     margin: 0,
-    height: "100%",
-    display: "flex",
-    flexDirection: "column",
   },
   hit: {
+    position: "absolute",
+    inset: 0,
     display: "block",
     width: "100%",
     height: "100%",
@@ -683,9 +740,9 @@ const styles = stylex.create({
     outlineOffset: 3,
   },
   menuHit: {
+    position: "absolute",
+    inset: space.sm,
     display: "block",
-    width: "100%",
-    height: "100%",
   },
   menu: {
     minWidth: "11rem",
@@ -697,6 +754,8 @@ const styles = stylex.create({
     color: colors.danger,
   },
   image: {
+    position: "absolute",
+    inset: 0,
     width: "100%",
     height: "100%",
     objectFit: "cover",