Align desktop UI with mobile shop flows and polish navigation

src/views/catalogs/CatalogsHubView.vue

@@ -16,6 +16,7 @@ import {
   filterCatalogGallery,
   type CatalogGalleryFilter,
 } from '@/utils/catalogGallery'
+import { MOCK_CALITE_CARDS } from '@/data/caliteCollections'
 import { formatNumber } from '@/utils/format'
 
 const route = useRoute()
@@ -27,8 +28,8 @@ const crm = useCrmStore()
 const catalogs = ref<Catalog[]>([])
 const products = ref<CatalogProductCard[]>([])
 const loading = ref(true)
-const searchOpen = ref(false)
 const search = ref('')
+const searchFieldRef = ref<InstanceType<typeof SearchField> | null>(null)
 const filter = ref<CatalogGalleryFilter>('all')
 
 const filters: { id: CatalogGalleryFilter; label: string }[] = [
@@ -38,7 +39,10 @@ const filters: { id: CatalogGalleryFilter; label: string }[] = [
   { id: 'season', label: 'بر اساس فصل' },
 ]
 
-const gallery = computed(() => buildCatalogGallery(catalogs.value, products.value))
+const gallery = computed(() => {
+  const built = buildCatalogGallery(catalogs.value, products.value)
+  return built.length ? built : MOCK_CALITE_CARDS
+})
 const cards = computed(() => filterCatalogGallery(gallery.value, filter.value, search.value))
 
 onMounted(async () => {
@@ -65,9 +69,8 @@ function openCatalog(id: string) {
   router.push({ name: 'catalog-detail', params: { catalogId: id } })
 }
 
-function toggleSearch() {
-  searchOpen.value = !searchOpen.value
-  if (!searchOpen.value) search.value = ''
+function focusSearch() {
+  searchFieldRef.value?.focus()
 }
 
 function metaLine(card: (typeof gallery.value)[number]) {
@@ -90,13 +93,7 @@ function metaLine(card: (typeof gallery.value)[number]) {
       <h1>کالیته‌ها</h1>
       <div class="calite-hub__nav-end">
         <AuthThemeToggle variant="inline" class="mobile-only" />
-        <button
-          type="button"
-          class="icon-btn"
-          :aria-label="searchOpen ? 'بستن جستجو' : 'جستجو'"
-          :aria-pressed="searchOpen"
-          @click="toggleSearch"
-        >
+        <button type="button" class="icon-btn mobile-only" aria-label="جستجو" @click="focusSearch">
           <IconSearch :size="20" />
         </button>
       </div>
@@ -106,10 +103,10 @@ function metaLine(card: (typeof gallery.value)[number]) {
       <p class="calite-hub__lead">مجموعه‌ای از بهترین پارچه‌ها، در یک نگاه</p>
 
       <SearchField
-        v-if="searchOpen"
-        :model-value="search"
+        ref="searchFieldRef"
+        v-model="search"
+        class="calite-hub__search"
         placeholder="جستجوی نام کالیته..."
-        @update:model-value="search = $event"
       />
 
       <div class="calite-hub__chips" role="tablist" aria-label="مرتب‌سازی کالیته‌ها">
@@ -169,8 +166,8 @@ function metaLine(card: (typeof gallery.value)[number]) {
 
 <style scoped>
 .calite-hub {
-  background: #f4f0ed;
-  color: #2a2622;
+  background: var(--color-bg);
+  color: var(--color-text);
 }
 
 .calite-hub__nav {
@@ -178,7 +175,7 @@ function metaLine(card: (typeof gallery.value)[number]) {
   grid-template-columns: 40px 1fr auto;
   align-items: center;
   padding: 6px 12px 0;
-  background: #f4f0ed;
+  background: var(--color-bg);
 }
 
 .calite-hub__nav-end {
@@ -203,11 +200,15 @@ function metaLine(card: (typeof gallery.value)[number]) {
 .calite-hub__lead {
   margin: 0;
   text-align: center;
-  color: #8a847c;
+  color: var(--color-text-muted);
   font-size: 0.78rem;
   line-height: 1.7;
 }
 
+.calite-hub__search {
+  width: 100%;
+}
+
 .icon-btn {
   width: 40px;
   height: 40px;
@@ -234,10 +235,10 @@ function metaLine(card: (typeof gallery.value)[number]) {
   flex-shrink: 0;
   height: 36px;
   padding: 0 16px;
-  border: 1px solid #eae6e2;
+  border: 1px solid var(--color-border);
   border-radius: 999px;
-  background: #eae6e2;
-  color: #615f5c;
+  background: var(--color-surface);
+  color: var(--color-text-muted);
   font: inherit;
   font-size: 0.78rem;
   font-weight: 600;
@@ -349,30 +350,7 @@ function metaLine(card: (typeof gallery.value)[number]) {
 .calite-hub__empty {
   margin: 16px 0 0;
   text-align: center;
-  color: #8a847c;
-}
-
-html.dark .calite-hub,
-html.dark .calite-hub__nav {
-  background: #0b0f14;
-  color: #eef2f8;
-}
-
-html.dark .calite-hub__lead,
-html.dark .calite-hub__empty {
-  color: #9aa8bc;
-}
-
-html.dark .calite-chip {
-  border-color: #2a3444;
-  background: #1a2230;
-  color: #c5d0de;
-}
-
-html.dark .calite-chip.is-on {
-  border-color: #e8e4df;
-  background: #e8e4df;
-  color: #121821;
+  color: var(--color-text-muted);
 }
 
 html.dark .calite-card {
@@ -416,7 +394,11 @@ html.dark .calite-card__copy small {
     margin: 0;
     overflow: visible;
     min-height: auto;
-    background: #f4f0ed;
+    background: transparent;
+  }
+
+  .calite-hub__nav {
+    background: transparent;
   }
 
   .calite-hub__scroll {