cb88b3977c
Implements #17, #18, #19, #20, #21 - Add CSS custom properties for density-dependent spacing (--d-* vars) in theme.css with comfortable (default) and compact modes - Create useDensity hook with localStorage persistence and DOM attribute sync - Add FOUC prevention in main.tsx (sync density before first paint) - Create shared PageFooter component merging stats + pagination - Refactor AppShell to flex layout with density toggle button (COM/CMP) - Consolidate inline pagination from ItemsPage/AuditPage into PageFooter - Delete FooterStats.tsx (replaced by PageFooter) - Replace all hardcoded padding/font/gap values in ItemTable, AuditTable, ItemsToolbar, and AuditToolbar with var(--d-*) references Comfortable mode is already tighter than the previous hardcoded values. Compact mode reduces further for power-user density.
23 lines
646 B
TypeScript
23 lines
646 B
TypeScript
import { useCallback } from 'react';
|
|
import { useLocalStorage } from './useLocalStorage';
|
|
|
|
export type Density = 'comfortable' | 'compact';
|
|
|
|
function applyDensity(density: Density) {
|
|
document.documentElement.setAttribute('data-density', density);
|
|
}
|
|
|
|
export function useDensity(): [Density, () => void] {
|
|
const [density, setDensity] = useLocalStorage<Density>('silo-density', 'comfortable');
|
|
|
|
applyDensity(density);
|
|
|
|
const toggle = useCallback(() => {
|
|
const next: Density = density === 'comfortable' ? 'compact' : 'comfortable';
|
|
setDensity(next);
|
|
applyDensity(next);
|
|
}, [density, setDensity]);
|
|
|
|
return [density, toggle];
|
|
}
|