From 5fd448bf7f085b8e1bdd7bd8474e661f59cee14f Mon Sep 17 00:00:00 2001
From: Paulo Castellano <paulo@castellanos.llc>
Date: Thu, 16 Apr 2026 11:25:22 -0300
Subject: [PATCH] fix: render tone and language select values via computed
 labels
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Reka UI's SelectValue extracts the displayed text from the slot of
the currently-selected SelectItem. When that slot is a reactive
{{ $t('onboarding.brand.tone_professional') }} expression, the
library reads the DOM content before Vue applies the translation,
leaving the raw key visible in the trigger even after the list has
rendered correctly.

Bypass the lookup by rendering the translated label directly inside
<SelectValue> via a computed that maps the current v-model value to
its localized string. The SelectItem slots keep their translations
for the dropdown menu itself, but the closed-state trigger no longer
depends on DOM introspection.

Applied to both the onboarding Brand form and Settings → Workspace.
---
 resources/js/pages/onboarding/Brand.vue   | 23 +++++++++++++++++++---
 resources/js/pages/settings/Workspace.vue | 24 ++++++++++++++++++++---
 2 files changed, 41 insertions(+), 6 deletions(-)

diff --git a/resources/js/pages/onboarding/Brand.vue b/resources/js/pages/onboarding/Brand.vue
index 21a2902a..1d43711a 100644
--- a/resources/js/pages/onboarding/Brand.vue
+++ b/resources/js/pages/onboarding/Brand.vue
@@ -2,7 +2,7 @@
 import { Head, useForm } from '@inertiajs/vue3';
 import { IconLoader2, IconSparkles } from '@tabler/icons-vue';
 import { trans } from 'laravel-vue-i18n';
-import { ref } from 'vue';
+import { computed, ref } from 'vue';
 import { toast } from 'vue-sonner';
 
 import { autofillBrand, skipBrand, storeBrand } from '@/actions/App/Http/Controllers/App/OnboardingController';
@@ -47,6 +47,19 @@ const skipForm = useForm({});
 const isAutofilling = ref(false);
 const logoPreview = ref<string | null>(null);
 
+const toneLabel = computed(() =>
+    form.brand_tone ? trans(`onboarding.brand.tone_${form.brand_tone}`) : '',
+);
+
+const languageLabel = computed(() => {
+    const map: Record<string, string> = {
+        en: 'English',
+        'pt-BR': 'Português (Brasil)',
+        es: 'Español',
+    };
+    return map[form.content_language] ?? '';
+});
+
 const csrfToken = document.querySelector<HTMLMetaElement>('meta[name="csrf-token"]')?.content ?? '';
 
 const submit = () => {
@@ -160,7 +173,9 @@ 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 :placeholder="$t('onboarding.brand.tone')" />
+                            <SelectValue :placeholder="$t('onboarding.brand.tone')">
+                                {{ toneLabel }}
+                            </SelectValue>
                         </SelectTrigger>
                         <SelectContent>
                             <SelectItem value="professional">{{ $t('onboarding.brand.tone_professional') }}</SelectItem>
@@ -179,7 +194,9 @@ 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 :placeholder="$t('onboarding.brand.content_language')" />
+                            <SelectValue :placeholder="$t('onboarding.brand.content_language')">
+                                {{ languageLabel }}
+                            </SelectValue>
                         </SelectTrigger>
                         <SelectContent>
                             <SelectItem value="en">English</SelectItem>
diff --git a/resources/js/pages/settings/Workspace.vue b/resources/js/pages/settings/Workspace.vue
index 736c2386..4794b585 100644
--- a/resources/js/pages/settings/Workspace.vue
+++ b/resources/js/pages/settings/Workspace.vue
@@ -1,7 +1,8 @@
 <script setup lang="ts">
 import { Form, Head, router } from '@inertiajs/vue3';
 import { IconClock, IconDots, IconShield, IconTrash, IconUser } from '@tabler/icons-vue';
-import { ref } from 'vue';
+import { trans } from 'laravel-vue-i18n';
+import { computed, ref } from 'vue';
 
 import WorkspaceController from '@/actions/App/Http/Controllers/App/WorkspaceController';
 import { WorkspaceRole } from '@/enums/workspace-role';
@@ -78,6 +79,19 @@ const props = defineProps<{
 const timezone = ref(props.workspace.timezone);
 const brandTone = ref(props.workspace.brand_tone ?? 'professional');
 const contentLanguage = ref(props.workspace.content_language ?? 'en');
+
+const toneLabel = computed(() =>
+    brandTone.value ? trans(`settings.brand.tone_${brandTone.value}`) : '',
+);
+
+const languageLabel = computed(() => {
+    const map: Record<string, string> = {
+        en: 'English',
+        'pt-BR': 'Português (Brasil)',
+        es: 'Español',
+    };
+    return map[contentLanguage.value] ?? '';
+});
 const inviteDialogOpen = ref(false);
 
 const removeMemberModal = ref<InstanceType<typeof ConfirmDeleteModal> | null>(null);
@@ -193,7 +207,9 @@ 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 :placeholder="$t('settings.brand.tone')" />
+                                    <SelectValue :placeholder="$t('settings.brand.tone')">
+                                        {{ toneLabel }}
+                                    </SelectValue>
                                 </SelectTrigger>
                                 <SelectContent>
                                     <SelectItem value="professional">{{ $t('settings.brand.tone_professional') }}</SelectItem>
@@ -213,7 +229,9 @@ 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 :placeholder="$t('settings.brand.content_language')" />
+                                    <SelectValue :placeholder="$t('settings.brand.content_language')">
+                                        {{ languageLabel }}
+                                    </SelectValue>
                                 </SelectTrigger>
                                 <SelectContent>
                                     <SelectItem value="en">English</SelectItem>