Refactor catalog layout: mode toggle to top right, view toggle to top left

- Move Explore/Quote mode toggle to top right corner
- Add view toggle (Offers/Hubs/Suppliers) to top left in Explore mode
- Panel shows only in Quote mode when showPanel prop is true
- Simplified panel slot structure

app/components/page/CatalogPage.vue

@@ -28,8 +28,8 @@
       </ClientOnly>
     </div>
 
-    <!-- Mode tabs (top left overlay) -->
+    <!-- Mode tabs (top RIGHT overlay) -->
-    <div class="absolute top-4 left-4 z-20">
+    <div class="absolute top-4 right-4 z-20 hidden lg:block">
       <div class="tabs tabs-boxed bg-white/95 backdrop-blur shadow-lg">
         <button
           class="tab"
@@ -50,43 +50,85 @@
       </div>
     </div>
 
-    <!-- Left overlay panel -->
+    <!-- View toggle (top LEFT overlay) - for Explore mode -->
-    <div
+    <div v-if="catalogMode === 'explore'" class="absolute top-4 left-4 z-20 hidden lg:block">
-      class="absolute top-20 left-4 bottom-4 z-10 w-80 max-w-[calc(100vw-2rem)] hidden lg:block"
+      <div class="join bg-white/95 backdrop-blur shadow-lg rounded-lg">
-    >
+        <button
-      <div class="bg-white/95 backdrop-blur rounded-xl shadow-lg p-4 h-full overflow-hidden flex flex-col">
+          class="btn btn-sm join-item"
-        <!-- Explore mode panel -->
+          :class="{ 'btn-active': mapViewMode === 'offers' }"
-        <template v-if="catalogMode === 'explore'">
+          @click="setMapViewMode('offers')"
-          <slot name="explore-panel">
+        >
-            <ExplorePanel
+          {{ $t('catalog.views.offers') }}
-              :selected-item="selectedMapItem"
+        </button>
-              @close-selected="selectedMapItem = null"
+        <button
-              @view-details="onViewDetails"
+          class="btn btn-sm join-item"
-            />
+          :class="{ 'btn-active': mapViewMode === 'hubs' }"
-          </slot>
+          @click="setMapViewMode('hubs')"
-        </template>
+        >
-
+          {{ $t('catalog.views.hubs') }}
-        <!-- Quote mode panel -->
+        </button>
-        <template v-else>
+        <button
-          <slot name="quote-panel" />
+          class="btn btn-sm join-item"
-        </template>
+          :class="{ 'btn-active': mapViewMode === 'suppliers' }"
+          @click="setMapViewMode('suppliers')"
+        >
+          {{ $t('catalog.views.suppliers') }}
+        </button>
       </div>
     </div>
 
-    <!-- Mobile bottom sheet (simplified) -->
+    <!-- Left overlay panel (shown when showPanel is true) -->
+    <div
+      v-if="showPanel"
+      class="absolute top-4 left-4 bottom-4 z-10 w-96 max-w-[calc(100vw-2rem)] hidden lg:block"
+      :class="catalogMode === 'explore' ? 'top-16' : 'top-4'"
+    >
+      <div class="bg-white/95 backdrop-blur rounded-xl shadow-lg p-4 h-full overflow-hidden flex flex-col">
+        <slot name="panel" />
+      </div>
+    </div>
+
+    <!-- Mobile bottom sheet -->
     <div class="lg:hidden absolute bottom-0 left-0 right-0 z-20">
