Fix SelectionPanel styling + add product filtering by supplier/hub

- SelectionPanel header: dark glass style instead of white
- useCatalogProducts: filter by supplierId or hubId using dedicated queries
- catalog/index: connect filters from query params to composable

app/composables/useCatalogProducts.ts

@@ -1,4 +1,8 @@
-import { GetProductsDocument } from '~/composables/graphql/public/geo-generated'
+import {
+  GetProductsDocument,
+  GetProductsBySupplierDocument,
+  GetProductsNearHubDocument
+} from '~/composables/graphql/public/geo-generated'
 
 // Shared state
 const items = ref<any[]>([])
@@ -6,6 +10,10 @@ const isLoading = ref(false)
 const isLoadingMore = ref(false)
 const isInitialized = ref(false)
 
+// Filter state
+const filterSupplierUuid = ref<string | null>(null)
+const filterHubUuid = ref<string | null>(null)
+
 export function useCatalogProducts() {
   const { execute } = useGraphQL()
 
@@ -16,13 +24,37 @@ export function useCatalogProducts() {
     if (isLoading.value) return
     isLoading.value = true
     try {
-      const data = await execute(
-        GetProductsDocument,
-        {},
-        'public',
-        'geo'
-      )
-      items.value = data?.products || []
+      let data
+
+      if (filterSupplierUuid.value) {
+        // Products from specific supplier
+        data = await execute(
+          GetProductsBySupplierDocument,
+          { supplierUuid: filterSupplierUuid.value },
+          'public',
+          'geo'
+        )
+        items.value = data?.productsBySupplier || []
+      } else if (filterHubUuid.value) {
+        // Products near hub
+        data = await execute(
+          GetProductsNearHubDocument,
+          { hubUuid: filterHubUuid.value },
+          'public',
+          'geo'
+        )
+        items.value = data?.productsNearHub || []
+      } else {
+        // All products
+        data = await execute(
+          GetProductsDocument,
+          {},
+          'public',
+          'geo'
+        )
+        items.value = data?.products || []
+      }
+
       isInitialized.value = true
     } finally {
       isLoading.value = false
@@ -39,6 +71,34 @@ export function useCatalogProducts() {
     }
   }
 
+  // Filter setters
+  const setSupplierFilter = (uuid: string | null) => {
+    if (filterSupplierUuid.value !== uuid) {
+      filterSupplierUuid.value = uuid
+      filterHubUuid.value = null // clear other filter
+      isInitialized.value = false
+      fetchProducts()
+    }
+  }
+
+  const setHubFilter = (uuid: string | null) => {
+    if (filterHubUuid.value !== uuid) {
+      filterHubUuid.value = uuid
+      filterSupplierUuid.value = null // clear other filter
+      isInitialized.value = false
+      fetchProducts()
+    }
+  }
+
+  const clearFilters = () => {
+    if (filterSupplierUuid.value || filterHubUuid.value) {
+      filterSupplierUuid.value = null
+      filterHubUuid.value = null
+      isInitialized.value = false
+      fetchProducts()
+    }
+  }
+
   return {
     items,
     isLoading,
@@ -47,6 +107,9 @@ export function useCatalogProducts() {
     canLoadMore,
     fetchProducts,
     loadMore,
-    init
+    init,
+    setSupplierFilter,
+    setHubFilter,
+    clearFilters
   }
 }