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)