better drag & drop tabs

packages/web/src/widgets/TabsPanel.svelte

@@ -256,6 +256,79 @@
       element.scrollIntoView({ block: 'nearest', inline: 'nearest' });
     }
   }
+
+  function dragDropTab(draggingTab, targetTab) {
+    if (draggingTab.tabid == targetTab.tabid) return;
+
+    if (getTabDbKey(draggingTab) != getTabDbKey(targetTab)) {
+      dragDropDbKey(getTabDbKey(draggingTab), getTabDbKey(targetTab));
+      return;
+    }
+
+    const dbKey = getTabDbKey(draggingTab);
+    const items = sortTabs(tabsByDb[dbKey]);
+    const dstIndex = _.findIndex(items, x => x.tabid == targetTab.tabid);
+    const srcIndex = _.findIndex(items, x => x.tabid == draggingTab.tabid);
+    if (srcIndex < 0 || dstIndex < 0) {
+      console.warn('Drag tab index not found');
+      return;
+    }
+    const newItems =
+      dstIndex < srcIndex
+        ? [...items.slice(0, dstIndex), draggingTab, ...items.slice(dstIndex).filter(x => x.tabid != draggingTab.tabid)]
+        : [
+            ...items.slice(0, dstIndex + 1).filter(x => x.tabid != draggingTab.tabid),
+            draggingTab,
+            ...items.slice(dstIndex + 1),
+          ];
+
+    openedTabs.update(tabs =>
+      tabs.map(x => {
+        const index = _.findIndex(newItems, y => y.tabid == x.tabid);
+        if (index >= 0) {
+          return {
+            ...x,
+            tabOrder: index + 1,
+          };
+        }
+        return x;
+      })
+    );
+  }
+
+  function dragDropDbKey(draggingDbKey, targetDbKey) {
+    if (!draggingDbKey) return;
+    if (targetDbKey == draggingDbKey) return;
+
+    const groupOrderFiltered = _.pickBy($tabDatabaseGroupOrder, (v, k) =>
+      $openedTabs.filter(x => x.closedTime == null).find(x => getTabDbKey(x) == k)
+    );
+
+    const items = _.sortBy(_.keys(groupOrderFiltered), x => groupOrderFiltered[x]);
+
+    const dstIndex = _.indexOf(items, targetDbKey);
+    const srcIndex = _.indexOf(items, draggingDbKey);
+    if (srcIndex < 0 || dstIndex < 0) {
+      console.warn('Drag tab group index not found');
+      return;
+    }
+    const newItems =
+      dstIndex < srcIndex
+        ? [...items.slice(0, dstIndex), draggingDbKey, ...items.slice(dstIndex).filter(x => x != draggingDbKey)]
+        : [
+            ...items.slice(0, dstIndex + 1).filter(x => x != draggingDbKey),
+            draggingDbKey,
+            ...items.slice(dstIndex + 1),
+          ];
+
+    const newGroupOrder = {};
+    for (const key in groupOrderFiltered) {
+      const index = newItems.indexOf(key);
+      newGroupOrder[key] = index >= 0 ? index + 1 : groupOrderFiltered[key];
+    }
+
+    tabDatabaseGroupOrder.set(newGroupOrder);
+  }
 </script>
 
 {#each dbKeys as dbKey}
@@ -277,37 +350,7 @@
         draggingDbKeyTarget = dbKey;
       }}
       on:drop={e => {
-        if (!draggingDbKey) return;
+        dragDropDbKey(draggingDbKey, dbKey);
-        if (dbKey != draggingDbKey) {
-          const groupOrderFiltered = _.pickBy($tabDatabaseGroupOrder, (v, k) =>
-            $openedTabs.filter(x => x.closedTime == null).find(x => getTabDbKey(x) == k)
-          );
-
-          const items = _.sortBy(_.keys(groupOrderFiltered), x => groupOrderFiltered[x]);
-
-          const dstIndex = _.indexOf(items, dbKey);
-          const srcIndex = _.indexOf(items, draggingDbKey);
-          if (srcIndex < 0 || dstIndex < 0) {
-            console.warn('Drag tab group index not found');
-            return;
-          }
-          const newItems =
-            dstIndex < srcIndex
-              ? [...items.slice(0, dstIndex), draggingDbKey, ...items.slice(dstIndex).filter(x => x != draggingDbKey)]
-              : [
-                  ...items.slice(0, dstIndex + 1).filter(x => x != draggingDbKey),
-                  draggingDbKey,
-                  ...items.slice(dstIndex + 1),
-                ];
-
-          const newGroupOrder = {};
-          for (const key in groupOrderFiltered) {
-            const index = newItems.indexOf(key);
-            newGroupOrder[key] = index >= 0 ? index + 1 : groupOrderFiltered[key];
-          }
-
-          tabDatabaseGroupOrder.set(newGroupOrder);
-        }
       }}
       on:dragend={e => {
         draggingDbKey = null;
@@ -342,43 +385,7 @@
             draggingTabTarget = tab;
           }}
           on:drop={e => {
-            if (draggingTab.tabid != tab.tabid) {
+            dragDropTab(draggingTab, tab);
-              if (getTabDbKey(draggingTab) == getTabDbKey(tab)) {
-                const dbKey = getTabDbKey(draggingTab);
-                const items = sortTabs(tabsByDb[dbKey]);
-                const dstIndex = _.findIndex(items, x => x.tabid == tab.tabid);
-                const srcIndex = _.findIndex(items, x => x.tabid == draggingTab.tabid);
-                if (srcIndex < 0 || dstIndex < 0) {
-                  console.warn('Drag tab index not found');
-                  return;
-                }
-                const newItems =
-                  dstIndex < srcIndex
-                    ? [
-                        ...items.slice(0, dstIndex),
-                        draggingTab,
-                        ...items.slice(dstIndex).filter(x => x.tabid != draggingTab.tabid),
-                      ]
-                    : [
-                        ...items.slice(0, dstIndex + 1).filter(x => x.tabid != draggingTab.tabid),
-                        draggingTab,
-                        ...items.slice(dstIndex + 1),
-                      ];
-
-                openedTabs.update(tabs =>
-                  tabs.map(x => {
-                    const index = _.findIndex(newItems, y => y.tabid == x.tabid);
-                    if (index >= 0) {
-                      return {
-                        ...x,
-                        tabOrder: index + 1,
-                      };
-                    }
-                    return x;
-                  })
-                );
-              }
-            }
           }}
           on:dragend={e => {
             draggingTab = null;