feat(builder): add project editor

src/app/features/project-editor/pages/project-editor-page.component.html

@@ -0,0 +1,29 @@
+<main class="project-editor-page">
+  <header class="project-editor-hero">
+    <div>
+      <h1>{{ 'builder.title' | translate }}</h1>
+      <p>{{ 'builder.subtitle' | translate }}</p>
+    </div>
+    <app-project-editor-nav [active]="activeSection()" (activeChange)="facade.setActiveSection($event)" />
+  </header>
+
+  @if (!bootstrap()) {
+    <section class="project-editor-empty">
+      <p>{{ 'common.loading' | translate }}</p>
+    </section>
+  } @else {
+    <section class="project-editor-stack">
+      @switch (activeSection()) {
+        @case ('general') { <app-project-editor-general-section /> }
+        @case ('branding') { <app-project-editor-branding-section /> }
+        @case ('theme') { <app-project-editor-theme-section /> }
+        @case ('header') { <app-project-editor-header-section /> }
+        @case ('footer') { <app-project-editor-footer-section /> }
+        @case ('homepage') { <app-project-editor-homepage-section /> }
+        @case ('widgets') { <app-project-editor-widgets-section /> }
+        @case ('features') { <app-project-editor-features-section /> }
+        @case ('preview') { <app-project-editor-preview-section /> }
+      }
+    </section>
+  }
+</main>

src/app/features/project-editor/pages/project-editor-page.component.scss

@@ -0,0 +1,38 @@
+.project-editor-page {
+  max-width: 1240px;
+  margin: 0 auto;
+  padding: 24px;
+  display: grid;
+  gap: 18px;
+}
+
+.project-editor-hero {
+  display: grid;
+  gap: 14px;
+}
+
+.project-editor-hero h1,
+.project-editor-hero p {
+  margin: 0;
+}
+
+.project-editor-hero p {
+  color: #697777;
+}
+
+.project-editor-stack {
+  display: grid;
+  gap: 16px;
+}
+
+.project-editor-empty {
+  min-height: 240px;
+  display: grid;
+  place-items: center;
+}
+
+@media (max-width: 720px) {
+  .project-editor-page {
+    padding: 16px;
+  }
+}

src/app/features/project-editor/pages/project-editor-page.component.ts

@@ -0,0 +1,43 @@
+import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
+import { ProjectEditorFacade } from '../facade/project-editor.facade';
+import { ProjectEditorNavComponent } from '../components/project-editor-nav.component';
+import { ProjectEditorGeneralSectionComponent } from '../sections/general-section.component';
+import { ProjectEditorBrandingSectionComponent } from '../sections/branding-section.component';
+import { ProjectEditorThemeSectionComponent } from '../sections/theme-section.component';
+import { ProjectEditorHeaderSectionComponent } from '../sections/header-section.component';
+import { ProjectEditorFooterSectionComponent } from '../sections/footer-section.component';
+import { ProjectEditorHomepageSectionComponent } from '../sections/homepage-section.component';
+import { ProjectEditorWidgetsSectionComponent } from '../sections/widgets-section.component';
+import { ProjectEditorFeaturesSectionComponent } from '../sections/features-section.component';
+import { ProjectEditorPreviewSectionComponent } from '../sections/preview-section.component';
+import { TranslatePipe } from '../../../i18n/translate.pipe';
+
+@Component({
+  selector: 'app-project-editor-page',
+  standalone: true,
+  imports: [
+    TranslatePipe,
+    ProjectEditorNavComponent,
+    ProjectEditorGeneralSectionComponent,
+    ProjectEditorBrandingSectionComponent,
+    ProjectEditorThemeSectionComponent,
+    ProjectEditorHeaderSectionComponent,
+    ProjectEditorFooterSectionComponent,
+    ProjectEditorHomepageSectionComponent,
+    ProjectEditorWidgetsSectionComponent,
+    ProjectEditorFeaturesSectionComponent,
+    ProjectEditorPreviewSectionComponent,
+  ],
+  templateUrl: './project-editor-page.component.html',
+  styleUrls: ['./project-editor-page.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class ProjectEditorPageComponent {
+  readonly facade = inject(ProjectEditorFacade);
+  readonly bootstrap = this.facade.bootstrap;
+  readonly activeSection = this.facade.activeSection;
+
+  constructor() {
+    this.facade.loadBootstrap();
+  }
+}