feat: enhance BadgeTabs and Auth components with layout improvements and API integration

Added layout metrics logging to the BadgeTabs component for better debugging and analysis. Updated the Auth route to include a reason for redirection when a token is required, improving user feedback. Enhanced the Settings component to display an alert when API token access is needed, ensuring clarity for users. Additionally, refined the Tabs component to improve responsiveness based on orientation, contributing to a more cohesive user experience.

.cursor/debug-c10bcb.log

@@ -0,0 +1,11 @@
+{"sessionId":"c10bcb","runId":"post-fix","hypothesisId":"H1","location":"badge-tabs.tsx:useEffect","message":"BadgeTabs layout metrics","data":{"flexDirection":"column","orientation":"horizontal","listLeft":280,"panelLeft":280,"stacked":true},"timestamp":1783605101206}
+{"sessionId":"c10bcb","runId":"post-fix","hypothesisId":"H1","location":"badge-tabs.tsx:useEffect","message":"BadgeTabs layout metrics","data":{"flexDirection":"column","orientation":"horizontal","listLeft":280,"panelLeft":280,"stacked":true},"timestamp":1783605101204}
+{"sessionId":"c10bcb","runId":"post-fix","hypothesisId":"H1","location":"badge-tabs.tsx:useEffect","message":"BadgeTabs layout metrics","data":{"flexDirection":"column","orientation":"horizontal","listLeft":280,"panelLeft":280,"stacked":true},"timestamp":1783605138640}
+{"sessionId":"c10bcb","runId":"post-fix","hypothesisId":"H1","location":"badge-tabs.tsx:useEffect","message":"BadgeTabs layout metrics","data":{"flexDirection":"column","orientation":"horizontal","listLeft":280,"panelLeft":280,"stacked":true},"timestamp":1783605138642}
+{"sessionId":"c10bcb","runId":"post-fix","hypothesisId":"H1","location":"badge-tabs.tsx:useEffect","message":"BadgeTabs layout metrics","data":{"flexDirection":"column","orientation":"horizontal","listLeft":280,"panelLeft":280,"stacked":true},"timestamp":1783605143758}
+{"sessionId":"c10bcb","runId":"post-fix","hypothesisId":"H1","location":"badge-tabs.tsx:useEffect","message":"BadgeTabs layout metrics","data":{"flexDirection":"column","orientation":"horizontal","listLeft":280,"panelLeft":280,"stacked":true},"timestamp":1783605144457}
+{"sessionId":"c10bcb","runId":"post-fix","hypothesisId":"H1","location":"badge-tabs.tsx:useEffect","message":"BadgeTabs layout metrics","data":{"flexDirection":"column","orientation":"horizontal","listLeft":280,"panelLeft":280,"stacked":true},"timestamp":1783605145907}
+{"sessionId":"c10bcb","runId":"post-fix","hypothesisId":"H1","location":"badge-tabs.tsx:useEffect","message":"BadgeTabs layout metrics","data":{"flexDirection":"column","orientation":"horizontal","listLeft":280,"panelLeft":280,"stacked":true},"timestamp":1783605152669}
+{"sessionId":"c10bcb","runId":"post-fix","hypothesisId":"H1","location":"badge-tabs.tsx:useEffect","message":"BadgeTabs layout metrics","data":{"flexDirection":"column","orientation":"horizontal","listLeft":280,"panelLeft":280,"stacked":true},"timestamp":1783605152671}
+{"sessionId":"c10bcb","runId":"post-fix","hypothesisId":"H1","location":"badge-tabs.tsx:useEffect","message":"BadgeTabs layout metrics","data":{"flexDirection":"column","orientation":"horizontal","listLeft":280,"panelLeft":280,"stacked":true},"timestamp":1783605222064}
+{"sessionId":"c10bcb","runId":"post-fix","hypothesisId":"H1","location":"badge-tabs.tsx:useEffect","message":"BadgeTabs layout metrics","data":{"flexDirection":"column","orientation":"horizontal","listLeft":280,"panelLeft":280,"stacked":true},"timestamp":1783605222067}

