refactor(builder): single language manager, theme before branding

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

P0 user feedback: General asked admins to type locale codes comma-separated, and Branding (logos) came before Theme (colors).

- Root cause: General duplicated language management as raw text/CSV inputs while a full Languages manager section (add/remove/set-default with per-locale content seeding) already existed one tab away. Removed the duplicate inputs; General now shows a read-only chip summary (default language first, marked) with a 'Manage languages' link to the real manager. One source of truth, no comma parsing, no risk of bypassing LocaleSyncService
- Builder navigation now orders Theme before Branding - merchants pick a palette first, then upload logos that match it
- New builder keys (languagesSummaryDesc, manageLanguages) in en/ru/hy; verified in browser (chips RU-default/EN/HY, nav order theme->branding)

src/app/features/project-editor/builder/builder-groups.model.ts

@@ -47,7 +47,9 @@ export const BUILDER_GROUPS: BuilderGroup[] = [
     purposeKey: 'builder.groupBrandingPurpose',
     whereKey: 'builder.groupBrandingWhere',
     skipKey: 'builder.groupBrandingSkip',
-    sections: ['branding', 'theme', 'header', 'footer'],
+    // Theme (colors) intentionally precedes Branding (logos): merchants pick
+    // their palette first, then upload logo assets that match it.
+    sections: ['theme', 'branding', 'header', 'footer'],
   },
   {
     id: 'homepage',

src/app/features/project-editor/sections/general-section.component.html

@@ -12,12 +12,21 @@
       <small class="field-desc">{{ 'builder.descriptionFieldDesc' | translate }}</small>
       <textarea rows="3" [ngModel]="bootstrap.seo.default.description" (ngModelChange)="updateDescription($event)"></textarea>
     </label>
-    <app-form-field [label]="'builder.defaultLanguage' | translate" [hint]="'builder.defaultLanguageDesc' | translate" [error]="fieldError('localization.defaultLocale')">
+    <div class="full languages-summary">
-      <app-input [ngModel]="bootstrap.localization.defaultLocale" (ngModelChange)="updateDefaultLanguage($event)" />
+      <span>{{ 'builder.supportedLanguages' | translate }}</span>
-    </app-form-field>
+      <small class="field-desc">{{ 'builder.languagesSummaryDesc' | translate }}</small>
-    <app-form-field [label]="'builder.supportedLanguages' | translate" [hint]="'builder.supportedLanguagesDesc' | translate">
+      <div class="languages-summary__chips">
-      <app-input [ngModel]="languagesValue()" (ngModelChange)="updateSupportedLanguages($event)" />
+        @for (code of orderedLocales(); track code) {
-    </app-form-field>
+          <span class="languages-summary__chip" [class.languages-summary__chip--default]="isDefaultLocale(code)">
+            {{ code.toUpperCase() }}
+            @if (isDefaultLocale(code)) {
+              <em>{{ 'builder.defaultLanguageLabel' | translate }}</em>
+            }
+          </span>
+        }
+        <a class="languages-summary__manage" [routerLink]="languagesRoute()">{{ 'builder.manageLanguages' | translate }}</a>
+      </div>
+    </div>
   </div>
 </app-section-card>
 }

src/app/features/project-editor/sections/general-section.component.ts

@@ -1,8 +1,10 @@
 import { ChangeDetectionStrategy, Component, computed, inject } from '@angular/core';
 import { FormsModule } from '@angular/forms';
+import { RouterLink } from '@angular/router';
 import { ProjectEditorFacade } from '../facade/project-editor.facade';
 import { TranslatePipe } from '../../../i18n/translate.pipe';
 import { TranslateService } from '../../../i18n/translate.service';
+import { LanguageService } from '../../../services/language.service';
 import { InputComponent } from '../../../shared/ui/input/input.component';
 import { FormFieldComponent } from '../../../shared/ui/form-field/form-field.component';
 import { SectionCardComponent } from '../../../shared/ui/section-card/section-card.component';
