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

@@ -0,0 +1,55 @@
+import { useState } from 'react';
+
+const EMOJI_LIST = [
+  '👍', '❤️', '😂', '😮', '😢', '😡', '🎉', '🔥',
+  '👀', '💯', '✨', '🙏', '💀', '🤡', '🤔', '😎',
+  '🫡', '🫠', '🤯', '🥳', '😴', '🤮', '👻', '🎃',
+  '🚀', '⭐', '🌈', '🍕', '🍺', '☕', '🎮', '🎵',
+];
+
+interface EmojiPickerProps {
+  onSelect: (emoji: string) => void;
+  onClose: () => void;
+}
+
+export function EmojiPicker({ onSelect, onClose }: EmojiPickerProps) {
+  const [search, setSearch] = useState('');
+
+  const filtered = search
+    ? EMOJI_LIST.filter(e => e.includes(search))
+    : EMOJI_LIST;
+
+  return (
+    <div className="absolute bottom-full left-0 mb-1 bg-gb-bg border border-gb-bg-t p-2 min-w-[200px] z-50">
+      <div className="flex items-center justify-between mb-2">
+        <span className="text-xs text-gb-fg-f font-mono">EMOJI</span>
+        <button onClick={onClose} className="text-xs text-gb-red font-mono">[x]</button>
+      </div>
+      <input
+        type="text"
+        value={search}
+        onChange={(e) => setSearch(e.target.value)}
+        placeholder="search..."
+        className="w-full px-2 py-1 mb-2 text-xs font-mono bg-gb-bg-s text-gb-fg border-none outline-none"
+        autoFocus
+      />
+      <div className="grid grid-cols-8 gap-1">
+        {filtered.map((emoji) => (
+          <button
+            key={emoji}
+            onClick={() => {
+              onSelect(emoji);
+              onClose();
+            }}
+            className="w-6 h-6 flex items-center justify-center text-sm hover:bg-gb-bg-s transition-colors"
+          >
+            {emoji}
+          </button>
+        ))}
+      </div>
+      {filtered.length === 0 && (
+        <div className="text-xs text-gb-fg-f font-mono text-center py-2">[no results]</div>
+      )}
+    </div>
+  );
+}