feat: inline search filters, folder icon picker, richer demo data & UI polish

- Replace advanced search panel with inline filter chips and collapsible fields
  (from/to/subject/body inputs, folder dropdown, attachment/flagged/read toggles)
- Add debounced auto-search on filter field changes
- Folder settings: add icon picker for custom per-folder icons, toast feedback,
  reorder sections (folder list first, roles second), empty-state illustration
- Avatar: show sender favicon for company domains, randomuser.me portraits for
  personal emails, custom avatars for demo senders, fallback to initials
- Add /api/favicon proxy route for fetching domain favicons
- Settings store: add senderFavicons toggle and folderIcons persistence
- Richer mock inbox with 11 realistic emails (GitHub, Slack, Stripe, Vercel, etc.)
- Navigation rail & sidebar cleanup, permanent-delete warning i18n (all 8 locales)
- Rename search toggle label to 'More', add body/folder filter translations

components/email/email-list-item.tsx

@@ -102,10 +102,7 @@ export function EmailListItem({ email, selected, onClick, onContextMenu }: Email
       onContextMenu={handleContextMenu}
       style={{ minHeight: 'var(--list-item-height)' }}
     >
-      <div className="flex items-start gap-3 px-4" style={{
-        paddingTop: 'calc((var(--list-item-height) - 40px) / 2)',
-        paddingBottom: 'calc((var(--list-item-height) - 40px) / 2)'
-      }}>
+      <div className="flex items-start gap-3 px-4 py-3">
         {/* Checkbox with smooth animation */}
         <button
           onClick={handleCheckboxClick}

components/email/email-list.tsx

@@ -4,7 +4,7 @@ import { Email, ThreadGroup } from "@/lib/jmap/types";
 import { ThreadListItem } from "./thread-list-item";
 import { EmailContextMenu } from "./email-context-menu";
 import { cn } from "@/lib/utils";
-import { Inbox, CheckSquare, Square, Trash2, Mail, MailOpen, Loader2 } from "lucide-react";
+import { Inbox, 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";
@@ -72,7 +72,6 @@ export function EmailList({
     loadMoreEmails,
     hasMoreEmails,
     isLoadingMore,
-    totalEmails,
     mailboxes,
     selectedMailbox,
     expandedThreadIds,
@@ -133,7 +132,6 @@ export function EmailList({
   );
 
   const hasSelection = selectedEmailIds.size > 0;
-  const allSelected = emails.length > 0 && emails.every(e => selectedEmailIds.has(e.id));
 
   const handleBatchMarkAsRead = async (read: boolean) => {
     if (!client || isProcessing) return;
@@ -300,36 +298,7 @@ export function EmailList({
         />
       )}
 
-      {/* List Header */}
-      <div className="px-4 py-3 border-b bg-muted/50 border-border flex items-center justify-between">
-        <div className="flex items-center gap-2">
-          <button
-            onClick={() => allSelected ? clearSelection() : selectAllEmails()}
-            className={cn(
-              "p-1 rounded transition-all duration-200",
-              "hover:bg-muted hover:scale-110",
-              "active:scale-95",
-              allSelected && "text-primary"
-            )}
-            title={allSelected ? "Deselect all" : "Select all"}
-          >
-            {allSelected ? (
-              <CheckSquare className="w-4 h-4 animate-in zoom-in-50 duration-200" />
-            ) : (
-              <Square className="w-4 h-4" />
-            )}
-          </button>
-          <h2 className="text-sm font-medium text-foreground">
-            {isLoading ? t('loading') : threadGroups.length > 0
-              ? (totalEmails !== undefined && totalEmails > threadGroups.length
-                  ? t('conversations_count', { count: threadGroups.length, total: totalEmails })
-                  : hasMoreEmails
-                    ? t('conversations_count_plus', { count: threadGroups.length })
-                    : t('conversations_count_simple', { count: threadGroups.length }))
-              : t('no_conversations')}
-          </h2>
-        </div>
-      </div>
+
 
       {/* Email List */}
       <div ref={parentRef} className="flex-1 overflow-y-auto bg-background relative">

components/email/thread-list-item.tsx

@@ -96,12 +96,7 @@ const SingleEmailItem = React.forwardRef<HTMLDivElement, SingleEmailItemProps>(
         onContextMenu={handleContextMenu}
         style={{ minHeight: 'var(--list-item-height)' }}
       >
-        <div className="flex items-start gap-3 px-4" style={{
-          paddingTop: 'calc((var(--list-item-height) - 40px) / 2)',
-          paddingBottom: 'calc((var(--list-item-height) - 40px) / 2)'
-        }}>
-          <div className="w-6 flex-shrink-0" />
-
+        <div className="flex items-start gap-3 px-3 py-3">
           {isUnread && (
             <div className="absolute left-1 top-1/2 -translate-y-1/2">
               <Circle className="w-2 h-2 fill-blue-600 text-blue-600 dark:fill-blue-400 dark:text-blue-400" />
@@ -275,10 +270,7 @@ export const ThreadListItem = React.forwardRef<HTMLDivElement, ThreadListItemPro
           onContextMenu={handleContextMenu}
           style={{ minHeight: 'var(--list-item-height)' }}
         >
-          <div className="flex items-start gap-3 px-4" style={{
-            paddingTop: 'calc((var(--list-item-height) - 40px) / 2)',
-            paddingBottom: 'calc((var(--list-item-height) - 40px) / 2)'
-          }}>
+          <div className="flex items-start gap-3 px-3 py-3">
             {!isMobile && (
               <button
                 data-expand-toggle