@remit/web-client 0.0.325 → 0.0.327

package/src/components/mail/MailListHeader.tsx

@@ -1,613 +0,0 @@
-/**
- * MailListHeader — the header-only list-pane shell shared by every list view.
- *
- * Composes the kit `MailHeader` (hamburger + title + unread + search) and the
- * `<section>` column shell with an optional pinned footer. It owns no filter
- * surface: the daily brief lets the kit `BriefSections` own the filter row,
- * while `MailViewChrome` slots a `FilterSheet` into the body for the inbox /
- * flagged views.
- *
- * Search comes from `MailContext` (one source of truth, mirrored to the URL).
- * On phone the magnifier opens a full-screen `MobileSearchView` takeover instead
- * of expanding over the title; tablet and desktop keep the inline header search
- * and, once a query is present, swap the list-pane body to the same kit
- * `SearchResults` sections. Consumers feed the filter chrome and query-narrowed
- * results; both tiers render identical rows.
- *
- * The field offers what the search API can be told: token names for a bare word,
- * that token's values once its name is committed. The list sits under the field
- * on both tiers, in flow, so it takes its own space instead of covering the
- * query it completes.
- *
- * An active query owns the pane. The filter chrome is not rendered while one is
- * present — the two narrow the same list by the same intent and would sit in the
- * same place — and its place is taken by `MakeFilterAction`, which the pane mounts
- * itself so it is there for every search on every view, whichever body is showing
- * the results.
- *
- * Results render as one section; an empty section drops out kit-side. The
- * hamburger opens the nav drawer via the enclosing `AppShellSlotted`.
- *
- * This is also the one place the route's scope reaches the results list, so both
- * tiers agree on it: a global search labels every row with the folder it came
- * from and offers the spam it held out, and a scoped search does neither. See
- * `resultsScopeForRoute` and `lib/spam-offer.ts`.
- */
-import {
-	Button,
-	type FilterSheetProps,
-	FilterToggle,
-	isConvertible,
-	MakeFilterAction,
-	MobileSearchView,
-	makeFilterBlockedCopy,
-	SearchBar,
-	type SearchCaretRequest,
-	type SearchFieldSuggest,
-	type SearchResult,
-	type SearchResultSection,
-	SearchResults,
-	type SearchScope,
-	type Suggestion,
-	SuggestList,
-	useAppShellLayout,
-	useSuggestList,
-} from "@remit/ui";
-import { Menu, Search, X } from "lucide-react";
-import {
-	createContext,
-	type ReactNode,
-	useCallback,
-	useContext,
-	useEffect,
-	useMemo,
-	useRef,
-	useState,
-} from "react";
-import { isSinglePaneTier, useLayoutTier } from "@/hooks/useLayoutTier";
-import { useSearchScope } from "@/hooks/useSearchScope";
-import { useSearchSuggestions } from "@/hooks/useSearchSuggestions";
-import { useSearchTokenContext } from "@/hooks/useSearchTokenContext";
-import {
-	type ListHeaderChrome,
-	ListHeaderChromeContext,
-} from "@/lib/list-header-chrome";
-import { useMailContext } from "@/lib/mail-context";
-import { convertSearchToRule } from "@/lib/organize/search-to-rule";
-import { loadRecentSearches, saveRecentSearch } from "@/lib/recent-searches";
-import { SearchConversionContext } from "@/lib/search-conversion";
-import { resultsScopeForRoute, routeMailboxId } from "@/lib/search-scope";
-import { applySearchSuggestion } from "@/lib/search-suggestions";
-import { showInlineSearchResults } from "@/lib/search-surface";
-import {
-	parseSearchTokens,
-	removeSearchToken,
-	searchTokenLabel,
-} from "@/lib/search-tokens";
-import type { SpamOffer } from "@/lib/spam-offer";
-import {
-	useBrowsedList,
-	useOpenWizard,
-	useScopeSearchToMailbox,
-} from "@/routing";
-
-export interface MailListHeaderProps {
-	title: string;
-	/**
-	 * Unread count beside the title. `null` is the one way to say the number is
-	 * not known, and the header then shows none: a count the server has not
-	 * answered is never replaced by a figure derived from the rows that happen to
-	 * be loaded (#308). Required so a caller that has no number says so.
-	 */
-	unreadCount: number | null;
-	/** The list body (filter sheet / sections / virtualized rows). */
-	children: ReactNode;
-	/**
-	 * The header itself, built from the chrome this component owns. Views whose
-	 * selection state sits above this one (the brief) render their bar here;
-	 * views whose selection sits below it (the mailbox list, starred) leave this
-	 * unset and render the bar in their own pane header slot, reading the same
-	 * chrome from `useListHeaderChrome`.
-	 */
-	selectionBar?: (chrome: ListHeaderChrome) => ReactNode;
-	/**
-	 * An overlay covering the pane, above the list (the selection wizard). Kept
-	 * out of the body and rendered on both the ordinary layout and the phone
-	 * search takeover, so a surface that covers the screen is not taken down by
-	 * whatever the body swapped to underneath it. Inside the chrome provider, so
-	 * an overlay a view mounts from above still reads the search state.
-	 */
-	paneOverlay?: ReactNode;
-	/** Pinned below the scrollable list (e.g. the keyboard hint bar). */
-	footer?: ReactNode;
-	/** Filter chrome for the phone search takeover. Omit to drop the filter row. */
-	searchFilter?: Omit<FilterSheetProps, "children">;
-	/** Literal/instant results — the "Top matches" section. */
-	searchResults?: SearchResult[];
-	searchLoading?: boolean;
-	onSelectSearchResult?: (result: SearchResult) => void;
-	/** The results section heading. */
-	searchResultsLabel?: string;
-	/**
-	 * The body renders the committed search itself as a selectable list — the
-	 * mailbox route's `MessageList` and the brief and Starred's own rows filter
-	 * to the search and host the multi-select toolbar and (on the mailbox route)
-	 * the "Select all N matching" escalation (#212). When set, a committed query
-	 * keeps the body on tablet/desktop instead of swapping in the read-only
-	 * `SearchResults` panel; the panel still shows while the query is
-	 * being typed (uncommitted). A view whose body is not a search-result list
-	 * leaves this unset and keeps the panel for every query.
-	 */
-	searchResultsInBody?: boolean;
-	/**
-	 * The Spam offer this view is making, if any: where "Go to Spam" lands and
-	 * how much of the search sits there, counted by the server over every junk
-	 * folder it reached. Only the global scope holds spam out, so only the brief
-	 * passes one; every other view leaves it unset and no offer is made.
-	 */
-	spamOffer?: SpamOffer;
-	/**
-	 * The refresh control for this view — the mailbox route and the brief pass
-	 * one, scoped to the account(s) they show; a view with nothing account-scoped
-	 * to refresh (Starred) leaves it unset.
-	 */
-	refreshControl?: ReactNode;
-}
-
-interface HeaderSearchState {
-	suggest: SearchFieldSuggest;
-	/** Drop the query and put the field away. */
-	onClose: () => void;
-}
-
-const HeaderSearchContext = createContext<HeaderSearchState | null>(null);
-
-/**
- * The expanded field, which subscribes to its own state instead of being handed
- * it (#506).
- *
- * What is typed, where the caret is and which suggestion is highlighted change
- * on every keystroke and belong to the field alone. Building the field into the
- * chrome object made each of those a new chrome, and the chrome reaches the
- * virtualized list through context, so the list re-rendered for a character it
- * does not show. The chrome carries the slot; the slot reads the rest itself.
- */
-function ListHeaderSearchField() {
-	const search = useContext(HeaderSearchContext);
-	const { searchInput, onSearchChange, onSearchClear } = useMailContext();
-	// Only `MailListHeader` puts this slot on the chrome, and it does so inside
-	// its own provider, so there is no reachable path here without one. Say so
-	// rather than rendering nothing: a search field that silently disappears is
-	// indistinguishable from a view that has no search.
-	if (!search)
-		throw new Error(
-			"ListHeaderSearchField rendered outside MailListHeader's HeaderSearchContext provider",
-		);
-	return (
-		<>
-			<div className="min-w-0 flex-1">
-				<SearchBar
-					value={searchInput}
-					onChange={onSearchChange}
-					onClear={onSearchClear}
-					globalFocusKey={false}
-					showClearButton={false}
-					suggest={search.suggest}
-				/>
-			</div>
-			<Button
-				variant="ghost"
-				size="touch"
-				icon={<X className="size-5" />}
-				onClick={search.onClose}
-				aria-label="Close search"
-				className="shrink-0"
-			/>
-			<FilterToggle />
-		</>
-	);
-}
-
-export function MailListHeader({
-	title,
-	unreadCount,
-	children,
-	selectionBar,
-	paneOverlay,
-	footer,
-	searchFilter,
-	searchResults,
-	searchLoading,
-	onSelectSearchResult,
-	searchResultsLabel = "Top matches",
-	searchResultsInBody = false,
-	spamOffer,
-	refreshControl,
-}: MailListHeaderProps) {
-	const {
-		accounts,
-		resultFolderIndex,
-		searchQuery,
-		searchInput,
-		onSearchChange,
-		onSearchClear,
-		searchViewKey,
-	} = useMailContext();
-	const tokenContext = useSearchTokenContext();
-	const scopeSearchToMailbox = useScopeSearchToMailbox();
-	const layout = useAppShellLayout();
-	const tier = useLayoutTier();
-	const [searchOpen, setSearchOpen] = useState(false);
-	const [recentSearches, setRecentSearches] = useState(loadRecentSearches);
-	const openWizard = useOpenWizard();
-
-	// Leaving the view ends the search: the shell drops the query, and the chrome
-	// it opened — the phone takeover, the expanded tablet field — closes with it
-	// rather than sitting there empty over the new mailbox (#47).
-	const searchViewRef = useRef(searchViewKey);
-	useEffect(() => {
-		if (searchViewRef.current === searchViewKey) return;
-		searchViewRef.current = searchViewKey;
-		setSearchOpen(false);
-	}, [searchViewKey]);
-
-	// What the box offers for the term being typed. The field says where the
-	// caret is; the caret decides whether the offer is a token name or one
-	// token's values, and picking one replaces that term and leaves the caret
-	// ready for the next. Typing always wins — the list only ever inserts, and a
-	// term it has nothing for leaves the field the plain text box it is.
-	//
-	// An empty field belongs to the recent searches and the filter row, as it
-	// does everywhere else in this pane, so the offer starts with the first
-	// character typed. The caret on the whitespace after a finished token is a
-	// term of its own, which is where the whole vocabulary is offered again.
-	const [caretPosition, setCaretPosition] = useState(0);
-	const [fieldFocused, setFieldFocused] = useState(false);
-	const [caretRequest, setCaretRequest] = useState<
-		SearchCaretRequest | undefined
-	>(undefined);
-	const suggestions = useSearchSuggestions({
-		query: searchInput,
-		cursor: caretPosition,
-		enabled: fieldFocused && searchInput.trim().length > 0,
-	});
-	const applySuggestion = useCallback(
-		(suggestion: Suggestion) => {
-			const applied = applySearchSuggestion(
-				searchInput,
-				caretPosition,
-				suggestion,
-			);
-			onSearchChange(applied.query);
-			setCaretRequest({ cursor: applied.cursor });
-		},
-		[searchInput, caretPosition, onSearchChange],
-	);
-	const suggest = useSuggestList({
-		count: suggestions.length,
-		onAccept: (index) => {
-			const suggestion = suggestions[index];
-			if (suggestion) applySuggestion(suggestion);
-		},
-	});
-	// Stable while nothing about the field changes: it reaches the field through
-	// its own context rather than the chrome, so moving the highlight repaints
-	// the field and leaves the list under it alone.
-	const { comboboxProps, handleKeyDown } = suggest;
-	const searchSuggest = useMemo<SearchFieldSuggest>(
-		() => ({
-			comboboxProps,
-			onKeyDown: handleKeyDown,
-			onCaretChange: setCaretPosition,
-			onFocusChange: setFieldFocused,
-			...(caretRequest ? { caret: caretRequest } : {}),
-		}),
-		[comboboxProps, handleKeyDown, caretRequest],
-	);
-	const closeSearch = useCallback(() => {
-		onSearchClear();
-		setSearchOpen(false);
-	}, [onSearchClear]);
-	const headerSearch = useMemo<HeaderSearchState>(
-		() => ({ suggest: searchSuggest, onClose: closeSearch }),
-		[searchSuggest, closeSearch],
-	);
-	// Under the field and in flow, on both tiers: a phone's soft keyboard owns
-	// the lower half of the screen, and a list floating over the field would
-	// cover the query it is completing.
-	const suggestList = suggest.open ? (
-		<SuggestList
-			id={suggest.listId}
-			suggestions={suggestions}
-			activeIndex={suggest.activeIndex}
-			optionId={suggest.optionId}
-			onPick={applySuggestion}
-			onHighlight={suggest.setActiveIndex}
-			label="Search suggestions"
-			className="mx-row-inset mt-1 shrink-0"
-		/>
-	) : null;
-
-	const hasQuery = searchInput.trim().length > 0;
-	// Filter tokens (`from:`, `has:attachment`, `account:`, …) parsed live from
-	// the typed query render as removable chips above the sections; removing one
-	// edits the query text directly, which re-parses on the next render. The
-	// parse runs through `useSearchTokenContext`, the same one the engines use,
-	// so a chip appears only for a term that is actually being applied — on a
-	// scoped view `in:` is not resolved and so is never chipped here.
-	// Memoized on the stable name indexes (not the fresh context object) so the
-	// filter dialog receives a stable parse and does not re-run its seed preview
-	// every render.
-	const { mailboxesByName, accountsByName } = tokenContext;
-	const parsed = useMemo(
-		() => parseSearchTokens(searchInput, { mailboxesByName, accountsByName }),
-		[searchInput, mailboxesByName, accountsByName],
-	);
-	const tokenChips = useMemo(
-		() =>
-			parsed.tokens.map((token) => ({
-				label: searchTokenLabel(token),
-				onRemove: () => onSearchChange(removeSearchToken(searchInput, token)),
-			})),
-		[parsed, searchInput, onSearchChange],
-	);
-	const topMatches = useMemo(() => searchResults ?? [], [searchResults]);
-	// Offer the section while a query is present; the kit drops it when empty and
-	// shows its empty state. The empty-query case (recent searches) is the kit's job.
-	const sections = useMemo<SearchResultSection[]>(
-		() =>
-			hasQuery
-				? [{ id: "top", label: searchResultsLabel, results: topMatches }]
-				: [],
-		[hasQuery, searchResultsLabel, topMatches],
-	);
-	// Skeleton only while nothing is in yet.
-	const resultsLoading = topMatches.length === 0 && searchLoading === true;
-
-	// The mailbox's appointed role is what lets a search scoped to Spam show its
-	// rows rather than drop them.
-	const { scope } = useSearchScope(accounts);
-	const browsed = useBrowsedList();
-	const scopedMailboxId = routeMailboxId(browsed);
-	const scopedRole = scopedMailboxId
-		? resultFolderIndex.get(scopedMailboxId)?.role
-		: undefined;
-	const routeScope = useMemo(
-		() => resultsScopeForRoute(browsed, scope, scopedRole),
-		[browsed, scope, scopedRole],
-	);
-
-	// The offer is made for the *committed* query, so that is the query it carries
-	// into Spam. Both halves come from the view that owns the search: the number
-	// is the server's count of every junk folder it reached, and the destination
-	// the folder holding most of them. Counting the rows this panel happens to
-	// hold would count a page and call it a folder (#313).
-	const offer = routeScope.kind === "global" ? spamOffer : undefined;
-	const resultsScope = useMemo<SearchScope>(
-		() =>
-			offer
-				? {
-						kind: "global",
-						spamCount: offer.count,
-						onScopeToSpam: () =>
-							scopeSearchToMailbox(offer.mailboxId, searchQuery),
-					}
-				: routeScope,
-		[offer, routeScope, scopeSearchToMailbox, searchQuery],
-	);
-
-	// Make-this-a-filter (#477 clause 1.8): the search is the wizard's second
-	// entry. It opens on the properties step with the clauses `convertSearchToRule`
-	// derives from the query, nothing ticked, and the notice for what the query
-	// could not be turned into. The conversion is computed once, here, and reaches
-	// the wizard through its own context — the reason the affordance gives and the
-	// clauses the wizard seeds from are the same answer, without the per-keystroke
-	// object riding on the chrome the list reads.
-	//
-	// It belongs to the search, not to any one way of showing it. The affordance
-	// therefore sits in the pane, above whichever body is up — the read-only
-	// results panel, or a list whose own rows narrow to the committed query — and
-	// is mounted on the same condition as the query itself. Rendering it inside
-	// the results panel made it a mailbox's flash: the panel shows while the query
-	// is being typed and hands back to `MessageList` the moment the query commits
-	// to the URL, taking the affordance down with it a few hundred milliseconds
-	// after it appeared. Mounting it here instead keeps it up through that
-	// hand-back on every view.
-	const conversion = useMemo(() => convertSearchToRule(parsed), [parsed]);
-	const searchConversion = hasQuery ? conversion : undefined;
-	// The wizard is a full-screen surface, so the phone takeover it was pressed
-	// from stands down rather than sitting under it — and the list underneath,
-	// which hosts the wizard, is mounted again by the time the step lands.
-	const openFilterWizard = useCallback(() => {
-		setSearchOpen(false);
-		openWizard("properties", "search");
-	}, [openWizard]);
-	// Keyed on the copy the affordance shows, not on the conversion it is derived
-	// from: the conversion is a fresh object for every character typed, while the
-	// reason it yields is the same string for all of them, and this row travels to
-	// the virtualized list on the chrome (#506).
-	const blockedReason = isConvertible(conversion)
-		? undefined
-		: makeFilterBlockedCopy(
-				conversion.droppedFacets.map((facet) => facet.label),
-			);
-	const makeFilter = useMemo(
-		() => (hasQuery ? { onClick: openFilterWizard, blockedReason } : undefined),
-		[hasQuery, blockedReason, openFilterWizard],
-	);
-	// Handed to the bar rather than rendered here: the bar knows whether rows
-	// are ticked, and a selection's own verbs own the surface while they are up.
-	const makeFilterAction = useMemo(
-		() => (makeFilter ? <MakeFilterAction {...makeFilter} /> : null),
-		[makeFilter],
-	);
-
-	// Tablet + desktop keep the inline toolbar search; while a query is being
-	// typed the list-pane body swaps to the same sectioned results the phone
-	// takeover shows, under the same FilterSheet. A view whose own body renders
-	// the committed search as a selectable list (`searchResultsInBody` — the
-	// mailbox route, the brief, Starred) keeps the panel only until the query
-	// commits to the URL, then hands back to its own rows so multi-select (and,
-	// on the mailbox route, the "Select all N matching" escalation) is reachable
-	// (#212). Clearing the query restores the normal list.
-	const showInlineResults = showInlineSearchResults({
-		tier,
-		hasLiveInput: hasQuery,
-		hasCommittedQuery: searchQuery.trim().length > 0,
-		bodyRendersCommittedResults: searchResultsInBody,
-	});
-	const handleSelectInlineResult = useCallback(
-		(result: SearchResult) => {
-			setRecentSearches(saveRecentSearch(searchInput));
-			onSelectSearchResult?.(result);
-		},
-		[searchInput, onSelectSearchResult],
-	);
-	const results = useMemo(
-		() => (
-			<SearchResults
-				value={searchInput}
-				sections={sections}
-				loading={resultsLoading}
-				onSelectResult={handleSelectInlineResult}
-				tokens={tokenChips}
-				scope={resultsScope}
-			/>
-		),
-		[
-			searchInput,
-			sections,
-			resultsLoading,
-			handleSelectInlineResult,
-			tokenChips,
-			resultsScope,
-		],
-	);
-	// The header lives inside `children` for every view whose selection sits
-	// below this one, so swapping the body out from here would take the header
-	// with it — the pane would lose its title, its search field mid-keystroke,
-	// and its selection bar. Those views get the panel through the chrome and
-	// put it where their own rows go; the brief, whose header this component
-	// renders, keeps the plain swap.
-	const bodyOwnsHeader = selectionBar === undefined;
-	const resultsPane = useMemo(
-		() =>
-			showInlineResults ? (
-				<div className="h-full overflow-y-auto">{results}</div>
-			) : null,
-		[showInlineResults, results],
-	);
-	const body = resultsPane && !bodyOwnsHeader ? resultsPane : children;
-	const chromeResults = resultsPane && bodyOwnsHeader ? resultsPane : null;
-
-	// Desktop mounts the app top bar, which owns search for the whole shell — the
-	// list header shows no field there, so the page never has two search inputs
-	// competing for "/" and for focus. Below desktop the header keeps a compact
-	// magnifier: on phone it opens the full-screen takeover above, on tablet it
-	// expands over the title. `isSinglePaneTier` is the same predicate the shell
-	// gates the top bar on, so the two cannot drift into zero or two fields.
-	const ownsSearch = isSinglePaneTier(tier);
-	const searchExpanded = ownsSearch && (searchOpen || hasQuery);
-	const chrome = useMemo<ListHeaderChrome>(
-		() => ({
-			title,
-			searchResults: chromeResults,
-			makeFilterSlot: makeFilterAction,
-			navSlot: layout && !layout.showNavPane && (
-				<Button
-					variant="ghost"
-					size="touch"
-					icon={<Menu className="size-5" />}
-					onClick={() => layout.openNav()}
-					aria-label="Menu"
-					className="-ml-2 shrink-0"
-				/>
-			),
-			titleMeta: (
-				<>
-					{unreadCount === null ? null : (
-						<span className="shrink-0 text-2xs text-fg-subtle">
-							{unreadCount.toLocaleString()} unread
-						</span>
-					)}
-					<FilterToggle />
-					{refreshControl}
-				</>
-			),
-			searchSlot: ownsSearch && !searchExpanded && (
-				<Button
-					variant="ghost"
-					size="touch"
-					icon={<Search className="size-5" />}
-					onClick={() => setSearchOpen(true)}
-					aria-label="Search"
-					className="shrink-0"
-				/>
-			),
-			searchField: searchExpanded && <ListHeaderSearchField />,
-		}),
-		[
-			title,
-			unreadCount,
-			layout,
-			ownsSearch,
-			searchExpanded,
-			chromeResults,
-			makeFilterAction,
-			refreshControl,
-		],
-	);
-
-	if (tier === "phone" && searchOpen) {
-		const handleSelectResult = (result: SearchResult) => {
-			setRecentSearches(saveRecentSearch(searchInput));
-			setSearchOpen(false);
-			onSelectSearchResult?.(result);
-		};
-		return (
-			<HeaderSearchContext.Provider value={headerSearch}>
-				<SearchConversionContext.Provider value={searchConversion}>
-					<ListHeaderChromeContext.Provider value={chrome}>
-						<MobileSearchView
-							value={searchInput}
-							onChange={onSearchChange}
-							onClear={onSearchClear}
-							onCancel={() => {
-								setSearchOpen(false);
-								onSearchClear();
-							}}
-							filter={searchFilter}
-							recentSearches={recentSearches}
-							onPickRecent={onSearchChange}
-							makeFilter={makeFilter}
-							sections={sections}
-							loading={resultsLoading}
-							onSelectResult={handleSelectResult}
-							tokens={tokenChips}
-							scope={resultsScope}
-							suggest={searchSuggest}
-							suggestList={suggestList}
-						/>
-						{paneOverlay}
-					</ListHeaderChromeContext.Provider>
-				</SearchConversionContext.Provider>
-			</HeaderSearchContext.Provider>
-		);
-	}
-
-	return (
-		<HeaderSearchContext.Provider value={headerSearch}>
-			<SearchConversionContext.Provider value={searchConversion}>
-				<ListHeaderChromeContext.Provider value={chrome}>
-					<section className="relative flex h-full w-full flex-col bg-surface">
-						{selectionBar?.(chrome)}
-						{suggestList}
-						<div className="min-h-0 flex-1">{body}</div>
-						{footer}
-						{paneOverlay}
-					</section>
-				</ListHeaderChromeContext.Provider>
-			</SearchConversionContext.Provider>
-		</HeaderSearchContext.Provider>
-	);
-}

