Private
Public Access
ksmithandClaude Sonnet 5
68e487e5ec
Shows a dot on rooms with unread messages in the sidebar, updated live over WebSocket. Reuses the same offline-member audience computation already used for push notifications: a member gets the real-time signal whenever they aren't currently connected to that room's channel, which correctly covers both "room not open" and "room open but tab backgrounded" (the client leaves a room's channel while hidden). Persisted server-side via a new room_memberships.last_read_at column so state survives reload and stays consistent across devices, advanced by an explicit mark-read call the frontend makes on room-open and on each live message received while the room is genuinely visible -- gated on a live visibility check, not a cached ref, so a backgrounded-but-open room keeps accumulating unread instead of auto-marking-read the instant a message arrives somewhere it can't be seen. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
61 lines
1.0 KiB
CSS
61 lines
1.0 KiB
CSS
.room-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
padding: 9px var(--sp-4);
|
|
cursor: pointer;
|
|
background: transparent;
|
|
border-left: 2px solid transparent;
|
|
text-decoration: none;
|
|
color: inherit;
|
|
}
|
|
|
|
.room-row:hover {
|
|
background: color-mix(in srgb, var(--ds-text) 5%, transparent);
|
|
}
|
|
|
|
.room-row-active,
|
|
.room-row-active:hover {
|
|
background: var(--ds-surface-2);
|
|
border-left-color: var(--ds-accent);
|
|
}
|
|
|
|
.room-row-body {
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
|
|
.room-row-name {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
font-weight: 600;
|
|
font-size: 0.9rem;
|
|
color: var(--ds-text);
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.room-row-lock {
|
|
flex: none;
|
|
color: var(--ds-muted);
|
|
}
|
|
|
|
.room-row-subtitle {
|
|
font-size: 0.8rem;
|
|
color: var(--ds-muted);
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
margin-top: 2px;
|
|
}
|
|
|
|
.room-row-unread-dot {
|
|
flex: none;
|
|
width: 8px;
|
|
height: 8px;
|
|
border-radius: 50%;
|
|
background: var(--ds-accent);
|
|
}
|