Private
Public Access
A DM is a Room with a new is_dm flag, not a separate model -- reuses all the membership/message/WS plumbing Room already has instead of duplicating it. The room's `name` (still required + globally unique) is an internal, never-displayed token derived deterministically from the two participants' sorted user IDs (dm_room_name), which makes find-or-create a single indexed lookup and gets free race-condition safety from the existing unique constraint -- a concurrent double- start from both people just hits the same IntegrityError->retry-as- lookup path create_room already established. Both participants get the plain 'member' role (no owner/admin distinction makes sense for a 1:1 DM), which incidentally reuses every existing role gate to block add-member, room-settings edits, and join-via-browse on a DM for free. update_room also gets an explicit is_dm guard independent of that, since renaming a DM isn't just a privacy concern -- it would silently corrupt the find-or-create invariant. DMs are excluded from both Browse Rooms and the admin portal's room listing (fully private, per scope). GET /api/rooms/mine precomputes each DM's other participant (name, avatar, presence) as dm_partner in one batched query, so the sidebar can render a DM row without a fetch per row. Frontend: a new "Direct Messages" sidebar section (searchable by partner name, not the internal room name), clicking someone in the People list starts or resumes a DM, and the chat header/composer/RoomInfoPanel all render the partner's identity instead of a room name where it's a DM. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
59 lines
2.0 KiB
TypeScript
59 lines
2.0 KiB
TypeScript
import { Link } from 'react-router-dom'
|
|
import { getUserAvatarUrl } from '../api/users'
|
|
import { hashIndex } from '../lib/avatar'
|
|
import type { MyRoomItem } from '../types'
|
|
import { RoomAvatar } from './RoomAvatar'
|
|
import { UserAvatar } from './UserAvatar'
|
|
import './RoomRow.css'
|
|
|
|
interface RoomRowProps {
|
|
room: MyRoomItem
|
|
colorIndex: number
|
|
active: boolean
|
|
}
|
|
|
|
export function RoomRow({ room, colorIndex, active }: RoomRowProps) {
|
|
const partner = room.dm_partner
|
|
|
|
return (
|
|
<Link to={`/rooms/${room.id}`} className={`room-row${active ? ' room-row-active' : ''}`}>
|
|
{partner ? (
|
|
<UserAvatar
|
|
username={partner.username}
|
|
colorIndex={hashIndex(partner.username)}
|
|
size={34}
|
|
avatarUrl={partner.avatar_filename ? getUserAvatarUrl(partner.user_id, partner.avatar_filename) : null}
|
|
status={partner.status}
|
|
/>
|
|
) : (
|
|
<RoomAvatar colorIndex={colorIndex} />
|
|
)}
|
|
<div className="room-row-body">
|
|
<div className="room-row-name">
|
|
{partner ? partner.display_name || partner.username : room.name}
|
|
{!partner && 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>
|
|
{!partner && 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>
|
|
)
|
|
}
|