Add direct messages (#52)

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>

frontend/src/components/RoomRow.tsx

@@ -1,6 +1,9 @@
 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 {
@@ -10,13 +13,25 @@ interface RoomRowProps {
 }
 
 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' : ''}`}>
-      <RoomAvatar colorIndex={colorIndex} />
+      {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">
-          {room.name}
-          {room.is_private && (
+          {partner ? partner.display_name || partner.username : room.name}
+          {!partner && room.is_private && (
             <svg
               className="room-row-lock"
               width="12"
@@ -30,7 +45,7 @@ export function RoomRow({ room, colorIndex, active }: RoomRowProps) {
             </svg>
           )}
         </div>
-        {room.description && <div className="room-row-subtitle">{room.description}</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" />