@remit/web-client 0.0.1

package/src/components/mail/DraftsView.tsx

@@ -0,0 +1,279 @@
+/**
+ * DraftsView — segmented Drafts folder view.
+ *
+ * Renders two labeled sections when the open mailbox is an account's IMAP
+ * \Drafts special-use folder (issue #505):
+ *
+ *   1. "Not yet sent (Remit)" — outbox rows with status === "draft" belonging
+ *      to the account that owns the open \Drafts mailbox. Clicking a row opens
+ *      compose pre-filled via openCompose({ mode: "new", outboxMessageId }).
+ *
+ *   2. "On the server" — IMAP \Drafts thread rows already loaded for the
+ *      mailbox. Clicking a row opens the normal reading pane (read-only;
+ *      editing IMAP drafts in compose is a known follow-up gap).
+ *
+ * Reuses the remit-ui ThreadSection / sectioned-list machinery that the Daily
+ * Brief also uses — sticky section headers, ComfortableRow / CompactRow with
+ * density. No new sectioned-list code is introduced here.
+ *
+ * Dedup note: Remit draft rows and IMAP \Drafts messages have no shared key
+ * today (no IMAP APPEND-as-draft path exists). Both sections render without
+ * client-side dedup; if appending Remit drafts into IMAP \Drafts ships in the
+ * future the dedup key would be the RFC822 Message-ID header (issue #505).
+ */
+import {
+	outboxDetailOperationsDeleteOutboxMessageMutation,
+	outboxOperationsListOutboxMessagesOptions,
+	outboxOperationsListOutboxMessagesQueryKey,
+} from "@remit/api-http-client/@tanstack/react-query.gen.ts";
+import type { RemitImapThreadMessageResponse } from "@remit/api-http-client/types.gen.ts";
+import {
+	Avatar,
+	ComfortableRowTextContent,
+	cn,
+	comfortableRowClass,
+	type ThreadRowData,
+	type ThreadSection,
+} from "@remit/ui";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { useNavigate } from "@tanstack/react-router";
+import { FileText, Inbox, Trash2 } from "lucide-react";
+import { useMemo } from "react";
+import { useCompose } from "@/components/compose/ComposeProvider";
+import { groupDraftSections } from "@/lib/drafts";
+import { NavMenuButton } from "./NavMenuButton";
+
+// ---------------------------------------------------------------------------
+// Section header (mirrors DailyBrief SectionHeader)
+// ---------------------------------------------------------------------------
+
+const SectionHeader = ({ label, count }: { label: string; count: number }) => (
+	<div className="sticky top-0 z-10 flex items-baseline justify-between border-b border-line bg-surface-sunken px-row-inset py-1">
+		<span className="text-2xs font-semibold uppercase tracking-wider text-fg-subtle">
+			{label}
+		</span>
+		<span className="text-2xs text-fg-subtle tabular-nums">{count}</span>
+	</div>
+);
+
+// ---------------------------------------------------------------------------
+// Remit-draft row — opens compose for editing
+// ---------------------------------------------------------------------------
+
+interface RemitDraftRowProps {
+	row: ThreadRowData;
+	isSelected: boolean;
+	onOpen: (outboxMessageId: string) => void;
+	onDelete: (outboxMessageId: string) => void;
+	isDeleting: boolean;
+}
+
+const RemitDraftRow = ({
+	row,
+	isSelected,
+	onOpen,
+	onDelete,
+	isDeleting,
+}: RemitDraftRowProps) => (
+	<button
+		type="button"
+		onClick={() => onOpen(row.id)}
+		className={cn("group", comfortableRowClass({ active: isSelected }))}
+	>
+		<FileText className="size-7 shrink-0 text-fg-muted mt-0.5" />
+		<ComfortableRowTextContent thread={row} />
+		<div className="flex items-center gap-1 shrink-0">
+			<button
+				type="button"
+				onClick={(e) => {
+					e.stopPropagation();
+					onDelete(row.id);
+				}}
+				disabled={isDeleting}
+				className="p-1.5 rounded-md text-fg-muted hover:text-danger hover:bg-surface-raised transition-colors opacity-0 group-hover:opacity-100 focus:opacity-100"
+				title="Delete draft"
+			>
+				<Trash2 className="size-3.5" />
+			</button>
+		</div>
+	</button>
+);
+
+// ---------------------------------------------------------------------------
+// IMAP-draft row — opens reading pane (read-only)
+// ---------------------------------------------------------------------------
+
+interface ImapDraftRowProps {
+	row: ThreadRowData;
+	isSelected: boolean;
+	onOpen: (messageId: string) => void;
+}
+
+const ImapDraftRow = ({ row, isSelected, onOpen }: ImapDraftRowProps) => {
+	const unread = !row.isRead;
+	return (
+		<button
+			type="button"
+			onClick={() => onOpen(row.id)}
+			className={cn("group", comfortableRowClass({ active: isSelected }))}
+		>
+			{unread && (
+				<span className="absolute left-1.5 top-1/2 size-1.5 -translate-y-1/2 rounded-full bg-accent" />
+			)}
+			<Avatar name={row.fromName} email={row.fromEmail} size="sm" />
+			<ComfortableRowTextContent thread={row} />
+		</button>
+	);
+};
+
+// ---------------------------------------------------------------------------
+// Main component
+// ---------------------------------------------------------------------------
+
+interface DraftsViewProps {
+	/** The mailbox id for the \Drafts mailbox being viewed. */
+	mailboxId: string;
+	/** The accountId that owns this \Drafts mailbox. */
+	accountId: string;
+	/** The currently selected message id (reading pane). */
+	selectedMessageId?: string;
+	/** IMAP thread rows already loaded for the \Drafts mailbox. */
+	imapThreads: RemitImapThreadMessageResponse[];
+	/** Mailbox display name (e.g. "Drafts"). */
+	title: string;
+	/** Total unread count for the header. */
+	unreadCount?: number;
+}
+
+export function DraftsView({
+	mailboxId,
+	accountId,
+	selectedMessageId,
+	imapThreads,
+	title,
+	unreadCount,
+}: DraftsViewProps) {
+	const { openCompose, state: composeState } = useCompose();
+	const navigate = useNavigate();
+	const queryClient = useQueryClient();
+
+	// Fetch the full outbox list — both sources are already fetched by the
+	// client; this is a pure client-side composition (issue #505).
+	const { data: outboxResponse } = useQuery(
+		outboxOperationsListOutboxMessagesOptions(),
+	);
+
+	const sections = useMemo<ThreadSection[]>(() => {
+		return groupDraftSections({
+			outboxMessages: outboxResponse?.items ?? [],
+			accountId,
+			imapThreads,
+		});
+	}, [outboxResponse?.items, accountId, imapThreads]);
+
+	const deleteMutation = useMutation({
+		...outboxDetailOperationsDeleteOutboxMessageMutation(),
+		onSuccess: () => {
+			queryClient.invalidateQueries({
+				queryKey: outboxOperationsListOutboxMessagesQueryKey(),
+			});
+		},
+	});
+
+	const handleRemitDraftDelete = (outboxMessageId: string) => {
+		deleteMutation.mutate({ path: { outboxMessageId } });
+	};
+
+	const handleRemitDraftOpen = (outboxMessageId: string) => {
+		// Clear any open IMAP draft first. The route's detailPane only renders
+		// FullCompose when `composeState.isOpen && !selectedThread`; if an IMAP
+		// draft is open (selectedMessageId set) the reading pane would keep
+		// showing ConversationView and compose would never surface (#505).
+		if (selectedMessageId) {
+			navigate({
+				to: "/mail/$mailboxId",
+				params: { mailboxId },
+				search: { selectedMessageId: undefined },
+			});
+		}
+		openCompose({ mode: "new", outboxMessageId });
+	};
+
+	const handleImapDraftOpen = (messageId: string) => {
+		navigate({
+			to: "/mail/$mailboxId",
+			params: { mailboxId },
+			search: { selectedMessageId: messageId },
+		});
+	};
+
+	const isEmpty = sections.length === 0;
+
+	return (
+		<section className="flex h-full w-full flex-col bg-surface">
+			{/* List datum bar */}
+			<header className="flex h-pane-header shrink-0 items-center gap-2 border-b border-line px-row-inset">
+				<NavMenuButton />
+				<h1 className="min-w-0 flex-1 truncate text-sm font-semibold text-fg">
+					{title}
+				</h1>
+				{(unreadCount ?? 0) > 0 && (
+					<span className="shrink-0 text-2xs text-fg-subtle tabular-nums">
+						{unreadCount} unread
+					</span>
+				)}
+			</header>
+
+			{/* Scrollable body */}
+			<div className="flex-1 overflow-y-auto">
+				{isEmpty ? (
+					<div className="flex flex-col items-center justify-center h-full gap-2 text-center px-4">
+						<Inbox className="size-8 text-fg-subtle" />
+						<p className="text-sm font-medium text-fg">No drafts</p>
+						<p className="text-xs text-fg-subtle">
+							Messages you start composing will appear here.
+						</p>
+					</div>
+				) : (
+					sections.map((section) => (
+						<div key={section.id}>
+							{section.label && (
+								<SectionHeader
+									label={section.label}
+									count={section.threads.length}
+								/>
+							)}
+							<div className="divide-y divide-line">
+								{section.threads.map((thread) => {
+									if (section.id === "remit-drafts") {
+										return (
+											<RemitDraftRow
+												key={thread.id}
+												row={thread}
+												isSelected={
+													composeState.isOpen &&
+													thread.id === composeState.outboxMessageId
+												}
+												onOpen={handleRemitDraftOpen}
+												onDelete={handleRemitDraftDelete}
+												isDeleting={deleteMutation.isPending}
+											/>
+										);
+									}
+									return (
+										<ImapDraftRow
+											key={thread.id}
+											row={thread}
+											isSelected={thread.id === selectedMessageId}
+											onOpen={handleImapDraftOpen}
+										/>
+									);
+								})}
+							</div>
+						</div>
+					))
+				)}
+			</div>
+		</section>
+	);
+}

