feat: email search linking

js/app/packages/app/component/UnifiedListView.tsx

@@ -3,6 +3,7 @@ import {
   useGlobalNotificationSource,
 } from '@app/component/GlobalAppState';
 import { URL_PARAMS as CHANNEL_PARAMS } from '@block-channel/constants';
+import { URL_PARAMS as EMAIL_PARAMS } from '@block-email/constants';
 import { URL_PARAMS as MD_PARAMS } from '@block-md/constants';
 import { URL_PARAMS as PDF_PARAMS } from '@block-pdf/signal/location';
 import { Button } from '@core/component/FormControls/Button';
@@ -938,13 +939,26 @@ export function UnifiedListView(props: UnifiedListViewProps) {
 
     handle?.activate();
 
-    if (entity.type === 'channel' && isSearchEntity(entity)) {
-      const location = entity.search.contentHitData?.at(0)?.location;
-      if (!location) return;
-      const blockHandle = await blockOrchestrator.getBlockHandle(entity.id);
-      await blockHandle?.goToLocationFromParams({
-        [CHANNEL_PARAMS.message]: location.messageId,
-      });
+    if (!isSearchEntity(entity)) return;
+
+    const location = entity.search.contentHitData?.at(0)?.location;
+    if (!location) return;
+
+    switch (location.type) {
+      case 'channel': {
+        const blockHandle = await blockOrchestrator.getBlockHandle(entity.id);
+        await blockHandle?.goToLocationFromParams({
+          [CHANNEL_PARAMS.message]: location.messageId,
+        });
+        break;
+      }
+      case 'email': {
+        const blockHandle = await blockOrchestrator.getBlockHandle(entity.id);
+        await blockHandle?.goToLocationFromParams({
+          [EMAIL_PARAMS.messageId]: location.messageId,
+        });
+        break;
+      }
     }
   };
 

js/app/packages/block-email/component/Email.tsx

@@ -1,10 +1,12 @@
 import { useGlobalNotificationSource } from '@app/component/GlobalAppState';
 import { TOKENS } from '@core/hotkey/tokens';
 import { registerScopeSignalHotkey } from '@core/hotkey/utils';
+import { createMethodRegistration } from '@core/orchestrator';
 import {
   blockElementSignal,
   blockHotkeyScopeSignal,
 } from '@core/signal/blockElement';
+import { blockHandleSignal } from '@core/signal/load';
 import {
   type ContactInfo,
   isPersonEmailContact,
@@ -27,11 +29,13 @@ import {
   createEffect,
   createMemo,
   createSignal,
+  on,
   onMount,
   Show,
   untrack,
 } from 'solid-js';
 import { createStore } from 'solid-js/store';
+import { TARGET_MESSAGE_ACTIVE_TIME, URL_PARAMS } from '../constants';
 import { isScrollingToMessage } from '../signal/scrollState';
 import type { createThreadMessagesResource } from '../signal/threadMessages';
 import { useThreadNavigation } from '../signal/threadNavigation';
@@ -64,7 +68,17 @@ export function Email(props: EmailProps) {
   const blockElement = blockElementSignal.get;
 
   const [searchParams] = useSearchParams();
-  const targetMessageId = () => searchParams.message_id; // reactive
+  const searchParamsMessageId = () => {
+    if (typeof searchParams.message_id === 'string') {
+      return searchParams.message_id;
+    } else if (Array.isArray(searchParams.message_id)) {
+      return searchParams.message_id[0];
+    }
+    return undefined;
+  };
+  const [targetMessageId, setTargetMessageId] = createSignal<
+    string | undefined
+  >(searchParamsMessageId());
 
   const filteredMessages = createMemo(() => {
     return (
@@ -198,6 +212,42 @@ export function Email(props: EmailProps) {
   const [isContainerFilled, setIsContainerFilled] = createSignal(false);
   const [hasHandledTarget, setHasHandledTarget] = createSignal(false);
 
+  const [activeTargetMessageId, setActiveTargetMessageId] = createSignal<
+    string | undefined
+  >();
+
+  let targetTimeoutId: ReturnType<typeof setTimeout> | undefined;
+
+  createEffect(
+    on(targetMessageId, (target: string | undefined) => {
+      if (targetTimeoutId) {
+        clearTimeout(targetTimeoutId);
+        targetTimeoutId = undefined;
+      }
+
+      if (target) {
+        setActiveTargetMessageId(target);
+        targetTimeoutId = setTimeout(() => {
+          setActiveTargetMessageId(undefined);
+          targetTimeoutId = undefined;
+        }, TARGET_MESSAGE_ACTIVE_TIME);
+      }
+    })
+  );
+
+  const blockHandle = blockHandleSignal.get;
+  createMethodRegistration(blockHandle, {
+    goToLocationFromParams: async (params: Record<string, any>) => {
+      if (params[URL_PARAMS.messageId]) {
+        setTargetMessageId(undefined);
+        setTimeout(() => {
+          setTargetMessageId(params[URL_PARAMS.messageId]);
+          setHasHandledTarget(false);
+        }, 0);
+      }
+    },
+  });
+
   // ============================================
   // SCROLLING LOGIC HELPER FUNCTIONS
   // ============================================
@@ -360,7 +410,7 @@ export function Email(props: EmailProps) {
   // This effect handles scrolling to a specific message (if provided via URL) or scrolling to the last message by default
   // This effect should only run once.
   createEffect(() => {
-    if (untrack(hasHandledTarget)) return;
+    if (hasHandledTarget()) return;
     const resource = props.threadMessagesResource();
     if (!resource) return;
     // Check if initial loading is complete
@@ -383,8 +433,8 @@ export function Email(props: EmailProps) {
     // Mark as handled to prevent re-running
     setHasHandledTarget(true);
 
-    // Check for target message in URL
-    const targetMessageId_ = untrack(targetMessageId);
+    // Check for target message
+    const targetMessageId_ = targetMessageId();
     if (targetMessageId_ && typeof targetMessageId_ !== 'string') return;
 
     if (targetMessageId_) {
@@ -582,6 +632,7 @@ export function Email(props: EmailProps) {
         filteredMessages,
         threadData: props.threadData,
         archiveThread,
+        activeTargetMessageId,
       }}
     >
       <EmailFormContextProvider>

js/app/packages/block-email/component/EmailContext.tsx

@@ -30,7 +30,8 @@ export type EmailContextValue = {
   setFocusedMessageId: Setter<string | undefined>;
   filteredMessages: Accessor<MessageWithBodyReplyless[]>;
   threadData: Accessor<Thread | undefined>;
-  archiveThread: () => boolean;
+  archiveThread: Accessor<boolean>;
+  activeTargetMessageId: Accessor<string | undefined>;
 };
 
 const EmailContext = createContext<EmailContextValue>();

js/app/packages/block-email/component/MessageContainer.tsx

@@ -66,6 +66,10 @@ export function MessageContainer(props: MessageContainerProps) {
     );
   });
 
+  const isTarget = createMemo(() => {
+    return context.activeTargetMessageId() === props.message.db_id;
+  });
+
   // Hide attachments that are referenced in inline images
   const inlineContentIds = createMemo(() => {
     const set = new Set<string>();
@@ -108,11 +112,13 @@ export function MessageContainer(props: MessageContainerProps) {
     <div class="shrink-0 flex justify-center w-full">
       <div class="macro-message-width w-full">
         <Message
+          id={props.message.db_id ?? undefined}
           focused={isFocused()}
           isFirstMessage={isFirstMessage()}
           isLastMessage={isLastMessage()}
           senderId={props.message.from?.email}
           isNewMessage={isNewMessage()}
+          isTarget={isTarget()}
         >
           <Message.TopBar>
             <EmailMessageTopBar

js/app/packages/block-email/constants.ts

@@ -0,0 +1,6 @@
+export const URL_PARAMS = {
+  messageId: 'message_id',
+};
+
+// The time in milliseconds that a target message will be active before it is considered stale.
+export const TARGET_MESSAGE_ACTIVE_TIME = 800;

js/app/packages/core/component/Message.tsx

@@ -211,7 +211,7 @@ const Root: Component<MessageRootProps> = (props) => {
       <div
         class={`relative flex flex-row items-stretch w-full suppress-css-brackets [--thread-shift:23px] @sm:[--thread-shift:46px] [--user-icon-width:30px] @sm:[--user-icon-width:40px] [--left-of-connector:20px] @sm:[--left-of-connector:28px] [--left-of-user-icon:calc(var(--left-of-connector)-var(--user-icon-width)/2)] transition-colors duration-1000 ease`}
         classList={{
-          'bg-accent ': props.isTarget,
+          'bg-accent': props.isTarget,
         }}
         onMouseEnter={() => setHover(true)}
         onMouseLeave={() => setHover(false)}
@@ -224,7 +224,7 @@ const Root: Component<MessageRootProps> = (props) => {
         </Show>
         <BozzyBracket
           active={props.focused}
-          unfocusable={props.unfocusable}
+          unfocusable={props.isTarget || props.unfocusable}
           class="flex flex-row"
           style={{
             'margin-bottom': props.isLastInThread //|| props.showReply?.()

js/app/packages/macro-entity/src/queries/search.ts

@@ -37,7 +37,8 @@ type TypedInnerSearchResult =
   | { results: InnerSearchResult[]; type?: undefined }
   | { results: DocumentSearchResult[]; type: 'pdf'; searchQuery: string }
   | { results: DocumentSearchResult[]; type: 'md' }
-  | { results: ChannelSearchResult[]; type: 'channel' };
+  | { results: ChannelSearchResult[]; type: 'channel' }
+  | { results: EmailSearchResult[]; type: 'email' };
 
 export const isSearchEntity = <T extends EntityData>(
   entity: T
@@ -95,6 +96,20 @@ const getSearchData = (data: TypedInnerSearchResult): SearchData => {
       });
       break;
     }
+    case 'email': {
+      contentHitData = data.results.flatMap((r) => {
+        const contents = r.highlight.content ?? [];
+        return contents.map((content) => ({
+          type: 'email' as const,
+          content: mergeAdjacentMacroEmTags(content),
+          location: {
+            type: 'email' as const,
+            messageId: r.message_id,
+          },
+        }));
+      });
+      break;
+    }
     default: {
       contentHitData = data.results.flatMap((r) => {
         const contents = r.highlight.content ?? [];
@@ -163,13 +178,13 @@ const useMapSearchResponseItem = () => {
       }
       case 'email': {
         const emailResult = result.email_message_search_results.at(0);
-        // TODO: distinguish email message result from thread result
         if (!emailResult) {
           console.error('Email result not found', result);
           return;
         }
         const search = getSearchData({
           results: result.email_message_search_results,
+          type: 'email',
         });
         return {
           type: 'email',

js/app/packages/macro-entity/src/types/search.ts

@@ -18,10 +18,16 @@ type ChannelMessageHighlightLocation = {
   messageId: string;
 };
 
+type EmailMessageHighlightLocation = {
+  type: 'email';
+  messageId: string;
+};
+
 export type SearchLocation =
   | MarkdownHighlightLocation
   | PdfHighlightLocation
-  | ChannelMessageHighlightLocation;
+  | ChannelMessageHighlightLocation
+  | EmailMessageHighlightLocation;
 
 export type ChannelContentHitData = {
   type: 'channel';
@@ -50,29 +56,29 @@ type GenericContentHitData = {
   location?: never;
 };
 
+type EmailContentHitData = {
+  type: 'email';
+  content: string;
+  location: EmailMessageHighlightLocation;
+};
+
 export type DocumentContentHitData =
   | MdContentHitData
   | PdfContentHitData
   | GenericContentHitData;
 
-export type ContentHitData<T extends EntityData = EntityData> = T extends {
-  type: 'channel';
-}
-  ? ChannelContentHitData
-  : T extends { type: 'document'; fileType: 'md' }
-    ? MdContentHitData
-    : T extends { type: 'document'; fileType: 'pdf' | 'docx' }
-      ? PdfContentHitData
-      : T extends { type: 'document' }
-        ? DocumentContentHitData
-        : GenericContentHitData;
+export type ContentHitData =
+  | DocumentContentHitData
+  | ChannelContentHitData
+  | EmailContentHitData
+  | GenericContentHitData;
 
-export type SearchData<T extends EntityData = EntityData> = {
+export type SearchData = {
   nameHighlight: string | null;
-  contentHitData: ContentHitData<T>[] | null;
+  contentHitData: ContentHitData[] | null;
   source: 'local' | 'service';
 };
 
 export type WithSearch<T extends EntityData> = T & {
-  search: SearchData<T>;
+  search: SearchData;
 };

js/app/tsconfig.json

@@ -127,6 +127,9 @@
       "@block-channel/*": [
         "./packages/block-channel/*"
       ],
+      "@block-email/*": [
+        "./packages/block-email/*"
+      ],
       "@block-md/*": [
         "./packages/block-md/*"
       ],