upd

frontend/app/components/LeftPanel.vue

@@ -8,7 +8,7 @@
           </h2>
           <span v-if="total" class="item-count">{{ total }}</span>
         </div>
-        <button class="btn-primary" @click="showAddModal = true">
+        <button class="btn-primary" @click="openModal">
           <svg width="11" height="11" viewBox="0 0 11 11" fill="none" aria-hidden="true">
             <path d="M5.5 1V10M1 5.5H10" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
           </svg>
@@ -32,13 +32,15 @@
       </div>
     </div>
 
-    <div class="panel-body">
+    <div ref="panelBody" class="panel-body" @scroll="onScroll">
+      <div :style="{ height: topSpacer + 'px' }" aria-hidden="true" />
+
       <ul class="item-list">
         <li
-          v-for="(item, index) in items"
+          v-for="(item, vIdx) in visibleItems"
           :key="item.id"
           class="item-row"
-          :style="{ '--i': Math.min(index, 14) }"
+          :style="{ '--i': Math.min(vIdx, 14) }"
         >
           <span class="item-id">#{{ item.id }}</span>
           <span class="item-value">{{ item.value }}</span>
@@ -50,6 +52,8 @@
         </li>
       </ul>
 
+      <div :style="{ height: bottomSpacer + 'px' }" aria-hidden="true" />
+
       <div v-if="loading" class="status-row">
         <span class="status-dots">
           <span /><span /><span />
@@ -75,17 +79,18 @@
             </button>
           </div>
           <input
-            v-model.number="addIdInput"
+            ref="addInputEl"
+            v-model="addValueInput"
             class="modal-input"
-            type="number"
-            placeholder="Enter item ID"
+            type="text"
+            placeholder="Enter item value"
             @keydown.enter="submitAdd"
           >
           <div class="modal-footer">
             <button class="btn-ghost" @click="closeModal">
               Cancel
             </button>
-            <button class="btn-primary" @click="submitAdd">
+            <button class="btn-primary" :disabled="!addValueInput.trim()" @click="submitAdd">
               Add item
             </button>
           </div>
@@ -97,7 +102,10 @@
 
 <script setup lang="ts">
 import type { Item } from '~/services/api'
-import { onUnmounted, ref, watch } from 'vue'
+import { computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
+
+const ITEM_HEIGHT = 47
+const OVERSCAN = 5
 
 const props = defineProps<{
   items: Item[]
@@ -111,12 +119,48 @@ const emit = defineEmits<{
   (e: 'update:search', val: string): void
   (e: 'loadMore'): void
   (e: 'select', id: number): void
-  (e: 'add', id: number): void
+  (e: 'add', value: string): void
 }>()
 
+// ── 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(
+    props.items.length,
+    Math.ceil((scrollTop.value + containerHeight.value) / ITEM_HEIGHT) + OVERSCAN,
+  ),
+)
+const visibleItems = computed(() => props.items.slice(startIdx.value, endIdx.value))
+const topSpacer = computed(() => startIdx.value * ITEM_HEIGHT)
+const bottomSpacer = computed(() => (props.items.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)
-const showAddModal = ref(false)
-const addIdInput = ref<number | null>(null)
 let observer: IntersectionObserver | null = null
 
 watch(sentinel, (el) => {
@@ -136,8 +180,11 @@ watch(sentinel, (el) => {
 
 onUnmounted(() => {
   observer?.disconnect()
+  resizeObserver?.disconnect()
 })
 
+// ── Search ───────────────────────────────────────────────────────────────────
+
 let debounceTimer: ReturnType<typeof setTimeout> | null = null
 
 function onSearchInput(e: Event) {
@@ -149,17 +196,29 @@ function onSearchInput(e: Event) {
   }, 300)
 }
 
+// ── Add modal ────────────────────────────────────────────────────────────────
+
+const showAddModal = ref(false)
+const addValueInput = ref('')
+const addInputEl = ref<HTMLInputElement | null>(null)
+
+function openModal() {
+  showAddModal.value = true
+  nextTick(() => addInputEl.value?.focus())
+}
+
 function closeModal() {
   showAddModal.value = false
-  addIdInput.value = null
+  addValueInput.value = ''
 }
 
 function submitAdd() {
-  if (addIdInput.value !== null && Number.isInteger(addIdInput.value)) {
-    emit('add', addIdInput.value)
-    addIdInput.value = null
-    showAddModal.value = false
-  }
+  const value = addValueInput.value.trim()
+  if (!value)
+    return
+  emit('add', value)
+  addValueInput.value = ''
+  showAddModal.value = false
 }
 </script>
 
@@ -280,6 +339,12 @@ function submitAdd() {
   &:active {
     transform: scale(0.97);
   }
+
+  &:disabled {
+    opacity: 0.45;
+    cursor: not-allowed;
+    transform: none;
+  }
 }
 
 .btn-ghost {
@@ -520,6 +585,7 @@ function submitAdd() {
   font-size: 0.875rem;
   color: var(--text-primary);
   outline: none;
+  box-sizing: border-box;
   transition:
     border-color 150ms ease,
     background 150ms ease;
@@ -533,11 +599,6 @@ function submitAdd() {
     border-color: var(--text-primary);
     background: var(--surface);
   }
-
-  &::-webkit-inner-spin-button,
-  &::-webkit-outer-spin-button {
-    -webkit-appearance: none;
-  }
 }
 
 .modal-footer {