package/src/components/mail/FlaggedList.tsx

@@ -0,0 +1,170 @@
+/**
+ * FlaggedList — a FLAT, cross-account inbox of starred mail.
+ *
+ * Reads the same unified GET /threads source as the daily brief, keeps only
+ * starred rows (`toThreadRowData(...).starred`), and renders them as one
+ * continuous list (no category sections). The shared `MailViewChrome` owns the
+ * `MailHeader` + filter expando; the kit `MessageListPane` (flat, no
+ * `briefFilters`) owns the loading / empty / error chrome and keyboard hints,
+ * with a consumer-supplied `listBody` so the real rows render at every width.
+ */
+import { unifiedThreadOperationsListAllThreadsOptions } from "@remit/api-http-client/@tanstack/react-query.gen.ts";
+import {
+	ComfortableRow,
+	flaggedFilterConfig,
+	MessageListPane,
+	type ThreadRowData,
+} from "@remit/ui";
+import { useQuery } from "@tanstack/react-query";
+import { useCallback, useMemo, useState } from "react";
+import { formatErrorMessage } from "@/components/ui/ErrorState";
+import { useIsDesktop } from "@/hooks/useMediaQuery";
+import {
+	matchesBriefSearch,
+	matchesSearchTokens,
+	toThreadRowData,
+} from "@/lib/brief";
+import { buildBugReportContext, buildGitHubIssueUrl } from "@/lib/bug-report";
+import { useMailContext } from "@/lib/mail-context";
+import { rowToSearchResult } from "@/lib/search-result";
+import { parseSearchTokens } from "@/lib/search-tokens";
+import { MailViewChrome } from "./MailViewChrome";
+
+const FILTER_PREDICATES: Record<string, (t: ThreadRowData) => boolean> = {
+	unread: (t) => !t.isRead,
+	attachment: (t) => t.hasAttachment === true,
+};
+
+interface FlaggedListProps {
+	selectedMessageId?: string;
+	onSelectMessage?: (id: string) => void;
+}
+
+export function FlaggedList({
+	selectedMessageId,
+	onSelectMessage,
+}: FlaggedListProps) {
+	const { searchQuery, mailboxNameIndex, accountNameIndex } = useMailContext();
+	const isDesktop = useIsDesktop();
+
+	const [selectedCategory, setSelectedCategory] = useState("all");
+	const [activeFilters, setActiveFilters] = useState<ReadonlySet<string>>(
+		new Set(),
+	);
+
+	const toggleFilter = useCallback((id: string) => {
+		setActiveFilters((prev) => {
+			const next = new Set(prev);
+			if (next.has(id)) next.delete(id);
+			else next.add(id);
+			return next;
+		});
+	}, []);
+
+	const clearFilters = useCallback(() => {
+		setSelectedCategory("all");
+		setActiveFilters(new Set());
+	}, []);
+
+	const {
+		data: threadsData,
+		isLoading,
+		isError,
+		error,
+		refetch,
+	} = useQuery({
+		...unifiedThreadOperationsListAllThreadsOptions(),
+		staleTime: 60_000,
+	});
+
+	const { freeText: sq, tokens: queryTokens } = parseSearchTokens(
+		searchQuery.trim().toLowerCase(),
+		{ mailboxesByName: mailboxNameIndex, accountsByName: accountNameIndex },
+	);
+
+	const rows = useMemo<ThreadRowData[]>(() => {
+		const predicates = Array.from(activeFilters)
+			.map((id) => FILTER_PREDICATES[id])
+			.filter((p): p is (t: ThreadRowData) => boolean => p != null);
+		return (threadsData?.items ?? [])
+			.map(toThreadRowData)
+			.filter((t) => t.starred === true)
+			.filter(
+				(t) =>
+					(selectedCategory === "all" || t.category === selectedCategory) &&
+					predicates.every((p) => p(t)) &&
+					(!sq || matchesBriefSearch(t, sq)) &&
+					matchesSearchTokens(t, queryTokens),
+			);
+	}, [threadsData, selectedCategory, activeFilters, sq, queryTokens]);
+
+	const preset = useMemo(() => flaggedFilterConfig(), []);
+
+	const searchResults = useMemo(() => rows.map(rowToSearchResult), [rows]);
+
+	const unreadCount = useMemo(
+		() => rows.filter((t) => !t.isRead).length,
+		[rows],
+	);
+
+	const listState = isLoading
+		? "loading"
+		: isError
+			? "error"
+			: rows.length === 0
+				? "empty"
+				: "ready";
+
+	const handleReportError = useCallback(() => {
+		const url = buildGitHubIssueUrl(buildBugReportContext());
+		window.open(url, "_blank", "noopener,noreferrer");
+	}, []);
+
+	const listBody = (
+		<div className="flex-1 overflow-y-auto">
+			<div className="divide-y divide-line">
+				{rows.map((thread) => (
+					<ComfortableRow
+						key={thread.id}
+						thread={thread}
+						active={thread.id === selectedMessageId}
+						onClick={() => onSelectMessage?.(thread.id)}
+					/>
+				))}
+			</div>
+		</div>
+	);
+
+	return (
+		<MailViewChrome
+			title="Flagged"
+			unreadCount={unreadCount}
+			preset={preset}
+			selectedCategory={selectedCategory}
+			activeFilters={activeFilters}
+			onSelectCategory={setSelectedCategory}
+			onToggleFilter={toggleFilter}
+			onClearFilters={clearFilters}
+			searchResults={searchResults}
+			searchLoading={isLoading}
+			onSelectSearchResult={(result) => onSelectMessage?.(result.id)}
+		>
+			<MessageListPane
+				listTitle="Flagged"
+				sections={[{ id: "flagged", threads: rows }]}
+				flatList
+				hideHeader
+				listState={listState}
+				searchQuery={sq ? searchQuery : undefined}
+				errorMessage={isError ? formatErrorMessage(error) : undefined}
+				onRetry={() => refetch()}
+				onReportError={handleReportError}
+				selectedThreadId={selectedMessageId}
+				onSelectThread={onSelectMessage}
+				onSelectBriefCategory={() => undefined}
+				isDesktop={isDesktop}
+				listBody={listState === "ready" ? listBody : undefined}
+			/>
+		</MailViewChrome>
+	);
+}

