feat(app-switcher): централизовать ссылки приложений в portal settings

Публичный GET и admin PUT/UI /admin/apps; каталог и chrome читают URL из store.

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

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

@@ -1,6 +1,6 @@
 import { Link, useRouterState } from '@tanstack/react-router'
 import { useQuery } from '@tanstack/react-query'
-import { LayoutGridIcon, UsersIcon } from 'lucide-react'
+import { LayoutGridIcon, UsersIcon, AppWindowIcon } from 'lucide-react'
 import { AppSwitcher } from '@/components/app-switcher'
 import { meQueryOptions } from '@/queries/auth'
 import {
@@ -57,13 +57,23 @@ export function AppSidebar() {
                 <SidebarMenuItem>
                   <SidebarMenuButton
                     tooltip="Пользователи"
-                    isActive={isActive(pathname, '/admin', false)}
+                    isActive={isActive(pathname, '/admin', false) && !pathname.startsWith('/admin/apps')}
                     render={<Link to="/admin" />}
                   >
                     <UsersIcon className="size-4" />
                     <span>Пользователи</span>
                   </SidebarMenuButton>
                 </SidebarMenuItem>
+                <SidebarMenuItem>
+                  <SidebarMenuButton
+                    tooltip="Приложения"
+                    isActive={isActive(pathname, '/admin/apps', false)}
+                    render={<Link to="/admin/apps" />}
+                  >
+                    <AppWindowIcon className="size-4" />
+                    <span>Ссылки приложений</span>
+                  </SidebarMenuButton>
+                </SidebarMenuItem>
               </SidebarMenu>
             </SidebarGroupContent>
           </SidebarGroup>

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

@@ -1,4 +1,4 @@
-import { APPS } from '@authportal/shared'
+import { useQuery } from '@tanstack/react-query'
 import {
   CheckIcon,
   ChevronsUpDownIcon,
@@ -6,7 +6,11 @@ import {
   CloudIcon,
   ServerIcon,
   NetworkIcon,
+  LayoutDashboardIcon,
+  ChartColumnIcon,
 } from 'lucide-react'
+import type { AppSwitcherIconName } from '@authportal/shared'
+import { appSwitcherQueryOptions } from '@/queries/app-switcher'
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -24,18 +28,24 @@ const PORTAL = {
   id: 'portal',
   name: 'Auth Portal',
   subtitle: 'shnt.top',
-  url: '/',
-  icon: KeyRoundIcon,
 }
 
-const APP_ICONS = {
-  cfdm: CloudIcon,
-  vps: ServerIcon,
-  bgp: NetworkIcon,
-} as const
+const ICON_MAP: Record<
+  AppSwitcherIconName,
+  React.ComponentType<{ className?: string }>
+> = {
+  cloud: CloudIcon,
+  server: ServerIcon,
+  globe: NetworkIcon,
+  dashboard: LayoutDashboardIcon,
+  chart: ChartColumnIcon,
+}
 
 export function AppSwitcher() {
   const { isMobile } = useSidebar()
+  const { data } = useQuery(appSwitcherQueryOptions)
+  const menuLabel = data?.menuLabel ?? 'Приложения'
+  const apps = (data?.apps ?? []).filter((a) => a.enabled !== false)
 
   return (
     <SidebarMenu>
@@ -67,15 +77,15 @@ export function AppSwitcher() {
             sideOffset={4}
           >
             <div className="text-muted-foreground px-2 py-1.5 text-xs">
-              Приложения
+              {menuLabel}
             </div>
             <DropdownMenuItem disabled>
               <KeyRoundIcon />
               Auth Portal
               <CheckIcon className="ml-auto size-4" />
             </DropdownMenuItem>
-            {APPS.map((app) => {
-              const Icon = APP_ICONS[app.id]
+            {apps.map((app) => {
+              const Icon = ICON_MAP[app.icon] ?? ServerIcon
               return (
                 <DropdownMenuItem
                   key={app.id}
@@ -83,7 +93,7 @@ export function AppSwitcher() {
                   render={<a href={app.url} target="_blank" rel="noreferrer" />}
                 >
                   <Icon />
-                  {app.title}
+                  {app.name}
                 </DropdownMenuItem>
               )
             })}

apps/web/src/components/reui-kit/app-switcher-admin-editor.tsx

@@ -0,0 +1,159 @@
+/**
+ * Admin editor for portal App Switcher URLs.
+ * Preview: https://reui.io/preview/base/settings-16 · https://reui.io/preview/base/settings-3
+ */
+import { useEffect } from 'react'
+import { useForm } from 'react-hook-form'
+import { zodResolver } from '@hookform/resolvers/zod'
+import {
+  APP_IDS,
+  appSwitcherConfigSchema,
+  type AppId,
+  type AppSwitcherConfig,
+  type AppSwitcherIconName,
+} from '@authportal/shared'
+import { Button } from '@authportal/ui/components/button'
+import { Field, FieldGroup, FieldLabel } from '@authportal/ui/components/field'
+import { Input } from '@authportal/ui/components/input'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@authportal/ui/components/select'
+import { Switch } from '@authportal/ui/components/switch'
+import { ItemSeparator } from '@authportal/ui/components/item'
+
+const ICON_OPTIONS: AppSwitcherIconName[] = [
+  'server',
+  'cloud',
+  'globe',
+  'dashboard',
+  'chart',
+]
+
+interface AppSwitcherAdminEditorProps {
+  defaultValues: AppSwitcherConfig
+  onSave: (values: AppSwitcherConfig) => void
+  isSaving?: boolean
+}
+
+export function AppSwitcherAdminEditor({
+  defaultValues,
+  onSave,
+  isSaving,
+}: AppSwitcherAdminEditorProps) {
+  const form = useForm({
+    resolver: zodResolver(appSwitcherConfigSchema),
+    defaultValues,
+  })
+
+  useEffect(() => {
+    form.reset(defaultValues)
+  }, [defaultValues, form])
+
+  return (
+    <form
+      className="flex flex-col gap-5"
+      onSubmit={(e) =>
+        void form.handleSubmit((values) => onSave(values))(e)
+      }
+    >
+      <FieldGroup>
+        <Field>
+          <FieldLabel htmlFor="menu-label">Заголовок меню</FieldLabel>
+          <Input id="menu-label" {...form.register('menuLabel')} />
+        </Field>
+
+        {APP_IDS.map((appId, index) => {
+          const apps = form.watch('apps')
+          const appIndex = apps.findIndex((a) => a.id === appId)
+          if (appIndex < 0) return null
+          return (
+            <div key={appId} className="flex flex-col gap-3">
+              {index > 0 ? <ItemSeparator /> : null}
+              <p className="text-sm font-medium tracking-tight">
+                {appId.toUpperCase()}
+              </p>
+              <div className="grid gap-3 sm:grid-cols-2">
+                <Field className="sm:col-span-2">
+                  <FieldLabel htmlFor={`name-${appId}`}>Название</FieldLabel>
+                  <Input
+                    id={`name-${appId}`}
+                    {...form.register(`apps.${appIndex}.name`)}
+                  />
+                </Field>
+                <Field className="sm:col-span-2">
+                  <FieldLabel htmlFor={`url-${appId}`}>URL</FieldLabel>
+                  <Input
+                    id={`url-${appId}`}
+                    {...form.register(`apps.${appIndex}.url`)}
+                    placeholder="https://…"
+                  />
+                </Field>
+                <Field className="sm:col-span-2">
+                  <FieldLabel htmlFor={`subtitle-${appId}`}>
+                    Описание
+                  </FieldLabel>
+                  <Input
+                    id={`subtitle-${appId}`}
+                    {...form.register(`apps.${appIndex}.subtitle`)}
+                  />
+                </Field>
+                <Field>
+                  <FieldLabel htmlFor={`icon-${appId}`}>Иконка</FieldLabel>
+                  <Select
+                    value={form.watch(`apps.${appIndex}.icon`)}
+                    onValueChange={(v) =>
+                      form.setValue(
+                        `apps.${appIndex}.icon`,
+                        (v ?? 'server') as AppSwitcherIconName,
+                        { shouldDirty: true },
+                      )
+                    }
+                  >
+                    <SelectTrigger id={`icon-${appId}`}>
+                      <SelectValue />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {ICON_OPTIONS.map((icon) => (
+                        <SelectItem key={icon} value={icon}>
+                          {icon}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                </Field>
+                <Field orientation="horizontal" className="items-center pt-6">
+                  <Switch
+                    checked={form.watch(`apps.${appIndex}.enabled`) !== false}
+                    onCheckedChange={(v) =>
+                      form.setValue(`apps.${appIndex}.enabled`, v, {
+                        shouldDirty: true,
+                      })
+                    }
+                  />
+                  <FieldLabel className="font-normal">Включено в switcher</FieldLabel>
+                </Field>
+              </div>
+              <input
+                type="hidden"
+                {...form.register(`apps.${appIndex}.id`)}
+                value={appId satisfies AppId}
+              />
+            </div>
+          )
+        })}
+      </FieldGroup>
+
+      <Button
+        type="submit"
+        className="w-fit"
+        disabled={isSaving || !form.formState.isDirty}
+      >
+        {isSaving ? 'Сохранение…' : 'Сохранить'}
+      </Button>
+    </form>
+  )
+}