Refine sidebar collapsed and expanded spacing
This commit is contained in:
@@ -1,14 +1,28 @@
|
||||
'use client';
|
||||
"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 { 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,
|
||||
@@ -17,13 +31,13 @@ import {
|
||||
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';
|
||||
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;
|
||||
@@ -40,104 +54,104 @@ type NavConfigItem = NavItem & {
|
||||
|
||||
const NAV_ITEMS: NavConfigItem[] = [
|
||||
{
|
||||
id: 'home',
|
||||
href: '/',
|
||||
label: 'Home',
|
||||
id: "home",
|
||||
href: "/",
|
||||
label: "Home",
|
||||
icon: Activity,
|
||||
group: 'overview',
|
||||
matchMode: 'exact',
|
||||
mobilePrimary: true
|
||||
group: "overview",
|
||||
matchMode: "exact",
|
||||
mobilePrimary: true,
|
||||
},
|
||||
{
|
||||
id: 'analysis',
|
||||
href: '/analysis',
|
||||
label: 'Analysis',
|
||||
id: "analysis",
|
||||
href: "/analysis",
|
||||
label: "Analysis",
|
||||
icon: LineChart,
|
||||
group: 'research',
|
||||
matchMode: 'prefix',
|
||||
group: "research",
|
||||
matchMode: "prefix",
|
||||
preserveTicker: true,
|
||||
mobilePrimary: true
|
||||
mobilePrimary: true,
|
||||
},
|
||||
{
|
||||
id: 'research',
|
||||
href: '/research',
|
||||
label: 'Research',
|
||||
id: "research",
|
||||
href: "/research",
|
||||
label: "Research",
|
||||
icon: NotebookTabs,
|
||||
group: 'research',
|
||||
matchMode: 'exact',
|
||||
group: "research",
|
||||
matchMode: "exact",
|
||||
preserveTicker: true,
|
||||
mobilePrimary: true
|
||||
mobilePrimary: true,
|
||||
},
|
||||
{
|
||||
id: 'graphing',
|
||||
href: '/graphing',
|
||||
label: 'Graphing',
|
||||
id: "graphing",
|
||||
href: "/graphing",
|
||||
label: "Graphing",
|
||||
icon: BarChart3,
|
||||
group: 'research',
|
||||
matchMode: 'exact',
|
||||
group: "research",
|
||||
matchMode: "exact",
|
||||
preserveTicker: true,
|
||||
mobilePrimary: false
|
||||
mobilePrimary: false,
|
||||
},
|
||||
{
|
||||
id: 'financials',
|
||||
href: '/financials',
|
||||
label: 'Financials',
|
||||
id: "financials",
|
||||
href: "/financials",
|
||||
label: "Financials",
|
||||
icon: Landmark,
|
||||
group: 'research',
|
||||
matchMode: 'exact',
|
||||
group: "research",
|
||||
matchMode: "exact",
|
||||
preserveTicker: true,
|
||||
mobilePrimary: false
|
||||
mobilePrimary: false,
|
||||
},
|
||||
{
|
||||
id: 'filings',
|
||||
href: '/filings',
|
||||
label: 'Filings',
|
||||
id: "filings",
|
||||
href: "/filings",
|
||||
label: "Filings",
|
||||
icon: BookOpenText,
|
||||
group: 'research',
|
||||
matchMode: 'exact',
|
||||
group: "research",
|
||||
matchMode: "exact",
|
||||
preserveTicker: true,
|
||||
mobilePrimary: true
|
||||
mobilePrimary: true,
|
||||
},
|
||||
{
|
||||
id: 'search',
|
||||
href: '/search',
|
||||
label: 'Search',
|
||||
id: "search",
|
||||
href: "/search",
|
||||
label: "Search",
|
||||
icon: Search,
|
||||
group: 'research',
|
||||
matchMode: 'exact',
|
||||
group: "research",
|
||||
matchMode: "exact",
|
||||
preserveTicker: true,
|
||||
mobilePrimary: false
|
||||
mobilePrimary: false,
|
||||
},
|
||||
{
|
||||
id: 'portfolio',
|
||||
href: '/portfolio',
|
||||
label: 'Portfolio',
|
||||
id: "portfolio",
|
||||
href: "/portfolio",
|
||||
label: "Portfolio",
|
||||
icon: ChartCandlestick,
|
||||
group: 'portfolio',
|
||||
matchMode: 'exact',
|
||||
mobilePrimary: true
|
||||
group: "portfolio",
|
||||
matchMode: "exact",
|
||||
mobilePrimary: true,
|
||||
},
|
||||
{
|
||||
id: 'watchlist',
|
||||
href: '/watchlist',
|
||||
label: 'Coverage',
|
||||
id: "watchlist",
|
||||
href: "/watchlist",
|
||||
label: "Coverage",
|
||||
icon: Eye,
|
||||
group: 'portfolio',
|
||||
matchMode: 'exact',
|
||||
mobilePrimary: true
|
||||
}
|
||||
group: "portfolio",
|
||||
matchMode: "exact",
|
||||
mobilePrimary: true,
|
||||
},
|
||||
];
|
||||
|
||||
const GROUP_LABELS: Record<NavGroup, string> = {
|
||||
overview: 'Overview',
|
||||
research: 'Research',
|
||||
portfolio: 'Portfolio'
|
||||
overview: "Overview",
|
||||
research: "Research",
|
||||
portfolio: "Portfolio",
|
||||
};
|
||||
|
||||
const SIDEBAR_PREFERENCE_KEY = 'fiscal-shell-sidebar-collapsed';
|
||||
const SIDEBAR_PREFERENCE_KEY = "fiscal-shell-sidebar-collapsed";
|
||||
|
||||
function normalizeTicker(value: string | null | undefined) {
|
||||
const normalized = value?.trim().toUpperCase() ?? '';
|
||||
const normalized = value?.trim().toUpperCase() ?? "";
|
||||
return normalized.length > 0 ? normalized : null;
|
||||
}
|
||||
|
||||
@@ -146,12 +160,12 @@ function toTickerHref(baseHref: string, activeTicker: string | null) {
|
||||
return baseHref;
|
||||
}
|
||||
|
||||
const separator = baseHref.includes('?') ? '&' : '?';
|
||||
const separator = baseHref.includes("?") ? "&" : "?";
|
||||
return `${baseHref}${separator}ticker=${encodeURIComponent(activeTicker)}`;
|
||||
}
|
||||
|
||||
function resolveNavHref(item: NavItem, context: ActiveContext) {
|
||||
if (item.href === '/graphing') {
|
||||
if (item.href === "/graphing") {
|
||||
return buildGraphingHref(context.activeTicker);
|
||||
}
|
||||
|
||||
@@ -163,87 +177,85 @@ function resolveNavHref(item: NavItem, context: ActiveContext) {
|
||||
}
|
||||
|
||||
function isItemActive(item: NavItem, pathname: string) {
|
||||
if (item.matchMode === 'prefix') {
|
||||
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);
|
||||
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);
|
||||
const financialsHref = toTickerHref("/financials", activeTicker);
|
||||
const filingsHref = toTickerHref("/filings", activeTicker);
|
||||
|
||||
if (pathname === '/') {
|
||||
return [{ label: 'Home' }];
|
||||
if (pathname === "/") {
|
||||
return [{ label: "Home" }];
|
||||
}
|
||||
|
||||
if (pathname.startsWith('/analysis/reports/')) {
|
||||
if (pathname.startsWith("/analysis/reports/")) {
|
||||
return [
|
||||
{ label: 'Analysis', href: analysisHref },
|
||||
{ label: 'Reports', href: analysisHref },
|
||||
{ label: activeTicker ?? 'Summary' }
|
||||
{ label: "Analysis", href: analysisHref },
|
||||
{ label: "Reports", href: analysisHref },
|
||||
{ label: activeTicker ?? "Summary" },
|
||||
];
|
||||
}
|
||||
|
||||
if (pathname.startsWith('/analysis')) {
|
||||
return [{ label: 'Analysis' }];
|
||||
if (pathname.startsWith("/analysis")) {
|
||||
return [{ label: "Analysis" }];
|
||||
}
|
||||
|
||||
if (pathname.startsWith('/research')) {
|
||||
if (pathname.startsWith("/research")) {
|
||||
return [
|
||||
{ label: 'Analysis', href: analysisHref },
|
||||
{ label: 'Research', href: researchHref }
|
||||
{ label: "Analysis", href: analysisHref },
|
||||
{ label: "Research", href: researchHref },
|
||||
];
|
||||
}
|
||||
|
||||
if (pathname.startsWith('/financials')) {
|
||||
if (pathname.startsWith("/financials")) {
|
||||
return [{ label: "Analysis", href: analysisHref }, { label: "Financials" }];
|
||||
}
|
||||
|
||||
if (pathname.startsWith("/graphing")) {
|
||||
return [
|
||||
{ label: 'Analysis', href: analysisHref },
|
||||
{ label: 'Financials' }
|
||||
{ label: "Analysis", href: analysisHref },
|
||||
{ label: "Graphing", href: graphingHref },
|
||||
{ label: activeTicker ?? "Compare Set" },
|
||||
];
|
||||
}
|
||||
|
||||
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('/filings')) {
|
||||
return [
|
||||
{ label: 'Analysis', href: analysisHref },
|
||||
{ label: 'Filings' }
|
||||
];
|
||||
if (pathname.startsWith("/search")) {
|
||||
return [{ label: "Analysis", href: analysisHref }, { label: "Search" }];
|
||||
}
|
||||
|
||||
if (pathname.startsWith('/search')) {
|
||||
return [
|
||||
{ label: 'Analysis', href: analysisHref },
|
||||
{ label: 'Search' }
|
||||
];
|
||||
if (pathname.startsWith("/portfolio")) {
|
||||
return [{ label: "Portfolio" }];
|
||||
}
|
||||
|
||||
if (pathname.startsWith('/portfolio')) {
|
||||
return [{ label: 'Portfolio' }];
|
||||
if (pathname.startsWith("/watchlist")) {
|
||||
return [{ label: "Portfolio", href: "/portfolio" }, { label: "Coverage" }];
|
||||
}
|
||||
|
||||
if (pathname.startsWith('/watchlist')) {
|
||||
return [
|
||||
{ label: 'Portfolio', href: '/portfolio' },
|
||||
{ label: 'Coverage' }
|
||||
];
|
||||
}
|
||||
|
||||
return [{ label: 'Home', href: '/' }, { label: pathname }];
|
||||
return [{ label: "Home", href: "/" }, { label: pathname }];
|
||||
}
|
||||
|
||||
export function AppShell({ title, subtitle, actions, activeTicker, breadcrumbs, children }: AppShellProps) {
|
||||
export function AppShell({
|
||||
title,
|
||||
subtitle,
|
||||
actions,
|
||||
activeTicker,
|
||||
breadcrumbs,
|
||||
children,
|
||||
}: AppShellProps) {
|
||||
const pathname = usePathname();
|
||||
const router = useRouter();
|
||||
const searchParams = useSearchParams();
|
||||
@@ -252,35 +264,47 @@ export function AppShell({ title, subtitle, actions, activeTicker, breadcrumbs,
|
||||
const [isSigningOut, setIsSigningOut] = useState(false);
|
||||
const [isMoreOpen, setIsMoreOpen] = useState(false);
|
||||
const [isSidebarCollapsed, setIsSidebarCollapsed] = useState(false);
|
||||
const [hasLoadedSidebarPreference, setHasLoadedSidebarPreference] = 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 sessionUser = (session?.user ?? null) as {
|
||||
name?: string | null;
|
||||
email?: string | null;
|
||||
role?: unknown;
|
||||
} | null;
|
||||
|
||||
const role = typeof sessionUser?.role === 'string'
|
||||
const role =
|
||||
typeof sessionUser?.role === "string"
|
||||
? sessionUser.role
|
||||
: Array.isArray(sessionUser?.role)
|
||||
? sessionUser.role.filter((entry): entry is string => typeof entry === 'string').join(', ')
|
||||
? sessionUser.role
|
||||
.filter((entry): entry is string => typeof entry === "string")
|
||||
.join(", ")
|
||||
: null;
|
||||
|
||||
const displayName = sessionUser?.name || sessionUser?.email || 'Authenticated user';
|
||||
const displayName =
|
||||
sessionUser?.name || sessionUser?.email || "Authenticated user";
|
||||
|
||||
const derivedTickerFromPath = useMemo(() => {
|
||||
if (!pathname.startsWith('/analysis/reports/')) {
|
||||
if (!pathname.startsWith("/analysis/reports/")) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const segments = pathname.split('/').filter(Boolean);
|
||||
const segments = pathname.split("/").filter(Boolean);
|
||||
const tickerSegment = segments[2];
|
||||
return tickerSegment ? normalizeTicker(decodeURIComponent(tickerSegment)) : null;
|
||||
return tickerSegment
|
||||
? normalizeTicker(decodeURIComponent(tickerSegment))
|
||||
: null;
|
||||
}, [pathname]);
|
||||
|
||||
const context: ActiveContext = useMemo(() => {
|
||||
const queryTicker = normalizeTicker(searchParams.get('ticker'));
|
||||
const queryTicker = normalizeTicker(searchParams.get("ticker"));
|
||||
|
||||
return {
|
||||
pathname,
|
||||
activeTicker: normalizeTicker(activeTicker) ?? queryTicker ?? derivedTickerFromPath
|
||||
activeTicker:
|
||||
normalizeTicker(activeTicker) ?? queryTicker ?? derivedTickerFromPath,
|
||||
};
|
||||
}, [activeTicker, derivedTickerFromPath, pathname, searchParams]);
|
||||
|
||||
@@ -290,16 +314,16 @@ export function AppShell({ title, subtitle, actions, activeTicker, breadcrumbs,
|
||||
return {
|
||||
...item,
|
||||
href,
|
||||
active: isItemActive(item, pathname)
|
||||
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: [] }
|
||||
{ group: "overview", items: [] },
|
||||
{ group: "research", items: [] },
|
||||
{ group: "portfolio", items: [] },
|
||||
];
|
||||
|
||||
for (const entry of navEntries) {
|
||||
@@ -331,62 +355,72 @@ export function AppShell({ title, subtitle, actions, activeTicker, breadcrumbs,
|
||||
const prefetchForHref = (href: string) => {
|
||||
router.prefetch(href);
|
||||
|
||||
if (href.startsWith('/analysis')) {
|
||||
if (href.startsWith("/analysis")) {
|
||||
if (context.activeTicker) {
|
||||
void queryClient.prefetchQuery(companyAnalysisQueryOptions(context.activeTicker));
|
||||
void queryClient.prefetchQuery(
|
||||
companyAnalysisQueryOptions(context.activeTicker),
|
||||
);
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
if (href.startsWith('/financials')) {
|
||||
if (href.startsWith("/financials")) {
|
||||
if (context.activeTicker) {
|
||||
void queryClient.prefetchQuery(companyAnalysisQueryOptions(context.activeTicker));
|
||||
void queryClient.prefetchQuery(
|
||||
companyAnalysisQueryOptions(context.activeTicker),
|
||||
);
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
if (href.startsWith('/graphing')) {
|
||||
if (href.startsWith("/graphing")) {
|
||||
if (context.activeTicker) {
|
||||
void queryClient.prefetchQuery(companyFinancialStatementsQueryOptions({
|
||||
void queryClient.prefetchQuery(
|
||||
companyFinancialStatementsQueryOptions({
|
||||
ticker: context.activeTicker,
|
||||
surfaceKind: 'income_statement',
|
||||
cadence: 'annual',
|
||||
surfaceKind: "income_statement",
|
||||
cadence: "annual",
|
||||
includeDimensions: false,
|
||||
includeFacts: false,
|
||||
limit: 16
|
||||
}));
|
||||
limit: 16,
|
||||
}),
|
||||
);
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
if (href.startsWith('/filings')) {
|
||||
void queryClient.prefetchQuery(filingsQueryOptions({
|
||||
if (href.startsWith("/filings")) {
|
||||
void queryClient.prefetchQuery(
|
||||
filingsQueryOptions({
|
||||
ticker: context.activeTicker ?? undefined,
|
||||
limit: 120
|
||||
}));
|
||||
limit: 120,
|
||||
}),
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
||||
if (href.startsWith('/search')) {
|
||||
if (href.startsWith("/search")) {
|
||||
if (context.activeTicker) {
|
||||
void queryClient.prefetchQuery(companyAnalysisQueryOptions(context.activeTicker));
|
||||
void queryClient.prefetchQuery(
|
||||
companyAnalysisQueryOptions(context.activeTicker),
|
||||
);
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
if (href.startsWith('/portfolio')) {
|
||||
if (href.startsWith("/portfolio")) {
|
||||
void queryClient.prefetchQuery(holdingsQueryOptions());
|
||||
void queryClient.prefetchQuery(portfolioSummaryQueryOptions());
|
||||
void queryClient.prefetchQuery(latestPortfolioInsightQueryOptions());
|
||||
return;
|
||||
}
|
||||
|
||||
if (href.startsWith('/watchlist')) {
|
||||
if (href.startsWith("/watchlist")) {
|
||||
void queryClient.prefetchQuery(watchlistQueryOptions());
|
||||
return;
|
||||
}
|
||||
|
||||
if (href === '/') {
|
||||
if (href === "/") {
|
||||
void queryClient.prefetchQuery(portfolioSummaryQueryOptions());
|
||||
void queryClient.prefetchQuery(filingsQueryOptions({ limit: 200 }));
|
||||
void queryClient.prefetchQuery(watchlistQueryOptions());
|
||||
@@ -396,8 +430,10 @@ export function AppShell({ title, subtitle, actions, activeTicker, breadcrumbs,
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const storedPreference = window.localStorage.getItem(SIDEBAR_PREFERENCE_KEY);
|
||||
if (storedPreference === 'true') {
|
||||
const storedPreference = window.localStorage.getItem(
|
||||
SIDEBAR_PREFERENCE_KEY,
|
||||
);
|
||||
if (storedPreference === "true") {
|
||||
setIsSidebarCollapsed(true);
|
||||
}
|
||||
setHasLoadedSidebarPreference(true);
|
||||
@@ -408,7 +444,10 @@ export function AppShell({ title, subtitle, actions, activeTicker, breadcrumbs,
|
||||
return;
|
||||
}
|
||||
|
||||
window.localStorage.setItem(SIDEBAR_PREFERENCE_KEY, String(isSidebarCollapsed));
|
||||
window.localStorage.setItem(
|
||||
SIDEBAR_PREFERENCE_KEY,
|
||||
String(isSidebarCollapsed),
|
||||
);
|
||||
}, [hasLoadedSidebarPreference, isSidebarCollapsed]);
|
||||
|
||||
useEffect(() => {
|
||||
@@ -418,7 +457,13 @@ export function AppShell({ title, subtitle, actions, activeTicker, breadcrumbs,
|
||||
};
|
||||
|
||||
const runPrefetch = () => {
|
||||
const prioritized = navEntries.filter((entry) => entry.id === 'analysis' || entry.id === 'graphing' || entry.id === 'filings' || entry.id === 'portfolio');
|
||||
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);
|
||||
}
|
||||
@@ -456,7 +501,7 @@ export function AppShell({ title, subtitle, actions, activeTicker, breadcrumbs,
|
||||
setIsSigningOut(true);
|
||||
try {
|
||||
await authClient.signOut();
|
||||
router.replace('/auth/signin');
|
||||
router.replace("/auth/signin");
|
||||
} finally {
|
||||
setIsSigningOut(false);
|
||||
}
|
||||
@@ -467,18 +512,32 @@ export function AppShell({ title, subtitle, actions, activeTicker, breadcrumbs,
|
||||
<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
|
||||
<div
|
||||
className={cn(
|
||||
'hidden shrink-0 flex-col gap-6 border-r border-[color:var(--line-weak)] transition-[width,padding] duration-200 lg:flex',
|
||||
isSidebarCollapsed ? 'w-20 pr-3' : 'w-72 pr-6'
|
||||
"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",
|
||||
)}
|
||||
>
|
||||
<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="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>
|
||||
@@ -489,22 +548,38 @@ export function AppShell({ title, subtitle, actions, activeTicker, breadcrumbs,
|
||||
type="button"
|
||||
variant="ghost"
|
||||
onClick={() => setIsSidebarCollapsed((prev) => !prev)}
|
||||
className={cn('shrink-0', isSidebarCollapsed ? 'min-h-11 w-11 px-0' : 'min-h-11 w-11 px-0')}
|
||||
aria-label={isSidebarCollapsed ? 'Expand sidebar' : 'Collapse sidebar'}
|
||||
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'}
|
||||
title={isSidebarCollapsed ? "Expand sidebar" : "Collapse sidebar"}
|
||||
>
|
||||
{isSidebarCollapsed ? <ChevronRight className="size-4" /> : <ChevronLeft className="size-4" />}
|
||||
{isSidebarCollapsed ? (
|
||||
<ChevronRight className="size-4" />
|
||||
) : (
|
||||
<ChevronLeft className="size-4" />
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<nav className="space-y-4" aria-label="Primary">
|
||||
<nav className="space-y-3" aria-label="Primary">
|
||||
{groupedNav.map(({ group, items }) => (
|
||||
<div key={group} className="space-y-2">
|
||||
<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" />
|
||||
<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>
|
||||
<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;
|
||||
@@ -513,17 +588,19 @@ export function AppShell({ title, subtitle, actions, activeTicker, breadcrumbs,
|
||||
<Link
|
||||
key={item.id}
|
||||
href={item.href}
|
||||
aria-current={item.active ? 'page' : undefined}
|
||||
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-3' : 'gap-3 px-3 py-2',
|
||||
"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)]'
|
||||
? "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" />
|
||||
@@ -535,38 +612,37 @@ export function AppShell({ title, subtitle, actions, activeTicker, breadcrumbs,
|
||||
))}
|
||||
</nav>
|
||||
|
||||
<div
|
||||
className={cn(
|
||||
'mt-auto rounded-[1rem] border border-[color:var(--line-weak)] bg-[color:var(--panel-soft)]',
|
||||
isSidebarCollapsed ? 'p-2' : 'p-3'
|
||||
)}
|
||||
>
|
||||
{isSidebarCollapsed ? (
|
||||
{!isSidebarCollapsed ? (
|
||||
<>
|
||||
<Button
|
||||
className="w-full min-h-12 px-0"
|
||||
className="w-full"
|
||||
variant="ghost"
|
||||
onClick={() => void signOut()}
|
||||
disabled={isSigningOut}
|
||||
aria-label={isSigningOut ? 'Signing out' : 'Sign out'}
|
||||
title={displayName}
|
||||
>
|
||||
<LogOut className="size-4" />
|
||||
{isSigningOut ? "Signing out..." : "Sign out"}
|
||||
</Button>
|
||||
) : (
|
||||
<>
|
||||
<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.
|
||||
|
||||
<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>
|
||||
<Button className="mt-3 w-full" variant="ghost" onClick={() => void signOut()} disabled={isSigningOut}>
|
||||
<LogOut className="size-4" />
|
||||
{isSigningOut ? 'Signing out...' : 'Sign out'}
|
||||
</Button>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
) : null}
|
||||
</aside>
|
||||
|
||||
<div className="min-w-0 flex-1 pb-24 lg:pb-0">
|
||||
@@ -590,17 +666,28 @@ export function AppShell({ title, subtitle, actions, activeTicker, breadcrumbs,
|
||||
</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>
|
||||
<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>
|
||||
<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}>
|
||||
<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'}
|
||||
{isSigningOut ? "Signing out..." : "Sign out"}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -615,18 +702,28 @@ export function AppShell({ title, subtitle, actions, activeTicker, breadcrumbs,
|
||||
const isLast = index === breadcrumbItems.length - 1;
|
||||
|
||||
return (
|
||||
<li key={`${item.label}-${index}`} className="flex items-center gap-2">
|
||||
<li
|
||||
key={`${item.label}-${index}`}
|
||||
className="flex items-center gap-2"
|
||||
>
|
||||
{item.href && !isLast ? (
|
||||
<Link
|
||||
href={item.href}
|
||||
onMouseEnter={() => prefetchForHref(item.href as string)}
|
||||
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}>
|
||||
<span
|
||||
className={cn(
|
||||
isLast ? "text-[color:var(--terminal-bright)]" : "",
|
||||
)}
|
||||
aria-current={isLast ? "page" : undefined}
|
||||
>
|
||||
{item.label}
|
||||
</span>
|
||||
)}
|
||||
@@ -645,7 +742,10 @@ export function AppShell({ title, subtitle, actions, activeTicker, breadcrumbs,
|
||||
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)' }}>
|
||||
<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;
|
||||
|
||||
@@ -653,14 +753,14 @@ export function AppShell({ title, subtitle, actions, activeTicker, breadcrumbs,
|
||||
<Link
|
||||
key={item.id}
|
||||
href={item.href}
|
||||
aria-current={item.active ? 'page' : undefined}
|
||||
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)]',
|
||||
"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)]'
|
||||
? "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" />
|
||||
@@ -683,15 +783,20 @@ export function AppShell({ title, subtitle, actions, activeTicker, breadcrumbs,
|
||||
</nav>
|
||||
|
||||
{isMoreOpen ? (
|
||||
<div className="fixed inset-0 z-50 bg-[color:rgba(0,0,0,0.55)] lg:hidden" onClick={() => setIsMoreOpen(false)}>
|
||||
<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))' }}
|
||||
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>
|
||||
<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;
|
||||
@@ -699,15 +804,15 @@ export function AppShell({ title, subtitle, actions, activeTicker, breadcrumbs,
|
||||
<Link
|
||||
key={item.id}
|
||||
href={item.href}
|
||||
aria-current={item.active ? 'page' : undefined}
|
||||
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)]',
|
||||
"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)]'
|
||||
? "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" />
|
||||
@@ -724,7 +829,7 @@ export function AppShell({ title, subtitle, actions, activeTicker, breadcrumbs,
|
||||
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'}
|
||||
{isSigningOut ? "Signing out..." : "Sign out"}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user