Private
Public Access
ksmithandClaude Sonnet 5
4bac502b2c
@username tokens in a sent message are parsed against the room's actual members (skipping fenced/inline code, so pasted code isn't misread) and recorded as MessageMention rows, reusing #38's read-tracking and offline-member broadcast infrastructure rather than building a parallel notification path: - Sidebar: a mentioned-and-unread room shows a distinct highlight- colored badge instead of (not alongside) the plain unread dot -- computed the same way as has_unread, just scoped to messages that mention the caller, and cleared by the same last_read_at mark-read flow. - Push notifications: a mentioned offline recipient gets "X mentioned you: ..." instead of the generic "X: ...", still per-recipient since the same message can page some room members and not others. - Message rendering: a validated @username is highlighted inline, implemented by turning it into a `[@username](mention:username)` link before markdown parsing and overriding link rendering to style `mention:`-scheme links as a span instead of an anchor -- reuses markdown-to-jsx's existing parser rather than hand-rolling text-node splitting. - Composer: typing @ opens an autocomplete dropdown of matching room members (arrow keys to navigate, Enter/Tab/click to insert, Escape or moving the cursor away to dismiss). Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
44 lines
1.4 KiB
TypeScript
44 lines
1.4 KiB
TypeScript
import { Link } from 'react-router-dom'
|
|
import type { MyRoomItem } from '../types'
|
|
import { RoomAvatar } from './RoomAvatar'
|
|
import './RoomRow.css'
|
|
|
|
interface RoomRowProps {
|
|
room: MyRoomItem
|
|
colorIndex: number
|
|
active: boolean
|
|
}
|
|
|
|
export function RoomRow({ room, colorIndex, active }: RoomRowProps) {
|
|
return (
|
|
<Link to={`/rooms/${room.id}`} className={`room-row${active ? ' room-row-active' : ''}`}>
|
|
<RoomAvatar colorIndex={colorIndex} />
|
|
<div className="room-row-body">
|
|
<div className="room-row-name">
|
|
{room.name}
|
|
{room.is_private && (
|
|
<svg
|
|
className="room-row-lock"
|
|
width="12"
|
|
height="12"
|
|
viewBox="0 0 20 20"
|
|
fill="none"
|
|
aria-label="Private room"
|
|
>
|
|
<rect x="4" y="9" width="12" height="8" rx="2" stroke="currentColor" strokeWidth="1.6" />
|
|
<path d="M7 9V6.5a3 3 0 0 1 6 0V9" stroke="currentColor" strokeWidth="1.6" />
|
|
</svg>
|
|
)}
|
|
</div>
|
|
{room.description && <div className="room-row-subtitle">{room.description}</div>}
|
|
</div>
|
|
{!active && room.has_mention && (
|
|
<span className="room-row-mention-dot" aria-label="You were mentioned" />
|
|
)}
|
|
{!active && !room.has_mention && room.has_unread && (
|
|
<span className="room-row-unread-dot" aria-label="Unread messages" />
|
|
)}
|
|
</Link>
|
|
)
|
|
}
|