feat(web): деталь списка и набора правил по доскам макета

Заголовок деталей — как на досках (20px, действия справа), полоса показателей списка дополнена «Обновлён».

Co-Authored-By: Claude Sonnet 5.5 <[email protected]>

apps/web/src/components/reui-kit/detail-panel.tsx

@@ -1,11 +1,4 @@
 import type { ReactNode } from 'react'
-import {
-  Frame,
-  FrameDescription,
-  FrameHeader,
-  FramePanel,
-  FrameTitle,
-} from '@/components/reui/frame'
 import {
   KpiStatGrid,
   type KpiStatCard,
@@ -33,7 +26,7 @@ interface DetailPanelProps {
 
 function DetailPanelRoot({ children, className }: DetailPanelProps) {
   return (
-    <div className={cn('flex flex-col gap-4 md:gap-6', className)}>
+    <div className={cn('flex flex-col gap-5', className)}>
       {children}
     </div>
   )
@@ -53,24 +46,16 @@ function DetailPanelHeader({
   children,
 }: DetailPanelHeaderProps) {
   return (
-    <Frame dense spacing="sm" className="w-full">
-      <FrameHeader className="flex-row items-start justify-between gap-3">
-        <div className="flex min-w-0 flex-1 flex-col gap-px">
-          <FrameTitle>{title}</FrameTitle>
-          {description ? (
-            <FrameDescription>{description}</FrameDescription>
-          ) : null}
+    <>
+      <header className="flex min-w-0 flex-wrap items-end justify-between gap-3">
+        <div className="flex min-w-0 flex-col gap-0.5">
+          <h1 className="text-xl font-semibold tracking-[-0.01em]">{title}</h1>
+          {description ? <p className="text-muted-foreground text-sm text-pretty">{description}</p> : null}
         </div>
-        {actions ? (
-          <div className="flex shrink-0 flex-wrap items-center justify-end gap-2">
-            {actions}
-          </div>
-        ) : null}
-      </FrameHeader>
-      {children ? (
-        <FramePanel className="flex flex-col gap-4">{children}</FramePanel>
-      ) : null}
-    </Frame>
+        {actions ? <div className="flex shrink-0 flex-wrap items-center justify-end gap-2">{actions}</div> : null}
+      </header>
+      {children}
+    </>
   )
 }
 

apps/web/src/routes/_auth/lists/$id.tsx

@@ -4,11 +4,13 @@ import { toast } from 'sonner'
 import {
   ArrowLeftIcon,
   CircleAlertIcon,
+  ClockIcon,
   HashIcon,
   RefreshCwIcon,
   TagIcon,
   Trash2,
 } from 'lucide-react'
+import { formatDateTime, formatRelativeTime } from '@/lib/format'
 import { useCallback, useMemo, useState } from 'react'
 import type { ColumnDef } from '@tanstack/react-table'
 import type { Filter, FilterFieldConfig } from '@/components/reui/filters'
@@ -471,6 +473,14 @@ function ListDetailPage() {
               ),
               hint: 'materialized',
             },
+            {
+              id: 'updated',
+              icon: <ClockIcon aria-hidden />,
+              iconClassName: 'text-muted-foreground',
+              label: 'Обновлён',
+              description: formatRelativeTime(detail.refreshed_at ?? detail.updated_at),
+              hint: formatDateTime(detail.refreshed_at ?? detail.updated_at),
+            },
           ]}
         />