feat: portal redesign — shadcn/ui, React Query, Zod, isolated portals

Foundation:
- CLAUDE.md with full coding rules (tech stack, patterns, redirect rules)
- Install @tanstack/react-query, zod, react-hook-form, shadcn/ui deps
- CSS variables design system (Tailwind v4 + tw-animate-css)
- Shared components: Button, Input, Label, Card, Badge, Separator, Form
- PortalLoginShell: two-column login layout (branding left, form right)
- PortalNav: shared sidebar nav used by all portals
- ReactQueryProvider in root layout
- api-client.ts: typed fetch wrapper (no raw fetch in components)

Portal isolation:
- Sidebar now returns null for all non-chapter routes; portals own their layout
- Admin layout: auth guard + PortalNav (slate accent)
- Org layout: auth guard + PortalNav (violet accent)
- Member layout: server-side cookie check → MemberNav client component
- Chapter admin sidebar: PortalNav (blue accent)

Login pages (all use react-hook-form + Zod + PortalLoginShell):
- /login → defaults next to /search (was /) — fixes redirect bug
- /admin/login → replaces /admin
- /org/login → replaces /org
- /member-login → two-step phone+OTP with proper form validation

Portal selector (/) redesigned with accent border-left cards

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

apps/web/app/login/page.tsx

@@ -1,113 +1,87 @@
 'use client';
 
+import { Suspense } from 'react';
 import { useRouter, useSearchParams } from 'next/navigation';
-import { Suspense, useEffect, useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { z } from 'zod';
 import { useAuth } from '../_lib/auth-context';
-import { useSuperAdmin } from '../_lib/super-admin-context';
+import { PortalLoginShell } from '../_components/portal-login-shell';
+import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '../_components/ui/form';
+import { Input } from '../_components/ui/input';
+import { Button } from '../_components/ui/button';
+import Link from 'next/link';
+
+const schema = z.object({
+  email: z.string().email('Enter a valid email'),
+  password: z.string().min(1, 'Password is required'),
+});
+type FormValues = z.infer<typeof schema>;
 
 function LoginForm() {
   const router = useRouter();
   const searchParams = useSearchParams();
   const { refresh } = useAuth();
-  const { admin: superAdmin, loading: superLoading } = useSuperAdmin();
-  const next = searchParams.get('next') ?? '/';
-  const [email, setEmail] = useState('');
-  const [password, setPassword] = useState('');
-  const [submitting, setSubmitting] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-  const [redirecting, setRedirecting] = useState(false);
+  const next = searchParams.get('next') ?? '/search';
 
-  useEffect(() => {
-    if (!superLoading && superAdmin) {
-      setRedirecting(true);
-      router.replace('/admin');
-    }
-  }, [superAdmin, superLoading, router]);
-
-  if (superLoading) {
-    return <div className="bg-white p-6 rounded-xl border border-gray-200 h-64 animate-pulse" />;
-  }
-
-  if (redirecting) {
-    return <p className="text-sm text-gray-500">Redirecting to admin panel…</p>;
-  }
-
-  async function onSubmit(e: React.FormEvent) {
-    e.preventDefault();
-    setSubmitting(true);
-    setError(null);
-    try {
-      const res = await fetch('/api/auth/login', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ email, password }),
-        credentials: 'include',
-      });
-      if (!res.ok) {
-        const data = await res.json().catch(() => ({}));
-        setError(data?.message ?? 'Invalid email or password');
-        return;
-      }
-      await refresh();
-      router.push(next);
-      router.refresh();
-    } catch (err) {
-      setError(err instanceof Error ? err.message : 'Network error');
-    } finally {
-      setSubmitting(false);
+  const form = useForm<FormValues>({ resolver: zodResolver(schema), defaultValues: { email: '', password: '' } });
+
+  async function onSubmit(values: FormValues) {
+    const res = await fetch('/api/auth/login', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(values),
+      credentials: 'include',
+    });
+    if (!res.ok) {
+      const data = await res.json().catch(() => ({})) as { message?: string };
+      form.setError('root', { message: data.message ?? 'Invalid email or password' });
+      return;
     }
+    await refresh();
+    router.push(next);
+    router.refresh();
   }
 
   return (
-    <form onSubmit={onSubmit} className="flex flex-col gap-4 bg-white p-6 rounded-xl border border-gray-200">
-      <label className="flex flex-col gap-1 text-sm">
-        <span className="font-medium text-gray-700">Email</span>
-        <input
-          type="email"
-          value={email}
-          onChange={(e) => setEmail(e.target.value)}
-          required
-          autoComplete="username"
-          className="rounded border border-gray-300 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-200"
-        />
-      </label>
-      <label className="flex flex-col gap-1 text-sm">
-        <span className="font-medium text-gray-700">Password</span>
-        <input
-          type="password"
-          value={password}
-          onChange={(e) => setPassword(e.target.value)}
-          required
-          autoComplete="current-password"
-          className="rounded border border-gray-300 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-200"
-        />
-      </label>
-      {error && <p className="text-sm text-red-600" role="alert">{error}</p>}
-      <button
-        type="submit"
-        disabled={submitting}
-        className="rounded bg-blue-600 text-white py-2 font-medium hover:bg-blue-700 disabled:opacity-50"
-      >
-        {submitting ? 'Signing in…' : 'Sign in'}
-      </button>
-    </form>
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
+        <FormField control={form.control} name="email" render={({ field }) => (
+          <FormItem>
+            <FormLabel>Email</FormLabel>
+            <FormControl><Input type="email" placeholder="admin@chapter.com" autoComplete="username" {...field} /></FormControl>
+            <FormMessage />
+          </FormItem>
+        )} />
+        <FormField control={form.control} name="password" render={({ field }) => (
+          <FormItem>
+            <FormLabel>Password</FormLabel>
+            <FormControl><Input type="password" autoComplete="current-password" {...field} /></FormControl>
+            <FormMessage />
+          </FormItem>
+        )} />
+        {form.formState.errors.root && (
+          <p className="text-sm text-destructive">{form.formState.errors.root.message}</p>
+        )}
+        <Button type="submit" className="w-full" disabled={form.formState.isSubmitting}>
+          {form.formState.isSubmitting ? 'Signing in…' : 'Sign in'}
+        </Button>
+      </form>
+    </Form>
   );
 }
 
-export default function LoginPage() {
+export default function ChapterLoginPage() {
   return (
-    <div className="max-w-sm mx-auto mt-16">
-      <h1 className="text-2xl font-semibold mb-2">Sign in</h1>
-      <p className="text-sm text-gray-500 mb-6">TOWER administrative console</p>
-      <Suspense fallback={<div className="bg-white p-6 rounded-xl border border-gray-200 h-64" />}>
+    <PortalLoginShell
+      title="Chapter Portal"
+      subtitle="Sign in to manage your chapter's messages and groups."
+      accentClass="bg-blue-600"
+      footer={<Link href="/" className="hover:text-foreground transition-colors">← Back to portal selector</Link>}
+    >
+      <Suspense>
         <LoginForm />
       </Suspense>
-      <p className="text-sm text-gray-500 mt-6 text-center">
-        New here?{' '}
-        <a href="/signup" className="text-blue-600 hover:underline">
-          Create a community
-        </a>
-      </p>
-    </div>
+    </PortalLoginShell>
   );
 }