From 7bdeeb85d5b7b7ba436aa2ef5256b42d7a601480 Mon Sep 17 00:00:00 2001 From: Nikhil Date: Thu, 19 Mar 2026 11:13:14 -0700 Subject: [PATCH] fix: revert: convert settings to popup dialog (#477) (#498) * Revert "feat: convert settings to popup dialog (#477)" This reverts commit 42aa0ff1efc3c6396828bcd90fb4fc6be3f92a66. * fix: address review feedback for PR #498 - Remove erroneous SETTINGS_PAGE_VIEWED_EVENT tracking from SidebarLayout (was firing on every non-settings page navigation) - Fix mobile settings sidebar not closing on route change by merging setMobileOpen(false) into the pathname-dependent analytics useEffect Co-Authored-By: Claude Opus 4.6 (1M context) --------- Co-authored-by: Claude Opus 4.6 (1M context) --- .../components/sidebar/SettingsSidebar.tsx | 182 ++++++++++++++ .../components/sidebar/SidebarNavigation.tsx | 66 +---- .../apps/agent/entrypoints/app/App.tsx | 75 ++---- .../app/layout/SettingsSidebarLayout.tsx | 65 +++++ .../entrypoints/app/layout/SidebarLayout.tsx | 3 +- .../app/settings-dialog/SettingsDialog.tsx | 225 ------------------ .../agent/lib/settings/useOpenSettings.ts | 21 -- 7 files changed, 280 insertions(+), 357 deletions(-) create mode 100644 packages/browseros-agent/apps/agent/components/sidebar/SettingsSidebar.tsx create mode 100644 packages/browseros-agent/apps/agent/entrypoints/app/layout/SettingsSidebarLayout.tsx delete mode 100644 packages/browseros-agent/apps/agent/entrypoints/app/settings-dialog/SettingsDialog.tsx delete mode 100644 packages/browseros-agent/apps/agent/lib/settings/useOpenSettings.ts diff --git a/packages/browseros-agent/apps/agent/components/sidebar/SettingsSidebar.tsx b/packages/browseros-agent/apps/agent/components/sidebar/SettingsSidebar.tsx new file mode 100644 index 000000000..3668d0680 --- /dev/null +++ b/packages/browseros-agent/apps/agent/components/sidebar/SettingsSidebar.tsx @@ -0,0 +1,182 @@ +import { + ArrowLeft, + BookOpen, + Bot, + Compass, + GitBranch, + MessageSquare, + Palette, + RotateCcw, + Search, + Server, +} from 'lucide-react' +import type { FC } from 'react' +import { NavLink } from 'react-router' +import { ThemeToggle } from '@/components/elements/theme-toggle' +import { Feature } from '@/lib/browseros/capabilities' +import { useCapabilities } from '@/lib/browseros/useCapabilities' +import { cn } from '@/lib/utils' + +type BaseNavItem = { + name: string + icon: typeof Bot + feature?: Feature +} + +type InternalNavItem = BaseNavItem & { + href?: never + to: string +} + +type ExternalNavItem = BaseNavItem & { + href: string + to?: never +} + +type NavItem = InternalNavItem | ExternalNavItem + +type NavSection = { + label: string + items: NavItem[] +} + +function isExternalNavItem(item: NavItem): item is ExternalNavItem { + return 'href' in item +} + +const getNavLinkClassName = (isActive: boolean) => + 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', + isActive && 'bg-sidebar-accent text-sidebar-accent-foreground', + ) + +const getSectionClassName = (index: number) => + cn(index > 0 && 'mt-3 border-t pt-3') + +const sectionLabelClassName = + 'mb-2 px-3 font-semibold text-[10px] text-muted-foreground uppercase tracking-[0.18em]' + +const primarySettingsSections: NavSection[] = [ + { + label: 'Provider Settings', + items: [ + { name: 'BrowserOS AI', to: '/settings/ai', icon: Bot }, + { + name: 'Chat & Council Provider', + to: '/settings/chat', + icon: MessageSquare, + }, + { name: 'Search Provider', to: '/settings/search', icon: Search }, + ], + }, + { + label: 'Other', + items: [ + { + name: 'Customize BrowserOS', + to: '/settings/customization', + icon: Palette, + feature: Feature.CUSTOMIZATION_SUPPORT, + }, + { name: 'BrowserOS as MCP', to: '/settings/mcp', icon: Server }, + { + name: 'Workflows', + to: '/workflows', + icon: GitBranch, + feature: Feature.WORKFLOW_SUPPORT, + }, + ], + }, +] + +const helpItems: NavItem[] = [ + { name: 'Docs', href: 'https://docs.browseros.com/', icon: BookOpen }, + { name: 'Features', to: '/onboarding/features', icon: Compass }, + { name: 'Revisit Onboarding', to: '/onboarding', icon: RotateCcw }, +] + +export const SettingsSidebar: FC = () => { + const { supports } = useCapabilities() + + const filteredSections = primarySettingsSections + .map((section) => ({ + ...section, + items: section.items.filter( + (item) => !item.feature || supports(item.feature), + ), + })) + .filter((section) => section.items.length > 0) + + const filteredHelpItems = helpItems.filter( + (item) => !item.feature || supports(item.feature), + ) + + const renderNavItem = (item: NavItem) => { + const Icon = item.icon + + if (isExternalNavItem(item)) { + return ( + + + {item.name} + + ) + } + + return ( + getNavLinkClassName(isActive)} + > + + {item.name} + + ) + } + + const renderSection = (section: NavSection, index: number) => ( +
+
{section.label}
+ +
+ ) + + return ( +
+
+ + + Back + + +
+ +
+
+ Settings +
+
{filteredSections.map(renderSection)}
+
+
Help
+ +
+
+
+ ) +} diff --git a/packages/browseros-agent/apps/agent/components/sidebar/SidebarNavigation.tsx b/packages/browseros-agent/apps/agent/components/sidebar/SidebarNavigation.tsx index ab65bc803..969154fed 100644 --- a/packages/browseros-agent/apps/agent/components/sidebar/SidebarNavigation.tsx +++ b/packages/browseros-agent/apps/agent/components/sidebar/SidebarNavigation.tsx @@ -1,7 +1,6 @@ import { Brain, CalendarClock, - GitBranch, Home, PlugZap, Settings, @@ -18,7 +17,6 @@ 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 { @@ -27,10 +25,9 @@ interface SidebarNavigationProps { type NavItem = { name: string - to?: string + to: string icon: typeof Home feature?: Feature - action?: 'settings' } const primaryNavItems: NavItem[] = [ @@ -42,12 +39,6 @@ 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', @@ -66,19 +57,14 @@ const primaryNavItems: NavItem[] = [ icon: Sparkles, feature: Feature.SOUL_SUPPORT, }, - { name: 'Settings', icon: Settings, action: 'settings' }, + { name: 'Settings', to: '/settings/ai', icon: 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 = ({ 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), @@ -90,52 +76,16 @@ export const SidebarNavigation: FC = ({