feat(builder): add project editor

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

@@ -0,0 +1,40 @@
+import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { ProjectEditorFacade } from '../facade/project-editor.facade';
+import { TranslatePipe } from '../../../i18n/translate.pipe';
+import { HeaderConfig } from '../../../shared/models/config';
+
+@Component({
+  selector: 'app-project-editor-header-section',
+  standalone: true,
+  imports: [FormsModule, TranslatePipe],
+  templateUrl: './header-section.component.html',
+  styleUrls: ['./section.shared.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class ProjectEditorHeaderSectionComponent {
+  private readonly facade = inject(ProjectEditorFacade);
+  readonly bootstrap = this.facade.bootstrap;
+  readonly items: Array<{ key: keyof HeaderConfig; label: string }> = [
+    { key: 'showLogo', label: 'builder.showLogo' },
+    { key: 'showSearch', label: 'builder.showSearch' },
+    { key: 'showCategories', label: 'builder.showCategories' },
+    { key: 'showLanguages', label: 'builder.showLanguages' },
+    { key: 'showCart', label: 'builder.showCart' },
+    { key: 'showProfile', label: 'builder.showProfile' },
+    { key: 'showWishlist', label: 'builder.showWishlist' },
+    { key: 'showCompare', label: 'builder.showCompare' },
+    { key: 'showRegion', label: 'builder.showRegion' },
+  ];
+
+  toggle(key: keyof HeaderConfig, checked: boolean): void {
+    this.facade.updateBootstrap(current => ({
+      ...current,
+      header: { ...(current.header ?? {}), [key]: checked }
+    }));
+  }
+
+  isChecked(key: keyof HeaderConfig): boolean {
+    return !!this.bootstrap()?.header?.[key];
+  }
+}