(mostly) redundant localization on frontend

web/projects/marketplace/src/pages/list/categories/categories.component.html

@@ -8,7 +8,7 @@
     </div>
     <span class="category-title" [tuiSkeleton]="categories ? false : 3">
       {{
-        cat.key === 'ai' ? (cat.key | uppercase) : (cat.value.name | titlecase)
+        cat.key === 'ai' ? (cat.key | uppercase) : (cat.value.name | localize | titlecase)
       }}
     </span>
   </button>

web/projects/marketplace/src/pages/list/categories/categories.module.ts

@@ -2,12 +2,13 @@ import { TuiIcon, TuiAppearance } from '@taiga-ui/core'
 import { CommonModule } from '@angular/common'
 import { NgModule } from '@angular/core'
 import { TuiSkeleton } from '@taiga-ui/kit'
+import { LocalizePipe } from '@start9labs/shared'
 
 import { CategoriesComponent } from './categories.component'
 import { RouterModule } from '@angular/router'
 
 @NgModule({
-  imports: [RouterModule, CommonModule, TuiAppearance, TuiIcon, TuiSkeleton],
+  imports: [RouterModule, CommonModule, TuiAppearance, TuiIcon, TuiSkeleton, LocalizePipe],
   declarations: [CategoriesComponent],
   exports: [CategoriesComponent],
 })

web/projects/marketplace/src/pages/show/dependencies/dependency-item.component.ts

@@ -1,7 +1,7 @@
 import { KeyValue } from '@angular/common'
-import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
+import { ChangeDetectionStrategy, Component, inject, Input } from '@angular/core'
 import { RouterModule } from '@angular/router'
-import { ExverPipesModule, i18nPipe } from '@start9labs/shared'
+import { ExverPipesModule, i18nPipe, i18nService } from '@start9labs/shared'
 import { T } from '@start9labs/start-sdk'
 import { TuiAvatar, TuiLineClamp } from '@taiga-ui/kit'
 import { MarketplacePkgBase } from '../../../types'
@@ -97,6 +97,8 @@ import { MarketplacePkgBase } from '../../../types'
   imports: [RouterModule, TuiAvatar, ExverPipesModule, TuiLineClamp, i18nPipe],
 })
 export class MarketplaceDepItemComponent {
+  private readonly i18nService = inject(i18nService)
+
   @Input({ required: true })
   pkg!: MarketplacePkgBase
 
@@ -109,6 +111,7 @@ export class MarketplaceDepItemComponent {
   }
 
   getTitle(key: string): string {
-    return this.pkg.dependencyMetadata[key]?.title || key
+    const title = this.pkg.dependencyMetadata[key]?.title
+    return title ? this.i18nService.localize(title) : key
   }
 }

web/projects/marketplace/src/pages/show/hero.component.ts

@@ -1,5 +1,6 @@
 import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
 import { SharedPipesModule, TickerComponent } from '@start9labs/shared'
+import { T } from '@start9labs/start-sdk'
 
 @Component({
   selector: 'marketplace-package-hero',
@@ -125,7 +126,7 @@ export class MarketplacePackageHeroComponent {
     id: string
     title: string
     version: string
-    description: { short: string }
+    description: { short: T.LocaleString }
     icon: string
   }
 

web/projects/marketplace/src/pages/show/release-notes.component.ts

@@ -1,5 +1,5 @@
 import { ChangeDetectionStrategy, Component, input } from '@angular/core'
-import { MarkdownPipe } from '@start9labs/shared'
+import { LocalizePipe, MarkdownPipe } from '@start9labs/shared'
 import { NgDompurifyPipe } from '@taiga-ui/dompurify'
 import { MarketplacePkgBase } from '../../types'
 
@@ -9,7 +9,7 @@ import { MarketplacePkgBase } from '../../types'
     <div class="background-border box-shadow-lg shadow-color-light">
       <div class="box-container">
         <h2 class="additional-detail-title">New in {{ pkg().version }}</h2>
-        <p [innerHTML]="pkg().releaseNotes | markdown | dompurify"></p>
+        <p [innerHTML]="pkg().releaseNotes | localize | markdown | dompurify"></p>
       </div>
     </div>
   `,
@@ -21,7 +21,7 @@ import { MarketplacePkgBase } from '../../types'
     }
   `,
   changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [NgDompurifyPipe, MarkdownPipe],
+  imports: [NgDompurifyPipe, MarkdownPipe, LocalizePipe],
 })
 export class MarketplaceReleaseNotesComponent {
   readonly pkg = input.required<MarketplacePkgBase>()

web/projects/shared/src/i18n/i18n.service.ts

@@ -1,6 +1,7 @@
 import { inject, Injectable, signal } from '@angular/core'
 import { TuiLanguageName, TuiLanguageSwitcherService } from '@taiga-ui/i18n'
 import { I18N, I18N_LOADER, I18N_STORAGE } from './i18n.providers'
+import { T } from '@start9labs/start-sdk'
 
 export const languages = ['en_US', 'es_ES', 'de_DE', 'fr_FR', 'pl_PL'] as const
 export type Languages = (typeof languages)[number]
@@ -37,6 +38,14 @@ export class i18nService extends TuiLanguageSwitcherService {
     )
   }
 
