Tab DnD animations added

renderer/script.js

@@ -653,8 +653,61 @@ function renderTabs() {
     el.addEventListener('dragstart', e => {
       e.dataTransfer.setData('tabId', tab.id);
       e.dataTransfer.setData('text/plain', tab.id);
+      // Hide default ghost image; use an empty drag image
+      const ghost = document.createElement('canvas');
+      ghost.width = 1; ghost.height = 1; // 1x1 transparent pixel
+      const ctx = ghost.getContext('2d');
+      if (ctx) { ctx.clearRect(0, 0, 1, 1); }
+      e.dataTransfer.setDragImage(ghost, 0, 0);
+      if (e.dataTransfer) {
+        e.dataTransfer.effectAllowed = 'move';
+        e.dataTransfer.dropEffect = 'move';
+      }
+      // visual lift on drag start
+      el.classList.add('tab--dragging');
+      // Store initial pointer offset to keep tab under cursor
+      const rect = el.getBoundingClientRect();
+      el._dragOffsetX = e.clientX - rect.left;
+      el._dragStartLeft = rect.left;
+      el._dragStartTop = rect.top;
+    });
+    el.addEventListener('dragenter', e => {
+      // If another tab is being dragged over this one, hint before/after
+      const draggedId = (e.dataTransfer && (e.dataTransfer.getData('tabId') || e.dataTransfer.getData('text/plain'))) || null;
+      if (!draggedId || draggedId === tab.id) return;
+      const rect = el.getBoundingClientRect();
+      const x = e.clientX;
+      const before = (x - rect.left) < rect.width / 2;
+      el.classList.toggle('tab--drop-before', before);
+      el.classList.toggle('tab--drop-after', !before);
+    });
+    el.addEventListener('dragover', e => {
+      e.preventDefault();
+      // Continuously update hint side while hovering
+      const rect = el.getBoundingClientRect();
+      const before = (e.clientX - rect.left) < rect.width / 2;
+      el.classList.toggle('tab--drop-before', before);
+      el.classList.toggle('tab--drop-after', !before);
+    });
+    // While dragging, move the actual element to follow cursor horizontally (attach once).
+    if (!tabBarEl._dragoverAttached) {
+      tabBarEl.addEventListener('dragover', (evt) => {
+        const draggingEl = tabBarEl.querySelector('.tab.tab--dragging');
+        if (!draggingEl) return;
+        evt.preventDefault();
+        if (evt.dataTransfer) evt.dataTransfer.dropEffect = 'move';
+        const barRect = tabBarEl.getBoundingClientRect();
+        const targetX = evt.clientX - barRect.left - (draggingEl._dragOffsetX || 0);
+        // Translate relative to its current position
+        const elRect = draggingEl.getBoundingClientRect();
+        const dx = targetX - (elRect.left - barRect.left);
+        draggingEl.style.transform = `translateX(${dx}px)`;
+      });
+      tabBarEl._dragoverAttached = true;
+    }
+    el.addEventListener('dragleave', () => {
+      el.classList.remove('tab--drop-before', 'tab--drop-after');
     });
-    el.addEventListener('dragover', e => { e.preventDefault(); });
     el.addEventListener('drop', e => {
       e.preventDefault();
       const draggedId = e.dataTransfer.getData('tabId') || e.dataTransfer.getData('text/plain');
@@ -668,9 +721,18 @@ function renderTabs() {
       const [moved] = tabs.splice(fromIndex, 1);
       const adjIndex = fromIndex < newIndex ? newIndex - 1 : newIndex;
       tabs.splice(adjIndex, 0, moved);
+      el.classList.remove('tab--drop-before', 'tab--drop-after');
+      // Reset dragging transform before re-render FLIP
+      const draggingEl = tabBarEl.querySelector('.tab.tab--dragging');
+      if (draggingEl) draggingEl.style.transform = '';
       scheduleRenderTabs();
     });
     el.addEventListener('dragend', e => {
+      // Clear dragging visual state
+      el.classList.remove('tab--dragging');
+      el.style.transform = '';
+      // Clean any lingering hints
+      el.classList.remove('tab--drop-before', 'tab--drop-after');
       if (
         e.clientX < 0 || e.clientX > window.innerWidth ||
         e.clientY < 0 || e.clientY > window.innerHeight

renderer/style.css

@@ -56,6 +56,7 @@ html, body {
   scrollbar-width: thin;            /* slimmer track */
   -webkit-backdrop-filter: blur(var(--blur));
   backdrop-filter: blur(var(--blur));
+  -webkit-app-region: no-drag; /* ensure HTML5 DnD works inside tab strip */
 }
 
 /* NAVBAR LAYOUT */
@@ -82,7 +83,7 @@ html, body {
   /* Make both the tab strip and the nav area draggable so users have a
      larger region to click-and-drag the window. Keep interactive elements
      marked as no-drag so buttons and tabs remain clickable. */
-  #tab-bar,
+  /* Keep only the nav area as a window-drag region so tabs can use HTML5 DnD */
   #nav {
     -webkit-app-region: drag;
     user-select: none;
@@ -414,6 +415,7 @@ body:has(#home-container.active) #downloads-btn {
   display: flex;
   align-items: center;
   gap: 8px;
+  -webkit-app-region: no-drag; /* allow HTML5 DnD to work */
   padding: 4px 10px; /* slimmer padding */
   margin: 0;
   height: 28px; /* reduce overall tab height */
@@ -602,6 +604,38 @@ body:has(#home-container.active) #downloads-btn {
   animation: tab-exit 140ms ease-in both;
 }
 
+/* While dragging a tab, lift it slightly for feedback */
+.tab--dragging {
+  transform: translateY(-2px) scale(1.04);
+  box-shadow: 0 10px 26px rgba(0,0,0,0.45);
+  z-index: 5;
+  transition: none !important; /* follow cursor without lag */
+  will-change: transform;
+  cursor: grabbing;
+}
+
+/* Show an insertion hint on hovered tab and nudge it */
+.tab--drop-before,
+.tab--drop-after {
+  position: relative;
+}
+.tab--drop-before { transform: translateX(-10px); }
+.tab--drop-after  { transform: translateX(10px); }
+
+.tab--drop-before::before,
+.tab--drop-after::after {
+  content: "";
+  position: absolute;
+  top: 4px;
+  bottom: 0;
+  width: 2px;
+  border-radius: 2px;
+  background: linear-gradient(180deg, var(--accent), var(--accent-600));
+  opacity: 0.9;
+}
+.tab--drop-before::before { left: 0; }
+.tab--drop-after::after  { right: 0; }
+
 @keyframes tab-enter {
   from {
     opacity: 0;