@@ -10,7 +12,7 @@ import { SectionCardComponent } from '../../../shared/ui/section-card/section-ca
 @Component({
   selector: 'app-project-editor-general-section',
   standalone: true,
-  imports: [FormsModule, TranslatePipe, InputComponent, FormFieldComponent, SectionCardComponent],
+  imports: [FormsModule, RouterLink, TranslatePipe, InputComponent, FormFieldComponent, SectionCardComponent],
   templateUrl: './general-section.component.html',
   styleUrls: ['./section.shared.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush
@@ -18,12 +20,29 @@ import { SectionCardComponent } from '../../../shared/ui/section-card/section-ca
 export class ProjectEditorGeneralSectionComponent {
   private readonly facade = inject(ProjectEditorFacade);
   private readonly translate = inject(TranslateService);
+  private readonly languageService = inject(LanguageService);
+
   readonly bootstrap = this.facade.bootstrap;
   readonly fieldError = (key: string): string | null => {
     const messageKey = this.facade.fieldError(key);
     return messageKey ? this.translate.t(messageKey) : null;
   };
-  readonly languagesValue = computed(() => (this.bootstrap()?.localization.supportedLocales ?? []).join(', '));
+
+  /** Default locale first, so the chip list reads as "primary + others". */
+  readonly orderedLocales = computed(() => {
+    const localization = this.bootstrap()?.localization;
+    if (!localization) {
+      return [] as string[];
+    }
+    const rest = localization.supportedLocales.filter(code => code !== localization.defaultLocale);
+    return [localization.defaultLocale, ...rest];
+  });
+
+  readonly languagesRoute = computed(() => ['/', this.languageService.currentLanguage(), 'edit', 'languages']);
+
+  isDefaultLocale(code: string): boolean {
+    return code === this.bootstrap()?.localization.defaultLocale;
+  }
 
   updateMarketplaceName(value: string): void {
     this.facade.updateBootstrap(current => ({
@@ -52,34 +71,4 @@ export class ProjectEditorGeneralSectionComponent {
       }
     }));
   }
-
-  updateDefaultLanguage(value: string): void {
-    this.facade.updateBootstrap(current => ({
-      ...current,
-      tenant: { ...current.tenant, defaultLocale: value },
-      localization: { ...current.localization, defaultLocale: value }
-    }));
-  }
-
-  /**
-   * Routes through facade.addLocale()/removeLocale() (LocaleSyncService)
-   * instead of overwriting supportedLocales directly - a direct overwrite
-   * skipped seeding/cleaning up per-locale nav and static-page translation
-   * entries, leaving them out of sync with what this field claims is
-   * supported (and Languages' add/remove buttons already do it correctly).
-   */
-  updateSupportedLanguages(value: string): void {
-    const next = new Set(value.split(',').map(item => item.trim().toLowerCase()).filter(Boolean));
-    const current = this.bootstrap()?.localization.supportedLocales ?? [];
-    for (const locale of current) {
-      if (!next.has(locale)) {
-        this.facade.removeLocale(locale);
-      }
-    }
-    for (const locale of next) {
-      if (!current.includes(locale)) {
-        this.facade.addLocale(locale);
-      }
-    }
-  }
 }

src/app/features/project-editor/sections/section.shared.scss

@@ -228,3 +228,16 @@ button.secondary {
     grid-template-columns: 1fr;
   }
 }
+
+.languages-summary { display: grid; gap: 6px; }
+.languages-summary__chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
+.languages-summary__chip {
+  display: inline-flex; align-items: center; gap: 6px;
+  padding: 4px 10px; border-radius: 999px;
+  border: 1px solid var(--border-color, #d3dad9);
+  font-size: 0.8rem; font-weight: 600;
+  em { font-style: normal; font-weight: 400; font-size: 0.7rem; color: var(--text-secondary, #6b7280); }
+}
+.languages-summary__chip--default { border-color: var(--color-primary, #2f8f5b); }
+.languages-summary__manage { font-size: 0.85rem; text-decoration: underline; color: var(--text-primary, #1e3c38); }
+.languages-summary__manage:focus-visible { outline: 2px solid var(--color-primary, #2f8f5b); outline-offset: 2px; }

src/app/i18n/en.ts

@@ -687,6 +687,8 @@ export const en: Translations = {
     linkVisibleDesc: 'Whether this navigation link is shown to shoppers.',
     appName: 'Marketplace Builder',
     backToDashboard: 'Back to dashboard',
+    languagesSummaryDesc: 'Languages your marketplace is available in. The first one is what customers see by default.',
+    manageLanguages: 'Manage languages',
     htmlToolBold: 'Bold',
     htmlToolItalic: 'Italic',
     htmlToolUnderline: 'Underline',

src/app/i18n/hy.ts

@@ -687,6 +687,8 @@ export const hy: Translations = {
     linkVisibleDesc: 'Արդյո՞ք այս նավիգացիոն հղումը ցուցադրվում է գնորդներին։',
     appName: 'Մարկետփլեյսի կոնստրուկտոր',
     backToDashboard: 'Վերադառնալ կառավարման վահանակ',
+    languagesSummaryDesc: 'Լեզուները, որոնցով հասանելի է ձեր մարքեթփլեյսը։ Առաջինը գնորդների լռելյայն լեզուն է։',
+    manageLanguages: 'Կառավարել լեզուները',
     htmlToolBold: 'Թավ',
     htmlToolItalic: 'Շեղ',
     htmlToolUnderline: 'Ընդգծված',

src/app/i18n/ru.ts

@@ -687,6 +687,8 @@ export const ru: Translations = {
     linkVisibleDesc: 'Показывать ли эту ссылку навигации покупателям.',
     appName: 'Конструктор маркетплейса',
     backToDashboard: 'Назад в панель управления',
+    languagesSummaryDesc: 'Языки, на которых доступен ваш маркетплейс. Первый — тот, что покупатели видят по умолчанию.',
+    manageLanguages: 'Управлять языками',
     htmlToolBold: 'Жирный',
     htmlToolItalic: 'Курсив',
     htmlToolUnderline: 'Подчёркнутый',

src/app/i18n/translations.ts

@@ -685,6 +685,8 @@ export interface Translations {
     linkVisibleDesc: string;
     appName: string;
     backToDashboard: string;
+    languagesSummaryDesc: string;
+    manageLanguages: string;
     htmlToolBold: string;
     htmlToolItalic: string;
     htmlToolUnderline: string;