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-channel/component/MessageList/MessageList.tsx

@@ -15,6 +15,7 @@ import {
 import { CustomScrollbar } from '@core/component/CustomScrollbar';
 import { TextButton } from '@core/component/TextButton';
 import { observedSize } from '@core/directive/observedSize';
+import { createActiveTarget } from '@core/signal/activeTarget';
 import type { InputAttachment } from '@core/store/cacheChannelInput';
 import SunIcon from '@icon/duotone/sun-horizon-duotone.svg';
 import ArrowDownIcon from '@icon/regular/arrow-down.svg';
@@ -138,34 +139,10 @@ export function MessageList(props: MessageListProps) {
     })
   );
 
-  const [activeTargetMessage, setActiveTargetMessage] = createSignal<
-    | {
-        messageId: string;
-        threadId?: string;
-      }
-    | undefined
-  >();
-
-  let targetTimeoutId: ReturnType<typeof setTimeout> | undefined;
-
-  createEffect(() => {
-    const target = props.targetMessage();
-
-    if (targetTimeoutId) {
-      clearTimeout(targetTimeoutId);
-      targetTimeoutId = undefined;
-    }
-
-    if (target) {
-      setActiveTargetMessage(target);
-      targetTimeoutId = setTimeout(() => {
-        setActiveTargetMessage(undefined);
-        targetTimeoutId = undefined;
-      }, TARGET_MESSAGE_ACTIVE_TIME);
-    } else {
-      setActiveTargetMessage(undefined);
-    }
-  });
+  const activeTargetMessage = createActiveTarget(
+    props.targetMessage,
+    TARGET_MESSAGE_ACTIVE_TIME
+  );
 
   let scrollTimeoutId: ReturnType<typeof setTimeout> | undefined;
   let scrollHintTimeoutId: ReturnType<typeof setTimeout> | undefined;

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

