From df2ddfdab000e364df9020934a24e89edbe0d0ac Mon Sep 17 00:00:00 2001
From: Zakher Masri <zakhermasri@gmail.com>
Date: Tue, 11 Mar 2025 17:43:30 +0300
Subject: [PATCH] chore(ui): improve search UI

---
 app/src/App.tsx                     |  5 +-
 app/src/components/Search.tsx       | 86 ++++++++++++++---------------
 app/src/components/SelectedTags.tsx | 30 ++++++++++
 app/src/components/TemplateGrid.tsx | 48 +++++++++++++---
 app/src/store.ts                    | 47 ++++++++++------
 5 files changed, 146 insertions(+), 70 deletions(-)
 create mode 100644 app/src/components/SelectedTags.tsx

diff --git a/app/src/App.tsx b/app/src/App.tsx
index edac97c..9f7195f 100644
--- a/app/src/App.tsx
+++ b/app/src/App.tsx
@@ -1,14 +1,17 @@
 import TemplateGrid from "./components/TemplateGrid";
 import Navigation from "./components/Navigation";
 import Search from "./components/Search";
+import { useStore } from "./store";
 import "./App.css";
 
 function App() {
+  const view = useStore((state) => state.view);
+
   return (
     <div className="min-h-screen">
       <Navigation />
       <Search />
-      <TemplateGrid />
+      <TemplateGrid view={view} />
     </div>
   );
 }
diff --git a/app/src/components/Search.tsx b/app/src/components/Search.tsx
index 5c8b64a..8b37f0f 100644
--- a/app/src/components/Search.tsx
+++ b/app/src/components/Search.tsx
@@ -1,7 +1,6 @@
 import { Input } from "./ui/input";
 import { useStore } from "../store";
