feat(web): add shadcn/ui components and migrate UI patterns

- Install Badge, Card, Alert, Skeleton, Progress, Dialog, Collapsible,
  Tooltip, Command, Kbd, Sonner, Breadcrumb, Separator, Table components
- Migrate BatchToast to Sonner toasts (delete BatchToast.tsx)
- Add Command palette with Cmd+K shortcut for quick navigation
- Convert bucket delete confirmation to Dialog overlay
- Replace <details>/<summary> with Collapsible in CandidateList
- Add Tooltips to BucketForm slug field and BucketList actions
- Add TooltipProvider to global providers
- Migrate inline badges/buttons to shadcn components across features

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

Author: tindotdev

packages/web/package.json

@@ -17,22 +17,30 @@
 		"@dnd-kit/sortable": "^10.0.0",
 		"@dnd-kit/utilities": "^3.2.2",
 		"@microsoft/fetch-event-source": "^2.0.1",
+		"@radix-ui/react-collapsible": "^1.1.12",
+		"@radix-ui/react-dialog": "^1.1.15",
 		"@radix-ui/react-dropdown-menu": "^2.1.16",
 		"@radix-ui/react-label": "^2.1.8",
+		"@radix-ui/react-progress": "^1.1.8",
 		"@radix-ui/react-select": "^2.2.6",
+		"@radix-ui/react-separator": "^1.1.8",
 		"@radix-ui/react-slot": "^1.2.4",
+		"@radix-ui/react-tooltip": "^1.2.8",
 		"@tanstack/react-form": "^1.27.7",
 		"@tanstack/react-query": "^5.90.12",
 		"@tanstack/react-router": "^1.132.0",
 		"better-auth": "^1.4.7",
 		"class-variance-authority": "^0.7.1",
 		"clsx": "^2.1.1",
+		"cmdk": "^1.1.1",
 		"filepond": "^4.32.10",
 		"hono": "^4.11.1",
 		"lucide-react": "^0.562.0",
+		"next-themes": "^0.4.6",
 		"react": "^19.2.0",
 		"react-dom": "^19.2.0",
 		"react-filepond": "^7.1.3",
+		"sonner": "^2.0.7",
 		"tailwind-merge": "^3.4.0",
 		"valibot": "^1.2.0"
 	},

packages/web/src/components/layouts/ProtectedLayout.tsx

@@ -1,10 +1,12 @@
 import { Link, Outlet, useNavigate } from '@tanstack/react-router';
-import { ChevronDown, Menu } from 'lucide-react';
-import { useEffect, useMemo } from 'react';
+import { ChevronDown, FolderOpen, Menu, Plus, Search, Settings } from 'lucide-react';
+import { useEffect, useMemo, useState } from 'react';
 import { signOut, useAuth } from '@/features/auth';
 import { useUserBuckets } from '@/features/settings';
 import { CAPTURE_NAV, HEADER_NAV, NAV_LINKS } from '@/lib/navigation';
 import { NavLink } from '../NavLink';
+import { Button } from '../ui/button';
+import { CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator } from '../ui/command';
 import {
 	DropdownMenu,
 	DropdownMenuContent,
@@ -13,11 +15,13 @@ import {
 	DropdownMenuSeparator,
 	DropdownMenuTrigger,
 } from '../ui/dropdown-menu';
+import { Kbd } from '../ui/kbd';
 
 export function ProtectedLayout() {
 	// Use AuthProvider (reactive); router context isn't reactive when RouterProvider context changes.
 	const { data: session, isPending } = useAuth();
 	const navigate = useNavigate();
+	const [commandOpen, setCommandOpen] = useState(false);
 
 	const isAuthenticated = !!session;
 	const email = session?.user?.email ?? null;
@@ -40,6 +44,18 @@ export function ProtectedLayout() {
 		}
 	}, [isPending, isAuthenticated, navigate]);
 
