@remit/web-client 0.0.17 → 0.0.19

package/src/routes/mail.tsx

@@ -30,8 +30,18 @@ import { useMailboxNameIndex } from "@/hooks/useMailboxNameIndex";
 import { useStaleAccountSync } from "@/hooks/useStaleAccountSync";
 import { writeIntelligencePref } from "@/lib/intelligence-pref";
 import { MailContext } from "@/lib/mail-context";
-import { isBriefRoute, isFlaggedRoute, isOutboxRoute } from "@/lib/mail-route";
+import {
+	isBriefRoute,
+	isFlaggedRoute,
+	isOutboxRoute,
+	mailViewKey,
+} from "@/lib/mail-route";
 import { buildAccountNameIndex } from "@/lib/search-token-index";
+import {
+	committedSearchQuery,
+	searchInputForView,
+	shouldMirrorQuery,
+} from "@/lib/search-view";
 import "@/lib/client";
 
 // `MailContext` / `useMailContext` live in `@/lib/mail-context` so the provider
@@ -86,19 +96,48 @@ function MailLayout() {
 		writeIntelligencePref(open);
 	}, []);
 
-	// URL `q` is a load-once seed for the input and a one-directional write
-	// target. The debounced local value is the source of truth and drives the
-	// search API; it is mirrored back to the URL but the URL is never read into
-	// state after mount.
+	// Within one view, URL `q` seeds the input and is a one-directional write
+	// target: the debounced local value drives the search API and is mirrored
+	// back. Across views the URL wins again — see the view-change adjustment
+	// below and `lib/search-view.ts` (#47).
 	const [searchInput, setSearchInput] = useState(searchQuery);
 	const debouncedSearchInput = useDebouncedValue(searchInput, 200);
+	const committedQuery = committedSearchQuery(
+		searchInput,
+		debouncedSearchInput,
+	);
 
 	const searchQueryRef = useRef(searchQuery);
 	searchQueryRef.current = searchQuery;
 
-	// Mirror the debounced search into the URL so links are shareable and a
-	// refresh restores the query. One-directional: the URL is never read back
-	// into state, so there is no sync loop.
+	// Search is a mode of the view it was typed in, so leaving that view re-seeds
+	// the field from wherever we land (#47): empty when the sidebar dropped `q`
+	// (a folder switch starts that folder's search fresh), and the carried query
+	// when the top bar's scope chip was removed and sent the user to the brief to
+	// search everything. Views that differ only in search params — opening a
+	// result, mirroring `q` — are the same view, so in-flight typing survives
+	// them (`searchInputForView`).
+	//
+	// Adjusted during render, not in an effect. This is React's documented
+	// "adjusting state when a prop changes" pattern: both updates are to this
+	// component's own state and are guarded by a changed value, so React re-runs
+	// the render before committing and nothing is painted with the stale query.
+	// An effect would commit one frame carrying the previous view's text, which
+	// the mirror below then has to be defended against.
+	const viewKey = useRouterState({ select: (s) => mailViewKey(s.matches) });
+	const [searchViewKey, setSearchViewKey] = useState(viewKey);
+	if (searchViewKey !== viewKey) {
+		const seeded = searchInputForView(searchViewKey, viewKey, searchQuery);
+		setSearchViewKey(viewKey);
+		if (seeded !== undefined) setSearchInput(seeded);
+	}
+
+	// Mirror the settled search into the URL so links are shareable and a
+	// refresh restores the query. Within a view this is one-directional — the
+	// URL is not read back into state, so there is no sync loop — and it writes
+	// only once the debounce agrees with the field, so a query arriving by URL
+	// is never overwritten mid-debounce, and the query the user just left behind
+	// is never written onto the view they landed on (`shouldMirrorQuery`).
 	// When a query *goes* active, also strip selectedMessageId so the reading
 	// pane closes (#539): an open message from the pre-search list is not
 	// meaningful in the search result set. Only strip on that transition though —
@@ -108,16 +147,17 @@ function MailLayout() {
 	// the row shows before the debounce settles, so this mirror can land just
 	// after the open and close it again.
 	useEffect(() => {
-		if (debouncedSearchInput === searchQueryRef.current) return;
+		if (!shouldMirrorQuery(searchInput, committedQuery, searchQueryRef.current))
+			return;
 		navigate({
 			to: ".",
 			search: (prev) => {
 				const queryAlreadyActive =
-					(prev as { q?: string }).q === debouncedSearchInput;
+					(prev as { q?: string }).q === committedQuery;
 				return {
 					...prev,
-					q: debouncedSearchInput || undefined,
-					...(debouncedSearchInput && !queryAlreadyActive
+					q: committedQuery || undefined,
+					...(committedQuery && !queryAlreadyActive
 						? {
 								selectedMessageId: undefined,
 								selectedThreadId: undefined,
@@ -128,7 +168,7 @@ function MailLayout() {
 			},
 			replace: true,
 		});
-	}, [debouncedSearchInput, navigate]);
+	}, [searchInput, committedQuery, navigate]);
 
 	const {
 		data: config,
@@ -250,10 +290,11 @@ function MailLayout() {
 		accounts,
 		mailboxNameIndex,
 		accountNameIndex,
-		// Debounced local value is the source of truth for search; it is
-		// mirrored to the URL one-directionally for shareable links.
-		searchQuery: debouncedSearchInput,
+		// The committed local value is the source of truth for search; it is
+		// mirrored to the URL for shareable links.
+		searchQuery: committedQuery,
 		searchInput,
+		searchViewKey: viewKey,
 		onSearchChange: handleSearchChange,
 		onSearchClear: handleSearchClear,
 		onSearchClearQuery: handleSearchClearQuery,