@saasicat/ui-vue 0.4.0 → 0.6.0

package/src/pages-standard/bundles-page/BundleDetailPanel.vue

@@ -1,13 +1,13 @@
 <template>
     <div class="sa-bd-grid">
         <div class="sa-bd-col">
-            <div class="sa-bd-section-label">Stammdaten</div>
+            <div class="sa-bd-section-label">{{ msg.fields.masterData }}</div>
             <div class="sa-bundles__form">
                 <q-input
                     :model-value="editForm.label"
                     outlined
                     dense
-                    label="Label"
+                    :label="msg.fields.label"
                     @update:model-value="(value) => patchEditForm({ label: String(value ?? '') })"
                 />
                 <q-input
@@ -16,7 +16,7 @@
                     dense
                     type="textarea"
                     autogrow
-                    label="Beschreibung"
+                    :label="common.description"
                     @update:model-value="
                         (value) => patchEditForm({ description: String(value ?? '') })
                     "
@@ -25,7 +25,7 @@
                     :model-value="editForm.icon"
                     outlined
                     dense
-                    label="Icon"
+                    :label="common.icon"
                     @update:model-value="(value) => patchEditForm({ icon: String(value ?? '') })"
                 />
                 <q-input
@@ -33,7 +33,7 @@
                     outlined
                     dense
                     type="number"
-                    label="Sortier-Reihenfolge"
+                    :label="common.sortOrder"
                     @update:model-value="
                         (value) => patchEditForm({ sortOrder: Number(value ?? 0) })
                     "
@@ -41,11 +41,11 @@
             </div>
 
             <div class="sa-bd-section-label sa-bd-section-label--mt">
-                <span>Übersetzungen</span>
-                <span class="sa-bd-section-count">{{ translatableLocales.length }} Sprache(n)</span>
+                <span>{{ msg.detail.translations }}</span>
+                <span class="sa-bd-section-count">{{ languageCount }}</span>
             </div>
             <div v-if="translatableLocales.length === 0" class="sa-bd-i18n-hint">
-                Keine weiteren Sprachen aktiv — werden im Marketing-Catalog aktiviert.
+                {{ msg.detail.noTranslatableLocales }}
             </div>
             <div v-for="lng in translatableLocales" :key="lng" class="sa-bd-i18n-block">
                 <div class="sa-bd-i18n-head">
@@ -54,14 +54,14 @@
                         v-if="!i18nDraft[lng]?.label || !i18nDraft[lng]?.description"
                         class="sa-bd-i18n-fallback"
                     >
-                        Fallback aus DE
+                        {{ msg.detail.fallbackFromDe }}
                     </span>
                 </div>
                 <q-input
                     outlined
                     dense
                     :model-value="i18nDraft[lng]?.label || ''"
-                    :placeholder="`Label (Fallback: „${editForm.label}“)`"
+                    :placeholder="labelPlaceholder"
                     @update:model-value="
                         (value) => emit('setI18n', lng, 'label', String(value ?? ''))
                     "
@@ -72,7 +72,7 @@
                     type="textarea"
                     autogrow
                     :model-value="i18nDraft[lng]?.description || ''"
-                    :placeholder="`Beschreibung (Fallback aus DE)`"
+                    :placeholder="msg.detail.descriptionPlaceholder"
                     @update:model-value="
                         (value) => emit('setI18n', lng, 'description', String(value ?? ''))
                     "
@@ -83,7 +83,7 @@
                 class="sa-bd-save"
                 unelevated
                 color="primary"
-                label="Stammdaten & Übersetzungen speichern"
+                :label="msg.detail.save"
                 :loading="editSubmitting"
                 @click="emit('submitEdit')"
             />
@@ -112,10 +112,7 @@
                 @save="(data) => emit('inlineSave', bundle.id, selectedVersion!.id, data)"
                 @discard="emit('discardVersion', bundle.id, selectedVersion!.id)"
             />
