kindred/silo
1
1
Fork 0
Code Issues 30 Pull Requests Actions Packages Projects Releases Wiki Activity

feat(web): user-selectable density mode (compact/comfortable) #48

Merged
forbes merged 2 commits from ui-density-mode into main 2026-02-09 01:20:52 +00:00
Conversation 0 Commits 2 Files Changed 12 +685 -378
forbes commented 2026-02-09 00:35:44 +00:00
Owner
Copy Link

Closes #17, closes #18, closes #19, closes #20, closes #21

Summary

Adds a density toggle to the AppShell header that switches the entire UI between comfortable (default) and compact modes. The preference is persisted in localStorage.

Architecture

CSS custom properties (--d-* variables) defined in theme.css under [data-density="comfortable"] and [data-density="compact"] selectors. Components reference these via var(--d-*) in inline styles — toggling the data-density attribute on <html> flips everything instantly with zero React re-renders.

Changes

New files

  • web/src/hooks/useDensity.ts — hook wrapping useLocalStorage + DOM attribute sync
  • web/src/components/PageFooter.tsx — shared fixed footer with stats (left) and pagination (right)

Deleted

  • web/src/components/items/FooterStats.tsx — replaced by PageFooter

Modified

  • theme.css — 24 density CSS custom properties (comfortable + compact blocks)
  • main.tsx — FOUC prevention: sync density from localStorage before first paint
  • AppShell.tsx — flex-column layout (eliminates calc(100vh - 64px) hack), all spacing uses var(--d-*), density toggle button (COM/CMP)
  • ItemsPage.tsx — inline pagination replaced by PageFooter, height: 100%
  • AuditPage.tsx — same
  • ItemTable.tsx — th/td padding and font use density vars
  • AuditTable.tsx — same
  • ItemsToolbar.tsx — container gap/padding, input/select/button sizes use density vars
  • AuditToolbar.tsx — same

What changed visually

Even in comfortable mode, the UI is tighter than before (e.g., header padding 16px -> 10px, toolbar gap 12px -> 8px). Compact mode reduces further (header 5.6px, toolbar 5.6px, table cell padding halved).

Closes #17, closes #18, closes #19, closes #20, closes #21 ## Summary Adds a density toggle to the AppShell header that switches the entire UI between **comfortable** (default) and **compact** modes. The preference is persisted in localStorage. ## Architecture CSS custom properties (`--d-*` variables) defined in `theme.css` under `[data-density="comfortable"]` and `[data-density="compact"]` selectors. Components reference these via `var(--d-*)` in inline styles — toggling the `data-density` attribute on `<html>` flips everything instantly with zero React re-renders. ## Changes ### New files - **`web/src/hooks/useDensity.ts`** — hook wrapping `useLocalStorage` + DOM attribute sync - **`web/src/components/PageFooter.tsx`** — shared fixed footer with stats (left) and pagination (right) ### Deleted - **`web/src/components/items/FooterStats.tsx`** — replaced by PageFooter ### Modified - **`theme.css`** — 24 density CSS custom properties (comfortable + compact blocks) - **`main.tsx`** — FOUC prevention: sync density from localStorage before first paint - **`AppShell.tsx`** — flex-column layout (eliminates `calc(100vh - 64px)` hack), all spacing uses `var(--d-*)`, density toggle button (COM/CMP) - **`ItemsPage.tsx`** — inline pagination replaced by PageFooter, height: 100% - **`AuditPage.tsx`** — same - **`ItemTable.tsx`** — th/td padding and font use density vars - **`AuditTable.tsx`** — same - **`ItemsToolbar.tsx`** — container gap/padding, input/select/button sizes use density vars - **`AuditToolbar.tsx`** — same ## What changed visually Even in **comfortable** mode, the UI is tighter than before (e.g., header padding 16px -> 10px, toolbar gap 12px -> 8px). **Compact** mode reduces further (header 5.6px, toolbar 5.6px, table cell padding halved).
forbes added 1 commit 2026-02-09 00:35:44 +00:00
feat(web): add user-selectable density mode with compact/comfortable toggle 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.
forbes added 1 commit 2026-02-09 01:20:47 +00:00
Merge branch 'main' into ui-density-mode 6805a3c662
forbes merged commit c557ca736c into main 2026-02-09 01:20:52 +00:00
Sign in to join this conversation.
Reviewers
No Reviewers
Labels
No items
No Label
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
forbes
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: kindred/silo#48
Delete Branch "ui-density-mode"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?