Spaces:
Runtime error
Runtime error
| # Social Panel — chat, DMs, online presence, posts | |
| The SocialPanel is a slide-up sheet docked at the bottom of every authenticated | |
| page. Implemented in | |
| [`client/social/SocialPanel.tsx`](../../client/social/SocialPanel.tsx) + | |
| `client/social/useSocial.ts` (custom hook that owns the WebSocket subscriptions). | |
| It is the **single place** in the app that surfaces real-time: | |
| - 🟢 Online presence list | |
| - 💬 Public global chat (markdown + code-block aware) | |
| - ✉️ Direct messages (1-on-1) | |
| - 👥 Friends manager (add / remove / block) | |
| - 📰 Posts feed (same model as profile feed) | |
| - 🔔 Notifications (mentions, reactions) | |
| ## Tabs | |
| `type Tab = "chat" | "online" | "friends" | "dms" | "feed";` | |
| | Tab | What you see | | |
| |-----|--------------| | |
| | `chat` | Global server-wide chatroom; collapsible code blocks; nicknames colored by role. | | |
| | `online` | Live list of presence (idle ⏰, active 🟢). Click a user → opens their DM. | | |
| | `friends` | Search + add friends, sees mutuals, in-line "chat" button. | | |
| | `dms` | Active DM thread with `activeDM`. Sidebar lists every started conversation. | | |
| | `feed` | Same posts you see on profiles, but server-wide, ordered by recency. Reactions + comments work inline. | | |
| ## Real-time pipeline | |
| ``` | |
| client/social/useSocial.ts | |
| │ ws://…/ws/social (mux channel) | |
| ▼ | |
| exocore-web/server/social/hub.ts | |
| │ Token-bucket rate-limited | |
| ▼ | |
| Exocore-Backend/src/auth/social.ts (chat.json, posts.json, friends.enc) | |
| │ Mirrored to Google Drive every N seconds | |
| ▼ | |
| client/social/SocialPanel.tsx re-renders via useSocial state | |
| ``` | |
| Server topics broadcast over the multiplexed WebSocket: | |
| - `chat.message` — new chat line | |
| - `chat.delete` — moderator removed a line | |
| - `dm.message` — incoming DM | |
| - `presence.online` / `presence.offline` | |
| - `friends.update` | |
| - `posts.new` / `posts.delete` / `posts.react` / `posts.comment` | |
| ## Visual reference | |
| The SocialPanel is owned by `Dashboard.tsx`, so it inherits the dashboard | |
| screenshot. To see it standalone, expand the bottom drawer ("💬 Open chat") | |
| once authenticated. | |
| | Desktop (drawer in dashboard) | Mobile (drawer collapses to bottom-tab) | | |
| |---|---| | |
| |  |  | | |
| (The captured run is unauthenticated → login redirect; once a user logs in | |
| the social panel pops up at the bottom of the same page.) | |
| ## RPC channels (also reachable for non-WS calls) | |
| | Channel | Purpose | | |
| |---------|---------| | |
| | `chat.history` | Pull last N global messages | | |
| | `chat.send` | Post a new chat line (rate-limited) | | |
| | `chat.delete` | Mod-only delete | | |
| | `dm.history` | Pull a single conversation | | |
| | `dm.send` | Send DM | | |
| | `social.friend` | Add / remove / block / accept | | |
| | `social.online` | Snapshot of who is online right now | | |
| | `posts.feed` | Server-wide posts feed | | |
| | `posts.create` | New post (text + optional image) | | |
| | `posts.react` | Toggle reaction emoji | | |
| | `posts.comment` | Append comment | | |
| ## XP integration | |
| Each successful action grants XP through | |
| [`Exocore-Backend/src/services/xpService.ts`](../../Exocore-Backend/src/services/xpService.ts): | |
| | Action | XP | Cooldown | | |
| |--------|----|----------| | |
| | Send chat message | 1 | 60 s per user | | |
| | Send DM | 1 | 60 s per user | | |
| | Create post | 5 | none | | |
| | Receive reaction | 1 per react | none | | |
| | Comment on post | 2 | 30 s per user | | |
| Triggered events bubble through the leaderboard in real time. | |
| ## Roles + colors | |
| Implemented in `ROLE_TITLES`: | |
| | Role | Title | Chip color | | |
| |-------|--------|-----------| | |
| | owner | OWNER | yellow / gold | | |
| | admin | ADMIN | red | | |
| | mod | MOD | violet | | |
| | user | USER | grey | | |