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/layout/navigation-rail.tsx

@@ -229,7 +229,7 @@ export function NavigationRail({
                 "relative flex items-center gap-2.5 rounded-md transition-colors duration-150",
                 collapsed
                   ? "justify-center w-10 h-10"
-                  : "px-2.5 py-1.5 text-sm",
+                  : "px-2.5 text-sm",
                 "max-lg:min-h-[44px]",
                 isActive
                   ? "bg-primary/10 text-primary font-medium"
@@ -237,6 +237,7 @@ export function NavigationRail({
               )}
               aria-current={isActive ? "page" : undefined}
               title={collapsed ? t(item.labelKey) : undefined}
+              style={collapsed ? undefined : { paddingBlock: 'var(--density-sidebar-py)' }}
             >
               <Icon className={cn("w-[18px] h-[18px] flex-shrink-0", isActive && "text-primary")} />
               {!collapsed && <span className="truncate">{t(item.labelKey)}</span>}