chore: minor ui fixes

app/src/store/index.ts

@@ -1,4 +1,5 @@
 import { create } from "zustand";
+import { persist } from "zustand/middleware";
 
 interface Template {
   id: string;
@@ -14,16 +15,56 @@ interface Template {
   tags: string[];
 }
 
-interface Store {
+interface TemplateStore {
   templates: Template[];
   setTemplates: (templates: Template[]) => void;
+  templatesCount: number;
+  filteredTemplates: Template[];
+  setFilteredTemplates: (filteredTemplates: Template[]) => void;
+  setTemplatesCount: (templatesCount: number) => void;
+  searchQuery: string;
+  setSearchQuery: (searchQuery: string) => void;
+  selectedTags: string[];
+  addSelectedTag: (tag: string) => void;
+  removeSelectedTag: (tag: string) => void;
+  view: "grid" | "rows";
+  setView: (view: "grid" | "rows") => void;
+
   githubStars: number;
   setGithubStars: (count: number) => void;
 }
 
-export const useStore = create<Store>((set) => ({
-  templates: [],
-  setTemplates: (templates) => set({ templates }),
-  githubStars: 0,
-  setGithubStars: (count) => set({ githubStars: count }),
-}));
+export const useStore = create<TemplateStore>()(
+  persist(
+    (set) => ({
+      templates: [],
+      setTemplates: (templates) => set({ templates }),
+      templatesCount: 0,
+      setTemplatesCount: (templatesCount) => set({ templatesCount }),
+      filteredTemplates: [],
+      setFilteredTemplates: (filteredTemplates) =>
+        set({ filteredTemplates }),
+      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 }),
+      githubStars: 0,
+      setGithubStars: (count) => set({ githubStars: count }),
+    }),
+    {
+      name: "template-store",
+      partialize: (state) => ({ view: state.view }), // Only persist the view preference
+    }
+  )
+);