fix: clicking on tag in card

app/package.json

@@ -37,7 +37,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",

app/pnpm-lock.yaml

@@ -92,6 +92,9 @@ importers:
       vite-plugin-static-copy:
         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
+        version: 5.0.3(@types/react@19.0.10)(react@19.0.0)
     devDependencies:
       '@types/node':
         specifier: ^20.8.2
@@ -1654,6 +1657,24 @@ packages:
   yallist@3.1.1:
     resolution: {integrity: sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==}
 
+  zustand@5.0.3:
+    resolution: {integrity: sha512-14fwWQtU3pH4dE0dOpdMiWjddcH+QzKIgk1cl8epwSE7yag43k/AD/m4L6+K7DytAOr9gGBe3/EXj9g7cdostg==}
+    engines: {node: '>=12.20.0'}
+    peerDependencies:
+      '@types/react': '>=18.0.0'
+      immer: '>=9.0.6'
+      react: '>=18.0.0'
+      use-sync-external-store: '>=1.2.0'
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      immer:
+        optional: true
+      react:
+        optional: true
+      use-sync-external-store:
+        optional: true
+
 snapshots:
 
   '@ampproject/remapping@2.3.0':
@@ -3089,3 +3110,8 @@ snapshots:
   w3c-keyname@2.2.8: {}
 
   yallist@3.1.1: {}
+
+  zustand@5.0.3(@types/react@19.0.10)(react@19.0.0):
+    optionalDependencies:
+      '@types/react': 19.0.10
+      react: 19.0.0

app/src/components/TemplateGrid.tsx

@@ -187,6 +187,7 @@ const TemplateGrid: React.FC<TemplateGridProps> = ({ view }) => {
             filteredTemplates.map((template) => (
               <Card
                 key={template.id}
+                onClick={() => handleTemplateClick(template)}
                 className={cn(
                   " cursor-pointer hover:shadow-lg transition-all duration-200 h-full max-h-[300px]",
                   {
@@ -195,7 +196,7 @@ const TemplateGrid: React.FC<TemplateGridProps> = ({ view }) => {
                   }
                 )}
               >
-                <CardHeader onClick={() => handleTemplateClick(template)}>
+                <CardHeader>
                   <CardTitle className="text-xl ">
                     <img
                       src={`/blueprints/${template.id}/${template.logo}`}
@@ -209,10 +210,13 @@ const TemplateGrid: React.FC<TemplateGridProps> = ({ view }) => {
                   <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"
                       >
@@ -221,10 +225,7 @@ const TemplateGrid: React.FC<TemplateGridProps> = ({ view }) => {
                     ))}
                   </div>
                 </CardContent>
-                <CardFooter
+                <CardFooter className="flex justify-between items-center">
-                  className="flex justify-between items-center"
-                  onClick={() => handleTemplateClick(template)}
-                >
                   <span className="text-sm text-gray-500">
                     {template.version}
                   </span>