@remit/web-client 0.0.202 → 0.0.203

package/src/routing/open-thread.ts

@@ -1,5 +1,7 @@
-import { useParams } from "@tanstack/react-router";
-import { useMemo } from "react";
+import { useNavigate, useParams } from "@tanstack/react-router";
+import { useCallback, useMemo } from "react";
+import { useBrowsedList, useNavigateToBrowsedList } from "./browsed-list";
+import { useRetainOpenPanels } from "./fragment";
 
 /** The conversation a list has open, as the address states it. */
 export interface OpenThreadPath {
@@ -68,3 +70,88 @@ export function useOpenThreadPath(): OpenThreadPath | undefined {
 		[threadId, messageId],
 	);
 }
+
+/** How an open differs from the plain one, where it does. */
+export interface OpenThreadOptions {
+	/** Replace the entry rather than push one, so Back skips the row. */
+	replace?: boolean;
+	/**
+	 * Commit this query with the open. The debounced q-mirror walks back up to
+	 * the list when a query goes active, so a row tapped before the debounce
+	 * settles is closed again a moment later unless the address already says the
+	 * query the conversation was opened under. Omitted, the open carries whatever
+	 * query the address already had.
+	 */
+	query?: string;
+	/**
+	 * Open under this mailbox rather than the one being browsed. A search hit
+	 * carries its own, so a row can never open under a mailbox it does not belong
+	 * to.
+	 */
+	mailboxId?: string;
+}
+
+/**
+ * Open a conversation on the list the reader is browsing.
+ *
+ * The thread is a child route of its list, so the list decides the address and
+ * the caller only names the conversation. The brief is the fallback, and legal
+ * for any thread: a list with no thread route under it — the outbox — and a
+ * mailbox route in the frame before its id resolves both still open the
+ * conversation rather than doing nothing, which is the dead row this route shape
+ * exists to delete.
+ */
+export function useOpenThread(): (
+	target: OpenThreadTarget,
+	options?: OpenThreadOptions,
+) => void {
+	const navigate = useNavigate();
+	const retainPanels = useRetainOpenPanels();
+	const { list, mailboxId: browsedMailboxId } = useBrowsedList();
+
+	return useCallback(
+		(target: OpenThreadTarget, options?: OpenThreadOptions) => {
+			const query = options?.query;
+			const search = (prev: Record<string, unknown>) =>
+				query === undefined ? prev : { ...prev, q: query || undefined };
+			const rest = {
+				search,
+				hash: retainPanels,
+				replace: options?.replace ?? false,
+			};
+			if (list === "flagged") {
+				navigate({
+					to: "/mail/flagged/$threadId/$messageId",
+					params: target,
+					...rest,
+				});
+				return;
+			}
+			const mailboxId = options?.mailboxId ?? browsedMailboxId;
+			if (list === "mailbox" && mailboxId) {
+				navigate({
+					to: "/mail/$mailboxId/$threadId/$messageId",
+					params: { mailboxId, ...target },
+					...rest,
+				});
+				return;
+			}
+			navigate({
+				to: "/mail/brief/$threadId/$messageId",
+				params: target,
+				...rest,
+			});
+		},
+		[navigate, retainPanels, list, browsedMailboxId],
+	);
+}
+
+/**
+ * Close the conversation, landing back on the list it was opened from.
+ *
+ * A navigation up rather than a flag, so nothing is left mounted below the list
+ * and Esc unwinds exactly one step.
+ */
+export function useCloseThread(): () => void {
+	return useNavigateToBrowsedList();
+}

package/src/routing/outbox-draft.ts

@@ -1,4 +1,7 @@
-import { useParams } from "@tanstack/react-router";
+import { useNavigate, useParams } from "@tanstack/react-router";
+import { useCallback } from "react";
+import { useNavigateToBrowsedList } from "./browsed-list";
+import { useRetainOpenPanels } from "./fragment";
 
 /**
  * The outbox message the reader has open, read off the path.
@@ -15,3 +18,26 @@ export function useOutboxDraftId(): string | undefined {
 	});
 	return draft?.outboxMessageId;
 }
+
+/** Open an outbox message in the reading pane. */
+export function useOpenOutboxDraft(): (outboxMessageId: string) => void {
+	const navigate = useNavigate();
+	const retainPanels = useRetainOpenPanels();
+
+	return useCallback(
+		(outboxMessageId: string) => {
+			navigate({
+				to: "/mail/outbox/draft/$outboxMessageId",
+				params: { outboxMessageId },
+				search: (prev: Record<string, unknown>) => prev,
+				hash: retainPanels,
+			});
+		},
+		[navigate, retainPanels],
+	);
+}
+
+/** Close it again, landing back on the outbox. */
+export function useCloseOutboxDraft(): () => void {
+	return useNavigateToBrowsedList();
+}

package/src/{hooks/useSearchField.render.test.ts → routing/search-field.render.test.ts}

@@ -34,7 +34,7 @@ import {
 } from "@tanstack/react-router";
 import { createElement, useState } from "react";
 import { createDomHarness, type DomHarness } from "../test-support/dom";
-import { useSearchField } from "./useSearchField";
+import { useSearchField } from "./search-field";
 
 let harness: DomHarness | undefined;
 

package/src/{hooks/useSearchField.ts → routing/search-field.ts}

