From c65ee029dd3f50142408d2e6727e9ab70c2266df Mon Sep 17 00:00:00 2001
From: Padreug <padreug@aiolabs.dev>
Date: Wed, 27 May 2026 11:39:19 +0200
Subject: [PATCH] fix: escape @ in i18n messages, set useScope:'global'
 everywhere
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Vue-i18n treats a bare '@' as the start of a linked-message reference,
which made every placeholder containing one — you{'@'}example.com,
the Telegram '{'@'}yourname' hint, the bad-Telegram error — crash the
compiler with "Invalid linked format". Escaping each '@' as the
literal {'@'} in en/es/fr fixes the compile and renders as a plain
'@' to the visitor.

Separately, every useI18n() call now passes { useScope: 'global' }.
Without it, components mounted inside <Form> / <Field> contexts
couldn't find a parent i18n scope and vue-i18n logged "Not found
parent scope. use the global scope." on every render. Explicit
global scope silences the warning and matches what the app
actually intends — there are no per-component message bundles.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/components/contact/ContactForm.vue    | 2 +-
 src/components/contact/PrivacyBlurb.vue   | 2 +-
 src/components/layout/LocaleSwitcher.vue  | 2 +-
 src/components/layout/SiteFooter.vue      | 2 +-
 src/components/layout/SiteHeader.vue      | 2 +-
 src/components/layout/ThemeToggle.vue     | 2 +-
 src/components/projects/ProjectDetail.vue | 2 +-
 src/components/projects/ProjectImage.vue  | 2 +-
 src/i18n/locales/en.json                  | 8 ++++----
 src/i18n/locales/es.json                  | 8 ++++----
 src/i18n/locales/fr.json                  | 8 ++++----
 src/views/ContactView.vue                 | 2 +-
 src/views/HomeView.vue                    | 2 +-
 src/views/PortfolioView.vue               | 2 +-
 14 files changed, 23 insertions(+), 23 deletions(-)

diff --git a/src/components/contact/ContactForm.vue b/src/components/contact/ContactForm.vue
index 46acb58..91478b5 100644
--- a/src/components/contact/ContactForm.vue
+++ b/src/components/contact/ContactForm.vue
@@ -25,7 +25,7 @@ import {
 } from '@/components/ui/select'
 import { submitInquiry, type ContactMethod } from '@/features/nostr/submitInquiry'
 
-const { t } = useI18n()
+const { t } = useI18n({ useScope: 'global' })
 
 const METHODS: ContactMethod[] = ['email', 'whatsapp', 'signal', 'telegram', 'nostr']
 
diff --git a/src/components/contact/PrivacyBlurb.vue b/src/components/contact/PrivacyBlurb.vue
index 604f4bc..ae139bf 100644
--- a/src/components/contact/PrivacyBlurb.vue
+++ b/src/components/contact/PrivacyBlurb.vue
@@ -2,7 +2,7 @@
 import { Lock } from '@lucide/vue'
 import { useI18n } from 'vue-i18n'
 
-const { t } = useI18n()
+const { t } = useI18n({ useScope: 'global' })
 </script>
 
 <template>
diff --git a/src/components/layout/LocaleSwitcher.vue b/src/components/layout/LocaleSwitcher.vue
index bf507b4..af6177b 100644
--- a/src/components/layout/LocaleSwitcher.vue
+++ b/src/components/layout/LocaleSwitcher.vue
@@ -8,7 +8,7 @@ import {
 } from '@/components/ui/dropdown-menu'
 import { SUPPORTED_LOCALES, persistLocale, type LocaleCode } from '@/i18n'
 
