refactor(fe): DRY components, hooks, a11y fixes, and WS/client improvements
- Extract StatusBadge, SummaryList, ProfileDetail shared components (~300 lines deduplicated) - Extract usePaginatedList<T>, useItemDetail<T> generic hooks (~170 lines deduplicated) - Fix a11y: Badge (role=status, dark variants), Button (aria-disabled, motion-safe), Input (aria-invalid, errorId), Select (error variant), Skeleton (aria-hidden), MobileTabBar (full tab ARIA), Toast (timer leak fix, role=alert, keyboard dismiss), Card (role=region) - Fix API client: buildSearchParams helper, request timeout, password caching, named types - Fix WS: typed 24 event payloads (was all unknown), exponential backoff reconnect, max 20 attempts, msg.data guard - Fix bug: listDashboardChannels cursor pagination was silently dropped - Remove duplicate shimmer keyframes from tailwind.config.js - Fix WaveformPlayer non-null assertion Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -10,6 +10,7 @@ import {
|
||||
Users,
|
||||
} from "lucide-react";
|
||||
import { cardItem, cardStagger } from "../../../shared/hooks/useFramerStagger";
|
||||
import { useUIState } from "../../../shared/hooks/useUIState";
|
||||
import { cn } from "../../../shared/lib/utils";
|
||||
import {
|
||||
Card,
|
||||
@@ -20,7 +21,6 @@ import {
|
||||
StatusBadge,
|
||||
} from "../../../shared/ui";
|
||||
import { useDashboardStats } from "../hooks/useDashboard";
|
||||
import { useUIState } from "../../../shared/hooks/useUIState";
|
||||
|
||||
export function DashboardStatsContent() {
|
||||
const { stats, loading, error, refetch } = useDashboardStats();
|
||||
@@ -129,7 +129,11 @@ export function DashboardStatsContent() {
|
||||
{cards.map((card) => (
|
||||
<Card
|
||||
key={card.title}
|
||||
className={cn("overflow-hidden", card.onClick && "cursor-pointer transition-colors hover:bg-accent/50")}
|
||||
className={cn(
|
||||
"overflow-hidden",
|
||||
card.onClick &&
|
||||
"cursor-pointer transition-colors hover:bg-accent/50",
|
||||
)}
|
||||
onClick={card.onClick}
|
||||
>
|
||||
<CardContent className="p-4">
|
||||
|
||||
Reference in New Issue
Block a user