package/src/components/mail/FlaggedPane.tsx

@@ -0,0 +1,217 @@
+/**
+ * FlaggedPane — compound component for the Flagged virtual mailbox
+ * (/mail/flagged route).
+ *
+ * Mirrors BriefPane: it reads the unified cross-account thread list to resolve
+ * the open thread and owns the list / reading / phone slots. The list itself is
+ * a FLAT inbox of starred mail (see `FlaggedList`), not the sectioned brief.
+ *
+ *   <FlaggedPane selectedMessageId={...}>
+ *     <AppShellSlotted
+ *       list={<FlaggedPane.List />}
+ *       reading={<FlaggedPane.Reading />}
+ *     />
+ *   </FlaggedPane>
+ *
+ * On phone, use `<FlaggedPane.Phone />` instead.
+ */
+import { unifiedThreadOperationsListAllThreadsOptions } from "@remit/api-http-client/@tanstack/react-query.gen.ts";
+import type { RemitImapThreadMessageResponse } from "@remit/api-http-client/types.gen.ts";
+import { ReadingPaneEmpty } from "@remit/ui";
+import { useQuery } from "@tanstack/react-query";
+import { useNavigate } from "@tanstack/react-router";
+import {
+	createContext,
+	type ReactNode,
+	useCallback,
+	useContext,
+	useMemo,
+} from "react";
+import { Drawer } from "@/components/layout/Drawer";
+import { ConversationView } from "@/components/mail/ConversationView";
+import { FlaggedList } from "@/components/mail/FlaggedList";
+import { IntelligencePane } from "@/components/mail/IntelligencePane";
+import { MessageToolbar } from "@/components/mail/MessageToolbar";
+import { useMailContext } from "@/lib/mail-context";
+
+/* ------------------------------------------------------------------ */
+/* Context                                                              */
+/* ------------------------------------------------------------------ */
+
+interface FlaggedPaneContextValue {
+	selectedMessageId: string | undefined;
+	selectedThread: RemitImapThreadMessageResponse | undefined;
+	onSelectMessage: (id: string) => void;
+	onCloseThread: () => void;
+}
+
+const FlaggedPaneCtx = createContext<FlaggedPaneContextValue | null>(null);
+
+function useFlaggedPane(): FlaggedPaneContextValue {
+	const ctx = useContext(FlaggedPaneCtx);
+	if (!ctx) throw new Error("FlaggedPane.* must be used inside <FlaggedPane>");
+	return ctx;
+}
+
+/* ------------------------------------------------------------------ */
+/* Provider                                                             */
+/* ------------------------------------------------------------------ */
+
+interface FlaggedPaneProps {
+	selectedMessageId: string | undefined;
+	children: ReactNode;
+}
+
+function FlaggedPaneProvider({
+	selectedMessageId,
+	children,
+}: FlaggedPaneProps) {
+	const navigate = useNavigate();
+
+	const { data: threadsData } = useQuery({
+		...unifiedThreadOperationsListAllThreadsOptions(),
+		staleTime: 60_000,
+	});
+
+	const selectedThread = useMemo(() => {
+		if (!selectedMessageId) return undefined;
+		return threadsData?.items.find((t) => t.messageId === selectedMessageId);
+	}, [threadsData, selectedMessageId]);
+
+	const handleSelectMessage = useCallback(
+		(id: string) => {
+			navigate({
+				to: "/mail/flagged",
+				search: (prev) => ({ ...prev, selectedMessageId: id }),
+			});
+		},
+		[navigate],
+	);
+
+	const handleCloseThread = useCallback(() => {
+		navigate({
+			to: "/mail/flagged",
+			search: (prev) => ({ ...prev, selectedMessageId: undefined }),
+		});
+	}, [navigate]);
+
+	const ctx: FlaggedPaneContextValue = {
+		selectedMessageId,
+		selectedThread,
+		onSelectMessage: handleSelectMessage,
+		onCloseThread: handleCloseThread,
+	};
+
+	return (
+		<FlaggedPaneCtx.Provider value={ctx}>{children}</FlaggedPaneCtx.Provider>
+	);
+}
+
+/* ------------------------------------------------------------------ */
+/* Sub-views                                                            */
+/* ------------------------------------------------------------------ */
+
+/** Flat starred list. Mount in the `list` slot of `AppShellSlotted`. */
+function FlaggedListSlot() {
+	const { selectedMessageId, onSelectMessage } = useFlaggedPane();
+	return (
+		<FlaggedList
+			selectedMessageId={selectedMessageId}
+			onSelectMessage={onSelectMessage}
+		/>
+	);
+}
+
+/**
+ * Reading pane: toolbar + ConversationView.
+ * Mount in the `reading` slot of `AppShellSlotted`. Only rendered ≥ 1024px.
+ */
+function FlaggedReading() {
+	const { selectedThread } = useFlaggedPane();
+	const {
+		onToggleIntelligence,
+		searchInput,
+		onSearchChange,
+		onSearchClear,
+		onSearchClearQuery,
+	} = useMailContext();
+
+	return (
+		<section className="flex h-full w-full min-w-0 flex-col bg-canvas">
+			<MessageToolbar
+				hasThread={Boolean(selectedThread)}
+				onCompose={() => undefined}
+				intelligenceOpen={false}
+				showIntelligenceToggle={false}
+				onToggleIntelligence={onToggleIntelligence}
+				searchValue={searchInput}
+				onSearchChange={onSearchChange}
+				onSearchClear={onSearchClear}
+				onSearchClearQuery={onSearchClearQuery}
+			/>
+			<div className="min-h-0 flex-1 overflow-hidden">
+				{selectedThread ? (
+					<ConversationView
+						threadId={selectedThread.threadId}
+						mailboxId={selectedThread.mailboxId}
+						subject={selectedThread.subject}
+						authenticity={selectedThread.authenticity}
+					/>
+				) : (
+					<ReadingPaneEmpty />
+				)}
+			</div>
+		</section>
+	);
+}
+
+/** Phone view: ConversationView when a thread is open, else the flat list. */
+function FlaggedPhone() {
+	const { selectedThread, onCloseThread } = useFlaggedPane();
+	const { intelligenceOpen, onToggleIntelligence } = useMailContext();
+
+	if (selectedThread) {
+		return (
+			<>
+				<ConversationView
+					threadId={selectedThread.threadId}
+					mailboxId={selectedThread.mailboxId}
+					subject={selectedThread.subject}
+					authenticity={selectedThread.authenticity}
+					onBack={onCloseThread}
+					onOpenIntelligence={onToggleIntelligence}
+				/>
+				<Drawer
+					isOpen={intelligenceOpen}
+					onClose={onToggleIntelligence}
+					ariaLabel="Message details"
+					side="right"
+				>
+					<IntelligencePane
+						onClose={onToggleIntelligence}
+						thread={selectedThread}
+						hideCloseButton
+					/>
+				</Drawer>
+			</>
+		);
+	}
+
+	return (
+		<div className="h-full">
+			<FlaggedListSlot />
+		</div>
+	);
+}
+
+/* ------------------------------------------------------------------ */
+/* Compound component assembly                                          */
+/* ------------------------------------------------------------------ */
+
+const FlaggedPane = Object.assign(FlaggedPaneProvider, {
+	List: FlaggedListSlot,
+	Reading: FlaggedReading,
+	Phone: FlaggedPhone,
+});
+
+export { FlaggedPane };