web: fix cannot navigate into nested notebook by hovering on it

apps/web/src/components/note/index.tsx

@@ -233,7 +233,9 @@ function Note(props: NoteProps) {
 
               {note.readonly && <Readonly size={15} />}
 
-              {note.favorite && <Star color={primary} size={15} />}
+              {note.favorite && (
+                <Star data-test-id="favorite" color={primary} size={15} />
+              )}
 
               {tags?.items.map((tag) => {
                 return (

apps/web/src/components/notebook/index.tsx

@@ -43,44 +43,7 @@ import { getFormattedDate } from "@notesnook/common";
 import { MenuItem } from "@notesnook/ui";
 import { Notebook } from "@notesnook/core";
 import { handleDrop } from "../../common/drop-handler";
-
-function useDragHandler(id: string) {
-  const isDraggingOver = useRef(false);
-  const bounds = useRef<DOMRect>();
-
-  const isDragLeaving = useCallback((e: React.DragEvent) => {
-    if (
-      !isDraggingOver.current ||
-      !bounds.current ||
-      (e.clientX >= bounds.current.x &&
-        e.clientX <= bounds.current.right &&
-        e.clientY >= bounds.current.y &&
-        e.clientY <= bounds.current.bottom)
-    )
-      return false;
-
-    isDraggingOver.current = false;
-    bounds.current = undefined;
-    return true;
-  }, []);
-
-  const isDragEntering = useCallback(
-    (e: React.DragEvent) => {
-      if (
-        isDraggingOver.current ||
-        !(e.target instanceof HTMLElement) ||
-        (e.target.id !== id && !e.target.closest(`#${id}`))
-      )
-        return false;
-      isDraggingOver.current = true;
-      bounds.current = e.target.closest(`#${id}`)!.getBoundingClientRect();
-      return true;
-    },
-    [id]
-  );
-
-  return { isDragEntering, isDragLeaving };
-}
+import { useDragHandler } from "../../hooks/use-drag-handler";
 
 type NotebookProps = {
   item: Notebook;

apps/web/src/components/sub-notebook/index.tsx

@@ -27,8 +27,8 @@ import { MenuItem } from "@notesnook/ui";
 import { showAddNotebookDialog } from "../../common/dialog-controller";
 import { navigate } from "../../navigation";
 import { useCallback, useRef } from "react";
-import { getDragData } from "../../utils/data-transfer";
 import { handleDrop } from "../../common/drop-handler";
+import { useDragHandler } from "../../hooks/use-drag-handler";
 
 type SubNotebookProps = {
   item: Notebook;
@@ -60,6 +60,7 @@ function SubNotebook(props: SubNotebookProps) {
       store.context?.type === "notebook" && store.context.id === item.id
   );
   const dragTimeout = useRef(0);
+  const { isDragEntering, isDragLeaving } = useDragHandler(`id_${item.id}`);
 
   const openNotebook = useCallback(async () => {
     if (isOpened) return;
@@ -82,17 +83,18 @@ function SubNotebook(props: SubNotebookProps) {
       item={item}
       onClick={() => openNotebook()}
       onDragEnter={(e) => {
+        if (!isDragEntering(e)) return;
         e.currentTarget.focus();
         focus();
 
-        const noteIds = getDragData(e.dataTransfer, "note");
-        const notebookIds = getDragData(e.dataTransfer, "notebook");
         dragTimeout.current = setTimeout(() => {
-          if (notebookIds.length > 0) expand();
-          else if (noteIds.length > 0) openNotebook();
+          openNotebook();
         }, 1000) as unknown as number;
       }}
-      onDragLeave={() => clearTimeout(dragTimeout.current)}
+      onDragLeave={(e) => {
+        if (!isDragLeaving(e)) return;
+        clearTimeout(dragTimeout.current);
+      }}
       onDrop={async (e) => {
         clearTimeout(dragTimeout.current);
         handleDrop(e.dataTransfer, item);

apps/web/src/hooks/use-drag-handler.ts

@@ -0,0 +1,58 @@
+/*
+This file is part of the Notesnook project (https://notesnook.com/)
+
+Copyright (C) 2023 Streetwriters (Private) Limited
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU General Public License for more details.
+
+You should have received a copy of the GNU General Public License
+along with this program.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+import { useCallback, useRef } from "react";
+
+export function useDragHandler(id: string) {
+  const isDraggingOver = useRef(false);
+  const bounds = useRef<DOMRect>();
+
+  const isDragLeaving = useCallback((e: React.DragEvent) => {
+    if (
+      !isDraggingOver.current ||
+      !bounds.current ||
+      (e.clientX >= bounds.current.x &&
+        e.clientX <= bounds.current.right &&
+        e.clientY >= bounds.current.y &&
+        e.clientY <= bounds.current.bottom)
+    )
+      return false;
+
+    isDraggingOver.current = false;
+    bounds.current = undefined;
+    return true;
+  }, []);
+
+  const isDragEntering = useCallback(
+    (e: React.DragEvent) => {
+      if (
+        isDraggingOver.current ||
+        !(e.target instanceof HTMLElement) ||
+        (e.target.id !== id && !e.target.closest(`#${id}`))
+      )
+        return false;
+      isDraggingOver.current = true;
+      bounds.current = e.target.closest(`#${id}`)!.getBoundingClientRect();
+      return true;
+    },
+    [id]
+  );
+
+  return { isDragEntering, isDragLeaving };
+}

apps/web/src/views/notebook.tsx

@@ -442,7 +442,12 @@ function NotebookHeader({
   const { title, description, dateEdited } = notebook;
 
   return (
-    <Flex mx={2} my={2} sx={{ flexDirection: "column", minWidth: 200 }}>
+    <Flex
+      data-test-id="notebook-header"
+      mx={2}
+      my={2}
+      sx={{ flexDirection: "column", minWidth: 200 }}
+    >
       <Flex sx={{ alignItems: "center", mb: 1 }}>
         <Button
           ref={moreCrumbsRef}
@@ -529,7 +534,11 @@ function NotebookHeader({
       </Flex>
       <Text variant="subBody">{getFormattedDate(dateEdited, "date")}</Text>
       <Flex sx={{ alignItems: "center", justifyContent: "space-between" }}>
-        <Text variant="heading" sx={{ fontSize: "subheading" }}>
+        <Text
+          data-test-id="notebook-title"
+          variant="heading"
+          sx={{ fontSize: "subheading" }}
+        >
           {title}
         </Text>
         <Flex>