-            <div v-else class="sa-bd-empty-row">
-                Noch keine Version. Lege eine neue Version an, um Features, Quotas &amp; Pricing zu
-                kuratieren.
-            </div>
+            <div v-else class="sa-bd-empty-row">{{ msg.detail.noVersion }}</div>
 
             <div class="sa-bd-version-actions">
                 <q-btn
@@ -123,7 +120,7 @@
                     unelevated
                     color="positive"
                     icon="rocket_launch"
-                    label="Diese Version publishen"
+                    :label="msg.detail.publishVersion"
                     @click="emit('publishVersion', selectedVersion)"
                 />
                 <q-btn
@@ -132,7 +129,7 @@
                     dense
                     color="negative"
                     icon="delete"
-                    label="Bundle soft-deleten"
+                    :label="msg.detail.softDelete"
                     @click="emit('deleteBundle', bundle)"
                 />
             </div>
@@ -141,6 +138,7 @@
 </template>
 
 <script setup lang="ts">
+import { computed } from 'vue';
 import type {
     BundleRow,
     BundleVersionRow,
@@ -154,6 +152,8 @@ import BundleVersionInlineEditor from '../../components/bundle-editor/BundleVers
 import BundleVersionStrip from '../../components/bundle-editor/BundleVersionStrip.vue';
 import type { FeatureMeta } from '../../components/bundle-editor/BundleFeaturesEditor.vue';
 import type { QuotaMeta } from '../../components/bundle-editor/catalog-i18n.js';
+import { formatMessage } from '../../client/i18n/format.js';
+import { useSaMessages } from '../../vue/use-super-admin-i18n.js';
 import type { BundleEditForm } from './types.js';
 
 const props = defineProps<{
@@ -187,6 +187,16 @@ const emit = defineEmits<{
     deleteBundle: [bundle: BundleRow];
 }>();
 
+const msg = useSaMessages('bundles');
+const common = useSaMessages('common');
+
+const languageCount = computed(() =>
+    formatMessage(msg.value.detail.languageCount, { count: props.translatableLocales.length }),
+);
+const labelPlaceholder = computed(() =>
+    formatMessage(msg.value.detail.labelPlaceholder, { label: props.editForm.label }),
+);
+
 function patchEditForm(patch: Partial<BundleEditForm>): void {
     emit('update:editForm', { ...props.editForm, ...patch });
 }

package/src/pages-standard/bundles-page/BundlesFilterBar.vue

@@ -5,7 +5,7 @@
             dense
             outlined
             clearable
-            placeholder="Bundle-Key oder Label suchen …"
+            :placeholder="msg.filterBar.searchPlaceholder"
             class="sa-bundles__search"
             @update:model-value="emitQuery"
         >
@@ -26,6 +26,7 @@
 
 <script setup lang="ts">
 import type { BundlesStatusFilter, BundlesStatusFilterOption } from './types.js';
+import { useSaMessages } from '../../vue/use-super-admin-i18n.js';
 
 defineProps<{
     query: string;
@@ -33,6 +34,8 @@ defineProps<{
     statusFilterOptions: BundlesStatusFilterOption[];
 }>();
 
+const msg = useSaMessages('bundles');
+
 const emit = defineEmits<{
     'update:query': [value: string];
     'update:statusFilter': [value: BundlesStatusFilter];

package/src/pages-standard/bundles-page/BundlesHeader.vue

@@ -1,11 +1,8 @@
 <template>
     <header class="sa-bundles__head">
         <div>
-            <h1 class="sa-bundles__title">Bundles</h1>
-            <p class="sa-bundles__sub">
-                Produktgruppen aus Features &amp; Quotas — verwendet in Plänen. Bundles werden im
-                SuperAdmin kuratiert.
-            </p>
+            <h1 class="sa-bundles__title">{{ msg.header.title }}</h1>
+            <p class="sa-bundles__sub">{{ msg.header.subtitle }}</p>
         </div>
         <div class="sa-bundles__head-actions">
             <q-select
@@ -17,7 +14,7 @@
                 emit-value
                 map-options
                 class="sa-bundles__locale"
-                label="Anzeige-Sprache"
+                :label="msg.header.displayLocale"
                 @update:model-value="(value) => emit('update:displayLocale', String(value))"
             >
                 <template #prepend><q-icon name="translate" size="18px" /></template>
@@ -26,11 +23,11 @@
                 unelevated
                 color="primary"
                 icon="add"
-                label="Neues Bundle"
+                :label="msg.header.newBundle"
                 @click="emit('create')"
             />
             <q-btn flat icon="refresh" :loading="loading" @click="emit('refresh')">
-                <q-tooltip>Liste neu laden</q-tooltip>
+                <q-tooltip>{{ msg.header.reload }}</q-tooltip>
             </q-btn>
         </div>
     </header>
@@ -39,6 +36,8 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 
+import { useSaMessages } from '../../vue/use-super-admin-i18n.js';
+
 // The language selector controls which locale feature/quota labels are resolved
 // on the create form and in the detail view (fallback locale → DE → key). The default is the
 // default locale (DE); further options come from the active project locales.
@@ -55,6 +54,8 @@ const emit = defineEmits<{
     'update:displayLocale': [locale: string];
 }>();
 
+const msg = useSaMessages('bundles');
+
 const localeOptions = computed(() =>
     props.locales.map((locale) => ({ label: locale.toUpperCase(), value: locale })),
 );

package/src/pages-standard/bundles-page/BundlesKpis.vue

@@ -1,32 +1,35 @@
 <template>
     <div class="sa-bundles__kpis">
         <div class="sa-bundles__kpi">
-            <div class="sa-bundles__kpi-label">Bundles gesamt</div>
+            <div class="sa-bundles__kpi-label">{{ msg.kpis.total }}</div>
             <div class="sa-bundles__kpi-value">{{ bundlesTotal }}</div>
-            <div class="sa-bundles__kpi-sub">
-                {{ liveCount }} live · {{ scheduledBundlesCount }} mit geplanter Version
-            </div>
+            <div class="sa-bundles__kpi-sub">{{ totalSub }}</div>
         </div>
         <div class="sa-bundles__kpi">
-            <div class="sa-bundles__kpi-label">Geplante Versionen</div>
+            <div class="sa-bundles__kpi-label">{{ msg.kpis.scheduled }}</div>
             <div class="sa-bundles__kpi-value">{{ totalScheduledVersions }}</div>
-            <div class="sa-bundles__kpi-sub">zukünftig aktiv · noch nicht verkaufbar</div>
+            <div class="sa-bundles__kpi-sub">{{ msg.kpis.scheduledSub }}</div>
         </div>
         <div class="sa-bundles__kpi">
-            <div class="sa-bundles__kpi-label">Offene Drafts</div>
+            <div class="sa-bundles__kpi-label">{{ msg.kpis.drafts }}</div>
             <div class="sa-bundles__kpi-value">{{ totalDraftVersions }}</div>
-            <div class="sa-bundles__kpi-sub">{{ draftBundlesCount }} Bundle(s) ohne Publish</div>
+            <div class="sa-bundles__kpi-sub">{{ draftsSub }}</div>
         </div>
         <div class="sa-bundles__kpi">
-            <div class="sa-bundles__kpi-label">Mit Übersetzung</div>
+            <div class="sa-bundles__kpi-label">{{ msg.kpis.translated }}</div>
             <div class="sa-bundles__kpi-value">{{ translatedCount }}</div>
-            <div class="sa-bundles__kpi-sub">{{ localesCount }} aktive Sprache(n) im Projekt</div>
+            <div class="sa-bundles__kpi-sub">{{ translatedSub }}</div>
         </div>
     </div>
 </template>
 
 <script setup lang="ts">
-defineProps<{
+import { computed } from 'vue';
+
+import { formatMessage } from '../../client/i18n/format.js';
+import { useSaMessages } from '../../vue/use-super-admin-i18n.js';
+
+const props = defineProps<{
     bundlesTotal: number;
     liveCount: number;
     scheduledBundlesCount: number;
@@ -36,4 +39,19 @@ defineProps<{
     translatedCount: number;
     localesCount: number;
 }>();
+
+const msg = useSaMessages('bundles');
+
+const totalSub = computed(() =>
+    formatMessage(msg.value.kpis.totalSub, {
+        live: props.liveCount,
+        scheduled: props.scheduledBundlesCount,
+    }),
+);
+const draftsSub = computed(() =>
+    formatMessage(msg.value.kpis.draftsSub, { count: props.draftBundlesCount }),
+);
+const translatedSub = computed(() =>
+    formatMessage(msg.value.kpis.translatedSub, { count: props.localesCount }),
+);
 </script>

package/src/pages-standard/discovery-page/CatalogEntryTransPanel.vue

@@ -5,11 +5,11 @@
             <div class="sa-trans-lang__head">
                 <span class="sa-trans-lang__code">{{ defaultLocale.toUpperCase() }}</span>
                 <span class="sa-trans-lang__name">{{ localeFull(defaultLocale) }}</span>
-                <span class="sa-trans-lang__badge">Source</span>
+                <span class="sa-trans-lang__badge">{{ msg.trans.sourceBadge }}</span>
             </div>
             <div class="sa-trans-fields">
                 <div v-for="f in fields" :key="f" class="sa-trans-field">
-                    <label class="sa-trans-field__cap">{{ i18nFieldLabel(f) }}</label>
+                    <label class="sa-trans-field__cap">{{ i18nFieldLabel(f, uiLocale) }}</label>
                     <q-input
                         v-if="f !== 'unit'"
                         dense
@@ -21,7 +21,7 @@
                     />
                     <div v-else class="sa-trans-locked">
                         {{ entry.unit || '—' }}
-                        <span class="sa-trans-locked__hint">aus Code</span>
+                        <span class="sa-trans-locked__hint">{{ msg.trans.unitFromCode }}</span>
                     </div>
                 </div>
             </div>
@@ -38,23 +38,23 @@
                     no-caps
                     size="sm"
                     icon="content_copy"
-                    label="Aus DE"
+                    :label="msg.trans.copyFromDefault"
                     class="sa-trans-lang__copy"
                     @click="copyFromDefault(lng)"
                 >
-                    <q-tooltip>Leere Felder aus der Default-Locale übernehmen</q-tooltip>
+                    <q-tooltip>{{ msg.trans.copyFromDefaultHint }}</q-tooltip>
                 </q-btn>
             </div>
             <div class="sa-trans-fields">
                 <div v-for="f in fields" :key="f" class="sa-trans-field">
-                    <label class="sa-trans-field__cap">{{ i18nFieldLabel(f) }}</label>
+                    <label class="sa-trans-field__cap">{{ i18nFieldLabel(f, uiLocale) }}</label>
                     <q-input
                         dense
                         outlined
                         :type="f === 'description' ? 'textarea' : 'text'"
                         :autogrow="f === 'description'"
                         :model-value="localeValue(lng, f)"
-                        :placeholder="baseValue(f) ? `Fallback: „${baseValue(f)}“` : '—'"
+                        :placeholder="fallbackPlaceholder(f)"
                         @update:model-value="(v) => onLocale(lng, f, String(v ?? ''))"
                     />
                 </div>
@@ -62,7 +62,7 @@
         </div>
 
         <div v-if="targetLocales.length === 0" class="sa-trans__empty">
-            Keine weiteren Sprachen aktiv — Sprachen werden im Marketing-Catalog aktiviert.
+            {{ msg.trans.noOtherLocales }}
         </div>
     </div>
 </template>
@@ -70,6 +70,8 @@
 <script setup lang="ts">
 import { computed, reactive } from 'vue';
 import type { CatalogEntryI18nFields } from '@saasicat/types';
+import { formatMessage } from '../../client/i18n/format.js';
+import { useSaMessages, useSuperAdminI18n } from '../../vue/use-super-admin-i18n.js';
 import {
     DISCOVERY_DEFAULT_LOCALE,
     i18nFieldLabel,
@@ -103,6 +105,10 @@ const emit = defineEmits<{
     'update:locale': [locale: string, patch: CatalogEntryI18nFields];
 }>();
 
+const msg = useSaMessages('discovery');
+// Renamed: `locale` is the catalog-entry data locale everywhere else in this file.
+const { locale: uiLocale } = useSuperAdminI18n();
+
 const targetLocales = computed(() => props.activeLocales.filter((l) => l !== props.defaultLocale));
 
 // Local input buffer: once a field has been edited, the draft wins over
@@ -124,6 +130,12 @@ function localeValue(locale: string, f: I18nField): string {
     return props.entry.i18n?.[locale]?.[f] ?? '';
 }
 
+/** Shows the default-locale value that a blank target field falls back to. */
+function fallbackPlaceholder(f: I18nField): string {
+    const base = baseValue(f);
+    return base ? formatMessage(msg.value.trans.fallbackPlaceholder, { value: base }) : '—';
+}
+
 function onBase(f: I18nField, value: string): void {
     if (f === 'unit') return;
     drafts[`b|${f}`] = value;

package/src/pages-standard/discovery-page/DiscoveryCapList.vue

@@ -1,8 +1,7 @@
 <template>
     <div v-if="capabilities.length === 0" class="sa-caps__empty">
         <q-icon name="warning" size="14px" />
-        Feature im Katalog ohne implementierende Capability — blockiert im blocking-Strict-Mode das
-        Plan-Publish.
+        {{ msg.capList.orphanFeature }}
     </div>
     <div v-else class="sa-caps">
         <div
@@ -37,7 +36,7 @@
                         v-if="cap.codeStatus === 'retired'"
                         class="sa-caps-row__flag sa-caps-row__flag--gone"
                     >
-                        aus Code entfernt
+                        {{ msg.capList.removedFromCode }}
                     </span>
                 </div>
                 <div class="sa-caps-row__meta">
@@ -59,6 +58,7 @@
 <script setup lang="ts">
 import type { CapabilityCatalogEntryRow } from '@saasicat/types';
 import { kindStyle } from './discovery-ui.js';
+import { useSaMessages } from '../../vue/use-super-admin-i18n.js';
 
 // Read-only Capability list: code facts from the scan (#20). Embedded in the
 // master-data subtab of the feature card as well as in the page's orphan bucket.
@@ -73,6 +73,8 @@ const props = defineProps<{
     newSince?: string | null;
 }>();
 
+const msg = useSaMessages('discovery');
+
 function isNew(cap: CapabilityCatalogEntryRow): boolean {
     return Boolean(props.newSince && cap.createdAt > props.newSince);
 }

package/src/pages-standard/discovery-page/DiscoveryFeatureCard.vue

@@ -7,34 +7,38 @@
                     <code class="sa-fc__key">{{ feature.featureKey }}</code>
                     <span class="sa-fc__label">{{ labelValue || feature.featureKey }}</span>
                     <span v-if="newCapsCount > 0" class="sa-fc__flag sa-fc__flag--new">
-                        {{ newCapsCount }} neu
+                        {{ newCapsLabel }}
                     </span>
                     <span v-if="deprecatedCapsCount > 0" class="sa-fc__flag sa-fc__flag--dep">
-                        {{ deprecatedCapsCount }} deprecated
+                        {{ deprecatedCapsLabel }}
                     </span>
                     <span
                         v-if="feature.successorKey"
                         class="sa-fc__flag sa-fc__flag--succ"
-                        :title="`ersetzt durch ${feature.successorKey}`"
+                        :title="replacedByLabel"
                     >
-                        ersetzt durch {{ feature.successorKey }}
+                        {{ replacedByLabel }}
                     </span>
                     <span
                         v-if="feature.replaces.length"
                         class="sa-fc__flag sa-fc__flag--repl"
-                        :title="`ersetzt: ${feature.replaces.join(', ')}`"
+                        :title="replacesLabel"
                     >
-                        ersetzt: {{ feature.replaces.join(', ') }}
+                        {{ replacesLabel }}
                     </span>
                 </div>
                 <div class="sa-fc__sub">
                     <template v-if="owners.length">
-                        <span class="sa-muted">Owner</span>
+                        <span class="sa-muted">{{ msg.owner }}</span>
                         {{ owners.join(', ') }}
                         <span class="sa-fc__dot">·</span>
                     </template>
                     {{ capabilities.length }}
-                    Capabilit{{ capabilities.length === 1 ? 'y' : 'ies' }}
+                    {{
+                        capabilities.length === 1
+                            ? msg.feature.capabilityOne
+                            : msg.feature.capabilityMany
+                    }}
                     <template v-if="tierValue">
                         <span class="sa-fc__dot">·</span>
                         <span class="sa-fc__tier">{{ tierValue }}</span>
@@ -65,34 +69,31 @@
             <div v-if="feature.discoveryStatus === 'outdated'" class="sa-fc__banner warn">
                 <q-icon name="warning" size="16px" />
                 <span>
-                    Die Implementierung hat sich seit der letzten Freigabe geändert. Bitte
-                    Stammdaten &amp; Capabilities prüfen und <b>erneut freigeben</b>.
+                    {{ msg.feature.outdatedBanner }} <b>{{ msg.reapproveEmphasis }}</b
+                    >.
                 </span>
             </div>
             <div v-if="feature.discoveryStatus === 'obsolete'" class="sa-fc__banner mute">
                 <q-icon name="info" size="16px" />
-                <span>
-                    Dieses Feature ist abgekündigt. Es sollte in neuen Plänen nicht mehr verwendet
-                    werden.
-                </span>
+                <span>{{ msg.feature.obsoleteBanner }}</span>
             </div>
 
             <q-tabs v-model="sub" dense align="left" class="sa-fc__subtabs">
-                <q-tab name="stamm" label="Stammdaten" />
-                <q-tab name="i18n" label="Übersetzungen" />
+                <q-tab name="stamm" :label="msg.feature.tabBaseData" />
+                <q-tab name="i18n" :label="msg.feature.tabTranslations" />
             </q-tabs>
 
             <div v-if="sub === 'stamm'" class="sa-fc__split">
                 <div class="sa-fc__split-col">
-                    <div class="sa-fc__split-head">Einstellungen</div>
+                    <div class="sa-fc__split-head">{{ msg.feature.settings }}</div>
                     <div class="sa-fc__fields">
                         <div class="sa-fc-field">
-                            <label class="sa-fc-field__cap">Icon (Quasar-Icon-Name)</label>
+                            <label class="sa-fc-field__cap">{{ msg.feature.iconLabel }}</label>
                             <q-input
                                 dense
                                 outlined
                                 :model-value="iconValue"
-                                placeholder="z. B. directions_car"
+                                :placeholder="msg.feature.iconPlaceholder"
                                 @update:model-value="(v) => onField('icon', String(v ?? ''))"
                             >
                                 <template #prepend>
@@ -101,7 +102,7 @@
                             </q-input>
                         </div>
                         <div class="sa-fc-field">
-                            <label class="sa-fc-field__cap">Tier</label>
+                            <label class="sa-fc-field__cap">{{ msg.feature.tierLabel }}</label>
                             <q-select
                                 dense
                                 outlined
@@ -117,10 +118,8 @@
                 </div>
                 <div class="sa-fc__split-col">
                     <div class="sa-fc__split-head">
-                        Code Capabilities
-                        <span class="sa-fc__split-count">
-                            {{ capabilities.length }} · read-only
-                        </span>
+                        {{ msg.feature.codeCapabilities }}
+                        <span class="sa-fc__split-count">{{ codeCapabilitiesCountLabel }}</span>
                     </div>
                     <DiscoveryCapList
                         :capabilities="capabilities"
@@ -156,6 +155,8 @@ import type {
 import CatalogEntryTransPanel from './CatalogEntryTransPanel.vue';
 import DiscoveryCapList from './DiscoveryCapList.vue';
 import DiscoveryStatusControl from './DiscoveryStatusControl.vue';
+import { formatMessage } from '../../client/i18n/format.js';
+import { useSaMessages } from '../../vue/use-super-admin-i18n.js';
 import {
     coverageClass,
     coveragePct,
@@ -189,6 +190,8 @@ const emit = defineEmits<{
 
 const TIER_OPTIONS = ['CORE', 'ADVANCED', 'PRO', 'ENTERPRISE'];
 
+const msg = useSaMessages('discovery');
+
 const sub = ref<'stamm' | 'i18n'>('stamm');
 
 // Local input buffer: once a field has been edited, the draft wins over the
@@ -232,6 +235,22 @@ const deprecatedCapsCount = computed(
     () => props.capabilities.filter((c) => c.codeStatus === 'deprecated').length,
 );
 
+const newCapsLabel = computed(() =>
+    formatMessage(msg.value.feature.newCaps, { count: newCapsCount.value }),
+);
+const deprecatedCapsLabel = computed(() =>
+    formatMessage(msg.value.feature.deprecatedCaps, { count: deprecatedCapsCount.value }),
+);
+const replacedByLabel = computed(() =>
+    formatMessage(msg.value.replacedBy, { key: props.feature.successorKey ?? '' }),
+);
+const replacesLabel = computed(() =>
+    formatMessage(msg.value.replaces, { keys: props.feature.replaces.join(', ') }),
+);
+const codeCapabilitiesCountLabel = computed(() =>
+    formatMessage(msg.value.feature.codeCapabilitiesCount, { count: props.capabilities.length }),
+);
+
 const targetLocales = computed(() =>
     props.activeLocales.filter((l) => l !== DISCOVERY_DEFAULT_LOCALE),
 );

package/src/pages-standard/discovery-page/DiscoveryHeader.vue

@@ -1,10 +1,9 @@
 <template>
     <header class="sa-discovery__head">
         <div>
-            <h1 class="sa-discovery__title">Discovery</h1>
+            <h1 class="sa-discovery__title">{{ msg.title }}</h1>
             <p class="sa-discovery__sub">
-                Capabilities, die der Code <b>aktuell</b> implementiert. Discovery ist Ist-Zustand —
-                die Freigabe für Produkt &amp; Marketing erfolgt im Review.
+                {{ msg.subtitleLead }} <b>{{ msg.subtitleEmphasis }}</b> {{ msg.subtitleTail }}
             </p>
         </div>
         <div class="sa-discovery__head-actions">
@@ -12,7 +11,7 @@
                 unelevated
                 color="primary"
                 icon="bolt"
-                label="Discovery neu ausführen"
+                :label="msg.runDiscovery"
                 :loading="loading"
                 @click="emit('runDiscovery')"
             />
@@ -21,6 +20,8 @@
 </template>
 
 <script setup lang="ts">
+import { useSaMessages } from '../../vue/use-super-admin-i18n.js';
+
 defineProps<{
     loading: boolean;
 }>();
@@ -28,4 +29,6 @@ defineProps<{
 const emit = defineEmits<{
     (e: 'runDiscovery'): void;
 }>();
+
+const msg = useSaMessages('discovery');
 </script>