ENG-1136: Notify user when suggestive mode suggestion is adopted

When a user adopts a suggestion in Suggestive Mode:
- Shows a toast "Added to [[Page Name]]" if the target page is already open in the main window or if sidebar navigation is disabled
- Opens the target page in the right sidebar (or brings it to the top if already open) otherwise
- Shows a toast confirming the created relation when a reified relation is adopted instead of a block

Adds a new `notifySuggestiveModeAdoption` utility to keep notification logic separate from `SuggestionsBody`.

Co-authored-by: Cursor <cursoragent@cursor.com>

Author: trangdoan982

apps/roam/src/components/SuggestionsBody.tsx

@@ -34,6 +34,7 @@ import type { PageGroup } from "~/components/settings/utils/zodSchema";
 import { createReifiedRelation } from "~/utils/createReifiedBlock";
 import { getStoredRelationsEnabled } from "~/utils/storedRelations";
 import posthog from "posthog-js";
+import { notifySuggestiveModeAdopted } from "~/utils/notifySuggestiveModeAdoption";
 
 export type DiscourseData = {
   results: Awaited<ReturnType<typeof getDiscourseContextResults>>;
@@ -330,50 +331,60 @@ const SuggestionsBody = ({
             rel.destination === discourseNode.type) ||
           (rel.destination === node.type && rel.source === discourseNode.type),
       );
-      if (relevantRelns.length) {
-        if (relevantRelns.length > 1) {
-          // I don't want to panick the user with this.
-          // TODO: Maybe think of adding a relation type picker?
-          console.warn("Picking an arbitrary relation");
-        }
-        const rel = relevantRelns[0];
-        try {
-          if (rel.destination === node.type)
-            await createReifiedRelation({
-              sourceUid: tagUid,
-              destinationUid: node.uid,
-              relationBlockUid: rel.id,
-            });
-          else
-            await createReifiedRelation({
-              sourceUid: node.uid,
-              destinationUid: tagUid,
-              relationBlockUid: rel.id,
-            });
-        } catch (error) {
-          console.error("Failed to create reified relation:", error);
-          renderToast({
-            id: "suggestions-create-block-error",
-            content: "Failed to create relation",
-            intent: "danger",
-            timeout: 5000,
-          });
-          return;
-        }
-      } else {
+      if (!relevantRelns.length) {
         renderToast({
           id: "suggestions-create-block-error",
           content: "Could not identify a relevant relation",
           intent: "danger",
           timeout: 5000,
         });
+        return;
       }
+      if (relevantRelns.length > 1) {
+        // I don't want to panick the user with this.
+        // TODO: Maybe think of adding a relation type picker?
+        console.warn("Picking an arbitrary relation");
+      }
+      const rel = relevantRelns[0];
+      try {
+        if (rel.destination === node.type)
+          await createReifiedRelation({
+            sourceUid: tagUid,
+            destinationUid: node.uid,
+            relationBlockUid: rel.id,
+          });
+        else
+          await createReifiedRelation({
+            sourceUid: node.uid,
+            destinationUid: tagUid,
+            relationBlockUid: rel.id,
+          });
+      } catch (error) {
+        console.error("Failed to create reified relation:", error);
+        renderToast({
+          id: "suggestions-create-block-error",
+          content: "Failed to create relation",
+          intent: "danger",
+          timeout: 5000,
+        });
+        return;
+      }
+      await notifySuggestiveModeAdopted({
+        adoptionType: "relation",
+        sourceTitle: tag,
+        destinationTitle: node.text,
+      });
     } else {
       await createBlock({
         parentUid: blockUid,
         node: { text: `[[${node.text}]]` },
       });
+      await notifySuggestiveModeAdopted({
+        adoptionType: "block",
+        targetBlockUid: blockUid,
+      });
     }
+
     posthog.capture("Suggestive Mode: Suggestion Adopted", {
       tag,
       nodeType: node.type,

apps/roam/src/utils/notifySuggestiveModeAdoption.ts

@@ -0,0 +1,130 @@
+import { render as renderToast } from "roamjs-components/components/Toast";
+import getPageTitleByPageUid from "roamjs-components/queries/getPageTitleByPageUid";
+import getPageUidByBlockUid from "roamjs-components/queries/getPageUidByBlockUid";
+import getCurrentPageUid from "roamjs-components/dom/getCurrentPageUid";
+import openBlockInSidebar from "roamjs-components/writes/openBlockInSidebar";
+import { getPersonalSetting } from "~/components/settings/utils/accessors";
+import { PERSONAL_KEYS } from "~/components/settings/utils/settingKeys";
+import { isPageUid } from "~/utils/isPageUid";
+
+type RoamSidebarWindow = {
+  type: string;
+  "window-id": string;
+  "block-uid"?: string;
+};
+
+export type NotifySuggestiveModeAdoptedParams =
+  | { adoptionType: "block"; targetBlockUid: string }
+  | { adoptionType: "relation"; sourceTitle: string; destinationTitle: string };
+
+const resolveTargetPageUid = (blockUid: string): string => {
+  if (isPageUid(blockUid)) return blockUid;
+  return getPageUidByBlockUid(blockUid) || blockUid;
+};
+
+const isTargetOpenInMainWindow = (targetBlockUid: string): boolean => {
+  const mainWindowUid = getCurrentPageUid();
+  if (!mainWindowUid) return false;
+  if (mainWindowUid === targetBlockUid) return true;
+  return mainWindowUid === resolveTargetPageUid(targetBlockUid);
+};
+
+const getSidebarWindows = (): RoamSidebarWindow[] => {
+  try {
+    const windows = window.roamAlphaAPI.ui.rightSidebar.getWindows();
+    return windows ?? [];
+  } catch {
+    return [];
+  }
+};
+
+const findOutlineSidebarWindowId = ({
+  blockUid,
+  pageUid,
+  windows,
+}: {
+  blockUid: string;
+  pageUid: string;
+  windows: RoamSidebarWindow[];
+}): string | undefined => {
+  return windows.find(
+    (w) =>
+      w.type === "outline" &&
+      (w["block-uid"] === blockUid || w["block-uid"] === pageUid),
+  )?.["window-id"];
+};
+
+const bringSidebarWindowToTop = (windowId: string): void => {
+  const sidebarWindow = document.querySelector<HTMLElement>(
+    `[data-sidebar-window-id="${windowId}"]`,
+  );
+  const titleDisplay =
+    sidebarWindow?.querySelector<HTMLElement>(".rm-title-display") ??
+    document.querySelector<HTMLElement>(
+      ".rm-sidebar-outline .rm-title-display",
+    );
+
+  titleDisplay?.dispatchEvent(new MouseEvent("mousedown", { bubbles: true }));
+};
+
+const focusTopSidebarOutline = (): void => {
+  setTimeout(() => {
+    document
+      .querySelector<HTMLElement>(".rm-sidebar-outline .rm-title-display")
+      ?.dispatchEvent(new MouseEvent("mousedown", { bubbles: true }));
+  }, 100);
+};
+
+const showBlockAdoptedToast = (pageUid: string): void => {
+  const pageTitle = getPageTitleByPageUid(pageUid);
+  renderToast({
+    id: "suggestive-mode-adopted",
+    content: pageTitle ? `Added to [[${pageTitle}]]` : "Added to outline",
+    intent: "success",
+    timeout: 4000,
+  });
+};
+
+const notifyBlockAdopted = async (targetBlockUid: string): Promise<void> => {
+  const pageUid = resolveTargetPageUid(targetBlockUid);
+
+  if (isTargetOpenInMainWindow(targetBlockUid)) {
+    showBlockAdoptedToast(pageUid);
+    return;
+  }
+
+  if (getPersonalSetting<boolean>([PERSONAL_KEYS.disableSidebarOpen])) {
+    showBlockAdoptedToast(pageUid);
+    return;
+  }
+
+  const existingWindowId = findOutlineSidebarWindowId({
+    blockUid: targetBlockUid,
+    pageUid,
+    windows: getSidebarWindows(),
+  });
+
+  if (existingWindowId) {
+    bringSidebarWindowToTop(existingWindowId);
+    return;
+  }
+
+  await openBlockInSidebar(targetBlockUid);
+  focusTopSidebarOutline();
+};
+
+export const notifySuggestiveModeAdopted = async (
+  params: NotifySuggestiveModeAdoptedParams,
+): Promise<void> => {
+  if (params.adoptionType === "relation") {
+    renderToast({
+      id: "suggestive-mode-adopted",
+      content: `Added relation between [[${params.sourceTitle}]] and [[${params.destinationTitle}]]`,
+      intent: "success",
+      timeout: 4000,
+    });
+    return;
+  }
+
+  await notifyBlockAdopted(params.targetBlockUid);
+};