refactor: flatten Financials page UI for improved density

- Move Matrix panel to top position for better visibility
- Hide trend chart by default (showTrendChart: false)
- Flatten panel design by removing titles and borders
- Compact spacing and reduce UI chrome throughout
- Add chart toggle button in toolbar
- Enable dense and virtualized modes on StatementMatrix
- Fix missing useState import in FinancialsToolbar

The creates a cleaner, more professional Bloomberg terminal-style
interface with better information density and
improved performance through virtualization for large datasets.

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

components/financials/financials-toolbar.tsx

@@ -0,0 +1,122 @@
+'use client';
+
+import { memo, useMemo, useCallback, useRef, useEffect, useState } from 'react';
+import { Download, Search } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { cn } from '@/lib/utils';
+
+export type FinancialControlOption = {
+  value: string;
+  label: string;
+};
+
+export type FinancialControlSection = {
+  key: string;
+  label: string;
+  options: FinancialControlOption[];
+  value: string;
+  onChange: (value: string) => void;
+};
+
+export type FinancialsToolbarProps = {
+  sections: FinancialControlSection[];
+  searchValue: string;
+  onSearchChange: (value: string) => void;
+  onExport?: () => void;
+  className?: string;
+};
+
+// Debounce hook
+function useDebounce<T>(value: T, delay: number): T {
+  const [debouncedValue, setDebouncedValue] = useState<T>(value);
+
+  useEffect(() => {
+    const handler = setTimeout(() => {
+      setDebouncedValue(value);
+    }, delay);
+
+    return () => {
+      clearTimeout(handler);
+    };
+  }, [value, delay]);
+
+  return debouncedValue;
+}
+
+function FinancialsToolbarComponent({
+  sections,
+  searchValue,
+  onSearchChange,
+  onExport,
+  className
+}: FinancialsToolbarProps) {
+  const [localSearch, setLocalSearch] = useState(searchValue);
+  const debouncedSearch = useDebounce(localSearch, 300);
+
+  // Sync debounced search to parent
+  useEffect(() => {
+    onSearchChange(debouncedSearch);
+  }, [debouncedSearch, onSearchChange]);
+
+  // Sync parent search to local (if changed externally)
+  useEffect(() => {
+    setLocalSearch(searchValue);
+  }, [searchValue]);
+
+  return (
+    <div className={cn('flex flex-wrap items-center gap-2 pb-3 mb-3 border-b border-[var(--line-weak)]', className)}>
+      {/* Control sections */}
+      <div className="flex flex-wrap items-center gap-1.5">
+        {sections.map((section) => (
+          <div key={section.key} className="flex items-center gap-1">
+            {section.options.map((option) => {
+              const isActive = section.value === option.value;
+              return (
+                <Button
+                  key={`${section.key}-${option.value}`}
+                  variant={isActive ? 'secondary' : 'ghost'}
+                  size="compact"
+                  onClick={() => section.onChange(option.value)}
+                  className="text-xs"
+                >
+                  {option.label}
+                </Button>
+              );
+            })}
+          </div>
+        ))}
+      </div>
+
+      {/* Spacer */}
+      <div className="flex-1" />
+
+      {/* Search and actions */}
+      <div className="flex items-center gap-2">
+        <div className="relative">
+          <Search className="absolute left-2 top-1/2 h-3 w-3 -translate-y-1/2 text-[var(--terminal-muted)]" />
+          <Input
+            placeholder="Search metrics..."
+            value={localSearch}
+            onChange={(e) => setLocalSearch(e.target.value)}
+            inputSize="compact"
+            className="w-48 pl-7"
+          />
+        </div>
+        {onExport && (
+          <Button
+            variant="ghost"
+            size="compact"
+            onClick={onExport}
+            className="gap-1.5"
+          >
+            <Download className="h-3.5 w-3.5" />
+            Export
+          </Button>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export const FinancialsToolbar = memo(FinancialsToolbarComponent);