feat: convert settings to popup dialog

packages/browseros-agent/apps/agent/components/sidebar/SidebarNavigation.tsx

@@ -1,6 +1,7 @@
 import {
   Brain,
   CalendarClock,
+  GitBranch,
   Home,
   PlugZap,
   Settings,
@@ -17,6 +18,7 @@ import {
 } from '@/components/ui/tooltip'
 import { Feature } from '@/lib/browseros/capabilities'
 import { useCapabilities } from '@/lib/browseros/useCapabilities'
+import { useOpenSettings } from '@/lib/settings/useOpenSettings'
 import { cn } from '@/lib/utils'
 
 interface SidebarNavigationProps {
@@ -25,9 +27,10 @@ interface SidebarNavigationProps {
 
 type NavItem = {
   name: string
-  to: string
+  to?: string
   icon: typeof Home
   feature?: Feature
+  action?: 'settings'
 }
 
 const primaryNavItems: NavItem[] = [
@@ -39,6 +42,12 @@ const primaryNavItems: NavItem[] = [
     feature: Feature.MANAGED_MCP_SUPPORT,
   },
   { name: 'Scheduled Tasks', to: '/scheduled', icon: CalendarClock },
+  {
+    name: 'Workflows',
+    to: '/workflows',
+    icon: GitBranch,
+    feature: Feature.WORKFLOW_SUPPORT,
+  },
   {
     name: 'Skills',
     to: '/home/skills',
@@ -57,14 +66,19 @@ const primaryNavItems: NavItem[] = [
     icon: Sparkles,
     feature: Feature.SOUL_SUPPORT,
   },
-  { name: 'Settings', to: '/settings/ai', icon: Settings },
+  { name: 'Settings', icon: Settings, action: 'settings' },
 ]
 
+const navItemClassName =
+  'flex h-9 items-center gap-2 overflow-hidden whitespace-nowrap rounded-md px-3 font-medium text-sm transition-colors hover:bg-sidebar-accent hover:text-sidebar-accent-foreground'
+
 export const SidebarNavigation: FC<SidebarNavigationProps> = ({
   expanded = true,
 }) => {
   const location = useLocation()
+  const openSettings = useOpenSettings()
   const { supports } = useCapabilities()
+  const isSettingsActive = location.pathname.startsWith('/settings')
 
   const filteredItems = primaryNavItems.filter(
     (item) => !item.feature || supports(item.feature),
@@ -76,16 +90,52 @@ export const SidebarNavigation: FC<SidebarNavigationProps> = ({
         <nav className="space-y-1">
           {filteredItems.map((item) => {
             const Icon = item.icon
-            const isActive =
-              item.to === '/settings/ai'
-                ? location.pathname.startsWith('/settings')
-                : location.pathname === item.to
 
+            // Settings is a button that opens the dialog
+            if (item.action === 'settings') {
+              const settingsButton = (
+                <button
+                  type="button"
+                  onClick={() => openSettings()}
+                  className={cn(
+                    navItemClassName,
+                    'w-full',
+                    isSettingsActive &&
+                      'bg-sidebar-accent text-sidebar-accent-foreground',
+                  )}
+                >
+                  <Icon className="size-4 shrink-0" />
+                  <span
+                    className={cn(
+                      'truncate transition-opacity duration-200',
+                      expanded ? 'opacity-100' : 'opacity-0',
+                    )}
+                  >
+                    {item.name}
+                  </span>
+                </button>
+              )
+
+              if (!expanded) {
+                return (
+                  <Tooltip key="settings">
+                    <TooltipTrigger asChild>{settingsButton}</TooltipTrigger>
+                    <TooltipContent side="right">{item.name}</TooltipContent>
+                  </Tooltip>
+                )
+              }
+
+              return <div key="settings">{settingsButton}</div>
+            }
+
+            // Regular nav items use NavLink
+            const itemPath = item.to ?? '/home'
+            const isActive = location.pathname === itemPath
             const navItem = (
               <NavLink
-                to={item.to}
+                to={itemPath}
                 className={cn(
-                  'flex h-9 items-center gap-2 overflow-hidden whitespace-nowrap rounded-md px-3 font-medium text-sm transition-colors hover:bg-sidebar-accent hover:text-sidebar-accent-foreground',
+                  navItemClassName,
                   isActive &&
                     'bg-sidebar-accent text-sidebar-accent-foreground',
                 )}