1
Phase 3
hobokenchicken edited this page 2026-06-28 16:46:10 -04:00

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