From ffd7b45eb3eb32649cf81618eebd35211a32c2a4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Paulo=20S=C3=A9rgio=20Dantas?= <contato@paulosdantas.adv.br>
Date: Wed, 1 Jul 2026 01:22:54 -0300
Subject: [PATCH] feat(ai-create): show character counter under the AI prompt
 field
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The AI post prompt is validated with `max:2000` on the backend, but the
create form gave no hint of the limit — users could write past it and only
find out via a validation error on submit.

Add a live `X/2000` counter below the "What is this post about?" textarea.
It turns red (`text-destructive`) once the prompt exceeds the limit, and the
generate button is disabled while over it (`canSubmit` now checks
`length <= PROMPT_MAX`), so the limit is caught before the request.
---
 resources/js/components/posts/create/AiPostWizard.vue | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/resources/js/components/posts/create/AiPostWizard.vue b/resources/js/components/posts/create/AiPostWizard.vue
index f02572d0..797f91f4 100644
--- a/resources/js/components/posts/create/AiPostWizard.vue
+++ b/resources/js/components/posts/create/AiPostWizard.vue
@@ -63,6 +63,8 @@ const selectedAccountId = ref<string | null>(null);
 const includeImages = ref(true);
 const imageCount = ref(2);
 const promptText = ref('');
+// Mirrors the backend validation (`prompt` max:2000) so the limit is visible in the UI.
+const PROMPT_MAX = 2000;
 
 const submitting = ref(false);
 
@@ -160,7 +162,8 @@ const submittedImageCount = computed(() => {
 const canSubmit = computed(() =>
     selectedFormat.value !== null &&
     selectedAccountId.value !== null &&
-    promptText.value.trim().length >= 3,
+    promptText.value.trim().length >= 3 &&
+    promptText.value.length <= PROMPT_MAX,
 );
 
 // Auto-pick the only account when format has exactly one match.
@@ -358,6 +361,12 @@ const startGeneration = async () => {
                 :placeholder="$t('posts.create.steps.prompt_placeholder')"
                 class="min-h-[140px] resize-none"
             />
+            <p
+                class="text-right text-xs tabular-nums"
+                :class="promptText.length > PROMPT_MAX ? 'font-semibold text-destructive' : 'text-muted-foreground'"
+            >
+                {{ promptText.length }}/{{ PROMPT_MAX }}
+            </p>
         </div>
 
         <!-- Generate -->