-const { locale } = useI18n()
+const { locale } = useI18n({ useScope: 'global' })
 
 function set(code: LocaleCode) {
   locale.value = code
diff --git a/src/components/layout/SiteFooter.vue b/src/components/layout/SiteFooter.vue
index 53f0cef..e6036e1 100644
--- a/src/components/layout/SiteFooter.vue
+++ b/src/components/layout/SiteFooter.vue
@@ -2,7 +2,7 @@
 import { RouterLink } from 'vue-router'
 import { useI18n } from 'vue-i18n'
 
-const { t } = useI18n()
+const { t } = useI18n({ useScope: 'global' })
 const year = new Date().getFullYear()
 </script>
 
diff --git a/src/components/layout/SiteHeader.vue b/src/components/layout/SiteHeader.vue
index 4593a55..88c1011 100644
--- a/src/components/layout/SiteHeader.vue
+++ b/src/components/layout/SiteHeader.vue
@@ -13,7 +13,7 @@ import {
 import ThemeToggle from './ThemeToggle.vue'
 import LocaleSwitcher from './LocaleSwitcher.vue'
 
-const { t } = useI18n()
+const { t } = useI18n({ useScope: 'global' })
 
 const navItems = computed(() => [
   { to: '/portfolio', label: t('nav.portfolio') },
diff --git a/src/components/layout/ThemeToggle.vue b/src/components/layout/ThemeToggle.vue
index a0539e9..b6b31f3 100644
--- a/src/components/layout/ThemeToggle.vue
+++ b/src/components/layout/ThemeToggle.vue
@@ -3,7 +3,7 @@ import { useI18n } from 'vue-i18n'
 import { Moon, Sun } from '@lucide/vue'
 import { useTheme } from '@/composables/useTheme'
 
-const { t } = useI18n()
+const { t } = useI18n({ useScope: 'global' })
 const { theme, toggle } = useTheme()
 </script>
 
diff --git a/src/components/projects/ProjectDetail.vue b/src/components/projects/ProjectDetail.vue
index be792f3..d227c0c 100644
--- a/src/components/projects/ProjectDetail.vue
+++ b/src/components/projects/ProjectDetail.vue
@@ -7,7 +7,7 @@ import ProjectImage from './ProjectImage.vue'
 import type { Project } from '@/data/projects'
 
 const props = defineProps<{ project: Project }>()
-const { t } = useI18n()
+const { t } = useI18n({ useScope: 'global' })
 
 const hero = computed(() => props.project.images.find((img) => img.feature === 'hero'))
 const rest = computed(() => props.project.images.filter((img) => img.feature !== 'hero'))
diff --git a/src/components/projects/ProjectImage.vue b/src/components/projects/ProjectImage.vue
index fa75aee..dbba734 100644
--- a/src/components/projects/ProjectImage.vue
+++ b/src/components/projects/ProjectImage.vue
@@ -5,7 +5,7 @@ import { Dialog, DialogContent, DialogTrigger } from '@/components/ui/dialog'
 import type { ProjectImage } from '@/data/projects'
 
 const props = defineProps<{ image: ProjectImage }>()
-const { t } = useI18n()
+const { t } = useI18n({ useScope: 'global' })
 const open = ref(false)
 </script>
 
diff --git a/src/i18n/locales/en.json b/src/i18n/locales/en.json
index 0b8a20c..6e6e202 100644
--- a/src/i18n/locales/en.json
+++ b/src/i18n/locales/en.json
@@ -104,7 +104,7 @@
       "messageTooLong": "Keep it under 2000 characters.",
       "badEmail": "That does not look like an email address.",
       "badPhoneOrHandle": "Use a phone number or a handle.",
-      "badTelegram": "Use a Telegram handle, like @yourname.",
+      "badTelegram": "Use a Telegram handle, like {'@'}yourname.",
       "badNpub": "That does not look like an npub."
     },
     "toast": {
@@ -125,10 +125,10 @@
     "nostr": "Nostr"
   },
   "methodPlaceholders": {
-    "email": "you@example.com",
+    "email": "you{'@'}example.com",
     "whatsapp": "+1 555 123 4567",
-    "signal": "+1 555 123 4567 or @username",
-    "telegram": "@yourhandle",
+    "signal": "+1 555 123 4567 or {'@'}username",
+    "telegram": "{'@'}yourhandle",
     "nostr": "npub1…"
   }
 }
diff --git a/src/i18n/locales/es.json b/src/i18n/locales/es.json
index f56149f..d5f1f03 100644
--- a/src/i18n/locales/es.json
+++ b/src/i18n/locales/es.json
@@ -104,7 +104,7 @@
       "messageTooLong": "Manténgalo bajo 2000 caracteres.",
       "badEmail": "Eso no parece una dirección de correo.",
       "badPhoneOrHandle": "Use un número de teléfono o un usuario.",
-      "badTelegram": "Use un usuario de Telegram, como @sunombre.",
+      "badTelegram": "Use un usuario de Telegram, como {'@'}sunombre.",
       "badNpub": "Eso no parece un npub."
     },
     "toast": {
@@ -125,10 +125,10 @@
     "nostr": "Nostr"
   },
   "methodPlaceholders": {
-    "email": "tu@ejemplo.com",
+    "email": "tu{'@'}ejemplo.com",
     "whatsapp": "+34 600 123 456",
-    "signal": "+34 600 123 456 o @usuario",
-    "telegram": "@suusuario",
+    "signal": "+34 600 123 456 o {'@'}usuario",
+    "telegram": "{'@'}suusuario",
     "nostr": "npub1…"
   }
 }
