feat(libra): flag the "Other" account hint on the account step

Add a compact inline amber warning (icon + text) next to the
"Select the account…" instruction on both the expense and income
account-selection steps, so users know to fall back to the "Other"
account when unsure.

Splits the income i18n into selectAccount + a new otherAccountHint
key (en/fr/es + types).

src/accounting-app/views/AddIncome.vue

@@ -78,8 +78,12 @@
 
           <!-- Step 1: Revenue Account Selection -->
           <div v-if="currentStep === 1">
-            <p class="text-sm text-muted-foreground mb-4">
+            <p class="flex flex-wrap items-center gap-x-1.5 gap-y-1 mb-4 text-sm">
-              {{ t('libra.income.selectAccount') }}
+              <span class="text-muted-foreground">{{ t('libra.income.selectAccount') }}</span>
+              <span class="inline-flex items-center gap-1 font-medium text-amber-600 dark:text-amber-400">
+                <AlertTriangle class="h-4 w-4 shrink-0" />
+                {{ t('libra.income.otherAccountHint') }}
+              </span>
             </p>
             <AccountSelector
               v-model="selectedRevenueAccount"
@@ -218,7 +222,7 @@ import {
   DialogHeader,
   DialogTitle,
 } from '@/components/ui/dialog'
-import { TrendingUp, ChevronLeft, Loader2, CheckCircle2, Receipt, Clock } from 'lucide-vue-next'
+import { TrendingUp, ChevronLeft, Loader2, CheckCircle2, Receipt, Clock, AlertTriangle } from 'lucide-vue-next'
 import { injectService, SERVICE_TOKENS } from '@/core/di-container'
 import { useAuth } from '@/composables/useAuthService'
 import { useToast } from '@/core/composables/useToast'

src/i18n/locales/en.ts

@@ -202,7 +202,8 @@ const messages: LocaleMessages = {
     income: {
       title: 'Add Income',
       description: 'Submit income for the organization',
-      selectAccount: 'Select the revenue account. Use the "Other" account if you\'re not sure.',
+      selectAccount: 'Select the revenue account.',
+      otherAccountHint: 'Use the "Other" account if you\'re not sure.',
       submitIncome: 'Submit Income',
       notAvailable: 'Income submission is not yet available. This feature is coming soon.',
     },

src/i18n/locales/es.ts

@@ -202,7 +202,8 @@ const messages: LocaleMessages = {
     income: {
       title: 'A\u00f1adir ingreso',
       description: 'Enviar un ingreso para la organizaci\u00f3n',
-      selectAccount: 'Seleccionar la cuenta de ingresos. Use la cuenta "Other" si no está seguro.',
+      selectAccount: 'Seleccionar la cuenta de ingresos.',
+      otherAccountHint: 'Use la cuenta "Other" si no está seguro.',
       submitIncome: 'Enviar ingreso',
       notAvailable: 'El registro de ingresos a\u00fan no est\u00e1 disponible. Esta funci\u00f3n llegar\u00e1 pronto.',
     },

src/i18n/locales/fr.ts

@@ -202,7 +202,8 @@ const messages: LocaleMessages = {
     income: {
       title: 'Ajouter un revenu',
       description: 'Soumettre un revenu pour l\u2019organisation',
-      selectAccount: 'S\u00e9lectionner le compte de revenus. Utilisez le compte "Other" si vous n\'\u00eates pas s\u00fbr.',
+      selectAccount: 'S\u00e9lectionner le compte de revenus.',
+      otherAccountHint: 'Utilisez le compte "Other" si vous n\'\u00eates pas s\u00fbr.',
       submitIncome: 'Soumettre le revenu',
       notAvailable: 'La saisie de revenus n\u2019est pas encore disponible. Cette fonctionnalit\u00e9 arrive bient\u00f4t.',
     },

src/i18n/types.ts

@@ -179,6 +179,7 @@ export interface LocaleMessages {
       title: string
       description: string
       selectAccount: string
+      otherAccountHint: string
       submitIncome: string
       notAvailable: string
     }

src/modules/expenses/components/AddExpense.vue

@@ -84,9 +84,12 @@
 
       <!-- Step 1: Account Selection -->
       <div v-if="currentStep === 1">
-        <p class="text-sm text-muted-foreground mb-4">
+        <p class="flex flex-wrap items-center gap-x-1.5 gap-y-1 mb-4 text-sm">
-          Select the account for this expense. Use the "Other" account if
+          <span class="text-muted-foreground">Select the account for this expense.</span>
-          you're not sure.
+          <span class="inline-flex items-center gap-1 font-medium text-amber-600 dark:text-amber-400">
+            <AlertTriangle class="h-4 w-4 shrink-0" />
+            Use the "Other" account if you're not sure.
+          </span>
         </p>
         <AccountSelector
           v-model="selectedAccount"
@@ -271,7 +274,7 @@ import {
   DialogHeader,
   DialogTitle,
 } from '@/components/ui/dialog'
-import { DollarSign, ChevronLeft, Loader2, CheckCircle2, Receipt, Clock } from 'lucide-vue-next'
+import { DollarSign, ChevronLeft, Loader2, CheckCircle2, Receipt, Clock, AlertTriangle } from 'lucide-vue-next'
 import { injectService, SERVICE_TOKENS } from '@/core/di-container'
 import { useAuth } from '@/composables/useAuthService'
 import { useToast } from '@/core/composables/useToast'