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:
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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user