From fe0b4ea3d2ac634494a89c366362cac4268fb674 Mon Sep 17 00:00:00 2001
From: Paulo Castellano <paulo@castellanos.llc>
Date: Wed, 17 Jun 2026 20:12:25 -0300
Subject: [PATCH] refactor(ai-templates): single full-size style card look in
 both wizard and automation node

---
 .../js/components/ai/ContentStylePicker.vue   | 70 ++++---------------
 .../automations/config/GenerateNodeConfig.vue |  2 +-
 2 files changed, 15 insertions(+), 57 deletions(-)

diff --git a/resources/js/components/ai/ContentStylePicker.vue b/resources/js/components/ai/ContentStylePicker.vue
index e4752b90..bcb2d497 100644
--- a/resources/js/components/ai/ContentStylePicker.vue
+++ b/resources/js/components/ai/ContentStylePicker.vue
@@ -8,13 +8,10 @@ interface StyleOption {
     description?: string;
 }
 
-const props = withDefaults(defineProps<{
+const props = defineProps<{
     modelValue: string;
     styles: StyleOption[];
-    compact?: boolean;
-}>(), {
-    compact: false,
-});
+}>();
 
 const emit = defineEmits<{
     'update:modelValue': [string];
@@ -26,64 +23,25 @@ const select = (key: string) => {
 </script>
 
 <template>
-    <div
-        class="grid gap-2"
-        :class="compact ? 'grid-cols-3' : 'gap-3 sm:grid-cols-3'"
-    >
+    <div class="grid gap-3 sm:grid-cols-3">
         <button
             v-for="style in props.styles"
             :key="style.key"
             type="button"
-            :class="[
-                compact
-                    ? 'flex flex-col items-center gap-1.5 rounded-lg border p-2 text-left transition-colors'
-                    : 'relative flex cursor-pointer flex-col overflow-hidden rounded-xl border-2 border-foreground bg-card text-left shadow-2xs transition-all hover:bg-foreground/5',
-                compact
-                    ? (modelValue === style.key
-                        ? 'border-violet-500 bg-violet-50 dark:bg-violet-950/30'
-                        : 'border-border hover:border-violet-300 hover:bg-muted/50')
-                    : (modelValue === style.key
-                        ? '!bg-violet-100 shadow-md'
-                        : ''),
-            ]"
+            class="relative flex cursor-pointer flex-col overflow-hidden rounded-xl border-2 border-foreground bg-card text-left shadow-2xs transition-all hover:bg-foreground/5"
+            :class="modelValue === style.key ? '!bg-violet-100 shadow-md' : ''"
             @click="select(style.key)"
         >
-            <!-- Compact variant: simple thumbnail + name + active text color -->
-            <template v-if="compact">
-                <img
-                    :src="style.preview"
-                    :alt="style.name"
-                    class="w-full rounded object-cover"
-                />
-                <span
-                    class="text-center text-[10px] font-medium leading-tight"
-                    :class="modelValue === style.key ? 'text-violet-700 dark:text-violet-300' : 'text-foreground/70'"
-                >
-                    {{ style.name }}
-                </span>
-            </template>
-
-            <!-- Full variant: aspect-video thumbnail + name + description + check icon -->
-            <template v-else>
-                <div class="aspect-video w-full overflow-hidden bg-muted">
-                    <img
-                        :src="style.preview"
-                        :alt="style.name"
-                        class="size-full object-cover"
-                    />
+            <div class="aspect-video w-full overflow-hidden bg-muted">
+                <img :src="style.preview" :alt="style.name" class="size-full object-cover" />
+            </div>
+            <div class="flex items-start gap-2 p-3">
+                <div class="min-w-0 flex-1">
+                    <p class="truncate text-sm font-bold text-foreground">{{ style.name }}</p>
+                    <p v-if="style.description" class="mt-0.5 text-xs leading-snug text-foreground/60">{{ style.description }}</p>
                 </div>
-                <div class="flex items-start gap-2 p-3">
-                    <div class="min-w-0 flex-1">
-                        <p class="truncate text-sm font-bold text-foreground">{{ style.name }}</p>
-                        <p v-if="style.description" class="mt-0.5 text-xs leading-snug text-foreground/60">{{ style.description }}</p>
-                    </div>
-                    <IconCheck
-                        v-if="modelValue === style.key"
-                        class="mt-0.5 size-4 shrink-0 text-foreground"
-                        stroke-width="3"
-                    />
-                </div>
-            </template>
+                <IconCheck v-if="modelValue === style.key" class="mt-0.5 size-4 shrink-0 text-foreground" stroke-width="3" />
+            </div>
         </button>
     </div>
 </template>
diff --git a/resources/js/components/automations/config/GenerateNodeConfig.vue b/resources/js/components/automations/config/GenerateNodeConfig.vue
index 94dfd977..1e3505bb 100644
--- a/resources/js/components/automations/config/GenerateNodeConfig.vue
+++ b/resources/js/components/automations/config/GenerateNodeConfig.vue
@@ -305,7 +305,7 @@ const channels = computed<Channel[]>(() =>
 
         <div class="space-y-2">
             <Label class="text-sm font-bold">{{ $t('automations.config.generate.style') }}</Label>
-            <ContentStylePicker v-model="local.style" :styles="contentStyles" compact />
+            <ContentStylePicker v-model="local.style" :styles="contentStyles" />
         </div>
 
         <div v-if="imageCountCap >= 1" class="space-y-2">