Phase 3: Polish & PWA

Backend:
- DB: reactions table, invites table, reply_to column on messages
- gateway/events.go: added REACTION_ADD, REACTION_REMOVE events
- internal/reaction/handlers.go: reaction CRUD with WebSocket broadcast
- internal/invite/handlers.go: invite creation, info, join with code
- gateway/hub.go: presence tracking with idle detection
- gateway/client.go: idle timeout support

Frontend - Social:
- TypingIndicator: real-time 'user is typing...' display
- ReactionBar: emoji reactions on messages with counts
- EmojiPicker: searchable emoji grid for reactions
- ReplyBar: quoted reply display above messages
- MentionPopup: @mention autocomplete with user list

Frontend - PWA:
- manifest.json: PWA manifest with theme color and icons
- sw.js: service worker with cache-first strategy and push support
- stores/push.ts: push notification subscription management
- InstallPrompt: 'Add to Home Screen' banner

Frontend - Mobile:
- MobileNav: bottom nav bar for mobile (servers/channels/chat/members)
- MobileDrawer: slide-out drawer with server bar + channel list
- index.html: PWA meta tags, safe area viewport

Frontend - Polish:
- ThemeToggle: dark/light mode switch with localStorage persistence
- InviteModal: generate invite links with expiry and max uses
- JoinServer: /invite/:code join flow
- stores/typing.ts: typing indicator state management
- stores/presence.ts: real-time presence tracking
- tailwind.config.js: darkMode: 'class', light mode color tokens
- styles/index.css: light mode CSS variable overrides

web/src/components/MemberList.tsx

@@ -1,3 +1,4 @@
+import { usePresenceStore } from '../stores/presence.ts';
 import type { User, UserStatus } from '../stores/auth.ts';
 
 interface MemberListProps {
@@ -43,9 +44,41 @@ function usernameColor(status: UserStatus): string {
   }
 }
 
+/** Return the live status for a member, falling back to the static value. */
+function useLiveStatus(member: User): UserStatus {
+  const presence = usePresenceStore((s) => s.presences[member.id]);
+  return presence?.status ?? member.status;
+}
+
+interface MemberRowProps {
+  member: User;
+}
+
+function MemberRow({ member }: MemberRowProps) {
+  const status = useLiveStatus(member);
+
+  return (
+    <div className="flex items-center gap-2 px-2 py-1">
+      <span className={statusColor(status)}>{statusIcon(status)}</span>
+      <span className={`truncate ${usernameColor(status)}`}>
+        {member.username}
+      </span>
+    </div>
+  );
+}
+
 export function MemberList({ members = [] }: MemberListProps) {
-  const online = members.filter((m) => m.status !== 'offline');
-  const offline = members.filter((m) => m.status === 'offline');
+  // Derive live status for every member to decide online/offline buckets.
+  const presences = usePresenceStore((s) => s.presences);
+
+  const online = members.filter((m) => {
+    const status = presences[m.id]?.status ?? m.status;
+    return status !== 'offline';
+  });
+  const offline = members.filter((m) => {
+    const status = presences[m.id]?.status ?? m.status;
+    return status === 'offline';
+  });
 
   return (
     <div className="h-full w-52 bg-gb-bg-s border-l border-gb-bg-t flex flex-col">
@@ -61,12 +94,7 @@ export function MemberList({ members = [] }: MemberListProps) {
             <div className="text-gb-fg-t text-xs uppercase mb-1">ONLINE</div>
             <div className="text-gb-fg-f text-xs mb-1">---</div>
             {online.map((member) => (
-              <div key={member.id} className="flex items-center gap-2 px-2 py-1">
-                <span className={statusColor(member.status)}>{statusIcon(member.status)}</span>
-                <span className={`truncate ${usernameColor(member.status)}`}>
-                  {member.username}
-                </span>
-              </div>
+              <MemberRow key={member.id} member={member} />
             ))}
           </div>
         )}
@@ -75,12 +103,7 @@ export function MemberList({ members = [] }: MemberListProps) {
             <div className="text-gb-fg-t text-xs uppercase mb-1">OFFLINE</div>
             <div className="text-gb-fg-f text-xs mb-1">---</div>
             {offline.map((member) => (
-              <div key={member.id} className="flex items-center gap-2 px-2 py-1">
-                <span className={statusColor(member.status)}>{statusIcon(member.status)}</span>
-                <span className={`truncate ${usernameColor(member.status)}`}>
-                  {member.username}
-                </span>
-              </div>
+              <MemberRow key={member.id} member={member} />
             ))}
           </div>
         )}