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

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

@@ -1,5 +1,9 @@
 <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>
+    <a
+      [routerLink]="['/edit', section.id] | langRoute"
+      routerLinkActive="active"
+      class="editor-nav-link"
+    >{{ section.label | translate }}</a>
   }
 </nav>

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

@@ -4,7 +4,8 @@
   gap: 10px;
 }
 
-button {
+button,
+.editor-nav-link {
   min-height: 40px;
   border-radius: 999px;
   border: 1px solid var(--border-color, #d3dad9);
@@ -15,8 +16,15 @@ button {
   cursor: pointer;
 }
 
-button.active {
+button.active,
+.editor-nav-link.active {
   border-color: #497671;
   background: #497671;
   color: #fff;
 }
+
+.editor-nav-link {
+  text-decoration: none;
+  display: inline-block;
+  line-height: 40px;
+}

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

@@ -1,19 +1,18 @@
-import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { RouterLink, RouterLinkActive } from '@angular/router';
 import { TranslatePipe } from '../../../i18n/translate.pipe';
+import { LangRoutePipe } from '../../../pipes/lang-route.pipe';
 import { ProjectEditorSectionId } from '../models/project-editor.model';
 
 @Component({
   selector: 'app-project-editor-nav',
   standalone: true,
-  imports: [TranslatePipe],
+  imports: [TranslatePipe, RouterLink, RouterLinkActive, LangRoutePipe],
   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' },