| @@ -1,13 +1,5 @@ |
| 1 | import { useCallback, type ComponentType } from "react"; | 1 | import { useCallback } from "react"; |
| 2 | import { | 2 | import { ArrowLeftIcon } from "lucide-react"; |
| 3 | ArchiveIcon, | | |
| 4 | ArrowLeftIcon, | | |
| 5 | BotIcon, | | |
| 6 | GitBranchIcon, | | |
| 7 | KeyboardIcon, | | |
| 8 | Link2Icon, | | |
| 9 | Settings2Icon, | | |
| 10 | } from "lucide-react"; | | |
| 11 | import { useCanGoBack, useNavigate } from "@tanstack/react-router"; | 3 | import { useCanGoBack, useNavigate } from "@tanstack/react-router"; |
| 12 | | 4 | |
| 13 | import { | 5 | import { |
| @@ -20,27 +12,8 @@ import { · 6 unmodified lines |
| 20 | SidebarSeparator, | 12 | SidebarSeparator, |
| 21 | useSidebar, | 13 | useSidebar, |
| 22 | } from "../ui/sidebar"; | 14 | } from "../ui/sidebar"; |
| 23 | | 15 | import { SETTINGS_NAV_ITEMS, type SettingsSectionPath } from "./SettingsSidebarNav.items"; |
| 24 | export type SettingsSectionPath = | 16 | import { SettingsSidebarNavItem } from "./SettingsSidebarNavItem"; |
| 25 | | "/settings/general" | | |
| 26 | | "/settings/keybindings" | | |
| 27 | | "/settings/providers" | | |
| 28 | | "/settings/source-control" | | |
| 29 | | "/settings/connections" | | |
| 30 | | "/settings/archived"; | | |
| 31 | | | |
| 32 | export const SETTINGS_NAV_ITEMS: ReadonlyArray<{ | | |
| 33 | label: string; | | |
| 34 | to: SettingsSectionPath; | | |
| 35 | icon: ComponentType<{ className?: string }>; | | |
| 36 | }> = [ | | |
| 37 | { label: "General", to: "/settings/general", icon: Settings2Icon }, | | |
| 38 | { label: "Keybindings", to: "/settings/keybindings", icon: KeyboardIcon }, | | |
| 39 | { label: "Providers", to: "/settings/providers", icon: BotIcon }, | | |
| 40 | { label: "Source Control", to: "/settings/source-control", icon: GitBranchIcon }, | | |
| 41 | { label: "Connections", to: "/settings/connections", icon: Link2Icon }, | | |
| 42 | { label: "Archive", to: "/settings/archived", icon: ArchiveIcon }, | | |
| 43 | ]; | | |
| 44 | | 17 | |
| 45 | export function SettingsSidebarNav({ pathname }: { pathname: string }) { | 18 | export function SettingsSidebarNav({ pathname }: { pathname: string }) { |
| 46 | const navigate = useNavigate(); | 19 | const navigate = useNavigate(); |
| @@ -71,33 +44,14 @@ export function SettingsSidebarNav({ pathname }: { pathname: string }) { · 24 unmodified lines |
| 71 | <SidebarContent className="overflow-x-hidden"> | 44 | <SidebarContent className="overflow-x-hidden"> |
| 72 | <SidebarGroup className="px-2 py-3"> | 45 | <SidebarGroup className="px-2 py-3"> |
| 73 | <SidebarMenu> | 46 | <SidebarMenu> |
| 74 | {SETTINGS_NAV_ITEMS.map((item) => { | 47 | {SETTINGS_NAV_ITEMS.map((item) => ( |
| 75 | const Icon = item.icon; | 48 | <SettingsSidebarNavItem |
| 76 | const isActive = pathname === item.to; | 49 | key={item.to} |
| 77 | return ( | 50 | item={item} |
| 78 | <SidebarMenuItem key={item.to}> | 51 | isActive={pathname === item.to} |
| 79 | <SidebarMenuButton | 52 | onSelect={handleSectionClick} |
| 80 | size="sm" | 53 | /> |
| 81 | isActive={isActive} | 54 | ))} |
| 82 | className={ | | |
| 83 | isActive | | |
| 84 | ? "gap-2.5 px-2.5 py-2 text-left text-[13px] font-medium text-foreground" | | |
| 85 | : "gap-2.5 px-2.5 py-2 text-left text-[13px] text-muted-foreground/70 hover:text-foreground/80" | | |
| 86 | } | | |
| 87 | onClick={() => handleSectionClick(item.to)} | | |
| 88 | > | | |
| 89 | <Icon | | |
| 90 | className={ | | |
| 91 | isActive | | |
| 92 | ? "size-4 shrink-0 text-foreground" | | |
| 93 | : "size-4 shrink-0 text-muted-foreground/60" | | |
| 94 | } | | |
| 95 | /> | | |
| 96 | <span className="truncate">{item.label}</span> | | |
| 97 | </SidebarMenuButton> | | |
| 98 | </SidebarMenuItem> | | |
| 99 | ); | | |
| 100 | })} | | |
| 101 | </SidebarMenu> | 55 | </SidebarMenu> |
| 102 | </SidebarGroup> | 56 | </SidebarGroup> |
| 103 | </SidebarContent> | 57 | </SidebarContent> |