From 4269aea0151878d138d980a552922312541f1449 Mon Sep 17 00:00:00 2001
From: chihlasm <michael@chihlas.com>
Date: Fri, 13 Mar 2026 02:34:03 -0400
Subject: [PATCH] fix: loadCategories error handling and invalid Tailwind
 opacity fractions

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/src/components/scripts/ScriptTemplateList.tsx | 4 ++--
 frontend/src/components/scripts/TemplateCard.tsx       | 2 +-
 frontend/src/store/scriptGeneratorStore.ts             | 8 ++++++--
 3 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/scripts/ScriptTemplateList.tsx b/frontend/src/components/scripts/ScriptTemplateList.tsx
index d6cb1dd1..07bd0b3d 100644
--- a/frontend/src/components/scripts/ScriptTemplateList.tsx
+++ b/frontend/src/components/scripts/ScriptTemplateList.tsx
@@ -11,8 +11,8 @@ function TemplateSkeleton() {
   return (
     <div className="px-4 py-3 rounded-xl border border-border animate-pulse">
       <div className="flex justify-between mb-2">
-        <div className="h-4 w-2/3 bg-white/8 rounded" />
-        <div className="h-4 w-14 bg-white/8 rounded" />
+        <div className="h-4 w-2/3 bg-white/10 rounded" />
+        <div className="h-4 w-14 bg-white/10 rounded" />
       </div>
       <div className="h-3 w-full bg-white/5 rounded mb-1" />
       <div className="h-3 w-3/4 bg-white/5 rounded" />
diff --git a/frontend/src/components/scripts/TemplateCard.tsx b/frontend/src/components/scripts/TemplateCard.tsx
index 3b5d8931..1192cc67 100644
--- a/frontend/src/components/scripts/TemplateCard.tsx
+++ b/frontend/src/components/scripts/TemplateCard.tsx
@@ -24,7 +24,7 @@ export function TemplateCard({ template }: Props) {
       onClick={() => selectTemplate(template.id)}
       className={cn(
         'w-full text-left px-4 py-3 rounded-xl border transition-all',
-        'hover:border-white/12 hover:bg-white/4',
+        'hover:border-[rgba(255,255,255,0.12)] hover:bg-white/5',
         isActive
           ? 'bg-primary/10 border-primary/30 border-l-[3px] border-l-primary'
           : 'border-border bg-transparent'
diff --git a/frontend/src/store/scriptGeneratorStore.ts b/frontend/src/store/scriptGeneratorStore.ts
index 027900ee..bc3a9390 100644
--- a/frontend/src/store/scriptGeneratorStore.ts
+++ b/frontend/src/store/scriptGeneratorStore.ts
@@ -59,8 +59,12 @@ export const useScriptGeneratorStore = create<ScriptGeneratorState>()((set, get)
   generateError: null,
 
   loadCategories: async () => {
-    const categories = await scriptsApi.getCategories()
-    set({ categories })
+    try {
+      const categories = await scriptsApi.getCategories()
+      set({ categories })
+    } catch {
+      // silently ignore — categories remain empty, UI degrades gracefully
+    }
   },
 
   loadTemplates: async () => {