diff --git a/components/layout/mobile-header.tsx b/components/layout/mobile-header.tsx
index 6f01d4e8a..9c7006e02 100644
--- a/components/layout/mobile-header.tsx
+++ b/components/layout/mobile-header.tsx
@@ -6,6 +6,7 @@ import { useUIStore } from "@/stores/ui-store";
import { useIsDesktop } from "@/hooks/use-media-query";
import { cn } from "@/lib/utils";
import { useTranslations } from "next-intl";
+import { AccountSwitcher } from "@/components/layout/account-switcher";
interface MobileHeaderProps {
title: string;
@@ -16,6 +17,18 @@ interface MobileHeaderProps {
className?: string;
/** Id of the sidebar this header's menu button toggles. */
sidebarId?: string;
+ /**
+ * When set, the mailbox title is replaced by a tappable search field and
+ * this fires instead. The folder name stays visible in the drawer, so the
+ * bar spends its width on the thing you act on rather than a label.
+ */
+ onOpenSearch?: () => void;
+ /** Placeholder shown inside the search field. */
+ searchPlaceholder?: string;
+ /** Clears the active query without opening the search panel. */
+ onClearSearch?: () => void;
+ /** Whether a query is currently applied, which reveals the clear button. */
+ searchActive?: boolean;
}
export function MobileHeader({
@@ -26,6 +39,10 @@ export function MobileHeader({
onSearch,
className,
sidebarId,
+ onOpenSearch,
+ searchPlaceholder,
+ onClearSearch,
+ searchActive = false,
}: MobileHeaderProps) {
const t = useTranslations('sidebar');
const { toggleSidebar, goBack, sidebarOpen } = useUIStore();
@@ -54,7 +71,7 @@ export function MobileHeader({
)}
>
{/* Left action: Menu or Back button */}
-
+
+ {onOpenSearch && (
+ /* Not a single button: the clear control is a button of its own, and
+ nesting one inside another is invalid markup. */
+
+
+ {searchActive && onClearSearch && (
+
+ )}
+
+ )}
+
{/* Right actions */}
-
+
{onSearch && (
)}
+
+ {/* Which account you are reading is otherwise only visible after
+ opening the drawer. Last in this group so it sits on the far
+ edge — opposite the menu button, and mirrored under RTL because
+ the header is laid out with flex rather than fixed sides. */}
+
);
diff --git a/components/mail/mail-app.tsx b/components/mail/mail-app.tsx
index 32e44bdaf..8310c50bc 100644
--- a/components/mail/mail-app.tsx
+++ b/components/mail/mail-app.tsx
@@ -88,7 +88,7 @@ import { EML_IMPORT_ACCEPT, expandImportableEmails } from "@/lib/eml-import";
import { findDraftIdentityId, resolveComposeAccountEmail, resolveReplyFrom, type ReplyFromResolution } from "@/lib/reply-identity";
import { buildReplyRecipients, isSelfSent } from "@/lib/reply-recipients";
import { useProMultiAccountIdentities } from "@/hooks/use-pro-multi-account-identities";
-import { Filter, ChevronDown, X, Paperclip, Star, Mail, MailOpen, RotateCcw, PenSquare, PenLine, CheckSquare, Square, AlertTriangle } from "lucide-react";
+import { Filter, ChevronDown, X, Paperclip, Star, Mail, MailOpen, RotateCcw, PenSquare, PenLine, CheckSquare, Square, AlertTriangle, ArrowLeft } from "lucide-react";
import { ResizeHandle } from "@/components/layout/resize-handle";
import { Button } from "@/components/ui/button";
import { useConfig } from "@/hooks/use-config";
@@ -131,6 +131,9 @@ export function MailApp({ linkSegments }: MailAppProps = {}) {
const tQuote = useTranslations('quote_header');
const { appName } = useConfig();
const mailLayout = useSettingsStore((state) => state.mailLayout);
+ // Phones present search full-screen from the header field rather than
+ // giving it a permanent second bar under the header.
+ const [mobileSearchOpen, setMobileSearchOpen] = useState(false);
const [showComposer, setShowComposer] = useState(false);
const [composerMode, setComposerMode] = useState<'compose' | 'reply' | 'replyAll' | 'forward'>('compose');
const [composerDraftText, setComposerDraftText] = useState("");
@@ -3594,10 +3597,36 @@ export function MailApp({ linkSegments }: MailAppProps = {}) {
setMobileSearchOpen(true) : undefined}
+ searchPlaceholder={searchQuery || t('sidebar.search_placeholder_hint')}
+ searchActive={!!searchQuery}
+ onClearSearch={handleClearSearch}
/>
- {/* Search Bar + Inline Advanced Filters */}
-
+ {/* Search Bar + Inline Advanced Filters. On phones this is not a
+ permanent second bar: the header carries a search field, and
+ tapping it presents this panel full-screen. Select-all and
+ refresh stay reachable there too, and long-press / pull-to-
+ refresh already cover them on the list itself. */}
+ {(!isMobile || mobileSearchOpen) && (
+