web/app: reorder tabs improvements

web/app/nav-tabs.js

@@ -1,42 +1,37 @@
 var t = `
-<div class="flex flex-nowrap max-w-full w-full h-9 overflow-x-hidden items-center content-center px-2 mr-6">
-  <template v-for="tab, index in getTabs" :key="tab.id">
+<TransitionGroup name="nav-tabs" tag="div"
+  leave-active-class="transition-none"
+  enter-active-class="transition-transform duration-200 ease-in-out"
+  move-class="transition-transform duration-250 ease-in-out"
+  class="flex flex-nowrap max-w-full w-full h-9 overflow-x-hidden items-center px-2 mr-6">
+  <div v-for="(tab, index) in getTabs" :key="tab.id" class="flex items-center h-full flex-1 min-w-0 max-w-[13rem]">
     <div :class="isActive(tab.id) ? 'text-gray-50' : 'text-transparent'" class="relative h-full">
       <svg class="absolute right-0 bottom-0" fill="currentColor" width="7" height="7"><path d="M 0 7 A 7 7 0 0 0 7 0 L 7 7 Z"></path></svg>
     </div>
-    <div @click="$emit('tab-activate', tab.id)"
+    <div
+      @click="$emit('tab-activate', tab.id)"
       draggable="true"
-      @dragstart="dragStart(index, $event)"
-      @dragend="dragTab = dragOver = null"
-      @dragover.prevent
-      @dragfinish.prevent
+      @dragstart="onDragStart(index)"
+      @dragover.prevent="onDragOver(index)"
+      @drop="onDrop"
+      @dragend="onDragEnd"
       :title="tab.titleHover"
       :class="isActive(tab.id) ? 'bg-gray-50 text-gray-800' : 'hover:bg-gray-100/75 hover:text-gray-700 text-gray-500'"
-      class="flex rounded-t-lg justify-between basis-52 truncate text-xs h-full items-center pl-3 pr-2 cursor-pointer">
-      <span class="truncate pt-px">
-        <span v-show="tab.isModified" class="inline-block h-2 w-2 rounded-full bg-yellow-400 mr-2"></span>
-        <span v-text="tab.title"></span>
-      </span>
+      class="flex items-center justify-between rounded-t-lg text-xs h-full pl-3 pr-2 cursor-pointer w-full truncate">
+      <div class="flex items-center gap-2 truncate min-w-0">
+        <span v-show="tab.isModified" class="inline-block h-2 w-2 rounded-full bg-yellow-400"></span>
+        <span class="truncate" v-text="tab.title"></span>
+      </div>
       <span @click.stop="handleClose(tab.id, tab.type)" class="hover:bg-gray-300 hover:rounded-full">
         <Icon name="mini-x-mark" size="h-4 w-4" />
       </span>
     </div>
     <div :class="isActive(tab.id) ? 'text-gray-50' : 'text-transparent'" class="relative h-full">
       <svg class="absolute bottom-0" fill="currentColor" width="7" height="7"><path d="M 0 0 A 7 7 0 0 0 7 7 L 0 7 Z"></path></svg>
     </div>
-    <span
-      v-if="(dragTab != null && dragTab != index && index != dragTab - 1)"
-      v-text="dragOver === index ? getTabs[dragTab].title : '|'"
-      @dragenter="dragOver = index"
-      @dragleave="dragOver = null"
-      @drop.prevent="dragDrop(index)"
-      @dragover.prevent
-      :class="{'basis-52 truncate bg-gray-400 text-white text-xs pl-3 pr-2': (dragOver === index)}"
-      class="flex z-50 h-full justify-between items-center text-gray-500">
-    </span>
-    <span v-else :class="!isActive(tab.id) ? 'text-gray-300' : 'text-transparent'" class="z-1 -mr-1">|</span>
-  </template>
-</div>
+    <span :class="!isActive(tab.id) ? 'text-gray-300' : 'text-transparent'" class="z-1 -mr-1 -mt-[3px]">|</span>
+  </div>
+</TransitionGroup>
 `
 
 import Icon from './icon.js'
@@ -46,19 +41,30 @@ export default {
   emits: ['tab-activate', 'tab-move', 'tab-close', 'note-close'],
   data() {
     return {
-      dragTab: null,
-      dragOver: null,
+      dragIndex: null,
+      dragOverEnabled: true,
     }
   },
   methods: {
-    dragStart(index, event) {
+    onDragStart(index) {
       this.$emit('tab-activate', this.tabs[index].id)
-      this.dragTab = index;
-      event.dataTransfer.dropEffect = 'move';
+      this.dragIndex = index;
+    },
+    onDragOver(overIndex) {
+      if (!this.dragOverEnabled) return;
+      if (this.dragIndex === null || this.dragIndex === overIndex) return;
+
+      this.$emit('tab-move', this.tabs[this.dragIndex].id, overIndex);
+      this.dragIndex = overIndex;
+
+      this.dragOverEnabled = false;
+      setTimeout(() => { this.dragOverEnabled = true; }, 300);
+    },
+    onDrop() {
+      this.dragIndex = null;
     },
-    dragDrop(index) {
-      index = (index > this.dragTab) ? index : index + 1;
-      this.$emit('tab-move', this.tabs[this.dragTab].id, index);
+    onDragEnd() {
+      this.dragIndex = null;
     },
     isActive(tabId) {
       return this.activeTabId == tabId;