apps/web/src/components/badge-tabs.tsx

@@ -1,4 +1,5 @@
 import type { ComponentProps, ReactNode } from 'react'
+import { useEffect, useRef } from 'react'
 
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@evobgp/ui/components/tabs'
 import { cn } from '@evobgp/ui/lib/utils'
@@ -35,34 +36,67 @@ export function BadgeTabs({
   listClassName,
   contentClassName,
 }: BadgeTabsProps) {
+  const tabsRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    const el = tabsRef.current?.querySelector('[data-slot=tabs]')
+    if (!el || !(el instanceof HTMLElement)) return
+    const flexDirection = getComputedStyle(el).flexDirection
+    const listRect = el.querySelector('[data-slot=tabs-list]')?.getBoundingClientRect()
+    const panelRect = el.querySelector('[data-slot=tabs-content]')?.getBoundingClientRect()
+    // #region agent log
+    fetch('http://127.0.0.1:7311/ingest/6b35c3ae-1bcd-4c9c-81eb-f157c9347393', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json', 'X-Debug-Session-Id': 'c10bcb' },
+      body: JSON.stringify({
+        sessionId: 'c10bcb',
+        runId: 'post-fix',
+        hypothesisId: 'H1',
+        location: 'badge-tabs.tsx:useEffect',
+        message: 'BadgeTabs layout metrics',
+        data: {
+          flexDirection,
+          orientation: el.getAttribute('data-orientation'),
+          listLeft: listRect?.left,
+          panelLeft: panelRect?.left,
+          stacked: flexDirection === 'column',
+        },
+        timestamp: Date.now(),
+      }),
+    }).catch(() => {})
+    // #endregion
+  }, [value, defaultValue])
+
   return (
-    <Tabs
-      value={value}
-      defaultValue={defaultValue}
-      onValueChange={onValueChange}
-      className={cn('w-full', className)}
-    >
-      <TabsList
-        variant="line"
-        className={cn(
-          'mb-4 w-full justify-start gap-6',
-          listClassName,
-        )}
+    <div ref={tabsRef} className={cn('w-full', className)}>
+      <Tabs
+        value={value}
+        defaultValue={defaultValue}
+        onValueChange={onValueChange}
+        className="w-full"
       >
-        {items.map((item) => (
-          <TabsTrigger key={item.value} value={item.value} className="gap-2">
-            {item.icon}
-            {item.label}
-            {item.count !== undefined ? (
-              <Badge variant={item.badgeVariant ?? 'primary-light'} size="sm">
-                {item.count}
-              </Badge>
-            ) : null}
-          </TabsTrigger>
-        ))}
-      </TabsList>
-      <div className={cn('w-full min-w-0', contentClassName)}>{children}</div>
-    </Tabs>
+        <TabsList
+          variant="line"
+          className={cn(
+            'mb-4 w-full justify-start gap-6',
+            listClassName,
+          )}
+        >
+          {items.map((item) => (
+            <TabsTrigger key={item.value} value={item.value} className="gap-2">
+              {item.icon}
+              {item.label}
+              {item.count !== undefined ? (
+                <Badge variant={item.badgeVariant ?? 'primary-light'} size="sm">
+                  {item.count}
+                </Badge>
+              ) : null}
+            </TabsTrigger>
+          ))}
+        </TabsList>
+        <div className={cn('w-full min-w-0', contentClassName)}>{children}</div>
+      </Tabs>
+    </div>
   )
 }
 

apps/web/src/routes/_auth.tsx

