feat(ui): toggleable settings sidebar + back-to-start arrow in TopBar

frontend/src/pages/Settings.tsx

@@ -2,6 +2,7 @@ import React, { useMemo } from 'react';
 import { NavLink, Outlet } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import { usePluginStore } from '@/store/pluginStore';
+import { useUIStore } from '@/store/uiStore';
 import { Settings, Mail, Bell, Sparkles, Bot, Shield, Users, UsersRound, Package } from 'lucide-react';
 
 const ICON_MAP: Record<string, React.ComponentType<{ className?: string }>> = {
@@ -20,6 +21,7 @@ const FALLBACK_ICON = Package;
 export function SettingsPage() {
   const { t } = useTranslation();
   const manifests = usePluginStore(s => s.manifests);
+  const sidebarOpen = useUIStore((state) => state.sidebarOpen);
   const pluginSettingsPages = useMemo(
     () => (manifests || [])
       .flatMap((m) => (Array.isArray(m.settings_pages) ? m.settings_pages : []))
@@ -56,8 +58,9 @@ export function SettingsPage() {
   const navItems = [...hardcodedNavItems, ...pluginNavItems];
 
   return (
-    <div className="flex max-w-7xl mx-auto" data-testid="settings-page">
-      <aside className="w-64 flex-shrink-0 border-r border-secondary-200 p-4 min-h-[calc(100vh-4rem)]">
+    <div className="flex h-full overflow-hidden" data-testid="settings-page">
+      <aside className={`${sidebarOpen ? 'w-64' : 'w-0'} flex-shrink-0 border-r border-secondary-200 p-4 min-h-[calc(100vh-4rem)] transition-all duration-200 overflow-hidden`}>
+        <div className="w-64 flex-shrink-0">
         <h1 className="text-xl font-bold text-secondary-900 mb-6">{t('settings.title')}</h1>
         <nav className="space-y-1" role="navigation" aria-label={t('settings.title')}>
           {navItems.map((item) => (
@@ -79,8 +82,9 @@ export function SettingsPage() {
             </NavLink>
           ))}
         </nav>
+        </div>
       </aside>
-      <main className="flex-1 p-6" data-testid="settings-content">
+      <main className="flex-1 p-6 overflow-y-auto" data-testid="settings-content">
         <Outlet />
       </main>
     </div>