create-brainerce-store 1.72.0 → 1.74.0

package/templates/nextjs/base/src/ui/product/product-listing.tsx

@@ -1,446 +1,460 @@
-'use client';
-
-import { useEffect, useState, useRef } from 'react';
-import { ChevronDown } from 'lucide-react';
-import {
-  useProductListing,
-  sortOptions,
-  isActiveInTree,
-  type CategoryNode,
-} from '@/core/hooks/use-product-listing';
-import { ProductGrid } from '@/ui/product/product-grid';
-import { LoadingSpinner } from '@/ui/shared/loading-spinner';
-import { Button } from '@/components/ui/button';
-import { Checkbox } from '@/components/ui/checkbox';
-import { Label } from '@/components/ui/label';
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@/components/ui/select';
-import { useTranslations } from '@/core/lib/translations';
-import { cn } from '@/core/lib/utils';
-
-/** Radix Select items can't carry an empty-string value, so "no filter"
- *  round-trips through this sentinel and is written back as ''. */
-const ALL = '__all__';
-
-/** Recursive dropdown items for nested categories */
-function CategoryDropdownItems({
-  items,
-  depth,
-  selectedId,
-  onSelect,
-}: {
-  items: CategoryNode[];
-  depth: number;
-  selectedId: string;
-  onSelect: (id: string) => void;
-}) {
-  return (
-    <>
-      {items.map((child) => (
-        <div key={child.id}>
-          <button
-            onClick={() => onSelect(child.id)}
-            className={cn(
-              'hover:bg-muted w-full px-4 py-2 text-start text-sm transition-colors',
-              selectedId === child.id && 'bg-primary/10 text-primary font-medium'
-            )}
-            style={{ paddingInlineStart: `${(depth + 1) * 16}px` }}
-          >
-            {child.name}
-          </button>
-          {child.children.length > 0 && (
-            <CategoryDropdownItems
-              items={child.children}
-              depth={depth + 1}
-              selectedId={selectedId}
-              onSelect={onSelect}
-            />
-          )}
-        </div>
-      ))}
-    </>
-  );
-}
-
-/** Category chip with dropdown for subcategories */
-function CategoryChip({
-  category,
-  selectedId,
-  onSelect,
-  tc,
-}: {
-  category: CategoryNode;
-  selectedId: string;
-  onSelect: (id: string) => void;
-  tc: (key: string) => string;
-}) {
-  const [open, setOpen] = useState(false);
-  const ref = useRef<HTMLDivElement>(null);
-  const hasChildren = category.children.length > 0;
-  const isActive = isActiveInTree(category, selectedId);
-
-  // Find the display name for the selected subcategory
-  function findName(nodes: CategoryNode[], id: string): string | null {
-    for (const n of nodes) {
-      if (n.id === id) return n.name;
-      const found = findName(n.children, id);
-      if (found) return found;
-    }
-    return null;
-  }
-
-  const selectedChildName =
-    isActive && selectedId !== category.id ? findName(category.children, selectedId) : null;
-
-  // Close dropdown on outside click
-  useEffect(() => {
-    if (!open) return;
-    function handleClick(e: MouseEvent) {
-      if (ref.current && !ref.current.contains(e.target as Node)) {
-        setOpen(false);
-      }
-    }
-    document.addEventListener('mousedown', handleClick);
-    return () => document.removeEventListener('mousedown', handleClick);
-  }, [open]);
-
-  if (!hasChildren) {
-    return (
-      <button
-        onClick={() => onSelect(category.id)}
-        className={cn(
-          'rounded-full border px-3 py-1.5 text-sm transition-colors',
-          selectedId === category.id
-            ? 'bg-primary text-primary-foreground border-primary'
-            : 'border-border text-muted-foreground hover:border-primary hover:text-foreground'
-        )}
-      >
-        {category.name}
-      </button>
-    );
-  }
-
-  return (
-    <div ref={ref} className="relative">
-      <button
-        onClick={() => setOpen((prev) => !prev)}
-        className={cn(
-          'inline-flex items-center gap-1 rounded-full border px-3 py-1.5 text-sm transition-colors',
-          isActive
-            ? 'bg-primary text-primary-foreground border-primary'
-            : 'border-border text-muted-foreground hover:border-primary hover:text-foreground'
-        )}
-      >
-        {category.name}
-        {selectedChildName && (
-          <span className="opacity-80">
-            {'·'} {selectedChildName}
-          </span>
-        )}
-        <ChevronDown
-          className={cn('ms-0.5 h-3 w-3 transition-transform', open && 'rotate-180')}
-          aria-hidden="true"
-        />
-      </button>
-
-      {open && (
-        <div className="bg-popover text-popover-foreground border-border absolute start-0 top-full z-50 mt-1 min-w-[180px] overflow-hidden rounded-lg border shadow-lg">
-          {/* "All in [category]" option */}
-          <button
-            onClick={() => {
-              onSelect(category.id);
-              setOpen(false);
-            }}
-            className={cn(
-              'hover:bg-muted w-full px-4 py-2 text-start text-sm font-medium transition-colors',
-              selectedId === category.id && 'bg-primary/10 text-primary'
-            )}
-          >
-            {tc('all')} {category.name}
-          </button>
-          <div className="bg-border mx-2 h-px" />
-          {/* Recursive children */}
-          <div onClick={() => setOpen(false)}>
-            <CategoryDropdownItems
-              items={category.children}
-              depth={0}
-              selectedId={selectedId}
-              onSelect={onSelect}
-            />
-          </div>
-        </div>
-      )}
-    </div>
-  );
-}
-
-/**
- * Product listing page (filters + sort + grid + load-more). All data and
- * URL-state behavior comes from `useProductListing`; this component is
- * presentation only. Must be rendered inside `<Suspense>` (URL params).
- */
-export function ProductListing() {
-  const t = useTranslations('products');
-  const tc = useTranslations('common');
-
-  const {
-    products,
-    loading,
-    loadingMore,
-    page,
-    totalPages,
-    total,
-    categories,
-    brands,
-    tags,
-    metafieldDefs,
-    searchQuery,
-    categoryId,
-    brandId,
-    tagId,
-    sortIndex,
-    handleLoadMore,
-    updateParam,
-    handleCategorySelect,
-    getSelectedMetafieldValues,
-    setMetafieldValue,
-  } = useProductListing();
-
-  return (
-    <div className="mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8">
-      {/* Page Header */}
-      <div className="mb-8">
-        <h1 className="text-foreground text-3xl font-bold">
-          {searchQuery ? `${t('searchPrefix')} "${searchQuery}"` : t('allProducts')}
-        </h1>
-        {!loading && (
-          <p className="text-muted-foreground mt-1 text-sm">
-            {total} {total === 1 ? tc('product') : tc('products')} {tc('found')}
-          </p>
-        )}
-      </div>
-
-      {/* Filters and Sort */}
-      <div className="mb-6 flex flex-col gap-4">
-        {/* Category Filter */}
-        {categories.length > 0 && (
-          <div className="flex flex-wrap gap-2">
-            <button
-              onClick={() => updateParam('category', '')}
-              className={cn(
-                'rounded-full border px-3 py-1.5 text-sm transition-colors',
-                !categoryId
-                  ? 'bg-primary text-primary-foreground border-primary'
-                  : 'border-border text-muted-foreground hover:border-primary hover:text-foreground'
-              )}
-            >
-              {tc('all')}
-            </button>
-            {categories.map((cat) => (
-              <CategoryChip
-                key={cat.id}
-                category={cat}
-                selectedId={categoryId}
-                onSelect={handleCategorySelect}
-                tc={tc as (key: string) => string}
-              />
-            ))}
-          </div>
-        )}
-
-        {/* Brand, Tag & Sort row */}
-        <div className="flex flex-wrap items-center gap-3">
-          {/* Brand Filter */}
-          {brands.length > 0 && (
-            <Select
-              value={brandId || ALL}
-              onValueChange={(v) => updateParam('brand', v === ALL ? '' : v)}
-            >
-              <SelectTrigger className="h-9 w-auto min-w-[8rem] rounded" aria-label={t('allBrands')}>
-                <SelectValue />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectItem value={ALL}>{t('allBrands')}</SelectItem>
-                {brands.map((b) => (
-                  <SelectItem key={b.id} value={b.id}>
-                    {b.name}
-                  </SelectItem>
-                ))}
-              </SelectContent>
-            </Select>
-          )}
-
-          {/* Tag Filter */}
-          {tags.length > 0 && (
-            <Select
-              value={tagId || ALL}
-              onValueChange={(v) => updateParam('tag', v === ALL ? '' : v)}
-            >
-              <SelectTrigger className="h-9 w-auto min-w-[8rem] rounded" aria-label={t('allTags')}>
-                <SelectValue />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectItem value={ALL}>{t('allTags')}</SelectItem>
-                {tags.map((tg) => (
-                  <SelectItem key={tg.id} value={tg.id}>
-                    {tg.name}
-                  </SelectItem>
-                ))}
-              </SelectContent>
-            </Select>
-          )}
-
-          {/* Custom-field (metafield) facets — rendered per definition type.
-              Only definitions flagged `filterable: true` and published to
-              this sales channel reach this list (see `metafieldDefs` filter
-              in the hook). The merchant's display name (`def.name`) is shown
-              as-is — `enumValues` come from the merchant's dashboard config. */}
-          {metafieldDefs.map((def) => {
-            const selected = getSelectedMetafieldValues(def.key);
-
-            if (def.type === 'BOOLEAN') {
-              const isOn = selected.includes('true');
-              return (
-                <Label
-                  key={def.id}
-                  className="border-border text-foreground hover:border-primary inline-flex h-9 cursor-pointer items-center gap-2 rounded border px-3 text-sm font-normal transition-colors"
-                >
-                  <Checkbox
-                    checked={isOn}
-                    onCheckedChange={(checked) =>
-                      setMetafieldValue(def.key, checked === true ? ['true'] : [])
-                    }
-                  />
-                  {def.name}
-                </Label>
-              );
-            }
-
-            if (def.type === 'SELECT') {
-              return (
-                <Select
-                  key={def.id}
-                  value={selected[0] || ALL}
-                  onValueChange={(v) => setMetafieldValue(def.key, v === ALL ? [] : [v])}
-                >
-                  <SelectTrigger
-                    className="h-9 w-auto min-w-[8rem] rounded"
-                    aria-label={def.name}
-                  >
-                    <SelectValue />
-                  </SelectTrigger>
-                  <SelectContent>
-                    <SelectItem value={ALL}>{`${tc('all')} ${def.name}`}</SelectItem>
-                    {(def.enumValues || []).map((v) => (
-                      <SelectItem key={v.value} value={v.value}>
-                        {v.label || v.value}
-                      </SelectItem>
-                    ))}
-                  </SelectContent>
-                </Select>
-              );
-            }
-
-            // MULTI_SELECT — chip toggles. Each click adds/removes one value.
-            return (
-              <div
-                key={def.id}
-                className="border-border inline-flex items-center gap-1 rounded border px-2 py-1"
-                aria-label={def.name}
-              >
-                <span className="text-muted-foreground px-1 text-xs">{def.name}:</span>
-                {(def.enumValues || []).map((v) => {
-                  const active = selected.includes(v.value);
-                  return (
-                    <button
-                      key={v.value}
-                      type="button"
-                      onClick={() =>
-                        setMetafieldValue(
-                          def.key,
-                          active ? selected.filter((s) => s !== v.value) : [...selected, v.value]
-                        )
-                      }
-                      className={cn(
-                        'rounded-full border px-2 py-0.5 text-xs transition-colors',
-                        active
-                          ? 'bg-primary text-primary-foreground border-primary'
-                          : 'border-border text-muted-foreground hover:border-primary hover:text-foreground'
-                      )}
-                    >
-                      {v.label || v.value}
-                    </button>
-                  );
-                })}
-              </div>
-            );
-          })}
-
-          {/* Sort */}
-          <div className="flex items-center gap-2 sm:ms-auto">
-            <Label
-              htmlFor="sort"
-              className="text-muted-foreground whitespace-nowrap font-normal"
-            >
-              {tc('sortBy')}
-            </Label>
-            <Select
-              value={String(sortIndex)}
-              onValueChange={(v) => updateParam('sort', v)}
-            >
-              <SelectTrigger id="sort" className="h-9 w-auto min-w-[8rem] rounded">
-                <SelectValue />
-              </SelectTrigger>
-              <SelectContent>
-                {sortOptions.map((opt, idx) => (
-                  <SelectItem key={idx} value={String(idx)}>
-                    {t(opt.labelKey)}
-                  </SelectItem>
-                ))}
-              </SelectContent>
-            </Select>
-          </div>
-        </div>
-      </div>
-
-      {/* Products Grid */}
-      {loading ? (
-        <div className="flex items-center justify-center py-20">
-          <LoadingSpinner size="lg" />
-        </div>
-      ) : (
-        <>
-          <ProductGrid products={products} />
-
-          {/* Load More */}
-          {page < totalPages && (
-            <div className="mt-10 flex justify-center">
-              <Button
-                onClick={handleLoadMore}
-                disabled={loadingMore}
-                className="rounded px-6 py-2.5"
-              >
-                {loadingMore ? (
-                  <>
-                    <LoadingSpinner
-                      size="sm"
-                      className="border-primary-foreground/30 border-t-primary-foreground"
-                    />
-                    {tc('loading')}
-                  </>
-                ) : (
-                  t('loadMore')
-                )}
-              </Button>
-            </div>
-          )}
-        </>
-      )}
-    </div>
-  );
-}
+'use client';
+
+import { useEffect, useState, useRef } from 'react';
+import { ChevronDown } from 'lucide-react';
+import {
+  useProductListing,
+  sortOptions,
+  isActiveInTree,
+  type CategoryNode,
+} from '@/core/hooks/use-product-listing';
+import { ProductGrid } from '@/ui/product/product-grid';
+import { LoadingSpinner } from '@/ui/shared/loading-spinner';
+import { Button } from '@/components/ui/button';
+import { Checkbox } from '@/components/ui/checkbox';
+import { Label } from '@/components/ui/label';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import { useTranslations } from '@/core/lib/translations';
+import { cn } from '@/core/lib/utils';
+
+/** Radix Select items can't carry an empty-string value, so "no filter"
+ *  round-trips through this sentinel and is written back as ''. */
+const ALL = '__all__';
+
+/** Recursive dropdown items for nested categories */
+function CategoryDropdownItems({
+  items,
+  depth,
+  selectedId,
+  onSelect,
+}: {
+  items: CategoryNode[];
+  depth: number;
+  selectedId: string;
+  onSelect: (id: string) => void;
+}) {
+  return (
+    <>
+      {items.map((child) => (
+        <div key={child.id}>
+          <button
+            onClick={() => onSelect(child.id)}
+            className={cn(
+              'hover:bg-muted w-full px-4 py-2 text-start text-sm transition-colors',
+              selectedId === child.id && 'bg-primary/10 text-primary font-medium'
+            )}
+            style={{ paddingInlineStart: `${(depth + 1) * 16}px` }}
+          >
+            {child.name}
+          </button>
+          {child.children.length > 0 && (
+            <CategoryDropdownItems
+              items={child.children}
+              depth={depth + 1}
+              selectedId={selectedId}
+              onSelect={onSelect}
+            />
+          )}
+        </div>
+      ))}
+    </>
+  );
+}
+
+/** Category chip with dropdown for subcategories */
+function CategoryChip({
+  category,
+  selectedId,
+  onSelect,
+  tc,
+}: {
+  category: CategoryNode;
+  selectedId: string;
+  onSelect: (id: string) => void;
+  tc: (key: string) => string;
+}) {
+  const [open, setOpen] = useState(false);
+  const ref = useRef<HTMLDivElement>(null);
+  const hasChildren = category.children.length > 0;
+  const isActive = isActiveInTree(category, selectedId);
+
+  // Find the display name for the selected subcategory
+  function findName(nodes: CategoryNode[], id: string): string | null {
+    for (const n of nodes) {
+      if (n.id === id) return n.name;
+      const found = findName(n.children, id);
+      if (found) return found;
+    }
+    return null;
+  }
+
+  const selectedChildName =
+    isActive && selectedId !== category.id ? findName(category.children, selectedId) : null;
+
+  // Close dropdown on outside click
+  useEffect(() => {
+    if (!open) return;
+    function handleClick(e: MouseEvent) {
+      if (ref.current && !ref.current.contains(e.target as Node)) {
+        setOpen(false);
+      }
+    }
+    document.addEventListener('mousedown', handleClick);
+    return () => document.removeEventListener('mousedown', handleClick);
+  }, [open]);
+
+  if (!hasChildren) {
+    return (
+      <button
+        onClick={() => onSelect(category.id)}
+        className={cn(
+          'rounded-full border px-3 py-1.5 text-sm transition-colors',
+          selectedId === category.id
+            ? 'bg-primary text-primary-foreground border-primary'
+            : 'border-border text-muted-foreground hover:border-primary hover:text-foreground'
+        )}
+      >
+        {category.name}
+      </button>
+    );
+  }
+
+  return (
+    <div ref={ref} className="relative">
+      <button
+        onClick={() => setOpen((prev) => !prev)}
+        className={cn(
+          'inline-flex items-center gap-1 rounded-full border px-3 py-1.5 text-sm transition-colors',
+          isActive
+            ? 'bg-primary text-primary-foreground border-primary'
+            : 'border-border text-muted-foreground hover:border-primary hover:text-foreground'
+        )}
+      >
+        {category.name}
+        {selectedChildName && (
+          <span className="opacity-80">
+            {'·'} {selectedChildName}
+          </span>
+        )}
+        <ChevronDown
+          className={cn('ms-0.5 h-3 w-3 transition-transform', open && 'rotate-180')}
+          aria-hidden="true"
+        />
+      </button>
+
+      {open && (
+        <div className="bg-popover text-popover-foreground border-border absolute start-0 top-full z-50 mt-1 min-w-[180px] overflow-hidden rounded-lg border shadow-lg">
+          {/* "All in [category]" option */}
+          <button
+            onClick={() => {
+              onSelect(category.id);
+              setOpen(false);
+            }}
+            className={cn(
+              'hover:bg-muted w-full px-4 py-2 text-start text-sm font-medium transition-colors',
+              selectedId === category.id && 'bg-primary/10 text-primary'
+            )}
+          >
+            {tc('all')} {category.name}
+          </button>
+          <div className="bg-border mx-2 h-px" />
+          {/* Recursive children */}
+          <div onClick={() => setOpen(false)}>
+            <CategoryDropdownItems
+              items={category.children}
+              depth={0}
+              selectedId={selectedId}
+              onSelect={onSelect}
+            />
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+/**
+ * Append a product count to a facet value label when one is known.
+ *
+ * `metafieldCounts` comes from `getMetafieldFilters()`, which not every mode
+ * or store can answer — a missing entry means "no count available", NOT zero,
+ * so the bare label is returned unchanged rather than showing "(0)" on a facet
+ * that may well have products behind it.
+ */
+function withCount(label: string, count: number | undefined): string {
+  return typeof count === 'number' ? `${label} (${count})` : label;
+}
+
+/**
+ * Product listing page (filters + sort + grid + load-more). All data and
+ * URL-state behavior comes from `useProductListing`; this component is
+ * presentation only. Must be rendered inside `<Suspense>` (URL params).
+ */
+export function ProductListing() {
+  const t = useTranslations('products');
+  const tc = useTranslations('common');
+
+  const {
+    products,
+    loading,
+    loadingMore,
+    page,
+    totalPages,
+    total,
+    categories,
+    brands,
+    tags,
+    metafieldDefs,
+    metafieldCounts,
+    searchQuery,
+    categoryId,
+    brandId,
+    tagId,
+    sortIndex,
+    handleLoadMore,
+    updateParam,
+    handleCategorySelect,
+    getSelectedMetafieldValues,
+    setMetafieldValue,
+  } = useProductListing();
+
+  return (
+    <div className="mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8">
+      {/* Page Header */}
+      <div className="mb-8">
+        <h1 className="text-foreground text-3xl font-bold">
+          {searchQuery ? `${t('searchPrefix')} "${searchQuery}"` : t('allProducts')}
+        </h1>
+        {!loading && (
+          <p className="text-muted-foreground mt-1 text-sm">
+            {total} {total === 1 ? tc('product') : tc('products')} {tc('found')}
+          </p>
+        )}
+      </div>
+
+      {/* Filters and Sort */}
+      <div className="mb-6 flex flex-col gap-4">
+        {/* Category Filter */}
+        {categories.length > 0 && (
+          <div className="flex flex-wrap gap-2">
+            <button
+              onClick={() => updateParam('category', '')}
+              className={cn(
+                'rounded-full border px-3 py-1.5 text-sm transition-colors',
+                !categoryId
+                  ? 'bg-primary text-primary-foreground border-primary'
+                  : 'border-border text-muted-foreground hover:border-primary hover:text-foreground'
+              )}
+            >
+              {tc('all')}
+            </button>
+            {categories.map((cat) => (
+              <CategoryChip
+                key={cat.id}
+                category={cat}
+                selectedId={categoryId}
+                onSelect={handleCategorySelect}
+                tc={tc as (key: string) => string}
+              />
+            ))}
+          </div>
+        )}
+
+        {/* Brand, Tag & Sort row */}
+        <div className="flex flex-wrap items-center gap-3">
+          {/* Brand Filter */}
+          {brands.length > 0 && (
+            <Select
+              value={brandId || ALL}
+              onValueChange={(v) => updateParam('brand', v === ALL ? '' : v)}
+            >
+              <SelectTrigger className="h-9 w-auto min-w-[8rem] rounded" aria-label={t('allBrands')}>
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value={ALL}>{t('allBrands')}</SelectItem>
+                {brands.map((b) => (
+                  <SelectItem key={b.id} value={b.id}>
+                    {b.name}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          )}
+
+          {/* Tag Filter */}
+          {tags.length > 0 && (
+            <Select
+              value={tagId || ALL}
+              onValueChange={(v) => updateParam('tag', v === ALL ? '' : v)}
+            >
+              <SelectTrigger className="h-9 w-auto min-w-[8rem] rounded" aria-label={t('allTags')}>
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value={ALL}>{t('allTags')}</SelectItem>
+                {tags.map((tg) => (
+                  <SelectItem key={tg.id} value={tg.id}>
+                    {tg.name}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          )}
+
+          {/* Custom-field (metafield) facets — rendered per definition type.
+              Only definitions flagged `filterable: true` and published to
+              this sales channel reach this list (see `metafieldDefs` filter
+              in the hook). The merchant's display name (`def.name`) is shown
+              as-is — `enumValues` come from the merchant's dashboard config. */}
+          {metafieldDefs.map((def) => {
+            const selected = getSelectedMetafieldValues(def.key);
+            const counts = metafieldCounts[def.key];
+
+            if (def.type === 'BOOLEAN') {
+              const isOn = selected.includes('true');
+              return (
+                <Label
+                  key={def.id}
+                  className="border-border text-foreground hover:border-primary inline-flex h-9 cursor-pointer items-center gap-2 rounded border px-3 text-sm font-normal transition-colors"
+                >
+                  <Checkbox
+                    checked={isOn}
+                    onCheckedChange={(checked) =>
+                      setMetafieldValue(def.key, checked === true ? ['true'] : [])
+                    }
+                  />
+                  {def.name}
+                </Label>
+              );
+            }
+
+            if (def.type === 'SELECT') {
+              return (
+                <Select
+                  key={def.id}
+                  value={selected[0] || ALL}
+                  onValueChange={(v) => setMetafieldValue(def.key, v === ALL ? [] : [v])}
+                >
+                  <SelectTrigger
+                    className="h-9 w-auto min-w-[8rem] rounded"
+                    aria-label={def.name}
+                  >
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value={ALL}>{`${tc('all')} ${def.name}`}</SelectItem>
+                    {(def.enumValues || []).map((v) => (
+                      <SelectItem key={v.value} value={v.value}>
+                        {withCount(v.label || v.value, counts?.[v.value])}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              );
+            }
+
+            // MULTI_SELECT — chip toggles. Each click adds/removes one value.
+            return (
+              <div
+                key={def.id}
+                className="border-border inline-flex items-center gap-1 rounded border px-2 py-1"
+                aria-label={def.name}
+              >
+                <span className="text-muted-foreground px-1 text-xs">{def.name}:</span>
+                {(def.enumValues || []).map((v) => {
+                  const active = selected.includes(v.value);
+                  return (
+                    <button
+                      key={v.value}
+                      type="button"
+                      onClick={() =>
+                        setMetafieldValue(
+                          def.key,
+                          active ? selected.filter((s) => s !== v.value) : [...selected, v.value]
+                        )
+                      }
+                      className={cn(
+                        'rounded-full border px-2 py-0.5 text-xs transition-colors',
+                        active
+                          ? 'bg-primary text-primary-foreground border-primary'
+                          : 'border-border text-muted-foreground hover:border-primary hover:text-foreground'
+                      )}
+                    >
+                      {withCount(v.label || v.value, counts?.[v.value])}
+                    </button>
+                  );
+                })}
+              </div>
+            );
+          })}
+
+          {/* Sort */}
+          <div className="flex items-center gap-2 sm:ms-auto">
+            <Label
+              htmlFor="sort"
+              className="text-muted-foreground whitespace-nowrap font-normal"
+            >
+              {tc('sortBy')}
+            </Label>
+            <Select
+              value={String(sortIndex)}
+              onValueChange={(v) => updateParam('sort', v)}
+            >
+              <SelectTrigger id="sort" className="h-9 w-auto min-w-[8rem] rounded">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                {sortOptions.map((opt, idx) => (
+                  <SelectItem key={idx} value={String(idx)}>
+                    {t(opt.labelKey)}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+        </div>
+      </div>
+
+      {/* Products Grid */}
+      {loading ? (
+        <div className="flex items-center justify-center py-20">
+          <LoadingSpinner size="lg" />
+        </div>
+      ) : (
+        <>
+          <ProductGrid products={products} />
+
+          {/* Load More */}
+          {page < totalPages && (
+            <div className="mt-10 flex justify-center">
+              <Button
+                onClick={handleLoadMore}
+                disabled={loadingMore}
+                className="rounded px-6 py-2.5"
+              >
+                {loadingMore ? (
+                  <>
+                    <LoadingSpinner
+                      size="sm"
+                      className="border-primary-foreground/30 border-t-primary-foreground"
+                    />
+                    {tc('loading')}
+                  </>
+                ) : (
+                  t('loadMore')
+                )}
+              </Button>
+            </div>
+          )}
+        </>
+      )}
+    </div>
+  );
+}