Push Notifications & Team Messaging System

[Dharp02]

Overview

Plan and implement a real-time team communication system with push notifications and messaging functionality similar to Slack.

Goals
Enable push notifications for messages and mentions.
Allow team-based communication within the Messages tab.
Support private messaging between users.
Implement user mentions using @username.
Features
1. Push Notifications
Add support for push notifications on mobile/web.
Notifications should trigger for:
New team messages
Private messages
Mentions using @
Replies in conversations
Allow users to enable/disable notifications from settings.
Handle notification permissions gracefully.
2. Team Chat / Messages Tab
Create a shared team chat space inside the Messages tab.
Users within the same team/workspace should be able to:
Send messages
View conversation history
See timestamps and sender info
Consider real-time updates using websockets or realtime services.
3. Private Messaging
Allow users to send direct/private messages to another user.
4. Mentions (@username)
Support tagging users using @.
Add autocomplete/search for usernames while typing.
Highlight mentions visually in messages.
Trigger push notifications for mentioned users.
5. Threaded Replies / Conversations
Allow replying to a specific message.
Maintain message context similar to Slack/Discord.
Technical Considerations
Design backend schema for:
Messages
Threads/replies
Mentions
Notification events
Plan websocket/realtime event architecture.
Ensure proper authorization and team-level access control.
UI/UX Considerations
Clean chat interface similar to Slack.
Unread badges/counts.
Mobile-friendly experience.
Expected Outcome

Users should be able to communicate seamlessly within teams through real-time messaging with push notifications, mentions, private messaging, and threaded conversations in a Slack-like experience.

Here's the plan:

---

Plan: Team Group Chat + Push Notifications

TL;DR — Add a team-wide group channel tab to the existing Messages page. Push notifications wire into message events. Existing admin↔member DM threads stay as-is. @mentions in the channel highlight the target, trigger a push, and offer to open a DM.

---

Phase 1 — Push Subscription Backend Infrastructure

1. Install web-push npm package in backend — the /v1/notifications/push-subscribe endpoint doesn't exist yet and web-push is missing
2. Add PushSubscription MongoDB model (backend/src/models/push-subscription.model.ts): { userId, type: 'webpush'|'native', endpoint?, keys?, token?, platform? }
3. Add pushSubscriptionsCollection() to index.ts
4. Add POST /v1/notifications/push-subscribe + POST /v1/notifications/push-unsubscribe to notifications.ts
5. Create backend/src/services/push.service.ts — sendPush(userId, payload) queries subscriptions → sends via web-push for web, FCM via firebase-admin for native (gracefully skips if FIREBASE_SERVICE_ACCOUNT env not configured)

Phase 2 — Channel Messages Backend

6. Create backend/src/models/channel-message.model.ts: { teamId, fromUserId, senderName, text, mentions[], replyToId?, replyToText?, createdAt }
7. Create backend/src/services/channel.service.ts — getMessages(teamId, userId), send(userId, data) + SSE broadcast
8. Create backend/src/routes/channels.ts:
   • GET /v1/channels/:teamId/messages — last 100 messages
   • POST /v1/channels/:teamId/messages — send; triggers push to all team members except sender
   • GET /v1/channels/:teamId/stream — SSE
9. Register channelRoutes in server.ts
10. Extend message.service.ts send() to call pushService.sendPush(toUserId, ...) after DM stored

Phase 3 — Frontend: Channel Tab + @Mention Composer

11. Add channelApi to api.ts (getMessages, send, openStream, ChannelMessage type)
12. Create src/features/messages/ChannelView.tsx — message list with sender/time, reply-to preview, @ autocomplete dropdown from team members
13. Update MessagesPage.tsx:
    • Tab nav: Channel | Direct Messages (existing threads unchanged)
    • Channel tab renders <ChannelView> with its own SSE
    • @mention callback opens the DM with that person if a valid admin↔member pair exists

Phase 4 — Service Worker + Deep Links

14. Extend sw.js for type: 'channel-message', 'mention', 'dm' — formats body as "Alice: hey team…"; sets url = /app/messages?openTeam=X&openChannel=true
15. Update MessagesPage.tsx to handle ?openChannel=true URL param → auto-switch to Channel tab

---

Key files

• notifications.ts — push-subscribe endpoints
• message.service.ts — add push on DM send
• index.ts — new collections
• server.ts — register channel routes
• MessagesPage.tsx — channel tab + URL handling
• api.ts — channelApi
• sw.js — new push types

New files: push-subscription.model.ts, channel-message.model.ts, push.service.ts, channel.service.ts, channels.ts (route), ChannelView.tsx

Verification

1. Enable push in Settings → no 404 on /v1/notifications/push-subscribe
2. Send channel message → all team members receive via SSE, push fires if subscribed
3. @mention a user → channel message shows highlighted @name; DM tab opens with them
4. Reply to a message → reply preview appears in composer and in the channel
5. Lock browser → send message → push notification appears → click navigates to /app/messages
6. npm run lint && npm run typecheck pass for both frontend and backend

---

Further considerations:

1. FCM for native (iOS/Android) requires firebase-admin + a FIREBASE_SERVICE_ACCOUNT env var. Do you have a Firebase service account key? If not, we can ship web push first and wire FCM in separately.
2. @mention DM scope — currently DMs are admin↔member only. If two plain members @mention each other, there's no valid DM thread. Should we expand DMs to any-to-any for this feature, or just send a push notification without opening a DM?

[Dharp02]

Part of it is done in this PR - #105