@saasicat/ui-vue 0.4.0 → 0.6.0

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

@@ -1,41 +1,42 @@
 <template>
     <div class="sa-discovery__kpis">
         <div class="sa-discovery__kpi">
-            <div class="sa-discovery__kpi-label">Features gesamt</div>
+            <div class="sa-discovery__kpi-label">{{ msg.kpi.featuresTotal }}</div>
             <div class="sa-discovery__kpi-value">{{ featuresCount }}</div>
-            <div class="sa-discovery__kpi-sub">
-                aggregiert aus {{ capabilitiesCount }} Capabilities
-            </div>
+            <div class="sa-discovery__kpi-sub">{{ featuresTotalSub }}</div>
         </div>
         <div class="sa-discovery__kpi good">
-            <div class="sa-discovery__kpi-label">Freigegeben</div>
+            <div class="sa-discovery__kpi-label">{{ msg.kpi.approved }}</div>
             <div class="sa-discovery__kpi-value">{{ approvedCount }}</div>
-            <div class="sa-discovery__kpi-sub">planungsbereit</div>
+            <div class="sa-discovery__kpi-sub">{{ msg.kpi.approvedSub }}</div>
         </div>
         <div class="sa-discovery__kpi" :class="{ warn: pendingCount > 0 }">
-            <div class="sa-discovery__kpi-label">Ausstehend</div>
+            <div class="sa-discovery__kpi-label">{{ msg.kpi.pending }}</div>
             <div class="sa-discovery__kpi-value">{{ pendingCount }}</div>
-            <div class="sa-discovery__kpi-sub">noch nicht freigegeben</div>
+            <div class="sa-discovery__kpi-sub">{{ msg.kpi.pendingSub }}</div>
         </div>
         <div class="sa-discovery__kpi">
-            <div class="sa-discovery__kpi-label">Veraltet / Obsolet</div>
+            <div class="sa-discovery__kpi-label">{{ msg.kpi.outdated }}</div>
             <div class="sa-discovery__kpi-value">{{ outdatedCount + obsoleteCount }}</div>
-            <div class="sa-discovery__kpi-sub">
-                {{ outdatedCount }} outdated · {{ obsoleteCount }} obsolete
-            </div>
+            <div class="sa-discovery__kpi-sub">{{ outdatedSub }}</div>
         </div>
         <div class="sa-discovery__kpi" :class="{ bad: orphanCount > 0 }">
-            <div class="sa-discovery__kpi-label">Orphans</div>
+            <div class="sa-discovery__kpi-label">{{ msg.kpi.orphans }}</div>
             <div class="sa-discovery__kpi-value">{{ orphanCount }}</div>
-            <div class="sa-discovery__kpi-sub">Capabilities ohne Feature</div>
+            <div class="sa-discovery__kpi-sub">{{ msg.orphansTitle }}</div>
         </div>
     </div>
 </template>
 
 <script setup lang="ts">
+import { computed } from 'vue';
+
+import { formatMessage } from '../../client/i18n/format.js';
+import { useSaMessages } from '../../vue/use-super-admin-i18n.js';
+
 // Feature-centric KPI bar (#20 Slice 1, sim layout): the approval
 // counts refer to features, no longer to capability reviews.
