From b0ee905c1cddfa4a509f26b91e34ca7d88111605 Mon Sep 17 00:00:00 2001
From: shrimbly <falloon.willie@gmail.com>
Date: Sat, 17 Jan 2026 21:39:12 +1300
Subject: [PATCH] refactor: simplify template categories and add provider tags

- Change categories from product/style/composition to simple/advanced
- Add provider filter to sidebar (currently shows Gemini)
- Display provider tags on template cards
- Update tests for new category structure

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 src/components/quickstart/TemplateCard.tsx    | 24 ++++++++++++++-----
 .../quickstart/TemplateExplorerView.tsx       | 22 +++++++----------
 .../quickstart/__tests__/templates.test.ts    |  2 +-
 src/types/quickstart.ts                       |  2 +-
 4 files changed, 29 insertions(+), 21 deletions(-)

diff --git a/src/components/quickstart/TemplateCard.tsx b/src/components/quickstart/TemplateCard.tsx
index 31bc504e..ccc3c121 100644
--- a/src/components/quickstart/TemplateCard.tsx
+++ b/src/components/quickstart/TemplateCard.tsx
@@ -20,16 +20,14 @@ interface TemplateCardProps {
 }
 
 const CATEGORY_LABELS: Record<TemplateCategory, string> = {
-  product: "Product",
-  style: "Style",
-  composition: "Composition",
+  simple: "Simple",
+  advanced: "Advanced",
   community: "Community",
 };
 
 const CATEGORY_COLORS: Record<TemplateCategory, string> = {
-  product: "bg-blue-500/20 text-blue-300",
-  style: "bg-purple-500/20 text-purple-300",
-  composition: "bg-green-500/20 text-green-300",
+  simple: "bg-blue-500/20 text-blue-300",
+  advanced: "bg-purple-500/20 text-purple-300",
   community: "bg-amber-500/20 text-amber-300",
 };
 
@@ -128,6 +126,20 @@ export function TemplateCard({
           {template.description}
         </p>
 
+        {/* Provider tags */}
+        {template.tags.length > 0 && (
+          <div className="flex flex-wrap gap-1 mt-2">
+            {template.tags.map((tag) => (
+              <span
+                key={tag}
+                className="inline-flex items-center px-1.5 py-0.5 rounded text-[10px] font-medium bg-neutral-700/30 text-neutral-400"
+              >
+                {tag}
+              </span>
+            ))}
+          </div>
+        )}
+
         {/* Action row */}
         <div className="flex justify-end mt-2">
           <button
diff --git a/src/components/quickstart/TemplateExplorerView.tsx b/src/components/quickstart/TemplateExplorerView.tsx
index 073a69b6..d8f72880 100644
--- a/src/components/quickstart/TemplateExplorerView.tsx
+++ b/src/components/quickstart/TemplateExplorerView.tsx
@@ -16,9 +16,8 @@ type CategoryFilter = "all" | TemplateCategory;
 
 const CATEGORY_OPTIONS: { id: CategoryFilter; label: string }[] = [
   { id: "all", label: "All" },
-  { id: "product", label: "Product" },
-  { id: "style", label: "Style" },
-  { id: "composition", label: "Composition" },
+  { id: "simple", label: "Simple" },
+  { id: "advanced", label: "Advanced" },
   { id: "community", label: "Community" },
 ];
 
@@ -138,16 +137,13 @@ export function TemplateExplorerView({
         if (!matchesSearch) return false;
       }
 
-      // Tags don't apply to community workflows (they don't have tags)
-
       return true;
     });
   }, [communityWorkflows, debouncedSearch, categoryFilter]);
 
-  // Collect all unique tags from filtered presets
+  // Collect all unique tags from presets
   const availableTags = useMemo(() => {
     const tags = new Set<string>();
-    // Get tags from ALL presets (not just filtered) so users can explore
     presets.forEach((preset) => {
       preset.tags.forEach((tag) => tags.add(tag));
     });
@@ -331,22 +327,22 @@ export function TemplateExplorerView({
             </div>
           </div>
 
-          {/* Tags Section */}
+          {/* Provider Tags */}
           <div className="space-y-2">
             <h3 className="text-xs font-medium text-neutral-500 uppercase tracking-wider">
-              Tags
+              Provider
             </h3>
-            <div className="flex flex-wrap gap-1">
+            <div className="flex flex-col gap-1">
               {availableTags.map((tag) => (
                 <button
                   key={tag}
                   onClick={() => toggleTag(tag)}
                   className={`
-                    px-2 py-1 text-[10px] font-medium rounded transition-colors
+                    px-3 py-1.5 text-xs font-medium rounded-md text-left transition-colors
                     ${
                       selectedTags.has(tag)
-                        ? "bg-blue-500/30 text-blue-300 border border-blue-500/50"
-                        : "bg-neutral-700/30 text-neutral-500 hover:bg-neutral-700/50 hover:text-neutral-400 border border-transparent"
+                        ? "bg-blue-500/20 border border-blue-500/50 text-blue-300"
+                        : "bg-neutral-700/30 border border-transparent text-neutral-400 hover:bg-neutral-700/50 hover:text-neutral-300"
                     }
                   `}
                 >
diff --git a/src/lib/quickstart/__tests__/templates.test.ts b/src/lib/quickstart/__tests__/templates.test.ts
index 254327d6..f05ffe55 100644
--- a/src/lib/quickstart/__tests__/templates.test.ts
+++ b/src/lib/quickstart/__tests__/templates.test.ts
@@ -104,7 +104,7 @@ describe("templates", () => {
     it("should return only display properties", () => {
       const presets = getAllPresets();
       presets.forEach((preset) => {
-        expect(Object.keys(preset)).toEqual(["id", "name", "description", "icon"]);
+        expect(Object.keys(preset)).toEqual(["id", "name", "description", "icon", "category", "tags"]);
       });
     });
 
diff --git a/src/types/quickstart.ts b/src/types/quickstart.ts
index 79c89c0e..bdeafe5c 100644
--- a/src/types/quickstart.ts
+++ b/src/types/quickstart.ts
@@ -1,6 +1,6 @@
 export type QuickstartView = "initial" | "templates" | "vibe";
 
-export type TemplateCategory = "product" | "style" | "composition" | "community";
+export type TemplateCategory = "simple" | "advanced" | "community";
 
 export interface TemplateMetadata {
   nodeCount: number;