fix(project-editor): editable nav link labels per locale, add LocaleTabs

- navigation-section: add LocaleTabs; label input now reads/writes the active locale's translation via a new editableLabel() helper instead of always the default locale. facade.updateNavLinkLabel() gained an optional locale param (defaults to current default locale, so existing callers are unaffected) and correctly promotes a plain-string label into a per-locale map when writing a non-default locale. - languages-section: wrap in SectionCard, add LocaleTabs for consistency. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-07-16 02:10:38 +04:00
parent 1c51a819ed
commit 0c9a855232
5 changed files with 61 additions and 21 deletions
--- a/src/app/features/project-editor/facade/project-editor.facade.ts
+++ b/src/app/features/project-editor/facade/project-editor.facade.ts
@@ -1,7 +1,7 @@
 import { Injectable, computed, inject, signal } from '@angular/core';
 import { take } from 'rxjs/operators';
 import { BootstrapConfig, DEFAULT_CATALOG_CONFIG, DEFAULT_HEADER_CONFIG, DEFAULT_PRODUCT_PAGE_CONFIG, DEFAULT_USER_EXPERIENCE_CONFIG } from '../../../shared/models/config';
-import { NavigationItemConfig } from '../../../shared/models/config';
+import { NavigationItemConfig, NavigationLocalizedText } from '../../../shared/models/config';
 import { ConfigService } from '../../../core/config/config.service';
 import { ProjectEditorIoService } from '../services/project-editor-io.service';
 import { ProjectEditorPreviewService } from '../services/project-editor-preview.service';
