Update COMMIT_MESSAGE.txt

COMMIT_MESSAGE.txt

@@ -1,5 +1,6 @@
 feat(ui): redesign ServerError component with calm UX and accessibility
 
+
 BREAKING CHANGE: ServerError API simplified - onGoHome prop removed
 
 This is a complete UX/UI redesign of the ServerError component following

src/components/CategoryPills.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+
+interface CategoryPillsProps {
+  categories: readonly string[];
+  selectedCategories: Set<string>;
+  toggleCategory: (category: string) => void;
+  clearCategories: () => void;
+}
+
+export default function CategoryPills({
+  categories,
+  selectedCategories,
+  toggleCategory,
+  clearCategories
+}: CategoryPillsProps) {
+  const isAllSelected = selectedCategories.size === 0;
+
+  return (
+    <div className="pill-bar" role="group" aria-label="Filter by category">
+      <button
+        type="button"
+        className={`pill-bar__item ${isAllSelected ? 'pill-bar__item--active' : ''}`}
+        aria-pressed={isAllSelected}
+        onClick={clearCategories}
+      >
+        All
+      </button>
+      {categories.map((c) => {
+        const isActive = selectedCategories.has(c);
+        return (
+          <button
+            key={c}
+            type="button"
+            className={`pill-bar__item ${isActive ? 'pill-bar__item--active' : ''}`}
+            aria-pressed={isActive}
+            onClick={() => toggleCategory(c)}
+          >
+            {c}
+          </button>
+        );
+      })}
+    </div>
+  );
+}

src/index.css

@@ -4601,3 +4601,53 @@ code,
   gap: 6px;
   margin-left: 8px;
 }
+
+/* ─── Category Pills ──────────────────────────────────────────────────────── */
+.pill-bar {
+  display: flex;
+  gap: 8px;
+  overflow-x: auto;
+  padding-bottom: 8px;
+  margin-bottom: 16px;
+  scrollbar-width: thin;
+}
+
+.pill-bar::-webkit-scrollbar {
+  height: 6px;
+}
+
+.pill-bar::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.pill-bar::-webkit-scrollbar-thumb {
+  background: var(--line-strong);
+  border-radius: 999px;
+}
+
+.pill-bar__item {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  white-space: nowrap;
+  padding: 0 16px;
+  min-height: 44px;
+  border-radius: 999px;
+  border: 1px solid var(--line);
+  background: var(--surface-soft);
+  color: var(--text);
+  font-weight: 500;
+  cursor: pointer;
+  transition: all var(--transition-speed) ease;
+}
+
+.pill-bar__item:hover,
+.pill-bar__item:focus-visible {
+  background: var(--line);
+}
+
+.pill-bar__item--active {
+  background: color-mix(in srgb, var(--accent) 15%, transparent);
+  color: var(--accent);
+  border-color: var(--accent);
+}

src/pages/MarketplacePage.tsx

@@ -6,7 +6,8 @@ import { useFavorites } from "../hooks/useFavorites";
 import SearchBar from "../components/SearchBar";
 import SortDropdown, { type SortValue } from "../components/SortDropdown";
 
-import FiltersSidebar from "../components/FiltersSidebar";
+import CategoryPills from "../components/CategoryPills";
+import FiltersSidebar, { ALL_CATEGORIES } from "../components/FiltersSidebar";
 import EmptyState from "../components/EmptyState";
 import { Pagination } from "../components/Pagination";
 import MOCK_APIS, { type APIItem } from "../data/mockApis";
@@ -302,6 +303,11 @@ export default function MarketplacePage(): JSX.Element {
     setSearchParams({ page: "1" });
   };
 
+  const clearCategories = () => {
+    setSelectedCategories(new Set());
+    setSearchParams({ page: "1" });
+  };
+
   const clearFilters = () => {
     setSelectedCategories(new Set());
     setSelectedTag(null);
@@ -458,6 +464,13 @@ export default function MarketplacePage(): JSX.Element {
             </div>
           </div>
 
+          <CategoryPills
+            categories={ALL_CATEGORIES}
+            selectedCategories={selectedCategories}
+            toggleCategory={toggleCategory}
+            clearCategories={clearCategories}
+          />
+
           {fetchError ? (
             <EmptyState variant="error" onRetry={handleRetryFetch} />
           ) : filtered.length === 0 ? (