upd

frontend/app/components/RightPanel.vue

@@ -24,9 +24,11 @@
       </div>
     </div>
 
-    <div ref="panelBody" class="panel-body">
+    <div ref="panelBody" class="panel-body" @scroll="onScroll">
+      <div :style="{ height: topSpacer + 'px' }" aria-hidden="true" />
+
       <VueDraggableNext
-        v-model="localItems"
+        v-model="visibleSlice"
         tag="ul"
         class="item-list"
         handle=".drag-handle"
@@ -34,10 +36,10 @@
         @end="onDragEndFull"
       >
         <li
-          v-for="(item, index) in localItems"
+          v-for="(item, vIdx) in visibleSlice"
           :key="item.id"
           class="item-row"
-          :style="{ '--i': Math.min(index, 14) }"
+          :style="{ '--i': Math.min(vIdx, 14) }"
         >
           <span class="drag-handle" title="Drag to reorder" aria-hidden="true">
             <svg width="8" height="12" viewBox="0 0 8 12" fill="currentColor">
@@ -59,6 +61,8 @@
         </li>
       </VueDraggableNext>
 
+      <div :style="{ height: bottomSpacer + 'px' }" aria-hidden="true" />
+
       <div v-if="loading" class="status-row">
         <span class="status-dots">
           <span /><span /><span />
@@ -74,9 +78,12 @@
 
 <script setup lang="ts">
 import type { Item } from '~/services/api'
-import { onUnmounted, ref, watch } from 'vue'
+import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
 import { VueDraggableNext } from 'vue-draggable-next'
 
+const ITEM_HEIGHT = 47
+const OVERSCAN = 5
+
 const props = defineProps<{
   items: Item[]
   total: number | string
@@ -92,8 +99,62 @@ const emit = defineEmits<{
   (e: 'reorder', id: number, afterId: number | null): void
 }>()
 
-const sentinel = ref<HTMLElement | null>(null)
+// ── Local items (source of truth for drag ordering) ──────────────────────────
+
+const localItems = ref([...props.items])
+
+watch(() => props.items, (val) => {
+  localItems.value = [...val]
+}, { deep: true })
+
+// ── Virtual scroll ───────────────────────────────────────────────────────────
+
 const panelBody = ref<HTMLElement | null>(null)
+const scrollTop = ref(0)
+const containerHeight = ref(500)
+
+function onScroll() {
+  scrollTop.value = panelBody.value?.scrollTop ?? 0
+}
+
+const startIdx = computed(() =>
+  Math.max(0, Math.floor(scrollTop.value / ITEM_HEIGHT) - OVERSCAN),
+)
+const endIdx = computed(() =>
+  Math.min(
+    localItems.value.length,
+    Math.ceil((scrollTop.value + containerHeight.value) / ITEM_HEIGHT) + OVERSCAN,
+  ),
+)
+
+// Writable computed: VueDraggableNext reads/writes the visible slice.
+// The setter splices changes back into localItems so the full list stays in sync.
+const visibleSlice = computed({
+  get: () => localItems.value.slice(startIdx.value, endIdx.value),
+  set: (newVal: Item[]) => {
+    localItems.value.splice(startIdx.value, endIdx.value - startIdx.value, ...newVal)
+  },
+})
+
+const topSpacer = computed(() => startIdx.value * ITEM_HEIGHT)
+const bottomSpacer = computed(() => (localItems.value.length - endIdx.value) * ITEM_HEIGHT)
+
+let resizeObserver: ResizeObserver | null = null
+
+onMounted(() => {
+  containerHeight.value = panelBody.value?.clientHeight ?? 500
+  resizeObserver = new ResizeObserver((entries) => {
+    const entry = entries[0]
+    if (entry)
+      containerHeight.value = entry.contentRect.height
+  })
+  if (panelBody.value)
+    resizeObserver.observe(panelBody.value)
+})
+
+// ── Infinite scroll sentinel ─────────────────────────────────────────────────
+
+const sentinel = ref<HTMLElement | null>(null)
 let observer: IntersectionObserver | null = null
 
 watch(sentinel, (el) => {
@@ -132,12 +193,16 @@ function scrollLoop() {
 }
 
 function onPointerMoveDrag(e: PointerEvent) {
-  if (!isDragging || !panelBody.value) return
+  if (!isDragging || !panelBody.value)
+    return
   const rect = panelBody.value.getBoundingClientRect()
   const y = e.clientY - rect.top
   if (y >= 0 && y < SCROLL_ZONE) {
     scrollSpeed = -((SCROLL_ZONE - y) / SCROLL_ZONE) * SCROLL_MAX_SPEED
   }
+  else if (y > rect.height - SCROLL_ZONE && y <= rect.height) {
+    scrollSpeed = ((y - (rect.height - SCROLL_ZONE)) / SCROLL_ZONE) * SCROLL_MAX_SPEED
+  }
   else {
     scrollSpeed = 0
   }
@@ -158,16 +223,23 @@ function onDragEndFull(event: { oldIndex: number, newIndex: number }): void {
     cancelAnimationFrame(scrollRafId)
     scrollRafId = null
   }
-  const moved = localItems.value[event.newIndex]
-  if (!moved) return
-  const after = event.newIndex > 0 ? localItems.value[event.newIndex - 1] : null
+
+  // The visibleSlice setter has already applied the reorder to localItems.
+  // event indices are relative to the visible slice (startIdx offset).
+  const actualNewIdx = startIdx.value + event.newIndex
+  const moved = localItems.value[actualNewIdx]
+  if (!moved)
+    return
+  const after = actualNewIdx > 0 ? localItems.value[actualNewIdx - 1] : null
   emit('reorder', moved.id!, after?.id ?? null)
 }
 
 onUnmounted(() => {
   observer?.disconnect()
+  resizeObserver?.disconnect()
   document.removeEventListener('pointermove', onPointerMoveDrag)
-  if (scrollRafId !== null) cancelAnimationFrame(scrollRafId)
+  if (scrollRafId !== null)
+    cancelAnimationFrame(scrollRafId)
 })
 
 // ── Search ───────────────────────────────────────────────────────────────────
@@ -182,14 +254,6 @@ function onSearchInput(e: Event) {
     emit('update:search', val)
   }, 300)
 }
-
-// ── Local items for drag-and-drop ────────────────────────────────────────────
-
-const localItems = ref([...props.items])
-
-watch(() => props.items, (val) => {
-  localItems.value = [...val]
-}, { deep: true })
 </script>
 
 <style scoped lang="scss">
@@ -342,7 +406,7 @@ watch(() => props.items, (val) => {
   display: flex;
   align-items: center;
   flex-shrink: 0;
-  padding: 2px;
+  padding: 6px;
   transition: color 120ms ease;
   user-select: none;