-defineProps<{
+const props = defineProps<{
     featuresCount: number;
     capabilitiesCount: number;
     approvedCount: number;
@@ -44,4 +45,16 @@ defineProps<{
     obsoleteCount: number;
     orphanCount: number;
 }>();
+
+const msg = useSaMessages('discovery');
+
+const featuresTotalSub = computed(() =>
+    formatMessage(msg.value.kpi.featuresTotalSub, { count: props.capabilitiesCount }),
+);
+const outdatedSub = computed(() =>
+    formatMessage(msg.value.kpi.outdatedSub, {
+        outdated: props.outdatedCount,
+        obsolete: props.obsoleteCount,
+    }),
+);
 </script>

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

@@ -15,26 +15,25 @@
                     <span
                         v-if="quota.successorKey"
                         class="sa-qc__flag sa-qc__flag--succ"
-                        :title="`ersetzt durch ${quota.successorKey}`"
+                        :title="replacedByLabel"
                     >
-                        ersetzt durch {{ quota.successorKey }}
+                        {{ replacedByLabel }}
                     </span>
                     <span
                         v-if="quota.replaces.length"
                         class="sa-qc__flag sa-qc__flag--repl"
-                        :title="`ersetzt: ${quota.replaces.join(', ')}`"
+                        :title="replacesLabel"
                     >
-                        ersetzt: {{ quota.replaces.join(', ') }}
+                        {{ replacesLabel }}
                     </span>
                 </div>
                 <div class="sa-qc__sub">
-                    Einheit <code>{{ quota.unit }}</code> · UsageProvider
+                    {{ msg.unit }} <code>{{ quota.unit }}</code> · {{ msg.quota.usageProvider }}
                     <code v-if="quota.usageProvider">{{ quota.usageProvider }}</code>
-                    <span v-else class="sa-qc__missing">fehlt</span>
+                    <span v-else class="sa-qc__missing">{{ msg.quota.usageProviderMissing }}</span>
                 </div>
                 <div v-if="!quota.usageProvider" class="sa-qc__warning">
-                    Eine harte Quota ohne UsageProvider ist nicht deploy-fähig (Preflight, SPEC_V2
-                    §6.3).
+                    {{ msg.quota.noUsageProviderWarning }}
                 </div>
             </div>
 
@@ -61,8 +60,8 @@
             <div v-if="quota.discoveryStatus === 'outdated'" class="sa-qc__banner">
                 <q-icon name="warning" size="16px" />
                 <span>
-                    Die code-abgeleiteten Quota-Fakten (Einheit/Enforcement/Provider) haben sich
-                    seit der letzten Freigabe geändert — bitte prüfen und <b>erneut freigeben</b>.
+                    {{ msg.quota.outdatedBanner }} <b>{{ msg.reapproveEmphasis }}</b
+                    >.
                 </span>
             </div>
             <CatalogEntryTransPanel
@@ -88,6 +87,8 @@ import type {
 } from '@saasicat/types';
 import CatalogEntryTransPanel from './CatalogEntryTransPanel.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,
@@ -114,11 +115,20 @@ const emit = defineEmits<{
     'quota-locale': [key: string, locale: string, patch: CatalogEntryI18nFields];
 }>();
 
+const msg = useSaMessages('discovery');
+
 // Draft buffer for the header label — the fields themselves are buffered by
 // the CatalogEntryTransPanel; here only so the title follows along while typing.
 const drafts = reactive<{ label?: string }>({});
 const labelValue = computed(() => drafts.label ?? props.quota.label ?? '');
 
+const replacedByLabel = computed(() =>
+    formatMessage(msg.value.replacedBy, { key: props.quota.successorKey ?? '' }),
+);
+const replacesLabel = computed(() =>
+    formatMessage(msg.value.replaces, { keys: props.quota.replaces.join(', ') }),
+);
+
 /** Mirror base edits from the translation panel + bubble them up. */
 function onTransBase(patch: { label?: string; description?: string }): void {
     if (patch.label !== undefined) drafts.label = patch.label;

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

@@ -1,8 +1,8 @@
 <template>
     <div class="sa-stc" @click.stop>
         <span class="sa-review" :class="`sa-review--${status}`">
-            {{ STATUS_META[status].label }}
-            <q-tooltip>{{ STATUS_META[status].hint }}</q-tooltip>
+            {{ statusLabel(status, locale) }}
+            <q-tooltip>{{ statusHint(status, locale) }}</q-tooltip>
         </span>
         <q-btn
             dense
@@ -15,7 +15,7 @@
             :loading="busy"
             @click="emit('set-status', primary.to)"
         >
-            <q-tooltip>{{ STATUS_META[primary.to].hint }}</q-tooltip>
+            <q-tooltip>{{ statusHint(primary.to, locale) }}</q-tooltip>
         </q-btn>
         <q-btn v-if="menu.length" dense flat round size="sm" icon="more_horiz">
             <q-menu auto-close anchor="bottom right" self="top right">
@@ -39,7 +39,8 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 import type { DiscoveryStatus } from '@saasicat/types';
-import { primaryReviewAction, reviewMenuActions, STATUS_META } from './discovery-ui.js';
+import { useSuperAdminI18n } from '../../vue/use-super-admin-i18n.js';
+import { primaryReviewAction, reviewMenuActions, statusHint, statusLabel } from './discovery-ui.js';
 
 // StatusControl (#20, design sim): status chip + contextual primary action
 // + kebab menu for the remaining lifecycle transitions. Shared by the feature
@@ -56,8 +57,10 @@ const emit = defineEmits<{
     'set-status': [target: DiscoveryStatus];
 }>();
 
-const primary = computed(() => primaryReviewAction(props.status));
-const menu = computed(() => reviewMenuActions(props.status));
+const { locale } = useSuperAdminI18n();
+
+const primary = computed(() => primaryReviewAction(props.status, locale.value));
+const menu = computed(() => reviewMenuActions(props.status, locale.value));
 </script>
 
 <style scoped>

package/src/pages-standard/discovery-page/discovery-ui.ts

@@ -3,11 +3,10 @@
 // `<script setup>` allows no named exports and the cards share the same
 // labels/colors/coverage calculations.
 
-import type {
-    CapabilityCodeStatus,
-    CatalogEntryI18n,
-    DiscoveryStatus,
-} from '@saasicat/types';
+import type { CatalogEntryI18n, DiscoveryStatus } from '@saasicat/types';
+import { DEFAULT_SA_LOCALE, type SaLocale } from '../../client/i18n/locale.js';
+import { commonMessages } from '../../client/i18n/messages/common.js';
+import { discoveryMessages } from '../../client/i18n/messages/discovery.js';
 
 /** Translatable fields of a catalog entry. */
 export type I18nField = 'label' | 'description' | 'unit';
@@ -43,30 +42,21 @@ export function localeFull(locale: string): string {
     return LOCALE_NAMES[locale]?.full ?? locale;
 }
 
-export function i18nFieldLabel(f: I18nField): string {
-    return f === 'label' ? 'Label' : f === 'description' ? 'Beschreibung' : 'Einheit';
+export function i18nFieldLabel(f: I18nField, locale: SaLocale = DEFAULT_SA_LOCALE): string {
+    if (f === 'label') return discoveryMessages[locale].trans.fieldLabel;
+    if (f === 'description') return commonMessages[locale].description;
+    return discoveryMessages[locale].unit;
 }
 
 // ─── Approval lifecycle (#20): status display + state machine ────────────────
 
-export const STATUS_META: Record<DiscoveryStatus, { label: string; hint: string }> = {
-    pending: {
-        label: 'Pending',
-        hint: 'Im Code gefunden, noch nicht freigegeben — steht der Planung nicht zur Verfügung.',
-    },
-    approved: {
-        label: 'Approved',
-        hint: 'Für Pläne, Bundles & Marketing freigegeben.',
-    },
-    outdated: {
-        label: 'Outdated',
-        hint: 'Code hat sich seit der Freigabe geändert — bitte erneut prüfen und freigeben.',
-    },
-    obsolete: {
-        label: 'Obsolete',
-        hint: 'Abgekündigt — nicht mehr verwenden, in neuen Plänen ausblenden.',
-    },
-};
+export function statusLabel(status: DiscoveryStatus, locale: SaLocale = DEFAULT_SA_LOCALE): string {
+    return discoveryMessages[locale].statusLabels[status];
+}
+
+export function statusHint(status: DiscoveryStatus, locale: SaLocale = DEFAULT_SA_LOCALE): string {
+    return discoveryMessages[locale].statusHints[status];
+}
 
 export interface ReviewAction {
     label: string;
@@ -77,53 +67,51 @@ export interface ReviewAction {
 }
 
 /** Primary action per status (design sim `StatusControl`, #20). */
-export function primaryReviewAction(status: DiscoveryStatus): ReviewAction {
+export function primaryReviewAction(
+    status: DiscoveryStatus,
+    locale: SaLocale = DEFAULT_SA_LOCALE,
+): ReviewAction {
+    const actions = discoveryMessages[locale].reviewActions;
     switch (status) {
         case 'pending':
-            return { label: 'Freigeben', to: 'approved', emphasized: true };
+            return { label: actions.approve, to: 'approved', emphasized: true };
         case 'approved':
-            return { label: 'Freigabe entziehen', to: 'pending', emphasized: false };
+            return { label: actions.revoke, to: 'pending', emphasized: false };
         case 'outdated':
-            return { label: 'Erneut freigeben', to: 'approved', emphasized: true };
+            return { label: actions.reapprove, to: 'approved', emphasized: true };
         case 'obsolete':
-            return { label: 'Reaktivieren', to: 'pending', emphasized: false };
+            return { label: actions.reactivate, to: 'pending', emphasized: false };
     }
 }
 
 /** Kebab menu actions per status (design sim `StatusControl`, #20). */
-export function reviewMenuActions(status: DiscoveryStatus): ReviewAction[] {
+export function reviewMenuActions(
+    status: DiscoveryStatus,
+    locale: SaLocale = DEFAULT_SA_LOCALE,
+): ReviewAction[] {
+    const actions = discoveryMessages[locale].reviewActions;
+    const markObsolete: ReviewAction = {
+        label: actions.markObsolete,
+        to: 'obsolete',
+        emphasized: false,
+        danger: true,
+    };
     switch (status) {
         case 'pending':
-            return [
-                { label: 'Als obsolet markieren', to: 'obsolete', emphasized: false, danger: true },
-            ];
+            return [markObsolete];
         case 'approved':
             return [
-                { label: 'Als veraltet markieren', to: 'outdated', emphasized: false },
-                { label: 'Als obsolet markieren', to: 'obsolete', emphasized: false, danger: true },
+                { label: actions.markOutdated, to: 'outdated', emphasized: false },
+                markObsolete,
             ];
         case 'outdated':
-            return [
-                { label: 'Freigabe entziehen', to: 'pending', emphasized: false },
-                { label: 'Als obsolet markieren', to: 'obsolete', emphasized: false, danger: true },
-            ];
+            return [{ label: actions.revoke, to: 'pending', emphasized: false }, markObsolete];
         case 'obsolete':
             return [];
     }
 }
 
-// ─── Capability code status (read-only code facts, #20) ──────────────────────
-
-const CODE_STATUS_LABELS: Record<CapabilityCodeStatus, string> = {
-    active: 'Aktiv',
-    experimental: 'Experimental',
-    deprecated: 'Deprecated',
-    retired: 'Retired',
-};
-
-export function codeStatusLabel(status: CapabilityCodeStatus): string {
-    return CODE_STATUS_LABELS[status] ?? status;
-}
+// ─── Capability kind styling (read-only code facts, #20) ─────────────────────
 
 const KIND_COLORS: Record<string, string> = {
     endpoint: '#2563eb',

package/src/pages-standard/marketing-catalog/MarketingCatalogAdmin.vue

@@ -2,21 +2,18 @@
     <div class="mc-admin">
         <div class="mc-admin-head">
             <div style="flex: 1">
-                <div class="mc-admin-title">Marketing-Verwaltung</div>
-                <div class="mc-admin-sub">
-                    Sichtbarkeit, Reihenfolge &amp; Highlight-Badges pro Plan · Edits gehen direkt
-                    live
-                </div>
+                <div class="mc-admin-title">{{ msg.tabs.admin }}</div>
+                <div class="mc-admin-sub">{{ msg.admin.subtitle }}</div>
             </div>
         </div>
 
         <div class="mc-admin-grid">
             <div class="mc-admin-thead">
-                <div>Plan</div>
-                <div>Sichtbar</div>
-                <div>Badge</div>
-                <div>Priorität</div>
-                <div>Highlight</div>
+                <div>{{ msg.admin.colPlan }}</div>
+                <div>{{ msg.admin.colVisible }}</div>
+                <div>{{ msg.admin.colBadge }}</div>
+                <div>{{ msg.admin.colPriority }}</div>
+                <div>{{ msg.admin.colHighlight }}</div>
                 <div></div>
             </div>
 
@@ -45,7 +42,9 @@
                             v-if="row.publishedVersions.length > 1"
                             class="mc-version-tabs"
                             role="tablist"
-                            :aria-label="`Plan-Versionen für ${row.plan.label}`"
+                            :aria-label="
+                                formatMessage(msg.admin.versionTabsLabel, { plan: row.plan.label })
+                            "
                         >
                             <button
                                 v-for="v in row.publishedVersions"
@@ -107,23 +106,23 @@
                     </div>
                     <div class="mc-admin-row-end">
                         <span v-if="!row.liveVersion" class="mc-chip mc-chip--muted">
-                            keine Live-Version
+                            {{ msg.admin.noLiveVersion }}
                         </span>
                         <span v-else-if="!row.m.visible" class="mc-chip mc-chip--muted">
-                            versteckt
+                            {{ msg.admin.hidden }}
                         </span>
                         <span v-else-if="row.m.highlight" class="mc-chip mc-chip--featured">
-                            Featured
+                            {{ msg.admin.featured }}
                         </span>
-                        <span v-else class="mc-chip mc-chip--live">live</span>
+                        <span v-else class="mc-chip mc-chip--live">{{ msg.admin.live }}</span>
                         <button
                             v-if="row.liveVersion"
                             type="button"
                             class="mc-expand-btn"
                             :title="
                                 expandedKey === row.plan.planKey
-                                    ? 'Schließen'
-                                    : 'Teaser, Trial & Top-Features bearbeiten'
+                                    ? common.close
+                                    : msg.admin.expandTitle
                             "
                             @click="$emit('toggle-expand', row)"
                         >
@@ -151,19 +150,27 @@
                         <div class="mc-expand-col">
                             <div class="mc-expand-sec">
                                 <div class="mc-field-head">
-                                    <label class="mc-expand-label">Plan-Name</label>
+                                    <label class="mc-expand-label">
+                                        {{ msg.admin.planNameLabel }}
+                                    </label>
                                     <span
                                         v-if="activeLocale !== defaultLocale"
                                         class="mc-source-hint"
                                     >
                                         {{ defaultLocale.toUpperCase() }}:
-                                        <em>„{{ row.plan.label }}"</em>
+                                        <em>
+                                            {{
+                                                formatMessage(msg.admin.planNameSourceValue, {
+                                                    label: row.plan.label,
+                                                })
+                                            }}
+                                        </em>
                                     </span>
                                 </div>
                                 <div v-if="activeLocale === defaultLocale" class="mc-locked-value">
                                     <span>{{ row.plan.label }}</span>
                                     <span class="mc-locked-hint">
-                                        wird in den Plan-Stammdaten gepflegt
+                                        {{ msg.admin.planNameLocked }}
                                     </span>
                                 </div>
                                 <input
@@ -178,29 +185,31 @@
                                     v-if="activeLocale !== defaultLocale && !row.m.displayLabel"
                                     class="mc-expand-hint"
                                 >
-                                    leer · Fallback auf „{{ row.plan.label }}" wird verwendet
+                                    {{
+                                        formatMessage(msg.admin.planNameFallbackHint, {
+                                            label: row.plan.label,
+                                        })
+                                    }}
                                 </div>
                             </div>
 
                             <div class="mc-expand-sec">
-                                <label class="mc-expand-label">Teaser-Text</label>
+                                <label class="mc-expand-label">{{ msg.admin.teaserLabel }}</label>
                                 <textarea
                                     class="mc-field mc-field--area"
                                     rows="2"
-                                    placeholder="Kurzbeschreibung für die Pricing-Page …"
+                                    :placeholder="msg.admin.teaserPlaceholder"
                                     :value="row.m.description"
                                     :disabled="busy"
                                     @change="
                                         $emit('patch', row, { description: textValue($event) })
                                     "
                                 />
-                                <div class="mc-expand-hint">
-                                    erscheint unter dem Plannamen in der Vorschau
-                                </div>
+                                <div class="mc-expand-hint">{{ msg.admin.teaserHint }}</div>
                             </div>
 
                             <div class="mc-expand-sec">
-                                <label class="mc-expand-label">Kostenlose Testphase</label>
+                                <label class="mc-expand-label">{{ msg.admin.trialLabel }}</label>
                                 <div class="mc-trial-row">
                                     <label class="mc-toggle">
                                         <input
@@ -216,7 +225,11 @@
                                         <span />
                                     </label>
                                     <span class="mc-trial-label">
-                                        {{ row.m.trialEnabled ? 'Trial aktiv' : 'Kein Trial' }}
+                                        {{
+                                            row.m.trialEnabled
+                                                ? msg.admin.trialOn
+                                                : msg.admin.trialOff
+                                        }}
                                     </span>
                                     <span class="mc-trial-days">
                                         <input
@@ -233,19 +246,18 @@
                                                 })
                                             "
                                         />
-                                        <span class="mc-trial-unit">Tage</span>
+                                        <span class="mc-trial-unit">
+                                            {{ msg.admin.trialDaysUnit }}
+                                        </span>
                                     </span>
                                 </div>
-                                <div class="mc-expand-hint">
-                                    CTA-Text generiert sich automatisch („Jetzt
-                                    {{ row.m.trialDays }} Tage testen“).
-                                </div>
+                                <div class="mc-expand-hint">{{ trialCtaHint(row) }}</div>
                             </div>
 
                             <div class="mc-expand-sec">
-                                <label class="mc-expand-label"
-                                    >CTA-Text überschreiben (optional)</label
-                                >
+                                <label class="mc-expand-label">
+                                    {{ msg.admin.ctaOverrideLabel }}
+                                </label>
                                 <input
                                     class="mc-field"
                                     :placeholder="autoCtaText(row)"
@@ -257,7 +269,7 @@
                                         })
                                     "
                                 />
-                                <div class="mc-expand-hint">leer lassen für Auto-Text</div>
+                                <div class="mc-expand-hint">{{ msg.admin.ctaOverrideHint }}</div>
                             </div>
                         </div>
 
@@ -265,10 +277,14 @@
                             <div class="mc-expand-sec">
                                 <div class="mc-tf-head">
                                     <label class="mc-expand-label" style="margin: 0">
-                                        Top-Features
+                                        {{ msg.topFeatures }}
                                     </label>
                                     <span class="mc-expand-hint" style="margin-left: auto">
-                                        {{ editFeatures.length }} Einträge
+                                        {{
+                                            formatMessage(msg.admin.topFeatureCount, {
+                                                count: editFeatures.length,
+                                            })
+                                        }}
                                     </span>
                                 </div>
 
@@ -280,7 +296,7 @@
                                             :placeholder="
                                                 f.key
                                                     ? resolveComponentLabel(f.key)
-                                                    : 'z. B. Beitragsverwaltung'
+                                                    : msg.admin.featureLabelPlaceholder
                                             "
                                             :value="f.label"
                                             :disabled="busy"
@@ -291,7 +307,7 @@
                                         />
                                         <input
                                             class="mc-field mc-tf-strong"
-                                            placeholder="Highlight, z. B. bis 100"
+                                            :placeholder="msg.admin.featureStrongPlaceholder"
                                             :value="f.strong"
                                             :disabled="busy"
                                             @input="
@@ -303,7 +319,7 @@
                                             <button
                                                 type="button"
                                                 class="mc-iconbtn"
-                                                title="Nach oben"
+                                                :title="msg.admin.moveUp"
                                                 :disabled="i === 0 || busy"
                                                 @click="$emit('move-feature', row, i, -1)"
                                             >
@@ -312,7 +328,7 @@
                                             <button
                                                 type="button"
                                                 class="mc-iconbtn"
-                                                title="Nach unten"
+                                                :title="msg.admin.moveDown"
                                                 :disabled="i === editFeatures.length - 1 || busy"
                                                 @click="$emit('move-feature', row, i, 1)"
                                             >
@@ -321,7 +337,7 @@
                                             <button
                                                 type="button"
                                                 class="mc-iconbtn mc-iconbtn--danger"
-                                                title="Entfernen"
+                                                :title="common.remove"
                                                 :disabled="busy"
                                                 @click="$emit('remove-feature', row, i)"
                                             >
@@ -339,8 +355,7 @@
                                         </div>
                                     </div>
                                     <div v-if="editFeatures.length === 0" class="mc-tf-empty">
-                                        Noch keine Top-Features — füge Plan-Komponenten oder freien
-                                        Text hinzu.
+                                        {{ msg.admin.topFeaturesEmpty }}
                                     </div>
                                 </div>
 
@@ -361,20 +376,26 @@
                                         >
                                             <path d="M12 5v14M5 12h14" />
                                         </svg>
-                                        <span>Eigener Eintrag</span>
+                                        <span>{{ msg.admin.addCustomFeature }}</span>
                                     </button>
                                     <div
                                         v-if="suggestionsFor(row).length > 0"
                                         class="mc-tf-suggestions"
                                     >
-                                        <span class="mc-expand-hint">aus Plan-Komponenten:</span>
+                                        <span class="mc-expand-hint">
+                                            {{ msg.admin.suggestionsLabel }}
+                                        </span>
                                         <button
                                             v-for="(s, i) in suggestionsFor(row)"
                                             :key="i"
                                             type="button"
                                             class="mc-tf-chip"
                                             :disabled="busy"
-                                            :title="`„${s.label}“ als Top-Feature übernehmen`"
+                                            :title="
+                                                formatMessage(msg.admin.addSuggestionTitle, {
+                                                    label: s.label,
+                                                })
+                                            "
                                             @click="$emit('add-suggestion', row, s)"
                                         >
                                             <svg
@@ -403,6 +424,8 @@
 
 <script setup lang="ts">
 import type { MarketingTopFeature, PlanRow, PlanVersionRow } from '@saasicat/types';
+import { formatMessage } from '../../client/i18n/format.js';
+import { useSaMessages } from '../../vue/use-super-admin-i18n.js';
 import type { FeatureSuggestion, MarketingRow, ResolvedMarketing } from './types.js';
 
 defineProps<{
@@ -434,6 +457,15 @@ defineEmits<{
     (e: 'add-suggestion', row: MarketingRow, suggestion: FeatureSuggestion): void;
 }>();
 
+const msg = useSaMessages('marketing');
+const common = useSaMessages('common');
+
+/** Hint below the trial toggle — shows the auto CTA text for the set trial days. */
+function trialCtaHint(row: MarketingRow): string {
+    const cta = formatMessage(msg.value.cta.trial, { days: row.m.trialDays });
+    return formatMessage(msg.value.admin.ctaAutoHint, { cta });
+}
+
 function textValue(event: Event): string {
     return (event.target as HTMLInputElement | HTMLTextAreaElement | null)?.value ?? '';
 }