Merge pull request #8 from zaaakher/ui/loading

chore(ui): improve search UI
2025-06-26 18:16:07 +00:00 · 2025-03-11 20:50:18 -06:00 · 2025-03-11 20:50:18 -06:00 · 96ee890079
commit 96ee890079
parent 3a400a86e2 523d12e6f3
8 changed files with 314 additions and 236 deletions
--- a/app/package.json
+++ b/app/package.json
@ -38,7 +38,8 @@
    "tailwind-merge": "^3.0.2",
    "tailwindcss": "^4.0.12",
    "tailwindcss-animate": "^1.0.7",
-    "vite-plugin-static-copy": "2.3.0"
+    "vite-plugin-static-copy": "2.3.0",
+    "zustand": "^5.0.3"
  },
  "devDependencies": {
    "@types/node": "^20.8.2",
--- 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>
  );
 }
--- 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,25 +42,21 @@ 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="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"
+            className="w-full p-6"
          />
          {searchQuery.length > 0 ? (
-              <div
-                className="cursor-pointer"
-                onClick={() => setSearchQuery("")}
-              >
+            <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>
          ) : (
@ -67,6 +64,23 @@ const Search = () => {
          )}
        </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>
              <Button
@ -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>
  );
--- a/app/src/components/SelectedTags.tsx
+++ 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;
--- 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,14 +176,27 @@ 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]"
+                onClick={() => handleTemplateClick(template)}
+                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)}>
+                <CardHeader>
                  <CardTitle className="text-xl ">
                    <img
                      src={`/blueprints/${template.id}/${template.logo}`}
@ -175,10 +210,13 @@ const TemplateGrid: React.FC = () => {
                  <p className="text-sm text-muted-foreground line-clamp-2">
                    {template.description}
                  </p>
-                  <div className="mt-2 flex flex-wrap gap-1">
+                  <div className="mt-2 flex flex-wrap gap-1 w-fit">
                    {template.tags.slice(0, 3).map((tag) => (
                      <span
-                        onClick={() => addSelectedTag(tag)}
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          addSelectedTag(tag);
+                        }}
                        key={tag}
                        className="inline-flex items-center px-2 py-1 rounded-md text-xs font-medium bg-blue-100 text-blue-800"
                      >
@ -187,10 +225,7 @@ const TemplateGrid: React.FC = () => {
                    ))}
                  </div>
                </CardContent>
-                <CardFooter
-                  className="flex justify-between items-center"
-                  onClick={() => handleTemplateClick(template)}
-                >
+                <CardFooter className="flex justify-between items-center">
                  <span className="text-sm text-gray-500">
                    {template.version}
                  </span>
@ -224,7 +259,7 @@ const TemplateGrid: React.FC = () => {
        open={!!selectedTemplate}
        onOpenChange={() => setSelectedTemplate(null)}
      >
-        <DialogContent className="max-w-[90vw] w-full lg:max-w-[90vw] max-h-[85vh] overflow-y-auto p-0">
+        <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 && (
@ -278,7 +313,7 @@ const TemplateGrid: React.FC = () => {
            </div>
          </DialogHeader>

-          <div className="p-6 pt-3  flex flex-col gap-2">
+          <div className="p-6 pt-3 max-w-[100%] flex flex-col gap-2">
            <DialogDescription className="text-base">
              {selectedTemplate?.description}
            </DialogDescription>
@ -339,7 +374,7 @@ const TemplateGrid: React.FC = () => {
                  </TabsList>
                  <TabsContent value="docker-compose">
                    {templateFiles?.dockerCompose && (
-                      <div className="max-w-6xl w-full relative">
+                      <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
--- a/app/src/components/ui/code-editor.tsx
+++ b/app/src/components/ui/code-editor.tsx
@ -87,7 +87,7 @@ const dockerComposeServiceOptions = [
 }));

 function dockerComposeComplete(
-	context: CompletionContext,
+  context: CompletionContext
 ): CompletionResult | null {
  const word = context.matchBefore(/\w*/);
  if (!word) return null;
@ -165,11 +165,11 @@ export const CodeEditor = ({
        className={cn(
          "w-full h-full text-sm leading-relaxed",
          `cm-theme-${theme}`,
-					className,
+          className
        )}
      />
      {props.disabled && (
-				<div className="absolute top-0 rounded-md left-0 w-full h-full  flex items-center justify-center z-[10] [background:var(--overlay)] h-full" />
+        <div className="absolute top-0 rounded-md left-0 w-full flex items-center justify-center z-[10] [background:var(--overlay)] h-full" />
      )}
    </div>
  );
--- a/app/src/components/ui/dialog.tsx
+++ b/app/src/components/ui/dialog.tsx
@ -1,31 +1,31 @@
-import * as React from "react"
-import * as DialogPrimitive from "@radix-ui/react-dialog"
-import { XIcon } from "lucide-react"
+import * as React from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { XIcon } from "lucide-react";

-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";

 function Dialog({
  ...props
 }: React.ComponentProps<typeof DialogPrimitive.Root>) {
-  return <DialogPrimitive.Root data-slot="dialog" {...props} />
+  return <DialogPrimitive.Root data-slot="dialog" {...props} />;
 }

 function DialogTrigger({
  ...props
 }: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
-  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
+  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />;
 }

 function DialogPortal({
  ...props
 }: React.ComponentProps<typeof DialogPrimitive.Portal>) {
-  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
+  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />;
 }

 function DialogClose({
  ...props
 }: React.ComponentProps<typeof DialogPrimitive.Close>) {
-  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
+  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />;
 }

 function DialogOverlay({
@ -41,7 +41,7 @@ function DialogOverlay({
      )}
      {...props}
    />
-  )
+  );
 }

 function DialogContent({
@ -67,7 +67,7 @@ function DialogContent({
        </DialogPrimitive.Close>
      </DialogPrimitive.Content>
    </DialogPortal>
-  )
+  );
 }

 function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
@ -77,7 +77,7 @@ function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
      className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
      {...props}
    />
-  )
+  );
 }

 function DialogFooter({ className, ...props }: React.ComponentProps<"div">) {
@ -90,7 +90,7 @@ function DialogFooter({ className, ...props }: React.ComponentProps<"div">) {
      )}
      {...props}
    />
-  )
+  );
 }

 function DialogTitle({
@ -103,7 +103,7 @@ function DialogTitle({
      className={cn("text-lg leading-none font-semibold", className)}
      {...props}
    />
-  )
+  );
 }

 function DialogDescription({
@ -116,7 +116,7 @@ function DialogDescription({
      className={cn("text-muted-foreground text-sm", className)}
      {...props}
    />
-  )
+  );
 }

 export {
@ -130,4 +130,4 @@ export {
  DialogPortal,
  DialogTitle,
  DialogTrigger,
-}
+};
--- 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,9 +23,13 @@ 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) => ({
+export const useStore = create<TemplateStore>()(
+  persist(
+    (set) => ({
      templates: [],
      setTemplates: (templates) => set({ templates }),
      searchQuery: "",
@ -40,4 +45,12 @@ export const useStore = create<TemplateStore>((set) => ({
        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
+    }
+  )
+);