From 6e53df030386a5aa289b91d918ab8ecaf5a096bd Mon Sep 17 00:00:00 2001
From: Hare <kei.hiracchi.0928@gmail.com>
Date: Thu, 23 Jul 2026 20:50:30 +0900
Subject: [PATCH] web: rename sidebar collapse to fold

---
 web/workspace/src/app.css                     | 22 ++++++++---------
 .../console/worker-console.ui.test.ts         | 10 ++++++++
 .../workspace/sidebar/WorkspaceSidebar.svelte | 24 +++++++++----------
 .../src/routes/w/[workspaceId]/+layout.svelte | 10 ++++----
 4 files changed, 38 insertions(+), 28 deletions(-)

diff --git a/web/workspace/src/app.css b/web/workspace/src/app.css
index 83f0df2e..940dae14 100644
--- a/web/workspace/src/app.css
+++ b/web/workspace/src/app.css
@@ -261,7 +261,7 @@
 		padding: var(--space-4) var(--space-3);
 		border-right: 1px solid var(--line);
 	}
-	.workspace-sidebar.collapsed {
+	.workspace-sidebar.folded {
 		width: max-content;
 	}
 
@@ -311,7 +311,7 @@
 		gap: var(--space-1);
 	}
 	.sidebar-icon-button,
