Francy51/Neon-Desk
2
0
Fork 0
Code Issues 22 Pull Requests Actions Packages Projects Releases Wiki Activity

Flatten dashboard sections and emphasize data regions

Browse Source
This commit is contained in:
francy51
2026-03-08 10:38:27 -04:00
parent 7a70545f09
commit 21246df434
16 changed files with 123 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
components/shell/app-shell.tsx
View File

@@ -447,8 +447,8 @@ 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-[1300px] gap-4 px-3 pb-10 pt-4 sm:px-4 sm:pb-12 sm:pt-6 md:px-8 lg:gap-6">
<aside className="hidden w-72 shrink-0 flex-col gap-6 rounded-2xl border border-[color:var(--line-weak)] bg-[color:var(--panel)] p-5 shadow-[0_0_0_1px_rgba(0,255,180,0.06),0_20px_60px_rgba(1,4,10,0.55)] lg:flex">
<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>
@@ -472,10 +472,10 @@ export function AppShell({ title, subtitle, actions, activeTicker, breadcrumbs,
onMouseEnter={() => prefetchForHref(item.href)}
onFocus={() => prefetchForHref(item.href)}
className={cn(
'flex items-center gap-3 rounded-xl border 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',
'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
? 'border-[color:var(--line-strong)] bg-[color:var(--panel-bright)] text-[color:var(--terminal-bright)] shadow-[0_0_18px_rgba(0,255,180,0.16)]'
: '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)]'
? '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" />
@@ -487,7 +487,7 @@ export function AppShell({ title, subtitle, actions, activeTicker, breadcrumbs,
))}
</nav>
<div className="mt-auto rounded-xl border border-[color:var(--line-weak)] bg-[color:var(--panel-soft)] p-3">
<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}
@@ -502,7 +502,7 @@ export function AppShell({ title, subtitle, actions, activeTicker, breadcrumbs,
</aside>
<div className="min-w-0 flex-1 pb-24 lg:pb-0">
<header className="relative mb-4 rounded-2xl border border-[color:var(--line-weak)] bg-[color:var(--panel)] px-4 py-4 pr-16 shadow-[0_0_0_1px_rgba(0,255,180,0.05),0_14px_40px_rgba(1,4,10,0.5)] sm:px-6 sm:py-5 sm:pr-20">
<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}
@@ -539,7 +539,7 @@ export function AppShell({ title, subtitle, actions, activeTicker, breadcrumbs,
<nav
aria-label="Breadcrumb"
className="mb-6 overflow-x-auto rounded-xl border border-[color:var(--line-weak)] bg-[color:var(--panel)] px-3 py-2"
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) => {