web: keep sidebar collapse local

web/workspace/src/app.css

@@ -124,7 +124,7 @@
 @layer layout {
 	.workspace-layout {
 		display: grid;
-		grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
+		grid-template-columns: auto minmax(0, 1fr);
 		grid-template-rows: auto minmax(0, 1fr);
 		width: 100vw;
 		height: 100dvh;
@@ -133,9 +133,6 @@
 		overflow: hidden;
 		min-width: 0;
 	}
-	.workspace-layout.sidebar-collapsed {
-		grid-template-columns: max-content minmax(0, 1fr);
-	}
 	.workspace-topbar {
 		grid-column: 2;
 		grid-row: 1;
@@ -206,6 +203,7 @@
 		.global-sidebar {
 			grid-column: 1;
 			grid-row: 1;
+			width: auto;
 			border-right: 0;
 			border-bottom: 1px solid var(--line);
 		}
@@ -217,12 +215,10 @@
 			min-height: 100dvh;
 			overflow: visible;
 		}
-		.workspace-layout.sidebar-collapsed {
-			grid-template-columns: 1fr;
-		}
 		.workspace-sidebar {
 			grid-column: 1;
 			grid-row: 1;
+			width: auto;
 			border-right: 0;
 			border-bottom: 1px solid var(--line);
 		}
@@ -243,6 +239,7 @@
 	.global-sidebar {
 		grid-column: 1;
 		grid-row: 1 / 3;
+		width: clamp(220px, 20vw, 280px);
 		min-width: 0;
 		min-height: 0;
 		overflow-y: auto;
@@ -256,6 +253,7 @@
 	.workspace-sidebar {
 		grid-column: 1;
 		grid-row: 1 / 3;
+		width: clamp(220px, 20vw, 280px);
 		align-self: stretch;
 		min-width: 0;
 		min-height: 0;
@@ -263,6 +261,10 @@
 		padding: var(--space-4) var(--space-3);
 		border-right: 1px solid var(--line);
 	}
+	.workspace-sidebar.collapsed {
+		width: max-content;
+	}
+
 	.sidebar-header {
 		display: grid;
 		gap: var(--space-2);

web/workspace/src/lib/workspace/sidebar/context.ts

@@ -6,7 +6,6 @@ export type SidebarSnippet = Snippet<[]>;
 export type SidebarController = {
   setSidebar(snippet: SidebarSnippet): void;
   clearSidebar(snippet: SidebarSnippet): void;
-  setCollapsed(collapsed: boolean): void;
 };
 
 export const SIDEBAR_CONTEXT = Symbol("yoi-sidebar-context");

web/workspace/src/routes/+layout.svelte

@@ -9,7 +9,6 @@
 
   let { children }: LayoutProps = $props();
   let sidebar = $state<SidebarSnippet | null>(null);
-  let sidebarCollapsed = $state(false);
 
   setContext(SIDEBAR_CONTEXT, {
     setSidebar(snippet: SidebarSnippet) {
@@ -17,17 +16,13 @@
     },
     clearSidebar(snippet: SidebarSnippet) {
       if (sidebar === snippet) sidebar = null;
-      sidebarCollapsed = false;
-    },
-    setCollapsed(collapsed: boolean) {
-      sidebarCollapsed = collapsed;
     },
   });
 </script>
 
 <WorkspaceAlerts />
 
-<div class:sidebar-collapsed={sidebarCollapsed} class="workspace-layout">
+<div class="workspace-layout">
   {#if sidebar}
     {@render sidebar()}
   {:else}

web/workspace/src/routes/w/[workspaceId]/+layout.svelte

@@ -2,20 +2,14 @@
   import { page } from '$app/state';
   import SidebarOverride from '$lib/workspace/sidebar/SidebarOverride.svelte';
   import WorkspaceSidebar from '$lib/workspace/sidebar/WorkspaceSidebar.svelte';
-  import { getSidebarController } from '$lib/workspace/sidebar/context';
   import type { LayoutProps } from './$types';
 
   let { data, children }: LayoutProps = $props();
   let sidebarCollapsed = $state(false);
-  const sidebarController = getSidebarController();
 
   function toggleSidebar() {
     sidebarCollapsed = !sidebarCollapsed;
   }
-
-  $effect(() => {
-    sidebarController.setCollapsed(sidebarCollapsed);
-  });
 </script>
 
 {#snippet workspaceSidebar()}