+  localize(string: T.LocaleString): string {
+    if (typeof string === 'string') return string
+
+    return (
+      string[this.lang] ?? string['en_US'] ?? Object.values(string)[0] ?? ''
+    )
+  }
+
   setLang(language: Languages = 'en_US'): void {
     const tuiLang = LANGUAGE_TO_TUI[language]
     const current = this.language

web/projects/shared/src/i18n/localize.pipe.ts

@@ -0,0 +1,16 @@
+import { inject, Injectable, Pipe, PipeTransform } from '@angular/core'
+import { i18nService } from './i18n.service'
+import { T } from '@start9labs/start-sdk'
+
+@Pipe({
+  name: 'localize',
+  pure: false,
+})
+@Injectable({ providedIn: 'root' })
+export class LocalizePipe implements PipeTransform {
+  private readonly i18nService = inject(i18nService)
+
+  transform(string: T.LocaleString): string {
+    return this.i18nService.localize(string)
+  }
+}

web/projects/shared/src/public-api.ts

@@ -18,6 +18,7 @@ export * from './directives/safe-links.directive'
 export * from './i18n/i18n.pipe'
 export * from './i18n/i18n.providers'
 export * from './i18n/i18n.service'
+export * from './i18n/localize.pipe'
 
 export * from './pipes/exver/exver.module'
 export * from './pipes/exver/exver.pipe'

web/projects/ui/src/app/routes/portal/routes/marketplace/components/controls.component.ts

@@ -14,6 +14,7 @@ import {
   Exver,
   ExverPipesModule,
   i18nPipe,
+  i18nService,
   LoadingService,
   sameUrl,
 } from '@start9labs/shared'
@@ -122,6 +123,7 @@ export class MarketplaceControlsComponent {
   private readonly router = inject(Router)
   private readonly marketplace = inject(MarketplaceService)
   private readonly api = inject(ApiService)
+  private readonly i18n = inject(i18nService)
 
   readonly pkg = input.required<Pick<MarketplacePkg, KEYS>>()
 
@@ -148,7 +150,7 @@ export class MarketplaceControlsComponent {
     const originalUrl = localPkg?.registry || null
 
     if (!localPkg) {
-      if (await this.alerts.alertInstall(this.pkg().alerts.install || '')) {
+      if (await this.alerts.alertInstall(this.i18n.localize(this.pkg().alerts.install || ''))) {
         this.installOrUpload(currentUrl)
       }
       return

web/projects/ui/src/app/routes/portal/routes/updates/item.component.ts

@@ -12,6 +12,7 @@ import {
   DialogService,
   i18nKey,
   i18nPipe,
+  LocalizePipe,
   MarkdownPipe,
   SafeLinksDirective,
 } from '@start9labs/shared'
@@ -138,7 +139,7 @@ import UpdatesComponent from './updates.component'
           </p>
           <p
             safeLinks
-            [innerHTML]="item().releaseNotes | markdown | dompurify"
+            [innerHTML]="item().releaseNotes | localize | markdown | dompurify"
           ></p>
         </tui-expand>
       </td>
@@ -237,6 +238,7 @@ import UpdatesComponent from './updates.component'
     TuiProgressCircle,
     TuiTitle,
     TuiFade,
+    LocalizePipe,
     MarkdownPipe,
     NgDompurifyPipe,
     SafeLinksDirective,