Feat: Add responsive workspace shell

Frontend/src/components/shell/WorkspaceSidebar/WorkspaceSidebar.module.scss

@@ -19,7 +19,7 @@
 
 .headerActions {
   display: grid;
-  grid-template-columns: repeat(4, minmax(0, 1fr));
+  grid-template-columns: repeat(5, minmax(0, 1fr));
   gap: var(--space-2);
   justify-items: stretch;
 }
@@ -91,7 +91,7 @@
   overflow-y: auto;
   overscroll-behavior: contain;
   padding-right: var(--space-1);
-  padding-bottom: calc(var(--space-4) + var(--sidebar-dock-clearance, 8rem));
+	padding-bottom: calc(var(--space-4) + var(--sidebar-dock-clearance, var(--shell-dock-clearance)));
   margin-right: calc(var(--space-1) * -1);
 }
 
@@ -107,6 +107,22 @@
   padding: 0;
 }
 
+.treeSectionLabel {
+  @include text-caption;
+  margin: var(--space-3) 0 var(--space-2);
+  padding: 0 var(--space-3);
+  color: var(--color-text-subtle);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
+.treeList {
+  list-style: none;
+  display: grid;
+  gap: var(--space-1);
+  padding: 0;
+}
+
 .navItem {
   width: 100%;
   min-width: 0;
@@ -121,6 +137,45 @@
   @include interactive-frame-hover(var(--color-surface-hover), transparent, var(--color-text));
 }
 
+.treeItem {
+  width: 100%;
+  min-width: 0;
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  align-items: center;
+  gap: var(--space-2);
+  min-height: calc(var(--control-size-lg) - var(--space-2));
+  padding: var(--space-2) var(--space-3);
+  padding-left: calc(var(--space-3) + (var(--tree-depth, 0) * var(--space-4)));
+  border: 1px solid transparent;
+  border-radius: var(--radius-lg);
+  background: transparent;
+  color: var(--color-text-muted);
+  text-align: left;
+  transition:
+    background 160ms var(--easing-standard),
+    color 160ms var(--easing-standard),
+    border-color 160ms var(--easing-standard),
+    transform 180ms var(--easing-standard);
+}
+
+.treeItem:hover,
+.treeItem:focus-visible {
+  background: var(--color-surface-hover);
+  color: var(--color-text);
+}
+
+.treeItemFolder {
+  color: var(--color-text);
+}
+
+.treeItemActive {
+  border-color: var(--color-border);
+  background: var(--color-surface);
+  color: var(--color-text);
+  box-shadow: inset 0 1px 0 color-mix(in srgb, white 4%, transparent);
+}
+
 .navItemActive {
   border-color: var(--color-border);
   background: var(--color-surface);
@@ -149,7 +204,7 @@
 }
 
 .sidebarCollapsed .headerActions {
-  grid-template-columns: repeat(2, minmax(0, 1fr));
+  grid-template-columns: repeat(3, minmax(0, 1fr));
 }
 
 .sidebarCollapsed .headerControls {
@@ -175,7 +230,9 @@
 }
 
 .sidebarCollapsed .label,
-.sidebarCollapsed .itemMeta {
+.sidebarCollapsed .itemMeta,
+.sidebarCollapsed .treeSectionLabel,
+.sidebarCollapsed .treeList {
   display: none;
 }