fix: mobile

static/app.js

@@ -30,13 +30,13 @@ const el = {
   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"),
@@ -44,36 +44,42 @@ const el = {
   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 ---
@@ -93,7 +99,7 @@ async function api(path, options = {}) {
     try {
       const body = await res.json();
       detail = body.error || detail;
-    } catch {}
+    } catch { }
     throw new Error(`${res.status}: ${detail}`);
   }
 
@@ -127,7 +133,7 @@ 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' })}`;
   }
@@ -176,14 +182,13 @@ function renderChannels() {
 
   for (const channel of state.channels) {
     const row = document.createElement("button");
-    row.className = `channel-row ${
+    row.className = `channel-row ${(channel.kind === 'text' && state.selectedTextChannelId === channel.id) ||
-      (channel.kind === 'text' && state.selectedTextChannelId === channel.id) || 
+        (channel.kind === 'voice' && state.selectedVoiceChannelId === channel.id) ? "active" : ""
-      (channel.kind === 'voice' && state.selectedVoiceChannelId === channel.id) ? "active" : ""
+      }`;
-    }`;
+
-    
     const iconName = channel.kind === 'text' ? 'hash' : 'volume-2';
     row.innerHTML = `<i data-lucide="${iconName}"></i> <span>${escapeHtml(channel.name)}</span>`;
-    
+
     row.onclick = async () => {
       if (channel.kind === 'text') {
         state.selectedDmUserId = null;
@@ -202,13 +207,14 @@ function 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");
@@ -259,11 +265,11 @@ function renderMessages(messages) {
   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 && 
+    const isGrouped = lastAuthorId === m.author_user_id &&
-                      lastTime && (mDate - lastTime < 300000); // 5 minutes
+      lastTime && (mDate - lastTime < 300000); // 5 minutes
 
     row.className = `msg ${isGrouped ? "msg-grouped" : ""}`;
-    
+
     const displayName = m.author_display_name || "Unknown User";
 
     if (isGrouped) {
@@ -412,7 +418,7 @@ async function refreshVoicePresence() {
 function startVoicePresencePolling() {
   if (state.voicePresencePollId) clearInterval(state.voicePresencePollId);
   state.voicePresencePollId = setInterval(() => {
-    refreshVoicePresence().catch(() => {});
+    refreshVoicePresence().catch(() => { });
   }, 3000);
 }
 
@@ -469,7 +475,7 @@ function stopAndClearAudioPipeline() {
     for (const track of state.voice.rawStream.getTracks()) track.stop();
   }
   if (state.voice.audioContext) {
-    state.voice.audioContext.close().catch(() => {});
+    state.voice.audioContext.close().catch(() => { });
   }
   state.voice.localStream = null;
   state.voice.rawStream = null;
@@ -615,7 +621,7 @@ async function joinVoice() {
     const channel = state.channels.find(c => c.id === state.selectedVoiceChannelId);
     el.vcChannelName.textContent = channel ? channel.name : "Voice";
     el.voiceConnection.classList.remove("hidden");
-    refreshVoicePresence().catch(() => {});
+    refreshVoicePresence().catch(() => { });
   };
 
   ws.onmessage = async (event) => {
@@ -636,7 +642,7 @@ async function joinVoice() {
     } else if (msg.type === "signal") {
       await handleSignal(msg.from_user_id, msg.kind, msg.data);
     }
-    refreshVoicePresence().catch(() => {});
+    refreshVoicePresence().catch(() => { });
   };
 
   ws.onclose = () => {
@@ -646,7 +652,7 @@ async function joinVoice() {
     stopAndClearAudioPipeline();
     state.voice.joinedChannelId = null;
     state.voice.ws = null;
-    refreshVoicePresence().catch(() => {});
+    refreshVoicePresence().catch(() => { });
   };
 }
 
@@ -665,23 +671,55 @@ function toggleMute() {
   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.");
@@ -700,6 +738,11 @@ async function init() {
   };
   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 {

static/index.html

@@ -108,8 +108,15 @@
 
     <main class="chat-pane">
       <header class="chat-header">
+        <button id="mobile-menu-btn" class="mobile-toggle-btn hidden" title="Menu">
+          <i data-lucide="menu"></i>
+        </button>
         <i data-lucide="hash" class="header-icon"></i>
         <h3 id="channel-title">Select a channel</h3>
+        <div style="flex:1"></div>
+        <button id="mobile-members-btn" class="mobile-toggle-btn hidden" title="Members">
+          <i data-lucide="users"></i>
+        </button>
       </header>
 
       <div id="message-list" class="message-list"></div>
@@ -122,7 +129,7 @@
       </div>
     </main>
 
-    <aside class="utility-sidebar">
+    <aside class="utility-sidebar" id="utility-sidebar">
       <header class="sidebar-header">
         <h2>Members</h2>
       </header>
@@ -132,6 +139,8 @@
     </aside>
   </div>
 
+  <div id="overlay" class="overlay hidden"></div>
+
   <!-- Modals -->
   <div id="modal-container" class="modal-container hidden">
     <div class="modal">

static/styles.css

@@ -515,12 +515,93 @@ input, select { border: 0; outline: none; background: var(--bg-input); color: va
 .radio-text strong { font-size: 16px; }
 .radio-text span { font-size: 12px; color: var(--text-muted); }
 
+/* Mobile Overlay */
+.overlay {
+  position: fixed;
+  top: 0; left: 0; right: 0; bottom: 0;
+  background: rgba(0, 0, 0, 0.7);
+  z-index: 90;
+  opacity: 1;
+  transition: opacity 0.2s ease;
+}
+.overlay.hidden {
+  opacity: 0;
+  pointer-events: none;
+  visibility: hidden;
+}
+
+/* Mobile Toggle Buttons */
+.mobile-toggle-btn {
+  display: none;
+  width: 32px;
+  height: 32px;
+  align-items: center;
+  justify-content: center;
+  color: var(--text-normal);
+  background: transparent;
+  margin-right: 8px;
+}
+.mobile-toggle-btn:hover {
+  background: var(--bg-modifier-hover);
+  border-radius: 4px;
+}
+
 @media (max-width: 1100px) {
   .shell { grid-template-columns: 72px 240px 1fr; }
-  .utility-sidebar { display: none; }
+  .utility-sidebar {
+    position: fixed;
+    top: 0; bottom: 0; right: 0;
+    width: 240px;
+    z-index: 100;
+    box-shadow: -2px 0 10px rgba(0,0,0,0.5);
+    transform: translateX(100%);
+    transition: transform 0.2s ease;
+  }
+  .utility-sidebar.active {
+    transform: translateX(0);
+    display: flex;
+  }
+  
+  .chat-header .mobile-toggle-btn { display: flex; }
 }
 
 @media (max-width: 768px) {
-  .shell { grid-template-columns: 72px 1fr; }
+  .shell {
-  .channel-sidebar { display: none; }
+    grid-template-columns: 1fr;
+  }
+  
+  /* Hide sidebars by default on mobile */
+  .server-rail, .channel-sidebar {
+    position: fixed;
+    top: 0; bottom: 0;
+    z-index: 100;
+    transition: transform 0.2s ease;
+  }
+
+  .server-rail {
+    left: 0;
+    width: 72px;
+    transform: translateX(-100%);
+  }
+  
+  .channel-sidebar {
+    left: 72px;
+    width: 240px;
+    transform: translateX(-312px); /* 72 + 240 */
+    box-shadow: 2px 0 10px rgba(0,0,0,0.5);
+  }
+
+  /* When menu is active */
+  .shell.menu-open .server-rail {
+    transform: translateX(0);
+  }
+  .shell.menu-open .channel-sidebar {
+    transform: translateX(0);
+    display: flex; /* Override display: none from previous rule */
+  }
+
+  /* Adjust chat header for mobile */
+  .chat-header {
+    padding: 0 8px;
+  }
 }