From d22826c8ca9db241cc625ce8ec3bd48f21e0338f Mon Sep 17 00:00:00 2001
From: Orioye Blessing Esther <210155349+ayaoba24@users.noreply.github.com>
Date: Tue, 30 Jun 2026 10:40:22 +0100
Subject: [PATCH 1/2] Update COMMIT_MESSAGE.txt

---
 COMMIT_MESSAGE.txt | 1 +
 1 file changed, 1 insertion(+)

diff --git a/COMMIT_MESSAGE.txt b/COMMIT_MESSAGE.txt
index 46a89f4..97ff093 100644
--- a/COMMIT_MESSAGE.txt
+++ b/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

From 772ef4ed590070090f70e121ded5312fdcc8746e Mon Sep 17 00:00:00 2001
From: ayaoba24 <orioyeesther2019@gmail.com>
Date: Thu, 2 Jul 2026 12:04:33 +0100
Subject: [PATCH 2/2] feat: inline category pill bar on MarketplacePage

---
 src/components/CategoryPills.tsx | 44 ++++++++++++++++++++++++++++
 src/index.css                    | 50 ++++++++++++++++++++++++++++++++
 src/pages/MarketplacePage.tsx    | 15 +++++++++-
 3 files changed, 108 insertions(+), 1 deletion(-)
 create mode 100644 src/components/CategoryPills.tsx

diff --git a/src/components/CategoryPills.tsx b/src/components/CategoryPills.tsx
new file mode 100644
index 0000000..fc91598
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/src/index.css b/src/index.css
index 67d5bf4..594475e 100644
--- a/src/index.css
+++ b/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);
+}
diff --git a/src/pages/MarketplacePage.tsx b/src/pages/MarketplacePage.tsx
index d5e7602..0422b61 100644
--- a/src/pages/MarketplacePage.tsx
+++ b/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 ? (