From 20184fbb928013652ceba0e79535cd62a9c1b2a2 Mon Sep 17 00:00:00 2001 From: hobokenchicken Date: Sun, 28 Jun 2026 16:46:10 -0400 Subject: [PATCH] Add Phase 3 documentation, update sidebar --- Phase-3.md | 86 +++++++++++++++++++++++++++++++++++++++++++++++++++++ _Sidebar.md | 1 + 2 files changed, 87 insertions(+) create mode 100644 Phase-3.md diff --git a/Phase-3.md b/Phase-3.md new file mode 100644 index 0000000..9c5cfa4 --- /dev/null +++ b/Phase-3.md @@ -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 `` toggles light mode +- localStorage persistence + +## What's Next + +Phase 4: Bots & Extensibility +- Bot framework +- Slash commands +- Webhooks +- Roles & permissions diff --git a/_Sidebar.md b/_Sidebar.md index f5ede5b..0b86923 100644 --- a/_Sidebar.md +++ b/_Sidebar.md @@ -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)