Add collection filters and sort, out-of-stock options, gallery drag

- Collections: filters and sort via the Storefront API — the products connection now takes `filters`/`after` and returns its facets, with cursor-based load more on the collection page - Extract ProductFilters (renamed from SearchFilters) and a shared ProductToolbar so search and collections use the same chrome - PDP: mark option values with no in-stock variant using a diagonal strike, computed against the other selected options - PDP: pointer drag-scrolling for the mobile image carousel, since a scroll container doesn't drag with a mouse - Header/cart: circular icon buttons, tighter spacing, and icon sizes set by class (Button's base CSS clamps un-classed svgs to size-4) Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_016jWbNNJLksC1QG8z8845FX
2026-08-01 12:27:05 -04:00
parent cc901b9ce8
commit 2ef5639a2e
13 changed files with 515 additions and 144 deletions
@@ -0,0 +1,100 @@
+'use client';
+
+import React, { useState } from 'react';
+import { Button } from '@/components/ui/button';
+import {
+  RiEqualizerLine,
+  RiArrowDownSLine,
+  RiCheckLine,
+} from '@remixicon/react';
+
+export interface ToolbarSortOption {
+  label: string;
+}
+
+interface ProductToolbarProps {
+  totalCount?: number | null;
+  onOpenFilters: () => void;
+  sortOptions: ToolbarSortOption[];
+  sortIndex: number;
+  onSortChange: (index: number) => void;
+  activeFilterCount?: number;
+}
+
+// Filters trigger on the left, item count and sort menu on the right — shared
+// by the search results and collection pages.
+const ProductToolbar: React.FC<ProductToolbarProps> = ({
+  totalCount,
+  onOpenFilters,
+  sortOptions,
+  sortIndex,
+  onSortChange,
+  activeFilterCount = 0,
+}) => {
+  const [sortOpen, setSortOpen] = useState(false);
+
+  return (
+    <div className="flex items-center justify-between">
+      <Button
+        onClick={onOpenFilters}
+        variant="ghost"
+        className="gap-x-2 px-0 font-normal hover:bg-transparent"
+      >
+        <RiEqualizerLine size={18} />
+        Filters
+        {activeFilterCount > 0 && (
+          <span className="flex h-5 min-w-5 items-center justify-center rounded-full bg-foreground px-1.5 text-[11px] font-medium text-background">
+            {activeFilterCount}
+          </span>
+        )}
+      </Button>
+
+      <div className="flex items-center gap-x-4">
+        {typeof totalCount === 'number' && (
+          <span className="text-sm text-muted-foreground tabular-nums">
+            {totalCount} {totalCount === 1 ? 'Item' : 'Items'}
+          </span>
+        )}
+
+        <div className="relative">
+          <Button
+            onClick={() => setSortOpen((prev) => !prev)}
+            variant="ghost"
+            aria-expanded={sortOpen}
+            className="gap-x-1 px-0 font-normal hover:bg-transparent"
+          >
+            Sort
+            <RiArrowDownSLine size={16} />
+          </Button>
+
+          {sortOpen && (
+            <>
+              {/* Click-away layer sits under the menu, above the page. */}
+              <div
+                className="fixed inset-0 z-40"
+                onClick={() => setSortOpen(false)}
+              />
+              <div className="absolute right-0 top-full z-50 mt-1 w-56 rounded-md border border-border bg-background py-1 shadow-md">
+                {sortOptions.map((option, index) => (
+                  <button
+                    key={option.label}
+                    onClick={() => {
+                      onSortChange(index);
+                      setSortOpen(false);
+                    }}
+                    className="flex w-full items-center justify-between px-4 py-2 text-left text-sm text-foreground hover:bg-accent"
+                  >
+                    {option.label}
+                    {index === sortIndex && <RiCheckLine size={16} />}
+                  </button>
+                ))}
+              </div>
+            </>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ProductToolbar;