@rapidmx/web-client 0.2.0 → 0.3.1

package/apps/www/index.tsx

@@ -5,8 +5,13 @@
 import React, { useCallback, useEffect, useRef, useState } from "react";
 import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
 import { Message, MessageClassification, getMessage, listMessages } from "@rapidmx/react-shared/mail/mailApi.js";
+import { Label, listLabels } from "@rapidmx/react-shared/mail/labelsApi.js";
 import { ConversationSummary, listConversations } from "@rapidmx/react-shared/mail/conversationsApi.js";
-import { search as searchMailbox } from "@rapidmx/react-shared/search/searchApi.js";
+import { SearchResult, search as searchMailbox } from "@rapidmx/react-shared/search/searchApi.js";
+import { parseSearchQuery } from "@rapidmx/react-shared/search/queryGrammar.js";
+import { normalizeServerScores } from "@rapidmx/react-shared/search/searchScoring.js";
+import { searchEncryptedCandidates } from "@rapidmx/react-shared/search/searchTier3.js";
+import { getUnlockedKeys } from "@rapidmx/react-shared/crypto/keySession.js";
 import { useMarkMessageRead, useMessageAttachments } from "@rapidmx/react-shared/mail/mailDetailHooks.js";
 import useIsMobile from "@rapidmx/react-shared/util/useIsMobile.js";
 import MailShell, { MailShellProps, useMailShell } from "../shared/components/mail/layout/MailShell.js";
@@ -20,16 +25,95 @@ type ViewMode = "date" | "conversation";
 const MESSAGE_PAGE_SIZE = 50;
 const SEARCH_DEBOUNCE_MS = 300;
 
