Merge pull request #9 from zaaakher/ui/minor-fixes

chore: minor ui fixes

app/package.json

@@ -16,7 +16,6 @@
     "@codemirror/language": "^6.10.1",
     "@codemirror/legacy-modes": "6.4.0",
     "@codemirror/view": "6.29.0",
-    "zustand":"5.0.3",
     "@radix-ui/react-dialog": "^1.1.6",
     "@radix-ui/react-dropdown-menu": "^2.1.6",
     "@radix-ui/react-label": "^2.1.2",

app/pnpm-lock.yaml

@@ -93,7 +93,7 @@ importers:
         specifier: 2.3.0
         version: 2.3.0(vite@6.2.1(@types/node@20.17.24)(jiti@2.4.2)(lightningcss@1.29.2))
       zustand:
-        specifier: 5.0.3
+        specifier: ^5.0.3
         version: 5.0.3(@types/react@19.0.10)(react@19.0.0)
     devDependencies:
       '@types/node':

app/src/App.tsx

@@ -1,7 +1,7 @@
 import TemplateGrid from "./components/TemplateGrid";
 import Navigation from "./components/Navigation";
 import Search from "./components/Search";
-import { useStore } from "./store";
+import { useStore } from "@/store";
 import "./App.css";
 
 function App() {

app/src/components/Navigation.tsx

@@ -1,5 +1,5 @@
 import { ModeToggle } from "@/mode-toggle";
-import { StarIcon } from "lucide-react";
+import { Plus, StarIcon } from "lucide-react";
 import { Button } from "./ui/button";
 import { useEffect, useState } from "react";
 import DokployLogo from "./ui/dokploy-logo";
@@ -29,6 +29,18 @@ const Navigation = () => {
         <h1 className="text-2xl font-bold">Dokploy Templates</h1>
       </div>
       <div className="flex flex-row gap-2 justify-center items-center">
+        <Button
+          onClick={() => {
+            window.open(
+              "https://github.com/Dokploy/dokploy/discussions/new?category=ideas",
+              "_blank"
+            );
+          }}
+        >
+          Add Template
+          <Plus />
+        </Button>
+
         <Button
           onClick={() => {
             window.open("https://github.com/dokploy/dokploy", "_blank");

app/src/components/Search.tsx

@@ -1,5 +1,5 @@
 import { Input } from "./ui/input";
-import { useStore } from "../store";
+import { useStore } from "@/store";
 import { Grid, List, SearchIcon, XIcon } from "lucide-react";
 import { Button } from "./ui/button";
 import { Popover, PopoverContent, PopoverTrigger } from "./ui/popover";
@@ -16,8 +16,10 @@ 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, setView } = useStore();
+  const { templates, searchQuery, setSearchQuery, setView, templatesCount } =
+    useStore();
   const selectedTags = useStore((state) => state.selectedTags);
   const addSelectedTag = useStore((state) => state.addSelectedTag);
   const removeSelectedTag = useStore((state) => state.removeSelectedTag);
@@ -43,11 +45,20 @@ const Search = () => {
 
   return (
     <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">
+      {/* <h1 className="text-2xl md:text-3xl xl:text-4xl font-bold text-center mb-8">
         Available Templates ({templates?.length || 0})
-      </h1>
+      </h1> */}
       <div className="max-w-xl mx-auto flex flex-col gap-2">
         <div className="relative w-full">
+          <div className="mb-2 flex flex-row gap-1">
+            <div className="text-sm text-muted-foreground">
+              Available Templates
+            </div>
+            <div className="text-sm font-bold">
+              {(templatesCount && templatesCount) || 0}
+            </div>
+          </div>
+
           <Input
             type="text"
             placeholder="Search templates..."
@@ -57,10 +68,10 @@ const Search = () => {
           />
           {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" />
+              <XIcon className="absolute end-3 translate-y-3.5 top-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" />
+            <SearchIcon className="absolute end-3 translate-y-3.5 top-1/2 h-5 w-5 text-gray-400" />
           )}
         </div>
 
@@ -72,10 +83,10 @@ const Search = () => {
             }}
           >
             <TabsList>
-              <TabsTrigger value="grid">
+              <TabsTrigger value="grid" className="cursor-pointer">
                 <Grid /> <span className="text-xs p-1">Grid</span>
               </TabsTrigger>
-              <TabsTrigger value="rows">
+              <TabsTrigger value="rows" className="cursor-pointer">
                 <List /> <span className="text-xs p-1">List</span>
               </TabsTrigger>
             </TabsList>

app/src/components/SelectedTags.tsx

@@ -1,5 +1,5 @@
 import { XIcon } from "lucide-react";
-import { useStore } from "../store";
+import { useStore } from "@/store";
 import { Badge } from "./ui/badge";
 
 const SelectedTags = () => {

app/src/components/Tags.tsx

@@ -1,4 +1,4 @@
-import { useStore } from "../store";
+import { useStore } from "@/store";
 import { Badge } from "@/components/ui/badge";
 
 const Tags = () => {

app/src/components/TemplateDialog.tsx

@@ -0,0 +1,266 @@
+import React from "react";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "./ui/dialog";
+import { Button } from "./ui/button";
+import { toast } from "sonner";
+import copy from "copy-to-clipboard";
+import { CodeEditor } from "./ui/code-editor";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "./ui/tabs";
+import { Label } from "./ui/label";
+import { Clipboard } from "lucide-react";
+import { Input } from "./ui/input";
+
+interface Template {
+  id: string;
+  name: string;
+  description: string;
+  version: string;
+  logo?: string;
+  links: {
+    github?: string;
+    website?: string;
+    docs?: string;
+  };
+  tags: string[];
+}
+
+interface TemplateFiles {
+  dockerCompose: string | null;
+  config: string | null;
+}
+
+interface TemplateDialogProps {
+  selectedTemplate: Template | null;
+  templateFiles: TemplateFiles | null;
+  modalLoading: boolean;
+  onOpenChange: (open: boolean) => void;
+}
+
+const TemplateDialog: React.FC<TemplateDialogProps> = ({
+  selectedTemplate,
+  templateFiles,
+  modalLoading,
+  onOpenChange,
+}) => {
+  const getBase64Config = () => {
+    if (!templateFiles?.dockerCompose && !templateFiles?.config) return "";
+
+    const configObj = {
+      compose: templateFiles.dockerCompose || "",
+      config: templateFiles.config || "",
+    };
+
+    return btoa(JSON.stringify(configObj, null, 2));
+  };
+
+  return (
+    <Dialog open={!!selectedTemplate} onOpenChange={onOpenChange}>
+      <DialogContent className="flex flex-col !max-w-[90vw] w-full lg:max-w-[90vw] max-h-[85vh] p-0">
+        <DialogHeader className="space-y-4 border-b sticky top-0 p-4 pb-0 text-start bg-background rounded-t-lg z-10">
+          <div className="flex items-center gap-4">
+            {selectedTemplate?.logo && (
+              <img
+                src={`/blueprints/${selectedTemplate.id}/${selectedTemplate.logo}`}
+                alt={selectedTemplate.name}
+                className="w-12 h-12 object-contain"
+              />
+            )}
+            <div className="min-w-0">
+              <DialogTitle className="text-2xl truncate">
+                {selectedTemplate?.name}
+              </DialogTitle>
+              <div className="flex items-center gap-2 mt-1 flex-wrap">
+                <span className="text-sm text-gray-500">
+                  {selectedTemplate?.version}
+                </span>
+                <div className="flex gap-2 flex-wrap">
+                  {selectedTemplate?.links.github && (
+                    <a
+                      href={selectedTemplate.links.github}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="text-gray-600 hover:text-gray-900"
+                    >
+                      GitHub
+                    </a>
+                  )}
+                  {selectedTemplate?.links.docs && (
+                    <a
+                      href={selectedTemplate.links.docs}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="text-gray-600 hover:text-gray-900"
+                    >
+                      Docs
+                    </a>
+                  )}
+                  <a
+                    href={`https://github.com/Dokploy/templates/tree/main/blueprints/${selectedTemplate?.id}`}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="text-gray-600 hover:text-gray-900"
+                  >
+                    Edit Template
+                  </a>
+                </div>
+              </div>
+            </div>
+          </div>
+        </DialogHeader>
+
+        <div className="flex-1 overflow-y-auto">
+          <div className="p-6 pt-3 space-y-6">
+            <div className="space-y-2">
+              <DialogDescription className="text-base">
+                {selectedTemplate?.description}
+              </DialogDescription>
+              <div className="flex flex-wrap gap-1">
+                {selectedTemplate?.tags.map((tag) => (
+                  <span
+                    key={tag}
+                    className="inline-flex items-center px-2 py-1 rounded-md text-xs font-medium bg-blue-100 text-blue-800"
+                  >
+                    {tag}
+                  </span>
+                ))}
+              </div>
+            </div>
+
+            {modalLoading ? (
+              <div className="py-12 text-center">
+                <div className="inline-block animate-spin rounded-full h-10 w-10 border-4 border-solid border-blue-500 border-r-transparent"></div>
+                <p className="mt-4 text-gray-600">Loading template files...</p>
+              </div>
+            ) : (
+              <div className="space-y-6">
+                {(templateFiles?.dockerCompose || templateFiles?.config) && (
+                  <div className="flex flex-col gap-3">
+                    <Label className="flex flex-col items-start w-fit justify-start gap-1">
+                      <span className="leading-tight text-xl font-semibold">
+                        Base64 Configuration
+                      </span>
+                      <span className="leading-tight text-sm text-gray-500">
+                        Encoded template file
+                      </span>
+                    </Label>
+                    <div className="relative w-full">
+                      <Button
+                        className="absolute end-0 top-1/2 -translate-y-1/2"
+                        size={"icon"}
+                        onClick={() => {
+                          toast.success("Copied to clipboard");
+                          copy(getBase64Config());
+                        }}
+                      >
+                        <Clipboard className="h-4 w-4" />
+                      </Button>
+                      <Input
+                        value={getBase64Config()}
+                        className="w-full pr-10"
+                        readOnly
+                      />
+                    </div>
+                  </div>
+                )}
+                <Tabs defaultValue="docker-compose" className="w-full">
+                  <TabsList className="w-full justify-start">
+                    <TabsTrigger
+                      value="docker-compose"
+                      className="data-[state=active]:font-bold"
+                    >
+                      Docker Compose
+                    </TabsTrigger>
+                    <TabsTrigger
+                      value="config"
+                      className="data-[state=active]:font-bold"
+                    >
+                      Configuration
+                    </TabsTrigger>
+                  </TabsList>
+                  <TabsContent value="docker-compose" className="mt-4">
+                    {templateFiles?.dockerCompose && (
+                      <div className="space-y-2">
+                        <Label className="flex flex-col items-start w-fit justify-start gap-1">
+                          <span className="leading-tight text-xl font-semibold">
+                            Docker Compose
+                          </span>
+                          <span className="leading-tight text-sm text-gray-500">
+                            docker-compose.yml
+                          </span>
+                        </Label>
+                        <div className="relative w-full rounded-md overflow-hidden border">
+                          <CodeEditor
+                            value={templateFiles.dockerCompose || ""}
+                            language="yaml"
+                            className="font-mono w-full [&_*]:!break-words"
+                          />
+                          <Button
+                            onClick={() => {
+                              toast.success("Copied to clipboard");
+                              copy(templateFiles.dockerCompose || "");
+                            }}
+                            className="absolute top-2 right-2 px-3 py-1 text-sm"
+                            variant="secondary"
+                          >
+                            Copy
+                          </Button>
+                        </div>
+                      </div>
+                    )}
+                  </TabsContent>
+
+                  <TabsContent value="config" className="mt-4">
+                    {templateFiles?.config && (
+                      <div className="space-y-2">
+                        <Label className="flex flex-col items-start w-fit justify-start gap-1">
+                          <span className="leading-tight text-xl font-semibold">
+                            Configuration
+                          </span>
+                          <span className="leading-tight text-sm text-gray-500">
+                            template.yml
+                          </span>
+                        </Label>
+                        <div className="relative w-full rounded-md overflow-hidden border">
+                          <CodeEditor
+                            value={templateFiles.config || ""}
+                            language="yaml"
+                            className="font-mono w-full [&_*]:!break-words"
+                          />
+                          <Button
+                            onClick={() => {
+                              toast.success("Copied to clipboard");
+                              copy(templateFiles.config || "");
+                            }}
+                            className="absolute top-2 right-2 px-3 py-1 text-sm"
+                            variant="secondary"
+                          >
+                            Copy
+                          </Button>
+                        </div>
+                      </div>
+                    )}
+                  </TabsContent>
+                </Tabs>
+
+                {!templateFiles?.dockerCompose && !templateFiles?.config && (
+                  <div className="text-center py-8">
+                    <p className="text-gray-500">
+                      No configuration files available for this template.
+                    </p>
+                  </div>
+                )}
+              </div>
+            )}
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export default TemplateDialog;

app/src/components/TemplateGrid.tsx

@@ -1,5 +1,4 @@
 import React, { useEffect, useState } from "react";
-import { Input } from "./ui/input";
 import {
   Card,
   CardHeader,
@@ -7,23 +6,10 @@ import {
   CardContent,
   CardFooter,
 } from "./ui/card";
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogHeader,
-  DialogTitle,
-} from "./ui/dialog";
-import { Button } from "./ui/button";
-import { toast } from "sonner";
-import copy from "copy-to-clipboard";
-import { CodeEditor } from "./ui/code-editor";
-import { useStore } from "../store";
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "./ui/tabs";
-import { Label } from "./ui/label";
-import { Clipboard } from "lucide-react";
+import { useStore } from "@/store";
 import { Skeleton } from "./ui/skeleton";
 import { cn } from "@/lib/utils";
+import TemplateDialog from "./TemplateDialog";
 
 interface Template {
   id: string;
@@ -49,7 +35,13 @@ interface TemplateGridProps {
 }
 
 const TemplateGrid: React.FC<TemplateGridProps> = ({ view }) => {
-  const { templates, setTemplates } = useStore();
+  const {
+    templates,
+    setTemplates,
+    setTemplatesCount,
+    filteredTemplates,
+    setFilteredTemplates,
+  } = useStore();
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
   const searchQuery = useStore((state) => state.searchQuery);
@@ -73,6 +65,8 @@ const TemplateGrid: React.FC<TemplateGridProps> = ({ view }) => {
         }
         const data = await response.json();
         setTemplates(data);
+        setFilteredTemplates(data);
+        setTemplatesCount(data.length);
         setLoading(false);
       } catch (err) {
         setError(err instanceof Error ? err.message : "An error occurred");
@@ -81,7 +75,7 @@ const TemplateGrid: React.FC<TemplateGridProps> = ({ view }) => {
     };
 
     fetchTemplates();
-  }, [setTemplates]);
+  }, [setTemplates, setFilteredTemplates]);
 
   const fetchTemplateFiles = async (templateId: string) => {
     setModalLoading(true);
@@ -111,32 +105,25 @@ const TemplateGrid: React.FC<TemplateGridProps> = ({ view }) => {
     fetchTemplateFiles(template.id);
   };
 
-  const filteredTemplates = templates.filter((template) => {
-    // Filter by search query
-    const matchesSearch = template.name
-      .toLowerCase()
-      .includes(searchQuery.toLowerCase());
+  useEffect(() => {
+    const filtered = templates.filter((template) => {
+      // Filter by search query
+      const matchesSearch = template.name
+        .toLowerCase()
+        .includes(searchQuery.toLowerCase());
 
-    // Filter by selected tags
-    const matchesTags =
-      selectedTags.length === 0 ||
-      selectedTags.every((tag) => template.tags.includes(tag));
+      // Filter by selected tags
+      const matchesTags =
+        selectedTags.length === 0 ||
+        selectedTags.every((tag) => template.tags.includes(tag));
 
-    return matchesSearch && matchesTags;
-  });
+      return matchesSearch && matchesTags;
+    });
 
-  console.log(filteredTemplates);
-
-  const getBase64Config = () => {
-    if (!templateFiles?.dockerCompose && !templateFiles?.config) return "";
-
-    const configObj = {
-      compose: templateFiles.dockerCompose || "",
-      config: templateFiles.config || "",
-    };
-
-    return btoa(JSON.stringify(configObj, null, 2));
-  };
+    console.log("ffiltered tem", filtered.length);
+    setTemplatesCount(filtered.length);
+    setFilteredTemplates(filtered);
+  }, [searchQuery, selectedTags]);
 
   if (loading) {
     return (
@@ -192,21 +179,28 @@ const TemplateGrid: React.FC<TemplateGridProps> = ({ view }) => {
                   " cursor-pointer hover:shadow-lg transition-all duration-200 h-full max-h-[300px]",
                   {
                     "flex-col": view === "grid",
-                    "flex-row": view === "rows",
+                    "flex-row gap-0": view === "rows",
                   }
                 )}
               >
-                <CardHeader>
-                  <CardTitle className="text-xl ">
-                    <img
-                      src={`/blueprints/${template.id}/${template.logo}`}
-                      alt={template.name}
-                      className="w-12 h-12 object-contain mb-2"
-                    />
-                    {template.name}
-                  </CardTitle>
+                <CardHeader
+                  className={cn("flex  gap-2 ", {
+                    "flex-row": view === "grid",
+                    "flex-col justify-center items-center ms-4":
+                      view === "rows",
+                  })}
+                >
+                  <img
+                    src={`/blueprints/${template.id}/${template.logo}`}
+                    alt={template.name}
+                    className={cn("w-auto h-12 s object-contain mb-2", {
+                      "w-auto h-12": view === "grid",
+                      "w-12 h-auto": view === "rows",
+                    })}
+                  />
                 </CardHeader>
                 <CardContent className="flex-1">
+                  <CardTitle className="text-xl ">{template.name}</CardTitle>
                   <p className="text-sm text-muted-foreground line-clamp-2">
                     {template.description}
                   </p>
@@ -255,197 +249,12 @@ const TemplateGrid: React.FC<TemplateGridProps> = ({ view }) => {
         </div>
       </div>
 
-      <Dialog
-        open={!!selectedTemplate}
-        onOpenChange={() => setSelectedTemplate(null)}
-      >
-        <DialogContent className="!max-w-[90vw] w-full lg:max-w-[90vw] max-h-[85vh] overflow-y-auto p-0">
-          <DialogHeader className="space-y-4 border-b sticky top-0 p-4 bg-background z-10">
-            <div className="flex items-center gap-4">
-              {selectedTemplate?.logo && (
-                <img
-                  src={`/blueprints/${selectedTemplate.id}/${selectedTemplate.logo}`}
-                  alt={selectedTemplate.name}
-                  className="w-12 h-12 object-contain"
-                />
-              )}
-              <div>
-                <DialogTitle className="text-2xl">
-                  {selectedTemplate?.name}
-                </DialogTitle>
-                <div className="flex items-center gap-2 mt-1">
-                  <span className="text-sm text-gray-500">
-                    {selectedTemplate?.version}
-                  </span>
-                  <div className="flex gap-2">
-                    {selectedTemplate?.links.github && (
-                      <a
-                        href={selectedTemplate.links.github}
-                        target="_blank"
-                        rel="noopener noreferrer"
-                        className="text-gray-600 hover:text-gray-900"
-                      >
-                        GitHub
-                      </a>
-                    )}
-                    {selectedTemplate?.links.docs && (
-                      <a
-                        href={selectedTemplate.links.docs}
-                        target="_blank"
-                        rel="noopener noreferrer"
-                        className="text-gray-600 hover:text-gray-900"
-                      >
-                        Docs
-                      </a>
-                    )}
-
-                    <a
-                      href={`https://github.com/Dokploy/templates/tree/main/blueprints/${selectedTemplate?.id}`}
-                      target="_blank"
-                      rel="noopener noreferrer"
-                      className="text-gray-600 hover:text-gray-900"
-                    >
-                      Edit Template
-                    </a>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </DialogHeader>
-
-          <div className="p-6 pt-3 max-w-[100%] flex flex-col gap-2">
-            <DialogDescription className="text-base">
-              {selectedTemplate?.description}
-            </DialogDescription>
-            <div className="flex flex-wrap gap-1">
-              {selectedTemplate?.tags.map((tag) => (
-                <span
-                  key={tag}
-                  className="inline-flex items-center px-2 py-1 rounded-md text-xs font-medium bg-blue-100 text-blue-800"
-                >
-                  {tag}
-                </span>
-              ))}
-            </div>
-
-            {modalLoading ? (
-              <div className="py-12 text-center">
-                <div className="inline-block animate-spin rounded-full h-10 w-10 border-4 border-solid border-blue-500 border-r-transparent"></div>
-                <p className="mt-4 text-gray-600">Loading template files...</p>
-              </div>
-            ) : (
-              <div className="grid gap-4 mt-6">
-                {(templateFiles?.dockerCompose || templateFiles?.config) && (
-                  <div className="flex flex-col gap-3">
-                    <Label className=" flex  flex-col items-start w-fit justify-start gap-1">
-                      <span className="leading-tight text-xl font-semibold">
-                        Base64 Configuration
-                      </span>
-                      <span className="leading-tight text-sm  text-gray-500">
-                        Encoded template file
-                      </span>
-                    </Label>
-                    <div className="relative">
-                      <Button
-                        // variant={"outline"}
-                        className="absolute end-0
-                     "
-                        size={"icon"}
-                        onClick={() => {
-                          toast.success("Copied to clipboard");
-                          copy(getBase64Config());
-                        }}
-                      >
-                        <Clipboard />
-                      </Button>
-                      <Input
-                        value={getBase64Config()}
-                        className="max-w-6xl w-full pe-10"
-                      />
-                    </div>
-                  </div>
-                )}
-                <Tabs defaultValue="docker-compose">
-                  <TabsList>
-                    <TabsTrigger value="docker-compose">
-                      Docker Compose
-                    </TabsTrigger>
-                    <TabsTrigger value="config">Configuration</TabsTrigger>
-                  </TabsList>
-                  <TabsContent value="docker-compose">
-                    {templateFiles?.dockerCompose && (
-                      <div className=" flex flex-col relative">
-                        <Label className=" flex mb-2 flex-col items-start w-fit justify-start gap-1">
-                          <span className="leading-tight text-xl font-semibold">
-                            Docker Compose
-                          </span>
-                          <span className="leading-tight text-sm  text-gray-500">
-                            docker-compose.yml
-                          </span>
-                        </Label>
-
-                        <CodeEditor
-                          value={templateFiles.dockerCompose || ""}
-                          language="yaml"
-                          className="font-mono"
-                        />
-                        <Button
-                          onClick={() => {
-                            toast.success("Copied to clipboard");
-                            copy(templateFiles.dockerCompose || "");
-                          }}
-                          className="absolute top-10 right-2 px-3 py-1  text-sm cursor-pointer"
-                        >
-                          Copy
-                        </Button>
-                      </div>
-                    )}
-                  </TabsContent>
-
-                  <TabsContent value="config">
-                    {templateFiles?.config && (
-                      <div className="max-w-6xl w-full relative">
-                        <Label className=" flex mb-2 flex-col items-start w-fit justify-start gap-1">
-                          <span className="leading-tight text-xl font-semibold">
-                            Configuration
-                          </span>
-                          <span className="leading-tight text-sm  text-gray-500">
-                            template.yml
-                          </span>
-                        </Label>
-
-                        <CodeEditor
-                          value={templateFiles.config || ""}
-                          language="yaml"
-                          className="font-mono"
-                        />
-
-                        <Button
-                          onClick={() => {
-                            toast.success("Copied to clipboard");
-                            copy(templateFiles.config || "");
-                          }}
-                          className="absolute top-10 right-2 px-3 py-1  text-sm cursor-pointer"
-                        >
-                          Copy
-                        </Button>
-                      </div>
-                    )}
-                  </TabsContent>
-                </Tabs>
-
-                {!templateFiles?.dockerCompose && !templateFiles?.config && (
-                  <div className="text-center py-8">
-                    <p className="text-gray-500">
-                      No configuration files available for this template.
-                    </p>
-                  </div>
-                )}
-              </div>
-            )}
-          </div>
-        </DialogContent>
-      </Dialog>
+      <TemplateDialog
+        selectedTemplate={selectedTemplate}
+        templateFiles={templateFiles}
+        modalLoading={modalLoading}
+        onOpenChange={(open) => !open && setSelectedTemplate(null)}
+      />
     </>
   );
 };

app/src/components/ui/dialog.tsx

@@ -61,10 +61,6 @@ function DialogContent({
         {...props}
       >
         {children}
-        <DialogPrimitive.Close className="p-2 ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 z-20 cursor-pointer">
-          <XIcon className="size-5" />
-          <span className="sr-only">Close</span>
-        </DialogPrimitive.Close>
       </DialogPrimitive.Content>
     </DialogPortal>
   );
@@ -74,9 +70,16 @@ function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
       data-slot="dialog-header"
-      className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
+      className={cn(" flex flex-col gap-2 text-center sm:text-left", className)}
       {...props}
-    />
+    >
+      {props.children}
+
+      <DialogPrimitive.Close className="p-2 ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 z-20 cursor-pointer">
+        <XIcon className="size-5" />
+        <span className="sr-only">Close</span>
+      </DialogPrimitive.Close>
+    </div>
   );
 }
 

app/src/store.ts

@@ -1,56 +0,0 @@
-import { create } from "zustand";
-import { persist } from "zustand/middleware";
-
-interface Template {
-  id: string;
-  name: string;
-  description: string;
-  version: string;
-  logo?: string;
-  links: {
-    github?: string;
-    website?: string;
-    docs?: string;
-  };
-  tags: string[];
-}
-
-interface TemplateStore {
-  templates: Template[];
-  setTemplates: (templates: Template[]) => 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;
-}
-
-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
-    }
-  )
-);

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
+    }
+  )
+);