feat(app): add internationalization (i18n) support

src/app/src/app.vue

@@ -120,7 +120,7 @@ router.beforeEach((to, from) => {
       >
         <UFieldGroup>
           <UTooltip
-            text="Toggle Studio"
+            :text="$t('studio.tooltips.toggleStudio')"
             :kbds="['meta', '.']"
           >
             <UButton

src/app/src/components/AppBanner.vue

@@ -56,10 +56,10 @@ function handleReload() {
           </div>
           <div class="flex-1 min-w-0">
             <p class="text-sm font-medium text-highlighted">
-              New website version detected
+              {{ $t('studio.newVersionBanner.title') }}
             </p>
             <p class="text-xs text-muted mt-0.5">
-              A new version of your website has been deployed. Reload the app to see the latest changes.
+              {{ $t('studio.newVersionBanner.description') }}
             </p>
           </div>
         </div>
@@ -70,7 +70,7 @@ function handleReload() {
           :loading="isReloadingApp"
           @click="handleReload"
         >
-          Reload
+          {{ $t('studio.buttons.reload') }}
         </UButton>
       </div>
     </div>

src/app/src/components/AppFooter.vue

@@ -1,12 +1,14 @@
 <script setup lang="ts">
 import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
 import { useStudio } from '../composables/useStudio'
 import { useStudioState } from '../composables/useStudioState'
 import type { DropdownMenuItem } from '@nuxt/ui'
 
 const { ui, host, git } = useStudio()
 const { devMode, preferences, updatePreference, unsetActiveLocation } = useStudioState()
 const user = host.user.get()
+const { t } = useI18n()
 
 // const showTechnicalMode = computed({
 //   get: () => preferences.value.showTechnicalMode,
@@ -31,7 +33,7 @@ const userMenuItems = computed(() => [
       ]
     : undefined,
   [{
-    label: 'Sign out',
+    label: t('studio.buttons.signOut'),
     icon: 'i-lucide-log-out',
     onClick: () => {
       fetch('/__nuxt_studio/auth/session', { method: 'delete' }).then(() => {
@@ -41,6 +43,12 @@ const userMenuItems = computed(() => [
   }],
 ].filter(Boolean) as DropdownMenuItem[][])
 
+const syncTooltipText = computed(() => {
+  return preferences.value.syncEditorAndRoute
+    ? t('studio.tooltips.unlinkEditor')
+    : t('studio.tooltips.linkEditor')
+})
+
 function closeStudio() {
   unsetActiveLocation()
   ui.close()
@@ -70,7 +78,7 @@ function closeStudio() {
         >
           <USwitch
             v-model="showTechnicalMode"
-            label="Developer view"
+            :label="$t('studio.footer.developer_view')"
             size="xs"
             :ui="{ root: 'w-full flex-row-reverse justify-between', wrapper: 'ms-0' }"
           />
@@ -88,7 +96,7 @@ function closeStudio() {
 
     <div class="flex items-center">
       <UTooltip
-        :text="preferences.syncEditorAndRoute ? 'Unlink editor and preview' : 'Link editor and preview'"
+        :text="syncTooltipText"
         :delay-duration="0"
       >
         <UButton

src/app/src/components/content/ContentEditorCode.vue

@@ -7,6 +7,7 @@ import { useStudio } from '../../composables/useStudio'
 import { useMonaco } from '../../composables/useMonaco'
 import { useMonacoDiff } from '../../composables/useMonacoDiff'
 import { fromBase64ToUTF8 } from '../../utils/string'
+import { useI18n } from 'vue-i18n'
 import { areContentEqual } from '../../utils/content'
 
 const props = defineProps({
@@ -23,6 +24,7 @@ const props = defineProps({
 
 const document = defineModel<DatabasePageItem>()
 const { mediaTree, host, ui } = useStudio()
+const { t } = useI18n()
 
 const editorRef = ref<HTMLElement>()
 const diffEditorRef = ref<HTMLElement>()
@@ -53,7 +55,7 @@ const { editor, setContent: setEditorContent } = useMonaco(editorRef, {
   readOnly: props.readOnly,
   colorMode: ui.colorMode,
   onSetup: async (monaco) => {
-    setupSuggestion(monaco.monaco, host.meta.components(), mediaTree.root.value)
+    setupSuggestion(monaco.monaco, host.meta.components(), mediaTree.root.value, t)
   },
   onChange: (newContent) => {
     if (props.readOnly) {

src/app/src/components/content/ContentEditorConflict.vue

@@ -53,7 +53,7 @@ useMonacoDiff(diffEditorRef, {
         />
         <div class="flex-1">
           <h3 class="font-semibold text-highlighted text-sm mb-3">
-            Conflict Detected
+            {{ $t('studio.conflict.title') }}
           </h3>
 
           <dl class="space-y-2 text-xs mb-4">
@@ -63,7 +63,7 @@ useMonacoDiff(diffEditorRef, {
                   name="i-simple-icons:github"
                   class="size-3.5"
                 />
-                Repository
+                {{ $t('studio.conflict.repository') }}
               </dt>
               <dd class="text-highlighted font-medium">
                 <UButton
@@ -83,7 +83,7 @@ useMonacoDiff(diffEditorRef, {
                   name="i-lucide-git-branch"
                   class="size-3.5"
                 />
-                Branch
+                {{ $t('studio.conflict.branch') }}
               </dt>
               <dd class="text-highlighted font-medium">
                 <UButton
@@ -103,7 +103,7 @@ useMonacoDiff(diffEditorRef, {
                   name="i-lucide-file"
                   class="size-3.5"
                 />
-                File
+                {{ $t('studio.conflict.file') }}
               </dt>
               <dd class="text-highlighted font-medium">
                 <UButton
@@ -118,7 +118,7 @@ useMonacoDiff(diffEditorRef, {
           </dl>
 
           <p class="text-xs mb-2">
-            The content on GitHub differs from your website version. Ensure your latest changes are deployed and refresh the page.
+            {{ $t('studio.conflict.description') }}
           </p>
         </div>
       </div>
@@ -130,14 +130,14 @@ useMonacoDiff(diffEditorRef, {
           name="i-simple-icons:git"
           class="size-3.5"
         />
-        GitHub
+        {{ $t('studio.conflict.githubVersion') }}
       </div>
       <div class="flex items-center gap-1 text-sm text-muted">
         <UIcon
           name="i-lucide-globe"
           class="size-3.5"
         />
-        Website
+        {{ $t('studio.conflict.websiteVersion') }}
       </div>
     </div>
 

src/app/src/components/header/HeaderMain.vue

@@ -1,27 +1,29 @@
 <script setup lang="ts">
 import { useRouter, useRoute } from 'vue-router'
 import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
 import { useStudio } from '../../composables/useStudio'
 import type { StudioFeature } from '../../types'
 import { useStudioState } from '../../composables/useStudioState'
 
 const router = useRouter()
 const route = useRoute()
 const { context } = useStudio()
+const { t } = useI18n()
 const { setLocation, devMode } = useStudioState()
 
-const items = [
+const items = computed(() => [
   {
-    label: 'Content',
+    label: t('studio.nav.content'),
     value: 'content',
     to: '/content',
   },
   {
-    label: 'Media',
+    label: t('studio.nav.media'),
     value: 'media',
     to: '/media',
   },
-]
+])
 
 const current = computed({
   get: () => route.name as string,
@@ -53,7 +55,7 @@ const current = computed({
 
     <UButton
       v-if="!devMode"
-      label="Review"
+      :label="$t('studio.buttons.review')"
       color="neutral"
       :variant="context.draftCount.value > 0 ? 'solid' : 'soft'"
       to="/review"

src/app/src/components/header/HeaderReview.vue

@@ -5,26 +5,29 @@ import { useStudio } from '../../composables/useStudio'
 import { useRouter } from 'vue-router'
 import { StudioBranchActionId } from '../../types'
 import { useStudioState } from '../../composables/useStudioState'
+import { useI18n } from 'vue-i18n'
 
 const router = useRouter()
 const { location } = useStudioState()
 const { context } = useStudio()
+const { t } = useI18n()
 
 const isPublishing = ref(false)
 const openTooltip = ref(false)
 
-type Schema = z.output<typeof schema>
-const schema = z.object({
-  commitMessage: z.string().nonempty('Commit message is required'),
-})
+type Schema = z.output<typeof schema.value>
+
+const schema = computed(() => z.object({
+  commitMessage: z.string().nonempty(t('studio.validation.commitRequired')),
+}))
 
 const state = reactive<Schema>({
   commitMessage: '',
 })
 
 const validationErrors = computed(() => {
   try {
-    schema.parse(state)
+    schema.value.parse(state)
     return []
   }
   catch (error) {
@@ -48,7 +51,7 @@ const tooltipText = computed(() => {
   if (validationErrors.value.length > 0) {
     return validationErrors.value[0].message
   }
-  return 'Publish changes'
+  return t('studio.tooltips.publishChanges')
 })
 
 async function publishChanges() {
@@ -67,7 +70,7 @@ async function publishChanges() {
     router.push({
       path: '/error',
       query: {
-        error: err.message || 'Failed to publish changes',
+        error: err.message || t('studio.publish.failedGeneric'),
       },
     })
   }
@@ -100,15 +103,15 @@ defineShortcuts({
   >
     <div class="w-full flex items-center gap-2">
       <UTooltip
-        text="Back to content"
+        :text="$t('studio.tooltips.backToContent')"
         :kbds="['esc']"
       >
         <UButton
           icon="i-ph-arrow-left"
           color="neutral"
           variant="soft"
           size="sm"
-          aria-label="Back"
+          :aria-label="$t('studio.buttons.back')"
           @click="backToEditor"
         />
       </UTooltip>
@@ -124,7 +127,7 @@ defineShortcuts({
 
         <UInput
           v-model="state.commitMessage"
-          placeholder="Commit message"
+          :placeholder="$t('studio.placeholders.commitMessage')"
           size="sm"
           :disabled="isPublishing"
           class="w-full"
@@ -145,7 +148,7 @@ defineShortcuts({
           :loading="isPublishing"
           :disabled="validationErrors.length > 0"
           icon="i-lucide-check"
-          label="Publish"
+          :label="$t('studio.buttons.publish')"
           :ui="{ leadingIcon: 'size-3.5' }"
         />
       </UTooltip>

src/app/src/components/header/HeaderSuccess.vue

@@ -11,15 +11,15 @@ function goBack() {
 <template>
   <div class="w-full flex items-center gap-2">
     <UTooltip
-      text="Back to content"
+      :text="$t('studio.tooltips.backToContent')"
       :kbds="['esc']"
     >
       <UButton
         icon="i-ph-arrow-left"
         color="neutral"
         variant="soft"
         size="sm"
-        aria-label="Back"
+        :aria-label="$t('studio.buttons.back')"
         @click="goBack"
       />
     </UTooltip>

src/app/src/components/media/MediaCard.vue

@@ -46,7 +46,7 @@ const imageSrc = computed(() => isImageFile(props.item.fsPath) ? props.item.rout
           :src="imageSrc"
           width="48"
           height="48"
-          alt="File preview"
+          :alt="$t('studio.media.altFilePreview')"
           class="w-full h-full object-cover"
         />
       </div>

src/app/src/components/media/MediaCardForm.vue

@@ -42,7 +42,7 @@ const isImage = computed(() => props.renamedItem && isImageFile(props.renamedIte
           :src="renamedItem.routePath"
           width="48"
           height="48"
-          alt="File preview"
+          :alt="$t('studio.media.altFilePreview')"
           class="w-full h-full object-cover"
         />
       </div>

src/app/src/components/media/MediaEditorAudio.vue

@@ -14,7 +14,7 @@
         :ui="{ leadingIcon: 'w-16 h-16', trailingIcon: 'w-16 h-16' }"
       >
         <template #default>
-          <span class="sr-only">Play Audio</span>
+          <span class="sr-only">{{ $t('studio.media.playAudio') }}</span>
         </template>
       </UButton>
     </div>
@@ -31,7 +31,7 @@
       @ended="isPlaying = false"
     >
       <source :src="src">
-      Your browser does not support the audio tag.
+      {{ $t('studio.media.audioTagNotSupported') }}
     </audio>
   </div>
 </template>