Merge pull request #50 from mcinquin/ui

feat(ui): add multiselector for tags

Author: mcinquin

package.json

@@ -1,6 +1,6 @@
 {
   "name": "hobbyhoops",
-  "version": "1.14.0",
+  "version": "1.13.1",
   "private": true,
   "engines": {
     "node": ">=24 <25"

src/app/(app)/collection/page.tsx

@@ -16,8 +16,14 @@ function toSearchParams(
 ): URLSearchParams {
   const searchParams = new URLSearchParams();
   for (const [key, value] of Object.entries(params)) {
-    const raw = Array.isArray(value) ? value[0] : value;
-    if (raw) searchParams.set(key, raw);
+    if (value === undefined) continue;
+    if (Array.isArray(value)) {
+      for (const entry of value) {
+        if (entry) searchParams.append(key, entry);
+      }
+    } else if (value) {
+      searchParams.set(key, value);
+    }
   }
   return searchParams;
 }

src/components/card-table.tsx

@@ -9,9 +9,11 @@ import {
   type ColumnDef,
 } from "@tanstack/react-table";
 import {
+  COLLECTION_TAG_VALUES,
   setsForBrandFilter,
   variationsForFilters,
   type CollectionSortKey,
+  type CollectionTagValue,
 } from "@/lib/collection-query";
 import { Card, type References } from "@/lib/types";
 import { CardBadges } from "@/components/card-badges";
@@ -115,11 +117,10 @@ export function CardTable({
   const { filters: urlFilters, updateFilters, toggleSort, isPending } =
     useCollectionUrlFilters();
 
-  const rookieOnly = urlFilters.tag === "rookie";
-  const autoOnly = urlFilters.tag === "autograph";
-  const memoOnly = urlFilters.tag === "memorabilia";
-  const serialOnly = urlFilters.tag === "numbered";
-  const tradableOnly = urlFilters.tag === "tradable";
+  const selectedTags = useMemo(
+    () => new Set(urlFilters.tags),
+    [urlFilters.tags]
+  );
 
   function sortState(column: CollectionSortKey): false | "asc" | "desc" {
     if (urlFilters.sort !== column) return false;
@@ -265,11 +266,11 @@ export function CardTable({
     }
   }, [urlFilters.variation, variationSuggestions, updateFilters]);
 
-  function toggleTag(tag: typeof urlFilters.tag) {
-    updateFilters(
-      { tag: urlFilters.tag === tag ? "" : tag },
-      { immediate: true }
-    );
+  function toggleTag(tag: CollectionTagValue) {
+    const next = selectedTags.has(tag)
+      ? urlFilters.tags.filter((value) => value !== tag)
+      : [...urlFilters.tags, tag];
+    updateFilters({ tags: next }, { immediate: true });
   }
 
   const activeFilters = useMemo(
@@ -290,21 +291,9 @@ export function CardTable({
         urlFilters.variation
           ? t("cards.activeVariation", { value: urlFilters.variation })
           : "",
-        rookieOnly ? t("badges.rookie") : "",
-        autoOnly ? t("badges.autograph") : "",
-        memoOnly ? t("badges.memorabilia") : "",
-        serialOnly ? t("badges.numbered") : "",
-        tradableOnly ? t("badges.tradable") : "",
+        ...urlFilters.tags.map((tag) => badgeLabels[tag]),
       ].filter(Boolean),
-    [
-      autoOnly,
-      memoOnly,
-      rookieOnly,
-      serialOnly,
-      t,
-      tradableOnly,
-      urlFilters,
-    ]
+    [badgeLabels, t, urlFilters]
   );
 
   return (
@@ -381,26 +370,14 @@ export function CardTable({
           />
 
           <div className="flex flex-wrap gap-1 sm:col-span-2 lg:col-span-1">
-            <FilterChipButton
-              label={t("badges.rookie")}
-              pressed={rookieOnly}
-              onPressedChange={() => toggleTag("rookie")}
-            />
-            <FilterChipButton
-              label={t("badges.autograph")}
-              pressed={autoOnly}
-              onPressedChange={() => toggleTag("autograph")}
-            />
-            <FilterChipButton
-              label={t("badges.memorabilia")}
-              pressed={memoOnly}
-              onPressedChange={() => toggleTag("memorabilia")}
-            />
-            <FilterChipButton
-              label={t("badges.numbered")}
-              pressed={serialOnly}
-              onPressedChange={() => toggleTag("numbered")}
-            />
+            {COLLECTION_TAG_VALUES.map((tag) => (
+              <FilterChipButton
+                key={tag}
+                label={badgeLabels[tag]}
+                pressed={selectedTags.has(tag)}
+                onPressedChange={() => toggleTag(tag)}
+              />
+            ))}
           </div>
         </div>
 

src/hooks/use-collection-url-filters.ts

@@ -6,10 +6,10 @@ import {
   parseCollectionSearchParams,
   type CollectionListQuery,
   type CollectionSortKey,
-  type CollectionTagFilter,
+  type CollectionTagValue,
 } from "@/lib/collection-query";
 
-export type { CollectionTagFilter, CollectionSortKey };
+export type { CollectionTagValue, CollectionSortKey };
 
 export type CollectionFiltersState = Pick<
   CollectionListQuery,
@@ -20,7 +20,7 @@ export type CollectionFiltersState = Pick<
   | "brand"
   | "set"
   | "variation"
-  | "tag"
+  | "tags"
   | "page"
   | "sort"
   | "sortDesc"
@@ -48,7 +48,9 @@ export function useCollectionUrlFilters() {
       if (next.brand) params.set("brand", next.brand);
       if (next.set) params.set("set", next.set);
       if (next.variation) params.set("variation", next.variation);
-      if (next.tag) params.set("tag", next.tag);
+      for (const tag of next.tags) {
+        params.append("tag", tag);
+      }
       if (next.page > 1) params.set("page", String(next.page));
       if (next.sort !== "player") params.set("sort", next.sort);
       if (next.sortDesc) params.set("sortDir", "desc");

src/lib/collection-query.ts

@@ -4,14 +4,21 @@ import type { References } from "@/lib/types";
 export const COLLECTION_PAGE_SIZE = 50;
 export const COLLECTION_MAX_PAGE_SIZE = 100;
 
-export type CollectionTagFilter =
-  | ""
+export type CollectionTagValue =
   | "rookie"
   | "autograph"
   | "memorabilia"
   | "numbered"
   | "tradable";
 
+export const COLLECTION_TAG_VALUES: CollectionTagValue[] = [
+  "rookie",
+  "autograph",
+  "memorabilia",
+  "numbered",
+  "tradable",
+];
+
 export type CollectionSortKey =
   | "player"
   | "team"
@@ -33,15 +40,29 @@ const sortKeySchema = z.enum([
   "grading",
 ]);
 
-const tagSchema = z
-  .union([
-    z.literal(""),
-    z.enum(["rookie", "autograph", "memorabilia", "numbered", "tradable"]),
-  ])
-  .catch("");
+const tagValueSchema = z.enum([
+  "rookie",
+  "autograph",
+  "memorabilia",
+  "numbered",
+  "tradable",
+]);
 
 const filterValueSchema = z.string().trim().max(128).catch("");
 
+function parseCollectionTags(params: URLSearchParams): CollectionTagValue[] {
+  const seen = new Set<CollectionTagValue>();
+  const tags: CollectionTagValue[] = [];
+  for (const raw of params.getAll("tag")) {
+    const parsed = tagValueSchema.safeParse(raw);
+    if (parsed.success && !seen.has(parsed.data)) {
+      seen.add(parsed.data);
+      tags.push(parsed.data);
+    }
+  }
+  return tags;
+}
+
 export interface CollectionListQuery {
   search: string;
   player: string;
@@ -50,7 +71,8 @@ export interface CollectionListQuery {
   brand: string;
   set: string;
   variation: string;
-  tag: CollectionTagFilter;
+  /** Filtres cumulés (ET) : ex. rookie + autograph = RC et Auto. */
+  tags: CollectionTagValue[];
   page: number;
   pageSize: number;
   sort: CollectionSortKey;
@@ -99,7 +121,7 @@ export function parseCollectionSearchParams(
     brand: filterValueSchema.parse(params.get("brand") ?? ""),
     set: filterValueSchema.parse(params.get("set") ?? ""),
     variation: filterValueSchema.parse(params.get("variation") ?? ""),
-    tag: tagSchema.parse(params.get("tag") ?? ""),
+    tags: parseCollectionTags(params),
     page,
     pageSize,
     sort,
@@ -153,24 +175,26 @@ export function buildCollectionWhereClause(
     params.push(`%${escapeLike(query.variation.trim().toLowerCase())}%`);
   }
 
-  switch (query.tag) {
-    case "rookie":
-      clauses.push("rookie = 1");
-      break;
-    case "autograph":
-      clauses.push("autograph = 1");
-      break;
-    case "memorabilia":
-      clauses.push("memorabilia = 1");
-      break;
-    case "numbered":
-      clauses.push("serial_number IS NOT NULL AND serial_number != ''");
-      break;
-    case "tradable":
-      clauses.push("tradable = 1");
-      break;
-    default:
-      break;
+  for (const tag of query.tags) {
+    switch (tag) {
+      case "rookie":
+        clauses.push("rookie = 1");
+        break;
+      case "autograph":
+        clauses.push("autograph = 1");
+        break;
+      case "memorabilia":
+        clauses.push("memorabilia = 1");
+        break;
+      case "numbered":
+        clauses.push("serial_number IS NOT NULL AND serial_number != ''");
+        break;
+      case "tradable":
+        clauses.push("tradable = 1");
+        break;
+      default:
+        break;
+    }
   }
 
   const whereSql = clauses.length ? `WHERE ${clauses.join(" AND ")}` : "";