@@ -1,8 +1,8 @@
 import { useRouter, useRouterState } from "@tanstack/react-router";
 import { useCallback, useState } from "react";
+import { useDebouncedValue } from "@/hooks/useDebouncedValue";
 import { addressQuery, mailViewKey } from "@/lib/mail-route";
 import { committedSearchQuery, searchInputForView } from "@/lib/search-view";
-import { useDebouncedValue } from "./useDebouncedValue";
 
 export interface SearchField {
 	/** The live field text, which every search surface binds. */

package/src/{hooks → routing}/search-mirror-convergence.render.test.ts

@@ -34,7 +34,7 @@ import { createElement, useState } from "react";
 import { MailContext, type MailContextValue } from "@/lib/mail-context";
 import { EMPTY_RESULT_FOLDER_INDEX } from "@/lib/result-folder";
 import { createDomHarness, type DomHarness } from "../test-support/dom";
-import { useSearchMirror } from "./useSearchMirror";
+import { useSearchMirror } from "./search-mirror";
 
 let harness: DomHarness | undefined;
 

package/src/{hooks → routing}/search-mirror-detail.render.test.ts

@@ -32,7 +32,7 @@ import { MailContext, type MailContextValue } from "@/lib/mail-context";
 import { mailViewKey } from "@/lib/mail-route";
 import { EMPTY_RESULT_FOLDER_INDEX } from "@/lib/result-folder";
 import { createDomHarness, type DomHarness } from "../test-support/dom";
-import { useSearchMirror } from "./useSearchMirror";
+import { useSearchMirror } from "./search-mirror";
 
 let harness: DomHarness | undefined;
 

package/src/{hooks/useSearchMirror.ts → routing/search-mirror.ts}

@@ -3,7 +3,8 @@ import { useEffect } from "react";
 import { useMailContext } from "@/lib/mail-context";
 import { addressQuery } from "@/lib/mail-route";
 import { shouldMirrorQuery } from "@/lib/search-view";
-import { useIsComposing, useIsReplying } from "@/routing";
+import { useIsComposing } from "./compose";
+import { useIsReplying } from "./reply";
 
 /**
  * The list the mirror writes to. Each list calls the hook with its own route,

package/src/routing/search-navigation.ts

@@ -0,0 +1,44 @@
+import { useNavigate } from "@tanstack/react-router";
+import { useCallback } from "react";
+
+/**
+ * Search everything, carrying the query.
+ *
+ * "Everything" is the daily brief — the cross-account view whose scope is
+ * nothing — so dropping the scope chip and running a saved search are the same
+ * movement, and both are a navigation rather than an edit of the query text:
+ * the chip mirrors the route (see `lib/search-scope.ts`), so editing the text
+ * would leave the chip up and the list still narrowed.
+ */
+export function useSearchEverything(): (query: string) => void {
+	const navigate = useNavigate();
+	return useCallback(
+		(query: string) => {
+			navigate({ to: "/mail/brief", search: { q: query || undefined } });
+		},
+		[navigate],
+	);
+}
+
+/**
+ * Narrow the search to one mailbox, carrying the query.
+ *
+ * The route is the scope, so the offer to look in Spam for what a global search
+ * held back goes to Spam rather than rewriting the query with an `in:` term.
+ */
+export function useScopeSearchToMailbox(): (
+	mailboxId: string,
+	query: string,
+) => void {
+	const navigate = useNavigate();
+	return useCallback(
+		(mailboxId: string, query: string) => {
+			navigate({
+				to: "/mail/$mailboxId",
+				params: { mailboxId },
+				search: { q: query || undefined },
+			});
+		},
+		[navigate],
+	);
+}

package/src/routing/sections.ts

@@ -0,0 +1,53 @@
+import { useNavigate } from "@tanstack/react-router";
+import { useCallback } from "react";
+
+/**
+ * A top-level destination, as the sidebar and the keyboard name it. These are
+ * the moves that leave whatever the reader is on rather than open something
+ * under it, so they carry no panels and no query.
+ */
+export type AppSection =
+	| "brief"
+	| "flagged"
+	| "outbox"
+	| "settings"
+	| "accounts";
+
+const sectionRoute = {
+	brief: "/mail/brief",
+	flagged: "/mail/flagged",
+	outbox: "/mail/outbox",
+	settings: "/settings",
+	accounts: "/settings/accounts",
+} as const satisfies Record<AppSection, string>;
+
+/** Go to a top-level section by name, so no caller writes a path. */
+export function useGoToSection(): (section: AppSection) => void {
+	const navigate = useNavigate();
+	return useCallback(
+		(section: AppSection) => {
+			navigate({ to: sectionRoute[section] });
+		},
+		[navigate],
+	);
+}
+
+/**
+ * Open one account's settings on its outgoing-mail fields.
+ *
+ * The account and the field to land on ride the address, so the banner that
+ * sends the reader there is not also responsible for telling the settings pane
+ * what it was about.
+ */
+export function useConfigureAccountSmtp(): (accountId: string) => void {
+	const navigate = useNavigate();
+	return useCallback(
+		(accountId: string) => {
+			navigate({
+				to: "/settings/accounts",
+				search: { editAccountId: accountId, focusSmtp: true },
+			});
+		},
+		[navigate],
+	);
+}