upd

frontend/app/components/LeftPanel.vue

@@ -2,9 +2,12 @@
   <div class="panel">
     <div class="panel-header">
       <div class="panel-title-row">
-        <h2 class="panel-title">
-          All items
-        </h2>
+        <div class="panel-title-row">
+          <h2 class="panel-title">
+            All items
+          </h2>
+          <span v-if="total" class="item-count">{{ total }}</span>
+        </div>
         <button class="btn-primary" @click="showAddModal = true">
           <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" />
@@ -97,6 +100,7 @@ import { onUnmounted, ref, watch } from 'vue'
 
 const props = defineProps<{
   items: Item[]
+  total: number | string
   loading: boolean
   hasMore: boolean
   search: string
@@ -176,6 +180,22 @@ function submitAdd() {
   flex-shrink: 0;
 }
 
+.item-count {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  margin-left: 8px;
+  min-width: 18px;
+  height: 18px;
+  padding: 0 5px;
+  background: var(--surface-subtle);
+  border: 1px solid var(--border);
+  border-radius: 9999px;
+  font-family: var(--font-mono);
+  font-size: 0.65rem;
+  color: var(--text-secondary);
+}
+
 .panel-title-row {
   display: flex;
   align-items: center;

frontend/app/components/RightPanel.vue

@@ -5,7 +5,7 @@
         <h2 class="panel-title">
           Selected items
         </h2>
-        <span v-if="items.length" class="item-count">{{ items.length }}</span>
+        <span v-if="total" class="item-count">{{ total }}</span>
       </div>
       <div class="search-wrap">
         <span class="search-icon" aria-hidden="true">
@@ -48,7 +48,7 @@
               <circle cx="6" cy="10" r="1.2" />
             </svg>
           </span>
-          <span class="item-order">{{ index + 1 }}</span>
+          <!--          <span class="item-order">{{ index + 1 }}</span> -->
           <span class="item-id">{{ item.id }}</span>
           <button class="action-btn" title="Remove from selected" @click="emit('deselect', item.id!)">
             <svg width="14" height="14" viewBox="0 0 14 14" fill="none" aria-hidden="true">
@@ -78,6 +78,7 @@ import { VueDraggableNext } from 'vue-draggable-next'
 
 const props = defineProps<{
   items: Item[]
+  total: number | string
   loading: boolean
   hasMore: boolean
   search: string