add: drag&drop workspace tab to open in new window

addon/chrome/locale/en-US/addon.properties

@@ -33,6 +33,7 @@ templateEditor.reset=Reset
 templateEditor.help=Help
 
 tab.name=Note Workspace
+tab.openInWindow=Drag and drop here to open workspace in new window
 
 workspaceWindow.name=Note Workspace
 

addon/chrome/locale/zh-CN/addon.properties

@@ -33,6 +33,7 @@ templateEditor.reset=重置
 templateEditor.help=帮助
 
 tab.name=笔记工作区
+tab.openInWindow=拖放到此处以在新窗口打开
 
 workspaceWindow.name=笔记工作区
 

src/modules/workspace/tab.ts

@@ -300,7 +300,9 @@ export async function activateWorkspaceTab() {
     });
   });
   // load workspace content
-  addon.hooks.onInitWorkspace(addon.data.workspace.tab.container);
+  const container = addon.data.workspace.tab.container;
+  initWorkspaceTabDragDrop(container, tabElem);
+  addon.hooks.onInitWorkspace(container);
   registerWorkspaceTabPaneObserver();
 }
 
@@ -329,3 +331,79 @@ function setWorkspaceTabStatus(status: boolean) {
   addon.data.workspace.tab.active = status;
   setPref("workspace.tab.active", status);
 }
+
+function initWorkspaceTabDragDrop(
+  container?: XUL.Box,
+  tabElem?: HTMLDivElement
+) {
+  if (!container) {
+    return;
+  }
+  const rect = tabElem?.getBoundingClientRect();
+  ztoolkit.UI.appendElement(
+    {
+      tag: "div",
+      id: "bn-workspace-tab-drop",
+      styles: {
+        background: "#252526",
+        opacity: "0.6",
+        width: "100%",
+        height: "100px",
+        position: "fixed",
+        left: "0px",
+        top: `${rect?.bottom}px`,
+        textAlign: "center",
+        display: "flex",
+        visibility: "hidden",
+        zIndex: "65535",
+      },
+      properties: {
+        hidden: true,
+        ondrop: (ev: DragEvent) => {
+          addon.hooks.onOpenWorkspace("window");
+        },
+        ondragenter: (ev: DragEvent) => {
+          ev.preventDefault();
+          ev.stopPropagation();
+          dropElem.style.opacity = "0.9";
+          if (ev.dataTransfer) {
+            ev.dataTransfer.dropEffect = "move";
+          }
+        },
+        ondragover: (ev: DragEvent) => {
+          ev.preventDefault();
+          ev.stopPropagation();
+        },
+        ondragleave: (ev: DragEvent) => {
+          ev.preventDefault();
+          ev.stopPropagation();
+          dropElem.style.opacity = "0.6";
+        },
+      },
+      children: [
+        {
+          tag: "div",
+          styles: {
+            margin: "auto",
+            textAlign: "center",
+            color: "#fff",
+          },
+          properties: {
+            innerHTML: getString("tab.openInWindow"),
+          },
+        },
+      ],
+      enableElementRecord: false,
+    },
+    container
+  );
+  const dropElem = container.querySelector(
+    "#bn-workspace-tab-drop"
+  ) as HTMLDivElement;
+  tabElem?.addEventListener("dragstart", (ev) => {
+    dropElem.style.visibility = "visible";
+  });
+  tabElem?.addEventListener("dragend", (ev) => {
+    dropElem.style.visibility = "hidden";
+  });
+}