Redesign adding a new note

src/components/NoteManager/NoteManager.tsx

@@ -1,24 +1,24 @@
-import { memo, useCallback, useContext, useEffect, useRef, useState } from "react";
+import { memo, useCallback, useContext, useEffect, useRef } from "react";
 import "./NoteManager.css";
 import type { ISynctexBlockId } from "@fluffylabs/links-metadata";
-import { Button, Textarea } from "@fluffylabs/shared-ui";
+import { cn } from "@fluffylabs/shared-ui";
 import { twMerge } from "tailwind-merge";
-import { validateMath } from "../../utils/validateMath";
+import { useLatestCallback } from "../../hooks/useLatestCallback";
 import { type ILocationContext, LocationContext } from "../LocationProvider/LocationProvider";
 import { type INotesContext, NotesContext } from "../NotesProvider/NotesProvider";
-import { LABEL_LOCAL } from "../NotesProvider/consts/labels";
 import type { IDecoratedNote } from "../NotesProvider/types/DecoratedNote";
 import type { IStorageNote } from "../NotesProvider/types/StorageNote";
-import { Selection } from "../Selection/Selection";
+import { areSelectionsEqual } from "../NotesProvider/utils/areSelectionsEqual";
 import { type ISelectionContext, SelectionContext } from "../SelectionProvider/SelectionProvider";