@@ -9,7 +9,7 @@ export const Route = createFileRoute('/_auth')({
     const raw =
       typeof window !== 'undefined' ? window.localStorage.getItem(TOKEN_STORAGE_KEY) : null
     if (!raw || !normalizeApiToken(raw)) {
-      throw redirect({ to: '/settings' })
+      throw redirect({ to: '/settings', search: { reason: 'token-required' } })
     }
   },
   component: AuthLayout,

apps/web/src/routes/_auth/settings.tsx

@@ -1,7 +1,8 @@
-import { createFileRoute, useNavigate } from '@tanstack/react-router'
+import { createFileRoute, useNavigate, useRouterState } from '@tanstack/react-router'
 import { useQuery, useQueryClient } from '@tanstack/react-query'
 
 import { Button } from '@evobgp/ui/components/button'
+import { Alert, AlertDescription } from '@evobgp/ui/components/alert'
 import { PanelCard } from '@/components/panel-card'
 import { Input } from '@evobgp/ui/components/input'
 import { Label } from '@evobgp/ui/components/label'
@@ -28,6 +29,9 @@ const THEME_SELECT_ITEMS = [
 
 function SettingsComponent() {
   const navigate = useNavigate()
+  const tokenRequired = useRouterState({
+    select: (s) => new URLSearchParams(s.location.search).get('reason') === 'token-required',
+  })
   const qc = useQueryClient()
   const { data: session, isError: sessionError, error: sessionQueryError } = useQuery({
     ...authSessionQueryOptions(),
@@ -69,6 +73,14 @@ function SettingsComponent() {
         description="Параметры интерфейса и подключения браузера к API."
       />
 
+      {tokenRequired ? (
+        <Alert>
+          <AlertDescription>
+            Для доступа к разделу нужен API-токен. Сохраните токен ниже или нажмите «Использовать dev».
+          </AlertDescription>
+        </Alert>
+      ) : null}
+
       <PanelCard
         title="Подключение к API"
         description="Токен хранится только в этом браузере (localStorage). Управление ключами tenant — в разделе «Права доступа»."

packages/ui/src/components/tabs.tsx

@@ -15,7 +15,7 @@ function Tabs({
       data-slot="tabs"
       data-orientation={orientation}
       className={cn(
-        "group/tabs flex gap-2 data-horizontal:flex-col",
+        "group/tabs flex gap-2 data-[orientation=horizontal]:flex-col",
         className
       )}
       {...props}
@@ -24,7 +24,7 @@ function Tabs({
 }
 
 const tabsListVariants = cva(
-  "group/tabs-list inline-flex w-fit items-center justify-center rounded-lg p-[3px] text-muted-foreground group-data-horizontal/tabs:h-8 group-data-vertical/tabs:h-fit group-data-vertical/tabs:flex-col data-[variant=line]:rounded-none",
+  "group/tabs-list inline-flex w-fit items-center justify-center rounded-lg p-[3px] text-muted-foreground group-data-[orientation=horizontal]/tabs:h-8 group-data-[orientation=vertical]/tabs:h-fit group-data-[orientation=vertical]/tabs:flex-col data-[variant=line]:rounded-none",
   {
     variants: {
       variant: {
@@ -58,10 +58,10 @@ function TabsTrigger({ className, ...props }: TabsPrimitive.Tab.Props) {
     <TabsPrimitive.Tab
       data-slot="tabs-trigger"
       className={cn(
-        "relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-1.5 py-0.5 text-sm font-medium whitespace-nowrap text-foreground/60 transition-all group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 has-data-[icon=inline-end]:pr-1 has-data-[icon=inline-start]:pl-1 aria-disabled:pointer-events-none aria-disabled:opacity-50 dark:text-muted-foreground dark:hover:text-foreground group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-1.5 py-0.5 text-sm font-medium whitespace-nowrap text-foreground/60 transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 has-data-[icon=inline-end]:pr-1 has-data-[icon=inline-start]:pl-1 aria-disabled:pointer-events-none aria-disabled:opacity-50 dark:text-muted-foreground dark:hover:text-foreground group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         "group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent",
         "data-active:bg-background data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 dark:data-active:text-foreground",
-        "after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-horizontal/tabs:after:inset-x-0 group-data-horizontal/tabs:after:bottom-[-5px] group-data-horizontal/tabs:after:h-0.5 group-data-vertical/tabs:after:inset-y-0 group-data-vertical/tabs:after:-right-1 group-data-vertical/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100",
+        "after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=vertical]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100",
         className
       )}
       {...props}