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

@@ -0,0 +1,55 @@
+interface ReplyBarProps {
+  replyTo: {
+    id: string;
+    content: string;
+    author: {
+      username: string;
+      accent_color?: string;
+    };
+  } | null;
+  onCancel?: () => void;
+  compact?: boolean;
+}
+
+export function ReplyBar({ replyTo, onCancel, compact }: ReplyBarProps) {
+  if (!replyTo) return null;
+
+  const truncatedContent = replyTo.content.length > 100
+    ? replyTo.content.slice(0, 100) + '...'
+    : replyTo.content;
+
+  if (compact) {
+    return (
+      <div className="flex items-center gap-1 text-xs text-gb-fg-f font-mono pl-4 border-l-2 border-gb-orange">
+        <span className="text-gb-orange">↩</span>
+        <span style={{ color: replyTo.author.accent_color || 'var(--gb-fg-f)' }}>
+          {replyTo.author.username}
+        </span>
+        <span className="truncate">{truncatedContent}</span>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex items-center gap-2 px-3 py-1.5 bg-gb-bg-h border-l-2 border-gb-orange mb-1">
+      <span className="text-gb-orange text-xs font-mono">↩</span>
+      <span
+        className="text-xs font-mono font-bold"
+        style={{ color: replyTo.author.accent_color || 'var(--gb-fg-s)' }}
+      >
+        {replyTo.author.username}
+      </span>
+      <span className="text-xs font-mono text-gb-fg-f truncate flex-1">
+        {truncatedContent}
+      </span>
+      {onCancel && (
+        <button
+          onClick={onCancel}
+          className="text-xs text-gb-red font-mono hover:text-gb-orange transition-colors"
+        >
+          [x]
+        </button>
+      )}
+    </div>
+  );
+}