feat(project-editor): route-driven tabs under /edit/:section

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

@@ -4,7 +4,7 @@
       <h1>{{ 'builder.title' | translate }}</h1>
       <p>{{ 'builder.subtitle' | translate }}</p>
     </div>
-    <app-project-editor-nav [active]="activeSection()" (activeChange)="facade.setActiveSection($event)" />
+    <app-project-editor-nav />
   </header>
 
   @if (!bootstrap()) {

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

@@ -1,4 +1,7 @@
-import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
+import { ChangeDetectionStrategy, Component, effect, inject } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { toSignal } from '@angular/core/rxjs-interop';
+import { map } from 'rxjs/operators';
 import { ProjectEditorFacade } from '../facade/project-editor.facade';
 import { ProjectEditorNavComponent } from '../components/project-editor-nav.component';
 import { ProjectEditorGeneralSectionComponent } from '../sections/general-section.component';
@@ -12,6 +15,11 @@ import { ProjectEditorFeaturesSectionComponent } from '../sections/features-sect
 import { ProjectEditorPreviewSectionComponent } from '../sections/preview-section.component';
 import { TranslatePipe } from '../../../i18n/translate.pipe';
 import { StaticPagesEditorComponent } from '../../content-management/components/static-pages-editor.component';
+import { ProjectEditorSectionId } from '../models/project-editor.model';
+
+const KNOWN_SECTIONS: ProjectEditorSectionId[] = [
+  'general', 'branding', 'theme', 'header', 'footer', 'homepage', 'widgets', 'static-pages', 'features', 'preview'
+];
 
 @Component({
   selector: 'app-project-editor-page',
@@ -36,10 +44,22 @@ import { StaticPagesEditorComponent } from '../../content-management/components/
 })
 export class ProjectEditorPageComponent {
   readonly facade = inject(ProjectEditorFacade);
+  private readonly route = inject(ActivatedRoute);
   readonly bootstrap = this.facade.bootstrap;
   readonly activeSection = this.facade.activeSection;
 
+  private readonly routeSection = toSignal(
+    this.route.paramMap.pipe(map(params => params.get('section') as ProjectEditorSectionId | null)),
+    { initialValue: null }
+  );
+
   constructor() {
     this.facade.loadBootstrap();
+    effect(() => {
+      const section = this.routeSection();
+      if (section && KNOWN_SECTIONS.includes(section)) {
+        this.facade.setActiveSection(section);
+      }
+    });
   }
 }