feat: expand internationalization and add identity management

This release significantly expands internationalization support and adds comprehensive identity management features.

Internationalization (i18n):
- Add 5 new languages: Spanish, Italian, German, Dutch, Portuguese
- Expand from 3 to 8 total supported languages
- Redesign language switcher for better scalability (dropdown UI)
- Complete translations for all features across all languages

Identity Management:
- Multiple sender identities with per-identity signatures
- Sub-addressing support (user+tag@domain.com)
- Context-aware tag suggestions for sub-addresses
- Identity badges in email viewer and list
- Full CRUD operations for managing identities

Newsletter Management:
- RFC 2369 List-Unsubscribe support (one-click unsubscribe)
- HTTP and mailto unsubscribe methods
- Security validation prevents XSS attacks
- Two-step confirmation with persistent dismissal

Security & Accessibility:
- Dark mode email readability (intelligent color transformation)
- WCAG 2.0 Level AA color contrast compliance
- Comprehensive XSS prevention with validation utilities
- Unit test coverage for security-critical code (57 validation tests)

Testing:
- Add unit tests for validation utilities
- Add unit tests for email sanitization
- Add unit tests for color transformation
- Full test coverage for XSS attack vectors

components/layout/mobile-header.tsx

@@ -4,6 +4,7 @@ import { Menu, ArrowLeft, Plus, Search, X } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { useUIStore } from "@/stores/ui-store";
 import { cn } from "@/lib/utils";
+import { useTranslations } from "next-intl";
 
 interface MobileHeaderProps {
   title: string;
@@ -22,6 +23,7 @@ export function MobileHeader({
   onSearch,
   className,
 }: MobileHeaderProps) {
+  const t = useTranslations('sidebar');
   const { toggleSidebar, goBack, sidebarOpen } = useUIStore();
 
   const handleLeftAction = () => {
@@ -72,7 +74,7 @@ export function MobileHeader({
             size="icon"
             onClick={onSearch}
             className="h-10 w-10"
-            aria-label="Search"
+            aria-label={t('mobile.search')}
           >
             <Search className="h-5 w-5" />
           </Button>
@@ -83,7 +85,7 @@ export function MobileHeader({
             size="icon"
             onClick={onCompose}
             className="h-10 w-10 text-primary"
-            aria-label="Compose"
+            aria-label={t('mobile.compose')}
           >
             <Plus className="h-5 w-5" />
           </Button>
@@ -111,6 +113,8 @@ export function MobileViewerHeader({
   onArchive: _onArchive,
   className,
 }: MobileViewerHeaderProps) {
+  const t = useTranslations('sidebar');
+
   return (
     <header
       className={cn(
@@ -124,7 +128,7 @@ export function MobileViewerHeader({
         size="icon"
         onClick={onBack}
         className="h-10 w-10"
-        aria-label="Go back"
+        aria-label={t('mobile.go_back')}
       >
         <ArrowLeft className="h-5 w-5" />
       </Button>