From 7f74a62982b100426e1d2b20f2270b03854836c0 Mon Sep 17 00:00:00 2001
From: Mauro Balades <mauro.balades@tutanota.com>
Date: Thu, 22 Aug 2024 21:36:01 +0200
Subject: [PATCH] refactor: Add tag filtering functionality to theme search

---
 src/components/marketplace.tsx   |  5 +--
 src/components/themes-search.tsx | 59 ++++++++++++++++++++++----------
 src/lib/themes.ts                | 17 ++++++---
 3 files changed, 55 insertions(+), 26 deletions(-)

diff --git a/src/components/marketplace.tsx b/src/components/marketplace.tsx
index ad9bb4b..4f3795b 100644
--- a/src/components/marketplace.tsx
+++ b/src/components/marketplace.tsx
@@ -7,6 +7,7 @@ import { Button } from "./ui/button";
 
 export default function MarketplacePage() {
   const [searchInput, setSearchInput] = React.useState("");
+  const [tags, setTags] = React.useState<string[]>(["all"]);
   const [themes, setThemes] = React.useState<ZenTheme[]>([]);
 
   React.useEffect(() => {
@@ -18,11 +19,11 @@ export default function MarketplacePage() {
       <div className="mx-auto w-full text-center border-b pt-48 pb-24 mb-12 bg-gradient-to-r from-[#f6cfbe] to-[#b9dcf2] dark:from-[#0d1117] dark:to-[#0d1117]">
         <div className="w-full lg:w-1/2 xl:w-1/2 mx-auto px-2 lg:px-none">
           <h1 className="text-4xl lg:text-7xl font-bold">Themes Store</h1>
-          <ThemesSearch input={searchInput} setInput={setSearchInput} />
+          <ThemesSearch input={searchInput} setInput={setSearchInput} tags={tags} setTags={setTags} />
         </div>
       </div>
       <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4 gap-8 mt-10 w-full lg:w-1/2 xl:w-2/3 2xl:w-3/4">
-        {getThemesFromSearch(themes, searchInput).map((theme) => (
+        {getThemesFromSearch(themes, searchInput, tags).map((theme) => (
           <ThemeCard key={theme.name} theme={theme} />
         ))}
       </div>
diff --git a/src/components/themes-search.tsx b/src/components/themes-search.tsx
index c040f40..f99cf70 100644
--- a/src/components/themes-search.tsx
+++ b/src/components/themes-search.tsx
@@ -1,30 +1,51 @@
 import { SearchIcon } from "lucide-react";
 import { Button } from "./ui/button";
+import { ny } from "@/lib/utils";
+
+const TAGS = [
+  "all",
+  "color-scheme",
+  "utility",
+];
 
 export default function ThemesSearch({
-  input, setInput
+  input, setInput, tags, setTags
 }: {
   input: string;
   setInput: (input: string) => void;
+  tags: string[];
+  setTags: (tags: string[]) => void;
 }) {
   return (
-    <div className="flex w-full p-2 bg-black/10 dark:bg-muted/50 rounded-full overflow-hidden mt-10 items-center border border-black dark:border-muted">
-      <SearchIcon className="w-6 h-6 mx-4 text-black dark:text-white" />
-      <input
-        type="text"
-        value={input}
-        onChange={(e) => setInput(e.target.value)}
-        placeholder="Search themes"
-        className="w-full bg-transparent border-none focus:outline-none focus:border-none focus:ring-0 dark:text-white text-black"
-      />
-      <Button
-        onClick={() => window.open("https://docs.zen-browser.app/themes-store/themes-marketplace-submission-guidelines#themes-store-submission-guidelines", "_blank")}
-        className="text-muted rounded-full rounded-r-none hidden md:block"
-      >Submit a theme</Button>
-      <Button
-        onClick={() => window.open("/create-theme", "_self")}
-        className="text-muted rounded-full rounded-l-none border-l border-black dark:border-none hidden md:block"
-      >Create your theme</Button>
-    </div>
+    <>
+      <div className="flex w-full p-2 bg-black/10 dark:bg-muted/50 rounded-full overflow-hidden mt-10 items-center border border-black dark:border-muted">
+        <SearchIcon className="w-6 h-6 mx-4 text-black dark:text-white" />
+        <input
+          type="text"
+          value={input}
+          onChange={(e) => setInput(e.target.value)}
+          placeholder="Search themes"
+          className="w-full bg-transparent border-none focus:outline-none focus:border-none focus:ring-0 dark:text-white text-black"
+        />
+        <Button
+          onClick={() => window.open("https://docs.zen-browser.app/themes-store/themes-marketplace-submission-guidelines#themes-store-submission-guidelines", "_blank")}
+          className="text-muted rounded-full rounded-r-none hidden md:block"
+        >Submit a theme</Button>
+        <Button
+          onClick={() => window.open("/create-theme", "_self")}
+          className="text-muted rounded-full rounded-l-none border-l border-black dark:border-none hidden md:block"
+        >Create your theme</Button>
+      </div>
+      <div className="flex flex-wrap gap-2 mt-4">
+        {TAGS.map((tag) => (
+          <Button
+            variant="ghost"
+            key={tag}
+            onClick={() => setTags([tag])}
+            className={ny(`!rounded-full px-5 ${tags.includes(tag) ? "bg-black dark:bg-white text-white dark:text-black" : ""}`)}
+          >{tag}</Button>
+        ))}
+      </div>
+    </>
   );
 }
diff --git a/src/lib/themes.ts b/src/lib/themes.ts
index 1d8fc1e..8579126 100644
--- a/src/lib/themes.ts
+++ b/src/lib/themes.ts
@@ -7,9 +7,8 @@ export interface ZenTheme {
   id: string
   homepage?: string
   readme: string
-  preferences: {
-    [key: string]: string
-  },
+  preferences?: string
+  isColorTheme: boolean
   author: string
 }
 
@@ -28,8 +27,16 @@ export async function getAllThemes() {
   return themesArray;
 }
 
-export function getThemesFromSearch(themes: ZenTheme[], query: string): ZenTheme[] {
-  return themes.filter((theme) => theme.name.toLowerCase().includes(query.toLowerCase()));
+export function getThemesFromSearch(themes: ZenTheme[], query: string, tags: string[]): ZenTheme[] {
+  let filtered = themes.filter((theme) => theme.name.toLowerCase().includes(query.toLowerCase()));
+  if (tags.includes("all")) return filtered;
+  const isSearchingForColorScheme = tags.includes("color-scheme");
+  const isSearchingForUtility = !isSearchingForColorScheme && tags.includes("utility");
+  return filtered.filter((theme) => {
+    if (isSearchingForColorScheme && theme.isColorTheme) return true;
+    if (isSearchingForUtility && !theme.isColorTheme) return true;
+    return false;
+  });
 }
 
 export async function getThemeFromId(id: string) {