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>
This commit is contained in:
@@ -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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user