Feature/drag drop improve

src/renderer/components/AutoScrollWrapper/AutoScrollWrapper.css

@@ -12,11 +12,32 @@
 
 .topZone {
   /* top nav height manually inspected to be 60px */
-  --zone-height: calc(var(--usable-zone-height) + 60px);
+  --zone-height: calc(var(--usable-zone-height) + 60px + var(--zone-height-spacing-top-for-header));
+
+  /* Must have `px` suffix or `calc()` won't work */
+  --zone-height-spacing-top-for-header: 100px;
 
   inset-block-start: 0;
 }
 
+.topZone.grid {
+  /* grid mode top playlist header manually inspected to be ~120px */
+  --zone-height-spacing-top-for-header: 160px;
+}
+
 .bottomZone {
   inset-block-start: calc(100% - var(--zone-height));
 }
+
+.bottomZone.grid {
+  --zone-height: calc(var(--usable-zone-height) + 80px);
+
+  inset-block-start: calc(100% - var(--zone-height));
+}
+
+/* width <= 680px = list view = video item height 125px = cannot have drag zone too high */
+@media only screen and (width >= 681px) and (height >= 768px) {
+  .hotZone {
+    --usable-zone-height: 100px;
+  }
+}

src/renderer/components/AutoScrollWrapper/AutoScrollWrapper.vue

@@ -3,6 +3,9 @@
     <div
       v-if="hotZoneShown"
       class="hotZone topZone"
+      :class="{
+        grid: isGridMode,
+      }"
       @dragenter="setScrollDirection('up')"
       @dragleave="clearScrollDirection"
     />
@@ -12,6 +15,9 @@
     <div
       v-if="hotZoneShown"
       class="hotZone bottomZone"
+      :class="{
+        grid: isGridMode,
+      }"
       @dragenter="setScrollDirection('down')"
       @dragleave="clearScrollDirection"
     />
@@ -26,6 +32,10 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  isGridMode: {
+    type: Boolean,
+    default: false,
+  },
 })
 
 const hotZoneShown = ref(false)
@@ -66,7 +76,7 @@ function clearScrollDirection() {
  * @param {'up' | 'down'} direction
  */
 function scroll(direction) {
-  const SPEED = 6
+  const SPEED = 14
 
   if (direction === 'up') {
     globalThis.scrollBy(0, -SPEED)

src/renderer/components/FtListVideo/FtListVideo.scss

@@ -1,5 +1,7 @@
 @use '../../scss-partials/ft-list-item';
 
+$grab-bar-padding: 1em;
+
 .thumbnailLink:hover {
   outline: 3px solid var(--side-nav-hover-color);
 }
@@ -11,7 +13,19 @@
   user-select: none;
 
   // Space a bit from the thumbnail.
-  padding-block: 1em;
+  padding-block: $grab-bar-padding;
+
+  svg {
+    // Make icon appears more centered from default `-0.125em` from FA style
+    vertical-align: -0.15em;
+  }
+}
+
+.ft-list-video:has(.grabBar) {
+  // Only grid mode has `.grabBar`
+  // Make top & bottom padding look consistent
+  /* stylelint-disable-next-line declaration-property-value-no-unknown */
+  padding-block: 0 $grab-bar-padding;
 }
 
 .draggable:not(.draggable:only-child):focus .grabBar,

src/renderer/views/Playlist/Playlist.vue

@@ -71,6 +71,7 @@
         <AutoScrollWrapper
           v-if="visiblePlaylistItems.length > 0"
           :hot-zone-enabled="isSortOrderCustom && isVideoDragging"
+          :is-grid-mode="listType === 'grid'"
         >
           <FtElementList
             v-if="listType === 'grid'"