bak

src/components/WelcomeDialog.vue

@@ -12,7 +12,8 @@ import {
   listRecentProjects,
   type StoredProject,
 } from '@/lib/projectStore'
-import { Modal } from '@/components/ui'
+import { confirmDialog, Modal } from '@/components/ui'
+import { t } from '@/i18n'
 
 const props = defineProps<{ modelValue: boolean }>()
 const emit = defineEmits<{
@@ -43,7 +44,9 @@ function formatDate(ts: number): string {
     d.getMonth() === now.getMonth() &&
     d.getDate() === now.getDate()
   if (sameDay) {
-    return `heute ${d.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}`
+    return t('welcome.today', {
+      time: d.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }),
+    })
   }
   return d.toLocaleString([], {
     day: '2-digit',
@@ -65,7 +68,13 @@ function openProject(p: StoredProject) {
 
 async function removeProject(e: MouseEvent, p: StoredProject) {
   e.stopPropagation()
-  if (!confirm(`"${p.name}" wirklich löschen?`)) return
+  const ok = await confirmDialog({
+    title: t('welcome.deleteDialog.title'),
+    message: t('welcome.deleteDialog.message', { name: p.name }),
+    confirmLabel: t('welcome.deleteDialog.confirm'),
+    variant: 'danger',
+  })
+  if (!ok) return
   await deleteStoredProject(p.id)
   await reload()
 }
@@ -108,14 +117,14 @@ watch(
   >
     <template #header>
       <div class="hdr-text">
-        <h2>Willkommen bei Animatr</h2>
-        <p class="sub">Zuletzt bearbeitete Projekte</p>
+        <h2>{{ t('welcome.heading') }}</h2>
+        <p class="sub">{{ t('welcome.subheading') }}</p>
       </div>
     </template>
     <div class="body">
-            <div v-if="loading" class="empty">Laden…</div>
+            <div v-if="loading" class="empty">{{ t('welcome.loading') }}</div>
             <div v-else-if="!recents.length" class="empty">
-              Keine gespeicherten Projekte vorhanden.
+              {{ t('welcome.empty') }}
             </div>
             <ul v-else class="recents">
               <li
@@ -131,12 +140,12 @@ watch(
                 <div class="meta">
                   <div class="name">{{ p.name }}</div>
                   <div class="sub-info">
-                    {{ layerCount(p) }} Layer · {{ formatDate(p.savedAt) }}
+                    {{ t('welcome.layerCount', { n: layerCount(p) }) }} · {{ formatDate(p.savedAt) }}
                   </div>
                 </div>
                 <button
                   class="del"
-                  title="Projekt löschen"
+                  :title="t('welcome.deleteTooltip')"
                   @click="removeProject($event, p)"
                 >
                   <PhTrash :size="13" />
@@ -147,15 +156,15 @@ watch(
     <template #footer>
       <button class="ftr-btn" @click="startFresh">
         <PhPlus :size="13" weight="bold" />
-        Neues Projekt
+        {{ t('welcome.newProject') }}
       </button>
       <button class="ftr-btn" @click="importFile">
         <PhFileArrowUp :size="13" />
-        Datei importieren…
+        {{ t('welcome.importFile') }}
       </button>
       <button class="ftr-btn" @click="exportFile">
         <PhDownloadSimple :size="13" />
-        Aktuelles exportieren
+        {{ t('welcome.exportCurrent') }}
       </button>
     </template>
   </Modal>