From fccf2a7b3ee85d14ba3f498a77563cb79a4316fc Mon Sep 17 00:00:00 2001
From: 01zulfi <85733202+01zulfi@users.noreply.github.com>
Date: Fri, 16 May 2025 15:20:28 +0500
Subject: [PATCH] web: add support for drag/dropping notes on tab strip (#8090)

Signed-off-by: 01zulfi <85733202+01zulfi@users.noreply.github.com>
---
 apps/web/src/components/editor/action-bar.tsx | 25 +++++++++++++++++++
 apps/web/src/stores/editor-store.ts           | 12 +++++++++
 2 files changed, 37 insertions(+)

diff --git a/apps/web/src/components/editor/action-bar.tsx b/apps/web/src/components/editor/action-bar.tsx
index 505d72398..3786f80ac 100644
--- a/apps/web/src/components/editor/action-bar.tsx
+++ b/apps/web/src/components/editor/action-bar.tsx
@@ -82,6 +82,7 @@ import { getWindowControls } from "../title-bar";
 import useTablet from "../../hooks/use-tablet";
 import { isMac } from "../../utils/platform";
 import { CREATE_BUTTON_MAP } from "../../common";
+import { getDragData } from "../../utils/data-transfer";
 
 type ToolButton = {
   title: string;
@@ -340,6 +341,19 @@ const TabStrip = React.memo(function TabStrip() {
             e.stopPropagation();
             useEditorStore.getState().addTab();
           }}
+          onDragOver={(e) => {
+            e.preventDefault();
+          }}
+          onDrop={(e) => {
+            e.stopPropagation();
+
+            const noteId = getDragData(e.dataTransfer, "note")?.[0];
+            if (!noteId) return;
+
+            useEditorStore
+              .getState()
+              .openSession(noteId, { openInNewTab: true });
+          }}
           data-test-id="tabs"
         >
           <ReorderableList
@@ -519,6 +533,17 @@ function Tab(props: TabProps) {
       }}
       className={`tab${isActive || active?.id === id ? " active" : ""}`}
       data-test-id={`tab-${id}`}
+      onDragOver={(e) => {
+        e.preventDefault();
+      }}
+      onDrop={(e) => {
+        e.stopPropagation();
+
+        const noteId = getDragData(e.dataTransfer, "note")?.[0];
+        if (!noteId) return;
+
+        useEditorStore.getState().openSessionInTab(noteId, id);
+      }}
       sx={{
         height: "100%",
         cursor: "pointer",
diff --git a/apps/web/src/stores/editor-store.ts b/apps/web/src/stores/editor-store.ts
index 99198e02b..5a03ce0a6 100644
--- a/apps/web/src/stores/editor-store.ts
+++ b/apps/web/src/stores/editor-store.ts
@@ -832,6 +832,18 @@ class EditorStore extends BaseStore<EditorStore> {
     }
   };
 
+  openSessionInTab = async (noteId: string, tabId: string) => {
+    const { tabs } = this.get();
+    const tab = tabs.find((t) => t.id === tabId);
+    if (!tab) {
+      this.openSession(noteId, { openInNewTab: true });
+      return;
+    }
+
+    this.focusTab(tabId);
+    this.openSession(noteId, { force: true });
+  };
+
   focusNextTab = () => {
     const { tabs, activeTabId } = this.get();
     if (tabs.length <= 1) return;