Refactor and code designing

src/app/shared/components/confirm-dialog/confirm-dialog.component.ts

@@ -0,0 +1,80 @@
+import { Component, input, output, HostListener } from '@angular/core';
+
+/**
+ * Reusable confirmation dialog modal.
+ *
+ * Usage:
+ * ```html
+ * @if (showConfirm()) {
+ *   <app-confirm-dialog
+ *     title="Delete Room?"
+ *     confirmLabel="Delete"
+ *     variant="danger"
+ *     (confirmed)="onDelete()"
+ *     (cancelled)="showConfirm.set(false)"
+ *   >
+ *     <p>This will permanently delete the room.</p>
+ *   </app-confirm-dialog>
+ * }
+ * ```
+ */
+@Component({
+  selector: 'app-confirm-dialog',
+  standalone: true,
+  template: `
+    <!-- Backdrop -->
+    <div class="fixed inset-0 z-40 bg-black/30" (click)="cancelled.emit()"></div>
+    <!-- Dialog -->
+    <div class="fixed z-50 left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 bg-card border border-border rounded-lg shadow-lg"
+         [class]="widthClass()">
+      <div class="p-4">
+        <h4 class="font-semibold text-foreground mb-2">{{ title() }}</h4>
+        <div class="text-sm text-muted-foreground">
+          <ng-content />
+        </div>
+      </div>
+      <div class="flex gap-2 p-3 border-t border-border">
+        <button
+          (click)="cancelled.emit()"
+          class="flex-1 px-3 py-2 bg-secondary text-foreground rounded-lg hover:bg-secondary/80 transition-colors text-sm"
+        >
+          {{ cancelLabel() }}
+        </button>
+        <button
+          (click)="confirmed.emit()"
+          class="flex-1 px-3 py-2 rounded-lg transition-colors text-sm"
+          [class.bg-primary]="variant() === 'primary'"
+          [class.text-primary-foreground]="variant() === 'primary'"
+          [class.hover:bg-primary/90]="variant() === 'primary'"
+          [class.bg-destructive]="variant() === 'danger'"
+          [class.text-destructive-foreground]="variant() === 'danger'"
+          [class.hover:bg-destructive/90]="variant() === 'danger'"
+        >
+          {{ confirmLabel() }}
+        </button>
+      </div>
+    </div>
+  `,
+  styles: [`:host { display: contents; }`],
+})
+export class ConfirmDialogComponent {
+  /** Dialog title. */
+  title = input.required<string>();
+  /** Label for the confirm button. */
+  confirmLabel = input<string>('Confirm');
+  /** Label for the cancel button. */
+  cancelLabel = input<string>('Cancel');
+  /** Visual style of the confirm button. */
+  variant = input<'primary' | 'danger'>('primary');
+  /** Tailwind width class for the dialog. */
+  widthClass = input<string>('w-[320px]');
+  /** Emitted when the user confirms. */
+  confirmed = output<void>();
+  /** Emitted when the user cancels (backdrop click, Cancel button, or Escape). */
+  cancelled = output<void>();
+
+  @HostListener('document:keydown.escape')
+  onEscape(): void {
+    this.cancelled.emit();
+  }
+}