upd

frontend/app/app.vue

@@ -10,12 +10,14 @@
           </svg>
           <span class="brand-tag">TMC</span>
           <span class="brand-sep" aria-hidden="true" />
-          <h1 class="brand-title">Items <em>Manager</em></h1>
+          <h1 class="brand-title">
+            Items <em>Manager</em>
+          </h1>
         </div>
         <div class="header-right">
           <span class="header-meta-label">Item collection</span>
-          <span class="header-vsep" aria-hidden="true" />
-          <time class="header-date">{{ formattedDate }}</time>
+          <!--          <span class="header-vsep" aria-hidden="true" /> -->
+          <!--          <time class="header-date">{{ formattedDate }}</time> -->
         </div>
       </div>
     </header>
@@ -24,6 +26,7 @@
         :items="leftItems"
         :loading="leftLoading"
         :has-more="leftHasMore"
+        :total="leftItemsTotal"
         :search="leftSearch"
         @update:search="leftSearch = $event"
         @load-more="fetchLeft()"
@@ -34,6 +37,7 @@
         :items="rightItems"
         :loading="rightLoading"
         :has-more="rightHasMore"
+        :total="rightItemsTotal"
         :search="rightSearch"
         @update:search="rightSearch = $event"
         @load-more="fetchRight()"
@@ -53,7 +57,9 @@ const formattedDate = computed(() =>
 
 const {
   leftItems,
+  leftItemsTotal,
   rightItems,
+  rightItemsTotal,
   leftSearch,
   rightSearch,
   leftLoading,
@@ -128,7 +134,7 @@ async function handleAdd(id: number) {
 .header-brand {
   display: flex;
   align-items: center;
-  gap: 11px;
+  gap: 12px;
 }
 
 .brand-icon {
@@ -156,7 +162,7 @@ async function handleAdd(id: number) {
 .brand-title {
   margin: 0;
   font-family: var(--font-serif);
-  font-size: 1.08rem;
+  font-size: 1rem;
   font-weight: 400;
   color: var(--text-primary);
   letter-spacing: -0.025em;