feat(builder): add project editor

src/app/features/project-editor/components/project-editor-nav.component.html

@@ -0,0 +1,5 @@
+<nav class="editor-nav" [attr.aria-label]="'builder.title' | translate">
+  @for (section of sections; track section.id) {
+    <button type="button" [class.active]="active === section.id" (click)="activeChange.emit(section.id)">{{ section.label | translate }}</button>
+  }
+</nav>

src/app/features/project-editor/components/project-editor-nav.component.scss

@@ -0,0 +1,22 @@
+.editor-nav {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+}
+
+button {
+  min-height: 40px;
+  border-radius: 999px;
+  border: 1px solid var(--border-color, #d3dad9);
+  background: #fff;
+  color: #1e3c38;
+  padding: 0 14px;
+  font-weight: 700;
+  cursor: pointer;
+}
+
+button.active {
+  border-color: #497671;
+  background: #497671;
+  color: #fff;
+}

src/app/features/project-editor/components/project-editor-nav.component.ts

@@ -0,0 +1,28 @@
+import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
+import { TranslatePipe } from '../../../i18n/translate.pipe';
+import { ProjectEditorSectionId } from '../models/project-editor.model';
+
+@Component({
+  selector: 'app-project-editor-nav',
+  standalone: true,
+  imports: [TranslatePipe],
+  templateUrl: './project-editor-nav.component.html',
+  styleUrls: ['./project-editor-nav.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class ProjectEditorNavComponent {
+  @Input() active: ProjectEditorSectionId = 'general';
+  @Output() activeChange = new EventEmitter<ProjectEditorSectionId>();
+
+  readonly sections: Array<{ id: ProjectEditorSectionId; label: string }> = [
+    { id: 'general', label: 'builder.general' },
+    { id: 'branding', label: 'builder.branding' },
+    { id: 'theme', label: 'builder.theme' },
+    { id: 'header', label: 'builder.header' },
+    { id: 'footer', label: 'builder.footer' },
+    { id: 'homepage', label: 'builder.homepage' },
+    { id: 'widgets', label: 'builder.widgets' },
+    { id: 'features', label: 'builder.marketplaceFeatures' },
+    { id: 'preview', label: 'builder.preview' },
+  ];
+}