feat: allow drag & drop tabs

package.json

@@ -10,11 +10,10 @@
   "license": "MIT",
   "dependencies": {
     "@logseq/libs": "^0.0.1-alpha.26",
-    "@use-gesture/react": "^10.0.0-beta.22",
     "eslint-plugin-react-hooks": "^4.2.0",
+    "keyboardjs": "^2.6.4",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "react-spring": "^9.2.4",
     "react-use": "^17.2.4"
   },
   "devDependencies": {

readme.md

@@ -7,9 +7,9 @@ UX is mainly brought from morden browsers:
 - if you click a page link while holding CTRL(or CMD on Mac) key, a new tab will be created (not visied yet)
 - you can remove the tab by click the remove button in each tab
 - you can double-click a tab to pin it. A pined tab will not be replaced or be removed.
+- you can drag & drop to reorder tabs
 
 ## TODO
-- [ ] Drag and drop tabs
-- [ ] Transitions
+- [ ] keyboard shortcuts. Eg., CTRL+TAB to switch to next tab, CTRL+SHIFT+TAB to switch to previous tab, CTRL+W to close current tab
 
 ![](./demo.gif)

src/PageTabs.css

@@ -1,5 +1,5 @@
 .logseq-tab {
-  @apply cursor-pointer font-sans select-none text-xs h-6 transition
+  @apply cursor-pointer font-sans select-none text-xs h-6 transition-all
   flex items-center rounded mx-0.5
     px-2 light:text-black dark:text-white;
 }
@@ -13,6 +13,10 @@
   @apply light:bg-cool-gray-300 dark:bg-cool-gray-900;
 }
 
+.logseq-tab[data-dragging="true"] {
+  @apply ring-1 ring-red-500 mx-6;
+}
+
 .logseq-tab-title {
   @apply overflow-ellipsis max-w-80 px-1 overflow-hidden whitespace-nowrap inline transition-all duration-200 ease-in-out;
 }