feat(web): добавить App Switcher для перехода между приложениями

Dropdown в sidebar с настраиваемым списком ссылок через VITE_APP_SWITCHER и дефолтами для VPS Tracker и CF Domain Manager.

Co-authored-by: Cursor <[email protected]>

apps/web/src/components/app-switcher.tsx

@@ -0,0 +1,96 @@
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuShortcut,
+  DropdownMenuTrigger,
+} from '@cfdm/ui/components/dropdown-menu'
+import {
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  useSidebar,
+} from '@cfdm/ui/components/sidebar'
+import { CheckIcon, ChevronsUpDownIcon } from 'lucide-react'
+
+import {
+  APP_SWITCHER_ICONS,
+  CURRENT_APP_ID,
+  getAppSwitcherConfig,
+  getCurrentApp,
+} from '@/lib/app-switcher-config'
+
+export function AppSwitcher() {
+  const { isMobile } = useSidebar()
+  const config = getAppSwitcherConfig()
+  const current = getCurrentApp(config)
+  const CurrentIcon = APP_SWITCHER_ICONS[current.icon]
+
+  return (
+    <SidebarMenu>
+      <SidebarMenuItem>
+        <DropdownMenu>
+          <DropdownMenuTrigger
+            render={
+              <SidebarMenuButton size="lg" className="aria-expanded:bg-muted" />
+            }
+          >
+            <div
+              className="flex aspect-square size-8 items-center justify-center rounded-md bg-primary text-primary-foreground"
+              aria-hidden
+            >
+              <CurrentIcon className="size-4" />
+            </div>
+            <div className="grid flex-1 text-left text-sm leading-tight">
+              <span className="truncate font-semibold">{current.name}</span>
+              {current.subtitle ? (
+                <span className="truncate text-xs text-muted-foreground">
+                  {current.subtitle}
+                </span>
+              ) : null}
+            </div>
+            <ChevronsUpDownIcon className="ml-auto size-4" />
+          </DropdownMenuTrigger>
+          <DropdownMenuContent
+            className="min-w-56 rounded-lg"
+            side={isMobile ? 'bottom' : 'right'}
+            align="start"
+            sideOffset={4}
+          >
+            <DropdownMenuLabel className="text-xs text-muted-foreground">
+              {config.menuLabel}
+            </DropdownMenuLabel>
+            <DropdownMenuGroup>
+              {config.apps.map((app) => {
+                const Icon = APP_SWITCHER_ICONS[app.icon]
+                const isCurrent = app.id === CURRENT_APP_ID
+
+                if (isCurrent) {
+                  return (
+                    <DropdownMenuItem key={app.id} disabled>
+                      <Icon />
+                      {app.name}
+                      <CheckIcon className="ml-auto size-4" />
+                    </DropdownMenuItem>
+                  )
+                }
+
+                return (
+                  <DropdownMenuItem key={app.id} render={<a href={app.url} />}>
+                    <Icon />
+                    {app.name}
+                    {app.shortcut ? (
+                      <DropdownMenuShortcut>{app.shortcut}</DropdownMenuShortcut>
+                    ) : null}
+                  </DropdownMenuItem>
+                )
+              })}
+            </DropdownMenuGroup>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </SidebarMenuItem>
+    </SidebarMenu>
+  )
+}

apps/web/src/components/layout/app-shell.tsx

@@ -45,6 +45,7 @@ import { useQuery } from '@tanstack/react-query'
 import { useState, type ReactNode } from 'react'
 
 import { ModeToggle } from '@/components/mode-toggle'
+import { AppSwitcher } from '@/components/app-switcher'
 import { GlobalSearch, GlobalSearchTrigger, useGlobalSearchHotkey } from '@/components/global-search'
 import { dashboardStatsQueryOptions } from '@/queries/dashboard'
 import { formatRelativeSyncTime } from '@/lib/sync-format'
@@ -147,22 +148,7 @@ export function AppShell({ children }: { children: ReactNode }) {
     <SidebarProvider>
       <Sidebar collapsible="icon">
         <SidebarHeader>
-          <SidebarMenu>
-            <SidebarMenuItem>
-              <SidebarMenuButton size="lg" render={<Link to="/dashboard" />}>
-                <div
-                  className="flex aspect-square size-8 items-center justify-center rounded-md bg-primary text-primary-foreground"
-                  aria-hidden
-                >
-                  <Server className="size-4" />
-                </div>
-                <div className="flex flex-col gap-0.5 leading-none">
-                  <span className="font-semibold">VPS Tracker</span>
-                  <span className="text-xs text-muted-foreground">Учёт виртуальных серверов</span>
-                </div>
-              </SidebarMenuButton>
-            </SidebarMenuItem>
-          </SidebarMenu>
+          <AppSwitcher />
         </SidebarHeader>
         <SidebarContent>
           {navGroups.map((group) => (