@saasicat/ui-vue 0.16.0 → 0.17.0

package/src/components/bundle-editor/bundle-version-status.ts

@@ -6,7 +6,12 @@
 
 import type { BundleVersionRow, PlanVersionRow } from '@saasicat/types';
 
-import { SA_INTL_LOCALES, type SaLocale } from '../../client/i18n/locale.js';
+import {
+    SA_INTL_LOCALES,
+    builtinLocaleOf,
+    type SaBuiltinLocale,
+    type SaLocale,
+} from '../../client/i18n/locale.js';
 import { bundlesMessages } from '../../client/i18n/messages/bundles.js';
 
 /** UI lifecycle status of a single BundleVersion. */
@@ -67,7 +72,7 @@ export function bundleStatusMeta(
     status: BundleAggregateStatus,
     locale: SaLocale,
 ): BundleStatusMeta {
-    const texts = bundlesMessages[locale].status[status];
+    const texts = bundlesMessages[builtinLocaleOf(locale)].status[status];
     return { label: texts.label, cls: BUNDLE_STATUS_CLASS[status], tooltip: texts.tooltip };
 }
 
@@ -155,10 +160,13 @@ export function formatDate(iso: string | null | undefined, locale: SaLocale): st
     const day = iso.slice(0, 10);
     const [y, m, d] = day.split('-');
     if (!y || !m || !d) return iso;
-    return new Date(`${day}T00:00:00Z`).toLocaleDateString(SA_INTL_LOCALES[locale], {
-        day: '2-digit',
-        month: '2-digit',
-        year: 'numeric',
-        timeZone: 'UTC',
-    });
+    return new Date(`${day}T00:00:00Z`).toLocaleDateString(
+        SA_INTL_LOCALES[locale as SaBuiltinLocale] ?? locale,
+        {
+            day: '2-digit',
+            month: '2-digit',
+            year: 'numeric',
+            timeZone: 'UTC',
+        },
+    );
 }

package/src/pages-standard/AdminLayout.vue

