@backmatter/studio 0.0.7 → 0.0.8

package/src/chrome/ContentExplorerSidebar.tsx

@@ -1,5 +1,6 @@
 // packages/studio/src/chrome/ContentExplorerSidebar.tsx
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { createPortal } from "react-dom";
 import { Link, useLocation, useNavigate, useSearchParams } from "react-router";
 import * as stylex from "@stylexjs/stylex";
 import { notifyTreeChanged, saveDoc, type DocListItem, type DocStatus } from "../api";
@@ -8,14 +9,14 @@ import { colors, radius, space, type } from "../styles/tokens.stylex";
 import { Tooltip } from "../ui/Tooltip";
 import {
   contentDocPath,
-  contentTypePath,
+  contentRailHref,
   isWorkspaceContentPath,
   isWorkspaceMediaPath,
   isWorkspaceSettingsPath,
   mediaPath,
   settingsPath,
-  workspaceHomePath,
 } from "../workspace-path";
+import { UserMenu } from "./UserMenu";
 import {
   groupContentTypes,
   type ContentTypeNav,
@@ -62,7 +63,36 @@ const TREE_PAD_PX = 8;
 const INDENT_PX = 8;
 const TWISTIE_PX = 16;
 
-export function ContentExplorerSidebar({ workspace }: { workspace: WorkspaceNav }) {
+export function WorkspaceRail({
+  workspace,
+  treeHost,
+}: {
+  workspace: WorkspaceNav | null;
+  treeHost: HTMLElement | null;
+}) {
+  if (!workspace) {
+    return (
+      <RailColumn>
+        <div {...stylex.props(styles.rail, styles.railAccountOnly)}>
+          <UserMenu compact />
+        </div>
+      </RailColumn>
+    );
+  }
+  return <ContentExplorerSidebar workspace={workspace} treeHost={treeHost} />;
+}
+
+function RailColumn({ children }: { children?: React.ReactNode }) {
+  return <aside {...stylex.props(styles.railColumn)}>{children}</aside>;
+}
+
+function ContentExplorerSidebar({
+  workspace,
+  treeHost,
+}: {
+  workspace: WorkspaceNav;
+  treeHost: HTMLElement | null;
+}) {
   const location = useLocation();
   const [searchParams] = useSearchParams();
   const replica = useReplicaState();
@@ -128,80 +158,83 @@ export function ContentExplorerSidebar({ workspace }: { workspace: WorkspaceNav
 
   const empty = workspace.contentTypes.length === 0;
   const settingsActive = isWorkspaceSettingsPath(location.pathname);
-  const showTree = !isWorkspaceMediaPath(location.pathname);
+  const showTree = isWorkspaceContentPath(location.pathname);
   const canWrite = canWriteContent(workspace.role);
 
+  const tree = showTree ? (
+    <div {...stylex.props(styles.panel)}>
+      <header {...stylex.props(styles.panelHeader)}>
+        <span {...stylex.props(styles.panelTitle)}>Content</span>
+        <div {...stylex.props(styles.panelActions)}>
+          <IconButton label="New file (soon)" disabled>
+            <ExplorerHeaderNewFileIcon />
+          </IconButton>
+          <IconButton label="View options (soon)" disabled>
+            <ExplorerHeaderListIcon />
+          </IconButton>
+        </div>
+      </header>
+      <div {...stylex.props(styles.treeScroll)}>
+        {empty ? (
+          <p {...stylex.props(styles.emptyHint)}>
+            No content types yet. Pull from GitHub to load models.
+          </p>
+        ) : (
+          <>
+            {grouped.pages.length > 0 ? (
+              <ExplorerSection
+                section="pages"
+                models={grouped.pages}
+                workspace={workspace}
+                docsByType={docsByType}
+                route={route}
+                expanded={expanded}
+                onToggleFolder={toggleFolder}
+                onExpandFolderPath={expandFolderPath}
+                canWrite={canWrite}
+              />
+            ) : null}
+            {grouped.data.length > 0 ? (
+              <ExplorerSection
+                section="data"
+                models={grouped.data}
+                workspace={workspace}
+                docsByType={docsByType}
+                route={route}
+                expanded={expanded}
+                onToggleFolder={toggleFolder}
+                onExpandFolderPath={expandFolderPath}
+                canWrite={canWrite}
+              />
+            ) : null}
+            {grouped.globals.length > 0 ? (
+              <ExplorerSection
+                section="globals"
+                models={grouped.globals}
+                workspace={workspace}
+                docsByType={docsByType}
+                route={route}
+                expanded={expanded}
+                onToggleFolder={toggleFolder}
+                onExpandFolderPath={expandFolderPath}
+                canWrite={canWrite}
+              />
+            ) : null}
+          </>
+        )}
+      </div>
+    </div>
+  ) : null;
+
   return (
-    <div {...stylex.props(styles.root)}>
+    <RailColumn>
       <ActivityRail
         pendingCount={pendingCount}
         settingsActive={settingsActive}
         workspaceSlug={workspace.workspaceSlug}
-        contentRoute={route}
       />
-      {showTree ? <div {...stylex.props(styles.panel)}>
-        <header {...stylex.props(styles.panelHeader)}>
-          <span {...stylex.props(styles.panelTitle)}>Content</span>
-          <div {...stylex.props(styles.panelActions)}>
-            <IconButton label="New file (soon)" disabled>
-              <ExplorerHeaderNewFileIcon />
-            </IconButton>
-            <IconButton label="View options (soon)" disabled>
-              <ExplorerHeaderListIcon />
-            </IconButton>
-          </div>
-        </header>
-        <div {...stylex.props(styles.treeScroll)}>
-          {empty ? (
-            <p {...stylex.props(styles.emptyHint)}>
-              No content types yet. Pull from GitHub to load models.
-            </p>
-          ) : (
-            <>
-              {grouped.pages.length > 0 ? (
-                <ExplorerSection
-                  section="pages"
-                  models={grouped.pages}
-                  workspace={workspace}
-                  docsByType={docsByType}
-                  route={route}
-                  expanded={expanded}
-                  onToggleFolder={toggleFolder}
-                  onExpandFolderPath={expandFolderPath}
-                  canWrite={canWrite}
-                />
-              ) : null}
-              {grouped.data.length > 0 ? (
-                <ExplorerSection
-                  section="data"
-                  models={grouped.data}
-                  workspace={workspace}
-                  docsByType={docsByType}
-                  route={route}
-                  expanded={expanded}
-                  onToggleFolder={toggleFolder}
-                  onExpandFolderPath={expandFolderPath}
-                  canWrite={canWrite}
-                />
-              ) : null}
-              {grouped.globals.length > 0 ? (
-                <ExplorerSection
-                  section="globals"
-                  models={grouped.globals}
-                  workspace={workspace}
-                  docsByType={docsByType}
-                  route={route}
-                  expanded={expanded}
-                  onToggleFolder={toggleFolder}
-                  onExpandFolderPath={expandFolderPath}
-                  canWrite={canWrite}
-                />
-              ) : null}
-            </>
-          )}
-        </div>
-      </div> : null}
-    </div>
+      {tree && treeHost ? createPortal(tree, treeHost) : null}
+    </RailColumn>
   );
 }
 
@@ -209,12 +242,10 @@ function ActivityRail({
   pendingCount,
   settingsActive,
   workspaceSlug,
-  contentRoute,
 }: {
   pendingCount: number;
   settingsActive: boolean;
   workspaceSlug: string;
-  contentRoute: ContentRoute;
 }) {
   const navigate = useNavigate();
   const location = useLocation();
@@ -222,7 +253,7 @@ function ActivityRail({
   return (
     <nav
       aria-label="Studio"
-      {...stylex.props(styles.rail, isWorkspaceMediaPath(location.pathname) && styles.railEdge)}
+      {...stylex.props(styles.rail)}
     >
       <div {...stylex.props(styles.railTop)}>
         <Tooltip label="Content" side="right">
@@ -231,13 +262,8 @@ function ActivityRail({
             aria-label="Content"
             aria-current={isWorkspaceContentPath(location.pathname) ? "page" : undefined}
             onClick={() => {
-              if (isWorkspaceMediaPath(location.pathname)) {
-                navigate(workspaceHomePath(workspaceSlug));
-                return;
-              }
-              if (contentRoute.docSlug && contentRoute.type) {
-                navigate(contentTypePath(workspaceSlug, contentRoute.type));
-              }
+              const href = contentRailHref(location.pathname, workspaceSlug);
+              if (href) navigate(href);
             }}
             {...stylex.props(
               styles.railBtn,
@@ -297,6 +323,7 @@ function ActivityRail({
             <ExplorerRailSettingsIcon />
           </Link>
         </Tooltip>
+        <UserMenu compact />
       </div>
     </nav>
   );
@@ -637,7 +664,7 @@ function FolderTreeRow({
             <ExplorerTwistie open={open} />
           </span>
           <span {...stylex.props(styles.treeIcon)}>
-            <ExplorerFolderIcon open={open} />
+            <ExplorerFolderIcon />
           </span>
           <span {...stylex.props(styles.treeLabel)}>{node.name}</span>
         </button>
@@ -833,27 +860,32 @@ function sectionTitle(section: ContentTypeSection) {
 }
 
 const styles = stylex.create({
-  root: {
+  railColumn: {
     display: "flex",
-    minHeight: 0,
-    flex: 1,
-    flexDirection: "row",
+    height: "100%",
+    width: "48px",
+    minWidth: "48px",
+    flexShrink: 0,
+    flexDirection: "column",
+    borderRightWidth: 1,
+    borderRightStyle: "solid",
+    borderRightColor: colors.border,
+    backgroundColor: colors.bgSurface,
   },
   rail: {
     display: "flex",
     width: "48px",
+    minHeight: 0,
+    flex: 1,
     flexShrink: 0,
     flexDirection: "column",
     justifyContent: "space-between",
     alignItems: "center",
-    borderRightWidth: 1,
-    borderRightStyle: "solid",
-    borderRightColor: colors.border,
     backgroundColor: colors.bgSidebar,
     paddingBlock: space.md,
   },
-  railEdge: {
-    borderRightWidth: 0,
+  railAccountOnly: {
+    justifyContent: "flex-end",
   },
   railTop: {
     display: "flex",
@@ -865,6 +897,7 @@ const styles = stylex.create({
     display: "flex",
     flexDirection: "column",
     alignItems: "center",
+    gap: 2,
   },
   railBtn: {
     position: "relative",
@@ -921,10 +954,15 @@ const styles = stylex.create({
   },
   panel: {
     display: "flex",
-    minWidth: 0,
+    width: "calc(min(360px, 38vw) - 48px)",
+    minWidth: "252px",
     minHeight: 0,
-    flex: 1,
+    flexGrow: 0,
+    flexShrink: 0,
     flexDirection: "column",
+    borderRightWidth: 1,
+    borderRightStyle: "solid",
+    borderRightColor: colors.border,
     backgroundColor: colors.bgSurface,
   },
   panelHeader: {

package/src/chrome/UserMenu.tsx

@@ -110,10 +110,12 @@ const styles = stylex.create({
     },
   },
   triggerCompact: {
+    width: "36px",
+    height: "36px",
+    minHeight: "36px",
     justifyContent: "center",
     paddingInline: 0,
     paddingBlock: 0,
-    minHeight: "32px",
   },
   initial: {
     fontSize: type.sm,

package/src/chrome/explorer-icons.tsx

@@ -9,7 +9,6 @@ import {
   IconFileText,
   IconFiles,
   IconFolder1,
-  IconFolderOpen,
   IconGit,
   IconHistory,
   IconImages1,
@@ -42,9 +41,8 @@ export function ExplorerTwistie({ open }: { open: boolean }) {
   return <Central icon={Icon} size={TREE} />;
 }
 
-export function ExplorerFolderIcon({ open }: { open: boolean }) {
-  const Icon = open ? IconFolderOpen : IconFolder1;
-  return <Central icon={Icon} size={TREE} />;
+export function ExplorerFolderIcon() {
+  return <Central icon={IconFolder1} size={TREE} />;
 }
 
 export function ExplorerFileIcon({ ext }: { ext?: string }) {

package/src/pages/MediaGalleryPage.tsx

@@ -6,7 +6,7 @@ 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";
@@ -22,7 +22,6 @@ import {
   emptyMediaGrid,
   failUpload,
   finishUpload,
-  gridLength,
   lightboxImageId,
   mediaIdAfterRemoval,
   nextMediaIndex,
@@ -59,7 +58,8 @@ export function MediaGalleryPage({
   const [settled, setSettled] = useState(false);
   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 load = useCallback(
@@ -84,11 +84,13 @@ export function MediaGalleryPage({
     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 +252,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 +262,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]);
+  }, [state.pending, state.loaded]);
 
-  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]! });
-    }
-  }
-
-  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,19 +337,16 @@ 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 showEmpty =
@@ -376,9 +367,7 @@ export function MediaGalleryPage({
       <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();
         }}
       >
@@ -410,20 +399,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>
@@ -519,7 +502,7 @@ 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)} />
@@ -572,6 +555,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;
@@ -645,28 +640,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 +677,9 @@ const styles = stylex.create({
     outlineOffset: 3,
   },
   menuHit: {
+    position: "absolute",
+    inset: space.sm,
     display: "block",
-    width: "100%",
-    height: "100%",
   },
   menu: {
     minWidth: "11rem",
@@ -697,6 +691,8 @@ const styles = stylex.create({
     color: colors.danger,
   },
   image: {
+    position: "absolute",
+    inset: 0,
     width: "100%",
     height: "100%",
     objectFit: "cover",