04c212da92
Complete frontend design overhaul replacing achromatic shadcn/ui defaults with an indigo-branded (#6366F1), status-aware, dark-mode-enabled token system. Phase 1 — Theme Foundation: - Replace all CSS tokens in index.css with v2 light/dark mode values - Add 24 status tokens (6 statuses × 4 variants), 22 terminal tokens, 7 diff tokens, 5 shadow tokens, 9 transition/animation tokens, 10 z-index tokens, 10-step extended indigo scale - Install Geist Sans/Mono variable fonts (public/fonts/) - Extend tailwind.config.ts with all new token utilities - Add dark mode flash-prevention script in index.html - Add status-pulse and shimmer keyframe animations - Add global focus-visible styles and reduced-motion media query Phase 2 — ThemeProvider + Toggle: - ThemeProvider context with system preference listener - 3-state ThemeToggle (Sun/Monitor/Moon) - Radix tooltip primitive for tooltips - localStorage persistence with 'cw-theme' key Phase 3 — Shared Components + Token Migration: - StatusDot: mapEntityStatus() maps raw statuses to 6 semantic variants - StatusBadge: uses status token bg/fg/border classes - Badge: 6 new status variants + xs size - EmptyState, ErrorState, SaveIndicator shared patterns - CommandPalette: Cmd+K search with fuzzy matching, keyboard nav - Skeleton with shimmer animation + SkeletonCard composite layouts - KeyboardShortcutHint, NavBadge, enhanced Sonner config - Migrate ALL hardcoded Tailwind colors to token classes across AgentOutputViewer, review/*, ProgressBar, AccountCard, InitiativeHeader, DependencyIndicator, PipelineTaskCard, PreviewPanel, ChangeSetBanner, MessageCard, PhaseDetailPanel Phase 4 — App Layout Overhaul: - Single 48px row header with CW logo, nav with NavBadge counts, Cmd+K search button, ThemeToggle, HealthDot - Remove max-w-7xl from header/main; pages control own widths - ConnectionBanner for offline/reconnecting states - BrowserTitleUpdater with running/questions counts - useGlobalKeyboard (1-4 nav, Cmd+K), useConnectionStatus hooks - Per-page width wrappers (initiatives max-w-6xl, settings max-w-4xl) Phase 5 — Page-Level Token Migration: - ReviewSidebar: all hardcoded green/orange/red → status/diff tokens - CommentThread: resolved state → status-success tokens - Settings health: green → status-success-dot
72 lines
2.5 KiB
TypeScript
72 lines
2.5 KiB
TypeScript
import { Skeleton } from "./Skeleton";
|
|
import { Card, CardContent } from "@/components/ui/card";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
type Layout = "agent-card" | "initiative-card" | "conversation-card" | "project-card" | "account-card";
|
|
|
|
interface SkeletonCardProps {
|
|
layout?: Layout;
|
|
className?: string;
|
|
}
|
|
|
|
export function SkeletonCard({ layout = "initiative-card", className }: SkeletonCardProps) {
|
|
return (
|
|
<Card className={cn("overflow-hidden", className)}>
|
|
<CardContent className="p-4">
|
|
{layout === "agent-card" && (
|
|
<div className="space-y-3">
|
|
<div className="flex items-center gap-2">
|
|
<Skeleton variant="circle" className="h-2 w-2" />
|
|
<Skeleton className="h-4 w-28" />
|
|
<Skeleton className="ml-auto h-5 w-14 rounded-full" />
|
|
</div>
|
|
<Skeleton className="h-3 w-40" />
|
|
</div>
|
|
)}
|
|
{layout === "initiative-card" && (
|
|
<div className="space-y-3">
|
|
<div className="flex items-center gap-2">
|
|
<Skeleton className="h-5 w-40" />
|
|
<Skeleton className="h-5 w-16 rounded-full" />
|
|
</div>
|
|
<Skeleton className="h-3 w-56" />
|
|
<Skeleton className="h-2 w-full rounded-full" />
|
|
</div>
|
|
)}
|
|
{layout === "conversation-card" && (
|
|
<div className="space-y-3">
|
|
<div className="flex items-center gap-2">
|
|
<Skeleton variant="circle" className="h-6 w-6" />
|
|
<Skeleton className="h-4 w-32" />
|
|
<Skeleton className="ml-auto h-3 w-16" />
|
|
</div>
|
|
<Skeleton className="h-3 w-full" />
|
|
<Skeleton className="h-3 w-3/4" />
|
|
</div>
|
|
)}
|
|
{layout === "project-card" && (
|
|
<div className="space-y-2">
|
|
<Skeleton className="h-4 w-28" />
|
|
<Skeleton className="h-3 w-48" />
|
|
</div>
|
|
)}
|
|
{layout === "account-card" && (
|
|
<div className="space-y-3">
|
|
<div className="flex items-center gap-3">
|
|
<Skeleton variant="circle" className="h-5 w-5" />
|
|
<div className="flex-1 space-y-2">
|
|
<Skeleton className="h-4 w-40" />
|
|
<Skeleton className="h-3 w-28" />
|
|
</div>
|
|
</div>
|
|
<div className="space-y-1.5 pl-8">
|
|
<Skeleton className="h-2 w-full rounded-full" />
|
|
<Skeleton className="h-2 w-3/4 rounded-full" />
|
|
</div>
|
|
</div>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|