feat: isolate all four portals with route groups + polished design system

Fix blank /org/login (and /admin/login): the guarded portal layout was
wrapping its own login route, rendering null when unauthenticated. Move
each portal's authed pages into a (authed)/(chapter) route group so login
pages live outside the guard.

Structure:
- app/(chapter)/* — chapter admin pages + guarded layout (was root-level)
- app/org/(authed)/* — org pages + guarded layout; /org/login now free
- app/admin/(authed)/* — admin pages + guarded layout; /admin/login free
- Root layout slimmed to providers only (no shared sidebar)
- Convert moved files' relative imports to @/app alias

Design system:
- PortalShell: shared sidebar shell (brand mark, themed active nav with
  accent bar, avatar dropdown user menu, loading skeletons)
- portal-theme.ts: per-portal theme tokens (violet/slate/blue/emerald)
- PortalLoginShell redesigned: two-column with gradient branding panel,
  dotted pattern, value-prop highlights, built-in back link
- New shadcn components: Avatar, DropdownMenu, Skeleton
- Move shared DraftCard to _components/draft-card.tsx (used by 2 portals)
- Portal selector: remove Super Admin card, icon tiles, hover lift
- All 4 login pages use react-hook-form + Zod + themed shell
- Member nav restored to full 11-section list with icons

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

apps/web/app/_components/draft-card.tsx

@@ -0,0 +1,137 @@
+'use client';
+
+import { useState } from 'react';
+import { useRouter } from 'next/navigation';
+
+interface SourceMessage {
+  id: string;
+  content: string;
+  senderName: string | null;
+  createdAt: string;
+}
+
+interface Draft {
+  id: string;
+  type: 'EVENT' | 'SEVA_TASK' | 'FAQ_ITEM';
+  status: string;
+  proposedJson: Record<string, any>;
+  confidence: number | null;
+  createdAt: string;
+  sourceMessage: SourceMessage;
+}
+
+const TYPE_LABEL: Record<Draft['type'], string> = {
+  EVENT: 'Event',
+  SEVA_TASK: 'Seva Task',
+  FAQ_ITEM: 'FAQ',
+};
+
+const TYPE_COLOR: Record<Draft['type'], string> = {
+  EVENT: 'bg-indigo-50 text-indigo-700 border-indigo-200',
+  SEVA_TASK: 'bg-green-50 text-green-700 border-green-200',
+  FAQ_ITEM: 'bg-amber-50 text-amber-700 border-amber-200',
+};
+
+function ProposedPreview({ type, data }: { type: Draft['type']; data: Record<string, any> }) {
+  if (type === 'EVENT') {
+    return (
+      <div className="space-y-1 text-sm">
+        <p><span className="font-medium text-gray-700">Title:</span> {data.title ?? '—'}</p>
+        {data.date && <p><span className="font-medium text-gray-700">Date:</span> {data.date} {data.time ?? ''}</p>}
+        {data.location && <p><span className="font-medium text-gray-700">Location:</span> {data.location}</p>}
+        {data.description && <p><span className="font-medium text-gray-700">Description:</span> {data.description}</p>}
+        {data.rsvpNeeded && <p className="text-indigo-600 text-xs">RSVP required</p>}
+        {data.sevaActionItems?.length > 0 && (
+          <p className="text-green-700 text-xs">+{data.sevaActionItems.length} seva task(s) will also be created</p>
+        )}
+      </div>
+    );
+  }
+
+  if (type === 'SEVA_TASK') {
+    return (
+      <div className="space-y-1 text-sm">
+        <p><span className="font-medium text-gray-700">Title:</span> {data.title ?? '—'}</p>
+        {data.parentEventTitle && <p><span className="font-medium text-gray-700">Event:</span> {data.parentEventTitle}</p>}
+        {data.slots && <p><span className="font-medium text-gray-700">Slots:</span> {data.slots}</p>}
+        {data.skills?.length > 0 && <p><span className="font-medium text-gray-700">Skills:</span> {data.skills.join(', ')}</p>}
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-1 text-sm">
+      <p><span className="font-medium text-gray-700">Q:</span> {data.question ?? '—'}</p>
+      <p><span className="font-medium text-gray-700">A:</span> {data.answer ?? '—'}</p>
+      {data.tags?.length > 0 && (
+        <div className="flex gap-1 flex-wrap mt-1">
+          {data.tags.map((t: string) => (
+            <span key={t} className="text-xs bg-gray-100 text-gray-600 px-2 py-0.5 rounded-full">{t}</span>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+export function DraftCard({ draft }: { draft: Draft }) {
+  const router = useRouter();
+  const [loading, setLoading] = useState<'approve' | 'reject' | null>(null);
+
+  async function act(action: 'approve' | 'reject') {
+    setLoading(action);
+    try {
+      await fetch(`/api/admin/drafts/${draft.id}/${action}`, { method: 'POST' });
+      router.refresh();
+    } finally {
+      setLoading(null);
+    }
+  }
+
+  const confidence = draft.confidence != null ? Math.round(draft.confidence * 100) : null;
+
+  return (
+    <div className="bg-white border border-gray-200 rounded-xl p-5 space-y-4">
+      <div className="flex items-start justify-between gap-3">
+        <span className={`text-xs font-semibold px-2.5 py-1 rounded-full border ${TYPE_COLOR[draft.type]}`}>
+          {TYPE_LABEL[draft.type]}
+        </span>
+        {confidence != null && (
+          <span className="text-xs text-gray-400">{confidence}% confidence</span>
+        )}
+      </div>
+
+      {/* Source message */}
+      <div className="bg-gray-50 rounded-lg p-3 border border-gray-100">
+        <p className="text-xs font-medium text-gray-500 mb-1">
+          Source message{draft.sourceMessage.senderName ? ` — ${draft.sourceMessage.senderName}` : ''}
+        </p>
+        <p className="text-sm text-gray-700 line-clamp-3">{draft.sourceMessage.content}</p>
+      </div>
+
+      {/* AI proposed content */}
+      <div>
+        <p className="text-xs font-medium text-gray-500 mb-2">AI proposed</p>
+        <ProposedPreview type={draft.type} data={draft.proposedJson} />
+      </div>
+
+      {/* Actions */}
+      <div className="flex gap-2 pt-1">
+        <button
+          onClick={() => act('approve')}
+          disabled={loading !== null}
+          className="flex-1 py-2 text-sm font-medium rounded-lg bg-indigo-600 text-white hover:bg-indigo-700 disabled:opacity-50 transition-colors"
+        >
+          {loading === 'approve' ? 'Approving…' : 'Approve'}
+        </button>
+        <button
+          onClick={() => act('reject')}
+          disabled={loading !== null}
+          className="flex-1 py-2 text-sm font-medium rounded-lg border border-gray-200 text-gray-600 hover:bg-gray-50 disabled:opacity-50 transition-colors"
+        >
+          {loading === 'reject' ? 'Rejecting…' : 'Reject'}
+        </button>
+      </div>
+    </div>
+  );
+}

