lee/pentagi
1
0
Fork 0
mirror of https://github.com/vxcontrol/pentagi.git synced 2026-08-23 11:36:29 +00:00
Code Issues Packages Projects Releases Wiki Activity

style(frontend): use Badge for sheet header counters

Browse Source 
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>
This commit is contained in:
Sergey Kozyrenko
2026-05-16 10:50:39 +07:00
co-authored by Claude Opus 4.7
parent 8fc8f63a75
commit 8dbee4fb64
2 changed files with 18 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/shared/detail-navigation/detail-navigation-sheet.tsx
+7 -1
View File
@@ -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 ? (
frontend/src/pages/templates/template.tsx
+11 -4
View File
@@ -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>