feat(project-editor): warn before leaving with unsaved changes

src/app/features/project-editor/guards/project-editor-dirty.guard.ts

@@ -0,0 +1,12 @@
+import { inject } from '@angular/core';
+import { CanDeactivateFn } from '@angular/router';
+import { ProjectEditorFacade } from '../facade/project-editor.facade';
+import { ProjectEditorPageComponent } from '../pages/project-editor-page.component';
+
+export const projectEditorDirtyGuard: CanDeactivateFn<ProjectEditorPageComponent> = () => {
+  const facade = inject(ProjectEditorFacade);
+  if (!facade.dirty()) {
+    return true;
+  }
+  return window.confirm('You have unsaved changes. Leave anyway?');
+};

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

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, effect, inject } from '@angular/core';
+import { ChangeDetectionStrategy, Component, HostListener, effect, inject } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { toSignal } from '@angular/core/rxjs-interop';
 import { map } from 'rxjs/operators';
@@ -68,4 +68,12 @@ export class ProjectEditorPageComponent {
       }
     });
   }
+
+  @HostListener('window:beforeunload', ['$event'])
+  warnBeforeUnload(event: BeforeUnloadEvent): void {
+    if (this.facade.dirty()) {
+      event.preventDefault();
+      event.returnValue = '';
+    }
+  }
 }