feat: add UI/UX polish with navigation rail, confirm dialogs, welcome banner, and form validation

- Add NavigationRail component (desktop vertical icon sidebar + mobile bottom tab bar)
- Add ConfirmDialog with promise-based useConfirmDialog hook for async confirmation flow
- Add WelcomeBanner onboarding component (one-time display, localStorage persistence)
- Polish login form UX (shake on error, TOTP slide animation, password visibility toggle, session expired banner)
- Add inline form validation with shake animation in email composer and contacts
- Add empty state patterns for contacts (no data vs no search results with contextual actions)
- Improve toast notification system with undo action support and typed durations
- Add WCAG AA prefers-reduced-motion media query, safe area insets, sr-only live regions
- Add template settings tab and keyboard shortcut integration
- Update all 8 locale translations

components/calendar/calendar-toolbar.tsx

@@ -2,7 +2,7 @@
 
 import { useTranslations, useFormatter } from "next-intl";
 import { Button } from "@/components/ui/button";
-import { ArrowLeft, ChevronLeft, ChevronRight, Plus, Upload } from "lucide-react";
+import { ChevronLeft, ChevronRight, Plus, Upload } from "lucide-react";
 import { addDays, startOfWeek } from "date-fns";
 import { cn } from "@/lib/utils";
 import type { CalendarViewMode } from "@/stores/calendar-store";
