Redesign dashboard/screener UI for improved density and performance
- Add compact/dense CSS tokens for tighter layouts - Add size prop to Button (default/compact) and Input (default/compact) - Add density prop to Panel (normal/compact/dense) - Add size prop to MetricCard (default/compact/inline) - Create IndexCardRow component for horizontal metric display - Create FilterChip component for removable filter tags - Redesign Command Center with flat sections, reduced cards - Tighten AppShell spacing (sidebar w-56, header mb-3, main space-y-4) Design goals achieved: - Denser, cleaner terminal-style layout - Reduced card usage in favor of flat sections with dividers - More space-efficient controls and metrics - Better use of widescreen layouts
This commit is contained in:
251
app/globals.css
251
app/globals.css
@@ -1,8 +1,10 @@
|
||||
@import "tailwindcss";
|
||||
|
||||
:root {
|
||||
--font-display: "Avenir Next", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
|
||||
--font-mono: "Menlo", "SFMono-Regular", "Consolas", "Liberation Mono", monospace;
|
||||
--font-display:
|
||||
"Avenir Next", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
|
||||
--font-mono:
|
||||
"Menlo", "SFMono-Regular", "Consolas", "Liberation Mono", monospace;
|
||||
--bg-0: #121417;
|
||||
--bg-1: #181b20;
|
||||
--bg-2: #21252b;
|
||||
@@ -57,8 +59,16 @@ body {
|
||||
font-family: var(--font-display), sans-serif;
|
||||
color: var(--terminal-bright);
|
||||
background:
|
||||
radial-gradient(circle at 18% -10%, rgba(170, 178, 188, 0.16), transparent 35%),
|
||||
radial-gradient(circle at 84% 0%, rgba(121, 128, 138, 0.14), transparent 30%),
|
||||
radial-gradient(
|
||||
circle at 18% -10%,
|
||||
rgba(170, 178, 188, 0.16),
|
||||
transparent 35%
|
||||
),
|
||||
radial-gradient(
|
||||
circle at 84% 0%,
|
||||
rgba(121, 128, 138, 0.14),
|
||||
transparent 30%
|
||||
),
|
||||
linear-gradient(140deg, var(--bg-0), var(--bg-1) 50%, var(--bg-2));
|
||||
}
|
||||
|
||||
@@ -85,7 +95,10 @@ body {
|
||||
inset: 0;
|
||||
pointer-events: none;
|
||||
opacity: 0.24;
|
||||
background-image: radial-gradient(rgba(220, 226, 234, 0.1) 0.7px, transparent 0.7px);
|
||||
background-image: radial-gradient(
|
||||
rgba(220, 226, 234, 0.1) 0.7px,
|
||||
transparent 0.7px
|
||||
);
|
||||
background-size: 4px 4px;
|
||||
}
|
||||
|
||||
@@ -114,14 +127,22 @@ textarea {
|
||||
.data-surface {
|
||||
border: 1px solid var(--line-weak);
|
||||
border-radius: 1rem;
|
||||
background: linear-gradient(180deg, rgba(40, 43, 49, 0.92), rgba(24, 27, 32, 0.78));
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
rgba(40, 43, 49, 0.92),
|
||||
rgba(24, 27, 32, 0.78)
|
||||
);
|
||||
}
|
||||
|
||||
.data-table-wrap {
|
||||
overflow-x: auto;
|
||||
border: 1px solid var(--line-weak);
|
||||
border-radius: 1rem;
|
||||
background: linear-gradient(180deg, rgba(34, 37, 42, 0.9), rgba(20, 23, 27, 0.76));
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
rgba(34, 37, 42, 0.9),
|
||||
rgba(20, 23, 27, 0.76)
|
||||
);
|
||||
}
|
||||
|
||||
.data-table th,
|
||||
@@ -172,8 +193,16 @@ textarea {
|
||||
@media (max-width: 640px) {
|
||||
body {
|
||||
background:
|
||||
radial-gradient(circle at 24% -4%, rgba(170, 178, 188, 0.14), transparent 36%),
|
||||
radial-gradient(circle at 82% 2%, rgba(121, 128, 138, 0.12), transparent 30%),
|
||||
radial-gradient(
|
||||
circle at 24% -4%,
|
||||
rgba(170, 178, 188, 0.14),
|
||||
transparent 36%
|
||||
),
|
||||
radial-gradient(
|
||||
circle at 82% 2%,
|
||||
rgba(121, 128, 138, 0.12),
|
||||
transparent 30%
|
||||
),
|
||||
linear-gradient(155deg, var(--bg-0), var(--bg-1) 54%, var(--bg-2));
|
||||
}
|
||||
|
||||
@@ -183,3 +212,207 @@ textarea {
|
||||
font-size: 0.8125rem;
|
||||
}
|
||||
}
|
||||
|
||||
.panel-compact {
|
||||
padding: 0.75rem;
|
||||
}
|
||||
|
||||
.panel-dense {
|
||||
padding: 0.5rem 0.75rem;
|
||||
}
|
||||
|
||||
.data-table-dense {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
.data-table-dense th,
|
||||
.data-table-dense td {
|
||||
border-bottom: 1px solid var(--line-weak);
|
||||
padding: 0.5rem 0.6rem;
|
||||
text-align: left;
|
||||
font-size: 0.8125rem;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.data-table-dense th {
|
||||
font-family: var(--font-mono), monospace;
|
||||
font-size: 0.6875rem;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
color: var(--terminal-muted);
|
||||
}
|
||||
|
||||
.data-table-dense tbody tr:hover {
|
||||
background-color: rgba(63, 68, 76, 0.32);
|
||||
}
|
||||
|
||||
.metric-compact {
|
||||
padding-top: 0.5rem;
|
||||
}
|
||||
|
||||
.metric-compact .metric-value {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.metric-compact .metric-label {
|
||||
font-size: 0.625rem;
|
||||
}
|
||||
|
||||
.index-card-row {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
overflow-x: auto;
|
||||
padding-bottom: 0.25rem;
|
||||
scrollbar-width: thin;
|
||||
}
|
||||
|
||||
.index-card-row::-webkit-scrollbar {
|
||||
height: 4px;
|
||||
}
|
||||
|
||||
.index-card-row::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.index-card-row::-webkit-scrollbar-thumb {
|
||||
background: var(--line-weak);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.index-card {
|
||||
flex-shrink: 0;
|
||||
min-width: 140px;
|
||||
padding: 0.625rem 0.75rem;
|
||||
border-right: 1px solid var(--line-weak);
|
||||
}
|
||||
|
||||
.index-card:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
.index-card .label {
|
||||
font-family: var(--font-mono), monospace;
|
||||
font-size: 0.625rem;
|
||||
letter-spacing: 0.1em;
|
||||
text-transform: uppercase;
|
||||
color: var(--terminal-muted);
|
||||
}
|
||||
|
||||
.index-card .value {
|
||||
font-size: 1.125rem;
|
||||
font-weight: 600;
|
||||
color: var(--terminal-bright);
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
|
||||
.index-card .delta {
|
||||
font-size: 0.75rem;
|
||||
margin-top: 0.125rem;
|
||||
}
|
||||
|
||||
.index-card .delta.positive {
|
||||
color: #96f5bf;
|
||||
}
|
||||
|
||||
.index-card .delta.negative {
|
||||
color: #ff9f9f;
|
||||
}
|
||||
|
||||
.filter-chip {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.375rem;
|
||||
padding: 0.25rem 0.5rem;
|
||||
border-radius: 0.5rem;
|
||||
border: 1px solid var(--line-weak);
|
||||
background: var(--panel-soft);
|
||||
font-size: 0.6875rem;
|
||||
font-family: var(--font-mono), monospace;
|
||||
letter-spacing: 0.06em;
|
||||
text-transform: uppercase;
|
||||
color: var(--terminal-bright);
|
||||
transition:
|
||||
border-color 0.15s,
|
||||
background-color 0.15s;
|
||||
}
|
||||
|
||||
.filter-chip:hover {
|
||||
border-color: var(--line-strong);
|
||||
}
|
||||
|
||||
.filter-chip .remove {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
border-radius: 3px;
|
||||
cursor: pointer;
|
||||
opacity: 0.6;
|
||||
transition:
|
||||
opacity 0.15s,
|
||||
background-color 0.15s;
|
||||
}
|
||||
|
||||
.filter-chip .remove:hover {
|
||||
opacity: 1;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.section-divider {
|
||||
border-top: 1px solid var(--line-weak);
|
||||
margin-top: 1rem;
|
||||
padding-top: 1rem;
|
||||
}
|
||||
|
||||
.section-divider-compact {
|
||||
border-top: 1px solid var(--line-weak);
|
||||
margin-top: 0.75rem;
|
||||
padding-top: 0.75rem;
|
||||
}
|
||||
|
||||
.toolbar-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.screener-table-wrap {
|
||||
overflow-x: auto;
|
||||
border: 1px solid var(--line-weak);
|
||||
border-radius: 0.75rem;
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
rgba(34, 37, 42, 0.9),
|
||||
rgba(20, 23, 27, 0.76)
|
||||
);
|
||||
}
|
||||
|
||||
.screener-table-wrap thead {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background: rgba(28, 31, 36, 0.95);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.screener-table-wrap thead::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
height: 1px;
|
||||
background: var(--line-weak);
|
||||
}
|
||||
|
||||
.control-compact {
|
||||
min-height: 32px;
|
||||
padding: 0.375rem 0.625rem;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.control-compact.rounded-xl {
|
||||
border-radius: 0.625rem;
|
||||
}
|
||||
|
||||
310
app/page.tsx
310
app/page.tsx
@@ -1,31 +1,32 @@
|
||||
'use client';
|
||||
"use client";
|
||||
|
||||
import { useQueryClient } from '@tanstack/react-query';
|
||||
import Link from 'next/link';
|
||||
import { useCallback, useEffect, useMemo, useState } from 'react';
|
||||
import { Activity, Bot, RefreshCw, Sparkles } from 'lucide-react';
|
||||
import { AppShell } from '@/components/shell/app-shell';
|
||||
import { Panel } from '@/components/ui/panel';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { MetricCard } from '@/components/dashboard/metric-card';
|
||||
import { TaskFeed } from '@/components/dashboard/task-feed';
|
||||
import { useAuthGuard } from '@/hooks/use-auth-guard';
|
||||
import { useLinkPrefetch } from '@/hooks/use-link-prefetch';
|
||||
import { useQueryClient } from "@tanstack/react-query";
|
||||
import Link from "next/link";
|
||||
import { useCallback, useEffect, useMemo, useState } from "react";
|
||||
import { Activity, Bot, RefreshCw, Sparkles } from "lucide-react";
|
||||
import { AppShell } from "@/components/shell/app-shell";
|
||||
import { Panel } from "@/components/ui/panel";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { TaskFeed } from "@/components/dashboard/task-feed";
|
||||
import { IndexCardRow } from "@/components/dashboard/index-card-row";
|
||||
import { useAuthGuard } from "@/hooks/use-auth-guard";
|
||||
import { useLinkPrefetch } from "@/hooks/use-link-prefetch";
|
||||
import { queuePortfolioInsights, queuePriceRefresh } from "@/lib/api";
|
||||
import { buildGraphingHref } from "@/lib/graphing/catalog";
|
||||
import type { PortfolioInsight, PortfolioSummary, Task } from "@/lib/types";
|
||||
import {
|
||||
queuePortfolioInsights,
|
||||
queuePriceRefresh
|
||||
} from '@/lib/api';
|
||||
import { buildGraphingHref } from '@/lib/graphing/catalog';
|
||||
import type { PortfolioInsight, PortfolioSummary, Task } from '@/lib/types';
|
||||
import { formatCompactCurrency, formatCurrency, formatPercent } from '@/lib/format';
|
||||
import { queryKeys } from '@/lib/query/keys';
|
||||
formatCompactCurrency,
|
||||
formatCurrency,
|
||||
formatPercent,
|
||||
} from "@/lib/format";
|
||||
import { queryKeys } from "@/lib/query/keys";
|
||||
import {
|
||||
filingsQueryOptions,
|
||||
latestPortfolioInsightQueryOptions,
|
||||
portfolioSummaryQueryOptions,
|
||||
recentTasksQueryOptions,
|
||||
watchlistQueryOptions
|
||||
} from '@/lib/query/options';
|
||||
watchlistQueryOptions,
|
||||
} from "@/lib/query/options";
|
||||
|
||||
type DashboardState = {
|
||||
summary: PortfolioSummary;
|
||||
@@ -38,15 +39,15 @@ type DashboardState = {
|
||||
const EMPTY_STATE: DashboardState = {
|
||||
summary: {
|
||||
positions: 0,
|
||||
total_value: '0',
|
||||
total_gain_loss: '0',
|
||||
total_cost_basis: '0',
|
||||
avg_return_pct: '0'
|
||||
total_value: "0",
|
||||
total_gain_loss: "0",
|
||||
total_cost_basis: "0",
|
||||
avg_return_pct: "0",
|
||||
},
|
||||
filingsCount: 0,
|
||||
watchlistCount: 0,
|
||||
tasks: [],
|
||||
latestInsight: null
|
||||
latestInsight: null,
|
||||
};
|
||||
|
||||
export default function CommandCenterPage() {
|
||||
@@ -71,12 +72,13 @@ export default function CommandCenterPage() {
|
||||
setError(null);
|
||||
|
||||
try {
|
||||
const [summaryRes, filingsRes, watchlistRes, tasksRes, insightRes] = await Promise.all([
|
||||
const [summaryRes, filingsRes, watchlistRes, tasksRes, insightRes] =
|
||||
await Promise.all([
|
||||
queryClient.ensureQueryData(summaryOptions),
|
||||
queryClient.ensureQueryData(filingsOptions),
|
||||
queryClient.ensureQueryData(watchlistOptions),
|
||||
queryClient.ensureQueryData(tasksOptions),
|
||||
queryClient.ensureQueryData(insightOptions)
|
||||
queryClient.ensureQueryData(insightOptions),
|
||||
]);
|
||||
|
||||
setState({
|
||||
@@ -84,10 +86,10 @@ export default function CommandCenterPage() {
|
||||
filingsCount: filingsRes.filings.length,
|
||||
watchlistCount: watchlistRes.items.length,
|
||||
tasks: tasksRes.tasks,
|
||||
latestInsight: insightRes.insight
|
||||
latestInsight: insightRes.insight,
|
||||
});
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : 'Failed to load dashboard');
|
||||
setError(err instanceof Error ? err.message : "Failed to load dashboard");
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
@@ -100,39 +102,55 @@ export default function CommandCenterPage() {
|
||||
}, [isPending, isAuthenticated, loadData]);
|
||||
|
||||
const headerActions = (
|
||||
<>
|
||||
<div className="flex gap-2">
|
||||
<Button
|
||||
variant="secondary"
|
||||
size="compact"
|
||||
onClick={async () => {
|
||||
try {
|
||||
await queuePriceRefresh();
|
||||
void queryClient.invalidateQueries({ queryKey: queryKeys.recentTasks(20) });
|
||||
void queryClient.invalidateQueries({ queryKey: queryKeys.portfolioSummary() });
|
||||
void queryClient.invalidateQueries({
|
||||
queryKey: queryKeys.recentTasks(20),
|
||||
});
|
||||
void queryClient.invalidateQueries({
|
||||
queryKey: queryKeys.portfolioSummary(),
|
||||
});
|
||||
await loadData();
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : 'Failed to queue price refresh');
|
||||
setError(
|
||||
err instanceof Error
|
||||
? err.message
|
||||
: "Failed to queue price refresh",
|
||||
);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<RefreshCw className="size-4" />
|
||||
Refresh prices
|
||||
<RefreshCw className="size-3.5" />
|
||||
Refresh
|
||||
</Button>
|
||||
<Button
|
||||
size="compact"
|
||||
onClick={async () => {
|
||||
try {
|
||||
await queuePortfolioInsights();
|
||||
void queryClient.invalidateQueries({ queryKey: queryKeys.recentTasks(20) });
|
||||
void queryClient.invalidateQueries({ queryKey: queryKeys.latestPortfolioInsight() });
|
||||
void queryClient.invalidateQueries({
|
||||
queryKey: queryKeys.recentTasks(20),
|
||||
});
|
||||
void queryClient.invalidateQueries({
|
||||
queryKey: queryKeys.latestPortfolioInsight(),
|
||||
});
|
||||
await loadData();
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : 'Failed to queue AI insight');
|
||||
setError(
|
||||
err instanceof Error ? err.message : "Failed to queue AI insight",
|
||||
);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Sparkles className="size-4" />
|
||||
Queue AI insight
|
||||
<Sparkles className="size-3.5" />
|
||||
AI Insight
|
||||
</Button>
|
||||
</>
|
||||
</div>
|
||||
);
|
||||
|
||||
const signedGain = useMemo(() => {
|
||||
@@ -140,114 +158,200 @@ export default function CommandCenterPage() {
|
||||
return gain >= 0 ? `+${formatCurrency(gain)}` : formatCurrency(gain);
|
||||
}, [state.summary.total_gain_loss]);
|
||||
|
||||
const indexCards = useMemo(
|
||||
() => [
|
||||
{
|
||||
label: "Portfolio Value",
|
||||
value: formatCurrency(state.summary.total_value),
|
||||
delta: formatCompactCurrency(state.summary.total_cost_basis),
|
||||
},
|
||||
{
|
||||
label: "Unrealized P&L",
|
||||
value: signedGain,
|
||||
delta: formatPercent(state.summary.avg_return_pct),
|
||||
positive: Number(state.summary.total_gain_loss) >= 0,
|
||||
},
|
||||
{
|
||||
label: "Filings",
|
||||
value: String(state.filingsCount),
|
||||
delta: "Last 200",
|
||||
},
|
||||
{
|
||||
label: "Coverage",
|
||||
value: String(state.watchlistCount),
|
||||
delta: `${state.summary.positions} active`,
|
||||
},
|
||||
],
|
||||
[state, signedGain],
|
||||
);
|
||||
|
||||
if (isPending || !isAuthenticated) {
|
||||
return <div className="flex min-h-screen items-center justify-center text-sm text-[color:var(--terminal-muted)]">Booting secure terminal...</div>;
|
||||
return (
|
||||
<div className="flex min-h-screen items-center justify-center text-sm text-[color:var(--terminal-muted)]">
|
||||
Booting secure terminal...
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<AppShell
|
||||
title="Command Center"
|
||||
subtitle={`Welcome back${session?.user?.name ? `, ${session.user.name}` : ''}. Review tasks, portfolio health, and AI outputs.`}
|
||||
subtitle={
|
||||
session?.user?.name
|
||||
? `Welcome back, ${session.user.name}`
|
||||
: "Review tasks, portfolio health, and AI outputs."
|
||||
}
|
||||
actions={headerActions}
|
||||
>
|
||||
{error ? (
|
||||
<Panel variant="surface">
|
||||
<p className="text-sm text-[#ffb5b5]">{error}</p>
|
||||
</Panel>
|
||||
<div className="rounded-lg border border-[color:var(--line-weak)] bg-[color:var(--danger-soft)] px-3 py-2 text-sm text-[#ffb5b5]">
|
||||
{error}
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
<div className="grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-4">
|
||||
<MetricCard label="Portfolio Value" value={formatCurrency(state.summary.total_value)} delta={formatCompactCurrency(state.summary.total_cost_basis)} />
|
||||
<MetricCard
|
||||
label="Unrealized P&L"
|
||||
value={signedGain}
|
||||
delta={formatPercent(state.summary.avg_return_pct)}
|
||||
positive={Number(state.summary.total_gain_loss) >= 0}
|
||||
/>
|
||||
<MetricCard label="Tracked Filings" value={String(state.filingsCount)} delta="Last 200 records" />
|
||||
<MetricCard label="Coverage Names" value={String(state.watchlistCount)} delta={`${state.summary.positions} positions active`} />
|
||||
<div className="rounded-lg border border-[color:var(--line-weak)] bg-[color:var(--panel-soft)]">
|
||||
<IndexCardRow cards={indexCards} />
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 gap-6 xl:grid-cols-3">
|
||||
<Panel title="Recent Tasks" subtitle="Durable jobs from queue processor" className="xl:col-span-1" variant="surface">
|
||||
<div className="grid grid-cols-1 gap-4 xl:grid-cols-3">
|
||||
<div className="border-t border-[color:var(--line-weak)] pt-4 xl:col-span-1">
|
||||
<div className="mb-3 flex items-center justify-between">
|
||||
<h3 className="text-sm font-semibold text-[color:var(--terminal-bright)]">
|
||||
Recent Tasks
|
||||
</h3>
|
||||
<span className="terminal-caption text-[10px] uppercase tracking-[0.12em] text-[color:var(--terminal-muted)]">
|
||||
Queue Processor
|
||||
</span>
|
||||
</div>
|
||||
{loading ? (
|
||||
<p className="text-sm text-[color:var(--terminal-muted)]">Loading tasks...</p>
|
||||
<p className="text-xs text-[color:var(--terminal-muted)]">
|
||||
Loading...
|
||||
</p>
|
||||
) : (
|
||||
<TaskFeed tasks={state.tasks} />
|
||||
)}
|
||||
</Panel>
|
||||
</div>
|
||||
|
||||
<Panel title="AI Brief" subtitle="Latest portfolio insight from AI SDK (Zhipu)" className="xl:col-span-2" variant="surface">
|
||||
{loading ? (
|
||||
<p className="text-sm text-[color:var(--terminal-muted)]">Loading intelligence output...</p>
|
||||
) : state.latestInsight ? (
|
||||
<>
|
||||
<div className="mb-3 inline-flex items-center gap-2 rounded-md border border-[color:var(--line-weak)] bg-[color:var(--panel-soft)] px-2 py-1 text-xs text-[color:var(--terminal-muted)]">
|
||||
<Bot className="size-3.5" />
|
||||
<div className="border-t border-[color:var(--line-weak)] pt-4 xl:col-span-2">
|
||||
<div className="mb-3 flex items-center justify-between">
|
||||
<h3 className="text-sm font-semibold text-[color:var(--terminal-bright)]">
|
||||
AI Brief
|
||||
</h3>
|
||||
{state.latestInsight ? (
|
||||
<div className="inline-flex items-center gap-1.5 rounded border border-[color:var(--line-weak)] bg-[color:var(--panel-soft)] px-2 py-0.5 text-[10px] text-[color:var(--terminal-muted)]">
|
||||
<Bot className="size-3" />
|
||||
{state.latestInsight.provider} :: {state.latestInsight.model}
|
||||
</div>
|
||||
<p className="whitespace-pre-wrap text-sm leading-6 text-[color:var(--terminal-bright)]">{state.latestInsight.content}</p>
|
||||
</>
|
||||
) : null}
|
||||
</div>
|
||||
{loading ? (
|
||||
<p className="text-xs text-[color:var(--terminal-muted)]">
|
||||
Loading...
|
||||
</p>
|
||||
) : state.latestInsight ? (
|
||||
<p className="whitespace-pre-wrap text-sm leading-6 text-[color:var(--terminal-bright)]">
|
||||
{state.latestInsight.content}
|
||||
</p>
|
||||
) : (
|
||||
<p className="text-sm text-[color:var(--terminal-muted)]">No AI brief yet. Queue one from the action bar.</p>
|
||||
<p className="text-xs text-[color:var(--terminal-muted)]">
|
||||
No AI brief yet. Queue one from the action bar.
|
||||
</p>
|
||||
)}
|
||||
</Panel>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Panel title="Quick Links" subtitle="Feature modules">
|
||||
<div className="grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-3">
|
||||
<Link className="border-l-2 border-[color:var(--line-weak)] py-1 pl-4 pr-2 transition hover:border-[color:var(--line-strong)]" href="/analysis">
|
||||
<p className="panel-heading text-xs uppercase text-[color:var(--terminal-muted)]">Overview</p>
|
||||
<p className="mt-2 text-sm text-[color:var(--terminal-bright)]">Inspect one company across price, SEC context, valuation, and recent developments.</p>
|
||||
</Link>
|
||||
<Link className="border-l-2 border-[color:var(--line-weak)] py-1 pl-4 pr-2 transition hover:border-[color:var(--line-strong)]" href="/financials">
|
||||
<p className="panel-heading text-xs uppercase text-[color:var(--terminal-muted)]">Financials</p>
|
||||
<p className="mt-2 text-sm text-[color:var(--terminal-bright)]">Focus on multi-period filing metrics, margins, leverage, and balance sheet composition.</p>
|
||||
</Link>
|
||||
<Link className="border-l-2 border-[color:var(--line-weak)] py-1 pl-4 pr-2 transition hover:border-[color:var(--line-strong)]" href={buildGraphingHref()}>
|
||||
<p className="panel-heading text-xs uppercase text-[color:var(--terminal-muted)]">Graphing</p>
|
||||
<p className="mt-2 text-sm text-[color:var(--terminal-bright)]">Compare one normalized metric across multiple companies with shareable chart state.</p>
|
||||
<div className="border-t border-[color:var(--line-weak)] pt-4">
|
||||
<h3 className="mb-3 text-sm font-semibold text-[color:var(--terminal-bright)]">
|
||||
Quick Links
|
||||
</h3>
|
||||
<div className="grid grid-cols-1 gap-2 sm:grid-cols-2 lg:grid-cols-3">
|
||||
<Link
|
||||
className="border-l-2 border-[color:var(--line-weak)] py-1 pl-3 pr-2 transition hover:border-[color:var(--line-strong)]"
|
||||
href="/analysis"
|
||||
>
|
||||
<p className="panel-heading text-[10px] uppercase tracking-[0.14em] text-[color:var(--terminal-muted)]">
|
||||
Overview
|
||||
</p>
|
||||
<p className="mt-1 text-xs text-[color:var(--terminal-bright)]">
|
||||
Company analysis, price, valuation, and developments.
|
||||
</p>
|
||||
</Link>
|
||||
<Link
|
||||
className="border-l-2 border-[color:var(--line-weak)] py-1 pl-4 pr-2 transition hover:border-[color:var(--line-strong)]"
|
||||
className="border-l-2 border-[color:var(--line-weak)] py-1 pl-3 pr-2 transition hover:border-[color:var(--line-strong)]"
|
||||
href="/financials"
|
||||
>
|
||||
<p className="panel-heading text-[10px] uppercase tracking-[0.14em] text-[color:var(--terminal-muted)]">
|
||||
Financials
|
||||
</p>
|
||||
<p className="mt-1 text-xs text-[color:var(--terminal-bright)]">
|
||||
Multi-period metrics, margins, and balance sheet.
|
||||
</p>
|
||||
</Link>
|
||||
<Link
|
||||
className="border-l-2 border-[color:var(--line-weak)] py-1 pl-3 pr-2 transition hover:border-[color:var(--line-strong)]"
|
||||
href={buildGraphingHref()}
|
||||
>
|
||||
<p className="panel-heading text-[10px] uppercase tracking-[0.14em] text-[color:var(--terminal-muted)]">
|
||||
Graphing
|
||||
</p>
|
||||
<p className="mt-1 text-xs text-[color:var(--terminal-bright)]">
|
||||
Compare normalized metrics across companies.
|
||||
</p>
|
||||
</Link>
|
||||
<Link
|
||||
className="border-l-2 border-[color:var(--line-weak)] py-1 pl-3 pr-2 transition hover:border-[color:var(--line-strong)]"
|
||||
href="/filings"
|
||||
onMouseEnter={() => {
|
||||
void queryClient.prefetchQuery(filingsQueryOptions({ limit: 120 }));
|
||||
void queryClient.prefetchQuery(
|
||||
filingsQueryOptions({ limit: 120 }),
|
||||
);
|
||||
}}
|
||||
onFocus={() => {
|
||||
void queryClient.prefetchQuery(filingsQueryOptions({ limit: 120 }));
|
||||
void queryClient.prefetchQuery(
|
||||
filingsQueryOptions({ limit: 120 }),
|
||||
);
|
||||
}}
|
||||
>
|
||||
<p className="panel-heading text-xs uppercase text-[color:var(--terminal-muted)]">Filings</p>
|
||||
<p className="mt-2 text-sm text-[color:var(--terminal-bright)]">Sync SEC filings and trigger AI memo analysis.</p>
|
||||
<p className="panel-heading text-[10px] uppercase tracking-[0.14em] text-[color:var(--terminal-muted)]">
|
||||
Filings
|
||||
</p>
|
||||
<p className="mt-1 text-xs text-[color:var(--terminal-bright)]">
|
||||
SEC filings and AI memo analysis.
|
||||
</p>
|
||||
</Link>
|
||||
<Link
|
||||
className="border-l-2 border-[color:var(--line-weak)] py-1 pl-4 pr-2 transition hover:border-[color:var(--line-strong)]"
|
||||
className="border-l-2 border-[color:var(--line-weak)] py-1 pl-3 pr-2 transition hover:border-[color:var(--line-strong)]"
|
||||
href="/portfolio"
|
||||
onMouseEnter={() => prefetchPortfolioSurfaces()}
|
||||
onFocus={() => prefetchPortfolioSurfaces()}
|
||||
>
|
||||
<p className="panel-heading text-xs uppercase text-[color:var(--terminal-muted)]">Portfolio</p>
|
||||
<p className="mt-2 text-sm text-[color:var(--terminal-bright)]">Manage the active private portfolio and mark positions to market.</p>
|
||||
<p className="panel-heading text-[10px] uppercase tracking-[0.14em] text-[color:var(--terminal-muted)]">
|
||||
Portfolio
|
||||
</p>
|
||||
<p className="mt-1 text-xs text-[color:var(--terminal-bright)]">
|
||||
Manage positions and mark to market.
|
||||
</p>
|
||||
</Link>
|
||||
<Link
|
||||
className="border-l-2 border-[color:var(--line-weak)] py-1 pl-4 pr-2 transition hover:border-[color:var(--line-strong)]"
|
||||
className="border-l-2 border-[color:var(--line-weak)] py-1 pl-3 pr-2 transition hover:border-[color:var(--line-strong)]"
|
||||
href="/watchlist"
|
||||
onMouseEnter={() => prefetchPortfolioSurfaces()}
|
||||
onFocus={() => prefetchPortfolioSurfaces()}
|
||||
>
|
||||
<p className="panel-heading text-xs uppercase text-[color:var(--terminal-muted)]">Coverage</p>
|
||||
<p className="mt-2 text-sm text-[color:var(--terminal-bright)]">Track research status, review cadence, and filing freshness per company.</p>
|
||||
<p className="panel-heading text-[10px] uppercase tracking-[0.14em] text-[color:var(--terminal-muted)]">
|
||||
Coverage
|
||||
</p>
|
||||
<p className="mt-1 text-xs text-[color:var(--terminal-bright)]">
|
||||
Track research status and filing freshness.
|
||||
</p>
|
||||
</Link>
|
||||
</div>
|
||||
</Panel>
|
||||
|
||||
<Panel>
|
||||
<div className="flex items-center gap-2 text-xs uppercase tracking-[0.24em] text-[color:var(--terminal-muted)]">
|
||||
<Activity className="size-4" />
|
||||
Runtime state: {loading ? 'syncing' : 'stable'}
|
||||
</div>
|
||||
</Panel>
|
||||
|
||||
<div className="flex items-center gap-2 text-[10px] uppercase tracking-[0.2em] text-[color:var(--terminal-muted)]">
|
||||
<Activity className="size-3" />
|
||||
Runtime: {loading ? "syncing" : "stable"}
|
||||
</div>
|
||||
</AppShell>
|
||||
);
|
||||
}
|
||||
|
||||
45
components/dashboard/index-card-row.tsx
Normal file
45
components/dashboard/index-card-row.tsx
Normal file
@@ -0,0 +1,45 @@
|
||||
"use client";
|
||||
|
||||
import { memo } from "react";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
type IndexCardProps = {
|
||||
label: string;
|
||||
value: string;
|
||||
delta?: string;
|
||||
positive?: boolean;
|
||||
};
|
||||
|
||||
type IndexCardRowProps = {
|
||||
cards: IndexCardProps[];
|
||||
className?: string;
|
||||
};
|
||||
|
||||
const IndexCard = memo(function IndexCard({
|
||||
label,
|
||||
value,
|
||||
delta,
|
||||
positive = true,
|
||||
}: IndexCardProps) {
|
||||
return (
|
||||
<div className="index-card">
|
||||
<p className="label">{label}</p>
|
||||
<p className="value">{value}</p>
|
||||
{delta ? (
|
||||
<p className={cn("delta", positive ? "positive" : "negative")}>
|
||||
{delta}
|
||||
</p>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
});
|
||||
|
||||
export function IndexCardRow({ cards, className }: IndexCardRowProps) {
|
||||
return (
|
||||
<div className={cn("index-card-row", className)}>
|
||||
{cards.map((card, index) => (
|
||||
<IndexCard key={`${card.label}-${index}`} {...card} />
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,4 +1,6 @@
|
||||
import { cn } from '@/lib/utils';
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
type MetricCardSize = "default" | "compact" | "inline";
|
||||
|
||||
type MetricCardProps = {
|
||||
label: string;
|
||||
@@ -6,15 +8,79 @@ type MetricCardProps = {
|
||||
delta?: string;
|
||||
positive?: boolean;
|
||||
className?: string;
|
||||
size?: MetricCardSize;
|
||||
};
|
||||
|
||||
export function MetricCard({ label, value, delta, positive = true, className }: MetricCardProps) {
|
||||
export function MetricCard({
|
||||
label,
|
||||
value,
|
||||
delta,
|
||||
positive = true,
|
||||
className,
|
||||
size = "default",
|
||||
}: MetricCardProps) {
|
||||
if (size === "inline") {
|
||||
return (
|
||||
<div className={cn('min-w-0 border-t border-[color:var(--line-weak)] pt-3', className)}>
|
||||
<p className="panel-heading text-[11px] uppercase tracking-[0.18em] text-[color:var(--terminal-muted)]">{label}</p>
|
||||
<p className="mt-2 text-3xl font-semibold text-[color:var(--terminal-bright)]">{value}</p>
|
||||
<div className={cn("index-card", className)}>
|
||||
<p className="label">{label}</p>
|
||||
<p className="value">{value}</p>
|
||||
{delta ? (
|
||||
<p className={cn('mt-2 text-xs', positive ? 'text-[#96f5bf]' : 'text-[#ff9898]')}>
|
||||
<p className={cn("delta", positive ? "positive" : "negative")}>
|
||||
{delta}
|
||||
</p>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (size === "compact") {
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
"min-w-0 border-t border-[color:var(--line-weak)] pt-2",
|
||||
className,
|
||||
)}
|
||||
>
|
||||
<p className="panel-heading text-[10px] uppercase tracking-[0.16em] text-[color:var(--terminal-muted)]">
|
||||
{label}
|
||||
</p>
|
||||
<p className="mt-1 text-xl font-semibold text-[color:var(--terminal-bright)]">
|
||||
{value}
|
||||
</p>
|
||||
{delta ? (
|
||||
<p
|
||||
className={cn(
|
||||
"mt-1 text-[10px]",
|
||||
positive ? "text-[#96f5bf]" : "text-[#ff9898]",
|
||||
)}
|
||||
>
|
||||
{delta}
|
||||
</p>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
"min-w-0 border-t border-[color:var(--line-weak)] pt-3",
|
||||
className,
|
||||
)}
|
||||
>
|
||||
<p className="panel-heading text-[11px] uppercase tracking-[0.18em] text-[color:var(--terminal-muted)]">
|
||||
{label}
|
||||
</p>
|
||||
<p className="mt-2 text-3xl font-semibold text-[color:var(--terminal-bright)]">
|
||||
{value}
|
||||
</p>
|
||||
{delta ? (
|
||||
<p
|
||||
className={cn(
|
||||
"mt-2 text-xs",
|
||||
positive ? "text-[#96f5bf]" : "text-[#ff9898]",
|
||||
)}
|
||||
>
|
||||
{delta}
|
||||
</p>
|
||||
) : null}
|
||||
|
||||
@@ -530,7 +530,7 @@ export function AppShell({
|
||||
className={cn(
|
||||
"hidden shrink-0 flex-col gap-4 border-r border-[color:var(--line-weak)] lg:flex",
|
||||
hasMounted ? "transition-[width,padding] duration-200" : "",
|
||||
isSidebarCollapsed ? "w-16 pr-1" : "w-72 pr-4",
|
||||
isSidebarCollapsed ? "w-16 pr-1" : "w-56 pr-4",
|
||||
)}
|
||||
>
|
||||
<div
|
||||
@@ -655,7 +655,7 @@ export function AppShell({
|
||||
</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">
|
||||
<header className="relative mb-3 border-b border-[color:var(--line-weak)] pb-3 pr-16 sm:pb-4 sm:pr-20">
|
||||
<div className="absolute right-4 top-4 z-10 sm:right-5 sm:top-5">
|
||||
<TaskNotificationsTrigger
|
||||
unreadCount={notifications.unreadCount}
|
||||
@@ -704,7 +704,7 @@ export function AppShell({
|
||||
|
||||
<nav
|
||||
aria-label="Breadcrumb"
|
||||
className="mb-6 overflow-x-auto border-b border-[color:var(--line-weak)] pb-3"
|
||||
className="mb-4 overflow-x-auto border-b border-[color:var(--line-weak)] pb-2"
|
||||
>
|
||||
<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) => {
|
||||
@@ -743,7 +743,7 @@ export function AppShell({
|
||||
</ol>
|
||||
</nav>
|
||||
|
||||
<main className="min-w-0 space-y-6">{children}</main>
|
||||
<main className="min-w-0 space-y-4">{children}</main>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -1,25 +1,42 @@
|
||||
import { cn } from '@/lib/utils';
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
type ButtonVariant = 'primary' | 'ghost' | 'danger' | 'secondary';
|
||||
type ButtonVariant = "primary" | "ghost" | "danger" | "secondary";
|
||||
type ButtonSize = "default" | "compact";
|
||||
|
||||
type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
|
||||
variant?: ButtonVariant;
|
||||
size?: ButtonSize;
|
||||
};
|
||||
|
||||
const variantMap: Record<ButtonVariant, string> = {
|
||||
primary: 'border-[color:var(--line-strong)] bg-[color:var(--accent)] text-[#16181c] hover:bg-[color:var(--accent-strong)]',
|
||||
secondary: 'border-[color:var(--line-weak)] bg-[color:var(--panel-bright)] text-[color:var(--terminal-bright)] hover:border-[color:var(--line-strong)] hover:bg-[color:var(--panel)]',
|
||||
ghost: 'border-[color:var(--line-weak)] bg-transparent text-[color:var(--terminal-bright)] hover:border-[color:var(--line-strong)] hover:bg-[color:var(--panel-soft)]',
|
||||
danger: 'border-[color:var(--danger)] bg-[color:var(--danger-soft)] text-[#ffc9c9] hover:bg-[color:var(--danger)] hover:text-[#1e0d0d]'
|
||||
primary:
|
||||
"border-[color:var(--line-strong)] bg-[color:var(--accent)] text-[#16181c] hover:bg-[color:var(--accent-strong)]",
|
||||
secondary:
|
||||
"border-[color:var(--line-weak)] bg-[color:var(--panel-bright)] text-[color:var(--terminal-bright)] hover:border-[color:var(--line-strong)] hover:bg-[color:var(--panel)]",
|
||||
ghost:
|
||||
"border-[color:var(--line-weak)] bg-transparent text-[color:var(--terminal-bright)] hover:border-[color:var(--line-strong)] hover:bg-[color:var(--panel-soft)]",
|
||||
danger:
|
||||
"border-[color:var(--danger)] bg-[color:var(--danger-soft)] text-[#ffc9c9] hover:bg-[color:var(--danger)] hover:text-[#1e0d0d]",
|
||||
};
|
||||
|
||||
export function Button({ className, variant = 'primary', ...props }: ButtonProps) {
|
||||
const sizeMap: Record<ButtonSize, string> = {
|
||||
default: "min-h-11 px-3 py-2 text-sm gap-2",
|
||||
compact: "min-h-8 px-2.5 py-1.5 text-xs gap-1.5",
|
||||
};
|
||||
|
||||
export function Button({
|
||||
className,
|
||||
variant = "primary",
|
||||
size = "default",
|
||||
...props
|
||||
}: ButtonProps) {
|
||||
return (
|
||||
<button
|
||||
className={cn(
|
||||
'inline-flex min-h-11 items-center justify-center gap-2 rounded-xl border px-3 py-2 text-sm font-medium transition duration-200 disabled:cursor-not-allowed disabled:opacity-50',
|
||||
"inline-flex items-center justify-center rounded-xl border font-medium transition duration-200 disabled:cursor-not-allowed disabled:opacity-50",
|
||||
variantMap[variant],
|
||||
className
|
||||
sizeMap[size],
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
|
||||
26
components/ui/filter-chip.tsx
Normal file
26
components/ui/filter-chip.tsx
Normal file
@@ -0,0 +1,26 @@
|
||||
"use client";
|
||||
|
||||
import { X } from "lucide-react";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
type FilterChipProps = {
|
||||
label: string;
|
||||
onRemove: () => void;
|
||||
className?: string;
|
||||
};
|
||||
|
||||
export function FilterChip({ label, onRemove, className }: FilterChipProps) {
|
||||
return (
|
||||
<span className={cn("filter-chip", className)}>
|
||||
<span className="truncate">{label}</span>
|
||||
<button
|
||||
type="button"
|
||||
onClick={onRemove}
|
||||
className="remove"
|
||||
aria-label={`Remove ${label} filter`}
|
||||
>
|
||||
<X className="size-3" />
|
||||
</button>
|
||||
</span>
|
||||
);
|
||||
}
|
||||
@@ -1,13 +1,27 @@
|
||||
import { cn } from '@/lib/utils';
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
type InputProps = React.InputHTMLAttributes<HTMLInputElement>;
|
||||
type InputSize = "default" | "compact";
|
||||
|
||||
export function Input({ className, ...props }: InputProps) {
|
||||
type InputProps = React.InputHTMLAttributes<HTMLInputElement> & {
|
||||
inputSize?: InputSize;
|
||||
};
|
||||
|
||||
const sizeMap: Record<InputSize, string> = {
|
||||
default: "min-h-11 px-3 py-2 text-sm",
|
||||
compact: "min-h-8 px-2.5 py-1.5 text-xs",
|
||||
};
|
||||
|
||||
export function Input({
|
||||
className,
|
||||
inputSize = "default",
|
||||
...props
|
||||
}: InputProps) {
|
||||
return (
|
||||
<input
|
||||
className={cn(
|
||||
'min-h-11 w-full rounded-xl border border-[color:var(--line-weak)] bg-[color:var(--panel-soft)] px-3 py-2 text-sm text-[color:var(--terminal-bright)] outline-none transition placeholder:text-[color:var(--terminal-muted)] focus:border-[color:var(--line-strong)] focus:shadow-[0_0_0_3px_var(--focus-ring)]',
|
||||
className
|
||||
"w-full rounded-xl border border-[color:var(--line-weak)] bg-[color:var(--panel-soft)] text-[color:var(--terminal-bright)] outline-none transition placeholder:text-[color:var(--terminal-muted)] focus:border-[color:var(--line-strong)] focus:shadow-[0_0_0_3px_var(--focus-ring)]",
|
||||
sizeMap[inputSize],
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
|
||||
@@ -1,4 +1,7 @@
|
||||
import { cn } from '@/lib/utils';
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
type PanelVariant = "flat" | "surface";
|
||||
type PanelDensity = "normal" | "compact" | "dense";
|
||||
|
||||
type PanelProps = {
|
||||
title?: string;
|
||||
@@ -6,24 +9,82 @@ type PanelProps = {
|
||||
actions?: React.ReactNode;
|
||||
children: React.ReactNode;
|
||||
className?: string;
|
||||
variant?: 'flat' | 'surface';
|
||||
variant?: PanelVariant;
|
||||
density?: PanelDensity;
|
||||
};
|
||||
|
||||
export function Panel({ title, subtitle, actions, children, className, variant = 'flat' }: PanelProps) {
|
||||
const densityStyles: Record<PanelDensity, string> = {
|
||||
normal: "",
|
||||
compact: "",
|
||||
dense: "",
|
||||
};
|
||||
|
||||
const headerDensityStyles: Record<PanelDensity, string> = {
|
||||
normal: "mb-4",
|
||||
compact: "mb-3",
|
||||
dense: "mb-2",
|
||||
};
|
||||
|
||||
export function Panel({
|
||||
title,
|
||||
subtitle,
|
||||
actions,
|
||||
children,
|
||||
className,
|
||||
variant = "flat",
|
||||
density = "normal",
|
||||
}: PanelProps) {
|
||||
const surfaceStyles =
|
||||
density === "normal"
|
||||
? "p-4 sm:p-5"
|
||||
: density === "compact"
|
||||
? "p-3 sm:p-4"
|
||||
: "p-2.5 sm:p-3";
|
||||
|
||||
const flatStyles =
|
||||
density === "normal"
|
||||
? "pt-4 sm:pt-5"
|
||||
: density === "compact"
|
||||
? "pt-3 sm:pt-4"
|
||||
: "pt-2.5 sm:pt-3";
|
||||
|
||||
return (
|
||||
<section
|
||||
className={cn(
|
||||
variant === 'surface'
|
||||
? 'min-w-0 rounded-2xl border border-[color:var(--line-weak)] bg-[color:var(--panel)] p-4 shadow-[0_0_0_1px_rgba(255,255,255,0.03),0_12px_30px_rgba(0,0,0,0.38)] sm:p-5'
|
||||
: 'min-w-0 border-t border-[color:var(--line-weak)] pt-4 sm:pt-5',
|
||||
className
|
||||
"min-w-0",
|
||||
variant === "surface"
|
||||
? cn(
|
||||
"rounded-2xl border border-[color:var(--line-weak)] bg-[color:var(--panel)] shadow-[0_0_0_1px_rgba(255,255,255,0.03),0_12px_30px_rgba(0,0,0,0.38)]",
|
||||
surfaceStyles,
|
||||
)
|
||||
: cn("border-t border-[color:var(--line-weak)]", flatStyles),
|
||||
densityStyles[density],
|
||||
className,
|
||||
)}
|
||||
>
|
||||
{title || subtitle || actions ? (
|
||||
<header
|
||||
className={cn(
|
||||
"flex flex-col gap-2 sm:flex-row sm:items-start sm:justify-between",
|
||||
headerDensityStyles[density],
|
||||
)}
|
||||
>
|
||||
{(title || subtitle || actions) ? (
|
||||
<header className="mb-4 flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
|
||||
<div className="min-w-0">
|
||||
{title ? <h3 className="text-base font-semibold text-[color:var(--terminal-bright)]">{title}</h3> : null}
|
||||
{subtitle ? <p className="mt-1 text-sm text-[color:var(--terminal-muted)]">{subtitle}</p> : null}
|
||||
{title ? (
|
||||
<h3 className="text-sm font-semibold text-[color:var(--terminal-bright)]">
|
||||
{title}
|
||||
</h3>
|
||||
) : null}
|
||||
{subtitle ? (
|
||||
<p
|
||||
className={cn(
|
||||
"text-xs text-[color:var(--terminal-muted)]",
|
||||
title ? "mt-0.5" : "",
|
||||
)}
|
||||
>
|
||||
{subtitle}
|
||||
</p>
|
||||
) : null}
|
||||
</div>
|
||||
{actions ? <div className="w-full sm:w-auto">{actions}</div> : null}
|
||||
</header>
|
||||
|
||||
Reference in New Issue
Block a user