+	// Global Cmd+K keyboard shortcut
+	useEffect(() => {
+		const handleKeyDown = (e: KeyboardEvent) => {
+			if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
+				e.preventDefault();
+				setCommandOpen((open) => !open);
+			}
+		};
+		document.addEventListener('keydown', handleKeyDown);
+		return () => document.removeEventListener('keydown', handleKeyDown);
+	}, []);
+
 	// Show loading while auth is pending or redirecting
 	if (isPending || !isAuthenticated) {
 		return (
@@ -132,15 +148,16 @@ export function ProtectedLayout() {
 					</div>
 
 					<div className="flex items-center gap-3">
+						<Button variant="outline" size="sm" onClick={() => setCommandOpen(true)} className="hidden sm:flex items-center gap-2">
+							<Search className="size-3.5" />
+							<span>Search</span>
+							<Kbd>⌘K</Kbd>
+						</Button>
 						<NavLink to={CAPTURE_NAV.to}>{CAPTURE_NAV.label}</NavLink>
 						{shortEmail && <span className="hidden sm:inline text-xs text-zinc-500">{shortEmail}</span>}
-						<button
-							type="button"
-							onClick={() => signOut()}
-							className="rounded-md bg-zinc-900 px-3 py-2 text-sm text-zinc-200 hover:bg-zinc-800 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-zinc-200/40"
-						>
+						<Button variant="secondary" size="sm" onClick={() => signOut()}>
 							Sign out
-						</button>
+						</Button>
 					</div>
 				</div>
 			</header>
@@ -150,6 +167,62 @@ export function ProtectedLayout() {
 					<Outlet />
 				</div>
 			</main>
+
+			{/* Command palette (Cmd+K) */}
+			<CommandDialog open={commandOpen} onOpenChange={setCommandOpen}>
+				<CommandInput placeholder="Type to search..." />
+				<CommandList>
+					<CommandEmpty>No results found.</CommandEmpty>
+					<CommandGroup heading="Navigation">
+						<CommandItem
+							onSelect={() => {
+								navigate({ to: '/' });
+								setCommandOpen(false);
+							}}
+						>
+							<Plus className="mr-2 size-4" />
+							Capture
+						</CommandItem>
+						<CommandItem
+							onSelect={() => {
+								navigate({ to: '/search' });
+								setCommandOpen(false);
+							}}
+						>
+							<Search className="mr-2 size-4" />
+							Search
+						</CommandItem>
+						<CommandItem
+							onSelect={() => {
+								navigate({ to: '/settings' });
+								setCommandOpen(false);
+							}}
+						>
+							<Settings className="mr-2 size-4" />
+							Settings
+						</CommandItem>
+					</CommandGroup>
+					{buckets.length > 0 && (
+						<>
+							<CommandSeparator />
+							<CommandGroup heading="Buckets">
+								{buckets.map((bucket) => (
+									<CommandItem
+										key={bucket.id}
+										onSelect={() => {
+											navigate({ to: '/bucket/$slug', params: { slug: bucket.slug } });
+											setCommandOpen(false);
+										}}
+									>
+										<FolderOpen className="mr-2 size-4" />
+										{bucket.name}
+									</CommandItem>
+								))}
+							</CommandGroup>
+						</>
+					)}
+				</CommandList>
+			</CommandDialog>
 		</div>
 	);
 }

packages/web/src/components/ui/alert.tsx

@@ -0,0 +1,39 @@
+import { cva, type VariantProps } from 'class-variance-authority';
+import type * as React from 'react';
+
+import { cn } from '@/lib/utils';
+
+const alertVariants = cva(
+	'relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current',
+	{
+		variants: {
+			variant: {
+				default: 'bg-card text-card-foreground',
+				destructive: 'text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90',
+			},
+		},
+		defaultVariants: {
+			variant: 'default',
+		},
+	}
+);
+
+function Alert({ className, variant, ...props }: React.ComponentProps<'div'> & VariantProps<typeof alertVariants>) {
+	return <div data-slot="alert" role="alert" className={cn(alertVariants({ variant }), className)} {...props} />;
+}
+
+function AlertTitle({ className, ...props }: React.ComponentProps<'div'>) {
+	return <div data-slot="alert-title" className={cn('col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight', className)} {...props} />;
+}
+
+function AlertDescription({ className, ...props }: React.ComponentProps<'div'>) {
+	return (
+		<div
+			data-slot="alert-description"
+			className={cn('text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed', className)}
+			{...props}
+		/>
+	);
+}
+
+export { Alert, AlertTitle, AlertDescription };

packages/web/src/components/ui/badge.tsx

@@ -0,0 +1,39 @@
+import { Slot } from '@radix-ui/react-slot';
+import { cva, type VariantProps } from 'class-variance-authority';
+import type * as React from 'react';
+
+import { cn } from '@/lib/utils';
+
+const badgeVariants = cva(
+	'inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden',
+	{
+		variants: {
+			variant: {
+				default: 'border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90',
+				secondary: 'border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90',
+				destructive:
+					'border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
+				outline: 'text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground',
+				success: 'border-transparent bg-green-900/50 text-green-300 [a&]:hover:bg-green-900/70',
+				warning: 'border-transparent bg-yellow-900/50 text-yellow-300 [a&]:hover:bg-yellow-900/70',
+				info: 'border-transparent bg-blue-900/50 text-blue-300 [a&]:hover:bg-blue-900/70',
+			},
+		},
+		defaultVariants: {
+			variant: 'default',
+		},
+	}
+);
+
+function Badge({
+	className,
+	variant,
+	asChild = false,
+	...props
+}: React.ComponentProps<'span'> & VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
+	const Comp = asChild ? Slot : 'span';
+
+	return <Comp data-slot="badge" className={cn(badgeVariants({ variant }), className)} {...props} />;
+}
+
+export { Badge, badgeVariants };

packages/web/src/components/ui/breadcrumb.tsx

@@ -0,0 +1,64 @@
+import { Slot } from '@radix-ui/react-slot';
+import { ChevronRight, MoreHorizontal } from 'lucide-react';
+import type * as React from 'react';
+
+import { cn } from '@/lib/utils';
+
+function Breadcrumb({ ...props }: React.ComponentProps<'nav'>) {
+	return <nav aria-label="breadcrumb" data-slot="breadcrumb" {...props} />;
+}
+
+function BreadcrumbList({ className, ...props }: React.ComponentProps<'ol'>) {
+	return (
+		<ol
+			data-slot="breadcrumb-list"
+			className={cn('text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5', className)}
+			{...props}
+		/>
+	);
+}
+
+function BreadcrumbItem({ className, ...props }: React.ComponentProps<'li'>) {
+	return <li data-slot="breadcrumb-item" className={cn('inline-flex items-center gap-1.5', className)} {...props} />;
+}
+
+function BreadcrumbLink({
+	asChild,
+	className,
+	...props
+}: React.ComponentProps<'a'> & {
+	asChild?: boolean;
+}) {
+	const Comp = asChild ? Slot : 'a';
+
+	return <Comp data-slot="breadcrumb-link" className={cn('hover:text-foreground transition-colors', className)} {...props} />;
+}
+
+function BreadcrumbPage({ className, ...props }: React.ComponentProps<'span'>) {
+	return <span data-slot="breadcrumb-page" aria-current="page" className={cn('text-foreground font-normal', className)} {...props} />;
+}
+
+function BreadcrumbSeparator({ children, className, ...props }: React.ComponentProps<'li'>) {
+	return (
+		<li data-slot="breadcrumb-separator" role="presentation" aria-hidden="true" className={cn('[&>svg]:size-3.5', className)} {...props}>
+			{children ?? <ChevronRight />}
+		</li>
+	);
+}
+
+function BreadcrumbEllipsis({ className, ...props }: React.ComponentProps<'span'>) {
+	return (
+		<span
+			data-slot="breadcrumb-ellipsis"
+			role="presentation"
+			aria-hidden="true"
+			className={cn('flex size-9 items-center justify-center', className)}
+			{...props}
+		>
+			<MoreHorizontal className="size-4" />
+			<span className="sr-only">More</span>
+		</span>
+	);
+}
+
+export { Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator, BreadcrumbEllipsis };

packages/web/src/components/ui/card.tsx

@@ -0,0 +1,50 @@
+import type * as React from 'react';
+
+import { cn } from '@/lib/utils';
+
+function Card({ className, ...props }: React.ComponentProps<'div'>) {
+	return (
+		<div
+			data-slot="card"
+			className={cn('bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm', className)}
+			{...props}
+		/>
+	);
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<'div'>) {
+	return (
+		<div
+			data-slot="card-header"
+			className={cn(
+				'@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6',
+				className
+			)}
+			{...props}
+		/>
+	);
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<'div'>) {
+	return <div data-slot="card-title" className={cn('leading-none font-semibold', className)} {...props} />;
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<'div'>) {
+	return <div data-slot="card-description" className={cn('text-muted-foreground text-sm', className)} {...props} />;
+}
+
+function CardAction({ className, ...props }: React.ComponentProps<'div'>) {
+	return (
+		<div data-slot="card-action" className={cn('col-start-2 row-span-2 row-start-1 self-start justify-self-end', className)} {...props} />
+	);
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<'div'>) {
+	return <div data-slot="card-content" className={cn('px-6', className)} {...props} />;
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<'div'>) {
+	return <div data-slot="card-footer" className={cn('flex items-center px-6 [.border-t]:pt-6', className)} {...props} />;
+}
+
+export { Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent };

packages/web/src/components/ui/collapsible.tsx

@@ -0,0 +1,15 @@
+import * as CollapsiblePrimitive from '@radix-ui/react-collapsible';
+
+function Collapsible({ ...props }: React.ComponentProps<typeof CollapsiblePrimitive.Root>) {
+	return <CollapsiblePrimitive.Root data-slot="collapsible" {...props} />;
+}
+
+function CollapsibleTrigger({ ...props }: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleTrigger>) {
+	return <CollapsiblePrimitive.CollapsibleTrigger data-slot="collapsible-trigger" {...props} />;
+}
+
+function CollapsibleContent({ ...props }: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleContent>) {
+	return <CollapsiblePrimitive.CollapsibleContent data-slot="collapsible-content" {...props} />;
+}
+
+export { Collapsible, CollapsibleTrigger, CollapsibleContent };