package/src/components/mail/MailNav.tsx

@@ -1,70 +0,0 @@
-/**
- * MailNav — the nav slot for AppShellSlotted.
- *
- * Renders a single "Mailboxes" navigation landmark. The kit shows this
- * node either as a persistent pane (≥1024px) or inside its own slide-over
- * Dialog (narrow) — never both — so there is exactly one nav landmark at
- * any width. Below 1024px the slide-over also carries a Settings +
- * bug-report footer (#685), since the mobile layout has no message toolbar
- * to host them.
- */
-import type { RemitImapAccountResponse } from "@remit/api-http-client/types.gen.ts";
-import { AttentionDot, useAppShellLayout } from "@remit/ui";
-import { LogOut, Settings } from "lucide-react";
-import { AccountSession } from "@/auth/AccountSession";
-import { MailSidebarAdapter } from "@/components/mail/MailSidebarAdapter";
-import { BugReportButton } from "@/components/ui/BugReportButton";
-import { useWarningsAttention } from "@/hooks/useWarningsAttention";
-import { NavLink } from "@/routing";
-
-interface MailNavProps {
-	accounts: RemitImapAccountResponse[];
-	onMailboxSelect?: () => void;
-}
-
-export function MailNav({ accounts, onMailboxSelect }: MailNavProps) {
-	const layout = useAppShellLayout();
-	const isPane = layout?.showNavPane ?? true;
-	const settingsAttention = useWarningsAttention();
-
-	if (isPane) {
-		return <MailSidebarAdapter accounts={accounts} />;
-	}
-
-	return (
-		<div className="flex h-full flex-col">
-			<div className="flex-1 overflow-y-auto">
-				<MailSidebarAdapter
-					accounts={accounts}
-					onMailboxSelect={onMailboxSelect}
-					variant="drawer"
-				/>
-			</div>
-			<div className="border-t border-line px-2 py-2">
-				<NavLink to="/settings/accounts" onClick={onMailboxSelect}>
-					<AttentionDot label={settingsAttention}>
-						<Settings className="size-4 shrink-0" />
-					</AttentionDot>
-					<span className="flex-1 truncate text-left">Settings</span>
-				</NavLink>
-				<BugReportButton />
-				<AccountSession>
-					{({ signOut }) => (
-						<button
-							type="button"
-							onClick={() => {
-								onMailboxSelect?.();
-								signOut();
-							}}
-							className="flex min-h-11 w-full items-center gap-2 rounded-md px-2 py-1 text-sm text-fg-muted transition-colors hover:bg-surface hover:text-fg"
-							data-testid="sign-out-button"
-						>
-							<LogOut className="size-4 shrink-0" />
-							<span className="flex-1 truncate text-left">Sign out</span>
-						</button>
-					)}
-				</AccountSession>
-			</div>
-		</div>
-	);
-}