Add Phase 3 documentation, update sidebar

2026-06-28 16:46:10 -04:00
parent 5651481374
commit 20184fbb92
2 changed files with 87 additions and 0 deletions
@@ -0,0 +1,86 @@
+# Phase 3: Polish & PWA
+
+Phase 3 brings the Dumpster to daily-driver quality with social features, mobile support, and a polished user experience.
+
+## Features Implemented
+
+### Social Features
+
+| Feature | Status | Description |
+|---------|--------|-------------|
+| Typing indicators | ✅ | Real-time "user is typing..." display below messages |
+| Message reactions | ✅ | Emoji reactions with counts, click to toggle |
+| Message replies | ✅ | Quoted reply display, reply-to chain |
+| @mention autocomplete | ✅ | `@` triggers popup with user list |
+| Online presence | ✅ | Real-time online/idle/dnd/offline status |
+
+### PWA & Mobile
+
+| Feature | Status | Description |
+|---------|--------|-------------|
+| Service worker | ✅ | Cache-first strategy for offline support |
+| PWA manifest | ✅ | Add to Home Screen support |
+| Mobile nav | ✅ | Bottom nav bar for mobile |
+| Mobile drawer | ✅ | Slide-out drawer with servers + channels |
+| Safe area insets | ✅ | Support for phones with notches |
+| Push notifications | ⚠️ | Frontend ready, backend VAPID keys needed |
+
+### Polish
+
+| Feature | Status | Description |
+|---------|--------|-------------|
+| Dark/light mode | ✅ | Toggle with localStorage persistence |
+| Invite links | ✅ | Generate links with expiry and max uses |
+| Join flow | ✅ | `/invite/:code` route with accept button |
+| Giphy GIF picker | ✅ | Search and trending GIFs |
+| Profile editor | ✅ | Display name, bio, accent color, status text |
+
+## Technical Details
+
+### Presence Tracking
+
+The gateway hub tracks connected user IDs and broadcasts `PRESENCE_UPDATE` events. Idle detection triggers after 5 minutes of no WebSocket activity.
+
+### Typing Indicators
+
+`TYPING_START` events are broadcast to channel members. Frontend shows typing users for 3 seconds, then auto-clears.
+
+### Reactions
+
+- DB: `reactions` table with unique constraint on `(message_id, user_id, emoji)`
+- Backend: `POST /messages/{id}/reactions`, `DELETE /messages/{id}/reactions/{emoji}`
+- Frontend: `ReactionBar` component with emoji + count display
+
+### Invites
+
+- DB: `invites` table with code, expiry, max uses
+- Backend: `POST /servers/{id}/invites`, `GET /invites/{code}`, `POST /invites/{code}/join`
+- Frontend: `InviteModal` for generating, `JoinServer` for accepting
+
+### PWA
+
+- `manifest.json` with theme color and icons
+- `sw.js` with cache-first strategy and push support
+- `stores/push.ts` for subscription management
+- `InstallPrompt` component for "Add to Home Screen"
+
+### Mobile Layout
+
+- `MobileNav`: bottom nav bar with servers/channels/chat/members tabs
+- `MobileDrawer`: slide-out drawer with server bar + channel list
+- Responsive breakpoints in Tailwind config
+
+### Theming
+
+- `ThemeToggle` component in settings
+- CSS variables for all Gruvbox colors
+- `.light` class on `<html>` toggles light mode
+- localStorage persistence
+
+## What's Next
+
+Phase 4: Bots & Extensibility
+- Bot framework
+- Slash commands
+- Webhooks
+- Roles & permissions
@@ -6,6 +6,7 @@
 - [API Reference](API-Reference)
 - [Profiles](Profiles)
 - [Voice & Video](Voice-and-Video)
+- [Phase 3: Polish & PWA](Phase-3)
 - [Frontend Design](Frontend-Design)
 - [Self-Hosting](Self-Hosting)
 - [Roadmap](Roadmap)