From 1a142e68a9e7059351b92c6b210b03f54ad519bf Mon Sep 17 00:00:00 2001
From: Denozordec <shatskiy.blog@gmail.com>
Date: Thu, 9 Jul 2026 21:15:04 +0700
Subject: [PATCH] refactor: update Dashboard components for improved layout and
 integration

Refactored the DashboardQuickLinkCard to enhance its structure and presentation by integrating FramePanel. Updated the DashboardQuickLinks component to utilize Frame for better organization, including a header and description. Removed the previous DashboardFramePanel integration in the DashboardComponent to streamline the layout, ensuring a more cohesive user experience.
---
 .cursor/debug-c10bcb.log                      |  2 +
 .../dashboard/dashboard-quick-link-card.tsx   | 78 +++++++++----------
 .../dashboard/dashboard-quick-links.tsx       | 16 +++-
 apps/web/src/routes/_auth/dashboard.tsx       | 10 +--
 4 files changed, 55 insertions(+), 51 deletions(-)

diff --git a/.cursor/debug-c10bcb.log b/.cursor/debug-c10bcb.log
index 13f4130..f48d5db 100644
--- a/.cursor/debug-c10bcb.log
+++ b/.cursor/debug-c10bcb.log
@@ -12,3 +12,5 @@
 {"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":1783605819320}
 {"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":1783605827145}
 {"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":1783605864391}
+{"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":1783606471768}
+{"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":1783606472923}
diff --git a/apps/web/src/components/dashboard/dashboard-quick-link-card.tsx b/apps/web/src/components/dashboard/dashboard-quick-link-card.tsx
index 1d4149f..a4bb57e 100644
--- a/apps/web/src/components/dashboard/dashboard-quick-link-card.tsx
+++ b/apps/web/src/components/dashboard/dashboard-quick-link-card.tsx
@@ -2,8 +2,8 @@ import { Link } from '@tanstack/react-router'
 import { ChevronRight } from 'lucide-react'
 import type { ReactNode } from 'react'
 
-import { Frame, FramePanel } from '@/components/reui/frame'
 import { CardDotField } from '@/components/dashboard/card-dot-field'
+import { FramePanel } from '@/components/reui/frame'
 import { cn } from '@evobgp/ui/lib/utils'
 import { Item, ItemMedia } from '@evobgp/ui/components/item'
 
@@ -25,46 +25,44 @@ export function DashboardQuickLinkCard({
   iconClass,
 }: QuickLinkCardProps) {
   return (
-    <Frame className="h-full">
-      <Link
-        to={to}
-        search={search}
-        className="group block h-full rounded-[inherit] focus-visible:outline-none"
-        aria-label={`${label}: ${description}`}
+    <Link
+      to={to}
+      search={search}
+      className="group block h-full rounded-[inherit] focus-visible:outline-none"
+      aria-label={`${label}: ${description}`}
+    >
+      <FramePanel
+        className={cn(
+          'relative isolate h-full overflow-hidden transition-colors',
+          'hover:border-foreground/20',
+          'group-focus-visible:ring-2 group-focus-visible:ring-ring group-focus-visible:ring-offset-2 group-focus-visible:ring-offset-background',
+        )}
       >
-        <FramePanel
-          className={cn(
-            'relative isolate h-full overflow-hidden transition-colors',
-            'hover:border-foreground/20',
-            'group-focus-visible:ring-2 group-focus-visible:ring-ring group-focus-visible:ring-offset-2 group-focus-visible:ring-offset-background',
-          )}
-        >
-          <CardDotField className="text-muted-foreground [mask-image:linear-gradient(to_bottom_left,black,transparent_60%)]" />
-          <div className="relative z-10 flex h-full flex-col gap-7.5">
-            <Item
-              className={cn(
-                'border-background flex size-11 shrink-0 items-center justify-center border-2 p-0 shadow-[0_1px_3px_0_rgba(0,0,0,0.14)] dark:border [&_svg]:size-5',
-                iconClass,
-              )}
-            >
-              <ItemMedia variant="icon" className="size-auto">
-                {icon}
-              </ItemMedia>
-            </Item>
-            <div className="mt-auto flex flex-col gap-3">
-              <span className="text-foreground block text-sm leading-tight font-medium">{label}</span>
-              <p className="text-muted-foreground text-xs leading-relaxed">{description}</p>
-              <span className="text-primary inline-flex items-center gap-1 text-xs font-medium underline-offset-2 group-hover:underline">
-                Перейти
-                <ChevronRight
-                  aria-hidden
-                  className="size-2.5 shrink-0 transition-transform group-hover:translate-x-0.5"
-                />
-              </span>
-            </div>
+        <CardDotField className="text-muted-foreground [mask-image:linear-gradient(to_bottom_left,black,transparent_60%)]" />
+        <div className="relative z-10 flex h-full flex-col gap-7.5">
+          <Item
+            className={cn(
+              'border-background flex size-11 shrink-0 items-center justify-center border-2 p-0 shadow-[0_1px_3px_0_rgba(0,0,0,0.14)] dark:border [&_svg]:size-5',
+              iconClass,
+            )}
+          >
+            <ItemMedia variant="icon" className="size-auto">
+              {icon}
+            </ItemMedia>
+          </Item>
+          <div className="mt-auto flex flex-col gap-3">
+            <span className="text-foreground block text-sm leading-tight font-medium">{label}</span>
+            <p className="text-muted-foreground text-xs leading-relaxed">{description}</p>
+            <span className="text-primary inline-flex items-center gap-1 text-xs font-medium underline-offset-2 group-hover:underline">
+              Перейти
+              <ChevronRight
+                aria-hidden
+                className="size-2.5 shrink-0 transition-transform group-hover:translate-x-0.5"
+              />
+            </span>
           </div>
-        </FramePanel>
-      </Link>
-    </Frame>
+        </div>
+      </FramePanel>
+    </Link>
   )
 }
