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;