peer list at top, emoji w/o bubbles
This commit is contained in:
@@ -70,6 +70,98 @@
|
||||
<div class="chat-header-main">
|
||||
<a class="back-link" routerLink="/" aria-label="Back to dashboard">←</a>
|
||||
<h1 class="chat-header-title mb-0">{{ connectedUser.displayName }}</h1>
|
||||
@if (displayedPeer(); as selectedPeer) {
|
||||
<div class="peer-dropdown" (click)="$event.stopPropagation()">
|
||||
<button
|
||||
class="peer-dropdown-trigger peer-tile"
|
||||
type="button"
|
||||
[class.peer-tile-active]="true"
|
||||
[class.peer-tile-unread]="isPeerUnread(selectedPeer.id)"
|
||||
(click)="togglePeerDropdown()"
|
||||
[attr.aria-expanded]="peerDropdownOpen()"
|
||||
aria-haspopup="listbox"
|
||||
aria-label="Choose peer"
|
||||
>
|
||||
<span class="peer-tile-main text-start">
|
||||
<span class="peer-tile-row">
|
||||
<span class="peer-tile-title">
|
||||
<span class="fw-semibold">{{ selectedPeer.displayName }}</span>
|
||||
@if (isPeerTyping(selectedPeer.id)) {
|
||||
<span class="peer-typing-dots" aria-label="Typing">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</span>
|
||||
}
|
||||
</span>
|
||||
<span class="peer-tile-indicators">
|
||||
<span
|
||||
class="status-led peer-tile-status"
|
||||
[class.status-led-ok]="selectedPeer.channelState === 'open' || selectedPeer.connectionState === 'connected'"
|
||||
[class.status-led-offline]="selectedPeer.channelState !== 'open' && selectedPeer.connectionState !== 'connected'"
|
||||
[attr.aria-label]="
|
||||
selectedPeer.channelState === 'open' || selectedPeer.connectionState === 'connected'
|
||||
? 'Connected'
|
||||
: 'Disconnected'
|
||||
"
|
||||
></span>
|
||||
<span class="peer-dropdown-caret" [class.peer-dropdown-caret-open]="peerDropdownOpen()">▾</span>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</button>
|
||||
|
||||
@if (peerDropdownOpen()) {
|
||||
<div class="peer-dropdown-menu" role="listbox">
|
||||
@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)="selectPeerFromDropdown(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>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
<div class="status-indicators">
|
||||
<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>
|
||||
@@ -107,105 +199,6 @@
|
||||
</div>
|
||||
|
||||
<div class="chat-layout">
|
||||
<aside class="peer-sidebar" (click)="$event.stopPropagation()">
|
||||
@if (displayedPeer(); as selectedPeer) {
|
||||
<div class="peer-dropdown">
|
||||
<button
|
||||
class="peer-dropdown-trigger peer-tile"
|
||||
type="button"
|
||||
[class.peer-tile-active]="true"
|
||||
[class.peer-tile-unread]="isPeerUnread(selectedPeer.id)"
|
||||
(click)="togglePeerDropdown()"
|
||||
[attr.aria-expanded]="peerDropdownOpen()"
|
||||
aria-haspopup="listbox"
|
||||
aria-label="Choose peer"
|
||||
>
|
||||
<span class="peer-tile-main text-start">
|
||||
<span class="peer-tile-row">
|
||||
<span class="peer-tile-title">
|
||||
<span class="fw-semibold">{{ selectedPeer.displayName }}</span>
|
||||
@if (isPeerTyping(selectedPeer.id)) {
|
||||
<span class="peer-typing-dots" aria-label="Typing">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</span>
|
||||
}
|
||||
</span>
|
||||
<span class="peer-tile-indicators">
|
||||
<span
|
||||
class="status-led peer-tile-status"
|
||||
[class.status-led-ok]="selectedPeer.channelState === 'open' || selectedPeer.connectionState === 'connected'"
|
||||
[class.status-led-offline]="selectedPeer.channelState !== 'open' && selectedPeer.connectionState !== 'connected'"
|
||||
[attr.aria-label]="
|
||||
selectedPeer.channelState === 'open' || selectedPeer.connectionState === 'connected'
|
||||
? 'Connected'
|
||||
: 'Disconnected'
|
||||
"
|
||||
></span>
|
||||
<span class="peer-dropdown-caret" [class.peer-dropdown-caret-open]="peerDropdownOpen()">▾</span>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</button>
|
||||
|
||||
@if (peerDropdownOpen()) {
|
||||
<div class="peer-dropdown-menu" role="listbox">
|
||||
@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)="selectPeerFromDropdown(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>
|
||||
}
|
||||
</div>
|
||||
} @else {
|
||||
<div class="empty-chat empty-peers">
|
||||
No peers are currently connected.
|
||||
</div>
|
||||
}
|
||||
</aside>
|
||||
|
||||
<div class="chat-main" (click)="closePeerDropdown()">
|
||||
<div #conversationContainer class="conversation">
|
||||
<ng-container [ngTemplateOutlet]="conversationBubbles"></ng-container>
|
||||
@@ -376,8 +369,9 @@
|
||||
[class.bubble-incoming]="entry.direction === 'incoming'"
|
||||
[class.bubble-outgoing]="entry.direction === 'outgoing'"
|
||||
[class.bubble-system]="entry.direction === 'system'"
|
||||
[class.bubble-emoji-only]="isEmojiOnlyEntry(entry)"
|
||||
>
|
||||
@if (entry.direction !== 'system') {
|
||||
@if (entry.direction !== 'system' && !isEmojiOnlyEntry(entry)) {
|
||||
<div class="bubble-actions">
|
||||
@if (isGeneratedImageEntry(entry)) {
|
||||
<button
|
||||
@@ -420,14 +414,16 @@
|
||||
}
|
||||
</div>
|
||||
}
|
||||
<div class="bubble-meta">
|
||||
<span class="bubble-author">{{ entry.authorLabel }}</span>
|
||||
<time class="bubble-time">{{ entry.createdAt | date: 'shortTime' }}</time>
|
||||
</div>
|
||||
@if (!isEmojiOnlyEntry(entry)) {
|
||||
<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>
|
||||
<p class="mb-0" [class.emoji-only-text]="isEmojiOnlyEntry(entry)">{{ entry.text }}</p>
|
||||
}
|
||||
@case ('json') {
|
||||
<pre class="bubble-json mb-0">{{ entry.payload | json }}</pre>
|
||||
|
||||
Reference in New Issue
Block a user