Translate more visible UI strings

packages/vue/src/i18n/messages.ts

@@ -143,6 +143,13 @@ export const dialogMessages = i18n('dialogs', {
   apply: 'Apply',
   close: 'Close',
   ok: 'OK',
+  copy: 'Copy',
+  copied: 'Copied',
+  createCollection: 'Create collection',
+  localVariables: 'Local variables',
+  noVariableCollections: 'No variable collections',
+  selectLayerForJSX: 'Select a layer to see its JSX code',
   search: 'Search…',
-  noResults: 'No results'
+  noResults: 'No results',
+  share: 'Share'
 })

packages/vue/src/locales/ru.json

@@ -124,7 +124,14 @@
     "apply": "Применить",
     "close": "Закрыть",
     "ok": "ОК",
+    "copy": "Копировать",
+    "copied": "Скопировано",
+    "createCollection": "Создать коллекцию",
+    "localVariables": "Локальные переменные",
+    "noVariableCollections": "Нет коллекций переменных",
+    "selectLayerForJSX": "Выберите слой, чтобы увидеть его JSX-код",
     "search": "Поиск…",
-    "noResults": "Ничего не найдено"
+    "noResults": "Ничего не найдено",
+    "share": "Поделиться"
   }
 }

src/components/CodePanel.vue

@@ -6,7 +6,7 @@ import { useClipboard } from '@vueuse/core'
 import { computed, ref } from 'vue'
 
 import { selectionToJSX } from '@open-pencil/core'
-import { useSceneComputed } from '@open-pencil/vue'
+import { useI18n, useSceneComputed } from '@open-pencil/vue'
 
 import { useEditorStore } from '@/stores/editor'
 
@@ -14,6 +14,7 @@ import type { JSXFormat } from '@open-pencil/core'
 
 const store = useEditorStore()
 const { copy, copied } = useClipboard({ copiedDuring: 2000 })
+const { dialogs } = useI18n()
 const jsxFormat = ref<JSXFormat>('openpencil')
 
 function toggleFormat() {
@@ -44,7 +45,7 @@ function copyCode() {
     data-test-id="code-panel-empty"
     class="flex flex-1 items-center justify-center px-4 text-center"
   >
-    <span class="text-xs text-muted">Select a layer to see its JSX code</span>
+    <span class="text-xs text-muted">{{ dialogs.selectLayerForJSX }}</span>
   </div>
 
   <div v-else data-test-id="code-panel" class="flex min-h-0 flex-1 flex-col">
@@ -69,7 +70,7 @@ function copyCode() {
       >
         <icon-lucide-check v-if="copied" class="size-3 text-green-400" />
         <icon-lucide-copy v-else class="size-3" />
-        {{ copied ? 'Copied' : 'Copy' }}
+        {{ copied ? dialogs.copied : dialogs.copy }}
       </button>
     </div>
 

src/components/MobileHud.vue

@@ -27,7 +27,7 @@ import { toast } from '@/utils/toast'
 import { useEditorStore } from '@/stores/editor'
 import Tip from '@/components/ui/Tip.vue'
 import { colorToCSS } from '@open-pencil/core'
-import { useEditorCommands } from '@open-pencil/vue'
+import { useEditorCommands, useI18n } from '@open-pencil/vue'
 import { toolIcons } from '@/utils/tools'
 import { initials } from '@/utils/text'
 
@@ -37,6 +37,7 @@ const router = useRouter()
 const collab = useCollabInjected()
 const store = useEditorStore()
 const { copy } = useClipboard()
+const { dialogs } = useI18n()
 
 const collabState = computed(() => collab?.state.value ?? DEFAULT_COLLAB_STATE)
 const collabPeers = computed(() => collab?.remotePeers.value ?? [])
@@ -217,7 +218,7 @@ const onlineCount = computed(() => collabPeers.value.length + 1)
         @click="onShare"
       >
         <icon-lucide-share-2 class="size-3.5 text-surface" />
-        <span class="text-xs text-surface">Share</span>
+        <span class="text-xs text-surface">{{ dialogs.share }}</span>
       </button>
 
       <DropdownMenuRoot>

src/components/VariablesDialog.vue

@@ -14,7 +14,7 @@ import {
 } from 'reka-ui'
 import { FlexRender } from '@tanstack/vue-table'
 
-import { useVariablesEditor } from '@open-pencil/vue'
+import { useI18n, useVariablesEditor } from '@open-pencil/vue'
 
 import IconHash from '~icons/lucide/hash'
 import IconPalette from '~icons/lucide/palette'
@@ -35,6 +35,8 @@ const variableTypeIcons: Record<string, Component> = {
   BOOLEAN: IconToggleLeft
 }
 
+const { dialogs } = useI18n()
+
 const ctx = useVariablesEditor({
   colorInput: ColorInput,
   icons: variableTypeIcons,
@@ -50,7 +52,7 @@ const ctx = useVariablesEditor({
       <DialogContent data-test-id="variables-dialog" :class="cls.content">
         <div v-if="!ctx.hasCollections" class="flex flex-1 flex-col">
           <div class="flex shrink-0 items-center justify-between border-b border-border px-4 py-3">
-            <DialogTitle class="text-sm font-semibold text-surface">Local variables</DialogTitle>
+            <DialogTitle class="text-sm font-semibold text-surface">{{ dialogs.localVariables }}</DialogTitle>
             <DialogClose
               class="flex size-6 cursor-pointer items-center justify-center rounded border-none bg-transparent text-muted hover:bg-hover hover:text-surface"
             >
@@ -59,13 +61,13 @@ const ctx = useVariablesEditor({
           </div>
           <div class="flex flex-1 items-center justify-center">
             <div class="text-center">
-              <p class="text-sm text-muted">No variable collections</p>
+              <p class="text-sm text-muted">{{ dialogs.noVariableCollections }}</p>
               <button
                 data-test-id="variables-create-collection"
                 class="mt-2 cursor-pointer rounded bg-hover px-3 py-1.5 text-xs text-surface hover:bg-border"
                 @click="ctx.addCollection"
               >
-                Create collection
+                {{ dialogs.createCollection }}
               </button>
             </div>
           </div>
@@ -107,10 +109,10 @@ const ctx = useVariablesEditor({
                     v-model="ctx.searchTerm.value"
                     data-test-id="variables-search-input"
                     class="w-24 border-none bg-transparent text-xs text-surface outline-none placeholder:text-muted"
-                    placeholder="Search"
+                    :placeholder="dialogs.search"
                   />
                 </div>
-                <Tip label="Add collection">
+                <Tip :label="dialogs.createCollection">
                   <button
                     data-test-id="variables-add-collection"
                     class="flex size-6 cursor-pointer items-center justify-center rounded border-none bg-transparent text-muted hover:bg-hover hover:text-surface"