-	.sidebar-collapse-button {
+	.sidebar-fold-button {
 		flex: 0 0 auto;
 		display: grid;
 		place-items: center;
@@ -321,7 +321,7 @@
 		color: var(--text-muted);
 		text-decoration: none;
 	}
-	.sidebar-collapse-button {
+	.sidebar-fold-button {
 		border: 0;
 		background: transparent;
 		cursor: pointer;
@@ -337,27 +337,27 @@
 	}
 	.sidebar-icon-button:hover,
 	.sidebar-icon-button:focus-visible,
-	.sidebar-collapse-button:hover,
-	.sidebar-collapse-button:focus-visible {
+	.sidebar-fold-button:hover,
+	.sidebar-fold-button:focus-visible {
 		background: var(--interactive-hover);
 		color: var(--text-muted);
 	}
-	.workspace-sidebar.collapsed {
+	.workspace-sidebar.folded {
 		overflow: hidden;
 		padding-inline: var(--space-2);
 	}
-	.workspace-sidebar.collapsed .sidebar-header {
+	.workspace-sidebar.folded .sidebar-header {
 		margin-bottom: 0;
 	}
-	.workspace-sidebar.collapsed .sidebar-title-row,
-	.workspace-sidebar.collapsed .sidebar-actions-row {
+	.workspace-sidebar.folded .sidebar-title-row,
+	.workspace-sidebar.folded .sidebar-actions-row {
 		justify-content: center;
 	}
-	.workspace-sidebar.collapsed .sidebar-actions-row {
+	.workspace-sidebar.folded .sidebar-actions-row {
 		align-items: center;
 		flex-direction: column;
 	}
-	.workspace-sidebar.collapsed .workspace-label {
+	.workspace-sidebar.folded .workspace-label {
 		display: none;
 	}
 	.sidebar-sections {
diff --git a/web/workspace/src/lib/workspace/console/worker-console.ui.test.ts b/web/workspace/src/lib/workspace/console/worker-console.ui.test.ts
index f696d983..1c8705f0 100644
--- a/web/workspace/src/lib/workspace/console/worker-console.ui.test.ts
+++ b/web/workspace/src/lib/workspace/console/worker-console.ui.test.ts
@@ -458,6 +458,16 @@ Deno.test("Account UI owns browser passkey session state without workspace autho
       workspaceLayoutLoad.includes("workspaceApiPath(workspaceId"),
     "Workspace layout should load workspace data and register a WorkspaceSidebar snippet",
   );
+  assert(
+    workspaceLayout.includes("sidebarFolded") &&
+      workspaceLayout.includes("onToggleFold={toggleSidebarFold}") &&
+      sidebar.includes("folded?: boolean") &&
+      sidebar.includes("onToggleFold?: () => void") &&
+      sidebar.includes("sidebar-fold-button") &&
+      sidebar.includes("Fold sidebar") &&
+      sidebar.includes("Unfold sidebar"),
+    "Workspace sidebar should keep a visible fold button with fold/folded naming",
+  );
   assert(
     sidebarOverride.includes("controller.setSidebar(sidebar)") &&
       sidebarOverride.includes("controller.clearSidebar(sidebar)"),
diff --git a/web/workspace/src/lib/workspace/sidebar/WorkspaceSidebar.svelte b/web/workspace/src/lib/workspace/sidebar/WorkspaceSidebar.svelte
index 54326508..62a355bc 100644
--- a/web/workspace/src/lib/workspace/sidebar/WorkspaceSidebar.svelte
+++ b/web/workspace/src/lib/workspace/sidebar/WorkspaceSidebar.svelte
@@ -12,8 +12,8 @@
     repositories?: RepositoryListResponse | null;
     repositoriesError?: string | null;
     currentPath?: string;
-    collapsed?: boolean;
-    onToggleCollapsed?: () => void;
+    folded?: boolean;
+    onToggleFold?: () => void;
   };
 
   let {
@@ -22,8 +22,8 @@
     repositories = null,
     repositoriesError = null,
     currentPath = '/',
-    collapsed = false,
-    onToggleCollapsed
+    folded = false,
+    onToggleFold
   }: Props = $props();
 
   let workspaceId = $derived(workspace?.workspace_id ?? '');
@@ -32,7 +32,7 @@
 </script>
 
 <aside
-  class:collapsed
+  class:folded
   class="workspace-sidebar"
   aria-label="Workspace navigation"
 >
@@ -52,14 +52,14 @@
       </div>
 
       <button
-        class="sidebar-collapse-button"
+        class="sidebar-fold-button"
         type="button"
-        aria-label={collapsed ? 'Expand sidebar' : 'Collapse sidebar'}
-        aria-expanded={!collapsed}
-        title={collapsed ? 'Expand sidebar' : 'Collapse sidebar'}
-        onclick={onToggleCollapsed}
+        aria-label={folded ? 'Unfold sidebar' : 'Fold sidebar'}
+        aria-expanded={!folded}
+        title={folded ? 'Unfold sidebar' : 'Fold sidebar'}
+        onclick={onToggleFold}
       >
-        {#if collapsed}
+        {#if folded}
           <svg class="sidebar-icon" aria-hidden="true" viewBox="0 0 24 24">
             <path d="m6 17 5-5-5-5" />
             <path d="m13 17 5-5-5-5" />
@@ -103,7 +103,7 @@
     </div>
   </header>
 
-  {#if !collapsed}
+  {#if !folded}
     <nav class="sidebar-sections" aria-label="Workspace sections">
       <RepositoriesNavSection {repositories} {repositoriesError} {currentPath} {workspaceId} />
       <ObjectivesNavSection {currentPath} {workspaceId} />
diff --git a/web/workspace/src/routes/w/[workspaceId]/+layout.svelte b/web/workspace/src/routes/w/[workspaceId]/+layout.svelte
index 48da98f5..338760e6 100644
--- a/web/workspace/src/routes/w/[workspaceId]/+layout.svelte
+++ b/web/workspace/src/routes/w/[workspaceId]/+layout.svelte
@@ -5,10 +5,10 @@
   import type { LayoutProps } from './$types';
 
   let { data, children }: LayoutProps = $props();
-  let sidebarCollapsed = $state(false);
+  let sidebarFolded = $state(false);
 
-  function toggleSidebar() {
-    sidebarCollapsed = !sidebarCollapsed;
+  function toggleSidebarFold() {
+    sidebarFolded = !sidebarFolded;
   }
 </script>
 
@@ -19,8 +19,8 @@
     repositories={data.repositories ?? null}
     repositoriesError={data.repositoriesError ?? null}
     currentPath={page.url.pathname}
-    collapsed={sidebarCollapsed}
-    onToggleCollapsed={toggleSidebar}
+    folded={sidebarFolded}
+    onToggleFold={toggleSidebarFold}
   />
 {/snippet}