import "./DesktopChatSidebar.js" import "./DesktopChatThread.js" css(` chat- { font-family: 'Arial'; scrollbar-width: none; -ms-overflow-style: none; } chat- input::placeholder { color: var(--headertext); opacity: 0.35; } `) class Chat extends Shadow { constructor() { super() this.currentUser = { id: 1, name: "You" } this.selectedChatId = null const ago = (h) => new Date(Date.now() - h * 3600000); const msg = (senderId, senderName, text, hoursAgo) => ({ id: Math.random(), senderId, senderName, text, sentAt: ago(hoursAgo) }); this.chats = [ // ── Direct messages ─────────────────────────────────────── { id: 1, type: "dm", name: "Sarah McIntyre", members: ["Sarah McIntyre"], memberCount: 2, unread: 2, lastMessage: { senderId: 2, senderName: "Sarah McIntyre", text: "Can you review the PR when you get a chance?", sentAt: ago(0.3) }, messages: [ msg(1, "You", "Hey Sarah, did you see the new design mockups?", 24), msg(2, "Sarah McIntyre", "Just looked — they're really clean. I love the new sidebar.", 23.5), msg(1, "You", "Agreed. Alex did a great job.", 23.4), msg(2, "Sarah McIntyre", "Are we going to ship this week or wait for the backend?", 5), msg(1, "You", "Let's aim for Thursday. I'll sync with Marcus.", 4.8), msg(2, "Sarah McIntyre", "Sounds good 👍", 4.7), msg(2, "Sarah McIntyre", "Can you review the PR when you get a chance?", 0.3), ] }, { id: 2, type: "dm", name: "Marcus Webb", members: ["Marcus Webb"], memberCount: 2, unread: 0, lastMessage: { senderId: 1, senderName: "You", text: "I'll send over the specs by EOD", sentAt: ago(1.5) }, messages: [ msg(3, "Marcus Webb", "Hey, the API endpoint is returning 500s on staging.", 3), msg(1, "You", "Oh no — is it the auth middleware again?", 2.9), msg(3, "Marcus Webb", "Yep. Same issue as last week.", 2.8), msg(1, "You", "I'll patch it now. Give me 20 mins.", 2.75), msg(3, "Marcus Webb", "Thanks, no rush.", 2.7), msg(1, "You", "Fixed. Can you redeploy and check?", 2.2), msg(3, "Marcus Webb", "All green 🎉 Thanks!", 2.1), msg(1, "You", "I'll send over the specs by EOD", 1.5), ] }, { id: 3, type: "dm", name: "Priya Anand", members: ["Priya Anand"], memberCount: 2, unread: 0, lastMessage: { senderId: 4, senderName: "Priya Anand", text: "See you at the standup!", sentAt: ago(18) }, messages: [ msg(4, "Priya Anand", "Quick question — what's the launch date for v2?", 20), msg(1, "You", "Still TBD, but we're targeting end of May.", 19.8), msg(4, "Priya Anand", "Got it. I'll update the roadmap doc.", 19.5), msg(1, "You", "Perfect, thanks Priya.", 19.4), msg(4, "Priya Anand", "See you at the standup!", 18), ] }, // ── Groups ──────────────────────────────────────────────── { id: 4, type: "group", name: "Product Team", members: ["Sarah McIntyre", "Marcus Webb", "Priya Anand", "You"], memberCount: 4, unread: 5, lastMessage: { senderId: 2, senderName: "Sarah McIntyre", text: "I've updated the Figma file with the new flows", sentAt: ago(0.15) }, messages: [ msg(3, "Marcus Webb", "Morning everyone! API docs are updated.", 8), msg(4, "Priya Anand", "Nice work Marcus 🙌", 7.9), msg(1, "You", "I'll start on the integration tests today.", 7.8), msg(2, "Sarah McIntyre", "Great. I'm finishing up the onboarding screens.", 7.5), msg(4, "Priya Anand", "Can we do a quick sync at 2pm?", 2), msg(1, "You", "Works for me.", 1.95), msg(3, "Marcus Webb", "Same", 1.9), msg(2, "Sarah McIntyre", "I'll send the invite.", 1.85), msg(2, "Sarah McIntyre", "I've updated the Figma file with the new flows", 0.15), ] }, { id: 5, type: "group", name: "Design Review", members: ["Sarah McIntyre", "You", "Jordan Kim"], memberCount: 3, unread: 0, lastMessage: { senderId: 5, senderName: "Jordan Kim", text: "The contrast on mobile looks off — can we bump it?", sentAt: ago(26) }, messages: [ msg(5, "Jordan Kim", "Hey, sharing the first round of designs for the settings page.", 30), msg(2, "Sarah McIntyre", "These look great! Love the card layout.", 29.5), msg(1, "You", "Agreed. One thought — the spacing on the form feels a bit tight.", 29), msg(5, "Jordan Kim", "Good call. I'll loosen it up.", 28.8), msg(2, "Sarah McIntyre", "Also maybe we increase the font size slightly?", 28), msg(5, "Jordan Kim", "The contrast on mobile looks off — can we bump it?", 26), ] }, // ── Channels ────────────────────────────────────────────── { id: 6, type: "channel", name: "general", members: ["Sarah McIntyre", "Marcus Webb", "Priya Anand", "Jordan Kim", "You"], memberCount: 24, unread: 11, lastMessage: { senderId: 3, senderName: "Marcus Webb", text: "Just pushed the hotfix to production", sentAt: ago(0.08) }, messages: [ msg(4, "Priya Anand", "Good morning team! Reminder: all-hands is Thursday at 10am.", 9), msg(2, "Sarah McIntyre", "Thanks for the reminder!", 8.9), msg(5, "Jordan Kim", "Will there be a recording for those in other time zones?", 8.7), msg(4, "Priya Anand", "Yes — I'll post the link in #announcements after.", 8.6), msg(1, "You", "Thanks Priya 🙏", 8.5), msg(3, "Marcus Webb", "Staging is back up btw, had a brief outage this morning.", 4), msg(2, "Sarah McIntyre", "Oh I didn't even notice, nice quick fix!", 3.8), msg(3, "Marcus Webb", "Just pushed the hotfix to production", 0.08), ] }, { id: 7, type: "channel", name: "engineering", members: ["Marcus Webb", "You"], memberCount: 8, unread: 0, lastMessage: { senderId: 1, senderName: "You", text: "PR is up: #247 — adds rate limiting to the auth routes", sentAt: ago(3) }, messages: [ msg(3, "Marcus Webb", "Heads up: I'm updating the CI pipeline today. Builds might be slow for a bit.", 5), msg(1, "You", "Noted, thanks for the warning.", 4.9), msg(3, "Marcus Webb", "Back to normal now.", 4), msg(1, "You", "PR is up: #247 — adds rate limiting to the auth routes", 3), ] }, // ── Announcements ───────────────────────────────────────── { id: 8, type: "announcement", name: "Announcements", members: [], memberCount: 24, unread: 1, lastMessage: { senderId: 4, senderName: "Priya Anand", text: "Q2 planning kick-off is next Monday at 9am. Please come prepared with your team's priorities.", sentAt: ago(12) }, messages: [ msg(4, "Priya Anand", "Welcome to the team, Jordan! 🎉 Jordan joins us as a Product Designer and will be working closely with Sarah.", 72), msg(4, "Priya Anand", "Reminder: expense reports for March are due this Friday.", 48), msg(4, "Priya Anand", "Q2 planning kick-off is next Monday at 9am. Please come prepared with your team's priorities.", 12), ] }, ] this.selectedChatId = this.chats[0].id } get selectedChat() { return this.chats.find(c => c.id === this.selectedChatId) || null; } render() { HStack(() => { // Left sidebar VStack(() => { DesktopChatSidebar(this.chats, this.selectedChatId, (id) => { this.selectedChatId = id; const chat = this.chats.find(c => c.id === id); if (chat) chat.unread = 0; this.rerender(); }) }) .width(280, px) .minWidth(240, px) .height(100, pct) .borderRight("1px solid var(--divider)") .flexShrink(0) .overflow("hidden") // Right thread VStack(() => { DesktopChatThread(this.selectedChat, this.currentUser) }) .flex(1) .height(100, pct) .overflow("hidden") }) .height(100, pct) .width(100, pct) .overflow("hidden") } } register(Chat)