From f0b5a5ae4d12d1edd6876cd71b662900bcd16449 Mon Sep 17 00:00:00 2001
From: Paulo Castellano <paulo@castellanos.llc>
Date: Thu, 16 Apr 2026 11:22:40 -0300
Subject: [PATCH] fix: use $t() in Vue templates instead of trans()
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

trans() is the laravel-vue-i18n helper that must be imported into
<script setup> for use in TS logic (like toast messages). Inside
<template>, the plugin registers a global $t() that should be used
instead — imports aren't needed and it matches Vue I18n conventions.

Converted all :placeholder / :title / :description / :action bindings
in Brand.vue and Workspace.vue to $t(). Also added explicit
:placeholder to the Brand and Workspace Selects so if the initial
v-model value hasn't resolved to a matching SelectItem yet, the user
sees the field label instead of the raw translation key.

Dropped the now-unused trans import from Workspace.vue.
---
 resources/js/pages/onboarding/Brand.vue   | 10 ++++-----
 resources/js/pages/settings/Workspace.vue | 25 +++++++++++------------
 2 files changed, 17 insertions(+), 18 deletions(-)

diff --git a/resources/js/pages/onboarding/Brand.vue b/resources/js/pages/onboarding/Brand.vue
index c47bb1e0..21a2902a 100644
--- a/resources/js/pages/onboarding/Brand.vue
+++ b/resources/js/pages/onboarding/Brand.vue
@@ -123,7 +123,7 @@ const runAutofill = async () => {
                         id="brand_website"
                         v-model="form.brand_website"
                         type="url"
-                        :placeholder="trans('onboarding.brand.website_placeholder')"
+                        :placeholder="$t('onboarding.brand.website_placeholder')"
                         class="flex-1"
                     />
                     <Button
@@ -149,7 +149,7 @@ const runAutofill = async () => {
                 <Textarea
                     id="brand_description"
                     v-model="form.brand_description"
-                    :placeholder="trans('onboarding.brand.brand_description_placeholder')"
+                    :placeholder="$t('onboarding.brand.brand_description_placeholder')"
                     rows="3"
                 />
                 <InputError :message="form.errors.brand_description" />
@@ -160,7 +160,7 @@ const runAutofill = async () => {
                     <Label for="brand_tone">{{ $t('onboarding.brand.tone') }}</Label>
                     <Select v-model="form.brand_tone">
                         <SelectTrigger id="brand_tone" class="w-full">
-                            <SelectValue />
+                            <SelectValue :placeholder="$t('onboarding.brand.tone')" />
                         </SelectTrigger>
                         <SelectContent>
                             <SelectItem value="professional">{{ $t('onboarding.brand.tone_professional') }}</SelectItem>
@@ -179,7 +179,7 @@ const runAutofill = async () => {
                     <Label for="content_language">{{ $t('onboarding.brand.content_language') }}</Label>
                     <Select v-model="form.content_language">
                         <SelectTrigger id="content_language" class="w-full">
-                            <SelectValue />
+                            <SelectValue :placeholder="$t('onboarding.brand.content_language')" />
                         </SelectTrigger>
                         <SelectContent>
                             <SelectItem value="en">English</SelectItem>
@@ -200,7 +200,7 @@ const runAutofill = async () => {
                 <Textarea
                     id="brand_voice_notes"
                     v-model="form.brand_voice_notes"
-                    :placeholder="trans('onboarding.brand.voice_notes_placeholder')"
+                    :placeholder="$t('onboarding.brand.voice_notes_placeholder')"
                     rows="3"
                 />
                 <InputError :message="form.errors.brand_voice_notes" />
diff --git a/resources/js/pages/settings/Workspace.vue b/resources/js/pages/settings/Workspace.vue
index bc6e07fb..736c2386 100644
--- a/resources/js/pages/settings/Workspace.vue
+++ b/resources/js/pages/settings/Workspace.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { Form, Head, router } from '@inertiajs/vue3';
 import { IconClock, IconDots, IconShield, IconTrash, IconUser } from '@tabler/icons-vue';
-import { trans } from 'laravel-vue-i18n';
 import { ref } from 'vue';
 
 import WorkspaceController from '@/actions/App/Http/Controllers/App/WorkspaceController';
@@ -130,7 +129,7 @@ const changeRole = (member: Member, role: string) => {
                             id="name"
                             name="name"
                             :default-value="workspace.name"
-                            :placeholder="trans('settings.workspace.name_placeholder')"
+                            :placeholder="$t('settings.workspace.name_placeholder')"
                         />
                         <InputError :message="errors.name" />
                     </div>
@@ -172,7 +171,7 @@ const changeRole = (member: Member, role: string) => {
                             name="brand_website"
                             type="url"
                             :default-value="workspace.brand_website ?? ''"
-                            :placeholder="trans('settings.brand.website_placeholder')"
+                            :placeholder="$t('settings.brand.website_placeholder')"
                         />
                         <InputError :message="errors.brand_website" />
                     </div>
@@ -183,7 +182,7 @@ const changeRole = (member: Member, role: string) => {
                             id="brand_description"
                             name="brand_description"
                             :default-value="workspace.brand_description ?? ''"
-                            :placeholder="trans('settings.brand.brand_description_placeholder')"
+                            :placeholder="$t('settings.brand.brand_description_placeholder')"
                             rows="3"
                         />
                         <InputError :message="errors.brand_description" />
@@ -194,7 +193,7 @@ const changeRole = (member: Member, role: string) => {
                             <Label for="brand_tone">{{ $t('settings.brand.tone') }}</Label>
                             <Select v-model="brandTone" name="brand_tone">
                                 <SelectTrigger id="brand_tone" class="w-full">
-                                    <SelectValue />
+                                    <SelectValue :placeholder="$t('settings.brand.tone')" />
                                 </SelectTrigger>
                                 <SelectContent>
                                     <SelectItem value="professional">{{ $t('settings.brand.tone_professional') }}</SelectItem>
@@ -214,7 +213,7 @@ const changeRole = (member: Member, role: string) => {
                             <Label for="content_language">{{ $t('settings.brand.content_language') }}</Label>
                             <Select v-model="contentLanguage" name="content_language">
                                 <SelectTrigger id="content_language" class="w-full">
-                                    <SelectValue />
+                                    <SelectValue :placeholder="$t('settings.brand.content_language')" />
                                 </SelectTrigger>
                                 <SelectContent>
                                     <SelectItem value="en">English</SelectItem>
@@ -237,7 +236,7 @@ const changeRole = (member: Member, role: string) => {
                             id="brand_voice_notes"
                             name="brand_voice_notes"
                             :default-value="workspace.brand_voice_notes ?? ''"
-                            :placeholder="trans('settings.brand.voice_notes_placeholder')"
+                            :placeholder="$t('settings.brand.voice_notes_placeholder')"
                             rows="3"
                         />
                         <InputError :message="errors.brand_voice_notes" />
@@ -356,16 +355,16 @@ const changeRole = (member: Member, role: string) => {
 
             <ConfirmDeleteModal
                 ref="removeMemberModal"
-                :title="trans('settings.members.remove_modal.title')"
-                :description="trans('settings.members.remove_modal.description')"
-                :action="trans('settings.members.remove_modal.action')"
+                :title="$t('settings.members.remove_modal.title')"
+                :description="$t('settings.members.remove_modal.description')"
+                :action="$t('settings.members.remove_modal.action')"
             />
 
             <ConfirmDeleteModal
                 ref="cancelInvitationModal"
-                :title="trans('settings.members.cancel_invite_modal.title')"
-                :description="trans('settings.members.cancel_invite_modal.description')"
-                :action="trans('settings.members.cancel_invite_modal.action')"
+                :title="$t('settings.members.cancel_invite_modal.title')"
+                :description="$t('settings.members.cancel_invite_modal.description')"
+                :action="$t('settings.members.cancel_invite_modal.action')"
             />
         </div>
     </AppLayout>