@@ -10,7 +10,6 @@ import type { CalendarViewMode } from "@/stores/calendar-store";
 interface CalendarToolbarProps {
   selectedDate: Date;
   viewMode: CalendarViewMode;
-  onNavigateBack: () => void;
   onPrev: () => void;
   onNext: () => void;
   onToday: () => void;
@@ -19,12 +18,12 @@ interface CalendarToolbarProps {
   onImport?: () => void;
   isMobile?: boolean;
   firstDayOfWeek?: number;
+  onNavigateBack?: () => void;
 }
 
 export function CalendarToolbar({
   selectedDate,
   viewMode,
-  onNavigateBack,
   onPrev,
   onNext,
   onToday,
@@ -60,11 +59,6 @@ export function CalendarToolbar({
 
   return (
     <div className="flex items-center gap-2 px-4 py-3 border-b border-border flex-wrap">
-      <Button variant="ghost" size="sm" onClick={onNavigateBack} className="mr-1">
-        <ArrowLeft className="w-4 h-4 mr-1" />
-        {!isMobile && t("back_to_email")}
-      </Button>
-
       <div className="flex items-center gap-1">
         <button onClick={onPrev} className="p-1.5 rounded hover:bg-muted transition-colors" aria-label={t("nav_prev")}>
           <ChevronLeft className="w-4 h-4" />
@@ -89,6 +83,7 @@ export function CalendarToolbar({
             <button
               key={v}
               onClick={() => onViewModeChange(v)}
+              title={t(`views.${v}_hint`)}
               className={cn(
                 "px-3 py-1.5 text-xs font-medium transition-colors",
                 v === viewMode

components/calendar/event-card.tsx

@@ -41,17 +41,17 @@ function parseDuration(duration: string): number {
   return totalMinutes;
 }
 
-function createEventDragPreview(title: string, color: string): HTMLElement {
+function createEventDragPreview(title: string, timeRange: string, color: string): HTMLElement {
   const el = document.createElement("div");
   el.style.cssText = `
     position: fixed; top: -9999px; left: 0;
     padding: 6px 12px; border-radius: 6px;
     background: ${color}40; border-left: 3px solid ${color};
     color: ${color}; font-size: 12px; font-weight: 500;
-    max-width: 200px; white-space: nowrap; overflow: hidden;
+    max-width: 240px; white-space: nowrap; overflow: hidden;
     text-overflow: ellipsis; pointer-events: none; z-index: 9999;
   `;
-  el.textContent = title;
+  el.textContent = `${title} \u2022 ${timeRange}`;
   document.body.appendChild(el);
   return el;
 }
@@ -80,7 +80,7 @@ export function EventCard({ event, calendar, variant, onClick, isSelected, dragg
     }));
     const displayTitle = event.title || t("events.no_title");
     e.dataTransfer.setData("text/plain", displayTitle);
-    const preview = createEventDragPreview(displayTitle, color);
+    const preview = createEventDragPreview(displayTitle, timeString, color);
     e.dataTransfer.setDragImage(preview, 0, 0);
     requestAnimationFrame(() => preview.remove());
     setIsBeingDragged(true);
@@ -135,13 +135,16 @@ export function EventCard({ event, calendar, variant, onClick, isSelected, dragg
       style={{ backgroundColor: `${color}30`, borderLeft: `3px solid ${color}`, color }}
     >
       <div className="font-medium truncate">{event.title || t("events.no_title")}</div>
-      {durationMinutes > 30 && (
+      {!event.showWithoutTime && (
         <div className="opacity-80 text-[10px]">
           {timeString}
         </div>
       )}
-      {durationMinutes > 30 && getParticipantCount(event) > 0 && (
-        <div className="flex items-center gap-0.5 opacity-70 text-[10px]">
+      {getParticipantCount(event) > 0 && (
+        <div
+          className="flex items-center gap-0.5 opacity-70 text-[10px]"
+          title={t("participants.count", { count: getParticipantCount(event) })}
+        >
           <Users className="w-3 h-3" />
           <span>{getParticipantCount(event)}</span>
         </div>

components/calendar/event-modal.tsx

@@ -4,7 +4,7 @@ import { useState, useEffect, useCallback, useRef, useMemo } from "react";
 import { useTranslations } from "next-intl";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
-import { X, Trash2, Check, HelpCircle, XCircle, Users } from "lucide-react";
+import { X, Trash2, Check, Users, CalendarDays } from "lucide-react";
 import { format, parseISO, addHours } from "date-fns";
 import type { CalendarEvent, Calendar, CalendarParticipant } from "@/lib/jmap/types";
 import { parseDuration } from "./event-card";
@@ -94,6 +94,12 @@ export function EventModal({
     return getParticipantList(event);
   }, [event]);
 
+  const organizerInfo = useMemo(() => {
+    if (!event?.participants) return null;
+    const organizer = existingParticipants.find(p => p.isOrganizer);
+    return organizer ? { name: organizer.name, email: organizer.email } : null;
+  }, [event, existingParticipants]);
+
   const getInitialStart = (): Date => {
     if (event?.start) return parseISO(event.start);
     if (defaultDate) {
@@ -342,6 +348,18 @@ export function EventModal({
           </div>
 
           <div className="px-5 py-4 space-y-3">
+            <div className="flex items-start gap-3 rounded-lg border border-blue-200 dark:border-blue-800 bg-blue-50 dark:bg-blue-950/50 px-4 py-3">
+              <CalendarDays className="w-5 h-5 text-blue-600 dark:text-blue-400 mt-0.5 flex-shrink-0" />
+              <div className="text-sm">
+                <p className="font-medium text-blue-900 dark:text-blue-200">
+                  {t("participants.invited_by", { name: organizerInfo?.name || organizerInfo?.email || t("participants.organizer") })}
+                </p>
+                <p className="text-blue-700 dark:text-blue-400 mt-0.5">
+                  {t("participants.respond_below")}
+                </p>
+              </div>
+            </div>
+
             <div className="text-sm">
               <span className="font-medium">{format(startD, "EEE, MMM d, yyyy")}</span>
               {!event.showWithoutTime && (
@@ -359,10 +377,6 @@ export function EventModal({
               <p className="text-sm text-muted-foreground">{locationName}</p>
             )}
 
-            <div className="text-xs text-muted-foreground">
-              {t("participants.you_attendee")}
-            </div>
-
             {participants.length > 0 && (
               <div className="space-y-1">
                 <div className="flex items-center gap-1.5 text-sm font-medium">
@@ -383,33 +397,39 @@ export function EventModal({
 
           <div className="px-5 py-4 border-t border-border">
             <div className="flex items-center justify-between">
-              <span className="text-sm font-medium">RSVP</span>
+              <span className="text-sm font-medium">{t("participants.rsvp_label")}</span>
               <div className="flex gap-2">
                 <Button
                   size="sm"
                   variant={userCurrentStatus === "accepted" ? "default" : "outline"}
                   onClick={() => handleRsvp("accepted")}
-                  className={userCurrentStatus === "accepted" ? "bg-green-600 hover:bg-green-700 text-white ring-2 ring-green-300 dark:ring-green-700" : "text-green-600 dark:text-green-400 border-green-300 dark:border-green-700 hover:bg-green-50 dark:hover:bg-green-950"}
+                  className={userCurrentStatus === "accepted"
+                    ? "bg-green-600 hover:bg-green-700 text-white dark:bg-green-500 dark:hover:bg-green-600"
+                    : "text-green-600 dark:text-green-400 border-green-300 dark:border-green-700 hover:bg-green-50 dark:hover:bg-green-950"}
                 >
-                  <Check className="w-4 h-4 mr-1" />
+                  {userCurrentStatus === "accepted" && <Check className="w-4 h-4 mr-1" />}
                   {t("participants.accepted")}
                 </Button>
                 <Button
                   size="sm"
                   variant={userCurrentStatus === "tentative" ? "default" : "outline"}
                   onClick={() => handleRsvp("tentative")}
-                  className={userCurrentStatus === "tentative" ? "bg-amber-600 hover:bg-amber-700 text-white ring-2 ring-amber-300 dark:ring-amber-700" : "text-amber-600 dark:text-amber-400 border-amber-300 dark:border-amber-700 hover:bg-amber-50 dark:hover:bg-amber-950"}
+                  className={userCurrentStatus === "tentative"
+                    ? "bg-amber-600 hover:bg-amber-700 text-white dark:bg-amber-500 dark:hover:bg-amber-600"
+                    : "border border-amber-500 text-amber-600 hover:bg-amber-50 dark:text-amber-400 dark:hover:bg-amber-950"}
                 >
-                  <HelpCircle className="w-4 h-4 mr-1" />
+                  {userCurrentStatus === "tentative" && <Check className="w-4 h-4 mr-1" />}
                   {t("participants.tentative")}
                 </Button>
                 <Button
                   size="sm"
-                  variant={userCurrentStatus === "declined" ? "default" : "outline"}
+                  variant={userCurrentStatus === "declined" ? "default" : "ghost"}
                   onClick={() => handleRsvp("declined")}
-                  className={userCurrentStatus === "declined" ? "bg-red-600 hover:bg-red-700 text-white ring-2 ring-red-300 dark:ring-red-700" : "text-red-600 dark:text-red-400 border-red-300 dark:border-red-700 hover:bg-red-50 dark:hover:bg-red-950"}
+                  className={userCurrentStatus === "declined"
+                    ? "bg-red-600 hover:bg-red-700 text-white dark:bg-red-500 dark:hover:bg-red-600"
+                    : "text-red-600 hover:bg-red-50 dark:text-red-400 dark:hover:bg-red-950"}
                 >
-                  <XCircle className="w-4 h-4 mr-1" />
+                  {userCurrentStatus === "declined" && <Check className="w-4 h-4 mr-1" />}
                   {t("participants.declined")}
                 </Button>
               </div>
@@ -500,7 +520,7 @@ export function EventModal({
             <label htmlFor="allDay" className="text-sm">{t("form.all_day_event")}</label>
           </div>
 
-          <div className="grid grid-cols-2 gap-3">
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
             <div>
               <label className="text-sm font-medium mb-1 block">{t("form.start_date")}</label>
               <input
@@ -560,7 +580,7 @@ export function EventModal({
             </div>
           )}
 
-          <div className="grid grid-cols-2 gap-3">
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
             <div>
               <label className="text-sm font-medium mb-1 block">{t("recurrence.title")}</label>
               <select

components/calendar/mini-calendar.tsx

@@ -2,7 +2,7 @@
 
 import { useState, useMemo } from "react";
 import { useTranslations, useFormatter } from "next-intl";
-import { ChevronLeft, ChevronRight } from "lucide-react";
+import { ChevronLeft, ChevronRight, ChevronDown } from "lucide-react";
 import {
   startOfMonth, endOfMonth, startOfWeek, endOfWeek,
   addMonths, subMonths, addYears, subYears, setMonth, setYear,
@@ -113,13 +113,17 @@ export function MiniCalendar({
         <button
           onClick={handleHeaderClick}
           disabled={pickerView === "years"}
+          title={pickerView !== "years" ? t("mini_calendar_change") : undefined}
           className={cn(
-            "text-sm font-medium px-1 rounded transition-colors",
+            "text-sm font-medium px-2 py-1 rounded-md transition-colors inline-flex items-center gap-1",
             pickerView !== "years" && "hover:bg-muted cursor-pointer",
             pickerView === "years" && "cursor-default"
           )}
         >
           {headerLabel}
+          {pickerView !== "years" && (
+            <ChevronDown className="w-3.5 h-3.5 text-muted-foreground" />
+          )}
         </button>
         <button
           onClick={handleNext}

components/contacts/__tests__/contact-detail.test.tsx

@@ -1,8 +1,16 @@
 import { render, screen, fireEvent } from '@testing-library/react';
-import { describe, it, expect, vi } from 'vitest';
+import { describe, it, expect, vi, beforeEach } from 'vitest';
 import { ContactDetail } from '../contact-detail';
 import type { ContactCard } from '@/lib/jmap/types';
 
+beforeEach(() => {
+  Object.assign(navigator, {
+    clipboard: {
+      writeText: vi.fn().mockResolvedValue(undefined),
+    },
+  });
+});
+
 const contact: ContactCard = {
   id: '1',
   addressBookIds: {},
@@ -52,10 +60,10 @@ describe('ContactDetail', () => {
   it('calls onDelete when delete button is clicked', () => {
     const onDelete = vi.fn();
     render(<ContactDetail contact={contact} onEdit={vi.fn()} onDelete={onDelete} />);
-    const trashButtons = screen.getAllByRole('button').filter(
-      btn => btn.querySelector('svg') && btn.textContent?.trim() === ''
+    const deleteButton = screen.getAllByRole('button').find(
+      btn => btn.className.includes('text-red')
     );
-    fireEvent.click(trashButtons[trashButtons.length - 1]);
+    fireEvent.click(deleteButton!);
     expect(onDelete).toHaveBeenCalledOnce();
   });
 });

components/contacts/__tests__/contact-list.test.tsx

@@ -62,7 +62,7 @@ describe('ContactList', () => {
 
   it('shows empty state when no contacts match', () => {
     render(<ContactList {...defaultProps} contacts={[]} />);
-    expect(screen.getByText('empty_state')).toBeInTheDocument();
+    expect(screen.getByText('empty_state_title')).toBeInTheDocument();
   });
 
   it('shows search empty state when search has no results', () => {

components/contacts/contact-detail.tsx

@@ -1,12 +1,13 @@
 "use client";
 
 import { useTranslations } from "next-intl";
-import { Mail, Phone, Building, MapPin, StickyNote, Pencil, Trash2, BookUser } from "lucide-react";
+import { Mail, Phone, Building, MapPin, StickyNote, Pencil, Trash2, BookUser, Copy, Send } from "lucide-react";
 import { Avatar } from "@/components/ui/avatar";
 import { Button } from "@/components/ui/button";
 import { cn } from "@/lib/utils";
 import type { ContactCard } from "@/lib/jmap/types";
 import { getContactDisplayName, getContactPrimaryEmail } from "@/stores/contact-store";
+import { toast } from "@/stores/toast-store";
 
 interface ContactDetailProps {
   contact: ContactCard | null;
@@ -64,13 +65,38 @@ export function ContactDetail({ contact, onEdit, onDelete, className }: ContactD
         {emails.length > 0 && (
           <Section icon={Mail} title={t("detail.emails")}>
             {emails.map((e, i) => (
-              <div key={i} className="flex items-center gap-2">
+              <div key={i} className="flex items-center gap-2 group">
                 <a href={`mailto:${e.address}`} className="text-sm text-primary hover:underline">
                   {e.address}
                 </a>
                 {e.contexts && (
                   <ContextBadge contexts={e.contexts} />
                 )}
+                <div className="flex items-center gap-0.5 opacity-0 group-hover:opacity-100 transition-opacity">
+                  <a
+                    href={`mailto:${e.address}`}
+                    className="p-1 rounded hover:bg-muted transition-colors"
+                    title={t("detail.compose_email")}
+                    aria-label={t("detail.compose_email")}
+                  >
+                    <Send className="w-3.5 h-3.5 text-muted-foreground" />
+                  </a>
+                  <button
+                    onClick={async () => {
+                      try {
+                        await navigator.clipboard.writeText(e.address);
+                        toast.success(t("detail.copied"));
+                      } catch {
+                        toast.error(t("detail.copy_failed"));
+                      }
+                    }}
+                    className="p-1 rounded hover:bg-muted transition-colors"
+                    title={t("detail.copy_email")}
+                    aria-label={t("detail.copy_email")}
+                  >
+                    <Copy className="w-3.5 h-3.5 text-muted-foreground" />
+                  </button>
+                </div>
               </div>
             ))}
           </Section>
@@ -79,13 +105,28 @@ export function ContactDetail({ contact, onEdit, onDelete, className }: ContactD
         {phones.length > 0 && (
           <Section icon={Phone} title={t("detail.phones")}>
             {phones.map((p, i) => (
-              <div key={i} className="flex items-center gap-2">
+              <div key={i} className="flex items-center gap-2 group">
                 <a href={`tel:${p.number}`} className="text-sm text-primary hover:underline">
                   {p.number}
                 </a>
                 {p.contexts && (
                   <ContextBadge contexts={p.contexts} />
                 )}
+                <button
+                  onClick={async () => {
+                    try {
+                      await navigator.clipboard.writeText(p.number);
+                      toast.success(t("detail.copied"));
+                    } catch {
+                      toast.error(t("detail.copy_failed"));
+                    }
+                  }}
+                  className="p-1 rounded hover:bg-muted transition-colors opacity-0 group-hover:opacity-100"
+                  title={t("detail.copy_phone")}
+                  aria-label={t("detail.copy_phone")}
+                >
+                  <Copy className="w-3.5 h-3.5 text-muted-foreground" />
+                </button>
               </div>
             ))}
           </Section>

components/contacts/contact-form.tsx

@@ -5,6 +5,7 @@ import { useTranslations } from "next-intl";
 import { X, Plus } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
+import { cn } from "@/lib/utils";
 import type { ContactCard } from "@/lib/jmap/types";
 
 interface EmailEntry {
@@ -63,6 +64,24 @@ export function ContactForm({ contact, onSave, onCancel }: ContactFormProps) {
 
   const [isSaving, setIsSaving] = useState(false);
   const [error, setError] = useState<string | null>(null);
+  const [emailErrors, setEmailErrors] = useState<Record<number, string>>({});
+
+  const validateEmail = (address: string): boolean => {
+    if (!address.trim()) return true;
+    return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(address.trim());
+  };
+
+  const handleEmailBlur = (index: number, address: string) => {
+    if (address.trim() && !validateEmail(address)) {
+      setEmailErrors(prev => ({ ...prev, [index]: t("email_error_inline") }));
+    } else {
+      setEmailErrors(prev => {
+        const next = { ...prev };
+        delete next[index];
+        return next;
+      });
+    }
+  };
 
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
@@ -145,9 +164,11 @@ export function ContactForm({ contact, onSave, onCancel }: ContactFormProps) {
           </div>
         )}
 
-        <div className="grid grid-cols-2 gap-3">
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
           <div>
-            <label className="text-sm text-muted-foreground mb-1 block">{t("given_name")}</label>
+            <label className="text-sm text-muted-foreground mb-1 block">
+              {t("given_name")} <span className="text-red-500">*</span>
+            </label>
             <Input
               value={givenName}
               onChange={(e) => setGivenName(e.target.value)}
@@ -156,7 +177,9 @@ export function ContactForm({ contact, onSave, onCancel }: ContactFormProps) {
             />
           </div>
           <div>
-            <label className="text-sm text-muted-foreground mb-1 block">{t("surname")}</label>
+            <label className="text-sm text-muted-foreground mb-1 block">
+              {t("surname")} <span className="text-red-500">*</span>
+            </label>
             <Input
               value={surname}
               onChange={(e) => setSurname(e.target.value)}
@@ -169,17 +192,27 @@ export function ContactForm({ contact, onSave, onCancel }: ContactFormProps) {
           <label className="text-sm text-muted-foreground mb-1 block">{t("email")}</label>
           <div className="space-y-2">
             {emails.map((entry, i) => (
-              <div key={i} className="flex items-center gap-2">
+              <div key={i}>
+                <div className="flex items-center gap-2">
                 <Input
                   type="email"
+                  inputMode="email"
                   value={entry.address}
                   onChange={(e) => {
                     const next = [...emails];
                     next[i] = { ...next[i], address: e.target.value };
                     setEmails(next);
+                    if (emailErrors[i]) {
+                      setEmailErrors(prev => {
+                        const n = { ...prev };
+                        delete n[i];
+                        return n;
+                      });
+                    }
                   }}
+                  onBlur={() => handleEmailBlur(i, entry.address)}
                   placeholder={t("email_placeholder")}
-                  className="flex-1"
+                  className={cn("flex-1", emailErrors[i] && "border-red-500 focus:ring-red-500")}
                 />
                 <select
                   value={entry.context}
@@ -205,6 +238,10 @@ export function ContactForm({ contact, onSave, onCancel }: ContactFormProps) {
                     <X className="w-3 h-3" />
                   </Button>
                 )}
+                </div>
+                {emailErrors[i] && (
+                  <p className="text-xs text-red-600 dark:text-red-400 mt-1">{emailErrors[i]}</p>
+                )}
               </div>
             ))}
             <Button
@@ -226,6 +263,7 @@ export function ContactForm({ contact, onSave, onCancel }: ContactFormProps) {
               <div key={i} className="flex items-center gap-2">
                 <Input
                   type="tel"
+                  inputMode="tel"
                   value={entry.number}
                   onChange={(e) => {
                     const next = [...phones];

components/contacts/contact-list.tsx

@@ -2,7 +2,7 @@
 
 import { useMemo } from "react";
 import { useTranslations } from "next-intl";
-import { Search, Plus, BookUser, Info, Check, Trash2, Users, Download, X } from "lucide-react";
+import { Search, Plus, BookUser, Info, Check, Trash2, Users, Download, X, UserPlus, Upload } from "lucide-react";
 import { Input } from "@/components/ui/input";
 import { Button } from "@/components/ui/button";
 import { ContactListItem } from "./contact-list-item";
@@ -17,6 +17,7 @@ interface ContactListProps {
   onSearchChange: (query: string) => void;
   onSelectContact: (id: string) => void;
   onCreateNew: () => void;
+  onImport?: () => void;
   supportsSync: boolean;
   className?: string;
   selectedContactIds: Set<string>;
@@ -35,6 +36,7 @@ export function ContactList({
   onSearchChange,
   onSelectContact,
   onCreateNew,
+  onImport,
   supportsSync,
   className,
   selectedContactIds,
@@ -158,11 +160,40 @@ export function ContactList({
 
       <div className="flex-1 overflow-y-auto">
         {sorted.length === 0 ? (
-          <div className="flex flex-col items-center justify-center h-full text-muted-foreground px-4">
-            <BookUser className="w-12 h-12 mb-3 opacity-30" />
-            <p className="text-sm">
-              {searchQuery ? t("empty_search") : t("empty_state")}
-            </p>
+          <div className="flex flex-col items-center justify-center h-full px-6 text-center">
+            {searchQuery ? (
+              <>
+                <Search className="w-12 h-12 mb-3 text-muted-foreground/30" />
+                <p className="text-sm font-medium text-foreground">{t("empty_search")}</p>
+                <p className="text-xs text-muted-foreground mt-1">{t("empty_search_hint")}</p>
+                <Button
+                  variant="outline"
+                  size="sm"
+                  className="mt-4"
+                  onClick={() => onSearchChange("")}
+                >
+                  {t("clear_search")}
+                </Button>
+              </>
+            ) : (
+              <>
+                <BookUser className="w-12 h-12 mb-3 text-muted-foreground/30" />
+                <p className="text-sm font-medium text-foreground">{t("empty_state_title")}</p>
+                <p className="text-xs text-muted-foreground mt-1">{t("empty_state_subtitle")}</p>
+                <div className="flex gap-2 mt-4">
+                  <Button size="sm" onClick={onCreateNew}>
+                    <UserPlus className="w-4 h-4 mr-1.5" />
+                    {t("create_new")}
+                  </Button>
+                  {onImport && (
+                    <Button variant="outline" size="sm" onClick={onImport}>
+                      <Upload className="w-4 h-4 mr-1.5" />
+                      {t("import_vcard")}
+                    </Button>
+                  )}
+                </div>
+              </>
+            )}
           </div>
         ) : (
           <div className="divide-y divide-border">

components/email/email-composer.tsx

@@ -1,12 +1,16 @@
 "use client";
 
-import { useState, useEffect, useRef, useCallback } from "react";
+import React, { useState, useEffect, useRef, useCallback } from "react";
 import { useFocusTrap } from "@/hooks/use-focus-trap";
+import { useConfirmDialog } from "@/hooks/use-confirm-dialog";
 import { useTranslations } from "next-intl";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
+import { ConfirmDialog } from "@/components/ui/confirm-dialog";
 import { X, Paperclip, Send, Save, Check, Loader2, AlertCircle, FileText, BookmarkPlus } from "lucide-react";
-import { cn } from "@/lib/utils";
+import { cn, formatFileSize } from "@/lib/utils";
+import { debug } from "@/lib/debug";
+import { toast } from "@/stores/toast-store";
 import { useAuthStore } from "@/stores/auth-store";
 import { useContactStore } from "@/stores/contact-store";
 import { useTemplateStore } from "@/stores/template-store";
@@ -27,10 +31,11 @@ interface EmailComposerProps {
     draftId?: string;
     fromEmail?: string;
     identityId?: string;
-  }) => void;
+  }) => void | Promise<void>;
   onClose?: () => void;
   onDiscardDraft?: (draftId: string) => void;
   className?: string;
+  initialDraftText?: string;
   mode?: 'compose' | 'reply' | 'replyAll' | 'forward';
   replyTo?: {
     from?: { email?: string; name?: string }[];
@@ -47,6 +52,7 @@ export function EmailComposer({
   onClose,
   onDiscardDraft,
   className,
+  initialDraftText,
   mode = 'compose',
   replyTo
 }: EmailComposerProps) {
@@ -84,18 +90,19 @@ export function EmailComposer({
   };
 
   const getInitialBody = () => {
-    if (!replyTo?.body) return "";
+    const prefix = initialDraftText || "";
+    if (!replyTo?.body) return prefix;
 
     const date = replyTo.receivedAt ? new Date(replyTo.receivedAt).toLocaleString() : "";
     const from = replyTo.from?.[0];
     const fromStr = from ? `${from.name || from.email}` : tCommon('unknown');
 
     if (mode === 'forward') {
-      return `\n\n---------- Forwarded message ----------\nFrom: ${fromStr}\nDate: ${date}\nSubject: ${replyTo.subject || ""}\n\n${replyTo.body}`;
+      return `${prefix}\n\n---------- Forwarded message ----------\nFrom: ${fromStr}\nDate: ${date}\nSubject: ${replyTo.subject || ""}\n\n${replyTo.body}`;
     } else if (mode === 'reply' || mode === 'replyAll') {
-      return `\n\nOn ${date}, ${fromStr} wrote:\n> ${replyTo.body.split('\n').join('\n> ')}`;
+      return `${prefix}\n\nOn ${date}, ${fromStr} wrote:\n> ${replyTo.body.split('\n').join('\n> ')}`;
     }
-    return "";
+    return prefix;
   };
 
   const [to, setTo] = useState(getInitialTo());
@@ -109,12 +116,15 @@ export function EmailComposer({
   const [saveStatus, setSaveStatus] = useState<'idle' | 'saving' | 'saved' | 'error'>('idle');
   const saveTimeoutRef = useRef<NodeJS.Timeout | null>(null);
   const lastSavedDataRef = useRef<string>("");
-  const [attachments, setAttachments] = useState<Array<{ file: File; blobId?: string; uploading?: boolean; error?: boolean }>>([]);
+  const [attachments, setAttachments] = useState<Array<{ file: File; blobId?: string; uploading?: boolean; error?: boolean; abortController?: AbortController }>>([]);
   const fileInputRef = useRef<HTMLInputElement>(null);
+  const [validationErrors, setValidationErrors] = useState<{ to?: boolean; subject?: boolean; body?: boolean }>({});
+  const [shakeField, setShakeField] = useState<string | null>(null);
   const [selectedIdentityId, setSelectedIdentityId] = useState<string | null>(null);
   const [subAddressTag, setSubAddressTag] = useState<string>('');
   const [showTemplatePicker, setShowTemplatePicker] = useState(false);
   const [showSaveAsTemplate, setShowSaveAsTemplate] = useState(false);
+  const { dialogProps: confirmDialogProps, confirm } = useConfirmDialog();
 
   const saveTemplateModalRef = useFocusTrap({
     isActive: showSaveAsTemplate,
@@ -132,6 +142,9 @@ export function EmailComposer({
   const toInputRef = useRef<HTMLInputElement>(null);
   const ccInputRef = useRef<HTMLInputElement>(null);
   const bccInputRef = useRef<HTMLInputElement>(null);
+  const toDropdownRef = useRef<HTMLDivElement>(null);
+  const ccDropdownRef = useRef<HTMLDivElement>(null);
+  const bccDropdownRef = useRef<HTMLDivElement>(null);
 
   const handleAutocomplete = useCallback((value: string, field: 'to' | 'cc' | 'bcc') => {
     if (autocompleteTimeoutRef.current) {
@@ -170,6 +183,18 @@ export function EmailComposer({
     ref.current?.focus();
   };
 
+  const handleAutoBlur = useCallback((e: React.FocusEvent, field: 'to' | 'cc' | 'bcc') => {
+    const dropdownRef = field === 'to' ? toDropdownRef : field === 'cc' ? ccDropdownRef : bccDropdownRef;
+    const relatedTarget = e.relatedTarget as Node | null;
+    if (relatedTarget && dropdownRef.current?.contains(relatedTarget)) {
+      return;
+    }
+    if (activeAutoField === field) {
+      setActiveAutoField(null);
+      setAutoSelectedIndex(-1);
+    }
+  }, [activeAutoField]);
+
   const handleAutoKeyDown = (e: React.KeyboardEvent, field: 'to' | 'cc' | 'bcc') => {
     if (!activeAutoField || autocompleteResults.length === 0) return;
 
@@ -235,52 +260,57 @@ export function EmailComposer({
     return () => window.removeEventListener('keydown', handleTemplateKey);
   }, []);
 
-  // Handle file selection
   const handleFileSelect = async (event: React.ChangeEvent<HTMLInputElement>) => {
     if (!client || !event.target.files) return;
 
     const files = Array.from(event.target.files);
 
-    // Add files to attachments list with uploading state
-    const newAttachments = files.map(file => ({ file, uploading: true }));
+    // AbortController tracks cancellation state but uploadBlob doesn't accept a signal,
+    // so abort only prevents post-upload state updates (cosmetic cancellation)
+    const newAttachments = files.map(file => {
+      const controller = new AbortController();
+      return { file, uploading: true, abortController: controller };
+    });
     setAttachments(prev => [...prev, ...newAttachments]);
 
-    // Upload each file
     for (let i = 0; i < files.length; i++) {
       const file = files[i];
+      const controller = newAttachments[i].abortController;
       try {
+        if (controller?.signal.aborted) continue;
         const { blobId } = await client.uploadBlob(file);
 
-        // Update attachment with blobId
+        if (controller?.signal.aborted) continue;
         setAttachments(prev =>
           prev.map(att =>
             att.file === file
-              ? { ...att, blobId, uploading: false }
+              ? { ...att, blobId, uploading: false, abortController: undefined }
               : att
           )
         );
       } catch (error) {
-        console.error(`Failed to upload ${file.name}:`, error);
+        if (controller?.signal.aborted) continue;
+        debug.error(`Failed to upload ${file.name}:`, error);
+        toast.error(t('upload_failed', { filename: file.name }));
 
-        // Mark attachment as failed
         setAttachments(prev =>
           prev.map(att =>
             att.file === file
-              ? { ...att, uploading: false, error: true }
+              ? { ...att, uploading: false, error: true, abortController: undefined }
               : att
           )
         );
       }
     }
 
-    // Clear the input
     if (fileInputRef.current) {
       fileInputRef.current.value = '';
     }
   };
 
-  // Remove attachment
   const removeAttachment = (index: number) => {
+    const att = attachments[index];
+    att?.abortController?.abort();
     setAttachments(prev => prev.filter((_, i) => i !== index));
   };
 
@@ -292,7 +322,6 @@ export function EmailComposer({
     const ccAddresses = cc.split(",").map(e => e.trim()).filter(Boolean);
     const bccAddresses = bcc.split(",").map(e => e.trim()).filter(Boolean);
 
-    // Only save if there's some content
     if (!toAddresses.length && !subject && !body) {
       return null;
     }
@@ -392,39 +421,62 @@ export function EmailComposer({
     };
   }, []);
 
+  const toAddresses = to.split(",").map(e => e.trim()).filter(Boolean);
+  const hasContent = body || attachments.some(att => att.blobId && !att.uploading);
+  const canSend = toAddresses.length > 0 && !!subject && hasContent;
+
+  const getSendTooltip = (): string | undefined => {
+    if (canSend) return undefined;
+    if (toAddresses.length === 0) return t('validation.recipient_required');
+    if (!subject) return t('validation.subject_required');
+    if (!hasContent) return t('validation.body_required');
+    return undefined;
+  };
+
   const handleSend = async () => {
-    const toAddresses = to.split(",").map(e => e.trim()).filter(Boolean);
     const ccAddresses = cc.split(",").map(e => e.trim()).filter(Boolean);
     const bccAddresses = bcc.split(",").map(e => e.trim()).filter(Boolean);
 
-    // Allow sending if we have recipient, subject, and either body text or attachments
-    const hasContent = body || attachments.some(att => att.blobId && !att.uploading);
+    if (!canSend) {
+      const errors: { to?: boolean; subject?: boolean; body?: boolean } = {};
+      if (toAddresses.length === 0) errors.to = true;
+      if (!subject) errors.subject = true;
+      if (!hasContent) errors.body = true;
+      setValidationErrors(errors);
 
-    if (toAddresses.length > 0 && subject && hasContent) {
-      // Wait for any pending auto-save to complete and get the latest draft ID
-      let finalDraftId = draftId;
-      if (saveTimeoutRef.current) {
-        clearTimeout(saveTimeoutRef.current);
-        // saveDraft returns the new draft ID after destroy+create
+      if (errors.to) {
+        setShakeField('to');
+        setTimeout(() => setShakeField(null), 400);
+        toInputRef.current?.focus();
+      }
+      return;
+    }
+
+    let finalDraftId = draftId;
+    if (saveTimeoutRef.current) {
+      clearTimeout(saveTimeoutRef.current);
+      try {
         const savedId = await saveDraft();
         if (savedId) {
           finalDraftId = savedId;
         }
+      } catch (err) {
+        debug.error('Failed to save draft before send:', err);
       }
+    }
 
-      // Get the selected identity or primary identity
-      const currentIdentity = selectedIdentityId
-        ? identities.find(id => id.id === selectedIdentityId)
-        : primaryIdentity;
+    const currentIdentity = selectedIdentityId
+      ? identities.find(id => id.id === selectedIdentityId)
+      : primaryIdentity;
 
-      // Generate sub-addressed email if tag is set
-      const fromEmail = currentIdentity?.email
-        ? subAddressTag
-          ? generateSubAddress(currentIdentity.email, subAddressTag)
-          : currentIdentity.email
-        : undefined;
+    const fromEmail = currentIdentity?.email
+      ? subAddressTag
+        ? generateSubAddress(currentIdentity.email, subAddressTag)
+        : currentIdentity.email
+      : undefined;
 
-      onSend?.({
+    try {
+      await onSend?.({
         to: toAddresses,
         cc: ccAddresses,
         bcc: bccAddresses,
@@ -435,7 +487,6 @@ export function EmailComposer({
         identityId: currentIdentity?.id,
       });
 
-      // Reset form
       setTo("");
       setCc("");
       setBcc("");
@@ -443,21 +494,27 @@ export function EmailComposer({
       setBody("");
       setDraftId(null);
       setSubAddressTag("");
+      setValidationErrors({});
+    } catch (err) {
+      debug.error('Failed to send email:', err);
+      toast.error(t('send_failed'));
     }
   };
 
-  const handleClose = () => {
-    // If there's a draft with content, ask user if they want to discard
+  const handleClose = async () => {
     if (draftId && (to || subject || body)) {
-      const confirmDiscard = window.confirm(t('discard_draft_confirm'));
+      const confirmed = await confirm({
+        title: t('discard_draft_title'),
+        message: t('discard_draft_confirm'),
+        confirmText: t('discard'),
+        variant: "destructive",
+      });
 
-      if (confirmDiscard) {
-        // Clear any pending auto-save
+      if (confirmed) {
         if (saveTimeoutRef.current) {
           clearTimeout(saveTimeoutRef.current);
         }
 
-        // Delete the draft if callback is provided
         if (onDiscardDraft) {
           onDiscardDraft(draftId);
         }
@@ -555,7 +612,7 @@ export function EmailComposer({
             </div>
           </div>
 
-          <div className="flex items-center gap-2 relative">
+          <div className={cn("flex items-center gap-2 relative", shakeField === 'to' && "animate-shake")}>
             <span className="text-sm text-muted-foreground w-16">{t('to')}:</span>
             <div className="flex-1 relative">
               <Input
@@ -565,19 +622,27 @@ export function EmailComposer({
                 value={to}
                 onChange={(e) => {
                   setTo(e.target.value);
+                  if (validationErrors.to) setValidationErrors(prev => ({ ...prev, to: false }));
                   handleAutocomplete(e.target.value, 'to');
                 }}
                 onKeyDown={(e) => handleAutoKeyDown(e, 'to')}
-                onBlur={() => setTimeout(() => { if (activeAutoField === 'to') { setActiveAutoField(null); setAutoSelectedIndex(-1); } }, 200)}
-                className="border-0 focus-visible:ring-0"
+                onBlur={(e) => handleAutoBlur(e, 'to')}
+                className={cn(
+                  "border-0 focus-visible:ring-0",
+                  validationErrors.to && "ring-2 ring-red-500 dark:ring-red-400"
+                )}
                 role="combobox"
                 aria-expanded={activeAutoField === 'to' && autocompleteResults.length > 0}
                 aria-autocomplete="list"
                 aria-controls={activeAutoField === 'to' ? 'autocomplete-to' : undefined}
                 aria-activedescendant={activeAutoField === 'to' && autoSelectedIndex >= 0 ? `autocomplete-option-${autoSelectedIndex}` : undefined}
+                aria-invalid={validationErrors.to || undefined}
               />
+              {validationErrors.to && (
+                <p className="text-xs text-red-600 dark:text-red-400 mt-0.5 px-1">{t('validation.recipient_required')}</p>
+              )}
               {activeAutoField === 'to' && autocompleteResults.length > 0 && (
-                <AutocompleteDropdown id="autocomplete-to" results={autocompleteResults} selectedIndex={autoSelectedIndex} onSelect={(email) => insertAutocomplete(email, 'to')} />
+                <AutocompleteDropdown ref={toDropdownRef} id="autocomplete-to" results={autocompleteResults} selectedIndex={autoSelectedIndex} onSelect={(email) => insertAutocomplete(email, 'to')} />
               )}
             </div>
             <div className="flex gap-1">
@@ -614,7 +679,7 @@ export function EmailComposer({
                     handleAutocomplete(e.target.value, 'cc');
                   }}
                   onKeyDown={(e) => handleAutoKeyDown(e, 'cc')}
-                  onBlur={() => setTimeout(() => { if (activeAutoField === 'cc') { setActiveAutoField(null); setAutoSelectedIndex(-1); } }, 200)}
+                  onBlur={(e) => handleAutoBlur(e, 'cc')}
                   className="border-0 focus-visible:ring-0"
                   role="combobox"
                   aria-expanded={activeAutoField === 'cc' && autocompleteResults.length > 0}
@@ -623,7 +688,7 @@ export function EmailComposer({
                   aria-activedescendant={activeAutoField === 'cc' && autoSelectedIndex >= 0 ? `autocomplete-option-${autoSelectedIndex}` : undefined}
                 />
                 {activeAutoField === 'cc' && autocompleteResults.length > 0 && (
-                  <AutocompleteDropdown id="autocomplete-cc" results={autocompleteResults} selectedIndex={autoSelectedIndex} onSelect={(email) => insertAutocomplete(email, 'cc')} />
+                  <AutocompleteDropdown ref={ccDropdownRef} id="autocomplete-cc" results={autocompleteResults} selectedIndex={autoSelectedIndex} onSelect={(email) => insertAutocomplete(email, 'cc')} />
                 )}
               </div>
             </div>
@@ -643,7 +708,7 @@ export function EmailComposer({
                     handleAutocomplete(e.target.value, 'bcc');
                   }}
                   onKeyDown={(e) => handleAutoKeyDown(e, 'bcc')}
-                  onBlur={() => setTimeout(() => { if (activeAutoField === 'bcc') { setActiveAutoField(null); setAutoSelectedIndex(-1); } }, 200)}
+                  onBlur={(e) => handleAutoBlur(e, 'bcc')}
                   className="border-0 focus-visible:ring-0"
                   role="combobox"
                   aria-expanded={activeAutoField === 'bcc' && autocompleteResults.length > 0}
@@ -652,7 +717,7 @@ export function EmailComposer({
                   aria-activedescendant={activeAutoField === 'bcc' && autoSelectedIndex >= 0 ? `autocomplete-option-${autoSelectedIndex}` : undefined}
                 />
                 {activeAutoField === 'bcc' && autocompleteResults.length > 0 && (
-                  <AutocompleteDropdown id="autocomplete-bcc" results={autocompleteResults} selectedIndex={autoSelectedIndex} onSelect={(email) => insertAutocomplete(email, 'bcc')} />
+                  <AutocompleteDropdown ref={bccDropdownRef} id="autocomplete-bcc" results={autocompleteResults} selectedIndex={autoSelectedIndex} onSelect={(email) => insertAutocomplete(email, 'bcc')} />
                 )}
               </div>
             </div>
@@ -664,22 +729,35 @@ export function EmailComposer({
               type="text"
               placeholder={t('subject_placeholder')}
               value={subject}
-              onChange={(e) => setSubject(e.target.value)}
-              className="flex-1 border-0 focus-visible:ring-0"
+              onChange={(e) => {
+                setSubject(e.target.value);
+                if (validationErrors.subject) setValidationErrors(prev => ({ ...prev, subject: false }));
+              }}
+              className={cn(
+                "flex-1 border-0 focus-visible:ring-0",
+                validationErrors.subject && "ring-2 ring-red-500 dark:ring-red-400"
+              )}
+              aria-invalid={validationErrors.subject || undefined}
             />
           </div>
         </div>
 
         <div className="flex-1 px-4 py-3 min-h-0">
           <textarea
-            className="w-full h-full resize-none outline-none text-sm bg-transparent text-foreground placeholder:text-muted-foreground"
+            className={cn(
+              "w-full h-full resize-none outline-none text-sm bg-transparent text-foreground placeholder:text-muted-foreground rounded",
+              validationErrors.body && "ring-2 ring-red-500 dark:ring-red-400"
+            )}
             placeholder={t('body_placeholder')}
             value={body}
-            onChange={(e) => setBody(e.target.value)}
+            onChange={(e) => {
+              setBody(e.target.value);
+              if (validationErrors.body) setValidationErrors(prev => ({ ...prev, body: false }));
+            }}
+            aria-invalid={validationErrors.body || undefined}
           />
         </div>
 
-        {/* Attachments display */}
         {attachments.length > 0 && (
           <div className="px-4 py-2 border-t">
             <div className="flex flex-wrap gap-2">
@@ -687,27 +765,36 @@ export function EmailComposer({
                 <div
                   key={index}
                   className={cn(
-                    "flex items-center gap-2 px-3 py-1 rounded-md text-sm",
+                    "relative flex items-center gap-2 px-3 py-1.5 rounded-md text-sm overflow-hidden",
                     att.error ? "bg-red-500/10 text-red-600 dark:text-red-400" : "bg-muted text-foreground"
                   )}
                 >
-                  {att.uploading ? (
-                    <Loader2 className="w-3 h-3 animate-spin" />
-                  ) : att.error ? (
-                    <AlertCircle className="w-3 h-3" />
-                  ) : (
-                    <Paperclip className="w-3 h-3" />
+                  {att.uploading && (
+                    <div className="absolute inset-0 pointer-events-none">
+                      <div className="h-full bg-primary/10 animate-pulse" />
+                      <div className="absolute bottom-0 left-0 h-0.5 bg-primary/40 animate-[indeterminate_1.5s_ease-in-out_infinite]" style={{ width: '40%' }} />
+                    </div>
                   )}
-                  <span className="max-w-[200px] truncate">{att.file.name}</span>
-                  <span className="text-xs text-muted-foreground">
-                    ({(att.file.size / 1024).toFixed(1)} {t('file_size_kb')})
-                  </span>
-                  <button
-                    onClick={() => removeAttachment(index)}
-                    className="ml-1 hover:text-red-500"
-                  >
-                    <X className="w-3 h-3" />
-                  </button>
+                  <div className="relative flex items-center gap-2">
+                    {att.uploading ? (
+                      <Loader2 className="w-3 h-3 animate-spin flex-shrink-0" />
+                    ) : att.error ? (
+                      <AlertCircle className="w-3 h-3 flex-shrink-0" />
+                    ) : (
+                      <Paperclip className="w-3 h-3 flex-shrink-0" />
+                    )}
+                    <span className="max-w-[200px] truncate">{att.file.name}</span>
+                    <span className="text-xs text-muted-foreground whitespace-nowrap">
+                      ({formatFileSize(att.file.size)})
+                    </span>
+                    <button
+                      onClick={() => removeAttachment(index)}
+                      className="ml-1 hover:text-red-500 min-w-[20px] min-h-[20px] flex items-center justify-center"
+                      title={att.uploading ? t('upload_cancel') : undefined}
+                    >
+                      <X className="w-3 h-3" />
+                    </button>
+                  </div>
                 </div>
               ))}
             </div>
@@ -759,7 +846,11 @@ export function EmailComposer({
               <Paperclip className="w-4 h-4 mr-2" />
               {t('attach')}
             </Button>
-            <Button onClick={handleSend}>
+            <Button
+              onClick={handleSend}
+              disabled={!canSend}
+              title={getSendTooltip()}
+            >
               <Send className="w-4 h-4 mr-2" />
               {t('send')}
             </Button>
@@ -801,23 +892,20 @@ export function EmailComposer({
           </div>
         </div>
       )}
+
+      <ConfirmDialog {...confirmDialogProps} />
     </div>
   );
 }
 
-function AutocompleteDropdown({
-  id,
-  results,
-  selectedIndex,
-  onSelect,
-}: {
+const AutocompleteDropdown = React.forwardRef<HTMLDivElement, {
   id: string;
   results: Array<{ name: string; email: string }>;
   selectedIndex: number;
   onSelect: (email: string) => void;
-}) {
+}>(function AutocompleteDropdown({ id, results, selectedIndex, onSelect }, ref) {
   return (
-    <div id={id} role="listbox" className="absolute top-full left-0 right-0 z-50 mt-1 bg-popover border border-border rounded-md shadow-lg max-h-48 overflow-y-auto">
+    <div ref={ref} id={id} role="listbox" className="absolute top-full left-0 right-0 z-50 mt-1 bg-popover border border-border rounded-md shadow-lg max-h-48 overflow-y-auto">
       {results.map((r, i) => (
         <button
           key={i}
@@ -842,4 +930,4 @@ function AutocompleteDropdown({
       ))}
     </div>
   );
-}
+});

components/email/email-context-menu.tsx

@@ -273,20 +273,43 @@ export function EmailContextMenu({
       {/* Set color submenu - only for single email */}
       {!showBatchActions && (
         <ContextMenuSubMenu icon={Palette} label={t("color_tag")}>
-          <div className="px-3 py-2 flex flex-wrap gap-1.5">
-            {colorOptions.map((option) => (
+          <div
+            className="px-3 py-2 flex flex-wrap gap-2"
+            role="group"
+            aria-label={t("color_tag")}
+            onKeyDown={(e) => {
+              const buttons = Array.from(
+                e.currentTarget.querySelectorAll<HTMLButtonElement>("button")
+              );
+              const idx = buttons.indexOf(e.target as HTMLButtonElement);
+              if (idx < 0) return;
+              let next = -1;
+              if (e.key === "ArrowRight" || e.key === "ArrowDown") {
+                next = (idx + 1) % buttons.length;
+              } else if (e.key === "ArrowLeft" || e.key === "ArrowUp") {
+                next = (idx - 1 + buttons.length) % buttons.length;
+              }
+              if (next >= 0) {
+                e.preventDefault();
+                buttons[next].focus();
+              }
+            }}
+          >
+            {colorOptions.map((option, i) => (
               <button
                 key={option.value}
+                tabIndex={i === 0 ? 0 : -1}
                 onClick={() =>
                   handleAction(() => onSetColorTag?.(option.value))
                 }
                 className={cn(
-                  "w-6 h-6 rounded-full hover:scale-110 transition-transform",
+                  "w-8 h-8 rounded-full hover:scale-110 transition-transform focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
                   option.color,
                   currentColor === option.value &&
                     "ring-2 ring-offset-2 ring-offset-background ring-foreground"
                 )}
                 title={option.name}
+                aria-label={option.name}
               />
             ))}
           </div>

components/email/email-list-item.tsx

@@ -100,7 +100,7 @@ export function EmailListItem({ email, selected, onClick, onContextMenu }: Email
         <button
           onClick={handleCheckboxClick}
           className={cn(
-            "p-1 rounded mt-2 flex-shrink-0 transition-all duration-200",
+            "p-3 lg:p-1 rounded mt-2 flex-shrink-0 transition-all duration-200",
             "hover:bg-muted/50 hover:scale-110",
             "active:scale-95",
             isChecked && "text-primary"

components/email/email-list.tsx

@@ -7,11 +7,13 @@ import { cn } from "@/lib/utils";
 import { Inbox, CheckSquare, Square, Trash2, Mail, MailOpen, Loader2 } from "lucide-react";
 import { useState, useEffect, useRef, useCallback, useMemo } from "react";
 import { Button } from "@/components/ui/button";
+import { ConfirmDialog } from "@/components/ui/confirm-dialog";
 import { useEmailStore } from "@/stores/email-store";
 import { useAuthStore } from "@/stores/auth-store";
 import { useSettingsStore } from "@/stores/settings-store";
 import { groupEmailsByThread, sortThreadGroups } from "@/lib/thread-utils";
 import { useContextMenu } from "@/hooks/use-context-menu";
+import { useConfirmDialog } from "@/hooks/use-confirm-dialog";
 import { useTranslations } from "next-intl";
 import { useVirtualizer } from "@tanstack/react-virtual";
 import { SearchChips } from "@/components/search/search-chips";
@@ -90,6 +92,7 @@ export function EmailList({
   }, [emails]);
 
   const { contextMenu, openContextMenu, closeContextMenu, menuRef } = useContextMenu<Email>();
+  const { dialogProps: confirmDialogProps, confirm: confirmDialog } = useConfirmDialog();
 
   const [isProcessing, setIsProcessing] = useState(false);
   const parentRef = useRef<HTMLDivElement>(null);
@@ -143,7 +146,16 @@ export function EmailList({
   };
 
   const handleBatchDelete = async () => {
-    if (!client || isProcessing || !confirm(`Delete ${selectedEmailIds.size} emails?`)) return;
+    if (!client || isProcessing) return;
+
+    const confirmed = await confirmDialog({
+      title: t('batch_actions.delete_confirm_title'),
+      message: t('batch_actions.delete_confirm_message', { count: selectedEmailIds.size }),
+      confirmText: t('batch_actions.delete'),
+      variant: "destructive",
+    });
+    if (!confirmed) return;
+
     setIsProcessing(true);
     try {
       await batchDelete(client);
@@ -456,6 +468,8 @@ export function EmailList({
           }}
         />
       )}
+
+      <ConfirmDialog {...confirmDialogProps} />
     </div>
   );
 }

components/email/email-viewer.tsx

@@ -47,6 +47,7 @@ import {
   Copy,
   Brain,
   Sparkles,
+  Keyboard,
 } from "lucide-react";
 import { useTranslations } from "next-intl";
 import { useSettingsStore } from "@/stores/settings-store";
@@ -63,7 +64,7 @@ import { findCalendarAttachment } from "@/lib/calendar-invitation";
 interface EmailViewerProps {
   email: Email | null;
   isLoading?: boolean;
-  onReply?: () => void;
+  onReply?: (draftText?: string) => void;
   onReplyAll?: () => void;
   onForward?: () => void;
   onDelete?: () => void;
@@ -76,6 +77,7 @@ interface EmailViewerProps {
   onMarkAsSpam?: () => void;
   onUndoSpam?: () => void;
   onBack?: () => void;
+  onShowShortcuts?: () => void;
   currentUserEmail?: string;
   currentUserName?: string;
   currentMailboxRole?: string;
@@ -170,6 +172,7 @@ export function EmailViewer({
   onMarkAsSpam,
   onUndoSpam,
   onBack,
+  onShowShortcuts,
   currentUserEmail,
   currentUserName,
   currentMailboxRole,
@@ -456,6 +459,11 @@ export function EmailViewer({
             }
           }
 
+          if (node.tagName === 'A') {
+            node.setAttribute('target', '_blank');
+            node.setAttribute('rel', 'noopener noreferrer');
+          }
+
           if (resolvedTheme === 'dark') {
             if (htmlNode.style) {
               const originalStyles = htmlNode.style.cssText;
@@ -512,7 +520,7 @@ export function EmailViewer({
           .replace(/\r/g, '<br>')    // Old Mac line endings
           .replace(/\n/g, '<br>')    // Unix line endings
           .replace(/\t/g, '&nbsp;&nbsp;&nbsp;&nbsp;')  // Convert tabs to spaces
-          .replace(/(https?:\/\/[^\s<]+)/g, '<a href="$1" target="_blank" rel="noopener">$1</a>'); // Don't match across tags
+          .replace(/(https?:\/\/[^\s<]+)/g, '<a href="$1" target="_blank" rel="noopener noreferrer">$1</a>');
 
         return {
           html: htmlFromText,
@@ -650,7 +658,7 @@ export function EmailViewer({
                 variant="ghost"
                 size="icon"
                 onClick={onBack}
-                className="h-10 w-10 flex-shrink-0 -ml-2"
+                className="h-11 w-11 lg:h-10 lg:w-10 flex-shrink-0 -ml-2"
                 aria-label={t('back_to_list')}
               >
                 <ChevronLeft className="w-5 h-5" />
@@ -697,9 +705,9 @@ export function EmailViewer({
               )}
               {/* Primary Reply Button */}
               <Button
-                onClick={onReply}
+                onClick={() => onReply?.()}
                 size="sm"
-                className="mr-1 h-8 lg:h-9"
+                className="mr-1 h-10 lg:h-9"
                 title={t('tooltips.reply')}
               >
                 <Reply className="w-4 h-4" />
@@ -711,7 +719,7 @@ export function EmailViewer({
                 <Button
                   variant="ghost"
                   size="icon"
-                  className="h-8 w-8 hover:bg-muted"
+                  className="h-10 w-10 lg:h-8 lg:w-8 hover:bg-muted"
                   title={t('more_reply_options')}
                 >
                   <ChevronDown className="w-4 h-4 text-muted-foreground" />
@@ -740,7 +748,7 @@ export function EmailViewer({
                 variant="ghost"
                 size="icon"
                 onClick={onArchive}
-                className="h-8 w-8 hover:bg-muted hidden lg:flex"
+                className="h-10 w-10 lg:h-8 lg:w-8 hover:bg-muted hidden lg:flex"
                 title={t('tooltips.archive')}
               >
                 <Archive className="w-4 h-4 text-muted-foreground" />
@@ -753,7 +761,7 @@ export function EmailViewer({
                   size="icon"
                   onClick={isInJunkFolder ? onUndoSpam : onMarkAsSpam}
                   className={cn(
-                    "hidden h-8 w-8 lg:flex",
+                    "hidden h-10 w-10 lg:h-8 lg:w-8 lg:flex",
                     isInJunkFolder
                       ? "hover:bg-green-50 dark:hover:bg-green-950/30"
                       : "hover:bg-red-50 dark:hover:bg-red-950/30"
@@ -772,7 +780,7 @@ export function EmailViewer({
                 variant="ghost"
                 size="icon"
                 onClick={onDelete}
-                className="h-8 w-8 hover:bg-muted"
+                className="h-10 w-10 lg:h-8 lg:w-8 hover:bg-muted"
                 title={t('tooltips.delete')}
               >
                 <Trash2 className="w-4 h-4 text-muted-foreground" />
@@ -781,7 +789,7 @@ export function EmailViewer({
                 variant="ghost"
                 size="icon"
                 onClick={onToggleStar}
-                className="h-8 w-8 hover:bg-muted hidden lg:flex"
+                className="h-10 w-10 lg:h-8 lg:w-8 hover:bg-muted hidden lg:flex"
                 title={isStarred ? "Unstar" : "Star"}
               >
                 <Star className={cn(
@@ -855,7 +863,7 @@ export function EmailViewer({
                 <Button
                   variant="ghost"
                   size="icon"
-                  className="h-8 w-8 hover:bg-muted"
+                  className="h-10 w-10 lg:h-8 lg:w-8 hover:bg-muted"
                   title={t('more_actions')}
                 >
                   <MoreVertical className="w-4 h-4 text-muted-foreground" />
@@ -875,6 +883,15 @@ export function EmailViewer({
                     <Printer className="w-4 h-4" />
                     {t('print')}
                   </button>
+                  {onShowShortcuts && (
+                    <button
+                      onClick={onShowShortcuts}
+                      className="w-full px-3 py-2 text-sm text-left hover:bg-muted text-foreground flex items-center gap-2"
+                    >
+                      <Keyboard className="w-4 h-4" />
+                      {t('keyboard_shortcuts')}
+                    </button>
+                  )}
                   {/* Separator */}
                   <div className="h-px bg-border my-1" />
                   {/* Spam action - contextual */}
@@ -1315,7 +1332,7 @@ export function EmailViewer({
               <div className="flex flex-col gap-3 isolate">
                 {/* External Content Controls */}
                 {hasBlockedContent && !allowExternalContent && externalContentPolicy !== 'allow' && (
-                  <div className="flex items-center gap-3 flex-wrap md:justify-center">
+                  <div className="flex items-center gap-3 flex-wrap md:justify-center rounded-md px-3 py-1 bg-muted/50 dark:bg-muted/30">
                     {externalContentPolicy === 'ask' && (
                       <button
                         onClick={() => setAllowExternalContent(true)}
@@ -1344,7 +1361,7 @@ export function EmailViewer({
 
                 {/* Unsubscribe Controls */}
                 {shouldShowUnsubBanner && listHeaders?.listUnsubscribe && (
-                  <div className="flex items-center md:justify-center">
+                  <div className="flex items-center md:justify-center rounded-md px-3 py-1 bg-blue-50/50 dark:bg-blue-950/20">
                     <UnsubscribeBanner
                       listUnsubscribe={listHeaders.listUnsubscribe}
                       senderEmail={email?.from?.[0]?.email || ''}
@@ -1360,7 +1377,9 @@ export function EmailViewer({
 
                 {/* Calendar Invitation Banner */}
                 {hasCalendarInvitation && (
-                  <CalendarInvitationBanner email={email} />
+                  <div className="rounded-md px-3 py-1 bg-amber-50/50 dark:bg-amber-950/20">
+                    <CalendarInvitationBanner email={email} />
+                  </div>
                 )}
               </div>
             </div>
@@ -1503,7 +1522,7 @@ export function EmailViewer({
                       "hover:border-accent focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary transition-all",
                       "resize-none"
                     )}
-                    rows={isQuickReplyFocused || quickReplyText ? 3 : 1}
+                    rows={isQuickReplyFocused || quickReplyText ? 3 : 2}
                     disabled={isSendingQuickReply}
                   />
 
@@ -1511,7 +1530,7 @@ export function EmailViewer({
                   {(isQuickReplyFocused || quickReplyText) && (
                     <div className="flex items-center justify-between gap-2 animate-in fade-in slide-in-from-top-1 duration-200">
                       <div className="text-xs text-muted-foreground">
-                        {quickReplyText.length > 0 && t('characters_count', { count: quickReplyText.length })}
+                        {t('characters_count', { count: quickReplyText.length })}
                       </div>
                       <div className="flex items-center gap-2">
                         <Button
@@ -1528,7 +1547,11 @@ export function EmailViewer({
                         <Button
                           variant="ghost"
                           size="sm"
-                          onClick={onReply}
+                          onClick={() => {
+                            onReply?.(quickReplyText);
+                            setQuickReplyText("");
+                            setIsQuickReplyFocused(false);
+                          }}
                           disabled={isSendingQuickReply}
                           className="text-muted-foreground"
                         >
@@ -1605,7 +1628,7 @@ export function EmailViewer({
                   variant="ghost"
                   size="icon"
                   onClick={() => setShowSourceModal(false)}
-                  className="h-8 w-8"
+                  className="h-10 w-10 lg:h-8 lg:w-8"
                 >
                   <X className="w-4 h-4" />
                 </Button>

components/email/thread-conversation-view.tsx

@@ -297,6 +297,11 @@ function EmailCard({
             }
           }
 
+          if (node.tagName === 'A') {
+            node.setAttribute('target', '_blank');
+            node.setAttribute('rel', 'noopener noreferrer');
+          }
+
           if (resolvedTheme === 'dark') {
             if (htmlNode.style) {
               const originalStyles = htmlNode.style.cssText;

components/email/thread-list-item.tsx

@@ -5,7 +5,7 @@ import { formatDate } from "@/lib/utils";
 import { Email, ThreadGroup } from "@/lib/jmap/types";
 import { cn } from "@/lib/utils";
 import { Avatar } from "@/components/ui/avatar";
-import { Paperclip, Star, Circle, ChevronRight, ChevronDown, Loader2 } from "lucide-react";
+import { Paperclip, Star, Circle, ChevronRight, ChevronDown, Loader2, MessageSquare } from "lucide-react";
 import { useSettingsStore } from "@/stores/settings-store";
 import { useUIStore } from "@/stores/ui-store";
 import { getThreadColorTag } from "@/lib/thread-utils";
@@ -244,6 +244,8 @@ export const ThreadListItem = React.forwardRef<HTMLDivElement, ThreadListItemPro
                   "active:scale-95",
                   "text-muted-foreground hover:text-foreground"
                 )}
+                aria-expanded={isExpanded}
+                aria-label={t('toggle_thread')}
               >
                 {isLoading ? (
                   <Loader2 className="w-4 h-4 animate-spin" />
@@ -279,12 +281,16 @@ export const ThreadListItem = React.forwardRef<HTMLDivElement, ThreadListItemPro
                   )}>
                     {participantNames.join(", ")}
                   </span>
-                  <span className={cn(
-                    "flex-shrink-0 px-1.5 py-0.5 text-xs rounded-full font-medium",
-                    hasUnread
-                      ? "bg-primary text-primary-foreground"
-                      : "bg-muted text-muted-foreground"
-                  )}>
+                  <span
+                    className={cn(
+                      "flex-shrink-0 inline-flex items-center gap-0.5 px-1.5 py-0.5 text-xs rounded-full font-medium",
+                      hasUnread
+                        ? "bg-primary text-primary-foreground"
+                        : "bg-muted text-muted-foreground"
+                    )}
+                    title={t('messages_tooltip', { count: emailCount })}
+                  >
+                    <MessageSquare className="w-3 h-3" />
                     {emailCount}
                   </span>
                   <div className="flex items-center gap-1.5">

components/identity/identity-manager-modal.tsx

@@ -5,12 +5,14 @@ import { useTranslations } from 'next-intl';
 import { X, Mail, Pencil, Trash2, Plus, AlertTriangle } from 'lucide-react';
 import { cn } from '@/lib/utils';
 import { Button } from '@/components/ui/button';
+import { ConfirmDialog } from '@/components/ui/confirm-dialog';
 import { IdentityForm } from './identity-form';
 import { useIdentityStore } from '@/stores/identity-store';
 import { useAuthStore } from '@/stores/auth-store';
 import type { Identity, EmailAddress } from '@/lib/jmap/types';
 import { toast } from '@/stores/toast-store';
 import { useFocusTrap } from '@/hooks/use-focus-trap';
+import { useConfirmDialog } from '@/hooks/use-confirm-dialog';
 
 interface IdentityFormData {
   name: string;
@@ -36,6 +38,7 @@ export function IdentityManagerModal({ isOpen, onClose }: IdentityManagerModalPr
   const [editingId, setEditingId] = useState<string | null>(null);
   const [isCreating, setIsCreating] = useState(false);
   const [deletingId, setDeletingId] = useState<string | null>(null);
+  const { dialogProps: confirmDialogProps, confirm: confirmDialog } = useConfirmDialog();
 
   // Focus trap with Escape handling
   const modalRef = useFocusTrap({
@@ -117,9 +120,13 @@ export function IdentityManagerModal({ isOpen, onClose }: IdentityManagerModalPr
       return;
     }
 
-    if (!window.confirm(t('delete_confirm'))) {
-      return;
-    }
+    const confirmed = await confirmDialog({
+      title: t('delete_confirm_title'),
+      message: t('delete_confirm'),
+      confirmText: t('delete_button'),
+      variant: "destructive",
+    });
+    if (!confirmed) return;
 
     setDeletingId(identity.id);
 
@@ -133,7 +140,7 @@ export function IdentityManagerModal({ isOpen, onClose }: IdentityManagerModalPr
     } finally {
       setDeletingId(null);
     }
-  }, [client, removeIdentity, t, tNotif]);
+  }, [client, removeIdentity, t, tNotif, confirmDialog]);
 
   if (!isOpen) return null;
 
@@ -297,6 +304,8 @@ export function IdentityManagerModal({ isOpen, onClose }: IdentityManagerModalPr
           </div>
         </div>
       </div>
+
+      <ConfirmDialog {...confirmDialogProps} />
     </div>
   );
 }

components/keyboard-shortcuts-modal.tsx

@@ -1,10 +1,10 @@
 "use client";
 
-import { useEffect, useRef } from "react";
 import { useTranslations } from "next-intl";
 import { X, Keyboard } from "lucide-react";
 import { KEYBOARD_SHORTCUTS } from "@/hooks/use-keyboard-shortcuts";
 import { cn } from "@/lib/utils";
+import { useFocusTrap } from "@/hooks/use-focus-trap";
 
 interface KeyboardShortcutsModalProps {
   isOpen: boolean;
@@ -13,43 +13,28 @@ interface KeyboardShortcutsModalProps {
 
 export function KeyboardShortcutsModal({ isOpen, onClose }: KeyboardShortcutsModalProps) {
   const t = useTranslations();
-  const modalRef = useRef<HTMLDivElement>(null);
 
-  // Close on any key press
-  useEffect(() => {
-    const handleKeyDown = () => {
-      onClose();
-    };
-
-    if (isOpen) {
-      window.addEventListener("keydown", handleKeyDown);
-      return () => window.removeEventListener("keydown", handleKeyDown);
-    }
-  }, [isOpen, onClose]);
-
-  // Close on click outside
-  useEffect(() => {
-    const handleClickOutside = (e: MouseEvent) => {
-      if (modalRef.current && !modalRef.current.contains(e.target as Node)) {
-        onClose();
-      }
-    };
-
-    if (isOpen) {
-      document.addEventListener("mousedown", handleClickOutside);
-      return () => document.removeEventListener("mousedown", handleClickOutside);
-    }
-  }, [isOpen, onClose]);
+  const modalRef = useFocusTrap({
+    isActive: isOpen,
+    onEscape: onClose,
+    restoreFocus: true,
+  });
 
   if (!isOpen) return null;
 
   return (
-    <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4 animate-in fade-in duration-150">
+    <div
+      className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4 animate-in fade-in duration-150"
+      onClick={(e) => { if (e.target === e.currentTarget) onClose(); }}
+    >
       <div
         ref={modalRef}
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby="shortcuts-dialog-title"
         className={cn(
           "bg-background border border-border rounded-lg shadow-xl",
-          "w-full max-w-2xl max-h-[80vh] overflow-hidden",
+          "w-full max-w-2xl max-h-[90vh] overflow-hidden",
           "animate-in zoom-in-95 duration-200"
         )}
       >
@@ -57,20 +42,21 @@ export function KeyboardShortcutsModal({ isOpen, onClose }: KeyboardShortcutsMod
         <div className="flex items-center justify-between px-6 py-4 border-b border-border">
           <div className="flex items-center gap-3">
             <Keyboard className="w-5 h-5 text-muted-foreground" />
-            <h2 className="text-lg font-semibold text-foreground">
+            <h2 id="shortcuts-dialog-title" className="text-lg font-semibold text-foreground">
               {t("shortcuts.title")}
             </h2>
           </div>
           <button
             onClick={onClose}
             className="p-2 rounded-md hover:bg-muted transition-colors text-muted-foreground hover:text-foreground"
+            aria-label={t("common.close")}
           >
             <X className="w-5 h-5" />
           </button>
         </div>
 
         {/* Content */}
-        <div className="p-6 overflow-y-auto max-h-[calc(80vh-80px)]">
+        <div className="p-4 md:p-6 overflow-y-auto max-h-[calc(90vh-80px)]">
           <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
             {/* Navigation Section */}
             <section>

components/layout/mobile-header.tsx

@@ -50,8 +50,12 @@ export function MobileHeader({
           variant="ghost"
           size="icon"
           onClick={handleLeftAction}
-          className="h-10 w-10"
+          className={cn(
+            "h-11 w-11",
+            !showBack && sidebarOpen && "bg-accent"
+          )}
           aria-label={showBack ? "Go back" : "Toggle menu"}
+          aria-expanded={!showBack ? sidebarOpen : undefined}
         >
           {showBack ? (
             <ArrowLeft className="h-5 w-5" />
@@ -73,7 +77,7 @@ export function MobileHeader({
             variant="ghost"
             size="icon"
             onClick={onSearch}
-            className="h-10 w-10"
+            className="h-11 w-11"
             aria-label={t('mobile.search')}
           >
             <Search className="h-5 w-5" />
@@ -84,7 +88,7 @@ export function MobileHeader({
             variant="ghost"
             size="icon"
             onClick={onCompose}
-            className="h-10 w-10 text-primary"
+            className="h-11 w-11 text-primary"
             aria-label={t('mobile.compose')}
           >
             <Plus className="h-5 w-5" />
@@ -127,7 +131,7 @@ export function MobileViewerHeader({
         variant="ghost"
         size="icon"
         onClick={onBack}
-        className="h-10 w-10"
+        className="h-11 w-11"
         aria-label={t('mobile.go_back')}
       >
         <ArrowLeft className="h-5 w-5" />

components/layout/navigation-rail.tsx

@@ -0,0 +1,139 @@
+"use client";
+
+import { Mail, Calendar, BookUser, Settings } from "lucide-react";
+import { usePathname, Link } from "@/i18n/navigation";
+import { useTranslations } from "next-intl";
+import { useCalendarStore } from "@/stores/calendar-store";
+import { useEmailStore } from "@/stores/email-store";
+import { cn } from "@/lib/utils";
+
+interface NavItem {
+  id: string;
+  icon: typeof Mail;
+  labelKey: string;
+  href: string;
+  hidden?: boolean;
+  badge?: number;
+}
+
+interface NavigationRailProps {
+  orientation?: "vertical" | "horizontal";
+  collapsed?: boolean;
+  className?: string;
+}
+
+export function NavigationRail({
+  orientation = "vertical",
+  collapsed = false,
+  className,
+}: NavigationRailProps) {
+  const t = useTranslations("sidebar");
+  const pathname = usePathname();
+  const { supportsCalendar } = useCalendarStore();
+  const { mailboxes } = useEmailStore();
+  const inboxUnread = mailboxes.find(m => m.role === "inbox")?.unreadEmails || 0;
+
+  const navItems: NavItem[] = [
+    { id: "mail", icon: Mail, labelKey: "mail", href: "/", badge: inboxUnread },
+    { id: "calendar", icon: Calendar, labelKey: "calendar", href: "/calendar", hidden: !supportsCalendar },
+    { id: "contacts", icon: BookUser, labelKey: "contacts", href: "/contacts" },
+    { id: "settings", icon: Settings, labelKey: "settings", href: "/settings" },
+  ];
+
+  const visibleItems = navItems.filter((item) => !item.hidden);
+
+  const getIsActive = (href: string) => {
+    if (href === "/") {
+      return pathname === "/" || pathname === "";
+    }
+    return pathname.startsWith(href);
+  };
+
+  if (orientation === "horizontal") {
+    return (
+      <nav
+        className={cn("flex items-center justify-around bg-background border-t border-border", className)}
+        role="navigation"
+        aria-label={t("nav_label")}
+      >
+        {visibleItems.map((item) => {
+          const isActive = getIsActive(item.href);
+          const Icon = item.icon;
+          return (
+            <Link
+              key={item.id}
+              href={item.href}
+              className={cn(
+                "flex flex-col items-center justify-center gap-1 py-2 px-3 min-w-[64px] min-h-[44px]",
+                "transition-colors duration-150",
+                isActive
+                  ? "text-primary"
+                  : "text-muted-foreground hover:text-foreground"
+              )}
+              aria-current={isActive ? "page" : undefined}
+            >
+              <div className="relative">
+                <Icon className="w-5 h-5" />
+                {item.badge != null && item.badge > 0 && (
+                  <span className="absolute -top-1.5 -right-2.5 flex items-center justify-center min-w-[16px] h-4 text-[10px] font-bold rounded-full bg-red-500 text-white px-1">
+                    {item.badge > 99 ? "99+" : item.badge}
+                  </span>
+                )}
+                {isActive && (
+                  <span className="absolute -bottom-1 left-1/2 -translate-x-1/2 w-4 h-0.5 rounded-full bg-primary" />
+                )}
+              </div>
+              <span className="text-[10px] font-medium leading-tight">{t(item.labelKey)}</span>
+            </Link>
+          );
+        })}
+      </nav>
+    );
+  }
+
+  return (
+    <nav
+      className={cn(
+        "flex flex-col",
+        collapsed ? "items-center gap-1 py-3 px-1" : "gap-0.5 py-2 px-2",
+        className
+      )}
+      role="navigation"
+      aria-label={t("nav_label")}
+    >
+      {visibleItems.map((item) => {
+        const isActive = getIsActive(item.href);
+        const Icon = item.icon;
+        return (
+          <Link
+            key={item.id}
+            href={item.href}
+            className={cn(
+              "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",
+              "max-lg:min-h-[44px]",
+              isActive
+                ? "bg-primary/10 text-primary font-medium"
+                : "text-muted-foreground hover:bg-muted hover:text-foreground"
+            )}
+            aria-current={isActive ? "page" : undefined}
+            title={collapsed ? t(item.labelKey) : undefined}
+          >
+            <Icon className={cn("w-[18px] h-[18px] flex-shrink-0", isActive && "text-primary")} />
+            {!collapsed && <span className="truncate">{t(item.labelKey)}</span>}
+            {item.badge != null && item.badge > 0 && (
+              <span className={cn(
+                "absolute flex items-center justify-center min-w-[16px] h-4 text-[10px] font-bold rounded-full bg-red-500 text-white px-1",
+                collapsed ? "-top-0.5 -right-0.5" : "right-1.5"
+              )}>
+                {item.badge > 99 ? "99+" : item.badge}
+              </span>
+            )}
+          </Link>
+        );
+      })}
+    </nav>
+  );
+}

components/layout/sidebar.tsx

@@ -20,14 +20,11 @@ import {
   ChevronDown,
   Folder,
   FolderOpen,
-  Settings,
-  ChevronUp,
   Users,
   User,
-  BookUser,
   Palmtree,
   SlidersHorizontal,
-  Calendar,
+  Settings,
   X,
 } from "lucide-react";
 import { cn, buildMailboxTree, MailboxNode, formatFileSize } from "@/lib/utils";
@@ -37,8 +34,8 @@ import { useMailboxDrop } from "@/hooks/use-mailbox-drop";
 import { useEmailStore } from "@/stores/email-store";
 import { activeFilterCount } from "@/lib/jmap/search-utils";
 import { useVacationStore } from "@/stores/vacation-store";
-import { useCalendarStore } from "@/stores/calendar-store";
 import { toast } from "@/stores/toast-store";
+import { debug } from "@/lib/debug";
 
 interface SidebarProps {
   mailboxes: Mailbox[];
@@ -55,27 +52,22 @@ interface SidebarProps {
   className?: string;
 }
 
-// Map role to icon
 const getIconForMailbox = (role?: string, name?: string, hasChildren?: boolean, isExpanded?: boolean, isShared?: boolean, id?: string) => {
   const lowerName = name?.toLowerCase() || "";
 
-  // Shared folders root node
   if (id === 'shared-folders-root') {
     return isExpanded ? FolderOpen : Users;
   }
 
-  // Shared account nodes
   if (id?.startsWith('shared-account-')) {
     return isExpanded ? FolderOpen : User;
   }
 
-  // Shared mailboxes (but not virtual nodes)
   if (isShared && hasChildren && !id?.startsWith('shared-')) {
     return isExpanded ? FolderOpen : Folder;
   }
 
   if (hasChildren) {
-    // For folders with children, return open/closed folder icon
     return isExpanded ? FolderOpen : Folder;
   }
 
@@ -85,10 +77,9 @@ const getIconForMailbox = (role?: string, name?: string, hasChildren?: boolean,
   if (role === "trash" || lowerName.includes("trash")) return Trash2;
   if (role === "archive" || lowerName.includes("archive")) return Archive;
   if (lowerName.includes("star") || lowerName.includes("flag")) return Star;
-  return Inbox; // Default icon
+  return Inbox;
 };
 
-// Component for rendering a single mailbox node with its children
 function MailboxTreeItem({
   node,
   selectedMailbox,
@@ -109,10 +100,9 @@ function MailboxTreeItem({
   const hasChildren = node.children.length > 0;
   const isExpanded = expandedFolders.has(node.id);
   const Icon = getIconForMailbox(node.role, node.name, hasChildren, isExpanded, node.isShared, node.id);
-  const indentPixels = node.depth * 16; // 16px per depth level
-  const isVirtualNode = node.id.startsWith('shared-'); // Virtual nodes for shared folder organization
+  const indentPixels = node.depth * 16;
+  const isVirtualNode = node.id.startsWith('shared-');
 
-  // Drag and drop functionality
   const { isDragging: globalDragging } = useDragDropContext();
   const { dropHandlers, isValidDropTarget, isInvalidDropTarget } = useMailboxDrop({
     mailbox: node,
@@ -140,15 +130,16 @@ function MailboxTreeItem({
         {...(globalDragging ? dropHandlers : {})}
         className={cn(
           "group w-full flex items-center px-2 py-1 lg:py-1 max-lg:py-3 max-lg:min-h-[44px] text-sm transition-all duration-200",
-          selectedMailbox === node.id
-            ? "bg-accent text-accent-foreground"
-            : "hover:bg-muted text-foreground",
-          node.depth === 0 && "font-medium",
+          isVirtualNode
+            ? "text-muted-foreground"
+            : selectedMailbox === node.id
+              ? "bg-accent text-accent-foreground"
+              : "hover:bg-muted text-foreground",
+          node.depth === 0 && !isVirtualNode && "font-medium",
           isValidDropTarget && "bg-primary/20 ring-2 ring-primary ring-inset",
           isInvalidDropTarget && "bg-destructive/10 ring-2 ring-destructive/30 ring-inset opacity-50"
         )}
       >
-        {/* Expand/Collapse Chevron */}
         {hasChildren && (
           <button
             onClick={(e) => {
@@ -170,14 +161,13 @@ function MailboxTreeItem({
           </button>
         )}
 
-        {/* Mailbox Button */}
         <button
           onClick={() => !isVirtualNode && onMailboxSelect?.(node.id)}
           disabled={isVirtualNode}
           className={cn(
             "flex-1 flex items-center text-left py-1 lg:py-1 max-lg:py-2 px-1 rounded",
             "transition-colors duration-150",
-            isVirtualNode && "cursor-default"
+            isVirtualNode && "cursor-default select-none"
           )}
           style={{
             paddingLeft: hasChildren ? '4px' : `${indentPixels + 24}px`
@@ -189,7 +179,7 @@ function MailboxTreeItem({
             hasChildren && isExpanded && "text-primary",
             selectedMailbox === node.id && "text-accent-foreground",
             !hasChildren && node.depth > 0 && "text-muted-foreground",
-            node.isShared && "text-blue-500" // Shared folders in blue
+            node.isShared && "text-blue-500"
           )} />
           {!isCollapsed && (
             <>
@@ -209,7 +199,6 @@ function MailboxTreeItem({
         </button>
       </div>
 
-      {/* Render children if expanded */}
       {hasChildren && isExpanded && !isCollapsed && (
         <div className="relative">
           {node.children.map((child) => (
@@ -229,27 +218,26 @@ function MailboxTreeItem({
   );
 }
 
-function VacationIndicator() {
+function VacationBanner() {
   const t = useTranslations('sidebar');
+  const router = useRouter();
   const { isEnabled, isSupported } = useVacationStore();
 
   if (!isSupported || !isEnabled) return null;
 
   return (
-    <span
-      className="relative group"
-      title={t("vacation_active")}
+    <button
+      onClick={() => router.push('/settings')}
+      className={cn(
+        "flex items-center gap-2 w-full px-3 py-2 text-xs",
+        "bg-amber-500/10 dark:bg-amber-400/10 text-amber-700 dark:text-amber-400",
+        "hover:bg-amber-500/15 dark:hover:bg-amber-400/15 transition-colors"
+      )}
     >
-      <Palmtree className="w-3.5 h-3.5 text-amber-500 dark:text-amber-400" />
-      <span className={cn(
-        "absolute bottom-full left-1/2 -translate-x-1/2 mb-2 px-2 py-1",
-        "bg-popover text-popover-foreground text-xs rounded shadow-lg",
-        "whitespace-nowrap opacity-0 group-hover:opacity-100",
-        "pointer-events-none transition-opacity duration-200 z-50"
-      )}>
-        {t("vacation_active")}
-      </span>
-    </span>
+      <Palmtree className="w-3.5 h-3.5 flex-shrink-0" />
+      <span className="truncate font-medium">{t("vacation_active")}</span>
+      <Settings className="w-3 h-3 ml-auto flex-shrink-0 opacity-60" />
+    </button>
   );
 }
 
@@ -280,6 +268,43 @@ function AdvancedSearchToggle() {
   );
 }
 
+function StorageQuota({ quota, isCollapsed }: { quota: { used: number; total: number } | null; isCollapsed: boolean }) {
+  const t = useTranslations('sidebar');
+
+  if (!quota || quota.total <= 0) return null;
+
+  const usagePercent = Math.min((quota.used / quota.total) * 100, 100);
+  const barColor = usagePercent > 90
+    ? "bg-red-500 dark:bg-red-400"
+    : usagePercent > 70
+      ? "bg-amber-500 dark:bg-amber-400"
+      : "bg-green-500 dark:bg-green-400";
+
+  if (isCollapsed) {
+    return (
+      <div className="px-2 py-2" title={`${formatFileSize(quota.used)} / ${formatFileSize(quota.total)}`}>
+        <div className="w-full bg-muted rounded-full h-1">
+          <div className={cn(barColor, "h-1 rounded-full transition-all")} style={{ width: `${usagePercent}%` }} />
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="px-3 py-2">
+      <div className="flex items-center justify-between text-xs">
+        <span className="text-muted-foreground">{t("storage")}</span>
+        <span className="text-foreground tabular-nums">
+          {formatFileSize(quota.used)} / {formatFileSize(quota.total)}
+        </span>
+      </div>
+      <div className="mt-1 w-full bg-muted rounded-full h-1">
+        <div className={cn(barColor, "h-1 rounded-full transition-all")} style={{ width: `${usagePercent}%` }} />
+      </div>
+    </div>
+  );
+}
+
 export function Sidebar({
   mailboxes = [],
   selectedMailbox = "",
@@ -297,17 +322,12 @@ export function Sidebar({
   const [isCollapsed, setIsCollapsed] = useState(false);
   const [searchQuery, setSearchQuery] = useState("");
   const [expandedFolders, setExpandedFolders] = useState<Set<string>>(new Set());
-  const [showMenu, setShowMenu] = useState(false);
   const t = useTranslations('sidebar');
-  const { supportsCalendar } = useCalendarStore();
 
-  // Sync local search query with store's active search query
   useEffect(() => {
     setSearchQuery(activeSearchQuery);
   }, [activeSearchQuery]);
-  const router = useRouter();
 
-  // Load expanded folders from localStorage on mount
   useEffect(() => {
     const stored = localStorage.getItem('expandedMailboxes');
     if (stored) {
@@ -315,10 +335,9 @@ export function Sidebar({
         const parsed = JSON.parse(stored);
         setExpandedFolders(new Set(parsed));
       } catch (e) {
-        console.error('Failed to parse expanded mailboxes:', e);
+        debug.error('Failed to parse expanded mailboxes:', e);
       }
     } else {
-      // By default, expand root folders that have children
       const tree = buildMailboxTree(mailboxes);
       const defaultExpanded = tree
         .filter(node => node.children.length > 0)
@@ -327,7 +346,6 @@ export function Sidebar({
     }
   }, [mailboxes]);
 
-  // Save expanded folders to localStorage when changed
   const handleToggleExpand = (mailboxId: string) => {
     setExpandedFolders((prev) => {
       const next = new Set(prev);
@@ -336,7 +354,9 @@ export function Sidebar({
       } else {
         next.add(mailboxId);
       }
-      localStorage.setItem('expandedMailboxes', JSON.stringify(Array.from(next)));
+      try {
+        localStorage.setItem('expandedMailboxes', JSON.stringify(Array.from(next)));
+      } catch { /* storage full or unavailable */ }
       return next;
     });
   };
@@ -348,15 +368,12 @@ export function Sidebar({
     }
   };
 
-  // Build hierarchical mailbox tree
   const mailboxTree = buildMailboxTree(mailboxes);
 
-  // Keyboard navigation
   useEffect(() => {
     const handleKeyDown = (e: KeyboardEvent) => {
       if (!selectedMailbox || isCollapsed) return;
 
-      // Find the selected node in the tree
       const findNode = (nodes: MailboxNode[]): MailboxNode | null => {
         for (const node of nodes) {
           if (node.id === selectedMailbox) return node;
@@ -369,14 +386,11 @@ export function Sidebar({
       const selectedNode = findNode(mailboxTree);
       if (!selectedNode) return;
 
-      // Handle arrow keys for expand/collapse
       if (e.key === 'ArrowRight' && selectedNode.children.length > 0) {
-        // Expand folder
         if (!expandedFolders.has(selectedMailbox)) {
           handleToggleExpand(selectedMailbox);
         }
       } else if (e.key === 'ArrowLeft' && selectedNode.children.length > 0) {
-        // Collapse folder
         if (expandedFolders.has(selectedMailbox)) {
           handleToggleExpand(selectedMailbox);
         }
@@ -399,7 +413,6 @@ export function Sidebar({
     >
       {/* Header */}
       <div className="flex items-center gap-2 px-4 py-3 border-b border-border">
-        {/* Mobile/Tablet: Close button */}
         <Button
           variant="ghost"
           size="icon"
@@ -410,7 +423,6 @@ export function Sidebar({
           <X className="w-5 h-5" />
         </Button>
 
-        {/* Desktop: Collapse toggle */}
         <Button
           variant="ghost"
           size="icon"
@@ -421,13 +433,16 @@ export function Sidebar({
         </Button>
 
         {!isCollapsed && (
-          <Button onClick={onCompose} className="flex-1">
+          <Button onClick={onCompose} className="flex-1" title={t("compose_hint")}>
             <PenSquare className="w-4 h-4 mr-2" />
             {t("compose")}
           </Button>
         )}
       </div>
 
+      {/* Vacation Banner */}
+      {!isCollapsed && <VacationBanner />}
+
       {/* Search + Advanced Filter Toggle */}
       {!isCollapsed && (
         <div className="px-4 py-3">
@@ -436,7 +451,7 @@ export function Sidebar({
               <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-muted-foreground" />
               <Input
                 type="text"
-                placeholder={t("search_placeholder")}
+                placeholder={t("search_placeholder_hint")}
                 value={searchQuery}
                 onChange={(e) => setSearchQuery(e.target.value)}
                 className={cn("pl-9", searchQuery && "pr-8")}
@@ -470,7 +485,6 @@ export function Sidebar({
             </div>
           ) : (
             <>
-              {/* Render hierarchical mailbox tree */}
               {mailboxTree.map((node) => (
                 <MailboxTreeItem
                   key={node.id}
@@ -487,131 +501,51 @@ export function Sidebar({
         </div>
       </div>
 
-      {/* Footer */}
-      {!isCollapsed && (
-        <>
-          {/* Sliding Menu Panel */}
-          <div className={cn(
-            "absolute bottom-0 left-0 right-0 bg-background border-t border-border z-10 shadow-lg",
-            "transform transition-all duration-300 ease-out",
-            showMenu ? "-translate-y-12" : "translate-y-full"
-          )}>
-            <div className="py-2">
-                {/* Storage Info */}
-                {quota && quota.total > 0 && (
-                  <div className="px-4 py-2">
-                    <div className="flex items-center justify-between text-xs">
-                      <span className="text-muted-foreground">{t("storage")}</span>
-                      <span className="text-foreground">
-                        {formatFileSize(quota.used)} / {formatFileSize(quota.total)}
-                      </span>
-                    </div>
-                    <div className="mt-1 w-full bg-muted rounded-full h-1">
-                      <div
-                        className="bg-primary h-1 rounded-full"
-                        style={{ width: `${Math.min((quota.used / quota.total) * 100, 100)}%` }}
-                      />
-                    </div>
-                  </div>
-                )}
+      {/* Footer: Storage Quota + Sign Out + Push Status */}
+      <div className="border-t border-border">
+        <StorageQuota quota={quota ?? null} isCollapsed={isCollapsed} />
 
-                <div className="border-t border-border mt-2 pt-2">
-                  {/* Contacts */}
-                  <button
-                    onClick={() => router.push('/contacts')}
-                    className="w-full px-4 py-2 flex items-center justify-between hover:bg-muted transition-colors text-sm"
-                  >
-                    <span className="flex items-center gap-2">
-                      <BookUser className="w-4 h-4" />
-                      {t("contacts")}
-                    </span>
-                    <ChevronRight className="w-4 h-4 text-muted-foreground" />
-                  </button>
-
-                  {/* Calendar */}
-                  {supportsCalendar && (
-                    <button
-                      onClick={() => router.push('/calendar')}
-                      className="w-full px-4 py-2 flex items-center justify-between hover:bg-muted transition-colors text-sm"
-                    >
-                      <span className="flex items-center gap-2">
-                        <Calendar className="w-4 h-4" />
-                        {t("calendar")}
-                      </span>
-                      <ChevronRight className="w-4 h-4 text-muted-foreground" />
-                    </button>
-                  )}
-
-                  {/* Settings */}
-                  <button
-                    onClick={() => router.push('/settings')}
-                    className="w-full px-4 py-2 flex items-center justify-between hover:bg-muted transition-colors text-sm"
-                  >
-                    <span className="flex items-center gap-2">
-                      <Settings className="w-4 h-4" />
-                      {t("settings")}
-                    </span>
-                    <ChevronRight className="w-4 h-4 text-muted-foreground" />
-                  </button>
-
-                  {/* Sign Out */}
-                  {onLogout && (
-                    <button
-                      onClick={onLogout}
-                      className="w-full px-4 py-2 flex items-center gap-2 hover:bg-muted transition-colors text-sm"
-                    >
-                      <LogOut className="w-4 h-4" />
-                      {t("sign_out")}
-                    </button>
-                  )}
-                </div>
-            </div>
-          </div>
-
-          {/* Menu Toggle Button */}
-          <div className="border-t border-border relative">
+        <div className={cn(
+          "flex items-center border-t border-border",
+          isCollapsed ? "justify-center py-2" : "justify-between px-3 py-2"
+        )}>
+          {onLogout && (
             <button
-              onClick={() => setShowMenu(!showMenu)}
+              onClick={onLogout}
               className={cn(
-                "w-full px-4 py-3 flex items-center justify-between",
-                "hover:bg-muted transition-colors",
-                "text-sm text-foreground"
+                "flex items-center gap-2 rounded-md transition-colors text-sm text-muted-foreground hover:text-foreground hover:bg-muted",
+                isCollapsed ? "p-2" : "px-2 py-1.5"
               )}
+              title={t("sign_out")}
             >
-              <span className="flex items-center gap-2">
-                <Menu className="w-4 h-4" />
-                Menu
-                <VacationIndicator />
-                {/* Push Connection Status Indicator */}
-                <span
-                  className="relative group"
-                  title={isPushConnected ? t("push_connected") : t("push_disconnected")}
-                >
-                  <span
-                    className={cn(
-                      "inline-block w-1.5 h-1.5 rounded-full transition-all duration-300",
-                      isPushConnected ? "bg-green-500" : "bg-muted-foreground/40"
-                    )}
-                  />
-                  {/* Tooltip on hover */}
-                  <span className={cn(
-                    "absolute bottom-full left-1/2 -translate-x-1/2 mb-2 px-2 py-1",
-                    "bg-popover text-popover-foreground text-xs rounded shadow-lg",
-                    "whitespace-nowrap opacity-0 group-hover:opacity-100",
-                    "pointer-events-none transition-opacity duration-200 z-50"
-                  )}>
-                    {isPushConnected ? t("push_connected") : t("push_disconnected")}
-                  </span>
-                </span>
-              </span>
-              <ChevronUp className={cn(
-                "w-4 h-4 transition-transform duration-200",
-                showMenu ? "" : "rotate-180"
-              )} />
+              <LogOut className="w-4 h-4" />
+              {!isCollapsed && t("sign_out")}
             </button>
-          </div>
-        </>
-      )}
+          )}
+
+          {!isCollapsed && (
+            <span
+              className="relative group"
+              title={isPushConnected ? t("push_connected") : t("push_disconnected")}
+            >
+              <span
+                className={cn(
+                  "inline-block w-1.5 h-1.5 rounded-full transition-all duration-300",
+                  isPushConnected ? "bg-green-500" : "bg-muted-foreground/40"
+                )}
+              />
+              <span className={cn(
+                "absolute bottom-full left-1/2 -translate-x-1/2 mb-2 px-2 py-1",
+                "bg-popover text-popover-foreground text-xs rounded shadow-lg",
+                "whitespace-nowrap opacity-0 group-hover:opacity-100",
+                "pointer-events-none transition-opacity duration-200 z-50"
+              )}>
+                {isPushConnected ? t("push_connected") : t("push_disconnected")}
+              </span>
+            </span>
+          )}
+        </div>
+      </div>
     </div>
   );
-}
+}

components/settings/vacation-settings.tsx

@@ -62,7 +62,9 @@ export function VacationSettings() {
       warnings.push(t('warnings.end_before_start'));
     }
 
-    if (localFromDate && new Date(localFromDate) < new Date()) {
+    const todayStart = new Date();
+    todayStart.setHours(0, 0, 0, 0);
+    if (localFromDate && new Date(localFromDate) < todayStart) {
       warnings.push(t('warnings.start_in_past'));
     }
 

components/ui/confirm-dialog.tsx

@@ -0,0 +1,115 @@
+"use client";
+
+import { useEffect, useId } from "react";
+import { useFocusTrap } from "@/hooks/use-focus-trap";
+import { useTranslations } from "next-intl";
+import { Button } from "@/components/ui/button";
+import { AlertTriangle } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+interface ConfirmDialogProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onConfirm: () => void;
+  title: string;
+  message: string;
+  confirmText?: string;
+  cancelText?: string;
+  variant?: "default" | "destructive";
+}
+
+export function ConfirmDialog({
+  isOpen,
+  onClose,
+  onConfirm,
+  title,
+  message,
+  confirmText,
+  cancelText,
+  variant = "default",
+}: ConfirmDialogProps) {
+  const t = useTranslations("confirm_dialog");
+  const id = useId();
+
+  const dialogRef = useFocusTrap({
+    isActive: isOpen,
+    onEscape: onClose,
+    restoreFocus: true,
+  });
+
+  useEffect(() => {
+    if (!isOpen) return;
+
+    const handleBackdropClick = (e: MouseEvent) => {
+      if (dialogRef.current && !dialogRef.current.contains(e.target as Node)) {
+        onClose();
+      }
+    };
+
+    document.addEventListener("mousedown", handleBackdropClick);
+    return () => document.removeEventListener("mousedown", handleBackdropClick);
+  }, [isOpen, onClose, dialogRef]);
+
+  if (!isOpen) return null;
+
+  const resolvedConfirmText = confirmText || t("confirm");
+  const resolvedCancelText = cancelText || t("cancel");
+
+  return (
+    <div className="fixed inset-0 bg-black/50 backdrop-blur-[2px] flex items-center justify-center z-[60] p-4 animate-in fade-in duration-150">
+      <div
+        ref={dialogRef}
+        role="alertdialog"
+        aria-modal="true"
+        aria-labelledby={`${id}-title`}
+        aria-describedby={`${id}-message`}
+        className="bg-background border border-border rounded-lg shadow-xl w-full max-w-md animate-in zoom-in-95 duration-200"
+      >
+        <div className="p-6">
+          <div className="flex items-start gap-4">
+            {variant === "destructive" && (
+              <div className="flex-shrink-0 w-10 h-10 rounded-full bg-destructive/10 flex items-center justify-center">
+                <AlertTriangle className="w-5 h-5 text-destructive" />
+              </div>
+            )}
+            <div className="flex-1 min-w-0">
+              <h2
+                id={`${id}-title`}
+                className="text-lg font-semibold text-foreground"
+              >
+                {title}
+              </h2>
+              <p
+                id={`${id}-message`}
+                className="mt-2 text-sm text-muted-foreground"
+              >
+                {message}
+              </p>
+            </div>
+          </div>
+        </div>
+
+        <div className="flex items-center justify-end gap-3 px-6 pb-6">
+          <Button variant="outline" onClick={onClose}>
+            {resolvedCancelText}
+          </Button>
+          <Button
+            variant={variant === "destructive" ? "destructive" : "default"}
+            onClick={() => {
+              try {
+                onConfirm();
+              } finally {
+                onClose();
+              }
+            }}
+            className={cn(
+              variant === "destructive" && "shadow-sm"
+            )}
+          >
+            {resolvedConfirmText}
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}

components/ui/toast.tsx

@@ -6,6 +6,11 @@ import { cn } from "@/lib/utils";
 
 export type ToastType = "success" | "error" | "info" | "warning";
 
+export interface ToastAction {
+  label: string;
+  onClick: () => void;
+}
+
 export interface Toast {
   id: string;
   type: ToastType;
@@ -14,6 +19,7 @@ export interface Toast {
   duration?: number;
   onClick?: () => void;
   icon?: React.ReactNode;
+  action?: ToastAction;
 }
 
 interface ToastProps {
@@ -52,41 +58,63 @@ export function ToastItem({ toast, onClose }: ToastProps) {
       className={cn(
         "flex items-start gap-3 p-4 rounded-lg border shadow-lg bg-background animate-slide-in",
         styles[toast.type],
-        toast.onClick && "cursor-pointer hover:opacity-90 transition-opacity"
+        toast.onClick && !toast.action && "cursor-pointer hover:opacity-90 transition-opacity"
       )}
       onClick={() => {
-        if (toast.onClick) {
+        if (toast.onClick && !toast.action) {
           toast.onClick();
           onClose(toast.id);
         }
       }}
     >
       {toast.icon !== undefined ? toast.icon : <Icon className="w-5 h-5 flex-shrink-0 mt-0.5" />}
-      <div className="flex-1">
+      <div className="flex-1 min-w-0">
         <h4 className="font-medium">{toast.title}</h4>
         {toast.message && (
           <p className="text-sm mt-1 opacity-90">{toast.message}</p>
         )}
       </div>
-      <button
-        onClick={(e) => {
-          e.stopPropagation();
-          onClose(toast.id);
-        }}
-        className="text-muted-foreground hover:text-foreground transition-colors"
-      >
-        <X className="w-4 h-4" />
-      </button>
+      <div className="flex items-center gap-2 flex-shrink-0">
+        {toast.action && (
+          <button
+            onClick={(e) => {
+              e.stopPropagation();
+              try {
+                toast.action!.onClick();
+                onClose(toast.id);
+              } catch {
+                // Don't close toast on error so user can retry
+              }
+            }}
+            className="text-sm font-medium underline underline-offset-2 hover:opacity-80 transition-opacity whitespace-nowrap"
+          >
+            {toast.action.label}
+          </button>
+        )}
+        <button
+          onClick={(e) => {
+            e.stopPropagation();
+            onClose(toast.id);
+          }}
+          className="text-muted-foreground hover:text-foreground transition-colors"
+        >
+          <X className="w-4 h-4" />
+        </button>
+      </div>
     </div>
   );
 }
 
 export function ToastContainer({ toasts, onClose }: { toasts: Toast[]; onClose: (id: string) => void }) {
   return (
-    <div className="fixed bottom-4 right-4 z-50 space-y-2 max-w-sm">
+    <div
+      className="fixed bottom-4 right-4 z-50 space-y-2 max-w-sm"
+      role="status"
+      aria-live="polite"
+    >
       {toasts.map((toast) => (
         <ToastItem key={toast.id} toast={toast} onClose={onClose} />
       ))}
     </div>
   );
-}
+}

components/ui/welcome-banner.tsx

@@ -0,0 +1,91 @@
+"use client";
+
+import { useState, useEffect, useCallback } from "react";
+import { useTranslations } from "next-intl";
+import { X, Lightbulb } from "lucide-react";
+import { Button } from "@/components/ui/button";
+
+const ONBOARDING_KEY = "onboarding_completed";
+
+export function WelcomeBanner() {
+  const t = useTranslations("welcome");
+  const [visible, setVisible] = useState(false);
+  const [dismissed, setDismissed] = useState(false);
+
+  useEffect(() => {
+    try {
+      if (!localStorage.getItem(ONBOARDING_KEY)) {
+        setVisible(true);
+      }
+    } catch { /* localStorage unavailable */ }
+  }, []);
+
+  const dismiss = useCallback(() => {
+    setDismissed(true);
+    try {
+      localStorage.setItem(ONBOARDING_KEY, "true");
+    } catch { /* localStorage unavailable */ }
+  }, []);
+
+  useEffect(() => {
+    if (!visible) return;
+    const handle = (e: KeyboardEvent) => {
+      if (e.key === "Escape") dismiss();
+    };
+    window.addEventListener("keydown", handle);
+    return () => window.removeEventListener("keydown", handle);
+  }, [visible, dismiss]);
+
+  if (!visible) return null;
+
+  return (
+    <div
+      role="complementary"
+      aria-label={t("title")}
+      className={`mx-4 mt-3 mb-1 rounded-lg border border-border bg-background shadow-sm transition-all duration-300 ease-out ${
+        dismissed ? "opacity-0 scale-95 pointer-events-none" : "opacity-100 scale-100"
+      }`}
+      onTransitionEnd={() => {
+        if (dismissed) setVisible(false);
+      }}
+    >
+      <div className="p-4">
+        <div className="flex items-start justify-between gap-3">
+          <div className="flex items-start gap-3">
+            <div className="flex-shrink-0 mt-0.5 p-1.5 rounded-md bg-primary/10">
+              <Lightbulb className="w-4 h-4 text-primary" />
+            </div>
+            <div className="space-y-2">
+              <h3 className="text-sm font-medium text-foreground">
+                {t("title")}
+              </h3>
+              <ul className="space-y-1.5 text-sm text-muted-foreground">
+                <li>{t("tip_compose")}</li>
+                <li>{t("tip_shortcuts")}</li>
+                <li>{t("tip_sidebar")}</li>
+                <li>{t("tip_settings")}</li>
+              </ul>
+            </div>
+          </div>
+          <button
+            onClick={dismiss}
+            className="flex-shrink-0 p-1 rounded hover:bg-muted transition-colors"
+            aria-label={t("dismiss")}
+          >
+            <X className="w-4 h-4 text-muted-foreground" />
+          </button>
+        </div>
+        <div className="mt-3 flex justify-end">
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={dismiss}
+            className="text-xs"
+          >
+            {t("got_it")}
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}