847 lines
28 KiB
TypeScript
847 lines
28 KiB
TypeScript
"use client";
|
|
|
|
import { useQueryClient } from "@tanstack/react-query";
|
|
import type { LucideIcon } from "lucide-react";
|
|
import {
|
|
Activity,
|
|
BarChart3,
|
|
BookOpenText,
|
|
ChartCandlestick,
|
|
ChevronLeft,
|
|
ChevronRight,
|
|
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",
|
|
};
|
|
|
|
const SIDEBAR_PREFERENCE_KEY = "fiscal-shell-sidebar-collapsed";
|
|
|
|
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 [isSidebarCollapsed, setIsSidebarCollapsed] = useState(false);
|
|
const [hasLoadedSidebarPreference, setHasLoadedSidebarPreference] =
|
|
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 storedPreference = window.localStorage.getItem(
|
|
SIDEBAR_PREFERENCE_KEY,
|
|
);
|
|
if (storedPreference === "true") {
|
|
setIsSidebarCollapsed(true);
|
|
}
|
|
setHasLoadedSidebarPreference(true);
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
if (!hasLoadedSidebarPreference) {
|
|
return;
|
|
}
|
|
|
|
window.localStorage.setItem(
|
|
SIDEBAR_PREFERENCE_KEY,
|
|
String(isSidebarCollapsed),
|
|
);
|
|
}, [hasLoadedSidebarPreference, isSidebarCollapsed]);
|
|
|
|
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={cn(
|
|
"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",
|
|
isSidebarCollapsed ? "lg:pl-3" : "lg:pl-6",
|
|
)}
|
|
>
|
|
<aside
|
|
className={cn(
|
|
"hidden shrink-0 flex-col gap-4 border-r border-[color:var(--line-weak)] transition-[width,padding] duration-200 lg:flex",
|
|
isSidebarCollapsed ? "w-16 pr-1" : "w-72 pr-4",
|
|
)}
|
|
>
|
|
<div
|
|
className={cn(
|
|
"flex items-start gap-3",
|
|
isSidebarCollapsed ? "justify-center" : "justify-between",
|
|
)}
|
|
>
|
|
{!isSidebarCollapsed ? (
|
|
<div className="min-w-0">
|
|
<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>
|
|
) : null}
|
|
|
|
<Button
|
|
type="button"
|
|
variant="ghost"
|
|
onClick={() => setIsSidebarCollapsed((prev) => !prev)}
|
|
className={cn(
|
|
"shrink-0",
|
|
isSidebarCollapsed
|
|
? "min-h-10 w-10 px-0"
|
|
: "min-h-11 w-11 px-0",
|
|
)}
|
|
aria-label={
|
|
isSidebarCollapsed ? "Expand sidebar" : "Collapse sidebar"
|
|
}
|
|
aria-pressed={isSidebarCollapsed}
|
|
title={isSidebarCollapsed ? "Expand sidebar" : "Collapse sidebar"}
|
|
>
|
|
{isSidebarCollapsed ? (
|
|
<ChevronRight className="size-4" />
|
|
) : (
|
|
<ChevronLeft className="size-4" />
|
|
)}
|
|
</Button>
|
|
</div>
|
|
|
|
<nav className="space-y-3" aria-label="Primary">
|
|
{groupedNav.map(({ group, items }) => (
|
|
<div key={group} className="space-y-1.5">
|
|
{isSidebarCollapsed ? (
|
|
<div
|
|
className="mx-auto h-px w-8 bg-[color:var(--line-weak)]"
|
|
aria-hidden="true"
|
|
/>
|
|
) : (
|
|
<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}
|
|
aria-label={isSidebarCollapsed ? item.label : undefined}
|
|
onMouseEnter={() => prefetchForHref(item.href)}
|
|
onFocus={() => prefetchForHref(item.href)}
|
|
title={item.label}
|
|
className={cn(
|
|
"flex items-center rounded-xl border border-transparent 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",
|
|
isSidebarCollapsed
|
|
? "justify-center px-0 py-2.5"
|
|
: "gap-3 px-2.5 py-1.5",
|
|
item.active
|
|
? "border-[color:var(--line-strong)] bg-[color:var(--panel-bright)] text-[color:var(--terminal-bright)] shadow-[inset_2px_0_0_var(--accent)]"
|
|
: "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" />
|
|
{!isSidebarCollapsed ? <span>{item.label}</span> : null}
|
|
</Link>
|
|
);
|
|
})}
|
|
</div>
|
|
))}
|
|
</nav>
|
|
|
|
{!isSidebarCollapsed ? (
|
|
<>
|
|
<Button
|
|
className="w-full"
|
|
variant="ghost"
|
|
onClick={() => void signOut()}
|
|
disabled={isSigningOut}
|
|
>
|
|
<LogOut className="size-4" />
|
|
{isSigningOut ? "Signing out..." : "Sign out"}
|
|
</Button>
|
|
|
|
<div className="rounded-[1rem] border border-[color:var(--line-weak)] bg-[color:var(--panel-soft)] p-2.5">
|
|
<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>
|
|
</div>
|
|
</>
|
|
) : null}
|
|
</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}
|
|
openTaskAction={notifications.openTaskAction}
|
|
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(24,27,32,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>
|
|
);
|
|
}
|