673 lines
24 KiB
TypeScript
673 lines
24 KiB
TypeScript
'use client';
|
|
|
|
import { useQueryClient } from '@tanstack/react-query';
|
|
import type { LucideIcon } from 'lucide-react';
|
|
import { Activity, BarChart3, BookOpenText, ChartCandlestick, Eye, Landmark, LineChart, LogOut, Menu, NotebookTabs, Search } from 'lucide-react';
|
|
import Link from 'next/link';
|
|
import { usePathname, useRouter, useSearchParams } from 'next/navigation';
|
|
import { useEffect, useMemo, useState } from 'react';
|
|
import { authClient } from '@/lib/auth-client';
|
|
import { TaskDetailModal } from '@/components/notifications/task-detail-modal';
|
|
import { TaskNotificationsTrigger } from '@/components/notifications/task-notifications-trigger';
|
|
import {
|
|
companyAnalysisQueryOptions,
|
|
companyFinancialStatementsQueryOptions,
|
|
filingsQueryOptions,
|
|
holdingsQueryOptions,
|
|
latestPortfolioInsightQueryOptions,
|
|
portfolioSummaryQueryOptions,
|
|
recentTasksQueryOptions,
|
|
watchlistQueryOptions
|
|
} from '@/lib/query/options';
|
|
import { buildGraphingHref } from '@/lib/graphing/catalog';
|
|
import type { ActiveContext, NavGroup, NavItem } from '@/lib/types';
|
|
import { Button } from '@/components/ui/button';
|
|
import { useTaskNotificationsCenter } from '@/hooks/use-task-notifications-center';
|
|
import { cn } from '@/lib/utils';
|
|
|
|
type AppShellProps = {
|
|
title: string;
|
|
subtitle?: string;
|
|
actions?: React.ReactNode;
|
|
activeTicker?: string | null;
|
|
breadcrumbs?: Array<{ label: string; href?: string }>;
|
|
children: React.ReactNode;
|
|
};
|
|
|
|
type NavConfigItem = NavItem & {
|
|
icon: LucideIcon;
|
|
};
|
|
|
|
const NAV_ITEMS: NavConfigItem[] = [
|
|
{
|
|
id: 'home',
|
|
href: '/',
|
|
label: 'Home',
|
|
icon: Activity,
|
|
group: 'overview',
|
|
matchMode: 'exact',
|
|
mobilePrimary: true
|
|
},
|
|
{
|
|
id: 'analysis',
|
|
href: '/analysis',
|
|
label: 'Analysis',
|
|
icon: LineChart,
|
|
group: 'research',
|
|
matchMode: 'prefix',
|
|
preserveTicker: true,
|
|
mobilePrimary: true
|
|
},
|
|
{
|
|
id: 'research',
|
|
href: '/research',
|
|
label: 'Research',
|
|
icon: NotebookTabs,
|
|
group: 'research',
|
|
matchMode: 'exact',
|
|
preserveTicker: true,
|
|
mobilePrimary: true
|
|
},
|
|
{
|
|
id: 'graphing',
|
|
href: '/graphing',
|
|
label: 'Graphing',
|
|
icon: BarChart3,
|
|
group: 'research',
|
|
matchMode: 'exact',
|
|
preserveTicker: true,
|
|
mobilePrimary: false
|
|
},
|
|
{
|
|
id: 'financials',
|
|
href: '/financials',
|
|
label: 'Financials',
|
|
icon: Landmark,
|
|
group: 'research',
|
|
matchMode: 'exact',
|
|
preserveTicker: true,
|
|
mobilePrimary: false
|
|
},
|
|
{
|
|
id: 'filings',
|
|
href: '/filings',
|
|
label: 'Filings',
|
|
icon: BookOpenText,
|
|
group: 'research',
|
|
matchMode: 'exact',
|
|
preserveTicker: true,
|
|
mobilePrimary: true
|
|
},
|
|
{
|
|
id: 'search',
|
|
href: '/search',
|
|
label: 'Search',
|
|
icon: Search,
|
|
group: 'research',
|
|
matchMode: 'exact',
|
|
preserveTicker: true,
|
|
mobilePrimary: false
|
|
},
|
|
{
|
|
id: 'portfolio',
|
|
href: '/portfolio',
|
|
label: 'Portfolio',
|
|
icon: ChartCandlestick,
|
|
group: 'portfolio',
|
|
matchMode: 'exact',
|
|
mobilePrimary: true
|
|
},
|
|
{
|
|
id: 'watchlist',
|
|
href: '/watchlist',
|
|
label: 'Coverage',
|
|
icon: Eye,
|
|
group: 'portfolio',
|
|
matchMode: 'exact',
|
|
mobilePrimary: true
|
|
}
|
|
];
|
|
|
|
const GROUP_LABELS: Record<NavGroup, string> = {
|
|
overview: 'Overview',
|
|
research: 'Research',
|
|
portfolio: 'Portfolio'
|
|
};
|
|
|
|
function normalizeTicker(value: string | null | undefined) {
|
|
const normalized = value?.trim().toUpperCase() ?? '';
|
|
return normalized.length > 0 ? normalized : null;
|
|
}
|
|
|
|
function toTickerHref(baseHref: string, activeTicker: string | null) {
|
|
if (!activeTicker) {
|
|
return baseHref;
|
|
}
|
|
|
|
const separator = baseHref.includes('?') ? '&' : '?';
|
|
return `${baseHref}${separator}ticker=${encodeURIComponent(activeTicker)}`;
|
|
}
|
|
|
|
function resolveNavHref(item: NavItem, context: ActiveContext) {
|
|
if (item.href === '/graphing') {
|
|
return buildGraphingHref(context.activeTicker);
|
|
}
|
|
|
|
if (!item.preserveTicker) {
|
|
return item.href;
|
|
}
|
|
|
|
return toTickerHref(item.href, context.activeTicker);
|
|
}
|
|
|
|
function isItemActive(item: NavItem, pathname: string) {
|
|
if (item.matchMode === 'prefix') {
|
|
return pathname === item.href || pathname.startsWith(`${item.href}/`);
|
|
}
|
|
|
|
return pathname === item.href;
|
|
}
|
|
|
|
function buildDefaultBreadcrumbs(pathname: string, activeTicker: string | null) {
|
|
const analysisHref = toTickerHref('/analysis', activeTicker);
|
|
const researchHref = toTickerHref('/research', activeTicker);
|
|
const graphingHref = buildGraphingHref(activeTicker);
|
|
const financialsHref = toTickerHref('/financials', activeTicker);
|
|
const filingsHref = toTickerHref('/filings', activeTicker);
|
|
|
|
if (pathname === '/') {
|
|
return [{ label: 'Home' }];
|
|
}
|
|
|
|
if (pathname.startsWith('/analysis/reports/')) {
|
|
return [
|
|
{ label: 'Analysis', href: analysisHref },
|
|
{ label: 'Reports', href: analysisHref },
|
|
{ label: activeTicker ?? 'Summary' }
|
|
];
|
|
}
|
|
|
|
if (pathname.startsWith('/analysis')) {
|
|
return [{ label: 'Analysis' }];
|
|
}
|
|
|
|
if (pathname.startsWith('/research')) {
|
|
return [
|
|
{ label: 'Analysis', href: analysisHref },
|
|
{ label: 'Research', href: researchHref }
|
|
];
|
|
}
|
|
|
|
if (pathname.startsWith('/financials')) {
|
|
return [
|
|
{ label: 'Analysis', href: analysisHref },
|
|
{ label: 'Financials' }
|
|
];
|
|
}
|
|
|
|
if (pathname.startsWith('/graphing')) {
|
|
return [
|
|
{ label: 'Analysis', href: analysisHref },
|
|
{ label: 'Graphing', href: graphingHref },
|
|
{ label: activeTicker ?? 'Compare Set' }
|
|
];
|
|
}
|
|
|
|
if (pathname.startsWith('/filings')) {
|
|
return [
|
|
{ label: 'Analysis', href: analysisHref },
|
|
{ label: 'Filings' }
|
|
];
|
|
}
|
|
|
|
if (pathname.startsWith('/search')) {
|
|
return [
|
|
{ label: 'Analysis', href: analysisHref },
|
|
{ label: 'Search' }
|
|
];
|
|
}
|
|
|
|
if (pathname.startsWith('/portfolio')) {
|
|
return [{ label: 'Portfolio' }];
|
|
}
|
|
|
|
if (pathname.startsWith('/watchlist')) {
|
|
return [
|
|
{ label: 'Portfolio', href: '/portfolio' },
|
|
{ label: 'Coverage' }
|
|
];
|
|
}
|
|
|
|
return [{ label: 'Home', href: '/' }, { label: pathname }];
|
|
}
|
|
|
|
export function AppShell({ title, subtitle, actions, activeTicker, breadcrumbs, children }: AppShellProps) {
|
|
const pathname = usePathname();
|
|
const router = useRouter();
|
|
const searchParams = useSearchParams();
|
|
const queryClient = useQueryClient();
|
|
|
|
const [isSigningOut, setIsSigningOut] = useState(false);
|
|
const [isMoreOpen, setIsMoreOpen] = useState(false);
|
|
const notifications = useTaskNotificationsCenter();
|
|
const { data: session } = authClient.useSession();
|
|
const sessionUser = (session?.user ?? null) as { name?: string | null; email?: string | null; role?: unknown } | null;
|
|
|
|
const role = typeof sessionUser?.role === 'string'
|
|
? sessionUser.role
|
|
: Array.isArray(sessionUser?.role)
|
|
? sessionUser.role.filter((entry): entry is string => typeof entry === 'string').join(', ')
|
|
: null;
|
|
|
|
const displayName = sessionUser?.name || sessionUser?.email || 'Authenticated user';
|
|
|
|
const derivedTickerFromPath = useMemo(() => {
|
|
if (!pathname.startsWith('/analysis/reports/')) {
|
|
return null;
|
|
}
|
|
|
|
const segments = pathname.split('/').filter(Boolean);
|
|
const tickerSegment = segments[2];
|
|
return tickerSegment ? normalizeTicker(decodeURIComponent(tickerSegment)) : null;
|
|
}, [pathname]);
|
|
|
|
const context: ActiveContext = useMemo(() => {
|
|
const queryTicker = normalizeTicker(searchParams.get('ticker'));
|
|
|
|
return {
|
|
pathname,
|
|
activeTicker: normalizeTicker(activeTicker) ?? queryTicker ?? derivedTickerFromPath
|
|
};
|
|
}, [activeTicker, derivedTickerFromPath, pathname, searchParams]);
|
|
|
|
const navEntries = useMemo(() => {
|
|
return NAV_ITEMS.map((item) => {
|
|
const href = resolveNavHref(item, context);
|
|
return {
|
|
...item,
|
|
href,
|
|
active: isItemActive(item, pathname)
|
|
};
|
|
});
|
|
}, [context, pathname]);
|
|
|
|
const groupedNav = useMemo(() => {
|
|
const groups: Array<{ group: NavGroup; items: typeof navEntries }> = [
|
|
{ group: 'overview', items: [] },
|
|
{ group: 'research', items: [] },
|
|
{ group: 'portfolio', items: [] }
|
|
];
|
|
|
|
for (const entry of navEntries) {
|
|
const group = groups.find((candidate) => candidate.group === entry.group);
|
|
if (group) {
|
|
group.items.push(entry);
|
|
}
|
|
}
|
|
|
|
return groups;
|
|
}, [navEntries]);
|
|
|
|
const mobilePrimaryEntries = useMemo(() => {
|
|
return navEntries.filter((entry) => entry.mobilePrimary);
|
|
}, [navEntries]);
|
|
|
|
const mobileMoreEntries = useMemo(() => {
|
|
return navEntries.filter((entry) => !entry.mobilePrimary);
|
|
}, [navEntries]);
|
|
|
|
const breadcrumbItems = useMemo(() => {
|
|
if (breadcrumbs && breadcrumbs.length > 0) {
|
|
return breadcrumbs;
|
|
}
|
|
|
|
return buildDefaultBreadcrumbs(pathname, context.activeTicker);
|
|
}, [breadcrumbs, context.activeTicker, pathname]);
|
|
|
|
const prefetchForHref = (href: string) => {
|
|
router.prefetch(href);
|
|
|
|
if (href.startsWith('/analysis')) {
|
|
if (context.activeTicker) {
|
|
void queryClient.prefetchQuery(companyAnalysisQueryOptions(context.activeTicker));
|
|
}
|
|
return;
|
|
}
|
|
|
|
if (href.startsWith('/financials')) {
|
|
if (context.activeTicker) {
|
|
void queryClient.prefetchQuery(companyAnalysisQueryOptions(context.activeTicker));
|
|
}
|
|
return;
|
|
}
|
|
|
|
if (href.startsWith('/graphing')) {
|
|
if (context.activeTicker) {
|
|
void queryClient.prefetchQuery(companyFinancialStatementsQueryOptions({
|
|
ticker: context.activeTicker,
|
|
surfaceKind: 'income_statement',
|
|
cadence: 'annual',
|
|
includeDimensions: false,
|
|
includeFacts: false,
|
|
limit: 16
|
|
}));
|
|
}
|
|
return;
|
|
}
|
|
|
|
if (href.startsWith('/filings')) {
|
|
void queryClient.prefetchQuery(filingsQueryOptions({
|
|
ticker: context.activeTicker ?? undefined,
|
|
limit: 120
|
|
}));
|
|
return;
|
|
}
|
|
|
|
if (href.startsWith('/search')) {
|
|
if (context.activeTicker) {
|
|
void queryClient.prefetchQuery(companyAnalysisQueryOptions(context.activeTicker));
|
|
}
|
|
return;
|
|
}
|
|
|
|
if (href.startsWith('/portfolio')) {
|
|
void queryClient.prefetchQuery(holdingsQueryOptions());
|
|
void queryClient.prefetchQuery(portfolioSummaryQueryOptions());
|
|
void queryClient.prefetchQuery(latestPortfolioInsightQueryOptions());
|
|
return;
|
|
}
|
|
|
|
if (href.startsWith('/watchlist')) {
|
|
void queryClient.prefetchQuery(watchlistQueryOptions());
|
|
return;
|
|
}
|
|
|
|
if (href === '/') {
|
|
void queryClient.prefetchQuery(portfolioSummaryQueryOptions());
|
|
void queryClient.prefetchQuery(filingsQueryOptions({ limit: 200 }));
|
|
void queryClient.prefetchQuery(watchlistQueryOptions());
|
|
void queryClient.prefetchQuery(recentTasksQueryOptions(20));
|
|
void queryClient.prefetchQuery(latestPortfolioInsightQueryOptions());
|
|
}
|
|
};
|
|
|
|
useEffect(() => {
|
|
const browserWindow = window as Window & {
|
|
requestIdleCallback?: (callback: IdleRequestCallback) => number;
|
|
cancelIdleCallback?: (handle: number) => void;
|
|
};
|
|
|
|
const runPrefetch = () => {
|
|
const prioritized = navEntries.filter((entry) => entry.id === 'analysis' || entry.id === 'graphing' || entry.id === 'filings' || entry.id === 'portfolio');
|
|
for (const entry of prioritized) {
|
|
prefetchForHref(entry.href);
|
|
}
|
|
};
|
|
|
|
if (browserWindow.requestIdleCallback) {
|
|
const idleId = browserWindow.requestIdleCallback(() => {
|
|
runPrefetch();
|
|
});
|
|
|
|
return () => {
|
|
browserWindow.cancelIdleCallback?.(idleId);
|
|
};
|
|
}
|
|
|
|
const timeoutId = window.setTimeout(() => {
|
|
runPrefetch();
|
|
}, 320);
|
|
|
|
return () => {
|
|
window.clearTimeout(timeoutId);
|
|
};
|
|
}, [navEntries]);
|
|
|
|
useEffect(() => {
|
|
notifications.setIsPopoverOpen(false);
|
|
setIsMoreOpen(false);
|
|
}, [pathname]);
|
|
|
|
const signOut = async () => {
|
|
if (isSigningOut) {
|
|
return;
|
|
}
|
|
|
|
setIsSigningOut(true);
|
|
try {
|
|
await authClient.signOut();
|
|
router.replace('/auth/signin');
|
|
} finally {
|
|
setIsSigningOut(false);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="app-surface">
|
|
<div className="ambient-grid" aria-hidden="true" />
|
|
<div className="noise-layer" aria-hidden="true" />
|
|
|
|
<div className="relative z-10 mx-auto flex min-h-screen w-full max-w-[1440px] gap-6 px-4 pb-10 pt-4 sm:px-5 sm:pb-12 sm:pt-6 md:px-8 lg:gap-8">
|
|
<aside className="hidden w-72 shrink-0 flex-col gap-6 border-r border-[color:var(--line-weak)] pr-6 lg:flex">
|
|
<div>
|
|
<p className="terminal-caption text-xs uppercase tracking-[0.25em] text-[color:var(--terminal-muted)]">Fiscal Clone</p>
|
|
<h1 className="mt-2 text-2xl font-semibold text-[color:var(--terminal-bright)]">Neon Desk</h1>
|
|
<p className="mt-2 text-sm text-[color:var(--terminal-muted)]">
|
|
Financial intelligence cockpit with durable AI workflows.
|
|
</p>
|
|
</div>
|
|
|
|
<nav className="space-y-4" aria-label="Primary">
|
|
{groupedNav.map(({ group, items }) => (
|
|
<div key={group} className="space-y-2">
|
|
<p className="terminal-caption px-2 text-[11px] uppercase tracking-[0.18em] text-[color:var(--terminal-muted)]">{GROUP_LABELS[group]}</p>
|
|
{items.map((item) => {
|
|
const Icon = item.icon;
|
|
|
|
return (
|
|
<Link
|
|
key={item.id}
|
|
href={item.href}
|
|
aria-current={item.active ? 'page' : undefined}
|
|
onMouseEnter={() => prefetchForHref(item.href)}
|
|
onFocus={() => prefetchForHref(item.href)}
|
|
className={cn(
|
|
'flex items-center gap-3 rounded-xl px-3 py-2 text-sm transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[color:var(--line-strong)] focus-visible:ring-offset-2 focus-visible:ring-offset-transparent',
|
|
item.active
|
|
? 'bg-[color:rgba(10,25,33,0.75)] text-[color:var(--terminal-bright)] shadow-[inset_2px_0_0_var(--accent)]'
|
|
: 'text-[color:var(--terminal-muted)] hover:bg-[color:rgba(10,25,33,0.42)] hover:text-[color:var(--terminal-bright)]'
|
|
)}
|
|
>
|
|
<Icon className="size-4" />
|
|
{item.label}
|
|
</Link>
|
|
);
|
|
})}
|
|
</div>
|
|
))}
|
|
</nav>
|
|
|
|
<div className="mt-auto rounded-[1rem] border border-[color:var(--line-weak)] bg-[color:rgba(8,19,26,0.52)] p-3">
|
|
<p className="text-xs uppercase tracking-[0.2em] text-[color:var(--terminal-muted)]">Runtime</p>
|
|
<p className="mt-1 truncate text-sm text-[color:var(--terminal-bright)]">{displayName}</p>
|
|
{role ? <p className="mt-1 text-xs uppercase tracking-[0.16em] text-[color:var(--terminal-muted)]">Role: {role}</p> : null}
|
|
<p className="mt-2 text-xs text-[color:var(--terminal-muted)]">
|
|
AI and market data are driven by environment configuration and live API tasks.
|
|
</p>
|
|
<Button className="mt-3 w-full" variant="ghost" onClick={() => void signOut()} disabled={isSigningOut}>
|
|
<LogOut className="size-4" />
|
|
{isSigningOut ? 'Signing out...' : 'Sign out'}
|
|
</Button>
|
|
</div>
|
|
</aside>
|
|
|
|
<div className="min-w-0 flex-1 pb-24 lg:pb-0">
|
|
<header className="relative mb-4 border-b border-[color:var(--line-weak)] pb-4 pr-16 sm:pb-5 sm:pr-20">
|
|
<div className="absolute right-4 top-4 z-10 sm:right-5 sm:top-5">
|
|
<TaskNotificationsTrigger
|
|
unreadCount={notifications.unreadCount}
|
|
isPopoverOpen={notifications.isPopoverOpen}
|
|
setIsPopoverOpen={notifications.setIsPopoverOpen}
|
|
isLoading={notifications.isLoading}
|
|
activeTasks={notifications.activeTasks}
|
|
visibleFinishedTasks={notifications.visibleFinishedTasks}
|
|
awaitingReviewTasks={notifications.awaitingReviewTasks}
|
|
showReadFinished={notifications.showReadFinished}
|
|
setShowReadFinished={notifications.setShowReadFinished}
|
|
openTaskDetails={notifications.openTaskDetails}
|
|
silenceTask={notifications.silenceTask}
|
|
markTaskRead={notifications.markTaskRead}
|
|
/>
|
|
</div>
|
|
<div className="flex flex-col gap-4 sm:flex-row sm:flex-wrap sm:items-start sm:justify-between">
|
|
<div className="min-w-0 pr-6 sm:pr-0">
|
|
<p className="terminal-caption text-xs uppercase tracking-[0.3em] text-[color:var(--terminal-muted)]">Live System</p>
|
|
<h2 className="mt-2 text-xl font-semibold text-[color:var(--terminal-bright)] sm:text-2xl md:text-3xl">{title}</h2>
|
|
{subtitle ? (
|
|
<p className="mt-1 text-sm text-[color:var(--terminal-muted)]">{subtitle}</p>
|
|
) : null}
|
|
</div>
|
|
<div className="flex w-full flex-col gap-2 sm:w-auto sm:flex-row sm:flex-wrap sm:items-center sm:justify-end">
|
|
{actions}
|
|
<Button variant="ghost" className="max-sm:hidden sm:inline-flex lg:hidden" onClick={() => void signOut()} disabled={isSigningOut}>
|
|
<LogOut className="size-4" />
|
|
{isSigningOut ? 'Signing out...' : 'Sign out'}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<nav
|
|
aria-label="Breadcrumb"
|
|
className="mb-6 overflow-x-auto border-b border-[color:var(--line-weak)] pb-3"
|
|
>
|
|
<ol className="flex min-w-max items-center gap-2 text-xs text-[color:var(--terminal-muted)] sm:min-w-0 sm:flex-wrap">
|
|
{breadcrumbItems.map((item, index) => {
|
|
const isLast = index === breadcrumbItems.length - 1;
|
|
|
|
return (
|
|
<li key={`${item.label}-${index}`} className="flex items-center gap-2">
|
|
{item.href && !isLast ? (
|
|
<Link
|
|
href={item.href}
|
|
onMouseEnter={() => prefetchForHref(item.href as string)}
|
|
onFocus={() => prefetchForHref(item.href as string)}
|
|
className="rounded px-1 py-0.5 text-[color:var(--accent)] transition hover:text-[color:var(--accent-strong)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[color:var(--line-strong)]"
|
|
>
|
|
{item.label}
|
|
</Link>
|
|
) : (
|
|
<span className={cn(isLast ? 'text-[color:var(--terminal-bright)]' : '')} aria-current={isLast ? 'page' : undefined}>
|
|
{item.label}
|
|
</span>
|
|
)}
|
|
{!isLast ? <span aria-hidden="true">/</span> : null}
|
|
</li>
|
|
);
|
|
})}
|
|
</ol>
|
|
</nav>
|
|
|
|
<main className="min-w-0 space-y-6">{children}</main>
|
|
</div>
|
|
</div>
|
|
|
|
<nav
|
|
className="fixed inset-x-0 bottom-0 z-40 border-t border-[color:var(--line-weak)] bg-[color:rgba(5,14,22,0.96)] px-2 py-2 backdrop-blur lg:hidden"
|
|
aria-label="Mobile primary"
|
|
>
|
|
<div className="mx-auto flex w-full max-w-[1300px] items-center justify-between gap-1 px-1" style={{ paddingBottom: 'calc(env(safe-area-inset-bottom) * 0.5)' }}>
|
|
{mobilePrimaryEntries.map((item) => {
|
|
const Icon = item.icon;
|
|
|
|
return (
|
|
<Link
|
|
key={item.id}
|
|
href={item.href}
|
|
aria-current={item.active ? 'page' : undefined}
|
|
onMouseEnter={() => prefetchForHref(item.href)}
|
|
onFocus={() => prefetchForHref(item.href)}
|
|
className={cn(
|
|
'flex min-w-0 flex-1 flex-col items-center gap-1 rounded-lg px-2 py-1.5 text-[11px] transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[color:var(--line-strong)]',
|
|
item.active
|
|
? 'bg-[color:var(--panel-bright)] text-[color:var(--terminal-bright)]'
|
|
: 'text-[color:var(--terminal-muted)] hover:bg-[color:var(--panel-soft)] hover:text-[color:var(--terminal-bright)]'
|
|
)}
|
|
>
|
|
<Icon className="size-4" />
|
|
<span className="truncate">{item.label}</span>
|
|
</Link>
|
|
);
|
|
})}
|
|
|
|
<button
|
|
type="button"
|
|
aria-haspopup="dialog"
|
|
aria-expanded={isMoreOpen}
|
|
onClick={() => setIsMoreOpen((prev) => !prev)}
|
|
className="flex min-w-0 flex-1 flex-col items-center gap-1 rounded-lg px-2 py-1.5 text-[11px] text-[color:var(--terminal-muted)] transition hover:bg-[color:var(--panel-soft)] hover:text-[color:var(--terminal-bright)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[color:var(--line-strong)]"
|
|
>
|
|
<Menu className="size-4" />
|
|
<span>More</span>
|
|
</button>
|
|
</div>
|
|
</nav>
|
|
|
|
{isMoreOpen ? (
|
|
<div className="fixed inset-0 z-50 bg-[color:rgba(0,0,0,0.55)] lg:hidden" onClick={() => setIsMoreOpen(false)}>
|
|
<div
|
|
role="dialog"
|
|
aria-modal="true"
|
|
className="absolute inset-x-3 rounded-2xl border border-[color:var(--line-weak)] bg-[color:var(--panel)] p-3 shadow-[0_20px_60px_rgba(0,0,0,0.45)]"
|
|
style={{ bottom: 'calc(4.7rem + env(safe-area-inset-bottom))' }}
|
|
onClick={(event) => event.stopPropagation()}
|
|
>
|
|
<p className="terminal-caption mb-2 px-1 text-[11px] uppercase tracking-[0.2em] text-[color:var(--terminal-muted)]">More destinations</p>
|
|
<div className="grid grid-cols-2 gap-2">
|
|
{mobileMoreEntries.map((item) => {
|
|
const Icon = item.icon;
|
|
return (
|
|
<Link
|
|
key={item.id}
|
|
href={item.href}
|
|
aria-current={item.active ? 'page' : undefined}
|
|
onMouseEnter={() => prefetchForHref(item.href)}
|
|
onFocus={() => prefetchForHref(item.href)}
|
|
onClick={() => setIsMoreOpen(false)}
|
|
className={cn(
|
|
'flex items-center gap-2 rounded-lg border px-3 py-2 text-sm transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[color:var(--line-strong)]',
|
|
item.active
|
|
? 'border-[color:var(--line-strong)] bg-[color:var(--panel-bright)] text-[color:var(--terminal-bright)]'
|
|
: 'border-transparent text-[color:var(--terminal-muted)] hover:border-[color:var(--line-weak)] hover:bg-[color:var(--panel-soft)] hover:text-[color:var(--terminal-bright)]'
|
|
)}
|
|
>
|
|
<Icon className="size-4" />
|
|
<span>{item.label}</span>
|
|
</Link>
|
|
);
|
|
})}
|
|
<button
|
|
type="button"
|
|
onClick={() => {
|
|
setIsMoreOpen(false);
|
|
void signOut();
|
|
}}
|
|
className="col-span-2 flex items-center justify-center gap-2 rounded-lg border border-[color:var(--line-weak)] px-3 py-2 text-sm text-[color:var(--terminal-muted)] transition hover:border-[color:var(--line-strong)] hover:text-[color:var(--terminal-bright)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[color:var(--line-strong)]"
|
|
>
|
|
<LogOut className="size-4" />
|
|
{isSigningOut ? 'Signing out...' : 'Sign out'}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
) : null}
|
|
|
|
<TaskDetailModal
|
|
isOpen={notifications.isDetailOpen}
|
|
taskId={notifications.detailTaskId}
|
|
onClose={() => notifications.setIsDetailOpen(false)}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|