@backmatter/studio 0.0.7 → 0.0.9

package/src/chrome/AppShell.tsx

@@ -1,5 +1,5 @@
 // packages/studio/src/chrome/AppShell.tsx
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import { useLocation, useSearchParams } from "react-router";
 import * as stylex from "@stylexjs/stylex";
 import { ChatBar } from "../chat/ChatBar";
@@ -9,12 +9,13 @@ import { colors } from "../styles/tokens.stylex";
 import { TooltipProvider } from "../ui/Tooltip";
 import { cmsWorkspaceSlug, isOrgPickerPath } from "../workspace-path";
 import { AppSidebar } from "./AppSidebar";
+import { WorkspaceRail } from "./ContentExplorerSidebar";
 import { CommandPalette } from "./CommandPalette";
 import { FloatingUserMenu } from "./UserMenu";
 import { EditorActionsProvider } from "./EditorActionsContext";
 import { EditorFocusProvider } from "./EditorFocusContext";
 import { EditorStatusProvider } from "./EditorStatusContext";
-import { WorkspaceNavProvider } from "./WorkspaceNavContext";
+import { WorkspaceNavProvider, useWorkspaceNav } from "./WorkspaceNavContext";
 import { installParentChatHotkey } from "./hotkeys";
 import { WorkspaceStatusBar } from "./WorkspaceStatusBar";
 
