better

frontend/src/app/components/pages/pages.component.html

@@ -27,12 +27,31 @@
       [page]="selectedPage()"
       (close)="showSettings.set(false)"
       (updatePage)="onUpdatePage($event)"
-      (deletePage)="onRemovePage()"
+      (deletePage)="onRequestRemovePage()"
       (switchAccount)="onSwitchAccount($event)"
     />
   </lt-modal>
 }
 
+@if (confirmDeletePageId()) {
+  <lt-modal (close)="cancelRemovePage()">
+    <div class="confirm-delete">
+      <div class="header">
+        <button class="exit" type="button" (click)="cancelRemovePage()" aria-label="Cancel"></button>
+        <h2>Delete page</h2>
+      </div>
+      <p>
+        Delete <strong>{{ confirmDeletePageName() || 'this page' }}</strong> and all of its towers and blocks?
+        This can't be undone.
+      </p>
+      <div class="confirm-buttons">
+        <button type="button" (click)="cancelRemovePage()">Cancel</button>
+        <button type="button" class="danger" (click)="confirmRemovePage()">Delete page</button>
+      </div>
+    </div>
+  </lt-modal>
+}
+
 @if (showWelcome()) {
   <lt-modal (close)="showWelcome.set(false)">
     <lt-welcome

frontend/src/app/components/pages/pages.component.scss

@@ -44,4 +44,65 @@
       font-size: var(--medium-font-size);
     }
   }
+
+  .confirm-delete {
+    @include card();
+    width: 66vw;
+    max-width: 500px;
+    @media (max-width: $mobile-width) {
+      width: 88vw;
+      max-width: 88vw;
+      padding: var(--medium-padding);
+    }
+    box-sizing: border-box;
+    padding: var(--large-padding);
+    position: relative;
+    box-shadow: $shadow;
+    @include inner-spacing(var(--large-padding));
+    text-align: center;
+
+    .header {
+      @include center-child();
+
+      .exit {
+        position: absolute;
+        right: var(--large-padding);
+        @include exit();
+      }
+    }
+
+    p {
+      strong {
+        font-weight: bold;
+      }
+    }
+
+    .confirm-buttons {
+      display: flex;
+      justify-content: center;
+      gap: var(--large-padding);
+
+      button {
+        max-width: 100%;
+      }
+
+      button.danger {
+        color: #b53f3f;
+        border-bottom-color: #b53f3f55;
+
+        &:after {
+          background-color: #b53f3f;
+        }
+      }
+
+      @media (max-width: $mobile-width) {
+        flex-direction: column;
+        gap: var(--small-padding);
+
+        button {
+          width: 100%;
+        }
+      }
+    }
+  }
 }

frontend/src/app/components/pages/pages.component.ts

@@ -31,6 +31,7 @@ export class PagesComponent {
   readonly showSettings = signal(false);
   readonly dragHappening = signal(false);
   readonly showWelcome = signal(false);
+  readonly confirmDeletePageId = signal<string | null>(null);
 
   constructor() {
     effect(() => {
@@ -63,6 +64,12 @@ export class PagesComponent {
 
   readonly selectedPageName = computed(() => this.selectedPage()?.name ?? null);
 
+  readonly confirmDeletePageName = computed(() => {
+    const id = this.confirmDeletePageId();
+    if (!id) return '';
+    return this.store.pages().find((p) => p.id === id)?.name ?? '';
+  });
+
   readonly selectedPageIndex = computed(() => {
     const page = this.selectedPage();
     if (!page) return -1;
@@ -94,12 +101,23 @@ export class PagesComponent {
     }
   }
 
-  onRemovePage(): void {
+  onRequestRemovePage(): void {
     const page = this.selectedPage();
     if (!page) return;
-    this.store.deletePage(page.id);
+    this.confirmDeletePageId.set(page.id);
+  }
+
+  confirmRemovePage(): void {
+    const pageId = this.confirmDeletePageId();
+    if (!pageId) return;
+    this.store.deletePage(pageId);
     this.selectedPageId.set(null);
     this.showSettings.set(false);
+    this.confirmDeletePageId.set(null);
+  }
+
+  cancelRemovePage(): void {
+    this.confirmDeletePageId.set(null);
   }
 
   onSwitchAccount(token: string): void {