fix: make density setting functional across entire UI

Rename "List Density" to "Density" and apply spacing changes globally
instead of only to email list item heights.

- Replace hardcoded padding/gap values with CSS custom properties
  (--density-item-py, --density-item-gap, --density-header-py,
  --density-card-p, --density-sidebar-py) set via JS on :root
- Apply density-responsive spacing to email list items, thread views,
  email viewer, sidebar, navigation rail, contacts, and calendar
- Use inline styles instead of Tailwind arbitrary value classes to
  avoid Turbopack compilation hangs
- Rename listDensity → density in store, types, and components
- Add persist migration (v1 → v2) and onRehydrateStorage callback
- Update all 8 locale files with broadened labels/descriptions

components/email/thread-email-item.tsx

@@ -61,7 +61,7 @@ export function ThreadEmailItem({
       {...dragHandlers}
       className={cn(
         "relative cursor-pointer transition-all duration-150",
-        "pl-12 pr-4 py-2.5",
+        "pl-12 pr-4",
         "border-l-2 border-l-transparent",
         selected
           ? "bg-blue-200 dark:bg-blue-900/50 border-l-primary"
@@ -73,6 +73,7 @@ export function ThreadEmailItem({
       )}
       onClick={handleClick}
       onContextMenu={handleContextMenu}
+      style={{ paddingBlock: 'var(--density-item-py)' }}
     >
       <div className="flex items-start gap-3">
         {/* Checkbox - only visible when in selection mode */}