diff --git a/apps/web/src/components/dashboard/dashboard-quick-links.tsx b/apps/web/src/components/dashboard/dashboard-quick-links.tsx
index 8ddc7bc..ae6eb61 100644
--- a/apps/web/src/components/dashboard/dashboard-quick-links.tsx
+++ b/apps/web/src/components/dashboard/dashboard-quick-links.tsx
@@ -2,6 +2,12 @@ import { Gauge, Network, Play, Plus, Share2, Tags } from 'lucide-react'
 import type { ReactNode } from 'react'
 
 import { DashboardQuickLinkCard } from '@/components/dashboard/dashboard-quick-link-card'
+import {
+  Frame,
+  FrameDescription,
+  FrameHeader,
+  FrameTitle,
+} from '@/components/reui/frame'
 
 type QuickLink = {
   icon: ReactNode
@@ -63,12 +69,16 @@ const LINKS: QuickLink[] = [
 
 export function DashboardQuickLinks() {
   return (
-    <div className="@container w-full">
-      <div className="grid gap-3 sm:grid-cols-2 @2xl:grid-cols-3">
+    <Frame className="@container w-full">
+      <FrameHeader>
+        <FrameTitle>Быстрые действия</FrameTitle>
+        <FrameDescription>Частые переходы к настройке и деплою</FrameDescription>
+      </FrameHeader>
+      <div className="grid gap-1 sm:grid-cols-2 xl:grid-cols-3">
         {LINKS.map((link) => (
           <DashboardQuickLinkCard key={link.label} {...link} />
         ))}
       </div>
-    </div>
+    </Frame>
   )
 }
diff --git a/apps/web/src/routes/_auth/dashboard.tsx b/apps/web/src/routes/_auth/dashboard.tsx
index b517788..5dfc8b3 100644
--- a/apps/web/src/routes/_auth/dashboard.tsx
+++ b/apps/web/src/routes/_auth/dashboard.tsx
@@ -85,6 +85,8 @@ function DashboardComponent() {
         }
       />
 
+      <DashboardQuickLinks />
+
       {initialLoading ? (
         <AnalyticsDashboardSkeleton />
       ) : (
@@ -142,14 +144,6 @@ function DashboardComponent() {
           )}
         </DashboardFramePanel>
       </div>
-
-      <DashboardFramePanel
-        title="Быстрые действия"
-        description="Частые переходы к настройке и деплою"
-        contentClassName="p-4"
-      >
-        <DashboardQuickLinks />
-      </DashboardFramePanel>
     </div>
   )
 }