+import { InactiveNoteSkeleton } from "./components/InactiveNoteSkeleton";
+import { NewNote } from "./components/NewNote";
 import { NotesList } from "./components/NotesList";
 
 const DEFAULT_AUTHOR = "";
 
 export function NoteManager({ className }: { className?: string }) {
   return (
     <div className={twMerge("notes-wrapper gap-4", className)}>
-      <Selection />
       <Notes />
     </div>
   );
@@ -27,62 +27,66 @@ export function NoteManager({ className }: { className?: string }) {
 const MemoizedNotesList = memo(NotesList);
 
 function Notes() {
-  const [noteContent, setNoteContent] = useState("");
-  const [noteContentError, setNoteContentError] = useState("");
   const { locationParams, setLocationParams } = useContext(LocationContext) as ILocationContext;
   const { notesReady, activeNotes, notes, handleAddNote, handleDeleteNote, handleUpdateNote } = useContext(
     NotesContext,
   ) as INotesContext;
   const { selectedBlocks, pageNumber, handleClearSelection } = useContext(SelectionContext) as ISelectionContext;
+  const keepShowingNewNote = useRef<{ selectionEnd: ISynctexBlockId; selectionStart: ISynctexBlockId }>(undefined);
 
-  const handleAddNoteRef = useRef(handleAddNote);
-  handleAddNoteRef.current = handleAddNote;
-  const handleDeleteNoteRef = useRef(handleDeleteNote);
-  handleDeleteNoteRef.current = handleDeleteNote;
-  const handleUpdateNoteRef = useRef(handleUpdateNote);
-  handleUpdateNoteRef.current = handleUpdateNote;
-
-  const memoizedHandleDeleteNote = useCallback((note: IDecoratedNote) => {
-    handleDeleteNoteRef.current(note);
-  }, []);
-
-  const memoizedHandleUpdateNote = useCallback((note: IDecoratedNote, newNote: IStorageNote) => {
-    handleUpdateNoteRef.current(note, newNote);
-  }, []);
-
-  const handleAddNoteClick = useCallback(() => {
-    if (
-      selectedBlocks.length === 0 ||
-      pageNumber === null ||
-      !locationParams.selectionStart ||
-      !locationParams.selectionEnd
-    ) {
-      throw new Error("Attempted saving a note without selection.");
-    }
-
-    setNoteContentError("");
+  const latestHandleAddNote = useLatestCallback(handleAddNote);
+  const latestDeleteNote = useLatestCallback(handleDeleteNote);
+  const latestUpdateNote = useLatestCallback(handleUpdateNote);
 
-    const mathValidationError = validateMath(noteContent);
+  const memoizedHandleDeleteNote = useCallback(
+    (note: IDecoratedNote) => {
+      latestDeleteNote.current(note);
+      handleClearSelection();
+    },
+    [handleClearSelection, latestDeleteNote],
+  );
 
-    if (mathValidationError) {
-      setNoteContentError(mathValidationError);
-      return;
-    }
+  const memoizedHandleUpdateNote = useCallback(
+    (note: IDecoratedNote, newNote: IStorageNote) => {
+      latestUpdateNote.current(note, newNote);
+    },
+    [latestUpdateNote],
+  );
 
-    const newNote: IStorageNote = {
-      noteVersion: 3,
-      content: noteContent,
-      date: Date.now(),
-      author: DEFAULT_AUTHOR,
-      selectionStart: locationParams.selectionStart,
-      selectionEnd: locationParams.selectionEnd,
-      version: locationParams.version,
-      labels: [LABEL_LOCAL],
-    };
-
-    handleAddNoteRef.current(newNote);
+  const handleNewNoteCancel = useCallback(() => {
     handleClearSelection();
-  }, [noteContent, pageNumber, selectedBlocks, handleClearSelection, locationParams]);
+  }, [handleClearSelection]);
+
+  const handleAddNoteClick = useCallback(
+    ({ noteContent, labels }: { noteContent: string; labels: string[] }) => {
+      if (
+        selectedBlocks.length === 0 ||
+        pageNumber === null ||
+        !locationParams.selectionStart ||
+        !locationParams.selectionEnd
+      ) {
+        throw new Error("Attempted saving a note without selection.");
+      }
+
+      const newNote: IStorageNote = {
+        noteVersion: 3,
+        content: noteContent,
+        date: Date.now(),
+        author: DEFAULT_AUTHOR,
+        selectionStart: locationParams.selectionStart,
+        selectionEnd: locationParams.selectionEnd,
+        version: locationParams.version,
+        labels,
+      };
+
+      latestHandleAddNote.current(newNote);
+      keepShowingNewNote.current = {
+        selectionStart: locationParams.selectionStart,
+        selectionEnd: locationParams.selectionEnd,
+      };
+    },
+    [pageNumber, selectedBlocks, locationParams, latestHandleAddNote],
+  );
 
   const locationRef = useRef({ locationParams, setLocationParams });
   locationRef.current = { locationParams, setLocationParams };
@@ -113,38 +117,51 @@ function Notes() {
     [],
   );
 
+  const isActiveNotes = notes.some((note) => activeNotes.includes(note));
+
   useEffect(() => {
-    if (selectedBlocks.length === 0) {
-      setNoteContent("");
-      setNoteContentError("");
+    if (notesReady) {
+      keepShowingNewNote.current = undefined;
     }
-  }, [selectedBlocks]);
+  }, [notesReady]);
 
   return (
-    <div className="note-manager flex flex-col gap-2.5" style={{ opacity: notesReady ? 1.0 : 0.3 }}>
-      <div className="flex flex-col p-2 gap-2">
-        <Textarea
-          disabled={selectedBlocks.length === 0}
-          className={noteContentError ? "error" : ""}
-          autoFocus
-          value={noteContent}
-          onChange={(ev) => setNoteContent(ev.currentTarget.value)}
-          placeholder="Add a note to the selected fragment. Math typesetting is supported! Use standard delimiters such as $...$, \[...\] or \begin{equation}...\end{equation}."
+    <div className={cn("note-manager flex flex-col gap-2.5", !notesReady && "opacity-30 pointer-events-none")}>
+      {locationParams.selectionEnd &&
+        locationParams.selectionStart &&
+        pageNumber !== null &&
+        selectedBlocks.length > 0 &&
+        !isActiveNotes &&
+        (notesReady || areSelectionsEqual(locationParams, keepShowingNewNote.current)) && (
+          <NewNote
+            selectionStart={locationParams.selectionStart}
+            selectionEnd={locationParams.selectionEnd}
+            version={locationParams.version}
+            onCancel={handleNewNoteCancel}
+            onSave={handleAddNoteClick}
+          />
+        )}
+
+      {!notesReady && notes.length === 0 && (
+        <>
+          <InactiveNoteSkeleton />
+          <InactiveNoteSkeleton />
+          <InactiveNoteSkeleton />
+          <InactiveNoteSkeleton />
+        </>
+      )}
+
+      {notesReady && notes.length === 0 && <div className="no-notes text-sidebar-foreground">No notes available</div>}
+
+      {notes.length > 0 && (
+        <MemoizedNotesList
+          activeNotes={activeNotes}
+          notes={notes}
+          onEditNote={memoizedHandleUpdateNote}
+          onDeleteNote={memoizedHandleDeleteNote}
+          onSelectNote={memoizedHandleSelectNote}
         />
-
-        {noteContentError ? <div className="validation-message">{noteContentError}</div> : null}
-        <Button disabled={noteContent.length < 1} onClick={handleAddNoteClick} variant="secondary">
-          Add
-        </Button>
-      </div>
-
-      <MemoizedNotesList
-        activeNotes={activeNotes}
-        notes={notes}
-        onEditNote={memoizedHandleUpdateNote}
-        onDeleteNote={memoizedHandleDeleteNote}
-        onSelectNote={memoizedHandleSelectNote}
-      />
+      )}
     </div>
   );
 }

src/components/NoteManager/components/InactiveNoteSkeleton.tsx

@@ -0,0 +1,26 @@
+import { cn } from "@fluffylabs/shared-ui";
+import { NoteContainer } from "./SimpleComponents/NoteContainer";
+
+const skeletonLine = "rounded-md bg-gray-300/100 dark:bg-white/10";
+
+export const InactiveNoteSkeleton = ({ className }: { className?: string }) => (
+  <NoteContainer
+    active={false}
+    aria-hidden="true"
+    className={cn(
+      "note relative rounded-xl p-4 bg-[var(--inactive-note-bg)] border border-[var(--border)]/60 select-none animate-pulse",
+      className,
+    )}
+  >
+    <div className="flex flex-col gap-3">
+      <div className="flex items-center gap-2">
+        <div className={cn("h-4 w-9/12 rounded-md bg-brand-primary/50")} />
+      </div>
+      <div className="space-y-1">
+        <div className={cn("h-4 w-full", skeletonLine)} />
+        <div className={cn("h-4 w-11/12", skeletonLine)} />
+        <div className={cn("h-4 w-8/12", skeletonLine)} />
+      </div>
+    </div>
+  </NoteContainer>
+);