@@ -1,3 +1,5 @@
+import { DEFAULT_ACTIVE_TARGET_TIME } from '@core/signal/activeTarget';
+
 export const URL_PARAMS = {
   thread: 'thread_id',
   message: 'message_id',
@@ -7,4 +9,4 @@ export const URL_PARAMS = {
 export const COLLAPSED_THREAD_INDEX_CUTOFF = 2;
 
 // The time in milliseconds that a target message will be active before it is considered stale.
-export const TARGET_MESSAGE_ACTIVE_TIME = 800;
+export const TARGET_MESSAGE_ACTIVE_TIME = DEFAULT_ACTIVE_TARGET_TIME;

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

@@ -1,10 +1,13 @@
 import { useGlobalNotificationSource } from '@app/component/GlobalAppState';
 import { TOKENS } from '@core/hotkey/tokens';
 import { registerScopeSignalHotkey } from '@core/hotkey/utils';
+import { createMethodRegistration } from '@core/orchestrator';
+import { createActiveTarget } from '@core/signal/activeTarget';
 import {
   blockElementSignal,
   blockHotkeyScopeSignal,
 } from '@core/signal/blockElement';
+import { blockHandleSignal } from '@core/signal/load';
 import {
   type ContactInfo,
   isPersonEmailContact,
@@ -32,6 +35,7 @@ import {
   untrack,
 } from 'solid-js';
 import { createStore } from 'solid-js/store';
+import { 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,21 @@ export function Email(props: EmailProps) {
   const [isContainerFilled, setIsContainerFilled] = createSignal(false);
   const [hasHandledTarget, setHasHandledTarget] = createSignal(false);
 
+  const activeTargetMessageId = createActiveTarget(targetMessageId);
+
+  const blockHandle = blockHandleSignal.get;
+  createMethodRegistration(blockHandle, {
+    goToLocationFromParams: (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 +389,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 +412,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 +611,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

@@ -2,14 +2,7 @@ import { Message } from '@core/component/Message';
 import { useDisplayName } from '@core/user';
 import type { MessageWithBodyReplyless } from '@service-email/generated/schemas';
 import { useUserId } from '@service-gql/client';
-import {
-  type Accessor,
-  createEffect,
-  createMemo,
-  createSignal,
-  For,
-  Show,
-} from 'solid-js';
+import { createEffect, createMemo, createSignal, For, Show } from 'solid-js';
 import type { SetStoreFunction } from 'solid-js/store';
 import { Portal } from 'solid-js/web';
 import { EmailAttachmentPill } from './AttachmentPill';
@@ -20,9 +13,12 @@ import { EmailMessageTopBar } from './EmailMessageTopBar';
 
 interface MessageContainerProps {
   message: MessageWithBodyReplyless;
-  index: Accessor<number>;
   expandedMessageBodyIds: Record<string, boolean>;
   setExpandedMessageBodyIds: SetStoreFunction<Record<string, boolean>>;
+  isFirstMessage: boolean;
+  isLastMessage: boolean;
+  isFocused: boolean;
+  isTarget: boolean;
 }
 
 export function MessageContainer(props: MessageContainerProps) {
@@ -47,18 +43,6 @@ export function MessageContainer(props: MessageContainerProps) {
     return props.expandedMessageBodyIds[props.message.db_id ?? ''];
   });
 
-  const isFocused = createMemo(() => {
-    return props.message.db_id === context.focusedMessageId();
-  });
-
-  const isFirstMessage = createMemo(() => {
-    return props.index() === 0;
-  });
-
-  const isLastMessage = createMemo(() => {
-    return props.index() === (context.filteredMessages().length ?? 0) - 1;
-  });
-
   const isNewMessage = createMemo(() => {
     return (
       props.message.labels.find((l) => l.provider_label_id === 'UNREAD') !==
@@ -96,7 +80,7 @@ export function MessageContainer(props: MessageContainerProps) {
   // expand appropriate messages
   createEffect(() => {
     const id = props.message.db_id;
-    if (isLastMessage() && id) {
+    if (props.isLastMessage && id) {
       props.setExpandedMessageBodyIds(id, true);
     }
     if (isNewMessage() && id) {
@@ -108,23 +92,25 @@ export function MessageContainer(props: MessageContainerProps) {
     <div class="shrink-0 flex justify-center w-full">
       <div class="macro-message-width w-full">
         <Message
-          focused={isFocused()}
-          isFirstMessage={isFirstMessage()}
-          isLastMessage={isLastMessage()}
+          id={props.message.db_id ?? undefined}
+          focused={props.isFocused}
+          isFirstMessage={props.isFirstMessage}
+          isLastMessage={props.isLastMessage}
           senderId={props.message.from?.email}
           isNewMessage={isNewMessage()}
+          isTarget={props.isTarget}
         >
           <Message.TopBar>
             <EmailMessageTopBar
               message={props.message}
-              focused={isFocused()}
+              focused={props.isFocused}
               setExpandedMessageBodyIds={props.setExpandedMessageBodyIds}
               isBodyExpanded={isBodyExpanded}
               expandedHeader={expandedHeader}
               setExpandedHeader={setExpandedHeader}
               setFocusedMessageId={context.setFocusedMessageId}
               setShowReply={setShowReply}
-              isLastMessage={isLastMessage()}
+              isLastMessage={props.isLastMessage}
             />
           </Message.TopBar>
           <Message.Body>
@@ -148,7 +134,7 @@ export function MessageContainer(props: MessageContainerProps) {
             </div>
           </Show>
         </Message>
-        <Show when={showReply() && !isLastMessage()}>
+        <Show when={showReply() && !props.isLastMessage}>
           <Message
             focused={false}
             unfocusable

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

@@ -1,5 +1,5 @@
 import { CircleSpinner } from '@core/component/CircleSpinner';
-import { For, Show } from 'solid-js';
+import { createSelector, For, Show } from 'solid-js';
 import { createStore } from 'solid-js/store';
 import { useEmailContext } from './EmailContext';
 import { MessageContainer } from './MessageContainer';
@@ -14,16 +14,22 @@ export function MessageList(props: MessageListProps) {
   const [expandedMessageBodyIds, setExpandedMessageBodyIds] = createStore<
     Record<string, boolean>
   >({});
-
-  const isScrollingToMessage = props.isScrollingToMessage;
+  const isFocusedSelector = createSelector(
+    context.focusedMessageId,
+    (a, b) => !!a && !!b && a === b
+  );
+  const isTargetSelector = createSelector(
+    context.activeTargetMessageId,
+    (a, b) => !!a && !!b && a === b
+  );
 
   return (
     <div
       class="pt-3 w-full flex-1 flex flex-col items-center overflow-y-scroll overflow-x-hidden suppress-css-brackets"
       ref={context.setMessagesRef}
       onscroll={(e) => {
         // Don't load more if we're programmatically scrolling to a message
-        if (isScrollingToMessage() || !props.initialLoadComplete) return;
+        if (props.isScrollingToMessage() || !props.initialLoadComplete) return;
 
         const threshold = 300;
         const isNearBeginning = e.currentTarget.scrollTop <= threshold;
@@ -46,8 +52,13 @@ export function MessageList(props: MessageListProps) {
         {(message, index) => {
           return (
             <MessageContainer
+              isFirstMessage={index() === 0}
+              isLastMessage={
+                index() === (context.filteredMessages().length ?? 0) - 1
+              }
+              isFocused={isFocusedSelector(message.db_id ?? undefined)}
+              isTarget={isTargetSelector(message.db_id ?? undefined)}
               message={message}
-              index={index}
               expandedMessageBodyIds={expandedMessageBodyIds}
               setExpandedMessageBodyIds={setExpandedMessageBodyIds}
             />

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

@@ -0,0 +1,3 @@
+export const URL_PARAMS = {
+  messageId: 'message_id',
+};

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?.()