feat: add compact mode toggle with persistence and CSS

[onyekachi66]

Closes #421

Summary

This update introduces a compact‑mode UI setting that lets users switch the dashboard and overall app layout to a denser view, especially useful on narrow (≈ 375 px) screens. The feature includes:

1. Global state & persistence

   • Added compactMode: boolean to useSettingsStore.
   • Persisted via localStorage (xelma_compact_mode) so the preference survives page reloads and browser sessions.

2. UI controls

   • Dashboard – a new checkbox toggle (next to the existing chat toggle) that reads/writes compactMode.
   • Settings page – a ToggleRow with data-testid="settings-toggle-compact" mirroring the dashboard control.

3. Styling

   • New stylesheet src/styles/compact.css defines a .compact-mode root class that reduces card padding, grid gaps, and button sizes for a tighter layout.
   • Imported the stylesheet in src/main.tsx.
   • The outer wrapper in Dashboard.tsx now conditionally adds the compact-mode class based on the store flag.

4. State hooks

   • Added compactMode and setCompactMode hooks to Dashboard.tsx (via useSettingsStore).
   • Settings page now pulls the same hooks to keep both places in sync.

5. Branch & commit

   • All changes are on the compact-mode branch.
   • Commit message: feat: add compact mode toggle with persistence and CSS.

Verification Checklist

• ✅ The compact‑mode toggle appears on both Dashboard and Settings.
• ✅ Toggling updates the UI instantly and stores the value in localStorage.
• ✅ Reloading the page retains the chosen mode.
• ✅ Layout adjusts correctly at ~375 px width (reduced spacing, smaller buttons).
• ✅ No other parts of the codebase were altered.

---

[vercel]

@onyekachi66 is attempting to deploy a commit to the josephchimebuka's projects Team on Vercel.

A member of the Team first needs to authorize it.