feat: Add incoming call modal

toju-app/src/app/domains/direct-call/feature/incoming-call-modal/incoming-call-modal.component.html

@@ -0,0 +1,73 @@
+@if (session()) {
+  <div class="fixed inset-0 z-[120] bg-black/60 backdrop-blur-sm"></div>
+
+  <div class="pointer-events-none fixed inset-0 z-[121] flex items-center justify-center p-4">
+    <section
+      class="pointer-events-auto w-full max-w-sm rounded-lg border border-border bg-card shadow-2xl"
+      role="dialog"
+      aria-modal="true"
+      aria-labelledby="incoming-call-title"
+    >
+      <div class="flex flex-col items-center px-6 pb-6 pt-7 text-center">
+        <div class="relative">
+          @if (caller(); as callerUser) {
+            <app-user-avatar
+              [avatarUrl]="callerUser.avatarUrl"
+              [name]="callerUser.displayName || callerUser.username"
+              [showStatusBadge]="true"
+              [status]="callerUser.status"
+              size="xl"
+            />
+          } @else {
+            <div class="grid h-16 w-16 place-items-center rounded-full bg-secondary text-xl font-semibold text-secondary-foreground">
+              {{ callerName().charAt(0).toUpperCase() }}
+            </div>
+          }
+
+          <div class="absolute -bottom-1 -right-1 grid h-7 w-7 place-items-center rounded-full border border-card bg-green-600 text-white shadow-lg">
+            <ng-icon
+              name="lucidePhone"
+              class="h-3.5 w-3.5"
+            />
+          </div>
+        </div>
+
+        <p class="mt-5 text-[11px] font-semibold uppercase tracking-[0.18em] text-primary">Incoming call</p>
+        <h2
+          id="incoming-call-title"
+          class="mt-2 text-xl font-semibold text-foreground"
+        >
+          {{ callerName() }} is calling
+        </h2>
+        <p class="mt-1 text-sm text-muted-foreground">{{ callKindLabel() }}</p>
+
+        <div class="mt-6 grid w-full grid-cols-2 gap-3">
+          <button
+            type="button"
+            class="inline-flex min-h-11 items-center justify-center gap-2 rounded-lg border border-border bg-secondary px-4 text-sm font-semibold text-foreground transition-colors hover:bg-secondary/80"
+            (click)="decline()"
+          >
+            <ng-icon
+              name="lucidePhoneOff"
+              class="h-4 w-4"
+            />
+            Decline
+          </button>
+
+          <button
+            type="button"
+            class="inline-flex min-h-11 items-center justify-center gap-2 rounded-lg bg-green-600 px-4 text-sm font-semibold text-white transition-colors hover:bg-green-500 disabled:cursor-not-allowed disabled:opacity-70"
+            [disabled]="answering()"
+            (click)="answer()"
+          >
+            <ng-icon
+              name="lucidePhone"
+              class="h-4 w-4"
+            />
+            Answer
+          </button>
+        </div>
+      </div>
+    </section>
+  </div>
+}