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

@@ -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>
);
}