Add @-mention highlighting, sidebar badge, and push customization (#39)

@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>

frontend/src/pages/ChatShellPage.tsx

@@ -59,8 +59,8 @@ export function ChatShellPage() {
 
   const socket = useChatSocketContext()
 
-  const setRoomUnread = useCallback((id: string, hasUnread: boolean) => {
-    setRooms((prev) => prev.map((r) => (r.id === id ? { ...r, has_unread: hasUnread } : r)))
+  const clearRoomIndicators = useCallback((id: string) => {
+    setRooms((prev) => prev.map((r) => (r.id === id ? { ...r, has_unread: false, has_mention: false } : r)))
   }, [])
 
   useEffect(
@@ -68,9 +68,17 @@ export function ChatShellPage() {
       socket.subscribe((envelope) => {
         if (envelope.type === 'room_added') refreshRooms()
         else if (envelope.type === 'member_updated' && envelope.room_id === roomId) refreshMembers()
-        else if (envelope.type === 'unread_update') setRoomUnread(envelope.room_id, true)
+        else if (envelope.type === 'unread_update') {
+          setRooms((prev) =>
+            prev.map((r) =>
+              r.id === envelope.room_id
+                ? { ...r, has_unread: true, has_mention: r.has_mention || envelope.mentioned }
+                : r,
+            ),
+          )
+        }
       }),
-    [socket, refreshRooms, refreshMembers, roomId, setRoomUnread],
+    [socket, refreshRooms, refreshMembers, roomId],
   )
 
   useEffect(() => {
@@ -115,7 +123,7 @@ export function ChatShellPage() {
               onToggleInfo={() => setInfoOpen((v) => !v)}
               infoOpen={infoOpen}
               socket={socket}
-              onRoomRead={(id) => setRoomUnread(id, false)}
+              onRoomRead={clearRoomIndicators}
             />
           ) : (
             !isMobile && (