>,
- source_user_id: Uuid,
- event: ServerEvent,
-) {
- for (peer_id, connections) in room {
- if *peer_id == source_user_id {
- continue;
- }
- for peer in connections.values() {
- let _ = peer.tx.send(event.clone());
- }
- }
-}
-
-fn is_voice_state_change_empty(change: &VoiceStateChange) -> bool {
- change.joined.is_none()
- && change.left_user_id.is_none()
- && change.video_changed.is_none()
- && change.screen_changed.is_none()
- && change.speaking_changed.is_none()
- && change.mute_changed.is_none()
-}
-
-#[cfg(test)]
-mod tests {
- use super::{VoiceHub, aggregate_participant};
- use std::collections::HashMap;
- use tokio::sync::mpsc;
- use uuid::Uuid;
-
- #[tokio::test]
- async fn multiple_connections_keep_voice_participant_until_last_leave() {
- let hub = VoiceHub::default();
- let room_id = Uuid::new_v4();
- let user_id = Uuid::new_v4();
- let first_connection = Uuid::new_v4();
- let second_connection = Uuid::new_v4();
- let (tx1, _rx1) = mpsc::unbounded_channel();
- let (tx2, _rx2) = mpsc::unbounded_channel();
-
- let (_peers, first_join) = hub
- .join(room_id, user_id, first_connection, "User".to_string(), tx1)
- .await;
- let (_peers, second_join) = hub
- .join(room_id, user_id, second_connection, "User".to_string(), tx2)
- .await;
- let first_leave = hub.leave(room_id, user_id, first_connection).await;
- let second_leave = hub.leave(room_id, user_id, second_connection).await;
-
- assert!(first_join.joined.is_some());
- assert!(second_join.joined.is_none());
- assert!(first_leave.left_user_id.is_none());
- assert_eq!(second_leave.left_user_id, Some(user_id));
- }
-
- #[tokio::test]
- async fn voice_mute_state_only_flips_when_all_connections_are_muted() {
- let hub = VoiceHub::default();
- let room_id = Uuid::new_v4();
- let user_id = Uuid::new_v4();
- let first_connection = Uuid::new_v4();
- let second_connection = Uuid::new_v4();
- let (tx1, _rx1) = mpsc::unbounded_channel();
- let (tx2, _rx2) = mpsc::unbounded_channel();
-
- let _ = hub
- .join(room_id, user_id, first_connection, "User".to_string(), tx1)
- .await;
- let _ = hub
- .join(room_id, user_id, second_connection, "User".to_string(), tx2)
- .await;
-
- let first_mute = hub
- .set_mute_status(room_id, user_id, first_connection, true)
- .await;
- let second_mute = hub
- .set_mute_status(room_id, user_id, second_connection, true)
- .await;
- let unmute = hub
- .set_mute_status(room_id, user_id, first_connection, false)
- .await;
-
- assert!(first_mute.mute_changed.is_none());
- assert_eq!(second_mute.mute_changed, Some((user_id, true)));
- assert_eq!(unmute.mute_changed, Some((user_id, false)));
- }
-
- #[test]
- fn aggregate_participant_combines_connection_state() {
- let user_id = Uuid::new_v4();
- let first_connection = Uuid::new_v4();
- let second_connection = Uuid::new_v4();
- let mut connections = HashMap::new();
- let (tx1, _rx1) = mpsc::unbounded_channel();
- let (tx2, _rx2) = mpsc::unbounded_channel();
-
- connections.insert(
- first_connection,
- super::ClientHandle {
- display_name: "User".to_string(),
- is_sharing_video: true,
- is_sharing_screen: false,
- is_speaking: false,
- is_muted: true,
- tx: tx1,
- },
- );
- connections.insert(
- second_connection,
- super::ClientHandle {
- display_name: "User".to_string(),
- is_sharing_video: false,
- is_sharing_screen: true,
- is_speaking: true,
- is_muted: false,
- tx: tx2,
- },
- );
-
- let participant = aggregate_participant(Some(&connections), user_id).unwrap();
- assert!(participant.is_sharing_video);
- assert!(participant.is_sharing_screen);
- assert!(participant.is_speaking);
- assert!(!participant.is_muted);
- }
+ state.voice.leave(room_id, user_id).await;
}
diff --git a/static/app.js b/static/app.js
index 2794dc8..9cb45e0 100644
--- a/static/app.js
+++ b/static/app.js
@@ -1 +1,978 @@
-import "./shared/app-core.js";
+const state = {
+ me: null,
+ guilds: [],
+ channels: [],
+ dmConversations: [],
+ members: [],
+ voicePresence: new Map(),
+ selectedGuildId: null,
+ selectedTextChannelId: null,
+ selectedDmUserId: null,
+ selectedDmDisplayName: null,
+ selectedVoiceChannelId: null,
+ voice: {
+ ws: null,
+ joinedChannelId: null,
+ localStream: null,
+ rawStream: null,
+ audioContext: null,
+ peerConnections: new Map(),
+ muted: false,
+ iceServers: [{ urls: "stun:stun.l.google.com:19302" }],
+ },
+ voicePresencePollId: null,
+ chatWs: null,
+ lastMessageId: null,
+ onlineUsers: new Set(),
+};
+
+const el = {
+ authScreen: document.getElementById("auth-screen"),
+ loginBtn: document.getElementById("login-btn"),
+ main: document.getElementById("main"),
+ status: document.getElementById("status"),
+
+ // Guilds
+ guildList: document.getElementById("guild-list"),
+ addGuildBtn: document.getElementById("add-guild-btn"),
+ guildTitle: document.getElementById("guild-title"),
+ createInviteBtn: document.getElementById("create-invite-btn"),
+
+ // Channels
+ channelList: document.getElementById("channel-list"),
+ voiceChannelList: document.getElementById("voice-channel-list"),
+ addTextBtn: document.getElementById("add-text-btn"),
+ addVoiceBtn: document.getElementById("add-voice-btn"),
+ dmList: document.getElementById("dm-list"),
+ channelTitle: document.getElementById("channel-title"),
+
+ // Messages
+ messageList: document.getElementById("message-list"),
+ messageForm: document.getElementById("message-form"),
+ messageBody: document.getElementById("message-body"),
+
+ // User Panel
+ userName: document.getElementById("user-name"),
+ userAvatar: document.getElementById("user-avatar"),
+ logoutBtn: document.getElementById("logout-btn"),
+
+ // Voice Connection
+ voiceConnection: document.getElementById("voice-connection"),
+ vcChannelName: document.getElementById("vc-channel-name"),
+ voiceMuteBtn: document.getElementById("voice-mute-btn"),
+ voiceLeaveBtn: document.getElementById("voice-leave-btn"),
+
+ // Members
+ memberList: document.getElementById("member-list"),
+
+ // Modals
+ modalContainer: document.getElementById("modal-container"),
+ guildForm: document.getElementById("guild-form"),
+ guildName: document.getElementById("guild-name"),
+ modalCancel: document.getElementById("modal-cancel"),
+
+ channelModal: document.getElementById("channel-modal"),
+ channelForm: document.getElementById("channel-form"),
+ channelName: document.getElementById("channel-name"),
+ channelModalCancel: document.getElementById("channel-modal-cancel"),
+
+ // Mobile
+ mobileMenuBtn: document.getElementById("mobile-menu-btn"),
+ mobileMembersBtn: document.getElementById("mobile-members-btn"),
+ overlay: document.getElementById("overlay"),
+ utilitySidebar: document.getElementById("utility-sidebar"),
+};
+
+// --- API Helpers ---
+
+async function api(path, options = {}) {
+ const res = await fetch(path, {
+ ...options,
+ headers: {
+ "content-type": "application/json",
+ ...(options.headers || {}),
+ },
+ credentials: "same-origin",
+ });
+
+ if (!res.ok) {
+ let detail = "request failed";
+ try {
+ const body = await res.json();
+ detail = body.error || detail;
+ } catch { }
+ throw new Error(`${res.status}: ${detail}`);
+ }
+
+ if (res.status === 204) return null;
+ return res.json();
+}
+
+// --- Utils ---
+
+function shortName(name) {
+ if (!name || typeof name !== 'string') return "?";
+ const trimmed = name.trim();
+ if (!trimmed) return "?";
+ const words = trimmed.split(/\s+/).filter(w => w.length > 0).slice(0, 2);
+ if (words.length === 0) return "?";
+ if (words.length === 1) return words[0].substring(0, 2).toUpperCase();
+ return words.map((w) => w[0]?.toUpperCase() || "").join("");
+}
+
+function escapeHtml(s) {
+ if (s === null || s === undefined) return "";
+ return String(s)
+ .replaceAll("&", "&")
+ .replaceAll("<", "<")
+ .replaceAll(">", ">")
+ .replaceAll('"', """)
+ .replaceAll("'", "'");
+}
+
+function formatDate(isoString) {
+ const d = new Date(isoString);
+ const now = new Date();
+ const isToday = d.toDateString() === now.toDateString();
+
+ if (isToday) {
+ return `Today at ${d.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}`;
+ }
+ return d.toLocaleDateString();
+}
+
+let audioCtx = null;
+
+// Global interaction listener to unlock AudioContext (autoplay policy)
+window.addEventListener('click', () => {
+ if (audioCtx && audioCtx.state === 'suspended') {
+ audioCtx.resume();
+ }
+}, { once: true });
+
+function playSound(type) {
+ try {
+ if (!audioCtx) audioCtx = new (window.AudioContext || window.webkitAudioContext)();
+ if (audioCtx.state === 'suspended') audioCtx.resume();
+
+ const sounds = {
+ message: { freq: 880, type: 'sine', duration: 0.1, volume: 0.1 },
+ dm: { freq: [660, 880], type: 'sine', duration: 0.15, volume: 0.1 },
+ join: { freq: [440, 880], type: 'sine', duration: 0.2, volume: 0.1 },
+ leave: { freq: [880, 440], type: 'sine', duration: 0.2, volume: 0.1 },
+ 'peer-join': { freq: [660, 990], type: 'sine', duration: 0.15, volume: 0.05 },
+ 'peer-leave': { freq: [990, 660], type: 'sine', duration: 0.15, volume: 0.05 },
+ };
+
+ const s = sounds[type];
+ if (!s) return;
+
+ const osc = audioCtx.createOscillator();
+ const gain = audioCtx.createGain();
+
+ osc.type = s.type;
+ if (Array.isArray(s.freq)) {
+ osc.frequency.setValueAtTime(s.freq[0], audioCtx.currentTime);
+ osc.frequency.exponentialRampToValueAtTime(s.freq[1], audioCtx.currentTime + s.duration);
+ } else {
+ osc.frequency.setValueAtTime(s.freq, audioCtx.currentTime);
+ }
+
+ gain.gain.setValueAtTime(s.volume, audioCtx.currentTime);
+ gain.gain.exponentialRampToValueAtTime(0.01, audioCtx.currentTime + s.duration);
+
+ osc.connect(gain);
+ gain.connect(audioCtx.destination);
+
+ osc.start();
+ osc.stop(audioCtx.currentTime + s.duration);
+ } catch (err) {
+ console.warn("playSound failed", err);
+ }
+}
+const LAST_GUILD_STORAGE_KEY = "chattz:lastGuildId";
+
+// --- Renderers ---
+
+function renderGuilds() {
+ el.guildList.innerHTML = "";
+
+ for (const guild of state.guilds) {
+ const btn = document.createElement("button");
+ btn.className = `guild-pill ${state.selectedGuildId === guild.id ? "active" : ""}`;
+ btn.title = guild.name;
+ btn.textContent = shortName(guild.name);
+ btn.onclick = async () => {
+ state.selectedGuildId = guild.id;
+ state.selectedTextChannelId = null;
+ state.selectedVoiceChannelId = null;
+ state.selectedDmUserId = null;
+ state.selectedDmDisplayName = null;
+ localStorage.setItem(LAST_GUILD_STORAGE_KEY, guild.id);
+ renderGuilds();
+ renderDMs();
+ await loadChannels();
+ await loadGuildMembers();
+ await refreshVoicePresence();
+ startVoicePresencePolling();
+ renderMessages([]);
+ updateHeaderLabels();
+ };
+ el.guildList.appendChild(btn);
+ }
+}
+
+function renderChannels() {
+ el.channelList.innerHTML = "";
+ el.voiceChannelList.innerHTML = "";
+
+ for (const channel of state.channels) {
+ const row = document.createElement("button");
+ row.className = `channel-row ${(channel.kind === 'text' && state.selectedTextChannelId === channel.id) ||
+ (channel.kind === 'voice' && state.selectedVoiceChannelId === channel.id) ? "active" : ""
+ }`;
+
+ const iconName = channel.kind === 'text' ? 'hash' : 'volume-2';
+ row.innerHTML = ` ${escapeHtml(channel.name)}`;
+
+ row.onclick = async () => {
+ if (channel.kind === 'text') {
+ state.selectedDmUserId = null;
+ state.selectedDmDisplayName = null;
+ state.selectedTextChannelId = channel.id;
+ renderChannels();
+ renderDMs();
+ updateHeaderLabels();
+ const messages = await api(`/channels/${channel.id}/messages?limit=100`);
+ renderMessages(messages);
+ } else {
+ state.selectedDmUserId = null;
+ state.selectedDmDisplayName = null;
+ state.selectedVoiceChannelId = channel.id;
+ renderChannels();
+ renderDMs();
+ joinVoice();
+ }
+ if (window.innerWidth <= 768) closeMobileMenus();
+ };
+
+ if (channel.kind === 'text') {
+ el.channelList.appendChild(row);
+ } else {
+ el.voiceChannelList.appendChild(row);
+
+ const participants = state.voicePresence.get(channel.id) || [];
+ if (participants.length > 0) {
+ const pList = document.createElement("div");
+ pList.className = "voice-row-members channel-list";
+ pList.style.paddingLeft = "24px";
+ for (const p of participants) {
+ const pRow = document.createElement("div");
+ pRow.className = "channel-row";
+ pRow.style.padding = "2px 8px";
+ pRow.innerHTML = `${shortName(p.display_name)}
${escapeHtml(p.display_name)}`;
+ pList.appendChild(pRow);
+ }
+ el.voiceChannelList.appendChild(pList);
+ }
+ }
+ }
+ lucide.createIcons();
+}
+
+function renderDMs() {
+ el.dmList.innerHTML = "";
+ for (const dm of state.dmConversations) {
+ const isOnline = state.onlineUsers.has(dm.user_id);
+ const row = document.createElement("button");
+ row.className = `channel-row ${state.selectedDmUserId === dm.user_id ? "active" : ""}`;
+ row.innerHTML = `
+
+ ${escapeHtml(dm.display_name)}
+ `;
+ row.onclick = async () => {
+ state.selectedDmUserId = dm.user_id;
+ state.selectedDmDisplayName = dm.display_name;
+ state.selectedTextChannelId = null;
+ state.selectedVoiceChannelId = null;
+ renderChannels();
+ renderDMs();
+ updateHeaderLabels();
+ const messages = await api(`/dms/${dm.user_id}/messages?limit=100`);
+ renderMessages(messages);
+ };
+ el.dmList.appendChild(row);
+ }
+
+ lucide.createIcons();
+}
+
+function renderMessages(messages) {
+ el.messageList.innerHTML = "";
+ let lastAuthorId = null;
+ let lastTime = null;
+
+ for (const m of messages.slice().reverse()) {
+ const row = document.createElement("div");
+ const mDate = new Date(m.created_at);
+ const isGrouped = lastAuthorId === m.author_user_id &&
+ lastTime && (mDate - lastTime < 300000); // 5 minutes
+
+ row.className = `msg ${isGrouped ? "msg-grouped" : ""}`;
+
+ const displayName = m.author_display_name || "Unknown User";
+
+ if (isGrouped) {
+ row.innerHTML = ``;
+ } else {
+ row.innerHTML = `
+ ${shortName(displayName)}
+
+
+
${escapeHtml(m.body)}
+
+ ${shortName(m.display_name)}
+
+
${escapeHtml(m.display_name)}
+ `;
+ row.style.cursor = "pointer";
+ row.onclick = async () => {
+ if (state.me && m.id === state.me.id) return;
+ state.selectedDmUserId = m.id;
+ state.selectedDmDisplayName = m.display_name;
+ state.selectedTextChannelId = null;
+ state.selectedVoiceChannelId = null;
+ renderChannels();
+ renderDMs();
+ updateHeaderLabels();
+ const messages = await api(`/dms/${m.id}/messages?limit=100`);
+ renderMessages(messages);
+ };
+ el.memberList.appendChild(row);
+ }
+}
+
+function updateHeaderLabels() {
+ const guild = state.guilds.find((g) => g.id === state.selectedGuildId);
+ el.guildTitle.textContent = guild ? guild.name : "No server selected";
+
+ if (state.selectedDmUserId) {
+ const dmFromConversations = state.dmConversations.find((u) => u.user_id === state.selectedDmUserId);
+ const dmFromMembers = state.members.find((m) => m.id === state.selectedDmUserId);
+ const displayName = dmFromConversations?.display_name || dmFromMembers?.display_name || state.selectedDmDisplayName;
+ const dmName = displayName ? `@${displayName}` : "Direct Message";
+ el.channelTitle.textContent = dmName;
+ el.messageBody.placeholder = displayName
+ ? `Message @${displayName}`
+ : "Message";
+ return;
+ }
+
+ const channel = state.channels.find((c) => c.id === state.selectedTextChannelId);
+ el.channelTitle.textContent = channel ? channel.name : "Select a channel";
+ el.messageBody.placeholder = channel ? `Message #${channel.name}` : "Select a channel";
+}
+
+async function createInviteLink() {
+ if (!state.selectedGuildId) {
+ alert("Select a server first.");
+ return;
+ }
+ try {
+ const invite = await api(`/guilds/${state.selectedGuildId}/invites`, {
+ method: "POST",
+ body: JSON.stringify({ max_uses: 50, expires_in_hours: 24 }),
+ });
+ const link = `${location.origin}/?invite=${encodeURIComponent(invite.code)}`;
+ try {
+ await navigator.clipboard.writeText(link);
+ alert(`Invite link copied:\n${link}`);
+ } catch {
+ prompt("Copy invite link:", link);
+ }
+ } catch (err) {
+ alert(err.message);
+ }
+}
+
+// --- Logic ---
+
+async function loadGuilds() {
+ state.guilds = await api("/guilds");
+ renderGuilds();
+}
+
+async function loadDMConversations() {
+ state.dmConversations = await api("/dms");
+ renderDMs();
+}
+
+async function loadGuildMembers() {
+ if (!state.selectedGuildId) {
+ state.members = [];
+ renderMembers();
+ return;
+ }
+ state.members = await api(`/guilds/${state.selectedGuildId}/members`);
+ renderMembers();
+}
+
+async function loadChannels() {
+ if (!state.selectedGuildId) {
+ state.channels = [];
+ renderChannels();
+ return;
+ }
+
+ state.channels = await api(`/guilds/${state.selectedGuildId}/channels`);
+ renderChannels();
+}
+
+async function refreshVoicePresence() {
+ if (!state.selectedGuildId) {
+ state.voicePresence.clear();
+ renderChannels();
+ return;
+ }
+
+ try {
+ const res = await api(`/guilds/${state.selectedGuildId}/voice-presence`);
+ state.voicePresence.clear();
+ for (const entry of res.channels || []) {
+ state.voicePresence.set(entry.channel_id, entry.participants || []);
+ }
+ renderChannels();
+ } catch (err) {
+ console.warn("voice presence failed", err);
+ }
+}
+
+function startVoicePresencePolling() {
+ if (state.voicePresencePollId) clearInterval(state.voicePresencePollId);
+ state.voicePresencePollId = setInterval(() => {
+ refreshVoicePresence().catch(() => { });
+ }, 3000);
+}
+
+function initChatWs() {
+ if (state.chatWs) state.chatWs.close();
+ const protocol = location.protocol === "https:" ? "wss:" : "ws:";
+ const wsUrl = `${protocol}//${location.host}/ws`;
+ const ws = new WebSocket(wsUrl);
+ state.chatWs = ws;
+
+ ws.onmessage = (event) => {
+ const msg = JSON.parse(event.data);
+ const authorId = msg.message?.author_user_id;
+ const isFromMe = authorId && state.me && authorId === state.me.id;
+
+ if (msg.type === "message_created") {
+ if (!isFromMe) playSound('message');
+ if (state.selectedTextChannelId === msg.channel_id) {
+ api(`/channels/${state.selectedTextChannelId}/messages?limit=100`).then(renderMessages);
+ }
+ } else if (msg.type === "dm_created") {
+ if (!isFromMe) playSound('dm');
+ if (state.selectedDmUserId === msg.other_user_id) {
+ api(`/dms/${state.selectedDmUserId}/messages?limit=100`).then(renderMessages);
+ playSound('dm');
+ loadDMConversations().then(renderDMs);
+ } else {
+ loadDMConversations().then(renderDMs);
+ }
+ } else if (msg.type === "user_presence") {
+ if (msg.online) {
+ state.onlineUsers.add(msg.user_id);
+ } else {
+ state.onlineUsers.delete(msg.user_id);
+ }
+ renderMembers();
+ renderDMs();
+ }
+ };
+
+ ws.onclose = () => {
+ console.log("Chat WS closed, reconnecting...");
+ setTimeout(initChatWs, 3000);
+ };
+}
+
+// --- Voice ---
+
+function getVoiceWsUrl(channelId) {
+ const proto = location.protocol === "https:" ? "wss" : "ws";
+ return `${proto}://${location.host}/channels/${channelId}/voice/ws`;
+}
+
+function shouldInitiateOffer(peerId) {
+ if (!state.me || !state.me.id) return false;
+ return state.me.id > peerId;
+}
+
+function stopAndClearAudioPipeline() {
+ if (state.voice.localStream) {
+ for (const track of state.voice.localStream.getTracks()) track.stop();
+ }
+ if (state.voice.rawStream && state.voice.rawStream !== state.voice.localStream) {
+ for (const track of state.voice.rawStream.getTracks()) track.stop();
+ }
+ if (state.voice.audioContext) {
+ state.voice.audioContext.close().catch(() => { });
+ }
+ state.voice.localStream = null;
+ state.voice.rawStream = null;
+ state.voice.audioContext = null;
+}
+
+async function buildAudioPipeline(rawStream) {
+ const audioContext = new AudioContext();
+ const source = audioContext.createMediaStreamSource(rawStream);
+ const destination = audioContext.createMediaStreamDestination();
+ state.voice.audioContext = audioContext;
+
+ let head = source;
+
+ head.connect(destination);
+
+ return destination.stream;
+}
+
+async function createLocalVoiceStream() {
+ const constraints = {
+ audio: {
+ channelCount: 1,
+ sampleRate: 48000,
+ echoCancellation: true,
+ noiseSuppression: true,
+ autoGainControl: false,
+ },
+ video: false,
+ };
+ const rawStream = await navigator.mediaDevices.getUserMedia(constraints);
+ const localStream = await buildAudioPipeline(rawStream);
+ state.voice.rawStream = rawStream;
+ state.voice.localStream = localStream;
+ if (state.voice.muted) {
+ state.voice.localStream.getAudioTracks().forEach((t) => {
+ t.enabled = false;
+ });
+ }
+}
+
+function ensurePeerConnection(peerId) {
+ if (state.voice.peerConnections.has(peerId)) {
+ return state.voice.peerConnections.get(peerId);
+ }
+
+ const pc = new RTCPeerConnection({ iceServers: state.voice.iceServers });
+
+ if (state.voice.localStream) {
+ for (const track of state.voice.localStream.getTracks()) {
+ pc.addTrack(track, state.voice.localStream);
+ }
+ }
+
+ pc.onicecandidate = (event) => {
+ if (!event.candidate || !state.voice.ws) return;
+ state.voice.ws.send(JSON.stringify({
+ type: "signal",
+ to_user_id: peerId,
+ kind: "ice",
+ data: event.candidate,
+ }));
+ };
+
+ pc.ontrack = (event) => {
+ let audio = document.getElementById(`audio-${peerId}`);
+ if (!audio) {
+ audio = document.createElement("audio");
+ audio.id = `audio-${peerId}`;
+ audio.autoplay = true;
+ audio.playsInline = true;
+ document.body.appendChild(audio);
+ }
+ audio.srcObject = event.streams[0];
+ };
+
+ state.voice.peerConnections.set(peerId, pc);
+ return pc;
+}
+
+async function sendOffer(peerId) {
+ const pc = ensurePeerConnection(peerId);
+ const offer = await pc.createOffer();
+ await pc.setLocalDescription(offer);
+ state.voice.ws.send(JSON.stringify({
+ type: "signal",
+ to_user_id: peerId,
+ kind: "offer",
+ data: offer,
+ }));
+}
+
+async function handleSignal(fromPeerId, kind, data) {
+ const pc = ensurePeerConnection(fromPeerId);
+
+ if (kind === "offer") {
+ await pc.setRemoteDescription(new RTCSessionDescription(data));
+ const answer = await pc.createAnswer();
+ await pc.setLocalDescription(answer);
+ state.voice.ws.send(JSON.stringify({
+ type: "signal",
+ to_user_id: fromPeerId,
+ kind: "answer",
+ data: answer,
+ }));
+ } else if (kind === "answer") {
+ await pc.setRemoteDescription(new RTCSessionDescription(data));
+ } else if (kind === "ice") {
+ try {
+ await pc.addIceCandidate(data ? new RTCIceCandidate(data) : null);
+ } catch (err) {
+ console.warn("failed to add ice candidate", err);
+ }
+ }
+}
+
+async function joinVoice() {
+ if (!state.selectedVoiceChannelId) return;
+ if (state.voice.joinedChannelId === state.selectedVoiceChannelId) return;
+
+ await leaveVoice();
+
+ try {
+ await createLocalVoiceStream();
+ } catch (err) {
+ console.error("microphone denied", err);
+ return;
+ }
+
+ const ws = new WebSocket(getVoiceWsUrl(state.selectedVoiceChannelId));
+ state.voice.ws = ws;
+ state.voice.joinedChannelId = state.selectedVoiceChannelId;
+
+ ws.onopen = () => {
+ const channel = state.channels.find(c => c.id === state.selectedVoiceChannelId);
+ el.vcChannelName.textContent = channel ? channel.name : "Voice";
+ el.voiceConnection.classList.remove("hidden");
+ playSound('join');
+ refreshVoicePresence().catch(() => { });
+ };
+
+ ws.onmessage = async (event) => {
+ const msg = JSON.parse(event.data);
+ if (msg.type === "peers") {
+ for (const peer of msg.peers) {
+ if (shouldInitiateOffer(peer.user_id)) await sendOffer(peer.user_id);
+ }
+ } else if (msg.type === "peer_joined") {
+ playSound('peer-join');
+ if (shouldInitiateOffer(msg.user_id)) await sendOffer(msg.user_id);
+ } else if (msg.type === "peer_left") {
+ playSound('peer-leave');
+ const pc = state.voice.peerConnections.get(msg.user_id);
+ if (pc) {
+ pc.close();
+ state.voice.peerConnections.delete(msg.user_id);
+ }
+ document.getElementById(`audio-${msg.user_id}`)?.remove();
+ } else if (msg.type === "signal") {
+ await handleSignal(msg.from_user_id, msg.kind, msg.data);
+ }
+ refreshVoicePresence().catch(() => { });
+ };
+
+ ws.onclose = () => {
+ el.voiceConnection.classList.add("hidden");
+ for (const pc of state.voice.peerConnections.values()) pc.close();
+ state.voice.peerConnections.clear();
+ stopAndClearAudioPipeline();
+ state.voice.joinedChannelId = null;
+ state.voice.ws = null;
+ playSound('leave');
+ refreshVoicePresence().catch(() => { });
+ };
+}
+
+async function leaveVoice() {
+ if (state.voice.ws) state.voice.ws.close();
+}
+
+function toggleMute() {
+ if (!state.voice.localStream) return;
+ state.voice.muted = !state.voice.muted;
+ state.voice.localStream.getAudioTracks().forEach((t) => {
+ t.enabled = !state.voice.muted;
+ });
+ el.voiceMuteBtn.innerHTML = state.voice.muted ? '' : '';
+ el.voiceMuteBtn.style.color = state.voice.muted ? 'var(--danger)' : 'var(--text-muted)';
+ lucide.createIcons();
+}
+
+// --- Mobile Logic ---
+
+function toggleMobileMenu() {
+ const isOpen = el.main.classList.contains("menu-open");
+ if (isOpen) {
+ el.main.classList.remove("menu-open");
+ el.overlay.classList.add("hidden");
+ } else {
+ el.main.classList.add("menu-open");
+ el.utilitySidebar.classList.remove("active"); // close members if open
+ el.overlay.classList.remove("hidden");
+ }
+}
+
+function toggleMobileMembers() {
+ const isOpen = el.utilitySidebar.classList.contains("active");
+ if (isOpen) {
+ el.utilitySidebar.classList.remove("active");
+ el.overlay.classList.add("hidden");
+ } else {
+ el.utilitySidebar.classList.add("active");
+ el.main.classList.remove("menu-open"); // close menu if open
+ el.overlay.classList.remove("hidden");
+ }
+}
+
+function closeMobileMenus() {
+ el.main.classList.remove("menu-open");
+ el.utilitySidebar.classList.remove("active");
+ el.overlay.classList.add("hidden");
+}
+
+// --- Initialization ---
+
+async function init() {
+ lucide.createIcons();
+
+ el.loginBtn.onclick = () => { location.href = "/auth/login"; };
+
+ el.logoutBtn.onclick = async () => {
+ await leaveVoice();
+ await api("/auth/logout", { method: "POST" });
+ location.reload();
+ };
+
+ el.addGuildBtn.onclick = () => { el.modalContainer.classList.remove("hidden"); };
+ el.createInviteBtn.onclick = createInviteLink;
+ el.modalCancel.onclick = () => { el.modalContainer.classList.add("hidden"); };
+
+ el.addTextBtn.onclick = () => {
+ if (!state.selectedGuildId) {
+ alert("Create or select a server first.");
+ return;
+ }
+ document.querySelector('input[name="channel-kind"][value="text"]').checked = true;
+ el.channelModal.classList.remove("hidden");
+ };
+ el.addVoiceBtn.onclick = () => {
+ if (!state.selectedGuildId) {
+ alert("Create or select a server first.");
+ return;
+ }
+ document.querySelector('input[name="channel-kind"][value="voice"]').checked = true;
+ el.channelModal.classList.remove("hidden");
+ };
+ el.channelModalCancel.onclick = () => { el.channelModal.classList.add("hidden"); };
+
+ // Mobile Listeners
+ if (el.mobileMenuBtn) el.mobileMenuBtn.onclick = toggleMobileMenu;
+ if (el.mobileMembersBtn) el.mobileMembersBtn.onclick = toggleMobileMembers;
+ if (el.overlay) el.overlay.onclick = closeMobileMenus;
+
+ el.guildForm.onsubmit = async (e) => {
+ e.preventDefault();
+ try {
+ const guild = await api("/guilds", {
+ method: "POST",
+ body: JSON.stringify({ name: el.guildName.value }),
+ });
+ el.guildName.value = "";
+ el.modalContainer.classList.add("hidden");
+ state.guilds.push(guild);
+ state.selectedGuildId = guild.id;
+ state.selectedTextChannelId = null;
+ state.selectedVoiceChannelId = null;
+ state.selectedDmUserId = null;
+ state.selectedDmDisplayName = null;
+ localStorage.setItem(LAST_GUILD_STORAGE_KEY, guild.id);
+ renderGuilds();
+ await loadChannels();
+ await loadGuildMembers();
+ await refreshVoicePresence();
+ renderMessages([]);
+ updateHeaderLabels();
+ } catch (err) { alert(err.message); }
+ };
+
+ el.channelForm.onsubmit = async (e) => {
+ e.preventDefault();
+ if (!state.selectedGuildId) {
+ alert("Select a server first.");
+ return;
+ }
+ const kindInput = document.querySelector('input[name="channel-kind"]:checked');
+ const kind = kindInput ? kindInput.value : "text";
+ const channelName = el.channelName.value.trim();
+ if (!channelName) {
+ alert("Channel name is required.");
+ return;
+ }
+ try {
+ const created = await api("/channels", {
+ method: "POST",
+ body: JSON.stringify({
+ guild_id: state.selectedGuildId,
+ name: channelName,
+ kind: kind,
+ }),
+ });
+ el.channelName.value = "";
+ el.channelModal.classList.add("hidden");
+ await loadChannels();
+ if (created.kind === "text") {
+ state.selectedTextChannelId = created.id;
+ state.selectedVoiceChannelId = null;
+ state.selectedDmUserId = null;
+ state.selectedDmDisplayName = null;
+ renderChannels();
+ renderDMs();
+ updateHeaderLabels();
+ const messages = await api(`/channels/${created.id}/messages?limit=100`);
+ renderMessages(messages);
+ } else {
+ state.selectedVoiceChannelId = created.id;
+ state.selectedTextChannelId = null;
+ state.selectedDmUserId = null;
+ state.selectedDmDisplayName = null;
+ renderChannels();
+ renderDMs();
+ updateHeaderLabels();
+ }
+ } catch (err) { alert(err.message); }
+ };
+
+ el.messageForm.onsubmit = async (e) => {
+ e.preventDefault();
+ const body = el.messageBody.value.trim();
+ if (!body) return;
+
+ try {
+ if (state.selectedTextChannelId) {
+ await api(`/channels/${state.selectedTextChannelId}/messages`, {
+ method: "POST",
+ body: JSON.stringify({ body }),
+ });
+ } else if (state.selectedDmUserId) {
+ await api(`/dms/${state.selectedDmUserId}/messages`, {
+ method: "POST",
+ body: JSON.stringify({ body }),
+ });
+ } else {
+ return;
+ }
+ el.messageBody.value = "";
+ const messages = state.selectedTextChannelId
+ ? await api(`/channels/${state.selectedTextChannelId}/messages?limit=100`)
+ : await api(`/dms/${state.selectedDmUserId}/messages?limit=100`);
+ renderMessages(messages);
+ await loadDMConversations();
+ renderDMs();
+ } catch (err) { alert(err.message); }
+ };
+
+ el.voiceMuteBtn.onclick = toggleMute;
+ el.voiceLeaveBtn.onclick = leaveVoice;
+
+ try {
+ state.me = await api("/me");
+ if (state.me && state.me.display_name) {
+ el.userName.textContent = state.me.display_name;
+ el.userAvatar.textContent = shortName(state.me.display_name);
+ }
+ el.authScreen.classList.add("hidden");
+ el.main.classList.remove("hidden");
+
+ const params = new URLSearchParams(location.search);
+ const inviteCode = params.get("invite");
+ if (inviteCode) {
+ try {
+ const joinedGuild = await api(`/invites/${encodeURIComponent(inviteCode)}/join`, {
+ method: "POST",
+ });
+ localStorage.setItem(LAST_GUILD_STORAGE_KEY, joinedGuild.id);
+ } catch (err) {
+ alert(`Failed to join invite: ${err.message}`);
+ } finally {
+ params.delete("invite");
+ const nextQuery = params.toString();
+ const nextUrl = `${location.pathname}${nextQuery ? `?${nextQuery}` : ""}`;
+ history.replaceState(null, "", nextUrl);
+ }
+ }
+
+ await loadGuilds();
+ await loadDMConversations();
+
+ try {
+ const online = await api("/presence");
+ state.onlineUsers = new Set(online);
+ } catch (err) { console.warn("presence sync failed", err); }
+
+ if (state.guilds.length > 0) {
+ const lastGuildId = localStorage.getItem(LAST_GUILD_STORAGE_KEY);
+ const guild = state.guilds.find((g) => g.id === lastGuildId) || state.guilds[0];
+ state.selectedGuildId = guild.id;
+ localStorage.setItem(LAST_GUILD_STORAGE_KEY, guild.id);
+ renderGuilds();
+ await loadChannels();
+ await loadGuildMembers();
+ await refreshVoicePresence();
+ updateHeaderLabels();
+ } else {
+ state.members = [];
+ renderMembers();
+ updateHeaderLabels();
+ }
+
+ initChatWs();
+ startVoicePresencePolling();
+ lucide.createIcons();
+ } catch (err) {
+ console.error("init failed", err);
+ el.authScreen.classList.remove("hidden");
+ el.main.classList.add("hidden");
+ }
+}
+
+init();
diff --git a/static/index.html b/static/index.html
index 550c656..7a2a85f 100644
--- a/static/index.html
+++ b/static/index.html
@@ -1,4 +1,3 @@
-
@@ -8,7 +7,7 @@
Chattz
-
+
@@ -18,11 +17,6 @@
Chattz
Sign in to open your servers.
-
@@ -43,7 +37,6 @@
-