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/my/layout.tsx

@@ -1,71 +1,15 @@
-import Link from 'next/link';
 import { getMemberToken } from '../_lib/api';
 import { redirect } from 'next/navigation';
-
-const NAV = [
-  { href: '/my', label: 'Dashboard' },
-  { href: '/my/ask', label: 'Ask AI' },
-  { href: '/my/knowledge', label: 'Knowledge' },
-  { href: '/my/digest', label: 'Digest' },
-  { href: '/my/events', label: 'Events' },
-  { href: '/my/seva', label: 'Seva & Points' },
-  { href: '/my/circles', label: 'Circles' },
-  { href: '/my/directory', label: 'Directory' },
-  { href: '/my/memories', label: 'Memories' },
-  { href: '/my/groups', label: 'My Groups' },
-  { href: '/my/settings', label: 'Settings' },
-];
+import { MemberNav } from './member-nav';
 
 export default async function MemberLayout({ children }: { children: React.ReactNode }) {
   const token = await getMemberToken();
   if (!token) redirect('/member-login');
 
   return (
-    <div className="flex h-full -m-6 min-h-screen">
-      {/* Left sidebar */}
-      <nav className="w-[220px] shrink-0 bg-white border-r border-gray-200 flex flex-col p-4">
-        <span className="font-bold text-base mb-6 px-2">TOWER</span>
-        <div className="flex flex-col gap-1 flex-1">
-          {NAV.map((item) => (
-            <Link
-              key={item.href}
-              href={item.href}
-              className="rounded-md px-3 py-2 text-sm text-gray-700 hover:bg-gray-100 transition-colors"
-            >
-              {item.label}
-            </Link>
-          ))}
-        </div>
-        <div className="border-t border-gray-200 pt-3 mt-3">
-          <p className="px-3 text-xs text-gray-400 uppercase tracking-wide">Member portal</p>
-        </div>
-      </nav>
-
-      {/* Main content */}
-      <main className="flex-1 overflow-auto p-6 bg-gray-50">
-        {children}
-      </main>
-
-      {/* Right activity rail */}
-      <aside className="w-[280px] shrink-0 bg-white border-l border-gray-200 p-4 hidden lg:block">
-        <p className="text-xs font-semibold text-gray-400 uppercase tracking-wide mb-4">Quick actions</p>
-        <div className="flex flex-col gap-2">
-          <Link
-            href="/my/settings"
-            className="text-sm text-gray-600 hover:text-gray-900 px-3 py-2 rounded-md hover:bg-gray-50"
-          >
-            Privacy settings
-          </Link>
-          <form method="POST" action="/api/my/logout">
-            <button
-              type="submit"
-              className="w-full text-left text-sm text-red-500 hover:text-red-700 px-3 py-2 rounded-md hover:bg-red-50"
-            >
-              Sign out
-            </button>
-          </form>
-        </div>
-      </aside>
+    <div className="flex h-screen overflow-hidden -m-6">
+      <MemberNav />
+      <main className="flex-1 overflow-auto bg-muted/30 p-6">{children}</main>
     </div>
   );
 }

apps/web/app/my/member-nav.tsx

@@ -0,0 +1,59 @@
+'use client';
+
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+import { cn } from '../_lib/utils';
+import { Separator } from '../_components/ui/separator';
+import { Button } from '../_components/ui/button';
+import { LayoutDashboard, Settings, Users, LogOut } from 'lucide-react';
+
+const NAV = [
+  { href: '/my', label: 'Dashboard', icon: <LayoutDashboard /> },
+  { href: '/my/groups', label: 'My Groups', icon: <Users /> },
+  { href: '/my/settings', label: 'Settings', icon: <Settings /> },
+];
+
+export function MemberNav() {
+  const pathname = usePathname();
+
+  async function logout() {
+    await fetch('/api/my/logout', { method: 'POST' });
+    window.location.href = '/member-login';
+  }
+
+  return (
+    <nav className="w-56 shrink-0 flex flex-col h-full border-r bg-sidebar">
+      <div className="px-4 py-5 flex items-center gap-2">
+        <span className="font-bold text-base text-emerald-600">TOWER</span>
+        <Separator orientation="vertical" className="h-4" />
+        <span className="text-xs text-muted-foreground font-medium">Member</span>
+      </div>
+      <Separator />
+      <div className="flex-1 overflow-y-auto py-3 px-2 space-y-0.5">
+        {NAV.map((item) => {
+          const active = item.href === '/my' ? pathname === '/my' : 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',
+              )}
+            >
+              <span className="size-4 shrink-0">{item.icon}</span>
+              {item.label}
+            </Link>
+          );
+        })}
+      </div>
+      <Separator />
+      <div className="p-3">
+        <Button variant="ghost" size="sm" className="w-full justify-start text-muted-foreground" onClick={() => void logout()}>
+          <LogOut className="size-4" />
+          Sign out
+        </Button>
+      </div>
+    </nav>
+  );
+}