diff --git a/src/i18n/locales/fr.json b/src/i18n/locales/fr.json
index cbd8dbd..7e91623 100644
--- a/src/i18n/locales/fr.json
+++ b/src/i18n/locales/fr.json
@@ -104,7 +104,7 @@
       "messageTooLong": "Moins de 2000 caractères, s'il vous plaît.",
       "badEmail": "Cela ne ressemble pas à une adresse email.",
       "badPhoneOrHandle": "Utilisez un numéro de téléphone ou un pseudo.",
-      "badTelegram": "Utilisez un pseudo Telegram, comme @votrenom.",
+      "badTelegram": "Utilisez un pseudo Telegram, comme {'@'}votrenom.",
       "badNpub": "Cela ne ressemble pas à un npub."
     },
     "toast": {
@@ -125,10 +125,10 @@
     "nostr": "Nostr"
   },
   "methodPlaceholders": {
-    "email": "vous@exemple.com",
+    "email": "vous{'@'}exemple.com",
     "whatsapp": "+33 6 12 34 56 78",
-    "signal": "+33 6 12 34 56 78 ou @pseudo",
-    "telegram": "@votrepseudo",
+    "signal": "+33 6 12 34 56 78 ou {'@'}pseudo",
+    "telegram": "{'@'}votrepseudo",
     "nostr": "npub1…"
   }
 }
diff --git a/src/views/ContactView.vue b/src/views/ContactView.vue
index d4cebe9..e341c68 100644
--- a/src/views/ContactView.vue
+++ b/src/views/ContactView.vue
@@ -3,7 +3,7 @@ import { useI18n } from 'vue-i18n'
 import ContactForm from '@/components/contact/ContactForm.vue'
 import PrivacyBlurb from '@/components/contact/PrivacyBlurb.vue'
 
-const { t } = useI18n()
+const { t } = useI18n({ useScope: 'global' })
 </script>
 
 <template>
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index 7a757de..f8fe19f 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -6,7 +6,7 @@ import { AspectRatio } from '@/components/ui/aspect-ratio'
 import { Button } from '@/components/ui/button'
 import { projects } from '@/data/projects'
 
-const { t } = useI18n()
+const { t } = useI18n({ useScope: 'global' })
 
 const projectCards = computed(() =>
   projects.map((p) => ({
diff --git a/src/views/PortfolioView.vue b/src/views/PortfolioView.vue
index f33601c..55cc32f 100644
--- a/src/views/PortfolioView.vue
+++ b/src/views/PortfolioView.vue
@@ -5,7 +5,7 @@ import { useI18n } from 'vue-i18n'
 import { AspectRatio } from '@/components/ui/aspect-ratio'
 import { projects } from '@/data/projects'
 
-const { t } = useI18n()
+const { t } = useI18n({ useScope: 'global' })
 
 const projectCards = computed(() =>
   projects.map((p) => ({