apps/web/app/_components/portal-login-shell.tsx

@@ -1,47 +1,83 @@
+import Link from 'next/link';
 import { cn } from '../_lib/utils';
+import { PORTAL_THEMES, type PortalTheme } from './portal-theme';
+import { Check, ArrowLeft } from 'lucide-react';
 
 interface PortalLoginShellProps {
   title: string;
   subtitle: string;
-  accentClass?: string;
+  theme: PortalTheme;
+  /** Short value-prop bullets shown on the branding panel */
+  highlights?: string[];
   children: React.ReactNode;
   footer?: React.ReactNode;
 }
 
-export function PortalLoginShell({ title, subtitle, accentClass = 'bg-primary', children, footer }: PortalLoginShellProps) {
+export function PortalLoginShell({ title, subtitle, theme, highlights = [], children, footer }: PortalLoginShellProps) {
+  const t = PORTAL_THEMES[theme];
+
   return (
     <div className="min-h-screen grid lg:grid-cols-2">
-      {/* Left branding panel */}
-      <div className={cn('hidden lg:flex flex-col justify-between p-10 text-white', accentClass)}>
-        <div className="flex items-center gap-2">
-          <span className="font-bold text-xl tracking-tight">TOWER</span>
+      {/* Branding panel */}
+      <div className={cn('relative hidden lg:flex flex-col justify-between p-12 text-white overflow-hidden', t.gradient)}>
+        {/* decorative pattern */}
+        <div
+          className="absolute inset-0 opacity-10"
+          style={{
+            backgroundImage: 'radial-gradient(circle at 1px 1px, white 1px, transparent 0)',
+            backgroundSize: '24px 24px',
+          }}
+        />
+        <div className="relative flex items-center gap-3">
+          <div className="size-9 rounded-xl bg-white/15 backdrop-blur flex items-center justify-center font-bold">T</div>
+          <span className="font-semibold text-lg tracking-tight">TOWER</span>
         </div>
-        <div>
-          <blockquote className="space-y-2">
-            <p className="text-lg font-medium leading-relaxed">
-              "Community knowledge, beautifully organised."
-            </p>
-            <footer className="text-sm opacity-70">Insignia TOWER Platform</footer>
-          </blockquote>
+
+        <div className="relative space-y-6">
+          <h2 className="text-3xl font-bold leading-tight max-w-sm">{title}</h2>
+          {highlights.length > 0 && (
+            <ul className="space-y-3">
+              {highlights.map((h) => (
+                <li key={h} className="flex items-center gap-3 text-sm text-white/90">
+                  <span className="size-5 rounded-full bg-white/15 flex items-center justify-center shrink-0">
+                    <Check className="size-3" />
+                  </span>
+                  {h}
+                </li>
+              ))}
+            </ul>
+          )}
         </div>
+
+        <p className="relative text-sm text-white/60">Community Knowledge Infrastructure Platform</p>
       </div>
 
-      {/* Right form panel */}
-      <div className="flex items-center justify-center p-8 bg-background">
-        <div className="w-full max-w-sm space-y-6">
+      {/* Form panel */}
+      <div className="flex items-center justify-center p-6 sm:p-8 bg-background">
+        <div className="w-full max-w-sm space-y-8">
           {/* Mobile logo */}
           <div className="flex items-center gap-2 lg:hidden">
-            <span className="font-bold text-lg">TOWER</span>
+            <div className={cn('size-8 rounded-lg flex items-center justify-center text-white font-bold text-sm', t.gradient)}>T</div>
+            <span className="font-semibold">TOWER</span>
           </div>
 
-          <div className="space-y-1">
+          <div className="space-y-2">
             <h1 className="text-2xl font-bold tracking-tight">{title}</h1>
             <p className="text-sm text-muted-foreground">{subtitle}</p>
           </div>
 
           {children}
 
-          {footer && <div className="text-center text-sm text-muted-foreground">{footer}</div>}
+          <div className="space-y-3 text-center">
+            {footer}
+            <Link
+              href="/"
+              className="inline-flex items-center gap-1.5 text-xs text-muted-foreground hover:text-foreground transition-colors"
+            >
+              <ArrowLeft className="size-3" />
+              Back to portal selector
+            </Link>
+          </div>
         </div>
       </div>
     </div>

apps/web/app/_components/portal-nav.tsx

@@ -1,82 +0,0 @@
-'use client';
-
-import Link from 'next/link';
-import { usePathname } from 'next/navigation';
-import { cn } from '../_lib/utils';
-import { Button } from './ui/button';
-import { Separator } from './ui/separator';
-import { LogOut } from 'lucide-react';
-
-interface NavItem {
-  href: string;
-  label: string;
-  icon?: React.ReactNode;
-}
-
-interface PortalNavProps {
-  portalName: string;
-  navItems: NavItem[];
-  user?: { name?: string | null; email?: string | null; role?: string };
-  onLogout: () => void;
-  accentClass?: string;
-}
-
-export function PortalNav({ portalName, navItems, user, onLogout, accentClass = 'text-primary' }: PortalNavProps) {
-  const pathname = usePathname();
-
-  return (
-    <nav className="w-56 shrink-0 flex flex-col h-full border-r bg-sidebar">
-      {/* Logo */}
-      <div className="px-4 py-5 flex items-center gap-2">
-        <span className={cn('font-bold text-base', accentClass)}>TOWER</span>
-        <Separator orientation="vertical" className="h-4" />
-        <span className="text-xs text-muted-foreground font-medium">{portalName}</span>
-      </div>
-
-      <Separator />
-
-      {/* Nav links */}
-      <div className="flex-1 overflow-y-auto py-3 px-2 space-y-0.5">
-        {navItems.map((item) => {
-          const active = item.href === '/'
-            ? pathname === '/'
-            : pathname.startsWith(item.href);
-          return (
-            <Link
-              key={item.href}
-              href={item.href}
-              className={cn(
-                'flex items-center gap-3 rounded-md px-3 py-2 text-sm transition-colors',
-                active
-                  ? 'bg-accent text-accent-foreground font-medium'
-                  : 'text-muted-foreground hover:bg-accent hover:text-accent-foreground',
-              )}
-            >
-              {item.icon && <span className="size-4 shrink-0">{item.icon}</span>}
-              {item.label}
-            </Link>
-          );
-        })}
-      </div>
-
-      <Separator />
-
-      {/* User footer */}
-      {user && (
-        <div className="p-3 space-y-2">
-          <div className="px-3 py-2">
-            <p className="text-sm font-medium truncate">{user.name ?? user.email}</p>
-            {user.name && <p className="text-xs text-muted-foreground truncate">{user.email}</p>}
-            {user.role && (
-              <p className="text-xs text-muted-foreground uppercase tracking-wide mt-0.5">{user.role.replace(/_/g, ' ')}</p>
-            )}
-          </div>
-          <Button variant="ghost" size="sm" className="w-full justify-start text-muted-foreground" onClick={onLogout}>
-            <LogOut className="size-4" />
-            Sign out
-          </Button>
-        </div>
-      )}
-    </nav>
-  );
-}

apps/web/app/_components/portal-shell.tsx

@@ -0,0 +1,151 @@
+'use client';
+
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+import { cn } from '@/app/_lib/utils';
+import { Skeleton } from './ui/skeleton';
+import { Avatar, AvatarFallback } from './ui/avatar';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from './ui/dropdown-menu';
+import { PORTAL_THEMES, type PortalTheme, initials } from './portal-theme';
+import { ChevronsUpDown, LogOut } from 'lucide-react';
+
+export interface PortalNavItem {
+  href: string;
+  label: string;
+  icon: React.ReactNode;
+}
+
+interface PortalUser {
+  name?: string | null;
+  email?: string | null;
+  role?: string | null;
+  subtitle?: string | null;
+}
+
+interface PortalShellProps {
+  portalName: string;
+  theme: PortalTheme;
+  navItems: PortalNavItem[];
+  user?: PortalUser;
+  loading: boolean;
+  authed: boolean;
+  onLogout: () => void;
+  children: React.ReactNode;
+}
+
+export function PortalShell({
+  portalName, theme, navItems, user, loading, authed, onLogout, children,
+}: PortalShellProps) {
+  const pathname = usePathname();
+  const t = PORTAL_THEMES[theme];
+
+  return (
+    <div className="flex h-screen overflow-hidden">
+      {/* Sidebar */}
+      <aside className="w-60 shrink-0 flex flex-col border-r bg-sidebar">
+        {/* Brand */}
+        <div className="h-16 flex items-center gap-3 px-5 border-b">
+          <div className={cn('size-8 rounded-lg flex items-center justify-center text-white font-bold text-sm shadow-sm', t.gradient)}>
+            T
+          </div>
+          <div className="flex flex-col leading-none">
+            <span className="font-semibold text-sm tracking-tight">TOWER</span>
+            <span className="text-[11px] text-muted-foreground mt-0.5">{portalName}</span>
+          </div>
+        </div>
+
+        {/* Nav */}
+        <nav className="flex-1 overflow-y-auto p-3 space-y-1">
+          {loading ? (
+            <div className="space-y-2 p-1">
+              {Array.from({ length: navItems.length }).map((_, i) => <Skeleton key={i} className="h-9 w-full" />)}
+            </div>
+          ) : (
+            navItems.map((item) => {
+              // Portal root (e.g. /admin, /org) is a single segment — match exactly so it
+              // doesn't stay highlighted on sub-routes. Deeper items match by prefix.
+              const isRoot = item.href.split('/').filter(Boolean).length === 1;
+              const isActive = isRoot
+                ? pathname === item.href
+                : pathname === item.href || pathname.startsWith(item.href + '/');
+              return (
+                <Link
+                  key={item.href}
+                  href={item.href}
+                  className={cn(
+                    'group relative flex items-center gap-3 rounded-lg px-3 py-2 text-sm transition-colors',
+                    isActive
+                      ? cn(t.activeBg, t.activeText, 'font-medium')
+                      : 'text-muted-foreground hover:bg-accent hover:text-foreground',
+                  )}
+                >
+                  {isActive && <span className={cn('absolute left-0 top-1/2 -translate-y-1/2 h-5 w-1 rounded-r-full', t.bar)} />}
+                  <span className="size-4 shrink-0 [&_svg]:size-4">{item.icon}</span>
+                  {item.label}
+                </Link>
+              );
+            })
+          )}
+        </nav>
+
+        {/* User */}
+        <div className="p-3 border-t">
+          {loading ? (
+            <div className="flex items-center gap-3 px-1">
+              <Skeleton className="size-9 rounded-full" />
+              <div className="flex-1 space-y-1.5">
+                <Skeleton className="h-3 w-24" />
+                <Skeleton className="h-2.5 w-16" />
+              </div>
+            </div>
+          ) : user ? (
+            <DropdownMenu>
+              <DropdownMenuTrigger className="w-full flex items-center gap-3 rounded-lg p-2 hover:bg-accent transition-colors text-left outline-none">
+                <Avatar>
+                  <AvatarFallback className={cn(t.gradient, 'text-white')}>{initials(user.name, user.email)}</AvatarFallback>
+                </Avatar>
+                <div className="flex-1 min-w-0">
+                  <p className="text-sm font-medium truncate">{user.name ?? user.email}</p>
+                  <p className="text-xs text-muted-foreground truncate">{user.subtitle ?? user.role ?? user.email}</p>
+                </div>
+                <ChevronsUpDown className="size-4 text-muted-foreground shrink-0" />
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="end" side="top" className="w-52">
+                <DropdownMenuLabel className="flex flex-col">
+                  <span className="text-sm truncate">{user.name ?? user.email}</span>
+                  <span className="text-xs font-normal text-muted-foreground truncate">{user.email}</span>
+                </DropdownMenuLabel>
+                <DropdownMenuSeparator />
+                <DropdownMenuItem onClick={onLogout} className="text-destructive focus:text-destructive">
+                  <LogOut className="size-4" />
+                  Sign out
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          ) : null}
+        </div>
+      </aside>
+
+      {/* Main */}
+      <main className="flex-1 overflow-auto bg-muted/30">
+        {!loading && authed ? (
+          <div className="p-6 lg:p-8 max-w-6xl mx-auto w-full">{children}</div>
+        ) : (
+          <div className="p-8 space-y-4">
+            <Skeleton className="h-8 w-48" />
+            <div className="grid grid-cols-4 gap-4">
+              {Array.from({ length: 4 }).map((_, i) => <Skeleton key={i} className="h-24" />)}
+            </div>
+          </div>
+        )}
+      </main>
+    </div>
+  );
+}

apps/web/app/_components/portal-theme.ts

@@ -0,0 +1,58 @@
+export type PortalTheme = 'violet' | 'slate' | 'blue' | 'emerald';
+
+interface ThemeTokens {
+  /** Gradient for the logo mark and login branding panel */
+  gradient: string;
+  /** Text accent for the brand wordmark */
+  text: string;
+  /** Active nav item background */
+  activeBg: string;
+  /** Active nav item text */
+  activeText: string;
+  /** Active left indicator bar */
+  bar: string;
+  /** Ring/border tint used in login branding */
+  soft: string;
+}
+
+export const PORTAL_THEMES: Record<PortalTheme, ThemeTokens> = {
+  violet: {
+    gradient: 'bg-gradient-to-br from-violet-500 to-purple-700',
+    text: 'text-violet-600',
+    activeBg: 'bg-violet-50',
+    activeText: 'text-violet-700',
+    bar: 'bg-violet-600',
+    soft: 'text-violet-100',
+  },
+  slate: {
+    gradient: 'bg-gradient-to-br from-slate-700 to-slate-900',
+    text: 'text-slate-800',
+    activeBg: 'bg-slate-100',
+    activeText: 'text-slate-900',
+    bar: 'bg-slate-800',
+    soft: 'text-slate-200',
+  },
+  blue: {
+    gradient: 'bg-gradient-to-br from-blue-500 to-indigo-700',
+    text: 'text-blue-600',
+    activeBg: 'bg-blue-50',
+    activeText: 'text-blue-700',
+    bar: 'bg-blue-600',
+    soft: 'text-blue-100',
+  },
+  emerald: {
+    gradient: 'bg-gradient-to-br from-emerald-500 to-teal-700',
+    text: 'text-emerald-600',
+    activeBg: 'bg-emerald-50',
+    activeText: 'text-emerald-700',
+    bar: 'bg-emerald-600',
+    soft: 'text-emerald-100',
+  },
+};
+
+export function initials(name?: string | null, email?: string | null): string {
+  const source = (name ?? email ?? '?').trim();
+  const parts = source.split(/\s+/).filter(Boolean);
+  if (parts.length >= 2) return (parts[0][0] + parts[1][0]).toUpperCase();
+  return source.slice(0, 2).toUpperCase();
+}

apps/web/app/_components/ui/avatar.tsx

@@ -0,0 +1,39 @@
+'use client';
+
+import * as React from 'react';
+import * as AvatarPrimitive from '@radix-ui/react-avatar';
+import { cn } from '@/app/_lib/utils';
+
+const Avatar = React.forwardRef<
+  React.ComponentRef<typeof AvatarPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Root
+    ref={ref}
+    className={cn('relative flex size-9 shrink-0 overflow-hidden rounded-full', className)}
+    {...props}
+  />
+));
+Avatar.displayName = AvatarPrimitive.Root.displayName;
+
+const AvatarImage = React.forwardRef<
+  React.ComponentRef<typeof AvatarPrimitive.Image>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Image ref={ref} className={cn('aspect-square h-full w-full', className)} {...props} />
+));
+AvatarImage.displayName = AvatarPrimitive.Image.displayName;
+
+const AvatarFallback = React.forwardRef<
+  React.ComponentRef<typeof AvatarPrimitive.Fallback>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Fallback
+    ref={ref}
+    className={cn('flex h-full w-full items-center justify-center rounded-full bg-muted text-xs font-medium', className)}
+    {...props}
+  />
+));
+AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
+
+export { Avatar, AvatarImage, AvatarFallback };

