PrivateChat/client/src/app/chat-page.component.html

<main class="chat-shell py-4">
  <div class="container-lg">
    <section class="chat-page panel p-3 p-lg-4">
      <app-peer-call-modal
        [visible]="callModalVisible()"
        [peerName]="callModalPeer()?.displayName ?? 'Peer'"
        [callState]="callModalState()"
        [callMode]="callModalMode()"
        [statusText]="callModalStatusText()"
        [localStream]="localCallStream()"
        [remoteStream]="remoteCallVideoStream()"
        (acceptRequested)="callModalPeer() && acceptIncomingVoiceCall(callModalPeer()!.id)"
        (rejectRequested)="callModalPeer() && rejectIncomingVoiceCall(callModalPeer()!.id)"
        (hangupRequested)="callModalPeer() && endVoiceCall(callModalPeer()!.id)"
      ></app-peer-call-modal>
      <audio #callAudioElement hidden autoplay playsinline></audio>

      @if (callChoicePeer(); as selectedCallPeer) {
        <div class="call-choice-backdrop" (click)="closeCallChoice()">
          <section class="call-choice-card panel p-4" (click)="$event.stopPropagation()">
            <p class="call-choice-eyebrow">Start a call</p>
            <h2 class="h5 mb-2">{{ selectedCallPeer.displayName }}</h2>
            <p class="small mb-3">Choose whether to place a full video call or audio only.</p>
            <div class="call-choice-actions">
              <button class="call-choice-button" type="button" (click)="startSelectedCall('video')">
                <span class="call-choice-icon">📹</span>
                <span>Video call</span>
              </button>
              <button class="call-choice-button" type="button" (click)="startSelectedCall('audio')">
                <span class="call-choice-icon">🎙️</span>
                <span>Audio only</span>
              </button>
            </div>
            <div class="d-flex justify-content-end mt-3">
              <button class="btn btn-outline-secondary" type="button" (click)="closeCallChoice()">
                Cancel
              </button>
            </div>
          </section>
        </div>
      }

      <div class="chat-header d-flex flex-column flex-lg-row justify-content-between align-items-start align-items-lg-center gap-3 mb-4">
        <div>
          <a class="back-link" routerLink="/">← Back to dashboard</a>
          @if (currentUser(); as connectedUser) {
            <h1 class="h3 mb-1 mt-2">{{ connectedUser.displayName }}</h1>
            <div class="status-indicators mt-2">
              <div class="status-indicator">
                <span class="status-led" [class.status-led-ok]="indicatorTone(session.signalingState()) === 'ok'" [class.status-led-connecting]="indicatorTone(session.signalingState()) === 'connecting'" [class.status-led-offline]="indicatorTone(session.signalingState()) === 'offline'"></span>
                <span>Signaling</span>
              </div>
              <button
                class="status-indicator status-indicator-action"
                type="button"
                [disabled]="!canReconnectWebRtc()"
                [attr.aria-label]="canReconnectWebRtc() ? 'Open WebRTC channel' : 'WebRTC channel status'"
                [title]="canReconnectWebRtc() ? 'Open WebRTC channel' : 'WebRTC channel status'"
                (click)="ensureConnection()"
              >
                <span class="status-led" [class.status-led-ok]="indicatorTone(webRtcState()) === 'ok'" [class.status-led-connecting]="indicatorTone(webRtcState()) === 'connecting'" [class.status-led-offline]="indicatorTone(webRtcState()) === 'offline'"></span>
                <span>WebRTC</span>
              </button>
            </div>
          } @else {
            <h1 class="h3 mb-1 mt-2">Not signed in</h1>
            <p class="small text-secondary mb-0">Return to the dashboard and sign in again.</p>
          }
        </div>
      </div>

      <div class="chat-layout">
        <aside class="peer-sidebar">


          <div class="peer-list">
            @if (session.peers().length === 0) {
              <div class="empty-chat empty-peers">
                No peers are currently connected.
              </div>
            }

            @for (connectedPeer of session.peers(); track connectedPeer.id) {
              <article
                class="peer-tile"
                [class.peer-tile-active]="connectedPeer.id === peerId()"
                [class.peer-tile-unread]="isPeerUnread(connectedPeer.id)"
              >
                <button
                  class="peer-tile-main text-start"
                  type="button"
                  (click)="switchPeer(connectedPeer.id)"
                >
                  <div class="peer-tile-row">
                    <span class="peer-tile-title">
                      <span class="fw-semibold">{{ connectedPeer.displayName }}</span>
                      @if (isPeerTyping(connectedPeer.id)) {
                        <span class="peer-typing-dots" aria-label="Typing">
                          <span></span>
                          <span></span>
                          <span></span>
                        </span>
                      }
                    </span>
                    <span
                      class="status-led peer-tile-status"
                      [class.status-led-ok]="connectedPeer.channelState === 'open' || connectedPeer.connectionState === 'connected'"
                      [class.status-led-offline]="connectedPeer.channelState !== 'open' && connectedPeer.connectionState !== 'connected'"
                      [attr.aria-label]="
                        connectedPeer.channelState === 'open' || connectedPeer.connectionState === 'connected'
                          ? 'Connected'
                          : 'Disconnected'
                      "
                    ></span>
                  </div>
                </button>
                <button
                  class="peer-tile-delete"
                  type="button"
                  title="Delete conversation"
                  aria-label="Delete conversation"
                  (click)="deleteConversation(connectedPeer.id, $event)"
                >
                  🗑️
                </button>
              </article>
            }
          </div>
        </aside>

        <div class="chat-main">
          <div class="conversation">
            @if (conversation().length === 0) {
              <div class="empty-chat">
                No text messages yet. The chat page is ready as soon as the peer channel opens.
              </div>
            }

            @for (entry of conversation(); track entry.id) {
              <article
                class="bubble"
                [class.bubble-incoming]="entry.direction === 'incoming'"
                [class.bubble-outgoing]="entry.direction === 'outgoing'"
                [class.bubble-system]="entry.direction === 'system'"
              >
                @if (entry.direction !== 'system') {
                  <div class="bubble-actions">
                    <button
                      class="bubble-action"
                      type="button"
                      (click)="toggleForwardMenu(entry, $event)"
                      title="Forward message"
                      aria-label="Forward message"
                    >
                      ⏩
                    </button>
                    <button
                      class="bubble-action bubble-delete"
                      type="button"
                      (click)="deleteMessage(entry)"
                      title="Delete message"
                      aria-label="Delete message"
                    >
                      ×
                    </button>
                    @if (isForwardMenuOpen(entry.id)) {
                      <div class="bubble-forward-menu">
                        <select #forwardSelect class="bubble-forward-select" (change)="forwardEntry(entry, forwardSelect.value, forwardSelect)">
                          <option value="">Forward to…</option>
                          @for (targetPeer of forwardTargets(entry); track targetPeer.id) {
                            <option [value]="targetPeer.id">{{ targetPeer.displayName }}</option>
                          }
                        </select>
                      </div>
                    }
                  </div>
                }
                <div class="bubble-meta">
                  <span class="bubble-author">{{ entry.authorLabel }}</span>
                  <time class="bubble-time">{{ entry.createdAt | date: 'shortTime' }}</time>
                </div>

                @switch (entry.kind) {
                  @case ('text') {
                    <p class="mb-0">{{ entry.text }}</p>
                  }
                  @case ('json') {
                    <pre class="bubble-json mb-0">{{ entry.payload | json }}</pre>
                  }
                  @case ('file') {
                    <div class="d-grid gap-3">
                      @if (isImageEntry(entry)) {
                        <img
                          class="bubble-image"
                          [src]="entry.downloadUrl"
                          [alt]="entry.fileName || 'Shared image'"
                        />
                      }

                      @if (isVideoEntry(entry)) {
                        <video
                          class="bubble-video"
                          [src]="entry.downloadUrl"
                          controls
                          autoplay
                          muted
                          playsinline
                          preload="metadata"
                        ></video>
                      }

                      @if (isIncomingJsonFileEntry(entry)) {
                        <app-json-file-viewer [entry]="entry"></app-json-file-viewer>
                      }

                      <div>
                        <div class="fw-semibold">{{ entry.fileName }}</div>
                        @if (entry.fileSize) {
                          <div class="small text-secondary-emphasis">{{ entry.fileSize | number }} bytes</div>
                        }
                      </div>

                      @if (entry.downloadUrl) {
                        <a class="bubble-download" [href]="entry.downloadUrl" [download]="entry.fileName">Download</a>
                      }
                    </div>
                  }
                  @case ('voice') {
                    <div class="voice-bubble">
                      <div class="voice-bubble-label">Voice message</div>
                      @if (entry.downloadUrl) {
                        <audio
                          class="voice-player"
                          [src]="entry.downloadUrl"
                          controls
                          preload="metadata"
                        ></audio>
                      }
                    </div>
                  }
                  @default {
                    @if (entry.showSpinner) {
                      <div class="bubble-system-status">
                        <span class="bubble-spinner" aria-hidden="true"></span>
                        <p class="mb-0">{{ entry.text }}</p>
                      </div>
                    } @else {
                      <p class="mb-0">{{ entry.text }}</p>
                    }
                  }
                }
              </article>
            }
          </div>

          <div class="composer">
            <textarea
              #composerTextarea
              class="form-control composer-textarea"
              rows="3"
              [(ngModel)]="messageText"
              (ngModelChange)="handleMessageTextChange($event)"
              (keydown.enter)="handleComposerEnter($event)"
              (click)="trackComposerSelection(composerTextarea)"
              (keyup)="trackComposerSelection(composerTextarea)"
              (select)="trackComposerSelection(composerTextarea)"
              [disabled]="!session.isSelectedPeerReady()"
              placeholder="Write a text message to your peer"
            ></textarea>

            <div class="composer-toolbar">
              @if (peer(); as selectedPeer) {
                <button
                  class="composer-call"
                  type="button"
                  [disabled]="!canStartSelectedVoiceCall()"
                  (click)="openCallChoice(selectedPeer.id)"
                  title="Start call"
                  aria-label="Start call"
                >
                  📞
                </button>

                @if (canEndSelectedVoiceCall()) {
                  <button
                    class="composer-hangup"
                    type="button"
                    (click)="endVoiceCall(selectedPeer.id)"
                    title="End call"
                    aria-label="End call"
                  >
                    🛑
                  </button>
                }

                <button
                  class="composer-voice"
                  type="button"
                  [disabled]="selectedPeer.channelState !== 'open' && !isRecordingVoice()"
                  (click)="toggleVoiceRecording()"
                  [title]="isRecordingVoice() ? 'Stop and send voice message' : 'Record voice message'"
                  [attr.aria-label]="isRecordingVoice() ? 'Stop and send voice message' : 'Record voice message'"
                  [class.composer-voice-recording]="isRecordingVoice()"
                >
                  {{ isRecordingVoice() ? '⏹️' : '🎙️' }}
                </button>

                <button
                  class="composer-dictation"
                  type="button"
                  [disabled]="!session.isSelectedPeerReady() || session.signalingState() !== 'connected' || isTranscribingDictation()"
                  (click)="toggleDictation(composerTextarea)"
                  [title]="
                    isDictating()
                      ? 'Stop dictation and transcribe'
                      : isTranscribingDictation()
                        ? 'Transcribing dictated audio'
                        : 'Start dictation'
                  "
                  [attr.aria-label]="
                    isDictating()
                      ? 'Stop dictation and transcribe'
                      : isTranscribingDictation()
                        ? 'Transcribing dictated audio'
                        : 'Start dictation'
                  "
                  [class.composer-dictation-active]="isDictating() || isTranscribingDictation()"
                >
                  {{ isDictating() ? '🛑' : isTranscribingDictation() ? '⏳' : '🗣️' }}
                </button>

                <input
                  #fileInput
                  class="composer-file-input"
                  type="file"
                  [disabled]="selectedPeer.channelState !== 'open'"
                  (change)="sendFile(selectedPeer.id, fileInput)"
                />
                <button
                  class="composer-plus"
                  type="button"
                  [disabled]="selectedPeer.channelState !== 'open'"
                  (click)="fileInput.click()"
                  title="Send file"
                  aria-label="Send file"
                >
                  +
                </button>
              }

              <button
                class="composer-image-generate"
                type="button"
                [disabled]="!peer() || session.signalingState() !== 'connected' || !messageText.trim()"
                (click)="requestGeneratedImage()"
                title="Generate image from prompt"
                aria-label="Generate image from prompt"
              >
                🖼️
              </button>

              <div class="composer-emoji-picker-shell">
                @if (emojiPickerOpen()) {
                  <div class="composer-emoji-picker">
                    @for (emoji of emojiOptions; track emoji) {
                      <button
                        class="composer-emoji-option"
                        type="button"
                        (click)="insertEmoji(emoji, composerTextarea)"
                        [attr.aria-label]="'Insert ' + emoji"
                        [title]="'Insert ' + emoji"
                      >
                        {{ emoji }}
                      </button>
                    }
                  </div>
                }
                <button
                  class="composer-emoji-trigger"
                  type="button"
                  [disabled]="!session.isSelectedPeerReady()"
                  (click)="toggleEmojiPicker($event)"
                  title="Insert emoji"
                  aria-label="Insert emoji"
                >
                  😀
                </button>
              </div>

              <button
                class="send-emoji"
                type="button"
                [disabled]="!session.isSelectedPeerReady()"
                (click)="sendMessage()"
                title="Send message"
                aria-label="Send message"
              >
                ✅
              </button>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>
</main>