feat: Response mobile layout support v1

toju-app/src/app/shared/components/confirm-dialog/confirm-dialog.component.html

@@ -1,46 +1,85 @@
-<!-- Backdrop -->
-<div
-  class="fixed inset-0 z-40 bg-black/30"
-  (click)="cancelled.emit(undefined)"
-  (keydown.enter)="cancelled.emit(undefined)"
-  (keydown.space)="cancelled.emit(undefined)"
-  role="button"
-  tabindex="0"
-  aria-label="Close dialog"
-></div>
-
-<!-- Dialog -->
-<div
-  appThemeNode="confirmDialogSurface"
-  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">
+<!--
+  Two presentations:
+  - Mobile: rendered through `app-bottom-sheet` so confirmations slide up from the bottom.
+  - Desktop: original centered modal with backdrop.
+-->
+@if (isMobile()) {
+  <app-bottom-sheet
+    [title]="title()"
+    [ariaLabel]="title()"
+    (dismissed)="cancelled.emit(undefined)"
+  >
+    <div class="px-4 pb-3 pt-1 text-sm text-muted-foreground">
       <ng-content />
     </div>
+    <div class="flex gap-2 border-t border-border p-3">
+      <button
+        (click)="cancelled.emit(undefined)"
+        type="button"
+        class="min-h-11 flex-1 rounded-lg bg-secondary px-3 py-2 text-sm text-foreground transition-colors hover:bg-secondary/80"
+      >
+        {{ cancelLabel() }}
+      </button>
+      <button
+        (click)="confirmed.emit(undefined)"
+        type="button"
+        class="min-h-11 flex-1 rounded-lg px-3 py-2 text-sm transition-colors"
+        [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>
+  </app-bottom-sheet>
+} @else {
+  <!-- Backdrop -->
+  <div
+    class="fixed inset-0 z-40 bg-black/30"
+    (click)="cancelled.emit(undefined)"
+    (keydown.enter)="cancelled.emit(undefined)"
+    (keydown.space)="cancelled.emit(undefined)"
+    role="button"
+    tabindex="0"
+    aria-label="Close dialog"
+  ></div>
+
+  <!-- Dialog -->
+  <div
+    appThemeNode="confirmDialogSurface"
+    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(undefined)"
+        type="button"
+        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(undefined)"
+        type="button"
+        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>
-  <div class="flex gap-2 p-3 border-t border-border">
-    <button
-      (click)="cancelled.emit(undefined)"
-      type="button"
-      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(undefined)"
-      type="button"
-      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>
+}