apps/web/app/_components/ui/dropdown-menu.tsx

@@ -0,0 +1,76 @@
+'use client';
+
+import * as React from 'react';
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
+import { cn } from '@/app/_lib/utils';
+
+const DropdownMenu = DropdownMenuPrimitive.Root;
+const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
+const DropdownMenuGroup = DropdownMenuPrimitive.Group;
+const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
+
+const DropdownMenuContent = React.forwardRef<
+  React.ComponentRef<typeof DropdownMenuPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <DropdownMenuPrimitive.Portal>
+    <DropdownMenuPrimitive.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      className={cn(
+        'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md',
+        'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',
+        className,
+      )}
+      {...props}
+    />
+  </DropdownMenuPrimitive.Portal>
+));
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
+
+const DropdownMenuItem = React.forwardRef<
+  React.ComponentRef<typeof DropdownMenuPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & { inset?: boolean }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Item
+    ref={ref}
+    className={cn(
+      'relative flex cursor-pointer select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0',
+      inset && 'pl-8',
+      className,
+    )}
+    {...props}
+  />
+));
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
+
+const DropdownMenuLabel = React.forwardRef<
+  React.ComponentRef<typeof DropdownMenuPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & { inset?: boolean }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Label
+    ref={ref}
+    className={cn('px-2 py-1.5 text-sm font-semibold', inset && 'pl-8', className)}
+    {...props}
+  />
+));
+DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
+
+const DropdownMenuSeparator = React.forwardRef<
+  React.ComponentRef<typeof DropdownMenuPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.Separator ref={ref} className={cn('-mx-1 my-1 h-px bg-muted', className)} {...props} />
+));
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
+
+export {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuGroup,
+  DropdownMenuPortal,
+};

apps/web/app/_components/ui/skeleton.tsx

@@ -0,0 +1,7 @@
+import { cn } from '@/app/_lib/utils';
+
+function Skeleton({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return <div className={cn('animate-pulse rounded-md bg-muted', className)} {...props} />;
+}
+
+export { Skeleton };