From 440d2ec211d9b941375e8da3465682186d9880b1 Mon Sep 17 00:00:00 2001 From: sdarbinyan Date: Sun, 19 Jul 2026 08:53:10 +0400 Subject: [PATCH] refactor(builder): single language manager, theme before branding Co-Authored-By: Claude Fable 5 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) --- .../builder/builder-groups.model.ts | 4 +- .../sections/general-section.component.html | 21 +++++--- .../sections/general-section.component.ts | 53 ++++++++----------- .../sections/section.shared.scss | 13 +++++ src/app/i18n/en.ts | 2 + src/app/i18n/hy.ts | 2 + src/app/i18n/ru.ts | 2 + src/app/i18n/translations.ts | 2 + 8 files changed, 60 insertions(+), 39 deletions(-) diff --git a/src/app/features/project-editor/builder/builder-groups.model.ts b/src/app/features/project-editor/builder/builder-groups.model.ts index 1fbaaa2..c86bd13 100644 --- a/src/app/features/project-editor/builder/builder-groups.model.ts +++ b/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', diff --git a/src/app/features/project-editor/sections/general-section.component.html b/src/app/features/project-editor/sections/general-section.component.html index c88c34d..71c4b9a 100644 --- a/src/app/features/project-editor/sections/general-section.component.html +++ b/src/app/features/project-editor/sections/general-section.component.html @@ -12,12 +12,21 @@ {{ 'builder.descriptionFieldDesc' | translate }} - - - - - - +
+ {{ 'builder.supportedLanguages' | translate }} + {{ 'builder.languagesSummaryDesc' | translate }} +
+ @for (code of orderedLocales(); track code) { + + {{ code.toUpperCase() }} + @if (isDefaultLocale(code)) { + {{ 'builder.defaultLanguageLabel' | translate }} + } + + } + {{ 'builder.manageLanguages' | translate }} +
+
} diff --git a/src/app/features/project-editor/sections/general-section.component.ts b/src/app/features/project-editor/sections/general-section.component.ts index c303613..15c0cbd 100644 --- a/src/app/features/project-editor/sections/general-section.component.ts +++ b/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); - } - } - } } diff --git a/src/app/features/project-editor/sections/section.shared.scss b/src/app/features/project-editor/sections/section.shared.scss index a1a86ed..c01a1f7 100644 --- a/src/app/features/project-editor/sections/section.shared.scss +++ b/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; } diff --git a/src/app/i18n/en.ts b/src/app/i18n/en.ts index aa60274..c87cca3 100644 --- a/src/app/i18n/en.ts +++ b/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', diff --git a/src/app/i18n/hy.ts b/src/app/i18n/hy.ts index 427646b..eafaea9 100644 --- a/src/app/i18n/hy.ts +++ b/src/app/i18n/hy.ts @@ -687,6 +687,8 @@ export const hy: Translations = { linkVisibleDesc: 'Արդյո՞ք այս նավիգացիոն հղումը ցուցադրվում է գնորդներին։', appName: 'Մարկետփլեյսի կոնստրուկտոր', backToDashboard: 'Վերադառնալ կառավարման վահանակ', + languagesSummaryDesc: 'Լեզուները, որոնցով հասանելի է ձեր մարքեթփլեյսը։ Առաջինը գնորդների լռելյայն լեզուն է։', + manageLanguages: 'Կառավարել լեզուները', htmlToolBold: 'Թավ', htmlToolItalic: 'Շեղ', htmlToolUnderline: 'Ընդգծված', diff --git a/src/app/i18n/ru.ts b/src/app/i18n/ru.ts index e5f93e1..1e253d1 100644 --- a/src/app/i18n/ru.ts +++ b/src/app/i18n/ru.ts @@ -687,6 +687,8 @@ export const ru: Translations = { linkVisibleDesc: 'Показывать ли эту ссылку навигации покупателям.', appName: 'Конструктор маркетплейса', backToDashboard: 'Назад в панель управления', + languagesSummaryDesc: 'Языки, на которых доступен ваш маркетплейс. Первый — тот, что покупатели видят по умолчанию.', + manageLanguages: 'Управлять языками', htmlToolBold: 'Жирный', htmlToolItalic: 'Курсив', htmlToolUnderline: 'Подчёркнутый', diff --git a/src/app/i18n/translations.ts b/src/app/i18n/translations.ts index c9edf5a..d4a02fc 100644 --- a/src/app/i18n/translations.ts +++ b/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;