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/RoomInfoPanel.tsx

@@ -23,6 +23,7 @@ import {
 } from '../api/webhooks'
 import { useAuth } from '../context/AuthContext'
 import { useResizableWidth } from '../hooks/useResizableWidth'
+import { hashIndex } from '../lib/avatar'
 import { MOBILE_BREAKPOINT, useWindowWidth } from '../hooks/useWindowWidth'
 import { formatFileSize } from '../lib/fileSize'
 import type {
@@ -117,8 +118,11 @@ export function RoomInfoPanel({
   const canManage = myRole === 'admin' || myRole === 'owner'
   // #48: room owner, room admin, or site admin (regardless of their role in
   // *this* room) can edit room settings, including privacy -- matches the
-  // backend PATCH /api/rooms/{id} gate exactly (see rooms.py).
-  const canEditSettings = canManage || !!user?.is_site_admin
+  // backend PATCH /api/rooms/{id} gate exactly (see rooms.py). #52: never
+  // for a DM regardless of role -- mirrors update_room's own
+  // CannotModifyDmError guard, since a DM's `name` is an internal token,
+  // not something editable.
+  const canEditSettings = !room.is_dm && (canManage || !!user?.is_site_admin)
 
   useEffect(() => {
     setNameDraft(room.name)
@@ -295,12 +299,32 @@ export function RoomInfoPanel({
       </div>
 
       <div className="room-info-summary">
-        <RoomAvatar colorIndex={0} size={56} />
-        <div className="room-info-name">#{room.name}</div>
-        <div className="room-info-sub">
-          {members.length} member{members.length === 1 ? '' : 's'}
-          {room.is_private && ' · Private'}
-        </div>
+        {room.dm_partner ? (
+          <>
+            <UserAvatar
+              username={room.dm_partner.username}
+              colorIndex={hashIndex(room.dm_partner.username)}
+              size={56}
+              avatarUrl={
+                room.dm_partner.avatar_filename
+                  ? getUserAvatarUrl(room.dm_partner.user_id, room.dm_partner.avatar_filename)
+                  : null
+              }
+              status={room.dm_partner.status}
+            />
+            <div className="room-info-name">{room.dm_partner.display_name || room.dm_partner.username}</div>
+            <div className="room-info-sub">{room.dm_partner.status === 'online' ? 'Online' : 'Offline'}</div>
+          </>
+        ) : (
+          <>
+            <RoomAvatar colorIndex={0} size={56} />
+            <div className="room-info-name">#{room.name}</div>
+            <div className="room-info-sub">
+              {members.length} member{members.length === 1 ? '' : 's'}
+              {room.is_private && ' · Private'}
+            </div>
+          </>
+        )}
       </div>
 
       <div className="room-info-section">
@@ -572,15 +596,17 @@ export function RoomInfoPanel({
         </div>
       )}
 
-      <button
-        type="button"
-        className="room-info-leave"
-        onClick={handleLeave}
-        disabled={myRole === 'owner'}
-        title={myRole === 'owner' ? 'Transfer ownership before leaving' : undefined}
-      >
-        Leave room
-      </button>
+      {!room.is_dm && (
+        <button
+          type="button"
+          className="room-info-leave"
+          onClick={handleLeave}
+          disabled={myRole === 'owner'}
+          title={myRole === 'owner' ? 'Transfer ownership before leaving' : undefined}
+        >
+          Leave room
+        </button>
+      )}
 
       {lightboxSrc && <ImageLightbox src={lightboxSrc} onClose={() => setLightboxSrc(null)} />}
       {previewFile && (