214 lines
10 KiB
JavaScript
214 lines
10 KiB
JavaScript
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)
|