tiennm99/ccs
1
0
Fork 0
mirror of https://github.com/tiennm99/ccs.git synced 2026-07-16 02:11:28 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(ui): redesign updates page as changelog-first layout

Browse Source 
- shift /updates from support-matrix-heavy view to compact announcement workflow

- reduce top section footprint and align structure with existing dashboard pages

- enforce internal panel scrolling while keeping outer page frame fixed
This commit is contained in:
Tam Nhu Tran
2026-02-25 18:21:50 +07:00
parent d47efc783e
commit 473644564d
1 changed files with 150 additions and 145 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ui/src/pages/updates.tsx
+150 -145
View File
@@ -1,12 +1,12 @@
import { useMemo, useState } from 'react';
import { Link } from 'react-router-dom';
import { BellRing, ChevronRight, Filter, Megaphone, Search } from 'lucide-react';
import { CalendarClock, ChevronRight, Filter, Megaphone, Search, Sparkles } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Input } from '@/components/ui/input';
import { ScrollArea } from '@/components/ui/scroll-area';
import { cn } from '@/lib/utils';
import { SupportEntryCard } from '@/components/updates/support-entry-card';
import { SupportStatusBadge } from '@/components/updates/support-status-badge';
import {
CLI_SUPPORT_ENTRIES,
@@ -27,24 +27,6 @@ const SCOPE_FILTERS: { id: ScopeFilter; label: string }[] = [
{ id: 'websearch', label: SUPPORT_SCOPE_LABELS.websearch },
];
const CORE_CONTRACT = [
{
id: 'base-url',
title: 'Base URL',
detail: 'Source endpoint is explicit per target/provider/profile.',
},
{
id: 'auth',
title: 'Auth',
detail: 'OAuth or token ownership is visible in one support matrix.',
},
{
id: 'model',
title: 'Model',
detail: 'Default model behavior stays configurable and documented.',
},
] as const;
function NoticeListItem({
notice,
isSelected,
@@ -59,29 +41,20 @@ function NoticeListItem({
type="button"
onClick={onSelect}
className={cn(
'w-full rounded-lg border px-3 py-2.5 text-left transition-colors',
'w-full rounded-lg border px-3 py-2 text-left transition-colors',
isSelected
? 'border-primary/20 bg-primary/10'
: 'border-transparent hover:border-border hover:bg-muted/70'
)}
>
<div className="flex items-start gap-2">
<div className="min-w-0 flex-1 space-y-1">
<div className="min-w-0 flex-1">
<p className="truncate text-sm font-medium">{notice.title}</p>
<p className="text-xs text-muted-foreground">{notice.summary}</p>
<div className="flex items-center gap-2">
<SupportStatusBadge status={notice.status} className="h-5 px-1.5 text-[10px]" />
<span className="text-[10px] text-muted-foreground">
{formatCatalogDate(notice.publishedAt)}
</span>
</div>
<p className="mt-0.5 text-[11px] text-muted-foreground">
{formatCatalogDate(notice.publishedAt)}
</p>
</div>
<ChevronRight
className={cn(
'mt-0.5 h-4 w-4 shrink-0 text-muted-foreground',
isSelected && 'text-primary'
)}
/>
<ChevronRight className={cn('mt-0.5 h-4 w-4 shrink-0 text-muted-foreground')} />
</div>
</button>
);
@@ -125,33 +98,23 @@ export function UpdatesPage() {
});
}, [scope, query]);
const scopeStats = useMemo(
() =>
SCOPE_FILTERS.filter((filter) => filter.id !== 'all').map((filter) => ({
id: filter.id,
label: filter.label,
count: CLI_SUPPORT_ENTRIES.filter((entry) => entry.scope === filter.id).length,
})),
[]
);
return (
<div className="h-[calc(100vh-100px)] flex">
<div className="w-80 border-r bg-muted/30 flex flex-col">
<div className="h-[calc(100vh-100px)] flex overflow-hidden">
<div className="w-80 border-r bg-muted/30 flex flex-col overflow-hidden">
<div className="p-4 border-b bg-background">
<div className="mb-1 flex items-center gap-2">
<Megaphone className="w-5 h-5 text-primary" />
<h1 className="font-semibold">Updates Center</h1>
<h1 className="font-semibold">Updates</h1>
</div>
<p className="mb-3 text-xs text-muted-foreground">
Release visibility for target, provider, and support rollouts.
Product announcements and release notes.
</p>
<div className="relative">
<Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
<Input
value={query}
onChange={(event) => setQuery(event.target.value)}
placeholder="Search support matrix"
placeholder="Search updates or integrations"
className="pl-8 h-9"
/>
</div>
@@ -176,67 +139,39 @@ export function UpdatesPage() {
{SUPPORT_NOTICES.length} notice{SUPPORT_NOTICES.length !== 1 ? 's' : ''}
</span>
<span>
{CLI_SUPPORT_ENTRIES.length} support entr
{CLI_SUPPORT_ENTRIES.length !== 1 ? 'ies' : 'y'}
{filteredEntries.length} result{filteredEntries.length !== 1 ? 's' : ''}
</span>
</div>
</div>
</div>
<div className="flex-1 min-w-0 bg-background flex flex-col">
<div className="flex-1 min-w-0 bg-background grid grid-rows-[auto_minmax(0,1fr)] overflow-hidden">
{selectedNotice && (
<div className="border-b bg-background p-4 space-y-3">
<div className="border-b bg-background px-4 py-3">
<div className="flex items-start justify-between gap-3">
<div className="min-w-0">
<h2 className="text-lg font-semibold">{selectedNotice.title}</h2>
<p className="text-sm text-muted-foreground">{selectedNotice.summary}</p>
<h2 className="text-base font-semibold leading-tight">{selectedNotice.title}</h2>
<p className="mt-1 text-sm text-muted-foreground">{selectedNotice.summary}</p>
</div>
<SupportStatusBadge status={selectedNotice.status} />
</div>
<div className="flex items-center gap-2 text-xs text-muted-foreground">
<BellRing className="h-3.5 w-3.5" />
Published {formatCatalogDate(selectedNotice.publishedAt)}
</div>
<ul className="grid gap-1 text-sm text-muted-foreground">
{selectedNotice.highlights.map((highlight) => (
<li key={`${selectedNotice.id}-${highlight}`}>- {highlight}</li>
))}
</ul>
<div className="flex flex-wrap gap-2">
{selectedNotice.routes.map((route) => (
<Link
key={`${selectedNotice.id}-${route.path}`}
to={route.path}
className="rounded-md border px-2 py-1 text-xs hover:bg-muted"
>
{route.label}
</Link>
))}
</div>
<div className="grid gap-2 lg:grid-cols-3">
{selectedNotice.commands.map((command) => (
<code
key={`${selectedNotice.id}-${command}`}
className="rounded bg-muted px-2 py-1.5 text-[11px]"
>
{command}
</code>
))}
<div className="mt-2 flex flex-wrap items-center gap-2 text-xs text-muted-foreground">
<CalendarClock className="h-3.5 w-3.5" />
<span>Published {formatCatalogDate(selectedNotice.publishedAt)}</span>
</div>
</div>
)}
<div className="flex-1 min-h-0 p-4">
<div className="h-full grid gap-4 xl:grid-cols-[minmax(0,2fr)_minmax(0,1fr)]">
<Card className="h-full gap-3">
<div className="min-h-0 p-4">
<div className="grid h-full gap-4 xl:grid-cols-[minmax(0,1.7fr)_minmax(320px,1fr)] overflow-hidden">
<Card className="h-full gap-3 overflow-hidden">
<CardHeader className="gap-2">
<CardTitle className="text-base">Support Matrix</CardTitle>
<div className="flex items-center gap-2">
<Sparkles className="h-4 w-4 text-primary" />
<CardTitle className="text-base">Release Details</CardTitle>
</div>
<CardDescription>
Filter by support area. Internal scroll keeps the page frame stable.
Changelog-first view with impacted integrations and quick commands.
</CardDescription>
</CardHeader>
@@ -245,7 +180,7 @@ export function UpdatesPage() {
<div className="flex flex-wrap items-center gap-2">
<span className="inline-flex items-center gap-1 text-xs text-muted-foreground">
<Filter className="h-3.5 w-3.5" />
Scope:
Filter:
</span>
{SCOPE_FILTERS.map((filter) => (
<Button
@@ -258,71 +193,141 @@ export function UpdatesPage() {
</Button>
))}
<span className="ml-auto text-xs text-muted-foreground">
{filteredEntries.length} match
{filteredEntries.length} integration{filteredEntries.length !== 1 ? 's' : ''}
</span>
</div>
<div className="flex-1 min-h-0">
<ScrollArea className="h-full pr-2">
{filteredEntries.length === 0 ? (
<div className="h-full grid place-items-center text-sm text-muted-foreground">
No support entries match this filter.
</div>
) : (
<div className="grid gap-4 pb-1">
{filteredEntries.map((entry) => (
<SupportEntryCard key={entry.id} entry={entry} />
<ScrollArea className="flex-1 min-h-0 pr-2">
<div className="space-y-4 pb-1">
<section className="space-y-2">
<h3 className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
What Changed
</h3>
<ul className="space-y-1 text-sm text-muted-foreground">
{selectedNotice?.highlights.map((highlight) => (
<li key={`${selectedNotice.id}-${highlight}`}>- {highlight}</li>
))}
</ul>
</section>
<section className="space-y-2">
<h3 className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
Dashboard Entry Points
</h3>
<div className="flex flex-wrap gap-2">
{selectedNotice?.routes.map((route) => (
<Link
key={`${selectedNotice.id}-${route.path}`}
to={route.path}
className="rounded-md border px-2 py-1 text-xs hover:bg-muted"
>
{route.label}
</Link>
))}
</div>
)}
</ScrollArea>
</div>
</section>
<section className="space-y-2">
<h3 className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
Quick Commands
</h3>
<div className="grid gap-2 lg:grid-cols-2">
{selectedNotice?.commands.map((command) => (
<code
key={`${selectedNotice.id}-${command}`}
className="rounded bg-muted px-2 py-1.5 text-[11px]"
>
{command}
</code>
))}
</div>
</section>
<section className="space-y-2">
<h3 className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
Impacted Integrations
</h3>
{filteredEntries.length === 0 ? (
<div className="rounded-md border border-dashed p-3 text-sm text-muted-foreground">
No integration entries match your current filter.
</div>
) : (
<div className="space-y-2">
{filteredEntries.map((entry) => (
<div key={entry.id} className="rounded-md border bg-muted/20 p-3">
<div className="flex items-start justify-between gap-2">
<div className="min-w-0">
<p className="text-sm font-medium truncate">{entry.name}</p>
<p className="text-xs text-muted-foreground">{entry.summary}</p>
</div>
<SupportStatusBadge
status={entry.status}
className="h-5 px-1.5 text-[10px]"
/>
</div>
<div className="mt-2 flex flex-wrap items-center gap-1.5">
<Badge variant="outline" className="text-[10px] h-5 px-1.5">
{SUPPORT_SCOPE_LABELS[entry.scope]}
</Badge>
{entry.routes.map((route) => (
<Link
key={`${entry.id}-${route.path}`}
to={route.path}
className="rounded-md border px-1.5 py-0.5 text-[10px] text-muted-foreground hover:bg-muted"
>
{route.label}
</Link>
))}
</div>
<code className="mt-2 block rounded bg-muted px-2 py-1 text-[11px]">
{entry.commands[0]}
</code>
</div>
))}
</div>
)}
</section>
</div>
</ScrollArea>
</div>
</CardContent>
</Card>
<Card className="h-full gap-3">
<Card className="h-full gap-3 overflow-hidden">
<CardHeader className="gap-2">
<CardTitle className="text-base">Config Contract</CardTitle>
<CardDescription>
Every new CLI integration follows the same three configuration pillars.
</CardDescription>
<CardTitle className="text-base">Announcement Timeline</CardTitle>
<CardDescription>Recent notices in chronological order.</CardDescription>
</CardHeader>
<CardContent className="flex-1 min-h-0">
<ScrollArea className="h-full pr-2">
<div className="space-y-4 pb-1">
<div className="grid gap-2">
{CORE_CONTRACT.map((item) => (
<div key={item.id} className="rounded-md border bg-muted/30 p-3">
<p className="text-xs uppercase tracking-wide text-muted-foreground">
{item.title}
</p>
<p className="text-sm font-medium">{item.detail}</p>
<div className="space-y-2 pb-1">
{SUPPORT_NOTICES.map((notice) => (
<button
key={`timeline-${notice.id}`}
type="button"
onClick={() => setSelectedNoticeId(notice.id)}
className={cn(
'w-full rounded-md border p-3 text-left transition-colors',
selectedNotice?.id === notice.id
? 'border-primary/20 bg-primary/10'
: 'hover:bg-muted/70'
)}
>
<div className="flex items-center justify-between gap-2">
<p className="text-sm font-medium">{notice.title}</p>
<SupportStatusBadge
status={notice.status}
className="h-5 px-1.5 text-[10px]"
/>
</div>
))}
</div>
<p className="mt-1 text-xs text-muted-foreground">{notice.summary}</p>
<p className="mt-2 text-[11px] text-muted-foreground">
{formatCatalogDate(notice.publishedAt)}
</p>
</button>
))}
<div className="space-y-2">
<p className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
Coverage by Scope
</p>
<div className="grid gap-2">
{scopeStats.map((stat) => (
<div
key={stat.id}
className="flex items-center justify-between rounded-md border px-3 py-2 text-sm"
>
<span>{stat.label}</span>
<span className="font-mono text-xs text-muted-foreground">
{stat.count}
</span>
</div>
))}
</div>
</div>
<div className="rounded-md border border-dashed p-3 text-sm text-muted-foreground">
<div className="rounded-md border border-dashed p-3 text-xs text-muted-foreground">
Update source of truth:{' '}
<code className="rounded bg-muted px-1.5 py-0.5 text-[11px]">
ui/src/lib/support-updates-catalog.ts