-import { SearchIcon, XIcon } from "lucide-react";
-import { Badge } from "./ui/badge";
+import { Grid, List, SearchIcon, XIcon } from "lucide-react";
 import { Button } from "./ui/button";
 import { Popover, PopoverContent, PopoverTrigger } from "./ui/popover";
 import {
@@ -15,14 +14,16 @@ import {
 import { cn } from "@/lib/utils";
 import { Check, ChevronsUpDown } from "lucide-react";
 import React from "react";
-
+import { Tabs, TabsList, TabsTrigger } from "./ui/tabs";
+import SelectedTags from "./SelectedTags";
 const Search = () => {
-  const { templates, searchQuery, setSearchQuery } = useStore();
+  const { templates, searchQuery, setSearchQuery, setView } = useStore();
   const selectedTags = useStore((state) => state.selectedTags);
   const addSelectedTag = useStore((state) => state.addSelectedTag);
   const removeSelectedTag = useStore((state) => state.removeSelectedTag);
   const [open, setOpen] = React.useState(false);
   const [tagSearch, setTagSearch] = React.useState("");
+  const view = useStore((state) => state.view);
 
   // Get all unique tags, safely handle empty templates
   const uniqueTags = React.useMemo(() => {
@@ -41,31 +42,44 @@ const Search = () => {
   }, [uniqueTags, tagSearch]);
 
   return (
-    <div className="max-w-xl mx-auto p-12">
+    <div className=" mx-auto p-12  border-b w-full">
       <h1 className="text-2xl md:text-3xl xl:text-4xl font-bold text-center mb-8">
         Available Templates ({templates?.length || 0})
       </h1>
-      <div className="max-w-xl mx-auto">
-        <div className="flex flex-row gap-2">
-          <div className="relative w-full">
-            <Input
-              type="text"
-              placeholder="Search templates..."
-              value={searchQuery}
-              onChange={(e) => setSearchQuery(e.target.value)}
-              className="w-full"
-            />
-            {searchQuery.length > 0 ? (
-              <div
-                className="cursor-pointer"
-                onClick={() => setSearchQuery("")}
-              >
-                <XIcon className="absolute right-3 top-1/2 -translate-y-1/2 h-5 w-5 text-gray-400" />
-              </div>
-            ) : (
-              <SearchIcon className="absolute right-3 top-1/2 -translate-y-1/2 h-5 w-5 text-gray-400" />
-            )}
-          </div>
+      <div className="max-w-xl mx-auto flex flex-col gap-2">
+        <div className="relative w-full">
+          <Input
+            type="text"
+            placeholder="Search templates..."
+            value={searchQuery}
+            onChange={(e) => setSearchQuery(e.target.value)}
+            className="w-full p-6"
+          />
+          {searchQuery.length > 0 ? (
+            <div className="cursor-pointer" onClick={() => setSearchQuery("")}>
+              <XIcon className="absolute right-3 top-1/2 -translate-y-1/2 h-5 w-5 text-gray-400" />
+            </div>
+          ) : (
+            <SearchIcon className="absolute right-3 top-1/2 -translate-y-1/2 h-5 w-5 text-gray-400" />
+          )}
+        </div>
+
+        <div className="flex flex-row gap-2 justify-between">
+          <Tabs
+            defaultValue={view}
+            onValueChange={(value) => {
+              setView(value as "grid" | "rows");
+            }}
+          >
+            <TabsList>
+              <TabsTrigger value="grid">
+                <Grid /> <span className="text-xs p-1">Grid</span>
+              </TabsTrigger>
+              <TabsTrigger value="rows">
+                <List /> <span className="text-xs p-1">List</span>
+              </TabsTrigger>
+            </TabsList>
+          </Tabs>
 
           <Popover open={open} onOpenChange={setOpen}>
             <PopoverTrigger asChild>
@@ -118,25 +132,7 @@ const Search = () => {
             </PopoverContent>
           </Popover>
         </div>
-        {selectedTags.length > 0 && (
-          <div className="flex flex-wrap gap-2 mt-4">
-            {selectedTags.map((tag) => (
-              <Badge
-                key={tag}
-                variant="default"
-                className="cursor-pointer pr-1 flex items-center gap-1"
-              >
-                {tag}
-                <div
-                  className="hover:bg-primary-foreground/20 rounded-full p-1"
-                  onClick={() => removeSelectedTag(tag)}
-                >
-                  <XIcon className="h-3 w-3" />
-                </div>
-              </Badge>
-            ))}
-          </div>
-        )}
+        {selectedTags.length > 0 && <SelectedTags />}
       </div>
     </div>
   );
diff --git a/app/src/components/SelectedTags.tsx b/app/src/components/SelectedTags.tsx
new file mode 100644
index 0000000..feaa888
--- /dev/null
+++ b/app/src/components/SelectedTags.tsx
@@ -0,0 +1,30 @@
+import { XIcon } from "lucide-react";
+import { useStore } from "../store";
+import { Badge } from "./ui/badge";
+
+const SelectedTags = () => {
+  const selectedTags = useStore((state) => state.selectedTags);
+  const removeSelectedTag = useStore((state) => state.removeSelectedTag);
+
+  return (
+    <div className="flex flex-wrap gap-2 mt-4 border-t pt-4">
+      {selectedTags.map((tag) => (
+        <Badge
+          key={tag}
+          variant="default"
+          className="cursor-pointer pr-1 flex items-center gap-1"
+        >
+          {tag}
+          <div
+            className="hover:bg-primary-foreground/20 rounded-full p-1"
+            onClick={() => removeSelectedTag(tag)}
+          >
+            <XIcon className="h-3 w-3" />
+          </div>
+        </Badge>
+      ))}
+    </div>
+  );
+};
+
+export default SelectedTags;
diff --git a/app/src/components/TemplateGrid.tsx b/app/src/components/TemplateGrid.tsx
index 658c450..ea06047 100644
--- a/app/src/components/TemplateGrid.tsx
+++ b/app/src/components/TemplateGrid.tsx
@@ -22,6 +22,8 @@ import { useStore } from "../store";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "./ui/tabs";
 import { Label } from "./ui/label";
 import { Clipboard } from "lucide-react";
+import { Skeleton } from "./ui/skeleton";
+import { cn } from "@/lib/utils";
 
 interface Template {
   id: string;
@@ -42,11 +44,17 @@ interface TemplateFiles {
   config: string | null;
 }
 
-const TemplateGrid: React.FC = () => {
+interface TemplateGridProps {
+  view: "grid" | "rows";
+}
+
+const TemplateGrid: React.FC<TemplateGridProps> = ({ view }) => {
   const { templates, setTemplates } = useStore();
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
-  const { addSelectedTag, searchQuery, selectedTags } = useStore();
+  const searchQuery = useStore((state) => state.searchQuery);
+  const selectedTags = useStore((state) => state.selectedTags);
+  const { addSelectedTag } = useStore();
 
   const [selectedTemplate, setSelectedTemplate] = useState<Template | null>(
     null
@@ -133,9 +141,23 @@ const TemplateGrid: React.FC = () => {
   if (loading) {
     return (
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
-        <h1 className="text-4xl font-bold text-center text-gray-900 mb-8">
-          Loading templates...
-        </h1>
+        <div
+          className={cn("", {
+            "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6":
+              view === "grid",
+            "grid grid-cols-1 gap-4": view === "rows",
+          })}
+        >
+          {[1, 2, 3].map((item) => (
+            <Skeleton
+              key={item}
+              className={cn({
+                "h-[300px]": view === "grid",
+                "h-[135px]": view === "rows",
+              })}
+            ></Skeleton>
+          ))}
+        </div>
       </div>
     );
   }
@@ -154,12 +176,24 @@ const TemplateGrid: React.FC = () => {
   return (
     <>
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
-        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
+        <div
+          className={cn("", {
+            "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6":
+              view === "grid",
+            "grid grid-cols-1 gap-4": view === "rows",
+          })}
+        >
           {filteredTemplates.length > 0 ? (
             filteredTemplates.map((template) => (
               <Card
                 key={template.id}
-                className=" cursor-pointer hover:shadow-lg transition-all duration-200 h-full max-h-[300px]"
+                className={cn(
+                  " cursor-pointer hover:shadow-lg transition-all duration-200 h-full max-h-[300px]",
+                  {
+                    "flex-col": view === "grid",
+                    "flex-row": view === "rows",
+                  }
+                )}
               >
                 <CardHeader onClick={() => handleTemplateClick(template)}>
                   <CardTitle className="text-xl ">
diff --git a/app/src/store.ts b/app/src/store.ts
index 09fcba4..2220c82 100644
--- a/app/src/store.ts
+++ b/app/src/store.ts
@@ -1,4 +1,5 @@
 import { create } from "zustand";
+import { persist } from "zustand/middleware";
 
 interface Template {
   id: string;
@@ -22,22 +23,34 @@ interface TemplateStore {
   selectedTags: string[];
   addSelectedTag: (tag: string) => void;
   removeSelectedTag: (tag: string) => void;
+  view: "grid" | "rows";
+  setView: (view: "grid" | "rows") => void;
 }
 
-export const useStore = create<TemplateStore>((set) => ({
-  templates: [],
-  setTemplates: (templates) => set({ templates }),
-  searchQuery: "",
-  setSearchQuery: (searchQuery) => set({ searchQuery }),
-  selectedTags: [],
-  addSelectedTag: (tag) =>
-    set((state) => ({
-      selectedTags: state.selectedTags.includes(tag)
-        ? state.selectedTags
-        : [...state.selectedTags, tag],
-    })),
-  removeSelectedTag: (tag) =>
-    set((state) => ({
-      selectedTags: state.selectedTags.filter((t) => t !== tag),
-    })),
-}));
+export const useStore = create<TemplateStore>()(
+  persist(
+    (set) => ({
+      templates: [],
+      setTemplates: (templates) => set({ templates }),
+      searchQuery: "",
+      setSearchQuery: (searchQuery) => set({ searchQuery }),
+      selectedTags: [],
+      addSelectedTag: (tag) =>
+        set((state) => ({
+          selectedTags: state.selectedTags.includes(tag)
+            ? state.selectedTags
+            : [...state.selectedTags, tag],
+        })),
+      removeSelectedTag: (tag) =>
+        set((state) => ({
+          selectedTags: state.selectedTags.filter((t) => t !== tag),
+        })),
+      view: "grid",
+      setView: (view) => set({ view }),
+    }),
+    {
+      name: "template-store",
+      partialize: (state) => ({ view: state.view }), // Only persist the view preference
+    }
+  )
+);