web: fix reveal in list (#7297)

Signed-off-by: 01zulfi <85733202+01zulfi@users.noreply.github.com>

apps/web/src/app.css

@@ -233,3 +233,19 @@ textarea,
 #app.app-focus-mode .toasts-container {
   display: none;
 }
+
+.flash {
+  animation: flash 0.5s;
+}
+
+@keyframes flash {
+  0% {
+    background-color: color-mix(in srgb, var(--accent) 5%, transparent);
+  }
+  50% {
+    background-color: initial;
+  }
+  100% {
+    background-color: color-mix(in srgb, var(--accent) 5%, transparent);
+  }
+}

apps/web/src/components/list-container/index.tsx

@@ -44,6 +44,7 @@ import {
 } from "react-virtuoso";
 import { getRandom, useResolvedItem } from "@notesnook/common";
 import { Context } from "./types";
+import { AppEventManager, AppEvents } from "../../common/app-events";
 
 export const CustomScrollbarsVirtualList = forwardRef<
   HTMLDivElement,
@@ -91,6 +92,42 @@ function ListContainer(props: ListContainerProps) {
   const listContainerRef = useRef(null);
   // const activeItem = useRef<{ focus: boolean; id: string }>();
 
+  useEffect(() => {
+    let flashStartTimeout: NodeJS.Timeout;
+    let flashEndTimeout: NodeJS.Timeout;
+
+    AppEventManager.subscribe(
+      AppEvents.revealItemInList,
+      async (id?: string) => {
+        if (!id || !listRef.current) return;
+
+        const ids = await items.ids();
+        const index = ids.findIndex((i) => i === id);
+        if (index === -1) return;
+
+        listRef.current.scrollToIndex({
+          index,
+          align: "center",
+          behavior: "auto"
+        });
+
+        flashStartTimeout = setTimeout(() => {
+          const noteItem = document.querySelector(`#id_${id}`);
+          if (!noteItem) return;
+          noteItem.classList.add("flash");
+          flashEndTimeout = setTimeout(() => {
+            noteItem.classList.remove("flash");
+          }, 1000);
+        }, 500);
+      }
+    );
+
+    return () => {
+      clearTimeout(flashStartTimeout);
+      clearTimeout(flashEndTimeout);
+    };
+  }, []);
+
   useEffect(() => {
     return () => {
       selectionStore.toggleSelectionMode(false);

apps/web/src/stores/editor-store.ts

@@ -533,12 +533,6 @@ class EditorStore extends BaseStore<EditorStore> {
       this.updateSession(session.id, [session.type], {
         activeBlockId
       });
-
-    if (session)
-      AppEventManager.publish(
-        AppEvents.revealItemInList,
-        "note" in session ? session.note.id : session.id
-      );
   };
 
   openDiffSession = async (noteId: string, sessionId: string) => {