@@ -242,13 +242,14 @@ export class ProjectEditorFacade {
   * If it's already a NavigationLocalizedText object, only the current default
   * locale's key is overwritten; every other locale key is preserved untouched.
   */
-  updateNavLinkLabel(target: 'header' | 'footer', id: string, value: string): void {
+  updateNavLinkLabel(target: 'header' | 'footer', id: string, value: string, locale?: string): void {
    this.updateBootstrap(current => {
      const list = current.navigation[target];
      if (!this.isFlatNavList(list)) {
        return current;
      }
      const defaultLocale = current.localization.defaultLocale ?? 'en';
+      const targetLocale = locale ?? defaultLocale;
      return {
        ...current,
        navigation: {
@@ -258,9 +259,14 @@ export class ProjectEditorFacade {
              return item;
            }
            const currentLabel = item.label;
-            const nextLabel = currentLabel && typeof currentLabel === 'object'
-              ? { ...currentLabel, [defaultLocale]: value }
-              : value;
+            let nextLabel: string | NavigationLocalizedText;
+            if (currentLabel && typeof currentLabel === 'object') {
+              nextLabel = { ...currentLabel, [targetLocale]: value };
+            } else if (targetLocale === defaultLocale) {
+              nextLabel = value;
+            } else {
+              nextLabel = { [defaultLocale]: currentLabel ?? '', [targetLocale]: value };
+            }
            return { ...item, label: nextLabel };
          }),
        },
--- a/src/app/features/project-editor/sections/languages-section.component.html
+++ b/src/app/features/project-editor/sections/languages-section.component.html
@@ -1,7 +1,5 @@
-<section class="editor-section-card">
-  <div class="editor-actions">
-    <h2>{{ 'builder.languagesTab' | translate }}</h2>
-  </div>
+<app-section-card [title]="'builder.languagesTab' | translate">
+  <app-locale-tabs [locales]="supportedLocales()" [defaultLocale]="tenantDefaultLocale()" (activeLocale)="onActiveLocaleChange($event)" />
  <small class="field-desc">{{ 'builder.languagesTabDesc' | translate }}</small>

  <div class="editor-actions">
@@ -31,4 +29,4 @@
      </article>
    }
  </div>
-</section>
+</app-section-card>
--- a/src/app/features/project-editor/sections/languages-section.component.ts
+++ b/src/app/features/project-editor/sections/languages-section.component.ts
@@ -4,11 +4,13 @@ import { ProjectEditorFacade } from '../facade/project-editor.facade';
 import { TranslatePipe } from '../../../i18n/translate.pipe';
 import { ButtonComponent } from '../../../shared/ui/button/button.component';
 import { InputComponent } from '../../../shared/ui/input/input.component';
+import { SectionCardComponent } from '../../../shared/ui/section-card/section-card.component';
+import { LocaleTabsComponent } from '../../../shared/ui/locale-tabs/locale-tabs.component';

@Component({
  selector: 'app-project-editor-languages-section',
  standalone: true,
-  imports: [FormsModule, TranslatePipe, ButtonComponent, InputComponent],
+  imports: [FormsModule, TranslatePipe, ButtonComponent, InputComponent, SectionCardComponent, LocaleTabsComponent],
  templateUrl: './languages-section.component.html',
  styleUrls: ['./section.shared.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush
@@ -18,8 +20,15 @@ export class ProjectEditorLanguagesSectionComponent {
  readonly bootstrap = this.facade.bootstrap;
  readonly locales = computed(() => this.bootstrap()?.localization.supportedLocales ?? []);
  readonly defaultLocale = computed(() => this.bootstrap()?.localization.defaultLocale ?? '');
+  readonly supportedLocales = computed(() => this.bootstrap()?.tenant.supportedLocales ?? []);
+  readonly tenantDefaultLocale = computed(() => this.bootstrap()?.tenant.defaultLocale ?? '');
+  readonly activeLocale = signal<string | null>(null);
  readonly newLocale = signal('');

+  onActiveLocaleChange(locale: string): void {
+    this.activeLocale.set(locale);
+  }
+
  updateNewLocale(value: string): void {
    this.newLocale.set(value);
  }
--- a/src/app/features/project-editor/sections/navigation-section.component.html
+++ b/src/app/features/project-editor/sections/navigation-section.component.html
@@ -1,6 +1,7 @@
-<section class="editor-section-card">
+<app-section-card [title]="'builder.navigationHeader' | translate">
+  <app-locale-tabs [locales]="supportedLocales()" [defaultLocale]="defaultLocale()" (activeLocale)="onActiveLocaleChange($event)" />
+
  <div class="editor-actions">
-    <h2>{{ 'builder.navigationHeader' | translate }}</h2>
    <app-button variant="primary" (click)="addLink('header')">{{ 'builder.addLink' | translate }}</app-button>
  </div>

@@ -16,9 +17,9 @@
          </div>
        </div>
        <div class="editor-grid three">
-          <label><span>{{ 'builder.linkLabel' | translate }}</span><small class="field-desc">{{ 'builder.linkLabelDesc' | translate }}</small><app-input [ngModel]="labelOf(item)" (ngModelChange)="updateLabel('header', item.id, $event)" /></label>
+          <label><span>{{ 'builder.linkLabel' | translate }}</span><small class="field-desc">{{ 'builder.linkLabelDesc' | translate }}</small><app-input [ngModel]="editableLabel(item)" (ngModelChange)="updateLabel('header', item.id, $event)" /></label>
          <label><span>{{ 'builder.linkUrl' | translate }}</span><small class="field-desc">{{ 'builder.linkUrlDesc' | translate }}</small><app-input [ngModel]="item.route" (ngModelChange)="updateRoute('header', item.id, $event)" /></label>
-          <label class="toggle-row"><input type="checkbox" [checked]="item.visible !== false" (change)="updateVisible('header', item.id, $any($event.target).checked)" /><span>{{ 'builder.visible' | translate }}</span><small class="field-desc">{{ 'builder.linkVisibleDesc' | translate }}</small></label>
+          <label class="toggle-row"><app-toggle [ngModel]="item.visible !== false" (ngModelChange)="updateVisible('header', item.id, $event)" [ariaLabel]="'builder.visible' | translate" /><span>{{ 'builder.visible' | translate }}</span><small class="field-desc">{{ 'builder.linkVisibleDesc' | translate }}</small></label>
        </div>
      </article>
    }
@@ -44,9 +45,9 @@
            </div>
          </div>
          <div class="editor-grid three">
-            <label><span>{{ 'builder.linkLabel' | translate }}</span><small class="field-desc">{{ 'builder.linkLabelDesc' | translate }}</small><app-input [ngModel]="labelOf(item)" (ngModelChange)="updateLabel('footer', item.id, $event)" /></label>
+            <label><span>{{ 'builder.linkLabel' | translate }}</span><small class="field-desc">{{ 'builder.linkLabelDesc' | translate }}</small><app-input [ngModel]="editableLabel(item)" (ngModelChange)="updateLabel('footer', item.id, $event)" /></label>
            <label><span>{{ 'builder.linkUrl' | translate }}</span><small class="field-desc">{{ 'builder.linkUrlDesc' | translate }}</small><app-input [ngModel]="item.route" (ngModelChange)="updateRoute('footer', item.id, $event)" /></label>
-            <label class="toggle-row"><input type="checkbox" [checked]="item.visible !== false" (change)="updateVisible('footer', item.id, $any($event.target).checked)" /><span>{{ 'builder.visible' | translate }}</span><small class="field-desc">{{ 'builder.linkVisibleDesc' | translate }}</small></label>
+            <label class="toggle-row"><app-toggle [ngModel]="item.visible !== false" (ngModelChange)="updateVisible('footer', item.id, $event)" [ariaLabel]="'builder.visible' | translate" /><span>{{ 'builder.visible' | translate }}</span><small class="field-desc">{{ 'builder.linkVisibleDesc' | translate }}</small></label>
          </div>
        </article>
      }
@@ -54,4 +55,4 @@
  } @else {
    <p class="editor-error">{{ 'builder.navigationFooterGrouped' | translate }}</p>
  }
-</section>
+</app-section-card>
--- a/src/app/features/project-editor/sections/navigation-section.component.ts
+++ b/src/app/features/project-editor/sections/navigation-section.component.ts
@@ -1,15 +1,18 @@
-import { ChangeDetectionStrategy, Component, computed, inject } from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, inject, signal } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { ProjectEditorFacade } from '../facade/project-editor.facade';
 import { TranslatePipe } from '../../../i18n/translate.pipe';
 import { NavigationItemConfig } from '../../../shared/models/config';
 import { ButtonComponent } from '../../../shared/ui/button/button.component';
 import { InputComponent } from '../../../shared/ui/input/input.component';
+import { SectionCardComponent } from '../../../shared/ui/section-card/section-card.component';
+import { ToggleComponent } from '../../../shared/ui/toggle/toggle.component';
+import { LocaleTabsComponent } from '../../../shared/ui/locale-tabs/locale-tabs.component';

@Component({
  selector: 'app-project-editor-navigation-section',
  standalone: true,
-  imports: [FormsModule, TranslatePipe, ButtonComponent, InputComponent],
+  imports: [FormsModule, TranslatePipe, ButtonComponent, InputComponent, SectionCardComponent, ToggleComponent, LocaleTabsComponent],
  templateUrl: './navigation-section.component.html',
  styleUrls: ['./section.shared.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush
@@ -18,6 +21,10 @@ export class ProjectEditorNavigationSectionComponent {
  private readonly facade = inject(ProjectEditorFacade);
  readonly bootstrap = this.facade.bootstrap;

+  readonly supportedLocales = computed(() => this.bootstrap()?.tenant.supportedLocales ?? []);
+  readonly defaultLocale = computed(() => this.bootstrap()?.tenant.defaultLocale ?? '');
+  readonly activeLocale = signal<string | null>(null);
+
  readonly headerLinks = computed(() => this.sorted(this.bootstrap()?.navigation.header ?? []));
  readonly footerLinks = computed<NavigationItemConfig[] | null>(() => {
    const footer = this.bootstrap()?.navigation.footer ?? [];
@@ -27,6 +34,11 @@ export class ProjectEditorNavigationSectionComponent {
    return 'items' in footer[0] ? null : this.sorted(footer as NavigationItemConfig[]);
  });

+  onActiveLocaleChange(locale: string): void {
+    this.activeLocale.set(locale);
+  }
+
+  /** Display label used for the row heading — a stable identifier, not tied to the active locale. */
  labelOf(item: NavigationItemConfig): string {
    if (typeof item.label === 'string' || !item.label) {
      return item.label ?? '';
@@ -35,6 +47,19 @@ export class ProjectEditorNavigationSectionComponent {
    return item.label[defaultLocale] ?? Object.values(item.label)[0] ?? '';
  }

+  /** Editable label for the currently active locale tab. Falls back to an empty string
+   *  when this locale has no translation yet, so switching locales lets you fill it in. */
+  editableLabel(item: NavigationItemConfig): string {
+    const locale = this.activeLocale() ?? this.defaultLocale();
+    if (!item.label) {
+      return '';
+    }
+    if (typeof item.label === 'string') {
+      return locale === this.defaultLocale() ? item.label : '';
+    }
+    return item.label[locale] ?? '';
+  }
+
  addLink(target: 'header' | 'footer'): void {
    this.facade.addNavLink(target);
  }
@@ -48,7 +73,8 @@ export class ProjectEditorNavigationSectionComponent {
  }

  updateLabel(target: 'header' | 'footer', id: string, value: string): void {
-    this.facade.updateNavLinkLabel(target, id, value);
+    const locale = this.activeLocale() ?? this.defaultLocale();
+    this.facade.updateNavLinkLabel(target, id, value, locale);
  }

  updateRoute(target: 'header' | 'footer', id: string, value: string): void {