feat: add collapsible global sidebar

frontend/messages/en.json

@@ -361,7 +361,9 @@
     "workspace": "Workspace",
     "library": "Library",
     "playground": "Playground",
-    "settings": "Settings"
+    "settings": "Settings",
+    "collapseSidebar": "Collapse sidebar",
+    "expandSidebar": "Expand sidebar"
   },
   "workspace": {
     "title": "My Workspace",

frontend/messages/zh.json

@@ -361,7 +361,9 @@
     "workspace": "工作区",
     "library": "主体库",
     "playground": "创作台",
-    "settings": "设置"
+    "settings": "设置",
+    "collapseSidebar": "收起侧边栏",
+    "expandSidebar": "展开侧边栏"
   },
   "workspace": {
     "title": "我的工作区",

frontend/src/components/layout/GlobalSidebar.tsx

@@ -1,6 +1,14 @@
 "use client";
 
-import { FolderOpen, Library, Sparkles, Settings } from "lucide-react";
+import { useEffect, useState } from "react";
+import {
+  ChevronLeft,
+  ChevronRight,
+  FolderOpen,
+  Library,
+  Sparkles,
+  Settings,
+} from "lucide-react";
 import { useTranslations } from "next-intl";
 import clsx from "clsx";
 import LumenXBranding from "./LumenXBranding";
@@ -19,32 +27,91 @@ const NAV_ITEMS: { id: GlobalTab; icon: typeof FolderOpen; hash: string }[] = [
   { id: "settings", icon: Settings, hash: "#/settings" },
 ];
 
+const SIDEBAR_COLLAPSED_STORAGE_KEY = "lumenx-global-sidebar-collapsed";
+
 export default function GlobalSidebar({ activeTab, onTabChange }: GlobalSidebarProps) {
   const t = useTranslations("nav");
+  const [isCollapsed, setIsCollapsed] = useState(false);
+
+  useEffect(() => {
+    try {
+      setIsCollapsed(window.localStorage.getItem(SIDEBAR_COLLAPSED_STORAGE_KEY) === "true");
+    } catch {
+      // Keep the expanded default when storage is unavailable.
+    }
+  }, []);
 
   const handleNav = (item: (typeof NAV_ITEMS)[number]) => {
     onTabChange(item.id);
     window.location.hash = item.hash;
   };
 
+  const toggleCollapsed = () => {
+    setIsCollapsed((current) => {
+      const next = !current;
+      try {
+        window.localStorage.setItem(SIDEBAR_COLLAPSED_STORAGE_KEY, String(next));
+      } catch {
+        // The current session can still use the toggle without persistence.
+      }
+      return next;
+    });
+  };
+
+  const toggleLabel = isCollapsed ? t("expandSidebar") : t("collapseSidebar");
+
   return (
-    <aside className="w-56 flex-shrink-0 h-full border-r border-glass-border bg-surface backdrop-blur-xl flex flex-col">
+    <aside
+      className={clsx(
+        "flex-shrink-0 h-full border-r border-glass-border bg-surface backdrop-blur-xl flex flex-col",
+        "transition-[width] duration-base ease-out-quart",
+        isCollapsed ? "w-[72px]" : "w-56"
+      )}
+    >
       {/* Branding */}
-      <div className="p-5 border-b border-glass-border">
-        <LumenXBranding size="sm" />
+      <div
+        className={clsx(
+          "relative border-b border-glass-border",
+          isCollapsed ? "flex h-[96px] items-center justify-center px-2" : "p-5 pr-12"
+        )}
+      >
+        <div className="min-w-0">
+          <LumenXBranding
+            size="sm"
+            showSlogan={!isCollapsed}
+            showWordmark={!isCollapsed}
+          />
+        </div>
+        <button
+          type="button"
+          onClick={toggleCollapsed}
+          aria-label={toggleLabel}
+          title={toggleLabel}
+          className={clsx(
+            "absolute z-10 flex h-7 w-7 items-center justify-center rounded-md",
+            "border border-glass-border bg-surface text-text-muted shadow-sm",
+            "transition-colors duration-fast hover:border-primary/40 hover:bg-hover-bg hover:text-foreground",
+            isCollapsed ? "-right-3.5 top-[34px]" : "right-3 top-5"
+          )}
+        >
+          {isCollapsed ? <ChevronRight size={16} /> : <ChevronLeft size={16} />}
+        </button>
       </div>
 
       {/* Navigation */}
-      <nav className="flex-1 p-4 space-y-1">
+      <nav className={clsx("flex-1 space-y-1", isCollapsed ? "p-2" : "p-4")}>
         {NAV_ITEMS.map((item) => {
           const isActive = activeTab === item.id;
           const Icon = item.icon;
           return (
             <button
               key={item.id}
               onClick={() => handleNav(item)}
+              aria-label={t(item.id)}
+              title={isCollapsed ? t(item.id) : undefined}
               className={clsx(
-                "w-full flex items-center gap-3 px-4 py-3 rounded-lg transition-all duration-200 relative overflow-hidden",
+                "w-full flex h-12 items-center rounded-lg transition-all duration-200 relative overflow-hidden",
+                isCollapsed ? "justify-center px-0" : "gap-3 px-4",
                 isActive
                   ? "bg-primary/10 text-foreground"
                   : "text-text-secondary hover:text-foreground hover:bg-hover-bg"
@@ -53,17 +120,22 @@ export default function GlobalSidebar({ activeTab, onTabChange }: GlobalSidebarP
               {isActive && (
                 <div className="absolute left-0 w-1 h-full bg-primary rounded-r" />
               )}
-              <Icon size={18} className={isActive ? "text-primary" : ""} />
-              <span className="text-sm font-medium">{t(item.id)}</span>
+              <Icon
+                size={isCollapsed ? 20 : 18}
+                className={clsx("flex-shrink-0", isActive && "text-primary")}
+              />
+              {!isCollapsed && <span className="text-sm font-medium">{t(item.id)}</span>}
             </button>
           );
         })}
       </nav>
 
       {/* Footer */}
-      <div className="p-4 border-t border-glass-border">
-        <span className="text-xs text-text-muted px-4">v0.1.0</span>
-      </div>
+      {!isCollapsed && (
+        <div className="p-4 border-t border-glass-border">
+          <span className="text-xs text-text-muted px-4">v0.1.0</span>
+        </div>
+      )}
     </aside>
   );
 }

frontend/src/components/layout/LumenXBranding.tsx

@@ -3,9 +3,14 @@
 interface LumenXBrandingProps {
   size?: "sm" | "md";
   showSlogan?: boolean;
+  showWordmark?: boolean;
 }
 
-export default function LumenXBranding({ size = "md", showSlogan = true }: LumenXBrandingProps) {
+export default function LumenXBranding({
+  size = "md",
+  showSlogan = true,
+  showWordmark = true,
+}: LumenXBrandingProps) {
   const logoSize = size === "sm" ? "w-9 h-9" : "w-14 h-14";
   const titleSize = size === "sm" ? "text-lg" : "text-xl";
 
@@ -19,23 +24,25 @@ export default function LumenXBranding({ size = "md", showSlogan = true }: Lumen
             className={`${logoSize} object-contain`}
           />
         </div>
-        <div className="flex flex-col justify-center">
-          <div className="flex items-baseline gap-0">
-            <span className={`font-mono ${titleSize} font-bold tracking-tight text-white`}>
-              LUMEN
-            </span>
-            <span className={`font-mono ${titleSize} font-black tracking-tight text-[#646cff]`}>
-              X
-            </span>
+        {showWordmark && (
+          <div className="flex flex-col justify-center">
+            <div className="flex items-baseline gap-0">
+              <span className={`font-mono ${titleSize} font-bold tracking-tight text-white`}>
+                LUMEN
+              </span>
+              <span className={`font-mono ${titleSize} font-black tracking-tight text-[#646cff]`}>
+                X
+              </span>
+            </div>
+            {size !== "sm" && (
+              <span className="font-mono text-[10px] text-white/30 tracking-[0.2em] uppercase -mt-0.5">
+                Studio
+              </span>
+            )}
           </div>
-          {size !== "sm" && (
-            <span className="font-mono text-[10px] text-white/30 tracking-[0.2em] uppercase -mt-0.5">
-              Studio
-            </span>
-          )}
-        </div>
+        )}
       </div>
-      {showSlogan && (
+      {showSlogan && showWordmark && (
         <p className="font-mono text-[8px] text-white/20 tracking-[0.15em] text-center mt-2.5 uppercase">
           Render Noise into Narrative
         </p>

frontend/src/components/layout/__tests__/GlobalSidebar.spec.tsx

@@ -0,0 +1,55 @@
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import GlobalSidebar from "../GlobalSidebar";
+
+const messages: Record<string, string> = {
+  workspace: "工作区",
+  library: "主体库",
+  playground: "创作台",
+  settings: "设置",
+  collapseSidebar: "收起侧边栏",
+  expandSidebar: "展开侧边栏",
+};
+
+vi.mock("next-intl", () => ({
+  useTranslations: () => (key: string) => messages[key] ?? key,
+}));
+
+describe("GlobalSidebar", () => {
+  beforeEach(() => {
+    window.localStorage.clear();
+    window.location.hash = "";
+  });
+
+  it("collapses to icon-only navigation and expands again", () => {
+    render(<GlobalSidebar activeTab="workspace" onTabChange={vi.fn()} />);
+
+    const sidebar = screen.getByRole("complementary");
+    expect(sidebar).toHaveClass("w-56");
+    expect(screen.getByText("工作区")).toBeInTheDocument();
+
+    fireEvent.click(screen.getByRole("button", { name: "收起侧边栏" }));
+
+    expect(sidebar).toHaveClass("w-[72px]");
+    expect(screen.queryByText("工作区")).not.toBeInTheDocument();
+    expect(screen.getByRole("button", { name: "工作区" })).toHaveAttribute("title", "工作区");
+    expect(window.localStorage.getItem("lumenx-global-sidebar-collapsed")).toBe("true");
+
+    fireEvent.click(screen.getByRole("button", { name: "展开侧边栏" }));
+
+    expect(sidebar).toHaveClass("w-56");
+    expect(screen.getByText("工作区")).toBeInTheDocument();
+    expect(window.localStorage.getItem("lumenx-global-sidebar-collapsed")).toBe("false");
+  });
+
+  it("restores the collapsed preference from local storage", async () => {
+    window.localStorage.setItem("lumenx-global-sidebar-collapsed", "true");
+
+    render(<GlobalSidebar activeTab="workspace" onTabChange={vi.fn()} />);
+
+    await waitFor(() => {
+      expect(screen.getByRole("complementary")).toHaveClass("w-[72px]");
+    });
+    expect(screen.getByRole("button", { name: "展开侧边栏" })).toBeInTheDocument();
+  });
+});