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>
This commit is contained in:
sdarbinyan
2026-07-16 02:10:38 +04:00
parent 1c51a819ed
commit 0c9a855232
5 changed files with 61 additions and 21 deletions

View File

@@ -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>