Revert "feat: migrate frontend to Astro SSG with design system"
This reverts commit 8ad888da28.
This commit is contained in:
asepharyana
@@ -0,0 +1,442 @@
|
||||
import { AnimatePresence, motion } from "framer-motion";
|
||||
import {
|
||||
Command,
|
||||
FileText,
|
||||
HelpCircle,
|
||||
MessageSquare,
|
||||
Moon,
|
||||
Search,
|
||||
Settings,
|
||||
Sun,
|
||||
Volume2,
|
||||
X,
|
||||
} from "lucide-react";
|
||||
import type { KeyboardEvent } from "react";
|
||||
import {
|
||||
useCallback,
|
||||
useEffect,
|
||||
useRef,
|
||||
useState,
|
||||
type ChangeEvent,
|
||||
} from "react";
|
||||
import type { MessageRecord } from "../api/client";
|
||||
import { request } from "../api/client";
|
||||
import { cn } from "../lib/utils";
|
||||
import { Input } from "./index";
|
||||
|
||||
/* ─── Modal backdrop variants ──────────────────────────────────────────── */
|
||||
|
||||
const backdropVariants = {
|
||||
hidden: { opacity: 0 },
|
||||
visible: { opacity: 1 },
|
||||
};
|
||||
|
||||
const modalVariants = {
|
||||
hidden: { opacity: 0, scale: 0.96, y: 20 },
|
||||
visible: {
|
||||
opacity: 1,
|
||||
scale: 1,
|
||||
y: 0,
|
||||
transition: { type: "spring" as const, stiffness: 350, damping: 28 },
|
||||
},
|
||||
exit: { opacity: 0, scale: 0.96, y: 10, transition: { duration: 0.15 } },
|
||||
} as const;
|
||||
|
||||
/* ─── Types ────────────────────────────────────────────────────────────── */
|
||||
|
||||
type ModalMode = "search" | "shortcuts" | null;
|
||||
|
||||
interface CommandPaletteProps {
|
||||
isOpen: boolean;
|
||||
mode: ModalMode;
|
||||
onClose: () => void;
|
||||
onNavigate: (tab: string) => void;
|
||||
onToggleTheme: () => void;
|
||||
isDark: boolean;
|
||||
}
|
||||
|
||||
const shortcuts = [
|
||||
{ keys: ["Ctrl", "K"], desc: "Open search" },
|
||||
{ keys: ["?"], desc: "Show keyboard shortcuts" },
|
||||
{ keys: ["Esc"], desc: "Close modal / cancel" },
|
||||
{ keys: ["Ctrl", "1"], desc: "Messages & Moderation" },
|
||||
{ keys: ["Ctrl", "2"], desc: "Voice & Media" },
|
||||
{ keys: ["Ctrl", "3"], desc: "Dashboard" },
|
||||
{ keys: ["Ctrl", "4"], desc: "Settings" },
|
||||
{ keys: ["Space"], desc: "Push-to-talk (when in voice)" },
|
||||
{ keys: ["T"], desc: "Toggle theme" },
|
||||
];
|
||||
|
||||
/* ─── Help panel ───────────────────────────────────────────────────────── */
|
||||
|
||||
function ShortcutsPanel() {
|
||||
return (
|
||||
<div className="space-y-3 p-4">
|
||||
<h3 className="text-sm font-semibold text-foreground flex items-center gap-2">
|
||||
<HelpCircle className="h-4 w-4 text-primary" />
|
||||
Keyboard Shortcuts
|
||||
</h3>
|
||||
<div className="grid gap-1.5">
|
||||
{shortcuts.map((s) => (
|
||||
<div
|
||||
key={s.keys.join("+")}
|
||||
className="flex items-center justify-between rounded-lg px-2 py-1.5 hover:bg-accent/50 transition-colors"
|
||||
>
|
||||
<span className="text-sm text-muted-foreground">{s.desc}</span>
|
||||
<kbd className="flex items-center gap-1">
|
||||
{s.keys.map((k) => (
|
||||
<span
|
||||
key={k}
|
||||
className="inline-flex h-6 min-w-[24px] items-center justify-center rounded-md border border-border bg-background px-1.5 text-xs font-mono text-foreground shadow-sm"
|
||||
>
|
||||
{k === "Ctrl" ? <Command className="h-3 w-3" /> : k}
|
||||
</span>
|
||||
))}
|
||||
</kbd>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/* ─── Quick actions ────────────────────────────────────────────────────── */
|
||||
|
||||
const quickActions = [
|
||||
{ id: "messages", label: "Go to Messages", icon: MessageSquare },
|
||||
{ id: "live", label: "Go to Voice & Media", icon: Volume2 },
|
||||
{ id: "dashboard", label: "Go to Dashboard", icon: FileText },
|
||||
{ id: "settings", label: "Open Settings", icon: Settings },
|
||||
{ id: "theme", label: "Toggle theme", icon: Sun },
|
||||
];
|
||||
|
||||
/* ─── Main component ───────────────────────────────────────────────────── */
|
||||
|
||||
export function CommandPalette({
|
||||
isOpen,
|
||||
mode,
|
||||
onClose,
|
||||
onNavigate,
|
||||
onToggleTheme,
|
||||
isDark,
|
||||
}: CommandPaletteProps) {
|
||||
const [query, setQuery] = useState("");
|
||||
const [searchResults, setSearchResults] = useState<MessageRecord[]>([]);
|
||||
const [isSearching, setIsSearching] = useState(false);
|
||||
const inputRef = useRef<HTMLInputElement>(null);
|
||||
const [activeIndex, setActiveIndex] = useState(0);
|
||||
|
||||
// Focus input when search mode opens
|
||||
useEffect(() => {
|
||||
if (isOpen && mode === "search") {
|
||||
// Small delay for the animation to settle
|
||||
const focusTimer = setTimeout(() => inputRef.current?.focus(), 50);
|
||||
return () => clearTimeout(focusTimer);
|
||||
}
|
||||
}, [isOpen, mode]);
|
||||
|
||||
// Reset state when closing
|
||||
useEffect(() => {
|
||||
if (!isOpen) {
|
||||
setQuery("");
|
||||
setSearchResults([]);
|
||||
setActiveIndex(0);
|
||||
}
|
||||
}, [isOpen]);
|
||||
|
||||
const handleSearch = useCallback(async (q: string) => {
|
||||
setQuery(q);
|
||||
if (!q.trim()) {
|
||||
setSearchResults([]);
|
||||
return;
|
||||
}
|
||||
setIsSearching(true);
|
||||
try {
|
||||
const params = new URLSearchParams({ q, limit: "10" });
|
||||
const data = await request<{ results: MessageRecord[] }>(
|
||||
`/api/analysis/search?${params}`,
|
||||
);
|
||||
setSearchResults(data.results || []);
|
||||
} catch {
|
||||
setSearchResults([]);
|
||||
} finally {
|
||||
setIsSearching(false);
|
||||
}
|
||||
}, []);
|
||||
|
||||
const executeAction = useCallback(
|
||||
(action: string) => {
|
||||
if (action === "theme") {
|
||||
onToggleTheme();
|
||||
} else if (action === "settings") {
|
||||
onNavigate("settings");
|
||||
} else if (action === "messages") {
|
||||
onNavigate("messages");
|
||||
} else if (action === "live") {
|
||||
onNavigate("live");
|
||||
} else if (action === "dashboard") {
|
||||
onNavigate("dashboard");
|
||||
}
|
||||
onClose();
|
||||
},
|
||||
[onNavigate, onToggleTheme, onClose],
|
||||
);
|
||||
|
||||
const handleKeyDown = useCallback(
|
||||
(e: KeyboardEvent) => {
|
||||
if (e.key === "ArrowDown") {
|
||||
e.preventDefault();
|
||||
setActiveIndex((i) => (i < searchResults.length - 1 ? i + 1 : 0));
|
||||
} else if (e.key === "ArrowUp") {
|
||||
e.preventDefault();
|
||||
setActiveIndex((i) => (i > 0 ? i - 1 : searchResults.length - 1));
|
||||
} else if (e.key === "Enter" && searchResults.length > 0) {
|
||||
onClose();
|
||||
} else if (e.key === "Escape") {
|
||||
onClose();
|
||||
}
|
||||
},
|
||||
[searchResults.length, onClose],
|
||||
);
|
||||
|
||||
// Global keyboard listeners for search and help
|
||||
useEffect(() => {
|
||||
const handler = (e: globalThis.KeyboardEvent) => {
|
||||
if (
|
||||
e.target instanceof HTMLInputElement ||
|
||||
e.target instanceof HTMLTextAreaElement ||
|
||||
e.target instanceof HTMLSelectElement
|
||||
)
|
||||
return;
|
||||
|
||||
// Ctrl+K — open search
|
||||
if ((e.metaKey || e.ctrlKey) && e.key === "k") {
|
||||
e.preventDefault();
|
||||
// Don't toggle if already open — just close
|
||||
if (isOpen) {
|
||||
onClose();
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
// ? — show shortcuts (only when no modal is open)
|
||||
if (e.key === "?" && !isOpen) {
|
||||
e.preventDefault();
|
||||
return;
|
||||
}
|
||||
|
||||
// Escape — close any modal
|
||||
if (e.key === "Escape" && isOpen) {
|
||||
onClose();
|
||||
}
|
||||
|
||||
// Ctrl+1-4 — tab navigation
|
||||
if (e.ctrlKey || e.metaKey) {
|
||||
const tabMap: Record<string, string> = {
|
||||
"1": "messages",
|
||||
"2": "live",
|
||||
"3": "dashboard",
|
||||
"4": "settings",
|
||||
};
|
||||
const tab = tabMap[e.key];
|
||||
if (tab) {
|
||||
e.preventDefault();
|
||||
onNavigate(tab);
|
||||
}
|
||||
}
|
||||
|
||||
// T — toggle theme (when no input focused)
|
||||
if (e.key === "t" && !e.ctrlKey && !e.metaKey && !isOpen) {
|
||||
e.preventDefault();
|
||||
onToggleTheme();
|
||||
}
|
||||
};
|
||||
|
||||
window.addEventListener("keydown", handler);
|
||||
return () => window.removeEventListener("keydown", handler);
|
||||
}, [isOpen, onClose, onNavigate, onToggleTheme]);
|
||||
|
||||
const showSearch = mode === "search";
|
||||
const showShortcuts = mode === "shortcuts";
|
||||
|
||||
return (
|
||||
<AnimatePresence>
|
||||
{isOpen && (
|
||||
<motion.div
|
||||
className="fixed inset-0 z-[9999] flex items-start justify-center pt-[12vh]"
|
||||
variants={backdropVariants}
|
||||
initial="hidden"
|
||||
animate="visible"
|
||||
exit="hidden"
|
||||
transition={{ duration: 0.15 }}
|
||||
>
|
||||
{/* Backdrop */}
|
||||
<div
|
||||
className="absolute inset-0 bg-black/50 backdrop-blur-sm"
|
||||
onClick={onClose}
|
||||
/>
|
||||
|
||||
{/* Modal */}
|
||||
<motion.div
|
||||
className="relative w-full max-w-xl overflow-hidden rounded-2xl border border-border/50 bg-card shadow-2xl"
|
||||
variants={modalVariants}
|
||||
initial="hidden"
|
||||
animate="visible"
|
||||
exit="exit"
|
||||
>
|
||||
{/* Search header */}
|
||||
{showSearch && (
|
||||
<div className="flex items-center gap-3 border-b border-border/50 px-4 py-3">
|
||||
<Search className="h-4 w-4 shrink-0 text-muted-foreground" />
|
||||
<input
|
||||
ref={inputRef}
|
||||
value={query}
|
||||
onChange={(e) => handleSearch(e.target.value)}
|
||||
onKeyDown={handleKeyDown}
|
||||
placeholder="Search messages across all channels..."
|
||||
className="flex-1 border-0 bg-transparent p-0 text-sm text-foreground placeholder:text-muted-foreground focus-visible:outline-none"
|
||||
/>
|
||||
{isSearching && (
|
||||
<div className="h-4 w-4 animate-spin rounded-full border-2 border-primary border-t-transparent" />
|
||||
)}
|
||||
{!isSearching && query && (
|
||||
<button
|
||||
onClick={() => {
|
||||
setQuery("");
|
||||
setSearchResults([]);
|
||||
}}
|
||||
className="shrink-0 text-muted-foreground hover:text-foreground"
|
||||
>
|
||||
<X className="h-4 w-4" />
|
||||
</button>
|
||||
)}
|
||||
<kbd className="shrink-0 hidden sm:inline-flex h-5 items-center rounded-md border border-border bg-background px-1.5 text-[10px] font-mono text-muted-foreground">
|
||||
ESC
|
||||
</kbd>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Shortcuts header */}
|
||||
{showShortcuts && (
|
||||
<div className="flex items-center justify-between border-b border-border/50 px-4 py-3">
|
||||
<span className="text-sm font-semibold text-foreground flex items-center gap-2">
|
||||
<HelpCircle className="h-4 w-4 text-primary" />
|
||||
Keyboard Shortcuts
|
||||
</span>
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="rounded-lg p-1 text-muted-foreground hover:text-foreground hover:bg-accent transition-colors"
|
||||
>
|
||||
<X className="h-4 w-4" />
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Search results */}
|
||||
{showSearch && (
|
||||
<div className="max-h-[320px] overflow-y-auto">
|
||||
{/* Quick actions */}
|
||||
{!query && (
|
||||
<div className="p-2">
|
||||
<p className="px-2 py-1.5 text-[11px] font-semibold uppercase tracking-wider text-muted-foreground">
|
||||
Quick actions
|
||||
</p>
|
||||
{quickActions.map((action) => {
|
||||
const Icon = action.icon;
|
||||
const isThemeAction = action.id === "theme";
|
||||
return (
|
||||
<button
|
||||
key={action.id}
|
||||
onClick={() => executeAction(action.id)}
|
||||
className="flex w-full items-center gap-3 rounded-lg px-2 py-2 text-sm text-foreground hover:bg-accent transition-colors"
|
||||
>
|
||||
<Icon
|
||||
className={cn(
|
||||
"h-4 w-4",
|
||||
isThemeAction && isDark
|
||||
? "text-amber-400"
|
||||
: isThemeAction
|
||||
? "text-indigo-400"
|
||||
: "text-primary",
|
||||
)}
|
||||
/>
|
||||
<span>{action.label}</span>
|
||||
{isThemeAction && (
|
||||
<span className="ml-auto text-xs text-muted-foreground">
|
||||
{isDark ? "→ Light" : "→ Dark"}
|
||||
</span>
|
||||
)}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Results */}
|
||||
{query && (
|
||||
<div className="p-2">
|
||||
{searchResults.length > 0 ? (
|
||||
<>
|
||||
<p className="px-2 py-1.5 text-[11px] font-semibold uppercase tracking-wider text-muted-foreground">
|
||||
Messages ({searchResults.length})
|
||||
</p>
|
||||
{searchResults.map((msg, i) => (
|
||||
<button
|
||||
key={msg.id}
|
||||
onClick={() => {
|
||||
onClose();
|
||||
}}
|
||||
className={cn(
|
||||
"flex w-full items-start gap-3 rounded-lg px-2 py-2 text-left transition-colors",
|
||||
i === activeIndex
|
||||
? "bg-accent"
|
||||
: "hover:bg-accent/50",
|
||||
)}
|
||||
>
|
||||
<MessageSquare className="mt-0.5 h-4 w-4 shrink-0 text-primary" />
|
||||
<div className="min-w-0 flex-1">
|
||||
<p className="truncate text-sm text-foreground">
|
||||
{msg.content || "(no content)"}
|
||||
</p>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{msg.username || msg.user_id || "unknown"}
|
||||
{msg.ai_status === "flagged" && (
|
||||
<span className="ml-2 text-destructive">
|
||||
⚑ flagged
|
||||
</span>
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
</button>
|
||||
))}
|
||||
</>
|
||||
) : (
|
||||
<p className="px-2 py-4 text-center text-sm text-muted-foreground">
|
||||
{isSearching
|
||||
? "Searching..."
|
||||
: "No messages found matching your query."}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Search footer hint */}
|
||||
{!query && (
|
||||
<div className="border-t border-border/50 px-4 py-2">
|
||||
<p className="text-xs text-muted-foreground">
|
||||
Type to search messages — results are fetched from the
|
||||
server
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Shortcuts content */}
|
||||
{showShortcuts && <ShortcutsPanel />}
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,60 @@
|
||||
import { motion } from "framer-motion";
|
||||
import { LayoutDashboard, MessageSquare, Radio, Settings } from "lucide-react";
|
||||
import type { DashboardTab } from "../../entities/ui/types.js";
|
||||
import { cn } from "../lib/utils";
|
||||
|
||||
const tabs: Array<{ id: DashboardTab; label: string; Icon: typeof Radio }> = [
|
||||
{ id: "messages", label: "Messages", Icon: MessageSquare },
|
||||
{ id: "live", label: "Voice & Media", Icon: Radio },
|
||||
{ id: "dashboard", label: "Dashboard", Icon: LayoutDashboard },
|
||||
{ id: "settings" as const, label: "Admin", Icon: Settings },
|
||||
];
|
||||
|
||||
interface MobileTabBarProps {
|
||||
activeTab: DashboardTab;
|
||||
onTabChange: (tab: DashboardTab) => void;
|
||||
}
|
||||
|
||||
export function MobileTabBar({ activeTab, onTabChange }: MobileTabBarProps) {
|
||||
return (
|
||||
<nav
|
||||
aria-label="Main navigation"
|
||||
role="tablist"
|
||||
className="fixed bottom-0 left-0 right-0 z-50 flex border-t border-border bg-card shadow-lg shadow-black/5 md:hidden"
|
||||
>
|
||||
{tabs.map(({ id, label, Icon }) => (
|
||||
<button
|
||||
key={id}
|
||||
role="tab"
|
||||
aria-selected={activeTab === id}
|
||||
aria-controls={`tabpanel-${id}`}
|
||||
type="button"
|
||||
onClick={() => onTabChange(id)}
|
||||
className={cn(
|
||||
"relative flex flex-1 flex-col items-center gap-0.5 py-2 text-xs font-medium transition-colors",
|
||||
activeTab === id
|
||||
? "text-primary"
|
||||
: "text-muted-foreground hover:text-foreground",
|
||||
)}
|
||||
>
|
||||
{activeTab === id && (
|
||||
<motion.div
|
||||
layoutId="tab-indicator"
|
||||
transition={{ type: "spring", stiffness: 400, damping: 30 }}
|
||||
className="absolute -top-px left-1/4 right-1/4 h-0.5 rounded-full bg-primary"
|
||||
/>
|
||||
)}
|
||||
<Icon className={cn("h-5 w-5", activeTab === id && "drop-shadow-sm")} />
|
||||
<span className="text-[10px]">{label}</span>
|
||||
{activeTab === id && (
|
||||
<motion.div
|
||||
layoutId="tab-dot"
|
||||
transition={{ type: "spring", stiffness: 400, damping: 30 }}
|
||||
className="h-1 w-1 rounded-full bg-primary mt-0.5"
|
||||
/>
|
||||
)}
|
||||
</button>
|
||||
))}
|
||||
</nav>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,45 @@
|
||||
import type * as React from "react";
|
||||
import { cn } from "../lib/utils";
|
||||
|
||||
type BadgeVariant =
|
||||
| "default"
|
||||
| "secondary"
|
||||
| "destructive"
|
||||
| "outline"
|
||||
| "success"
|
||||
| "warning"
|
||||
| "info";
|
||||
|
||||
const variants: Record<BadgeVariant, string> = {
|
||||
default: "border-transparent bg-primary text-primary-foreground",
|
||||
secondary: "border-transparent bg-muted text-muted-foreground",
|
||||
destructive: "border-transparent bg-destructive/15 text-destructive",
|
||||
outline: "border-border text-foreground",
|
||||
success:
|
||||
"border-transparent bg-emerald-100 text-emerald-700 dark:bg-emerald-950 dark:text-emerald-300",
|
||||
warning:
|
||||
"border-transparent bg-amber-100 text-amber-700 dark:bg-amber-950 dark:text-amber-300",
|
||||
info: "border-transparent bg-blue-100 text-blue-700 dark:bg-blue-950 dark:text-blue-300",
|
||||
};
|
||||
|
||||
export interface BadgeProps extends React.HTMLAttributes<HTMLDivElement> {
|
||||
variant?: BadgeVariant;
|
||||
}
|
||||
|
||||
export function Badge({
|
||||
className,
|
||||
variant = "default",
|
||||
...props
|
||||
}: BadgeProps) {
|
||||
return (
|
||||
<div
|
||||
role="status"
|
||||
className={cn(
|
||||
"inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-medium transition-colors",
|
||||
variants[variant],
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,59 @@
|
||||
import { Slot } from "@radix-ui/react-slot";
|
||||
import type * as React from "react";
|
||||
import { cn } from "../lib/utils";
|
||||
|
||||
type ButtonVariant =
|
||||
| "default"
|
||||
| "secondary"
|
||||
| "destructive"
|
||||
| "outline"
|
||||
| "ghost";
|
||||
type ButtonSize = "default" | "sm" | "lg" | "icon";
|
||||
|
||||
const variants: Record<ButtonVariant, string> = {
|
||||
default: "bg-primary text-primary-foreground shadow-sm hover:bg-primary/90",
|
||||
secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
|
||||
destructive:
|
||||
"bg-destructive text-destructive-foreground hover:bg-destructive/90",
|
||||
outline:
|
||||
"border border-input bg-background hover:bg-accent hover:text-accent-foreground",
|
||||
ghost: "hover:bg-accent hover:text-accent-foreground",
|
||||
};
|
||||
|
||||
const sizes: Record<ButtonSize, string> = {
|
||||
default: "h-10 px-4 py-2",
|
||||
sm: "h-9 rounded-lg px-3",
|
||||
lg: "h-11 rounded-lg px-8",
|
||||
icon: "h-10 w-10",
|
||||
};
|
||||
|
||||
export interface ButtonProps
|
||||
extends React.ButtonHTMLAttributes<HTMLButtonElement> {
|
||||
asChild?: boolean;
|
||||
variant?: ButtonVariant;
|
||||
size?: ButtonSize;
|
||||
}
|
||||
|
||||
export function Button({
|
||||
className,
|
||||
variant = "default",
|
||||
size = "default",
|
||||
asChild = false,
|
||||
disabled,
|
||||
...props
|
||||
}: ButtonProps) {
|
||||
const Comp = asChild ? Slot : "button";
|
||||
return (
|
||||
<Comp
|
||||
aria-disabled={disabled || undefined}
|
||||
className={cn(
|
||||
"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-lg text-sm font-medium motion-safe:transition-all motion-safe:duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 active:scale-[0.97] disabled:pointer-events-none disabled:opacity-50",
|
||||
variants[variant],
|
||||
sizes[size],
|
||||
className,
|
||||
)}
|
||||
disabled={!asChild ? disabled : undefined}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,67 @@
|
||||
import type * as React from "react";
|
||||
import { cn } from "../lib/utils";
|
||||
|
||||
export function Card({
|
||||
className,
|
||||
...props
|
||||
}: React.HTMLAttributes<HTMLDivElement>) {
|
||||
return (
|
||||
<div
|
||||
role="region"
|
||||
className={cn(
|
||||
"rounded-xl border border-border bg-card text-card-foreground shadow-sm hover:shadow-md transition-shadow",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export function CardHeader({
|
||||
className,
|
||||
...props
|
||||
}: React.HTMLAttributes<HTMLDivElement>) {
|
||||
return (
|
||||
<div
|
||||
className={cn("flex flex-col space-y-1.5 p-6", className)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export function CardTitle({
|
||||
className,
|
||||
...props
|
||||
}: React.HTMLAttributes<HTMLHeadingElement>) {
|
||||
return (
|
||||
<h3
|
||||
className={cn("font-semibold leading-none tracking-tight", className)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export function CardDescription({
|
||||
className,
|
||||
...props
|
||||
}: React.HTMLAttributes<HTMLParagraphElement>) {
|
||||
return (
|
||||
<p className={cn("text-sm text-muted-foreground", className)} {...props} />
|
||||
);
|
||||
}
|
||||
|
||||
export function CardContent({
|
||||
className,
|
||||
...props
|
||||
}: React.HTMLAttributes<HTMLDivElement>) {
|
||||
return <div className={cn("p-6 pt-0", className)} {...props} />;
|
||||
}
|
||||
|
||||
export function CardFooter({
|
||||
className,
|
||||
...props
|
||||
}: React.HTMLAttributes<HTMLDivElement>) {
|
||||
return (
|
||||
<div className={cn("flex items-center p-6 pt-0", className)} {...props} />
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,77 @@
|
||||
import { Component, type ErrorInfo, type ReactNode } from "react";
|
||||
import { AlertTriangle, RefreshCw } from "lucide-react";
|
||||
import { Button } from "../ui/button";
|
||||
import { cn } from "../lib/utils";
|
||||
|
||||
interface ErrorBoundaryProps {
|
||||
children: ReactNode;
|
||||
fallback?: ReactNode;
|
||||
className?: string;
|
||||
message?: string;
|
||||
}
|
||||
|
||||
interface ErrorBoundaryState {
|
||||
hasError: boolean;
|
||||
error: Error | null;
|
||||
}
|
||||
|
||||
/**
|
||||
* Error Boundary component — catches JavaScript errors in its child tree,
|
||||
* logs them, and displays a fallback UI instead of crashing the whole app.
|
||||
*/
|
||||
export class ErrorBoundary extends Component<
|
||||
ErrorBoundaryProps,
|
||||
ErrorBoundaryState
|
||||
> {
|
||||
constructor(props: ErrorBoundaryProps) {
|
||||
super(props);
|
||||
this.state = { hasError: false, error: null };
|
||||
}
|
||||
|
||||
static getDerivedStateFromError(error: Error): ErrorBoundaryState {
|
||||
return { hasError: true, error };
|
||||
}
|
||||
|
||||
componentDidCatch(error: Error, errorInfo: ErrorInfo) {
|
||||
console.error("[ErrorBoundary] Caught error:", error.message, errorInfo);
|
||||
}
|
||||
|
||||
handleRetry = () => {
|
||||
this.setState({ hasError: false, error: null });
|
||||
};
|
||||
|
||||
render() {
|
||||
if (this.state.hasError) {
|
||||
if (this.props.fallback) return this.props.fallback;
|
||||
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
"flex flex-col items-center justify-center rounded-xl border border-destructive/30 bg-destructive/5 p-8 text-center",
|
||||
this.props.className,
|
||||
)}
|
||||
role="alert"
|
||||
>
|
||||
<AlertTriangle className="mb-3 h-8 w-8 text-destructive" />
|
||||
<h3 className="mb-1 font-semibold text-foreground">
|
||||
{this.props.message || "Something went wrong"}
|
||||
</h3>
|
||||
<p className="mb-4 text-sm text-muted-foreground">
|
||||
{this.state.error?.message || "An unexpected error occurred."}
|
||||
</p>
|
||||
<Button
|
||||
onClick={this.handleRetry}
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="gap-2"
|
||||
>
|
||||
<RefreshCw className="h-3.5 w-3.5" />
|
||||
Try Again
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return this.props.children;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,27 @@
|
||||
// ─── Shared UI barrel export ────────────────────────────────────────────────
|
||||
|
||||
export { Badge } from "./badge";
|
||||
export { Button } from "./button";
|
||||
export {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardFooter,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "./card";
|
||||
export { Input } from "./input";
|
||||
export type {
|
||||
ProfileDetailMessage,
|
||||
ProfileDetailStats,
|
||||
} from "./profile-detail";
|
||||
export { ProfileDetail } from "./profile-detail";
|
||||
export { ScrollArea } from "./scroll-area";
|
||||
export { Select } from "./select";
|
||||
export { Skeleton } from "./skeleton";
|
||||
export type { StatusType } from "./status-badge";
|
||||
export { StatusBadge } from "./status-badge";
|
||||
export type { SummaryItem } from "./summary-list";
|
||||
export { SummaryList } from "./summary-list";
|
||||
export { Tabs, TabsContent, TabsList, TabsTrigger } from "./tabs";
|
||||
export { ToastProvider, useToast } from "./toast";
|
||||
@@ -0,0 +1,23 @@
|
||||
import type * as React from "react";
|
||||
import { cn } from "../lib/utils";
|
||||
|
||||
export interface InputProps
|
||||
extends React.InputHTMLAttributes<HTMLInputElement> {
|
||||
errorId?: string;
|
||||
}
|
||||
|
||||
export function Input({ className, type, errorId, ...props }: InputProps) {
|
||||
return (
|
||||
<input
|
||||
type={type}
|
||||
aria-describedby={errorId}
|
||||
className={cn(
|
||||
"flex h-10 w-full rounded-lg border border-input bg-background px-3 py-2 text-sm text-foreground ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
|
||||
props["aria-invalid"] === "true" &&
|
||||
"border-destructive ring-destructive/30",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,206 @@
|
||||
import { ArrowLeft, RefreshCw } from "lucide-react";
|
||||
import { type ReactNode } from "react";
|
||||
import { cn } from "../lib/utils";
|
||||
import { Card, CardContent } from "./card";
|
||||
import { Skeleton } from "./skeleton";
|
||||
import { StatusBadge, type StatusType } from "./status-badge";
|
||||
|
||||
export interface ProfileDetailStats {
|
||||
totalLabel: string;
|
||||
totalValue: number;
|
||||
cleanLabel: string;
|
||||
cleanValue: number;
|
||||
flaggedLabel: string;
|
||||
flaggedValue: number;
|
||||
}
|
||||
|
||||
export interface ProfileDetailMessage {
|
||||
id: string;
|
||||
content: string | null;
|
||||
created_at: string | null;
|
||||
ai_status: string | null;
|
||||
}
|
||||
|
||||
interface ProfileDetailProps {
|
||||
loading: boolean;
|
||||
error: string | null;
|
||||
onRetry: () => void;
|
||||
onBack: () => void;
|
||||
icon: ReactNode;
|
||||
title: string;
|
||||
subtitle?: string;
|
||||
summaryLabel: string;
|
||||
summaryText?: string;
|
||||
lastAnalyzedLabel?: string;
|
||||
stats: ProfileDetailStats;
|
||||
messages: ProfileDetailMessage[];
|
||||
messagesTitle?: string;
|
||||
messagesEmptyText?: string;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
function DetailSkeleton() {
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<Skeleton className="h-6 w-24" />
|
||||
<Card>
|
||||
<CardContent className="p-6">
|
||||
<div className="flex items-center gap-4">
|
||||
<Skeleton className="h-16 w-16 rounded-full" />
|
||||
<div className="space-y-2">
|
||||
<Skeleton className="h-6 w-48" />
|
||||
<Skeleton className="h-4 w-32" />
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<div className="grid gap-4 sm:grid-cols-3">
|
||||
{Array.from({ length: 3 }).map((_, i) => (
|
||||
<Card key={i}>
|
||||
<CardContent className="p-4">
|
||||
<Skeleton className="h-4 w-16 mb-2" />
|
||||
<Skeleton className="h-8 w-12" />
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function ProfileDetail({
|
||||
loading,
|
||||
error,
|
||||
onRetry,
|
||||
onBack,
|
||||
icon,
|
||||
title,
|
||||
subtitle,
|
||||
summaryLabel,
|
||||
summaryText,
|
||||
lastAnalyzedLabel,
|
||||
stats,
|
||||
messages,
|
||||
messagesTitle = "Recent Messages",
|
||||
messagesEmptyText = "No messages found",
|
||||
className,
|
||||
}: ProfileDetailProps) {
|
||||
if (loading) return <DetailSkeleton />;
|
||||
|
||||
if (error) {
|
||||
return (
|
||||
<div className="flex flex-col items-center gap-4 py-20 text-muted-foreground">
|
||||
<p className="text-sm">{error}</p>
|
||||
<button
|
||||
onClick={onRetry}
|
||||
className="inline-flex items-center gap-1.5 rounded-xl border border-border px-4 py-2 text-sm font-medium hover:bg-accent transition-colors"
|
||||
>
|
||||
<RefreshCw className="h-4 w-4" /> Retry
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={cn("space-y-6", className)}>
|
||||
{/* Back button */}
|
||||
<button
|
||||
onClick={onBack}
|
||||
className="inline-flex items-center gap-1.5 text-sm text-muted-foreground hover:text-foreground transition-colors"
|
||||
>
|
||||
<ArrowLeft className="h-4 w-4" /> Back
|
||||
</button>
|
||||
|
||||
{/* Header */}
|
||||
<Card>
|
||||
<CardContent className="p-6">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="flex h-16 w-16 items-center justify-center rounded-full bg-muted text-muted-foreground">
|
||||
{icon}
|
||||
</div>
|
||||
<div className="min-w-0">
|
||||
<h2 className="text-xl font-semibold truncate">{title}</h2>
|
||||
{subtitle && (
|
||||
<p className="text-sm text-muted-foreground">{subtitle}</p>
|
||||
)}
|
||||
<p className="text-xs text-muted-foreground mt-1">
|
||||
{summaryLabel}: {summaryText ?? "N/A"}
|
||||
</p>
|
||||
{lastAnalyzedLabel && (
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{lastAnalyzedLabel}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Stats */}
|
||||
<div className="grid gap-4 sm:grid-cols-3">
|
||||
<Card>
|
||||
<CardContent className="p-4">
|
||||
<p className="text-xs text-muted-foreground uppercase tracking-wide">
|
||||
{stats.totalLabel}
|
||||
</p>
|
||||
<p className="text-2xl font-bold tabular-nums">
|
||||
{stats.totalValue}
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card>
|
||||
<CardContent className="p-4">
|
||||
<p className="text-xs text-muted-foreground uppercase tracking-wide">
|
||||
{stats.cleanLabel}
|
||||
</p>
|
||||
<p className="text-2xl font-bold tabular-nums text-emerald-600">
|
||||
{stats.cleanValue}
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card>
|
||||
<CardContent className="p-4">
|
||||
<p className="text-xs text-muted-foreground uppercase tracking-wide">
|
||||
{stats.flaggedLabel}
|
||||
</p>
|
||||
<p className="text-2xl font-bold tabular-nums text-red-600">
|
||||
{stats.flaggedValue}
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Recent Messages */}
|
||||
<div>
|
||||
<h3 className="text-sm font-medium text-muted-foreground mb-3">
|
||||
{messagesTitle}
|
||||
</h3>
|
||||
{messages.length === 0 ? (
|
||||
<p className="text-sm text-muted-foreground py-8 text-center">
|
||||
{messagesEmptyText}
|
||||
</p>
|
||||
) : (
|
||||
<div className="space-y-2">
|
||||
{messages.map((msg) => (
|
||||
<Card key={msg.id}>
|
||||
<CardContent className="p-3">
|
||||
<div className="flex items-start justify-between gap-2">
|
||||
<p className="text-sm line-clamp-2 flex-1">
|
||||
{msg.content ?? "(no content)"}
|
||||
</p>
|
||||
<StatusBadge status={msg.ai_status} />
|
||||
</div>
|
||||
{msg.created_at && (
|
||||
<p className="text-xs text-muted-foreground mt-1">
|
||||
{new Date(msg.created_at).toLocaleString()}
|
||||
</p>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,47 @@
|
||||
import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
|
||||
import type * as React from "react";
|
||||
import { cn } from "../lib/utils";
|
||||
|
||||
export function ScrollArea({
|
||||
className,
|
||||
children,
|
||||
...props
|
||||
}: React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>) {
|
||||
return (
|
||||
<ScrollAreaPrimitive.Root
|
||||
className={cn("relative overflow-hidden", className)}
|
||||
{...props}
|
||||
>
|
||||
<ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
|
||||
{children}
|
||||
</ScrollAreaPrimitive.Viewport>
|
||||
<ScrollBar />
|
||||
<ScrollAreaPrimitive.Corner />
|
||||
</ScrollAreaPrimitive.Root>
|
||||
);
|
||||
}
|
||||
|
||||
function ScrollBar({
|
||||
className,
|
||||
orientation = "vertical",
|
||||
...props
|
||||
}: React.ComponentPropsWithoutRef<
|
||||
typeof ScrollAreaPrimitive.ScrollAreaScrollbar
|
||||
>) {
|
||||
return (
|
||||
<ScrollAreaPrimitive.ScrollAreaScrollbar
|
||||
orientation={orientation}
|
||||
className={cn(
|
||||
"flex touch-none select-none transition-colors",
|
||||
orientation === "vertical" &&
|
||||
"h-full w-2.5 border-l border-l-transparent p-[1px]",
|
||||
orientation === "horizontal" &&
|
||||
"h-2.5 flex-col border-t border-t-transparent p-[1px]",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-primary/20" />
|
||||
</ScrollAreaPrimitive.ScrollAreaScrollbar>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,43 @@
|
||||
import type * as React from "react";
|
||||
import { cn } from "../lib/utils";
|
||||
|
||||
export interface SelectOption {
|
||||
value: string;
|
||||
label: string;
|
||||
}
|
||||
|
||||
export interface SelectProps
|
||||
extends React.SelectHTMLAttributes<HTMLSelectElement> {
|
||||
options: SelectOption[];
|
||||
placeholder?: string;
|
||||
}
|
||||
|
||||
export function Select({
|
||||
className,
|
||||
options,
|
||||
placeholder,
|
||||
...props
|
||||
}: SelectProps) {
|
||||
return (
|
||||
<select
|
||||
className={cn(
|
||||
"flex h-10 w-full rounded-lg border border-input bg-background px-3 py-2 text-sm text-foreground ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
|
||||
props["aria-invalid"] === "true" &&
|
||||
"border-destructive ring-destructive/30",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
{placeholder && (
|
||||
<option value="" disabled hidden>
|
||||
{placeholder}
|
||||
</option>
|
||||
)}
|
||||
{options.map((option) => (
|
||||
<option key={option.value} value={option.value}>
|
||||
{option.label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,16 @@
|
||||
import type { HTMLAttributes } from "react";
|
||||
import { cn } from "../lib/utils";
|
||||
|
||||
export function Skeleton({
|
||||
className,
|
||||
...props
|
||||
}: HTMLAttributes<HTMLDivElement>) {
|
||||
return (
|
||||
<div
|
||||
aria-hidden="true"
|
||||
role="presentation"
|
||||
className={cn("rounded-lg bg-muted animate-shimmer", className)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,52 @@
|
||||
import type { ReactNode } from "react";
|
||||
import { cn } from "../lib/utils";
|
||||
|
||||
export type StatusType =
|
||||
| "flagged"
|
||||
| "clean"
|
||||
| "warn"
|
||||
| "pending"
|
||||
| "processing"
|
||||
| "error"
|
||||
| "deleted"
|
||||
| "none";
|
||||
|
||||
const statusStyles: Record<StatusType, string> = {
|
||||
flagged:
|
||||
"bg-red-100 text-red-700 border-red-200 dark:bg-red-950 dark:text-red-300 dark:border-red-800",
|
||||
clean:
|
||||
"bg-emerald-100 text-emerald-700 border-emerald-200 dark:bg-emerald-950 dark:text-emerald-300 dark:border-emerald-800",
|
||||
warn: "bg-amber-100 text-amber-700 border-amber-200 dark:bg-amber-950 dark:text-amber-300 dark:border-amber-800",
|
||||
pending: "bg-muted text-muted-foreground border-border",
|
||||
processing:
|
||||
"bg-blue-100 text-blue-700 border-blue-200 dark:bg-blue-950 dark:text-blue-300 dark:border-blue-800",
|
||||
error:
|
||||
"bg-red-100 text-red-700 border-red-200 dark:bg-red-950 dark:text-red-300 dark:border-red-800",
|
||||
deleted:
|
||||
"bg-gray-100 text-gray-500 border-gray-200 dark:bg-gray-900 dark:text-gray-400 dark:border-gray-800 line-through",
|
||||
none: "bg-muted text-muted-foreground border-border",
|
||||
};
|
||||
|
||||
interface StatusBadgeProps {
|
||||
status: StatusType | string | null;
|
||||
className?: string;
|
||||
children?: ReactNode;
|
||||
}
|
||||
|
||||
export function StatusBadge({ status, className, children }: StatusBadgeProps) {
|
||||
const key = (status?.toLowerCase() ?? "none") as StatusType;
|
||||
const style = statusStyles[key] ?? statusStyles.none;
|
||||
return (
|
||||
<span
|
||||
className={cn(
|
||||
"inline-flex items-center rounded-full border px-2 py-0.5 text-xs font-medium",
|
||||
style,
|
||||
className,
|
||||
)}
|
||||
>
|
||||
{children}
|
||||
{children ? " " : null}
|
||||
{status ?? "unknown"}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,153 @@
|
||||
import { ChevronRight, Loader2, RefreshCw, Search } from "lucide-react";
|
||||
import { type ReactNode } from "react";
|
||||
import { cn } from "../lib/utils";
|
||||
import { Card, CardContent } from "./card";
|
||||
import { Input } from "./input";
|
||||
import { Skeleton } from "./skeleton";
|
||||
|
||||
export interface SummaryItem {
|
||||
id: string;
|
||||
label: string;
|
||||
subtitle?: string;
|
||||
summaryText: string;
|
||||
summaryValue?: number;
|
||||
onClick: () => void;
|
||||
}
|
||||
|
||||
interface SummaryListProps<T extends SummaryItem> {
|
||||
items: T[];
|
||||
loading: boolean;
|
||||
error: string | null;
|
||||
searchValue: string;
|
||||
onSearchChange: (value: string) => void;
|
||||
onRetry: () => void;
|
||||
hasMore: boolean;
|
||||
onLoadMore: () => void;
|
||||
loadingMore: boolean;
|
||||
renderIcon: (item: T) => ReactNode;
|
||||
emptyMessage?: string;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export function SummaryList<T extends SummaryItem>({
|
||||
items,
|
||||
loading,
|
||||
error,
|
||||
searchValue,
|
||||
onSearchChange,
|
||||
onRetry,
|
||||
hasMore,
|
||||
onLoadMore,
|
||||
loadingMore,
|
||||
renderIcon,
|
||||
emptyMessage = "No items found",
|
||||
className,
|
||||
}: SummaryListProps<T>) {
|
||||
return (
|
||||
<div className={cn("space-y-4", className)}>
|
||||
{/* Search */}
|
||||
<div className="relative">
|
||||
<Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
|
||||
<Input
|
||||
placeholder="Search..."
|
||||
value={searchValue}
|
||||
onChange={(e) => onSearchChange(e.target.value)}
|
||||
className="pl-9 rounded-full"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Error */}
|
||||
{error && (
|
||||
<div className="flex flex-col items-center gap-4 py-20 text-muted-foreground">
|
||||
<p className="text-sm">{error}</p>
|
||||
<button
|
||||
onClick={onRetry}
|
||||
className="inline-flex items-center gap-1.5 rounded-xl border border-border px-4 py-2 text-sm font-medium hover:bg-accent transition-colors"
|
||||
>
|
||||
<RefreshCw className="h-4 w-4" /> Retry
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Loading skeleton — only on initial load */}
|
||||
{loading && items.length === 0 && !error && (
|
||||
<div className="grid gap-3 sm:grid-cols-2">
|
||||
{Array.from({ length: 6 }).map((_, i) => (
|
||||
<Card key={i}>
|
||||
<CardContent className="p-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<Skeleton className="h-10 w-10 rounded-full" />
|
||||
<div className="space-y-2 flex-1">
|
||||
<Skeleton className="h-4 w-3/4" />
|
||||
<Skeleton className="h-3 w-1/2" />
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Empty */}
|
||||
{!loading && !error && items.length === 0 && (
|
||||
<div className="flex flex-col items-center gap-4 py-20 text-muted-foreground">
|
||||
<p className="text-sm">{emptyMessage}</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Items */}
|
||||
{!error && items.length > 0 && (
|
||||
<>
|
||||
<div className="grid gap-3 sm:grid-cols-2">
|
||||
{items.map((item) => (
|
||||
<button
|
||||
key={item.id}
|
||||
onClick={item.onClick}
|
||||
className="text-left w-full"
|
||||
aria-label={item.label}
|
||||
>
|
||||
<Card className="hover:bg-accent/50 transition-colors cursor-pointer h-full">
|
||||
<CardContent className="p-4">
|
||||
<div className="flex items-start gap-3">
|
||||
<div className="mt-0.5 shrink-0 text-muted-foreground">
|
||||
{renderIcon(item)}
|
||||
</div>
|
||||
<div className="min-w-0 flex-1">
|
||||
<h3 className="font-medium text-sm truncate">
|
||||
{item.label}
|
||||
</h3>
|
||||
{item.subtitle && (
|
||||
<p className="text-xs text-muted-foreground truncate">
|
||||
{item.subtitle}
|
||||
</p>
|
||||
)}
|
||||
<p className="text-xs text-muted-foreground mt-1">
|
||||
{item.summaryText}
|
||||
</p>
|
||||
</div>
|
||||
<ChevronRight className="h-4 w-4 text-muted-foreground/50 shrink-0 mt-1" />
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Load More */}
|
||||
{hasMore && (
|
||||
<div className="flex justify-center pt-2">
|
||||
<button
|
||||
onClick={onLoadMore}
|
||||
disabled={loadingMore}
|
||||
className="inline-flex items-center gap-2 rounded-xl border border-border px-6 py-2 text-sm font-medium hover:bg-accent transition-colors disabled:opacity-50"
|
||||
>
|
||||
{loadingMore && <Loader2 className="h-4 w-4 animate-spin" />}
|
||||
Load More
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,50 @@
|
||||
import * as TabsPrimitive from "@radix-ui/react-tabs";
|
||||
import type * as React from "react";
|
||||
import { cn } from "../lib/utils";
|
||||
|
||||
export const Tabs = TabsPrimitive.Root;
|
||||
|
||||
export function TabsList({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>) {
|
||||
return (
|
||||
<TabsPrimitive.List
|
||||
className={cn(
|
||||
"inline-flex h-10 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export function TabsTrigger({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>) {
|
||||
return (
|
||||
<TabsPrimitive.Trigger
|
||||
className={cn(
|
||||
"inline-flex items-center justify-center whitespace-nowrap rounded-lg px-3 py-1.5 text-sm font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export function TabsContent({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>) {
|
||||
return (
|
||||
<TabsPrimitive.Content
|
||||
className={cn(
|
||||
"mt-6 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,140 @@
|
||||
// ─── Toast notification system ──────────────────────────────────────────────
|
||||
// (no entity type imports needed — only uses string/ReactNode)
|
||||
import {
|
||||
AlertCircle,
|
||||
AlertTriangle,
|
||||
CheckCircle2,
|
||||
Info,
|
||||
X,
|
||||
} from "lucide-react";
|
||||
import {
|
||||
createContext,
|
||||
type ReactNode,
|
||||
useCallback,
|
||||
useContext,
|
||||
useEffect,
|
||||
useRef,
|
||||
useState,
|
||||
} from "react";
|
||||
import { cn } from "../lib/utils";
|
||||
|
||||
interface Toast {
|
||||
id: string;
|
||||
message: string;
|
||||
type: "info" | "success" | "error" | "warning";
|
||||
}
|
||||
|
||||
interface ToastContextType {
|
||||
toasts: Toast[];
|
||||
addToast: (message: string, type?: Toast["type"]) => void;
|
||||
removeToast: (id: string) => void;
|
||||
}
|
||||
|
||||
const ToastContext = createContext<ToastContextType>({
|
||||
toasts: [],
|
||||
addToast: () => {},
|
||||
removeToast: () => {},
|
||||
});
|
||||
|
||||
export function ToastProvider({ children }: { children: ReactNode }) {
|
||||
const [toasts, setToasts] = useState<Toast[]>([]);
|
||||
const timersRef = useRef<Map<string, ReturnType<typeof setTimeout>>>(
|
||||
new Map(),
|
||||
);
|
||||
|
||||
const removeToast = useCallback((id: string) => {
|
||||
setToasts((prev) => prev.filter((t) => t.id !== id));
|
||||
const timer = timersRef.current.get(id);
|
||||
if (timer) {
|
||||
clearTimeout(timer);
|
||||
timersRef.current.delete(id);
|
||||
}
|
||||
}, []);
|
||||
|
||||
const addToast = useCallback(
|
||||
(message: string, type: Toast["type"] = "info") => {
|
||||
const id = `toast-${Date.now()}-${Math.random().toString(36).slice(2, 9)}`;
|
||||
setToasts((prev) => [...prev, { id, message, type }]);
|
||||
const timer = setTimeout(() => {
|
||||
removeToast(id);
|
||||
}, 4000);
|
||||
timersRef.current.set(id, timer);
|
||||
},
|
||||
[removeToast],
|
||||
);
|
||||
|
||||
// Cleanup all timers on unmount
|
||||
useEffect(() => {
|
||||
const current = timersRef.current;
|
||||
return () => {
|
||||
for (const timer of current.values()) {
|
||||
clearTimeout(timer);
|
||||
}
|
||||
current.clear();
|
||||
};
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<ToastContext.Provider value={{ toasts, addToast, removeToast }}>
|
||||
{children}
|
||||
<ToastContainer />
|
||||
</ToastContext.Provider>
|
||||
);
|
||||
}
|
||||
|
||||
export function useToast() {
|
||||
return useContext(ToastContext);
|
||||
}
|
||||
|
||||
const typeStyles: Record<Toast["type"], string> = {
|
||||
info: "border-l-primary bg-card text-card-foreground",
|
||||
success: "border-l-emerald-500 bg-card text-card-foreground",
|
||||
error: "border-l-destructive bg-card text-card-foreground",
|
||||
warning: "border-l-amber-500 bg-card text-card-foreground",
|
||||
};
|
||||
|
||||
const typeIcons: Record<Toast["type"], React.ReactNode> = {
|
||||
info: <Info className="h-4 w-4 text-primary" />,
|
||||
success: <CheckCircle2 className="h-4 w-4 text-emerald-500" />,
|
||||
error: <AlertCircle className="h-4 w-4 text-destructive" />,
|
||||
warning: <AlertTriangle className="h-4 w-4 text-amber-500" />,
|
||||
};
|
||||
|
||||
function ToastContainer() {
|
||||
const { toasts, removeToast } = useContext(ToastContext);
|
||||
|
||||
if (toasts.length === 0) return null;
|
||||
|
||||
return (
|
||||
<div
|
||||
role="alert"
|
||||
aria-live="polite"
|
||||
className="fixed bottom-4 right-4 z-50 flex flex-col gap-2"
|
||||
>
|
||||
{toasts.map((toast) => (
|
||||
<div
|
||||
key={toast.id}
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
className={cn(
|
||||
"group flex items-center gap-2.5 rounded-lg border border-border px-4 py-3 text-sm shadow-md cursor-pointer transition-all hover:scale-[1.02] border-l-4 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
|
||||
typeStyles[toast.type],
|
||||
)}
|
||||
onClick={() => removeToast(toast.id)}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Enter" || e.key === "Escape") {
|
||||
removeToast(toast.id);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<span className="flex-shrink-0">{typeIcons[toast.type]}</span>
|
||||
<span className="flex-1">{toast.message}</span>
|
||||
<X
|
||||
aria-label="Close notification"
|
||||
className="h-3.5 w-3.5 flex-shrink-0 text-muted-foreground md:opacity-0 md:group-hover:opacity-100 transition-opacity"
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user