feat: resizable columns, nav rail overhaul, multi-select & drag-drop, UI polish
Resizable Columns - Add ResizeHandle component with mouse drag, keyboard (Arrow keys), and double-click to reset to default width - Add sidebarWidth/emailListWidth to ui-store with clamping + persistence - Wire resize handles between sidebar/email-list panels on desktop Navigation Rail Overhaul - Move StorageQuotaCircle, push-status, sign-out from Sidebar to NavigationRail - Interactive SVG ring with popover breakdown (used/free/total) - Sidebar collapse state lifted to ui-store - Show total email count per mailbox alongside unread badge Email Multi-Selection & Drag-and-Drop - Ctrl+Click (toggle) and Shift+Click (range) on all list items - Add selectRangeEmails and lastSelectedEmailId to email-store - Enable drag-and-drop on thread items and thread headers - useEmailDrag accepts optional threadEmails for full-thread drag Email Viewer Layout - Remove card wrapper for cleaner full-width reading - Always render HTML body when available - Adjust skeleton loader to match flat layout Modal & UI Polish - Standardise backdrops, close buttons, padding, border-radius, transitions - Migrate template-string classNames to cn() in settings - Unify focus-ring token to ring-ring on form controls i18n - Add storage_used/free/total keys to all 8 locales Dev Mock JMAP Server (new, gated by DEV_MOCK_JMAP=true) - Session, Mailbox/Email/Thread/Identity CRUD, back-references, upload - GET /download with Content-Disposition, GET /eventsource SSE Tests (46 new) - ui-store (13), email-selection (10), resize-handle (9), mock-server (14)
This commit is contained in:
@@ -286,7 +286,7 @@ export function CalendarInvitationBanner({ email }: CalendarInvitationBannerProp
|
||||
disabled={isProcessing}
|
||||
aria-pressed={currentRsvp === 'accepted'}
|
||||
className={cn(
|
||||
"flex items-center gap-1 text-sm px-2 py-0.5 rounded transition-colors min-h-[44px] md:min-h-0 disabled:opacity-50",
|
||||
"flex items-center gap-1 text-sm px-2 py-0.5 rounded-md transition-colors duration-150 min-h-[44px] md:min-h-0 disabled:opacity-50",
|
||||
currentRsvp === 'accepted'
|
||||
? "bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400 font-medium"
|
||||
: "text-muted-foreground hover:text-foreground hover:bg-muted"
|
||||
@@ -300,7 +300,7 @@ export function CalendarInvitationBanner({ email }: CalendarInvitationBannerProp
|
||||
disabled={isProcessing}
|
||||
aria-pressed={currentRsvp === 'tentative'}
|
||||
className={cn(
|
||||
"flex items-center gap-1 text-sm px-2 py-0.5 rounded transition-colors min-h-[44px] md:min-h-0 disabled:opacity-50",
|
||||
"flex items-center gap-1 text-sm px-2 py-0.5 rounded-md transition-colors duration-150 min-h-[44px] md:min-h-0 disabled:opacity-50",
|
||||
currentRsvp === 'tentative'
|
||||
? "bg-amber-100 dark:bg-amber-900/30 text-amber-700 dark:text-amber-400 font-medium"
|
||||
: "text-muted-foreground hover:text-foreground hover:bg-muted"
|
||||
@@ -314,7 +314,7 @@ export function CalendarInvitationBanner({ email }: CalendarInvitationBannerProp
|
||||
disabled={isProcessing}
|
||||
aria-pressed={currentRsvp === 'declined'}
|
||||
className={cn(
|
||||
"flex items-center gap-1 text-sm px-2 py-0.5 rounded transition-colors min-h-[44px] md:min-h-0 disabled:opacity-50",
|
||||
"flex items-center gap-1 text-sm px-2 py-0.5 rounded-md transition-colors duration-150 min-h-[44px] md:min-h-0 disabled:opacity-50",
|
||||
currentRsvp === 'declined'
|
||||
? "bg-red-100 dark:bg-red-900/30 text-red-700 dark:text-red-400 font-medium"
|
||||
: "text-muted-foreground hover:text-foreground hover:bg-muted"
|
||||
@@ -346,7 +346,7 @@ export function CalendarInvitationBanner({ email }: CalendarInvitationBannerProp
|
||||
}
|
||||
}}
|
||||
disabled={isProcessing}
|
||||
className="flex items-center gap-1 text-sm text-muted-foreground hover:text-foreground hover:bg-muted px-2 py-0.5 rounded transition-colors min-h-[44px] md:min-h-0 disabled:opacity-50"
|
||||
className="flex items-center gap-1 text-sm text-muted-foreground hover:text-foreground hover:bg-muted px-2 py-0.5 rounded-md transition-colors duration-150 min-h-[44px] md:min-h-0 disabled:opacity-50"
|
||||
>
|
||||
<CalendarCheck className="w-3.5 h-3.5" />
|
||||
{t('add_to_calendar')}
|
||||
|
||||
Reference in New Issue
Block a user