refactor: implement icon rail sidebar for Design System v4

72px icon rail with hover flyouts, pin-to-expand toggle (260px),
keyboard accessible, mobile hamburger overlay. Flat TopBar styling
(no blur/glass). New BrandLogo mark (gradient square + lightning bolt).
BrandWordmark uses solid text color instead of gradient.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

frontend/src/store/userPreferencesStore.ts

@@ -17,6 +17,8 @@ interface UserPreferencesState {
   setPreferredEditorMode: (mode: EditorMode) => void
   sidebarCollapsed: boolean
   toggleSidebar: () => void
+  sidebarPinned: boolean
+  toggleSidebarPinned: () => void
   dashboardMyFlowsView: TreeLibraryView
   setDashboardMyFlowsView: (view: TreeLibraryView) => void
 }
@@ -34,6 +36,8 @@ export const useUserPreferencesStore = create<UserPreferencesState>()(
       setPreferredEditorMode: (mode) => set({ preferredEditorMode: mode }),
       sidebarCollapsed: false,
       toggleSidebar: () => set({ sidebarCollapsed: !get().sidebarCollapsed }),
+      sidebarPinned: false,
+      toggleSidebarPinned: () => set({ sidebarPinned: !get().sidebarPinned }),
       dashboardMyFlowsView: 'grid',
       setDashboardMyFlowsView: (view) => set({ dashboardMyFlowsView: view }),
     }),