Auto-scroll to active note (#352)

feat: add auto-scroll to active note in list

Author: chmurson

src/components/NoteManager/NoteManager.tsx

@@ -117,7 +117,7 @@ function Notes() {
     [],
   );
 
-  const isActiveNotes = notes.some((note) => activeNotes.includes(note));
+  const isActiveNotes = notes.some((note) => activeNotes.has(note));
 
   useEffect(() => {
     if (notesReady) {

src/components/NoteManager/components/Note.tsx

@@ -1,5 +1,5 @@
 import { Button } from "@fluffylabs/shared-ui";
-import { type ChangeEvent, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { type ChangeEvent, type RefObject, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { validateMath } from "../../../utils/validateMath";
 import { useVersionContext } from "../../LocationProvider/VersionProvider";
 import { useGetLocationParamsToHash } from "../../LocationProvider/hooks/useGetLocationParamsToHash";
@@ -13,19 +13,20 @@ import { NoteLink } from "./NoteLink";
 import { NoteContainer } from "./SimpleComponents/NoteContainer";
 
 export type NotesItem = {
-  location: string; // serialized InDocSelection
+  location: string;
   content: string;
 };
 
 type NoteProps = {
+  ref?: RefObject<HTMLDivElement | null>;
   note: IDecoratedNote;
   active: boolean;
   onEditNote: INotesContext["handleUpdateNote"];
   onDeleteNote: INotesContext["handleDeleteNote"];
   onSelectNote: (note: IDecoratedNote, opts: { type: "currentVersion" | "originalVersion" | "close" }) => void;
 };
 
-export function Note({ note, active = false, onEditNote, onDeleteNote, onSelectNote }: NoteProps) {
+export function Note({ ref, note, active = false, onEditNote, onDeleteNote, onSelectNote }: NoteProps) {
   const [isEditing, setIsEditing] = useState(false);
 
   const [noteDirty, setNoteDirty] = useState<IStorageNote>({
@@ -189,7 +190,8 @@ export function Note({ note, active = false, onEditNote, onDeleteNote, onSelectN
   const [isDropdownOpen, setIsDropdownOpen] = useState(false);
   const mousePositionRef = useRef({ x: 0, y: 0 });
 
-  const noteRef = useRef<HTMLDivElement>(null);
+  const internalNoteRef = useRef<HTMLDivElement>(null);
+  const noteRef = ref ? ref : internalNoteRef;
 
   useEffect(() => {
     if (!isDropdownOpen) return;

src/components/NoteManager/components/NotesList.tsx

@@ -1,4 +1,4 @@
-import { memo } from "react";
+import { memo, useEffect, useRef } from "react";
 import type { IDecoratedNote } from "../../NotesProvider/types/DecoratedNote";
 import type { IStorageNote } from "../../NotesProvider/types/StorageNote";
 import { Note } from "./Note";
@@ -13,23 +13,43 @@ export const NotesList = ({
   onSelectNote,
 }: {
   notes: IDecoratedNote[];
-  activeNotes: IDecoratedNote[];
+  activeNotes: Set<IDecoratedNote>;
   onEditNote: (noteToReplace: IDecoratedNote, newNote: IStorageNote) => void;
   onDeleteNote: (noteToDelete: IDecoratedNote) => void;
   onSelectNote: (note: IDecoratedNote, opts: { type: "currentVersion" | "originalVersion" | "close" }) => void;
 }) => {
+  const noteToScrollToRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (activeNotes.size > 0 && noteToScrollToRef.current && !isMostlyVisible(noteToScrollToRef.current)) {
+      noteToScrollToRef.current.scrollIntoView({ behavior: "smooth" });
+    }
+  }, [activeNotes]);
+
   return (
     <>
-      {notes.map((note) => (
-        <MemoizedNote
-          key={note.key}
-          active={activeNotes.includes(note)}
-          note={note}
-          onEditNote={onEditNote}
-          onDeleteNote={onDeleteNote}
-          onSelectNote={onSelectNote}
-        />
-      ))}
+      {notes.map((note) => {
+        const active = activeNotes.has(note);
+        const isFirstActive = active && activeNotes.values().next().value === note;
+
+        return (
+          <MemoizedNote
+            ref={isFirstActive ? noteToScrollToRef : undefined}
+            key={note.key}
+            active={active}
+            note={note}
+            onEditNote={onEditNote}
+            onDeleteNote={onDeleteNote}
+            onSelectNote={onSelectNote}
+          />
+        );
+      })}
     </>
   );
 };
+
+const isMostlyVisible = (el: HTMLElement) => {
+  const rect = el.getBoundingClientRect();
+  const visibleHeight = Math.min(rect.bottom, window.innerHeight) - Math.max(rect.top, 0);
+  return visibleHeight >= rect.height * 0.6;
+};

src/components/NotesProvider/NotesProvider.tsx

@@ -22,7 +22,7 @@ export interface INotesContext {
   setNotesPinned: (v: boolean) => void;
   notesReady: boolean;
   notes: IDecoratedNote[];
-  activeNotes: IDecoratedNote[];
+  activeNotes: Set<IDecoratedNote>;
   labels: ILabelTreeNode[];
   canUndo: boolean;
   canRedo: boolean;
@@ -43,6 +43,8 @@ interface INotesProviderProps {
   children: ReactNode;
 }
 
+const emptyActiveNotes = new Set<IDecoratedNote>();
+
 export function NotesProvider({ children }: INotesProviderProps) {
   const [remoteSources, setRemoteSources] = useState<IRemoteSource[]>([]);
 
@@ -123,11 +125,14 @@ export function NotesProvider({ children }: INotesProviderProps) {
   }, []);
 
   const activeNotes = useMemo(() => {
-    if (!locationParams || !locationParams.selectionStart || !locationParams.selectionEnd) return [];
+    if (!locationParams || !locationParams.selectionStart || !locationParams.selectionEnd) return emptyActiveNotes;
 
     const { selectionStart, selectionEnd } = locationParams;
 
-    return filteredNotes.filter((note) => areSelectionsEqual(note.current, { selectionStart, selectionEnd }));
+    const activeNotesArray = filteredNotes.filter((note) =>
+      areSelectionsEqual(note.current, { selectionStart, selectionEnd }),
+    );
+    return new Set(activeNotesArray);
   }, [filteredNotes, locationParams]);
 
   const context: INotesContext = {