@@ -40,28 +41,43 @@ function AppShellInner({ children }: { children: React.ReactNode }) {
   // Mount from the URL, not from nav. Waiting on nav remounts this tree when
   // WorkspaceLayout publishes (and later clears) nav, which loops loading.
   const workspaceKey = cmsWorkspaceSlug(location.pathname);
+  const workspaceNav = useWorkspaceNav();
   const orgPicker = isOrgPickerPath(location.pathname);
   const embed = searchParams.get("embed") === "1";
+  const [treeHost, setTreeHost] = useState<HTMLDivElement | null>(null);
+  const inWorkspace = Boolean(workspaceKey && !embed && !orgPicker);
 
   useEffect(() => {
     if (!embed) return;
     return installParentChatHotkey();
   }, [embed]);
 
+  const chat =
+    workspaceKey && !embed ? (
+      <ChatSessionScope>
+        <ChatBar />
+        <ChatPanel />
+      </ChatSessionScope>
+    ) : null;
+
   const shell = (
     <div {...stylex.props(styles.shell)}>
       {workspaceKey && !embed ? <WorkspaceStatusBar workspaceId={workspaceKey} /> : null}
       <div {...stylex.props(styles.body)}>
-        {orgPicker || embed ? null : <AppSidebar />}
-        <main {...stylex.props(styles.main)}>{children}</main>
+        {orgPicker || embed ? null : inWorkspace ? (
+          <WorkspaceRail workspace={workspaceNav} treeHost={treeHost} />
+        ) : (
+          <AppSidebar />
+        )}
+        <div {...stylex.props(styles.stage)}>
+          <div {...stylex.props(styles.stageBody)}>
+            <div ref={setTreeHost} {...stylex.props(styles.treeHost)} />
+            <main {...stylex.props(styles.main)}>{children}</main>
+          </div>
+          {chat}
+        </div>
       </div>
       {orgPicker ? <FloatingUserMenu /> : null}
-      {workspaceKey && !embed ? (
-        <ChatSessionScope>
-          <ChatBar />
-          <ChatPanel />
-        </ChatSessionScope>
-      ) : null}
       {embed ? null : <CommandPalette />}
     </div>
   );
@@ -89,6 +105,27 @@ const styles = stylex.create({
     flex: 1,
     overflow: "hidden",
   },
+  stage: {
+    display: "flex",
+    minWidth: 0,
+    minHeight: 0,
+    flex: 1,
+    flexDirection: "column",
+    overflow: "hidden",
+  },
+  stageBody: {
+    display: "flex",
+    minWidth: 0,
+    minHeight: 0,
+    flex: 1,
+    overflow: "hidden",
+  },
+  treeHost: {
+    display: "flex",
+    minWidth: 0,
+    minHeight: 0,
+    flexShrink: 0,
+  },
   main: {
     display: "flex",
     minWidth: 0,

package/src/chrome/AppSidebar.tsx

@@ -1,30 +1,18 @@
 // packages/studio/src/chrome/AppSidebar.tsx
-import { useLocation } from "react-router";
 import * as stylex from "@stylexjs/stylex";
 import { useReplicaState } from "../replica/useReplica";
 import { colors, space, type } from "../styles/tokens.stylex";
-import { useWorkspaceNav } from "./WorkspaceNavContext";
 import { NavItem } from "./NavItem";
 import { UserMenu } from "./UserMenu";
-import { cmsWorkspaceSlug, isWorkspaceMediaPath, workspaceHomePath } from "../workspace-path";
+import { workspaceHomePath } from "../workspace-path";
 import { DocIcon } from "./icons";
-import { ContentExplorerSidebar } from "./ContentExplorerSidebar";
-export function AppSidebar() {
-  const location = useLocation();
-  const workspaceNav = useWorkspaceNav();
-  const inWorkspace = Boolean(cmsWorkspaceSlug(location.pathname));
-  const railOnly = inWorkspace && isWorkspaceMediaPath(location.pathname);
 
+/** Workspace list. Inside a workspace the explorer frame owns the rail. */
+export function AppSidebar() {
   return (
-    <aside {...stylex.props(styles.aside, railOnly && styles.asideRail)}>
-      {inWorkspace && workspaceNav ? (
-        <div {...stylex.props(styles.workspaceNav)}>
-          <ContentExplorerSidebar workspace={workspaceNav} />
-        </div>
-      ) : (
-        <WorkspaceListNav />
-      )}
-      <SidebarFooter compact={railOnly} />
+    <aside {...stylex.props(styles.aside)}>
+      <WorkspaceListNav />
+      <SidebarFooter />
     </aside>
   );
 }
@@ -68,21 +56,15 @@ function SectionLabel({ children }: { children: React.ReactNode }) {
   return <p {...stylex.props(styles.section)}>{children}</p>;
 }
 
-function SidebarFooter({ compact = false }: { compact?: boolean }) {
+function SidebarFooter() {
   return (
-    <div {...stylex.props(styles.footer, compact && styles.footerCompact)}>
-      <UserMenu compact={compact} />
+    <div {...stylex.props(styles.footer)}>
+      <UserMenu />
     </div>
   );
 }
 
 const styles = stylex.create({
-  workspaceNav: {
-    display: "flex",
-    minHeight: 0,
-    flex: 1,
-    flexDirection: "column",
-  },
   aside: {
     display: "flex",
     height: "100%",
@@ -95,10 +77,6 @@ const styles = stylex.create({
     borderRightColor: colors.border,
     backgroundColor: colors.bgSurface,
   },
-  asideRail: {
-    width: "48px",
-    minWidth: "48px",
-  },
   brand: {
     flexShrink: 0,
     borderBottomWidth: 1,
@@ -174,7 +152,4 @@ const styles = stylex.create({
     borderTopColor: colors.border,
     padding: space.md,
   },
-  footerCompact: {
-    padding: space.sm,
-  },
 });

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,15 @@ import { colors, radius, space, type } from "../styles/tokens.stylex";
 import { Tooltip } from "../ui/Tooltip";
 import {
   contentDocPath,
-  contentTypePath,
+  contentRailHref,
   isWorkspaceContentPath,
+  isWorkspaceEditorPath,
   isWorkspaceMediaPath,
   isWorkspaceSettingsPath,
   mediaPath,
   settingsPath,
-  workspaceHomePath,
 } from "../workspace-path";
+import { UserMenu } from "./UserMenu";
 import {
   groupContentTypes,
   type ContentTypeNav,
@@ -53,6 +55,11 @@ import {
   type FolderCreateContext,
 } from "./folder-create-context";
 import { canWriteContent } from "../workspace/permissions";
+import {
+  contentTreeVisible,
+  toggleContentTree,
+  useContentTreeOpen,
+} from "./content-tree-visibility";
 
 const hover = "@media (hover: hover)";
 const statusDot = "#ea580c";
@@ -62,7 +69,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 +164,85 @@ export function ContentExplorerSidebar({ workspace }: { workspace: WorkspaceNav
 
   const empty = workspace.contentTypes.length === 0;
   const settingsActive = isWorkspaceSettingsPath(location.pathname);
-  const showTree = !isWorkspaceMediaPath(location.pathname);
+  const treeOpen = useContentTreeOpen();
+  const showTree = contentTreeVisible(location.pathname, treeOpen);
   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}
+        treeOpen={treeOpen}
       />
-      {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,40 +250,40 @@ function ActivityRail({
   pendingCount,
   settingsActive,
   workspaceSlug,
-  contentRoute,
+  treeOpen,
 }: {
   pendingCount: number;
   settingsActive: boolean;
   workspaceSlug: string;
-  contentRoute: ContentRoute;
+  treeOpen: boolean;
 }) {
   const navigate = useNavigate();
   const location = useLocation();
+  const onDocument = isWorkspaceEditorPath(location.pathname);
+  const filesLabel = onDocument ? (treeOpen ? "Hide files" : "Show files") : "Content";
+  const filesActive = isWorkspaceContentPath(location.pathname) && (!onDocument || treeOpen);
 
   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">
+        <Tooltip label={filesLabel} side="right">
           <button
             type="button"
-            aria-label="Content"
-            aria-current={isWorkspaceContentPath(location.pathname) ? "page" : undefined}
+            aria-label={filesLabel}
+            aria-pressed={onDocument ? treeOpen : undefined}
+            aria-current={!onDocument && filesActive ? "page" : undefined}
             onClick={() => {
-              if (isWorkspaceMediaPath(location.pathname)) {
-                navigate(workspaceHomePath(workspaceSlug));
+              if (onDocument) {
+                toggleContentTree();
                 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,
-              isWorkspaceContentPath(location.pathname) && styles.railBtnActive,
-            )}
+            {...stylex.props(styles.railBtn, filesActive && styles.railBtnActive)}
           >
             <ExplorerRailFilesIcon />
           </button>
@@ -297,6 +338,7 @@ function ActivityRail({
             <ExplorerRailSettingsIcon />
           </Link>
         </Tooltip>
+        <UserMenu compact />
       </div>
     </nav>
   );
@@ -637,7 +679,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 +875,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 +912,7 @@ const styles = stylex.create({
     display: "flex",
     flexDirection: "column",
     alignItems: "center",
+    gap: 2,
   },
   railBtn: {
     position: "relative",
@@ -921,10 +969,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/content-tree-visibility.ts

@@ -0,0 +1,55 @@
+// packages/studio/src/chrome/content-tree-visibility.ts
+import { useEffect, useState } from "react";
+import type { KeyValueStore } from "../last-workspace";
+import { isWorkspaceContentPath, isWorkspaceEditorPath } from "../workspace-path";
+
+export const CONTENT_TREE_OPEN_KEY = "backmatter-content-tree-open";
+const CONTENT_TREE_EVENT = "backmatter-content-tree";
+
+/**
+ * The type index is the file tree, so it stays open.
+ * A document follows the editor toggle. Other routes have no tree.
+ */
+export function contentTreeVisible(pathname: string, open: boolean) {
+  if (!isWorkspaceContentPath(pathname)) return false;
+  if (isWorkspaceEditorPath(pathname)) return open;
+  return true;
+}
+
+export function readContentTreeOpen(storage: KeyValueStore = localStorage) {
+  try {
+    return storage.getItem(CONTENT_TREE_OPEN_KEY) !== "0";
+  } catch {
+    return true;
+  }
+}
+
+export function writeContentTreeOpen(
+  open: boolean,
+  storage: KeyValueStore = localStorage,
+) {
+  try {
+    storage.setItem(CONTENT_TREE_OPEN_KEY, open ? "1" : "0");
+  } catch {
+    // ignore quota / private mode
+  }
+}
+
+export function toggleContentTree() {
+  writeContentTreeOpen(!readContentTreeOpen());
+  window.dispatchEvent(new Event(CONTENT_TREE_EVENT));
+}
+
+export function useContentTreeOpen() {
+  const [open, setOpen] = useState(() => readContentTreeOpen());
+  useEffect(() => {
+    const sync = () => setOpen(readContentTreeOpen());
+    window.addEventListener(CONTENT_TREE_EVENT, sync);
+    window.addEventListener("storage", sync);
+    return () => {
+      window.removeEventListener(CONTENT_TREE_EVENT, sync);
+      window.removeEventListener("storage", sync);
+    };
+  }, []);
+  return open;
+}

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 }) {