From 8dbee4fb64986d340bf6997a6d010e86fc913fb8 Mon Sep 17 00:00:00 2001
From: Sergey Kozyrenko <sirozha_blr@tut.by>
Date: Sat, 16 May 2026 10:50:39 +0700
Subject: [PATCH] style(frontend): use Badge for sheet header counters
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Plain spans with `text-muted-foreground text-sm tabular-nums` rendered as
loose text floating in the header — visually weak and easy to miss. Wrap
each counter in a `<Badge variant="secondary">` so it reads as a discrete
pill (matches the rest of the design language, e.g. doc-type badges in
the knowledges list).

Touches three locations that all share the icon + title + counter
header pattern:
- `pages/templates/template.tsx`: Preset-templates mobile Sheet header
- `pages/templates/template.tsx`: Preset-templates desktop aside header
- `components/shared/detail-navigation/detail-navigation-sheet.tsx`:
  detail-navigation sheet header (Flows / Templates / Knowledges count)

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../detail-navigation/detail-navigation-sheet.tsx |  8 +++++++-
 frontend/src/pages/templates/template.tsx         | 15 +++++++++++----
 2 files changed, 18 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/shared/detail-navigation/detail-navigation-sheet.tsx b/frontend/src/components/shared/detail-navigation/detail-navigation-sheet.tsx
index e5a95040..9eb54a56 100644
--- a/frontend/src/components/shared/detail-navigation/detail-navigation-sheet.tsx
+++ b/frontend/src/components/shared/detail-navigation/detail-navigation-sheet.tsx
@@ -1,5 +1,6 @@
 import { type KeyboardEvent, type ReactNode, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
+import { Badge } from '@/components/ui/badge';
 import { ScrollArea } from '@/components/ui/scroll-area';
 import { Sheet, SheetContent, SheetHeader, SheetTitle } from '@/components/ui/sheet';
 import { cn } from '@/lib/utils';
@@ -252,7 +253,12 @@ export function DetailNavigationSheet<T>({
                     <SheetTitle className="flex items-center gap-2 pr-8 text-base">
                         {sheetIcon}
                         <span>{sheetTitle}</span>
-                        <span className="text-muted-foreground ml-auto text-sm font-normal tabular-nums">{total}</span>
+                        <Badge
+                            className="ml-auto font-normal tabular-nums"
+                            variant="secondary"
+                        >
+                            {total}
+                        </Badge>
                     </SheetTitle>
                 </SheetHeader>
                 {hasEntries ? (
diff --git a/frontend/src/pages/templates/template.tsx b/frontend/src/pages/templates/template.tsx
index 6da70c5a..676f7725 100644
--- a/frontend/src/pages/templates/template.tsx
+++ b/frontend/src/pages/templates/template.tsx
@@ -22,6 +22,7 @@ import { z } from 'zod';
 import ConfirmationDialog from '@/components/shared/confirmation-dialog';
 import { DetailNavigationSheet, DetailNavigationToolbar, useNavigation } from '@/components/shared/detail-navigation';
 import { InlineEditInput, useInlineEdit } from '@/components/shared/inline-edit';
+import { Badge } from '@/components/ui/badge';
 import { Breadcrumb, BreadcrumbItem, BreadcrumbList, BreadcrumbPage } from '@/components/ui/breadcrumb';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent } from '@/components/ui/card';
@@ -680,9 +681,12 @@ const Template = () => {
                             <SheetTitle className="flex items-center gap-2 pr-8 text-base">
                                 <FileText className="size-4" />
                                 <span>Preset templates</span>
-                                <span className="text-muted-foreground ml-auto text-sm font-normal tabular-nums">
+                                <Badge
+                                    className="ml-auto font-normal tabular-nums"
+                                    variant="secondary"
+                                >
                                     {PRESET_TEMPLATES.length}
-                                </span>
+                                </Badge>
                             </SheetTitle>
                         </SheetHeader>
                         {/* Plain overflow-y-auto instead of Radix ScrollArea —
@@ -707,9 +711,12 @@ const Template = () => {
                                 <h3 className="flex items-center gap-2 text-base font-semibold">
                                     <FileText className="size-4" />
                                     <span>Preset templates</span>
-                                    <span className="text-muted-foreground ml-auto text-sm font-normal tabular-nums">
+                                    <Badge
+                                        className="ml-auto font-normal tabular-nums"
+                                        variant="secondary"
+                                    >
                                         {PRESET_TEMPLATES.length}
-                                    </span>
+                                    </Badge>
                                 </h3>
                             </div>
                             <div className="min-w-0 flex-1 overflow-y-auto">{asideContent}</div>