-/** Resolves one page of search hits (of type "message") into full `Message` records for display. */
-async function searchMessages(text: string, cursor?: string): Promise<{ messages: Message[]; nextCursor?: string }> {
-    const page = await searchMailbox(text, { types: ["message"], cursor, limit: MESSAGE_PAGE_SIZE });
+/** Merges Tier 1 (server, possibly `metadataOnly` for an encrypted message) and Tier 3 (decrypted,
+ * content-verified) results into one ranked list, per `specs/search.md` §7's "client MUST re-score all
+ * results it can see... normalise into the same space rather than interleaving raw scores": both sides
+ * are normalized independently via `normalizeServerScores()` before merging, since a Postgres/OpenSearch
+ * score and this module's own term-count score occupy unrelated ranges. A uid present in both lists
+ * (Tier 1 found it via a `participants` coincidence, Tier 3 then genuinely verified its content) keeps
+ * only the Tier 3 entry - real content verification supersedes a metadata guess for the same message.
+ * Deliberately not the spec's full skeleton/reordering "Progressive Results" UX (§_Progressive
+ * Results_) - that's real, separate UI work; this returns one final merged list once both tiers
+ * resolve, same as how the search box already waits on one round-trip today. */
+function mergeSearchResults(tier1: SearchResult[], tier3: SearchResult[]): SearchResult[] {
+    const normalizedTier1 = normalizeServerScores(tier1);
+    const normalizedTier3 = normalizeServerScores(tier3);
+    const merged = new Map<string, { result: SearchResult; normalizedScore: number }>();
+    for (const entry of normalizedTier1) {
+        merged.set(entry.result.entityUid, entry);
+    }
+    for (const entry of normalizedTier3) {
+        merged.set(entry.result.entityUid, entry);
+    }
+    return Array.from(merged.values())
+        .sort((a, b) => b.normalizedScore - a.normalizedScore)
+        .map((entry) => entry.result);
+}
+
+/** Resolves one page of search hits into full `Message` records for display, plus each hit's own
+ * `snippet` (keyed by message uid) for rendering in place of the plain `bodyPreview` while searching.
+ *
+ * `rawQuery` is parsed once, client-side, via `queryGrammar.ts`'s `parseSearchQuery()` — the operator
+ * grammar (`from:`/`to:`/`subject:`/`has:attachment`/`before:`/`after:`/`in:`/`is:`/`label:`/`type:`,
+ * `specs/search.md` §14) is extracted into structured filters passed to the server, while the
+ * remaining free text (quotes, `-` negation, `OR` all preserved) still drives ranking as `q`.
+ * `type:` narrows `entityTypes`; when absent this still defaults to `["message"]` — a non-message hit
+ * (contact/calendarEvent/note/task) has no `Message` to resolve via `getMessage()` below and is simply
+ * dropped by the same eventually-consistent-index fallback that already existed, rather than rendered
+ * (this inbox list only ever shows message rows; a real multi-entity-type results view is a separate,
+ * larger UI project outside this pass).
+ *
+ * Tier 3 (`searchTier3.ts#searchEncryptedCandidates()`) runs alongside Tier 1 only for the first page
+ * (`cursor` absent) - it has no pagination wiring yet (a deliberate scope trim, see that module's own
+ * doc comment), so a `loadMore()` continuation stays Tier-1-only. Silently contributes nothing when
+ * this mailbox has no unlocked keys this session (`getUnlockedKeys()` returns `undefined`) - nothing
+ * for it to decrypt, same as `MessageDetailPane`'s own encrypted-message handling elsewhere. */
+async function searchMessages(
+    mailboxUid: string,
+    rawQuery: string,
+    cursor?: string,
+): Promise<{ messages: Message[]; nextCursor?: string; snippets: Record<string, string> }> {
+    const parsed = parseSearchQuery(rawQuery);
+    const [page, tier3Results] = await Promise.all([
+        searchMailbox(parsed.text, {
+            types: parsed.entityTypes ?? ["message"],
+            cursor,
+            limit: MESSAGE_PAGE_SIZE,
+            from: parsed.from,
+            to: parsed.to,
+            cc: parsed.cc,
+            subject: parsed.subject,
+            hasAttachment: parsed.hasAttachment,
+            before: parsed.before,
+            after: parsed.after,
+            folderUid: parsed.folderUid,
+            flags: parsed.flags,
+            labels: parsed.labels,
+        }),
+        cursor ? Promise.resolve<SearchResult[]>([]) : searchEncryptedCandidates(parsed, getUnlockedKeys(mailboxUid)),
+    ]);
+    const mergedResults = mergeSearchResults(page.results, tier3Results);
     const resolved = await Promise.all(
-        page.results.map((hit) => getMessage(hit.entityUid).catch(() => null)),
+        mergedResults.map(async (hit) => {
+            const message = await getMessage(hit.entityUid).catch(() => null);
+            return message ? { message, snippet: hit.snippet } : null;
+        }),
     );
     // A search hit can briefly outlive the message it points to (index updates are eventually consistent,
     // and a message can be deleted after being indexed) - drop anything that no longer resolves rather than
     // rendering a broken entry.
-    return { messages: resolved.filter((m): m is Message => m !== null), nextCursor: page.nextCursor };
+    const messages: Message[] = [];
+    const snippets: Record<string, string> = {};
+    for (const entry of resolved) {
+        if (!entry) {
+            continue;
+        }
+        messages.push(entry.message);
+        if (entry.snippet) {
+            snippets[entry.message.uid] = entry.snippet;
+        }
+    }
+    return { messages, nextCursor: page.nextCursor, snippets };
 }
 
 export default function InboxPage(props: MailShellProps) {
@@ -55,12 +139,26 @@ function InboxContent() {
     const [classificationFilter, setClassificationFilter] = useState<MessageClassification | "all">("all");
     const [searchInput, setSearchInput] = useState("");
     const [searchQuery, setSearchQuery] = useState("");
+    const [snippets, setSnippets] = useState<Record<string, string>>({});
+    const [labels, setLabels] = useState<Label[]>([]);
     const isSearching = viewMode === "date" && searchQuery.length > 0;
     const pageRef = useRef(0);
     const cursorRef = useRef<string | undefined>(undefined);
     const scrollContainerRef = useRef<HTMLDivElement | null>(null);
     const sentinelRef = useRef<HTMLDivElement | null>(null);
 
+    // Labels are mailbox-wide, not folder-scoped - fetched once per mailbox rather than per message, and
+    // handed to every `MessageDetailPane` instance below. A failure here just means the Labels control
+    // stays hidden (an empty `labels` array) rather than blocking the rest of the inbox - it's a small
+    // enhancement, not critical path the way the message list itself is. No `mailboxUid` guard needed -
+    // `MailShell` never renders this component at all until `mailboxUid` has resolved (same invariant
+    // `searchMessages(mailboxUid!, ...)` below already relies on).
+    useEffect(() => {
+        listLabels(mailboxUid!, { limit: 200 })
+            .then(setLabels)
+            .catch(() => setLabels([]));
+    }, [mailboxUid]);
+
     // Debounce the raw input into the query actually searched, so every keystroke doesn't fire a request.
     useEffect(() => {
         const handle = setTimeout(() => setSearchQuery(searchInput.trim()), SEARCH_DEBOUNCE_MS);
@@ -100,9 +198,10 @@ function InboxContent() {
         setError(null);
 
         if (isSearching) {
-            searchMessages(searchQuery)
-                .then(({ messages: results, nextCursor }) => {
+            searchMessages(mailboxUid!, searchQuery)
+                .then(({ messages: results, nextCursor, snippets: newSnippets }) => {
                     setMessages(results);
+                    setSnippets(newSnippets);
                     setHasMore(!!nextCursor);
                     cursorRef.current = nextCursor;
                 })
@@ -127,8 +226,9 @@ function InboxContent() {
         setLoadingMore(true);
         try {
             if (isSearching) {
-                const { messages: more, nextCursor } = await searchMessages(searchQuery, cursorRef.current);
+                const { messages: more, nextCursor, snippets: moreSnippets } = await searchMessages(mailboxUid!, searchQuery, cursorRef.current);
                 setMessages((prev) => [...prev, ...more]);
+                setSnippets((prev) => ({ ...prev, ...moreSnippets }));
                 setHasMore(!!nextCursor);
                 cursorRef.current = nextCursor;
             } else {
@@ -333,7 +433,9 @@ function InboxContent() {
                                             </span>
                                         </div>
                                         <div className="text-sm truncate">{message.subject || "(no subject)"}</div>
-                                        <div className="text-xs text-text-muted truncate font-normal">{message.bodyPreview}</div>
+                                        <div className="text-xs text-text-muted truncate font-normal">
+                                            {snippets[message.uid] || message.bodyPreview}
+                                        </div>
                                     </button>
                                 </li>
                             ))}
@@ -348,7 +450,7 @@ function InboxContent() {
             </div>
             <div className="hidden md:flex flex-1 min-w-0">
                 {viewMode === "conversation" ? (
-                    <ConversationThreadPane conversation={selectedConversation} folders={folders} />
+                    <ConversationThreadPane conversation={selectedConversation} folders={folders} labels={labels} />
                 ) : (
                     <MessageDetailPane
                         message={selected}
@@ -367,6 +469,15 @@ function InboxContent() {
                             setMessages((prev) => prev.filter((m) => m.uid !== updated.uid));
                             setSelectedUid(null);
                         }}
+                        onArchived={(updated) => {
+                            // Same reasoning as onScheduledSendCanceled above — the message moved out of
+                            // whichever folder is currently being viewed (into Archive), so it's removed
+                            // from the list rather than patched in place.
+                            setMessages((prev) => prev.filter((m) => m.uid !== updated.uid));
+                            setSelectedUid(null);
+                        }}
+                        labels={labels}
+                        onLabelsChanged={(updated) => setMessages((prev) => prev.map((m) => (m.uid === updated.uid ? updated : m)))}
                     />
                 )}
             </div>

package/apps/www/messages/[uid].tsx

@@ -5,6 +5,7 @@
 import React, { useEffect, useState } from "react";
 import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
 import { Message, getMessage } from "@rapidmx/react-shared/mail/mailApi.js";
+import { Label, listLabels } from "@rapidmx/react-shared/mail/labelsApi.js";
 import { useMarkMessageRead, useMessageAttachments } from "@rapidmx/react-shared/mail/mailDetailHooks.js";
 import MailShell, { MailShellProps, useMailShell } from "../../shared/components/mail/layout/MailShell.js";
 import MessageDetailPane from "../../shared/components/mail/MessageDetailPane.js";
@@ -23,10 +24,11 @@ export default function MessageDetailPage(props: MailShellProps & { params: { ui
 }
 
 function MessageDetailContent({ uid }: { uid: string }) {
-    const { folders } = useMailShell();
+    const { folders, mailboxUid } = useMailShell();
     const [message, setMessage] = useState<Message | null>(null);
     const [loading, setLoading] = useState(true);
     const [error, setError] = useState<string | null>(null);
+    const [labels, setLabels] = useState<Label[]>([]);
 
     useEffect(() => {
         setLoading(true);
@@ -37,6 +39,15 @@ function MessageDetailContent({ uid }: { uid: string }) {
             .finally(() => setLoading(false));
     }, [uid]);
 
+    // See `apps/www/index.tsx`'s identical effect's own doc comment - a failure here just hides the
+    // Labels control rather than blocking the rest of the page. No `mailboxUid` guard needed - `MailShell`
+    // never renders this component at all until `mailboxUid` has resolved.
+    useEffect(() => {
+        listLabels(mailboxUid!, { limit: 200 })
+            .then(setLabels)
+            .catch(() => setLabels([]));
+    }, [mailboxUid]);
+
     const attachments = useMessageAttachments(message);
     useMarkMessageRead(message, setMessage);
 
@@ -65,6 +76,9 @@ function MessageDetailContent({ uid }: { uid: string }) {
             onReceiptHandled={setMessage}
             draftsFolderUid={draftsFolderUid}
             onScheduledSendCanceled={setMessage}
+            onArchived={setMessage}
+            labels={labels}
+            onLabelsChanged={setMessage}
         />
     );
 }