@@ -189,7 +189,7 @@ const emit = defineEmits<{
 
 const route = useRoute();
 const msg = useSaMessages('shell');
-const { locale } = useSuperAdminI18n();
+const { messages } = useSuperAdminI18n();
 // Provided by createSuperAdminApp(); null when the layout is mounted
 // stand-alone. Grouped into one object so the names cannot shadow the
 // same-named props inside the template.
@@ -227,13 +227,17 @@ const navSections = computed<NavSection[]>(() => {
         // section, so that the UI has no flicker before manifest load.
         return [{ title: null, items: [...props.staticNavFallback, ...props.localItems] }];
     }
+    // The resolved catalog rather than the bare locale: it carries
+    // `i18n.overrides` and languages the app added itself, neither of which the
+    // builder can look up from a locale code.
+    const nav = messages.value.nav;
     const routes = buildRoutes(m, {
-        locale: locale.value,
+        nav,
         standardPageRoutes: props.standardPageRoutes,
         standardPageNavSection: props.standardPageNavSection,
         availableExtensions: props.availableExtensions,
     });
-    const sections = buildSidebar(routes, props.sectionOrder ?? defaultSectionOrder(locale.value));
+    const sections = buildSidebar(routes, props.sectionOrder ?? defaultSectionOrder(nav));
     const result: NavSection[] = sections.map((s) => ({
         title: s.section,
         items: s.items.map((item) => ({

package/src/pages-standard/SuperAdminLoginPage.vue

@@ -98,6 +98,7 @@ import {
     useSuperAdminLoginAdapter,
 } from '../vue/use-super-admin-context.js';
 import { getJson } from '../client/http-json.js';
+import { isProductionBoot, resolveLoginBranding } from '../client/login-branding.js';
 import { useSaMessages } from '../vue/use-super-admin-i18n.js';
 import LocaleSwitcher from '../components/LocaleSwitcher.vue';
 import SuperAdminSetupWizard from './SuperAdminSetupWizard.vue';
@@ -128,18 +129,16 @@ const errorMessage = ref<string | null>(null);
 // wizard instead of the login. Apps without a SetupModule return 404 → stays false.
 const needsSetup = ref(false);
 
-const brandName = computed(() => boot.boot.value?.project.displayName ?? brand.name);
-const tagText = computed(() => boot.boot.value?.project.label ?? brand.tag ?? 'SuperAdmin');
-const iconText = computed(() => boot.boot.value?.project.icon ?? brand.logoText);
-const logoUrl = computed(() => boot.boot.value?.project.logoUrl ?? null);
-const bootEnvironment = computed(() => {
-    const env = boot.boot.value?.project.environment;
-    return env && env !== 'production' ? env : null;
-});
+const branding = computed(() => resolveLoginBranding(boot.boot.value, brand));
+const brandName = computed(() => branding.value.name);
+const tagText = computed(() => branding.value.tag);
+const iconText = computed(() => branding.value.icon);
+const logoUrl = computed(() => branding.value.logoUrl);
+const bootEnvironment = computed(() => branding.value.environment);
 
 const devHint = computed(() => {
     if (!adapter.devHint) return null;
-    if (boot.boot.value?.project.environment === 'production') return null;
+    if (isProductionBoot(boot.boot.value)) return null;
     return adapter.devHint;
 });
 

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

@@ -4,7 +4,7 @@
 // labels/colors/coverage calculations.
 
 import type { CatalogEntryI18n, DiscoveryStatus } from '@saasicat/types';
-import { DEFAULT_SA_LOCALE, type SaLocale } from '../../client/i18n/locale.js';
+import { DEFAULT_SA_LOCALE, builtinLocaleOf, type SaLocale } from '../../client/i18n/locale.js';
 import { commonMessages } from '../../client/i18n/messages/common.js';
 import { discoveryMessages } from '../../client/i18n/messages/discovery.js';
 
@@ -43,19 +43,19 @@ export function localeFull(locale: string): string {
 }
 
 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;
+    if (f === 'label') return discoveryMessages[builtinLocaleOf(locale)].trans.fieldLabel;
+    if (f === 'description') return commonMessages[builtinLocaleOf(locale)].description;
+    return discoveryMessages[builtinLocaleOf(locale)].unit;
 }
 
 // ─── Approval lifecycle (#20): status display + state machine ────────────────
 
 export function statusLabel(status: DiscoveryStatus, locale: SaLocale = DEFAULT_SA_LOCALE): string {
-    return discoveryMessages[locale].statusLabels[status];
+    return discoveryMessages[builtinLocaleOf(locale)].statusLabels[status];
 }
 
 export function statusHint(status: DiscoveryStatus, locale: SaLocale = DEFAULT_SA_LOCALE): string {
-    return discoveryMessages[locale].statusHints[status];
+    return discoveryMessages[builtinLocaleOf(locale)].statusHints[status];
 }
 
 export interface ReviewAction {
@@ -71,7 +71,7 @@ export function primaryReviewAction(
     status: DiscoveryStatus,
     locale: SaLocale = DEFAULT_SA_LOCALE,
 ): ReviewAction {
-    const actions = discoveryMessages[locale].reviewActions;
+    const actions = discoveryMessages[builtinLocaleOf(locale)].reviewActions;
     switch (status) {
         case 'pending':
             return { label: actions.approve, to: 'approved', emphasized: true };
@@ -89,7 +89,7 @@ export function reviewMenuActions(
     status: DiscoveryStatus,
     locale: SaLocale = DEFAULT_SA_LOCALE,
 ): ReviewAction[] {
-    const actions = discoveryMessages[locale].reviewActions;
+    const actions = discoveryMessages[builtinLocaleOf(locale)].reviewActions;
     const markObsolete: ReviewAction = {
         label: actions.markObsolete,
         to: 'obsolete',

package/src/pages-standard/plan-versions/format.ts

@@ -1,13 +1,13 @@
 // Formatting helper retained for the reusable catalog-history timeline.
 
 import { formatMessage } from '../../client/i18n/format.js';
-import { DEFAULT_SA_LOCALE, type SaLocale } from '../../client/i18n/locale.js';
+import { DEFAULT_SA_LOCALE, builtinLocaleOf, type SaLocale } from '../../client/i18n/locale.js';
 import { planVersionsMessages } from '../../client/i18n/messages/plan-versions.js';
 
 const EMPTY_VALUE = '—';
 
 function texts(locale: SaLocale) {
-    return planVersionsMessages[locale].format;
+    return planVersionsMessages[builtinLocaleOf(locale)].format;
 }
 
 export function formatRelative(

package/src/vue/use-super-admin-i18n.ts

@@ -2,10 +2,11 @@
 // provides one instance; pages, components and composables read it via
 // `useSuperAdminI18n()` or the namespace-focused `useSaMessages()`.
 //
-// Design: no vue-i18n dependency. The platform ships complete typed catalogs
-// (`SA_MESSAGES`, German reference + English translation) and consumers switch
-// the locale or override individual strings through the bootstrap option.
-// Without a provider the composables fall back to a shared German instance, so
+// Design: no vue-i18n dependency. The platform ships two complete typed
+// catalogs (German reference + English translation) and nothing beyond that —
+// which of them an app offers, which languages it adds and what wording it
+// prefers is decided through the bootstrap option and resolved in `SaCatalog`.
+// Without a provider the composables fall back to a shared default instance, so
 // isolated mounts and unit tests need no setup.
 
 import {
@@ -21,11 +22,11 @@ import {
 } from 'vue';
 
 import {
-    DEFAULT_SA_LOCALE,
-    SA_INTL_LOCALES,
-    isSaLocale,
-    resolveMessages,
+    createSaCatalog,
+    type SaCatalog,
     type SaLocale,
+    type SaLocaleDefinition,
+    type SaLocaleOption,
     type SaMessages,
     type SaMessagesOverrides,
 } from '../client/i18n/index.js';
@@ -40,20 +41,35 @@ export interface SuperAdminI18n {
     intlLocale: ComputedRef<string>;
     /**
      * Whether the shell renders its language switcher. `false` when the app
-     * opted out or when `locale` cannot be written to — a switcher that cannot
-     * change anything is worse than none.
+     * opted out, when `locale` cannot be written to, or when only one language
+     * is on offer — a switcher that cannot change anything is worse than none.
      */
     switcherEnabled: boolean;
+    /** Locales the switcher offers, in order, with their display names. */
+    availableLocales: readonly SaLocaleOption[];
 }
 
 export interface SuperAdminI18nOptions {
     /**
-     * Starting UI locale, default `'de'` — the shell's switcher lets the user
-     * pick another one, and a stored pick outranks this. Pass a `Ref` when the
-     * app wants to keep control (e.g. a user-profile setting).
+     * Starting UI locale — the shell's switcher lets the user pick another one,
+     * and a stored pick outranks this. Defaults to `'de'` when offered,
+     * otherwise to the first entry of `locales`. Pass a `Ref` when the app wants
+     * to keep control (e.g. a user-profile setting).
      */
     locale?: SaLocale | Ref<SaLocale>;
-    /** Per-locale string overrides layered over the platform catalog. */
+    /**
+     * Languages to offer, in switcher order. Default: German, English and
+     * everything in `additionalLocales`. Narrow it to ship a single language —
+     * the switcher then hides itself.
+     */
+    locales?: readonly SaLocale[];
+    /**
+     * Languages the app adds on top of the two the platform ships, keyed by
+     * locale code. Untranslated keys fall back to `basedOn`, so a partial
+     * catalog is usable from the first key onwards.
+     */
+    additionalLocales?: Readonly<Record<string, SaLocaleDefinition>>;
+    /** Per-locale string overrides layered over whatever catalog applies. */
     overrides?: Partial<Record<SaLocale, SaMessagesOverrides>>;
     /**
      * Remembers the locale picked in the header switcher across reloads,
@@ -62,10 +78,15 @@ export interface SuperAdminI18nOptions {
      */
     persist?: boolean;
     /**
-     * Storage adapter for `persist`. Defaults to `defaultKvStore()`. Pass a
-     * key-prefixing wrapper when several apps share one origin.
+     * Storage adapter for `persist`. Defaults to `defaultKvStore()`.
      */
     storage?: KvStore;
+    /**
+     * Prefix for the persisted key, mirroring `createPlatformLoaders`. Set it
+     * when several apps share one origin and must not inherit each other's
+     * language pick.
+     */
+    storageKeyPrefix?: string;
     /**
      * Renders the language switcher in the shell chrome, default `true`. Set
      * `false` for a deployment that ships one language. A readonly `locale`
@@ -84,11 +105,16 @@ export const SUPER_ADMIN_I18N_KEY: InjectionKey<SuperAdminI18n> = Symbol.for(
 );
 
 export function createSuperAdminI18n(options: SuperAdminI18nOptions = {}): SuperAdminI18n {
-    const locale = isRef(options.locale) ? options.locale : createOwnedLocale(options);
-    const messages = computed(() =>
-        resolveMessages(locale.value, options.overrides?.[locale.value]),
+    const catalog = createSaCatalog(options);
+    const locale = isRef(options.locale) ? options.locale : createOwnedLocale(options, catalog);
+    // An unknown locale would otherwise render an empty shell. Falling back
+    // keeps the UI usable and makes the app's mistake visible as "wrong
+    // language" rather than "blank page".
+    const active = computed(() =>
+        catalog.has(locale.value) ? locale.value : catalog.defaultLocale,
     );
-    const intlLocale = computed(() => SA_INTL_LOCALES[locale.value]);
+    const messages = computed(() => catalog.messagesFor(active.value));
+    const intlLocale = computed(() => catalog.intlLocaleFor(active.value));
     // A readonly ref (typically a `computed` derived from a profile setting)
     // silently swallows writes, so the switcher would be a dead control. The
     // type system permits it — TypeScript ignores `readonly` when checking
@@ -98,7 +124,8 @@ export function createSuperAdminI18n(options: SuperAdminI18nOptions = {}): Super
         locale,
         messages,
         intlLocale,
-        switcherEnabled: (options.switcher ?? true) && writable,
+        switcherEnabled: (options.switcher ?? true) && writable && catalog.locales.length > 1,
+        availableLocales: catalog.locales,
     };
 }
 
@@ -107,14 +134,18 @@ export function createSuperAdminI18n(options: SuperAdminI18nOptions = {}): Super
  * `locale` option, because that option is the app's default while the stored
  * value is the user's explicit pick in the switcher.
  */
-function createOwnedLocale(options: SuperAdminI18nOptions): Ref<SaLocale> {
-    if (options.persist === false) {
-        return ref(options.locale ?? DEFAULT_SA_LOCALE);
-    }
+function createOwnedLocale(options: SuperAdminI18nOptions, catalog: SaCatalog): Ref<SaLocale> {
+    const initial = options.locale ?? catalog.defaultLocale;
+    if (options.persist === false) return ref(initial);
+
     const storage = options.storage ?? defaultKvStore();
-    const stored = storage.get(SA_LOCALE_STORAGE_KEY);
-    const locale = ref(isSaLocale(stored) ? stored : (options.locale ?? DEFAULT_SA_LOCALE));
-    watch(locale, (next) => storage.set(SA_LOCALE_STORAGE_KEY, next));
+    const key = `${options.storageKeyPrefix ?? ''}${SA_LOCALE_STORAGE_KEY}`;
+    const stored = storage.get(key);
+    // The stored value is checked against what this app offers, not against the
+    // built-ins: an app that dropped a language must not be pushed back into it
+    // by a pick from before.
+    const locale = ref(stored && catalog.has(stored) ? stored : initial);
+    watch(locale, (next) => storage.set(key, next));
     return locale;
 }