-      <!-- Mobile mode toggle -->
+      <!-- Mobile toggles -->
-      <div class="flex justify-center mb-2">
+      <div class="flex justify-between items-center px-4 mb-2">
+        <!-- View toggle (Explore mode only) -->
+        <div v-if="catalogMode === 'explore'" class="join bg-white/95 backdrop-blur shadow-lg rounded-lg">
+          <button
+            class="btn btn-xs join-item"
+            :class="{ 'btn-active': mapViewMode === 'offers' }"
+            @click="setMapViewMode('offers')"
+          >
+            {{ $t('catalog.views.offers') }}
+          </button>
+          <button
+            class="btn btn-xs join-item"
+            :class="{ 'btn-active': mapViewMode === 'hubs' }"
+            @click="setMapViewMode('hubs')"
+          >
+            {{ $t('catalog.views.hubs') }}
+          </button>
+          <button
+            class="btn btn-xs join-item"
+            :class="{ 'btn-active': mapViewMode === 'suppliers' }"
+            @click="setMapViewMode('suppliers')"
+          >
+            {{ $t('catalog.views.suppliers') }}
+          </button>
+        </div>
+        <div v-else />
+
+        <!-- Mode toggle -->
         <div class="tabs tabs-boxed bg-white/95 backdrop-blur shadow-lg tabs-sm">
           <button
-            class="tab"
+            class="tab tab-sm"
             :class="{ 'tab-active': catalogMode === 'explore' }"
             @click="setCatalogMode('explore')"
           >
             {{ $t('catalog.modes.explore') }}
           </button>
           <button
-            class="tab"
+            class="tab tab-sm"
             :class="{ 'tab-active': catalogMode === 'quote' }"
             @click="setCatalogMode('quote')"
           >
@@ -95,8 +137,9 @@
         </div>
       </div>
 
-      <!-- Mobile panel (collapsible) -->
+      <!-- Mobile panel (collapsible) - only when showPanel is true -->
       <div
+        v-if="showPanel"
         class="bg-white/95 backdrop-blur rounded-t-xl shadow-lg transition-all duration-300"
         :class="mobilePanelExpanded ? 'h-[60vh]' : 'h-auto'"
       >
@@ -109,21 +152,7 @@
         </div>
 
         <div class="px-4 pb-4 overflow-y-auto" :class="mobilePanelExpanded ? 'h-[calc(60vh-2rem)]' : 'max-h-48'">
-          <!-- Explore mode panel -->
+          <slot name="panel" />
-          <template v-if="catalogMode === 'explore'">
-            <slot name="explore-panel">
-              <ExplorePanel
-                :selected-item="selectedMapItem"
-                @close-selected="selectedMapItem = null"
-                @view-details="onViewDetails"
-              />
-            </slot>
-          </template>
-
-          <!-- Quote mode panel -->
-          <template v-else>
-            <slot name="quote-panel" />
-          </template>
         </div>
       </div>
     </div>
@@ -133,7 +162,7 @@
 <script setup lang="ts">
 import type { MapBounds } from '~/components/catalog/CatalogMap.vue'
 
-const { mapViewMode, catalogMode, setCatalogMode } = useCatalogSearch()
+const { mapViewMode, setMapViewMode, catalogMode, setCatalogMode } = useCatalogSearch()
 
 interface MapItem {
   uuid: string
@@ -152,13 +181,15 @@ const props = withDefaults(defineProps<{
   pointColor?: string
   hoveredId?: string
   items?: MapItem[]
+  showPanel?: boolean
 }>(), {
   loading: false,
   useServerClustering: true,
   clusterNodeType: 'offer',
   mapId: 'catalog-map',
   pointColor: '#f97316',
-  items: () => []
+  items: () => [],
+  showPanel: false
 })
 
 const emit = defineEmits<{

app/pages/catalog/index.vue

@@ -6,10 +6,11 @@
     map-id="unified-catalog-map"
     :point-color="mapPointColor"
     :items="[]"
+    :show-panel="showPanel"
     @select="onMapSelect"
   >
-    <!-- Quote panel slot -->
+    <!-- Panel slot - shows Quote form or selection list -->
-    <template #quote-panel>
+    <template #panel>
       <QuotePanel
         :product-id="productId"
         :product-label="getFilterLabel('product', productId)"
@@ -140,6 +141,9 @@ const showQuoteResults = ref(false)
 // Loading state
 const isLoading = computed(() => offersLoading.value)
 
+// Show panel when in Quote mode
+const showPanel = computed(() => catalogMode.value === 'quote')
+
 // Get filter label from cache
 const getFilterLabel = (type: string, id: string | undefined): string | undefined => {
   if (!id) return undefined