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:
2026-03-16 19:51:00 -04:00
parent 14a7773504
commit ca45d8ea4c
9 changed files with 718 additions and 152 deletions

View File

@@ -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}
/>