@backmatter/studio 0.0.6 → 0.0.8

package/src/chrome/ContentExplorerSidebar.tsx

@@ -0,0 +1,1212 @@
+// 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";
+import { useReplicaRevision, useReplicaState } from "../replica/useReplica";
+import { colors, radius, space, type } from "../styles/tokens.stylex";
+import { Tooltip } from "../ui/Tooltip";
+import {
+  contentDocPath,
+  contentRailHref,
+  isWorkspaceContentPath,
+  isWorkspaceMediaPath,
+  isWorkspaceSettingsPath,
+  mediaPath,
+  settingsPath,
+} from "../workspace-path";
+import { UserMenu } from "./UserMenu";
+import {
+  groupContentTypes,
+  type ContentTypeNav,
+  type ContentTypeSection,
+} from "./content-type-groups";
+import type { WorkspaceNav } from "./WorkspaceNavContext";
+import { compareTypeDocs } from "../pages/type-docs";
+import { docRepoPath, fileExtFromRepoPath } from "./content-repo-path";
+import {
+  ExplorerFileIcon,
+  ExplorerFolderIcon,
+  ExplorerHeaderListIcon,
+  ExplorerHeaderNewFileIcon,
+  ExplorerTreeNewFileIcon,
+  ExplorerRailFilesIcon,
+  ExplorerRailHistoryIcon,
+  ExplorerRailMediaIcon,
+  ExplorerRailSearchIcon,
+  ExplorerRailSettingsIcon,
+  ExplorerRailSourceControlIcon,
+  ExplorerTwistie,
+} from "./explorer-icons";
+import {
+  buildPathTree,
+  folderKeysOnPathTo,
+  treePathFromRepo,
+  type PathTreeFile,
+  type PathTreeNode,
+} from "./content-path-tree";
+import {
+  isValidContentSlug,
+  resolveFolderCreateContext,
+  slugFromNewFileName,
+  withModelFolderPlaceholders,
+  type FolderCreateContext,
+} from "./folder-create-context";
+import { canWriteContent } from "../workspace/permissions";
+
+const hover = "@media (hover: hover)";
+const statusDot = "#ea580c";
+
+/** VS Code–style explorer: 8px indent per depth, 22px rows. */
+const TREE_PAD_PX = 8;
+const INDENT_PX = 8;
+const TWISTIE_PX = 16;
+
+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();
+  const replicaRevision = useReplicaRevision();
+  const grouped = useMemo(
+    () => groupContentTypes(workspace.contentModels),
+    [workspace.contentModels],
+  );
+  const docsByType = useMemo(() => {
+    const all = replica.docs(workspace.workspaceId);
+    const map = new Map<string, DocListItem[]>();
+    for (const doc of all) {
+      const list = map.get(doc.type);
+      if (list) list.push(doc);
+      else map.set(doc.type, [doc]);
+    }
+    for (const list of map.values()) {
+      list.sort(compareTypeDocs);
+    }
+    return map;
+  }, [replica, replicaRevision, workspace.workspaceId]);
+
+  const route = useMemo(
+    () => parseContentRoute(location.pathname, searchParams.get("locale") ?? ""),
+    [location.pathname, searchParams],
+  );
+  const git = replica.git(workspace.workspaceId);
+  const pendingCount =
+    git?.changes.filter((c) => c.status !== "deleted").length ?? 0;
+
+  const [expanded, setExpanded] = useState<Set<string>>(() => new Set());
+  const toggleFolder = useCallback((pathKey: string) => {
+    setExpanded((prev) => {
+      const next = new Set(prev);
+      if (next.has(pathKey)) next.delete(pathKey);
+      else next.add(pathKey);
+      return next;
+    });
+  }, []);
+
+  const expandFolderPath = useCallback((pathKey: string) => {
+    setExpanded((prev) => {
+      const next = new Set(prev);
+      const parts = pathKey.split("/").filter(Boolean);
+      for (let i = 1; i <= parts.length; i++) {
+        next.add(parts.slice(0, i).join("/"));
+      }
+      return next;
+    });
+  }, []);
+
+  const models = workspace.contentModels;
+  useEffect(() => {
+    const repoPath = findActiveRepoPath(workspace, route, models, docsByType);
+    if (!repoPath) return;
+    const treePath = treePathFromRepo(repoPath);
+    setExpanded((prev) => {
+      const next = new Set(prev);
+      for (const key of folderKeysOnPathTo(treePath)) next.add(key);
+      return next;
+    });
+  }, [workspace, route, models, docsByType]);
+
+  const empty = workspace.contentTypes.length === 0;
+  const settingsActive = isWorkspaceSettingsPath(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 (
+    <RailColumn>
+      <ActivityRail
+        pendingCount={pendingCount}
+        settingsActive={settingsActive}
+        workspaceSlug={workspace.workspaceSlug}
+      />
+      {tree && treeHost ? createPortal(tree, treeHost) : null}
+    </RailColumn>
+  );
+}
+
+function ActivityRail({
+  pendingCount,
+  settingsActive,
+  workspaceSlug,
+}: {
+  pendingCount: number;
+  settingsActive: boolean;
+  workspaceSlug: string;
+}) {
+  const navigate = useNavigate();
+  const location = useLocation();
+
+  return (
+    <nav
+      aria-label="Studio"
+      {...stylex.props(styles.rail)}
+    >
+      <div {...stylex.props(styles.railTop)}>
+        <Tooltip label="Content" side="right">
+          <button
+            type="button"
+            aria-label="Content"
+            aria-current={isWorkspaceContentPath(location.pathname) ? "page" : undefined}
+            onClick={() => {
+              const href = contentRailHref(location.pathname, workspaceSlug);
+              if (href) navigate(href);
+            }}
+            {...stylex.props(
+              styles.railBtn,
+              isWorkspaceContentPath(location.pathname) && styles.railBtnActive,
+            )}
+          >
+            <ExplorerRailFilesIcon />
+          </button>
+        </Tooltip>
+        <Tooltip label="Search (soon)" side="right">
+          <button type="button" disabled aria-label="Search" {...stylex.props(styles.railBtn, styles.railBtnDisabled)}>
+            <ExplorerRailSearchIcon />
+          </button>
+        </Tooltip>
+        <Tooltip label="Source control (soon)" side="right">
+          <button
+            type="button"
+            disabled
+            aria-label="Source control"
+            {...stylex.props(styles.railBtn, styles.railBtnDisabled, styles.railBtnBadgeHost)}
+          >
+            <ExplorerRailSourceControlIcon />
+            {pendingCount > 0 ? (
+              <span {...stylex.props(styles.badge)} aria-hidden>
+                {pendingCount > 9 ? "9+" : pendingCount}
+              </span>
+            ) : null}
+          </button>
+        </Tooltip>
+        <Tooltip label="History (soon)" side="right">
+          <button type="button" disabled aria-label="History" {...stylex.props(styles.railBtn, styles.railBtnDisabled)}>
+            <ExplorerRailHistoryIcon />
+          </button>
+        </Tooltip>
+        <Tooltip label="Media" side="right">
+          <Link
+            to={mediaPath(workspaceSlug)}
+            aria-label="Media"
+            aria-current={isWorkspaceMediaPath(location.pathname) ? "page" : undefined}
+            {...stylex.props(
+              styles.railBtn,
+              isWorkspaceMediaPath(location.pathname) && styles.railBtnActive,
+            )}
+          >
+            <ExplorerRailMediaIcon />
+          </Link>
+        </Tooltip>
+      </div>
+      <div {...stylex.props(styles.railBottom)}>
+        <Tooltip label="Settings" side="right">
+          <Link
+            to={settingsPath(workspaceSlug, "general")}
+            aria-label="Settings"
+            aria-current={settingsActive ? "page" : undefined}
+            {...stylex.props(styles.railBtn, settingsActive && styles.railBtnActive)}
+          >
+            <ExplorerRailSettingsIcon />
+          </Link>
+        </Tooltip>
+        <UserMenu compact />
+      </div>
+    </nav>
+  );
+}
+
+function ExplorerSection({
+  section,
+  models,
+  workspace,
+  docsByType,
+  route,
+  expanded,
+  onToggleFolder,
+  onExpandFolderPath,
+  canWrite,
+}: {
+  section: ContentTypeSection;
+  models: ContentTypeNav[];
+  workspace: WorkspaceNav;
+  docsByType: Map<string, DocListItem[]>;
+  route: ContentRoute;
+  expanded: Set<string>;
+  onToggleFolder: (pathKey: string) => void;
+  onExpandFolderPath: (pathKey: string) => void;
+  canWrite: boolean;
+}) {
+  const navigate = useNavigate();
+  const [newFileFolder, setNewFileFolder] = useState<string | null>(null);
+  const [newFileError, setNewFileError] = useState<string | null>(null);
+  const [creating, setCreating] = useState(false);
+
+  const tree = useMemo(() => {
+    const leaves: PathTreeFile[] = [];
+    for (const model of models) {
+      for (const doc of docsByType.get(model.type) ?? []) {
+        const repoPath = docRepoPath(model, doc, workspace.defaultLocale);
+        const treePath = treePathFromRepo(repoPath);
+        leaves.push({
+          kind: "file",
+          name: treePath.split("/").pop() ?? treePath,
+          repoPath: treePath,
+          href: contentDocPath(
+            workspace.workspaceSlug,
+            doc.type,
+            doc.slug,
+            doc.locale ?? "",
+            workspace.defaultLocale,
+          ),
+          active: docMatchesRoute(route, doc, workspace.defaultLocale),
+          dirty: isDirtyStatus(doc.status),
+        });
+      }
+    }
+    const built = buildPathTree(leaves);
+    return withModelFolderPlaceholders(
+      built,
+      models,
+      workspace.locales,
+      workspace.defaultLocale,
+    );
+  }, [models, docsByType, workspace, route]);
+
+  const startNewFile = useCallback(
+    (pathKey: string) => {
+      setNewFileError(null);
+      setNewFileFolder(pathKey);
+      onExpandFolderPath(pathKey);
+    },
+    [onExpandFolderPath],
+  );
+
+  const submitNewFile = useCallback(
+    async (pathKey: string, ctx: FolderCreateContext, rawName: string) => {
+      const slug = slugFromNewFileName(rawName, ctx.ext);
+      if (!slug) {
+        setNewFileError("Enter a file name.");
+        return;
+      }
+      if (!isValidContentSlug(slug)) {
+        setNewFileError("Use lowercase letters, numbers, and hyphens.");
+        return;
+      }
+      const list = docsByType.get(ctx.type) ?? [];
+      const localeForDoc = ctx.locale || workspace.defaultLocale;
+      const exists = list.some(
+        (d) =>
+          d.slug === slug &&
+          (d.locale || workspace.defaultLocale) === localeForDoc,
+      );
+      if (exists) {
+        setNewFileError("A file with that name already exists.");
+        return;
+      }
+      setCreating(true);
+      setNewFileError(null);
+      try {
+        const frontmatter = ctx.pageFormat ? { blocks: [] } : {};
+        const { doc } = await saveDoc(
+          workspace.workspaceId,
+          ctx.locale,
+          ctx.type,
+          slug,
+          { frontmatter, body: "" },
+        );
+        notifyTreeChanged({
+          workspaceId: workspace.workspaceId,
+          locale: doc.locale,
+          type: doc.type,
+          slug: doc.slug,
+          status: doc.status,
+        });
+        setNewFileFolder(null);
+        navigate(
+          contentDocPath(
+            workspace.workspaceSlug,
+            doc.type,
+            doc.slug,
+            doc.locale ?? "",
+            workspace.defaultLocale,
+          ),
+        );
+      } catch (err) {
+        setNewFileError(err instanceof Error ? err.message : "Could not create file.");
+      } finally {
+        setCreating(false);
+      }
+    },
+    [docsByType, navigate, workspace],
+  );
+
+  const hasTree = tree.length > 0;
+
+  return (
+    <section {...stylex.props(styles.section)}>
+      <div {...stylex.props(styles.sectionLabel)}>{sectionTitle(section)}</div>
+      {!hasTree ? (
+        <p {...stylex.props(styles.emptySection)}>No files</p>
+      ) : (
+        <PathTree
+          nodes={tree}
+          depth={0}
+          expanded={expanded}
+          onToggleFolder={onToggleFolder}
+          models={models}
+          locales={workspace.locales}
+          defaultLocale={workspace.defaultLocale}
+          canWrite={canWrite}
+          newFileFolder={newFileFolder}
+          newFileError={newFileError}
+          creating={creating}
+          onStartNewFile={startNewFile}
+          onCancelNewFile={() => {
+            setNewFileFolder(null);
+            setNewFileError(null);
+          }}
+          onSubmitNewFile={submitNewFile}
+        />
+      )}
+    </section>
+  );
+}
+
+function PathTree({
+  nodes,
+  depth,
+  expanded,
+  onToggleFolder,
+  models,
+  locales,
+  defaultLocale,
+  canWrite,
+  newFileFolder,
+  newFileError,
+  creating,
+  onStartNewFile,
+  onCancelNewFile,
+  onSubmitNewFile,
+}: {
+  nodes: PathTreeNode[];
+  depth: number;
+  expanded: Set<string>;
+  onToggleFolder: (pathKey: string) => void;
+  models: ContentTypeNav[];
+  locales: string[];
+  defaultLocale: string;
+  canWrite: boolean;
+  newFileFolder: string | null;
+  newFileError: string | null;
+  creating: boolean;
+  onStartNewFile: (pathKey: string) => void;
+  onCancelNewFile: () => void;
+  onSubmitNewFile: (
+    pathKey: string,
+    ctx: FolderCreateContext,
+    rawName: string,
+  ) => void;
+}) {
+  return (
+    <ul {...stylex.props(styles.tree)} role="group">
+      {nodes.map((node) =>
+        node.kind === "folder" ? (
+          <li key={node.pathKey}>
+            <FolderTreeRow
+              node={node}
+              depth={depth}
+              open={expanded.has(node.pathKey)}
+              onToggle={() => onToggleFolder(node.pathKey)}
+              createContext={
+                canWrite
+                  ? resolveFolderCreateContext(
+                      node.pathKey,
+                      models,
+                      locales,
+                      defaultLocale,
+                    )
+                  : null
+              }
+              onNewFile={
+                canWrite
+                  ? () => onStartNewFile(node.pathKey)
+                  : undefined
+              }
+            />
+            {newFileFolder === node.pathKey ? (
+              <NewFileTreeRow
+                depth={depth + 1}
+                ext={
+                  resolveFolderCreateContext(
+                    node.pathKey,
+                    models,
+                    locales,
+                    defaultLocale,
+                  )?.ext ?? "mdx"
+                }
+                error={newFileError}
+                disabled={creating}
+                onCancel={onCancelNewFile}
+                onSubmit={(name) => {
+                  const ctx = resolveFolderCreateContext(
+                    node.pathKey,
+                    models,
+                    locales,
+                    defaultLocale,
+                  );
+                  if (ctx) onSubmitNewFile(node.pathKey, ctx, name);
+                }}
+              />
+            ) : null}
+            {expanded.has(node.pathKey) && node.children.length > 0 ? (
+              <PathTree
+                nodes={node.children}
+                depth={depth + 1}
+                expanded={expanded}
+                onToggleFolder={onToggleFolder}
+                models={models}
+                locales={locales}
+                defaultLocale={defaultLocale}
+                canWrite={canWrite}
+                newFileFolder={newFileFolder}
+                newFileError={newFileError}
+                creating={creating}
+                onStartNewFile={onStartNewFile}
+                onCancelNewFile={onCancelNewFile}
+                onSubmitNewFile={onSubmitNewFile}
+              />
+            ) : null}
+          </li>
+        ) : (
+          <li key={node.repoPath}>
+            <FileTreeRow node={node} depth={depth} />
+          </li>
+        ),
+      )}
+    </ul>
+  );
+}
+
+function treeRowPad(depth: number) {
+  return TREE_PAD_PX + depth * INDENT_PX;
+}
+
+function indentGuideLeft(level: number) {
+  return TREE_PAD_PX + level * INDENT_PX + TWISTIE_PX / 2;
+}
+
+function TreeRowFrame({
+  depth,
+  children,
+}: {
+  depth: number;
+  children: React.ReactNode;
+}) {
+  return (
+    <div {...stylex.props(styles.treeRowFrame)}>
+      {depth > 0 ? (
+        <span {...stylex.props(styles.indentGuides)} aria-hidden>
+          {Array.from({ length: depth }, (_, level) => (
+            <span
+              key={level}
+              {...stylex.props(styles.indentGuide)}
+              style={{ left: indentGuideLeft(level) }}
+            />
+          ))}
+        </span>
+      ) : null}
+      {children}
+    </div>
+  );
+}
+
+function FolderTreeRow({
+  node,
+  depth,
+  open,
+  onToggle,
+  createContext,
+  onNewFile,
+}: {
+  node: Extract<PathTreeNode, { kind: "folder" }>;
+  depth: number;
+  open: boolean;
+  onToggle: () => void;
+  createContext: FolderCreateContext | null;
+  onNewFile?: () => void;
+}) {
+  return (
+    <TreeRowFrame depth={depth}>
+      <div {...stylex.props(styles.folderRowHost)}>
+        <button
+          type="button"
+          aria-expanded={open}
+          aria-label={node.name}
+          onClick={onToggle}
+          {...stylex.props(styles.treeRow, styles.folderRowBtn)}
+          style={{ paddingLeft: treeRowPad(depth) }}
+        >
+          <span {...stylex.props(styles.twistie)}>
+            <ExplorerTwistie open={open} />
+          </span>
+          <span {...stylex.props(styles.treeIcon)}>
+            <ExplorerFolderIcon />
+          </span>
+          <span {...stylex.props(styles.treeLabel)}>{node.name}</span>
+        </button>
+        {createContext && onNewFile ? (
+          <Tooltip label="New file" side="right">
+            <button
+              type="button"
+              data-folder-action
+              aria-label={`New file in ${node.name}`}
+              onClick={(e) => {
+                e.stopPropagation();
+                onNewFile();
+              }}
+              {...stylex.props(styles.folderActionBtn)}
+            >
+              <ExplorerTreeNewFileIcon />
+            </button>
+          </Tooltip>
+        ) : null}
+      </div>
+    </TreeRowFrame>
+  );
+}
+
+function NewFileTreeRow({
+  depth,
+  ext,
+  error,
+  disabled,
+  onCancel,
+  onSubmit,
+}: {
+  depth: number;
+  ext: string;
+  error: string | null;
+  disabled: boolean;
+  onCancel: () => void;
+  onSubmit: (name: string) => void;
+}) {
+  const inputRef = useRef<HTMLInputElement>(null);
+  const [value, setValue] = useState("");
+
+  useEffect(() => {
+    inputRef.current?.focus();
+  }, []);
+
+  return (
+    <TreeRowFrame depth={depth}>
+      <form
+        {...stylex.props(styles.newFileForm)}
+        style={{ paddingLeft: treeRowPad(depth) }}
+        onSubmit={(e) => {
+          e.preventDefault();
+          if (!disabled) onSubmit(value);
+        }}
+      >
+        <span {...stylex.props(styles.twistie)} aria-hidden />
+        <span {...stylex.props(styles.treeIcon)}>
+          <ExplorerFileIcon ext={ext} />
+        </span>
+        <input
+          ref={inputRef}
+          type="text"
+          value={value}
+          disabled={disabled}
+          placeholder={`name.${ext}`}
+          aria-label="New file name"
+          aria-invalid={error ? true : undefined}
+          onChange={(e) => setValue(e.target.value)}
+          onKeyDown={(e) => {
+            if (e.key === "Escape") {
+              e.preventDefault();
+              onCancel();
+            }
+          }}
+          {...stylex.props(styles.newFileInput)}
+        />
+      </form>
+      {error ? (
+        <p
+          {...stylex.props(styles.newFileError)}
+          style={{ paddingLeft: treeRowPad(depth) }}
+          role="alert"
+        >
+          {error}
+        </p>
+      ) : null}
+    </TreeRowFrame>
+  );
+}
+
+function FileTreeRow({
+  node,
+  depth,
+}: {
+  node: PathTreeFile;
+  depth: number;
+}) {
+  const ext = fileExtFromRepoPath(node.repoPath);
+  return (
+    <TreeRowFrame depth={depth}>
+      <Link
+        to={node.href}
+        title={`content/${node.repoPath}`}
+        {...stylex.props(styles.treeRow, styles.treeRowLink, node.active && styles.treeRowActive)}
+        style={{ paddingLeft: treeRowPad(depth) }}
+      >
+        <span {...stylex.props(styles.twistie)} aria-hidden />
+        <span {...stylex.props(styles.treeIcon)}>
+          <ExplorerFileIcon ext={ext} />
+        </span>
+        <span {...stylex.props(styles.treeLabel)}>{node.name}</span>
+        {node.dirty ? <span {...stylex.props(styles.fileDot)} aria-hidden /> : null}
+      </Link>
+    </TreeRowFrame>
+  );
+}
+
+function findActiveRepoPath(
+  workspace: WorkspaceNav,
+  route: ContentRoute,
+  models: ContentTypeNav[],
+  docsByType: Map<string, DocListItem[]>,
+): string | null {
+  if (!route.type || !route.docSlug) return null;
+  const model = models.find((m) => m.type === route.type);
+  if (!model) return null;
+  const doc = (docsByType.get(route.type) ?? []).find((d) =>
+    docMatchesRoute(route, d, workspace.defaultLocale),
+  );
+  if (!doc) return null;
+  return docRepoPath(model, doc, workspace.defaultLocale);
+}
+
+function IconButton({
+  label,
+  disabled,
+  children,
+}: {
+  label: string;
+  disabled?: boolean;
+  children: React.ReactNode;
+}) {
+  return (
+    <Tooltip label={label} side="bottom">
+      <button
+        type="button"
+        disabled={disabled}
+        aria-label={label}
+        {...stylex.props(styles.headerIconBtn, disabled && styles.headerIconBtnDisabled)}
+      >
+        {children}
+      </button>
+    </Tooltip>
+  );
+}
+
+type ContentRoute = {
+  type: string | null;
+  docSlug: string | null;
+  locale: string;
+};
+
+function parseContentRoute(pathname: string, localeParam: string): ContentRoute {
+  const match = pathname.match(/\/content\/([^/]+)(?:\/([^/?]+))?/);
+  if (!match) return { type: null, docSlug: null, locale: "" };
+  const type = decodeURIComponent(match[1]!);
+  const docSlug = match[2] ? decodeURIComponent(match[2]) : null;
+  return { type, docSlug, locale: localeParam };
+}
+
+function docMatchesRoute(
+  route: ContentRoute,
+  doc: DocListItem,
+  defaultLocale: string,
+) {
+  if (!route.type || route.docSlug !== doc.slug || route.type !== doc.type) {
+    return false;
+  }
+  const docLocale = doc.locale || defaultLocale;
+  const urlLocale = route.locale || defaultLocale;
+  return docLocale === urlLocale;
+}
+
+function isDirtyStatus(status: DocStatus) {
+  return status === "modified" || status === "added" || status === "conflict";
+}
+
+function sectionTitle(section: ContentTypeSection) {
+  if (section === "pages") return "Routes";
+  if (section === "data") return "Data";
+  return "Globals";
+}
+
+const styles = stylex.create({
+  railColumn: {
+    display: "flex",
+    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",
+    backgroundColor: colors.bgSidebar,
+    paddingBlock: space.md,
+  },
+  railAccountOnly: {
+    justifyContent: "flex-end",
+  },
+  railTop: {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    gap: 2,
+  },
+  railBottom: {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    gap: 2,
+  },
+  railBtn: {
+    position: "relative",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    width: 36,
+    height: 36,
+    borderWidth: 0,
+    borderStyle: "none",
+    borderRadius: radius.md,
+    backgroundColor: "transparent",
+    color: colors.text,
+    textDecoration: "none",
+    cursor: "pointer",
+    [hover]: {
+      ":hover": {
+        backgroundColor: colors.bgHover,
+      },
+    },
+  },
+  railBtnActive: {
+    backgroundColor: colors.bgActive,
+    color: colors.text,
+  },
+  railBtnDisabled: {
+    color: colors.textMuted,
+    opacity: 0.45,
+    cursor: "not-allowed",
+    [hover]: {
+      ":hover": {
+        backgroundColor: "transparent",
+      },
+    },
+  },
+  railBtnBadgeHost: {
+    overflow: "visible",
+  },
+  badge: {
+    position: "absolute",
+    top: 4,
+    right: 2,
+    minWidth: 14,
+    height: 14,
+    paddingInline: 3,
+    borderRadius: 999,
+    backgroundColor: statusDot,
+    color: colors.textInverse,
+    fontSize: "9px",
+    fontWeight: 700,
+    lineHeight: "14px",
+    textAlign: "center",
+    pointerEvents: "none",
+  },
+  panel: {
+    display: "flex",
+    width: "calc(min(360px, 38vw) - 48px)",
+    minWidth: "252px",
+    minHeight: 0,
+    flexGrow: 0,
+    flexShrink: 0,
+    flexDirection: "column",
+    borderRightWidth: 1,
+    borderRightStyle: "solid",
+    borderRightColor: colors.border,
+    backgroundColor: colors.bgSurface,
+  },
+  panelHeader: {
+    display: "flex",
+    flexShrink: 0,
+    alignItems: "center",
+    justifyContent: "space-between",
+    gap: space.md,
+    paddingInline: space.lg,
+    paddingBlock: space.md,
+    borderBottomWidth: 1,
+    borderBottomStyle: "solid",
+    borderBottomColor: colors.border,
+  },
+  panelTitle: {
+    fontSize: type.xs,
+    fontWeight: 600,
+    letterSpacing: "0.1em",
+    textTransform: "uppercase",
+    color: colors.textMuted,
+  },
+  panelActions: {
+    display: "flex",
+    alignItems: "center",
+    gap: 2,
+  },
+  headerIconBtn: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    width: 26,
+    height: 26,
+    borderWidth: 0,
+    borderStyle: "none",
+    borderRadius: radius.sm,
+    backgroundColor: "transparent",
+    color: colors.textMuted,
+    cursor: "pointer",
+    [hover]: {
+      ":hover": {
+        backgroundColor: colors.bgHover,
+        color: colors.text,
+      },
+    },
+  },
+  headerIconBtnDisabled: {
+    opacity: 0.35,
+    cursor: "not-allowed",
+    [hover]: {
+      ":hover": {
+        backgroundColor: "transparent",
+        color: colors.textMuted,
+      },
+    },
+  },
+  treeScroll: {
+    minHeight: 0,
+    flex: 1,
+    overflowY: "auto",
+    overflowX: "hidden",
+    paddingBlock: space.sm,
+  },
+  emptyHint: {
+    margin: 0,
+    paddingInline: `${TREE_PAD_PX}px`,
+    paddingBlock: space.lg,
+    fontSize: type.sm,
+    lineHeight: 1.45,
+    color: colors.textMuted,
+  },
+  section: {
+    marginBottom: space.md,
+  },
+  sectionLabel: {
+    paddingInline: `${TREE_PAD_PX}px`,
+    paddingBlock: space.xs,
+    fontSize: type.xs,
+    fontWeight: 600,
+    letterSpacing: "0.06em",
+    textTransform: "uppercase",
+    color: colors.textMuted,
+  },
+  emptySection: {
+    margin: 0,
+    paddingInline: `${TREE_PAD_PX}px`,
+    paddingBlock: space.xs,
+    fontSize: type.xs,
+    color: colors.textMuted,
+  },
+  tree: {
+    margin: 0,
+    padding: 0,
+    listStyle: "none",
+  },
+  treeRow: {
+    display: "flex",
+    width: "100%",
+    minWidth: 0,
+    alignItems: "center",
+    gap: 4,
+    height: "22px",
+    paddingRight: `${TREE_PAD_PX}px`,
+    borderWidth: 0,
+    borderStyle: "none",
+    borderRadius: 0,
+    backgroundColor: "transparent",
+    color: colors.text,
+    fontFamily: type.sans,
+    fontSize: type.md,
+    fontWeight: 400,
+    textAlign: "left",
+    cursor: "pointer",
+    [hover]: {
+      ":hover": {
+        backgroundColor: colors.bgHover,
+      },
+    },
+  },
+  treeRowLink: {
+    textDecoration: "none",
+    cursor: "pointer",
+  },
+  treeRowActive: {
+    backgroundColor: colors.bgActive,
+  },
+  treeRowFrame: {
+    position: "relative",
+  },
+  folderRowHost: {
+    position: "relative",
+    display: "flex",
+    alignItems: "center",
+    minWidth: 0,
+    [hover]: {
+      ":hover [data-folder-action]": {
+        opacity: 1,
+      },
+    },
+  },
+  folderRowBtn: {
+    flex: 1,
+    minWidth: 0,
+  },
+  folderActionBtn: {
+    position: "absolute",
+    right: 2,
+    top: 0,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    width: 22,
+    height: 22,
+    borderWidth: 0,
+    borderStyle: "none",
+    borderRadius: radius.sm,
+    backgroundColor: "transparent",
+    color: colors.textMuted,
+    opacity: 0.55,
+    cursor: "pointer",
+    [hover]: {
+      opacity: 0,
+      ":hover": {
+        backgroundColor: colors.bgHover,
+        color: colors.text,
+      },
+    },
+  },
+  newFileForm: {
+    display: "flex",
+    width: "100%",
+    minWidth: 0,
+    alignItems: "center",
+    gap: 4,
+    height: "22px",
+    paddingRight: `${TREE_PAD_PX}px`,
+  },
+  newFileInput: {
+    minWidth: 0,
+    flex: 1,
+    height: 20,
+    paddingInline: 4,
+    borderWidth: 1,
+    borderStyle: "solid",
+    borderColor: colors.border,
+    borderRadius: radius.sm,
+    backgroundColor: colors.bgSurface,
+    color: colors.text,
+    fontFamily: type.sans,
+    fontSize: type.md,
+    outline: "none",
+    ":focus": {
+      borderColor: colors.textMuted,
+    },
+  },
+  newFileError: {
+    margin: 0,
+    paddingRight: `${TREE_PAD_PX}px`,
+    paddingBottom: space.xs,
+    fontSize: type.xs,
+    color: "#dc2626",
+  },
+  indentGuides: {
+    position: "absolute",
+    inset: 0,
+    pointerEvents: "none",
+  },
+  indentGuide: {
+    position: "absolute",
+    top: 0,
+    bottom: 0,
+    width: 1,
+    backgroundColor: colors.border,
+    opacity: 0.65,
+    transform: "translateX(-0.5px)",
+  },
+  twistie: {
+    display: "flex",
+    flexShrink: 0,
+    alignItems: "center",
+    justifyContent: "center",
+    width: `${TWISTIE_PX}px`,
+    height: `${TWISTIE_PX}px`,
+    color: colors.textMuted,
+  },
+  treeIcon: {
+    display: "flex",
+    flexShrink: 0,
+    alignItems: "center",
+    justifyContent: "center",
+    color: colors.textMuted,
+  },
+  treeLabel: {
+    minWidth: 0,
+    flex: 1,
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap",
+  },
+  fileDot: {
+    width: 6,
+    height: 6,
+    flexShrink: 0,
+    marginLeft: space.xs,
+    borderRadius: 999,
+    backgroundColor: statusDot,
+  },
+});