Spaces:

Sebebeb
/

gChat

Sleeping

App Files Files Community

Sebebeb commited on May 10

Commit

72cf80f

verified ·

1 Parent(s): 136c1a8

Upload templates/index.html

Browse files

Files changed (1) hide show

templates/index.html +707 -0

templates/index.html ADDED Viewed

	@@ -0,0 +1,707 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Private Chat</title>
+<style>
+  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+  body {
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+    height: 100vh; display: flex; align-items: center; justify-content: center;
+    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
+    color: #e2e8f0;
+  }
+  button { cursor: pointer; font-family: inherit; }
+  input { font-family: inherit; }
+  /* ---------- LANDING ---------- */
+  #landing {
+    background: #1e293b; border-radius: 20px; padding: 48px 40px;
+    width: 420px; max-width: 94vw; box-shadow: 0 25px 60px rgba(0,0,0,0.5);
+    text-align: center; border: 1px solid #334155;
+  }
+  #landing h1 { font-size: 28px; font-weight: 700; margin-bottom: 6px; }
+  #landing p { color: #94a3b8; margin-bottom: 28px; font-size: 15px; }
+  #landing input {
+    width: 100%; padding: 14px 18px; border-radius: 12px; border: 2px solid #334155;
+    background: #0f172a; color: #e2e8f0; font-size: 16px; outline: none;
+    transition: border-color 0.2s; margin-bottom: 16px;
+  }
+  #landing input:focus { border-color: #3b82f6; }
+  #landing button {
+    width: 100%; padding: 14px; border-radius: 12px; border: none;
+    background: #3b82f6; color: #fff; font-size: 16px; font-weight: 600;
+    transition: background 0.2s;
+  }
+  #landing button:hover { background: #2563eb; }
+  #landing .error { color: #ef4444; font-size: 14px; margin-top: 10px; }
+  /* ---------- CHAT LAYOUT ---------- */
+  #chat { display: none; width: 100vw; height: 100vh; }
+  .chat-container {
+    display: flex; height: 100vh; max-width: 1200px; margin: 0 auto;
+    width: 100%;
+  }
+  /* Sidebar */
+  .sidebar {
+    width: 320px; background: #1e293b; border-right: 1px solid #334155;
+    display: flex; flex-direction: column; flex-shrink: 0;
+  }
+  .sidebar-header {
+    padding: 20px; border-bottom: 1px solid #334155;
+    display: flex; align-items: center; justify-content: space-between;
+  }
+  .sidebar-header h2 { font-size: 18px; font-weight: 600; }
+  .sidebar-header .count { color: #64748b; font-size: 14px; }
+  .user-list { flex: 1; overflow-y: auto; padding: 8px; }
+  .user-item {
+    display: flex; align-items: center; gap: 12px; padding: 12px 14px;
+    border-radius: 12px; cursor: pointer; transition: background 0.15s;
+    position: relative;
+  }
+  .user-item:hover { background: #334155; }
+  .user-item.active { background: #1e3a5f; }
+  .user-item .avatar {
+    width: 40px; height: 40px; border-radius: 50%;
+    display: flex; align-items: center; justify-content: center;
+    font-weight: 600; font-size: 16px; flex-shrink: 0;
+    background: #3b82f6; color: #fff;
+  }
+  .user-item .info { flex: 1; min-width: 0; }
+  .user-item .name { font-size: 15px; font-weight: 500; }
+  .user-item .status { font-size: 12px; color: #22c55e; }
+  .user-item .typing-dot {
+    font-size: 12px; color: #94a3b8; font-style: italic;
+    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+  }
+  .user-item .online-dot {
+    width: 8px; height: 8px; border-radius: 50%; background: #22c55e;
+    flex-shrink: 0;
+  }
+  /* Main chat area */
+  .main {
+    flex: 1; display: flex; flex-direction: column; min-width: 0;
+    background: #0f172a;
+  }
+  .chat-header {
+    padding: 16px 24px; border-bottom: 1px solid #334155;
+    display: flex; align-items: center; justify-content: space-between;
+    min-height: 72px; background: #1e293b;
+  }
+  .chat-header .partner-info { display: flex; align-items: center; gap: 12px; }
+  .chat-header .partner-avatar {
+    width: 36px; height: 36px; border-radius: 50%;
+    display: flex; align-items: center; justify-content: center;
+    font-weight: 600; font-size: 14px; background: #3b82f6; color: #fff;
+  }
+  .chat-header .partner-name { font-size: 16px; font-weight: 600; }
+  .chat-header .partner-status { font-size: 13px; color: #22c55e; }
+  .chat-header .self-info {
+    display: flex; align-items: center; gap: 10px;
+  }
+  .chat-header .self-name { font-size: 14px; color: #94a3b8; }
+  .chat-header .self-name button {
+    background: none; border: none; color: #3b82f6; font-size: 13px;
+    margin-left: 6px; text-decoration: underline;
+  }
+  .messages {
+    flex: 1; overflow-y: auto; padding: 20px 24px;
+    display: flex; flex-direction: column; gap: 4px;
+  }
+  .msg-row { display: flex; margin-bottom: 4px; }
+  .msg-row.self { justify-content: flex-end; }
+  .msg-row.other { justify-content: flex-start; }
+  .msg-bubble {
+    max-width: 70%; padding: 10px 16px; border-radius: 18px;
+    font-size: 15px; line-height: 1.45; word-wrap: break-word;
+    position: relative;
+  }
+  .msg-row.self .msg-bubble {
+    background: #3b82f6; color: #fff;
+    border-bottom-right-radius: 4px;
+  }
+  .msg-row.other .msg-bubble {
+    background: #1e293b; color: #e2e8f0;
+    border-bottom-left-radius: 4px;
+  }
+  .msg-time {
+    font-size: 11px; color: #64748b; margin-top: 4px; text-align: right;
+  }
+  .msg-row.other .msg-time { text-align: left; }
+  .empty-chat {
+    flex: 1; display: flex; flex-direction: column; align-items: center;
+    justify-content: center; color: #475569; gap: 12px;
+  }
+  .empty-chat .icon { font-size: 48px; opacity: 0.4; }
+  .empty-chat p { font-size: 15px; }
+  .typing-indicator {
+    padding: 4px 24px 8px; font-size: 13px; color: #64748b;
+    font-style: italic; height: 24px;
+  }
+  .input-area {
+    padding: 16px 24px; background: #1e293b; border-top: 1px solid #334155;
+    display: flex; gap: 12px; align-items: flex-end;
+  }
+  .input-area textarea {
+    flex: 1; resize: none; padding: 12px 16px; border-radius: 12px;
+    border: 2px solid #334155; background: #0f172a; color: #e2e8f0;
+    font-size: 15px; outline: none; min-height: 24px; max-height: 120px;
+    line-height: 1.4; transition: border-color 0.2s;
+  }
+  .input-area textarea:focus { border-color: #3b82f6; }
+  .input-area textarea::placeholder { color: #475569; }
+  .input-area button {
+    padding: 12px 20px; border-radius: 12px; border: none;
+    background: #3b82f6; color: #fff; font-size: 15px; font-weight: 600;
+    transition: background 0.2s; white-space: nowrap;
+  }
+  .input-area button:hover { background: #2563eb; }
+  .input-area button:disabled { opacity: 0.4; cursor: not-allowed; }
+  /* ---------- RENAME MODAL ---------- */
+  .modal-overlay {
+    display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.6);
+    align-items: center; justify-content: center; z-index: 100;
+  }
+  .modal-overlay.show { display: flex; }
+  .modal {
+    background: #1e293b; border-radius: 16px; padding: 32px; width: 360px;
+    max-width: 92vw; border: 1px solid #334155; box-shadow: 0 20px 60px rgba(0,0,0,0.5);
+  }
+  .modal h3 { font-size: 20px; margin-bottom: 6px; }
+  .modal p { color: #94a3b8; font-size: 14px; margin-bottom: 20px; }
+  .modal input {
+    width: 100%; padding: 12px 16px; border-radius: 10px; border: 2px solid #334155;
+    background: #0f172a; color: #e2e8f0; font-size: 15px; outline: none;
+    transition: border-color 0.2s; margin-bottom: 16px;
+  }
+  .modal input:focus { border-color: #3b82f6; }
+  .modal-buttons { display: flex; gap: 10px; }
+  .modal-buttons button {
+    flex: 1; padding: 12px; border-radius: 10px; border: none;
+    font-size: 14px; font-weight: 600;
+  }
+  .modal-buttons .cancel { background: #334155; color: #94a3b8; }
+  .modal-buttons .cancel:hover { background: #475569; }
+  .modal-buttons .save { background: #3b82f6; color: #fff; }
+  .modal-buttons .save:hover { background: #2563eb; }
+  /* ---------- SCROLLBAR ---------- */
+  ::-webkit-scrollbar { width: 6px; }
+  ::-webkit-scrollbar-track { background: transparent; }
+  ::-webkit-scrollbar-thumb { background: #334155; border-radius: 3px; }
+  ::-webkit-scrollbar-thumb:hover { background: #475569; }
+  @media (max-width: 700px) {
+    .sidebar { width: 80px; }
+    .sidebar-header h2, .sidebar-header .count, .user-item .info { display: none; }
+    .user-item { justify-content: center; padding: 10px; }
+    .chat-header .self-info .self-name { display: none; }
+  }
+</style>
+</head>
+<body>
+<!-- LANDING -->
+<div id="landing">
+  <h1>Private Chat</h1>
+  <p>Choose a display name to join</p>
+  <input id="nameInput" type="text" placeholder="Your display name..." maxlength="32" autofocus>
+  <button id="joinBtn">Join Chat</button>
+  <div id="landingError" class="error"></div>
+</div>
+<!-- CHAT -->
+<div id="chat">
+  <div class="chat-container">
+    <!-- Sidebar -->
+    <div class="sidebar">
+      <div class="sidebar-header">
+        <h2>Online</h2>
+        <span class="count" id="userCount">0</span>
+      </div>
+      <div class="user-list" id="userList"></div>
+    </div>
+    <!-- Main -->
+    <div class="main">
+      <div class="chat-header">
+        <div class="partner-info" id="partnerInfo">
+          <div class="partner-avatar" id="partnerAvatar">?</div>
+          <div>
+            <div class="partner-name" id="partnerName">Select a user</div>
+            <div class="partner-status" id="partnerStatus"></div>
+          </div>
+        </div>
+        <div class="self-info">
+          <span class="self-name" id="selfDisplay">
+            <span id="selfNameLabel"></span>
+            <button id="renameBtn">change</button>
+          </span>
+        </div>
+      </div>
+      <div class="messages" id="messages">
+        <div class="empty-chat" id="emptyChat">
+          <div class="icon">&#x1F4AC;</div>
+          <p>Select someone from the sidebar to start chatting</p>
+        </div>
+      </div>
+      <div class="typing-indicator" id="typingIndicator"></div>
+      <div class="input-area">
+        <textarea id="msgInput" placeholder="Type a message..." rows="1" maxlength="4000" disabled></textarea>
+        <button id="sendBtn" disabled>Send</button>
+      </div>
+    </div>
+  </div>
+</div>
+<!-- RENAME MODAL -->
+<div class="modal-overlay" id="renameModal">
+  <div class="modal">
+    <h3>Change display name</h3>
+    <p>Choose a new name others will see.</p>
+    <input id="renameInput" type="text" maxlength="32" placeholder="New display name...">
+    <div class="modal-buttons">
+      <button class="cancel" id="renameCancel">Cancel</button>
+      <button class="save" id="renameSave">Save</button>
+    </div>
+  </div>
+</div>
+<script>
+  (function() {
+    // ---------- STATE ----------
+    let userId = null;
+    let myName = '';
+    let ws = null;
+    let activeUserId = null;  // who we're chatting with
+    let onlineUsers = new Map();  // id -> {name, el}
+    let messageHistory = new Map();  // userId -> [{from, content, ts, fromName}]
+    let typingTimers = new Map();
+    let reconnectTimer = null;
+    let isConnected = false;
+    const COLORS = [
+      '#3b82f6','#8b5cf6','#ec4899','#f43f5e','#f97316',
+      '#eab308','#22c55e','#14b8a6','#06b6d4','#6366f1'
+    ];
+    // ---------- DOM REFS ----------
+    const landing = document.getElementById('landing');
+    const chat = document.getElementById('chat');
+    const nameInput = document.getElementById('nameInput');
+    const joinBtn = document.getElementById('joinBtn');
+    const landingError = document.getElementById('landingError');
+    const userList = document.getElementById('userList');
+    const userCount = document.getElementById('userCount');
+    const messagesEl = document.getElementById('messages');
+    const emptyChat = document.getElementById('emptyChat');
+    const msgInput = document.getElementById('msgInput');
+    const sendBtn = document.getElementById('sendBtn');
+    const partnerName = document.getElementById('partnerName');
+    const partnerAvatar = document.getElementById('partnerAvatar');
+    const partnerStatus = document.getElementById('partnerStatus');
+    const selfNameLabel = document.getElementById('selfNameLabel');
+    const renameBtn = document.getElementById('renameBtn');
+    const typingIndicator = document.getElementById('typingIndicator');
+    const renameModal = document.getElementById('renameModal');
+    const renameInput = document.getElementById('renameInput');
+    const renameCancel = document.getElementById('renameCancel');
+    const renameSave = document.getElementById('renameSave');
+    const partnerInfo = document.getElementById('partnerInfo');
+    // ---------- HELPERS ----------
+    function avatarColor(id) {
+      let h = 0;
+      for (let i = 0; i < id.length; i++) h = ((h << 5) - h) + id.charCodeAt(i);
+      return COLORS[Math.abs(h) % COLORS.length];
+    }
+    function fmtTime(iso) {
+      try {
+        const d = new Date(iso);
+        return d.toLocaleTimeString([], {hour:'2-digit', minute:'2-digit'});
+      } catch { return ''; }
+    }
+    function escapeHtml(s) {
+      const d = document.createElement('div');
+      d.textContent = s;
+      return d.innerHTML;
+    }
+    // ---------- RENDER USERS ----------
+    function renderUsers() {
+      let html = '';
+      let count = 0;
+      for (const [id, u] of onlineUsers) {
+        if (id === activeUserId) {
+          // update header
+          partnerName.textContent = u.name;
+          partnerAvatar.textContent = u.name[0].toUpperCase();
+          partnerAvatar.style.background = avatarColor(id);
+          partnerStatus.textContent = 'Online';
+        }
+        count++;
+        const active = id === activeUserId ? 'active' : '';
+        html += `
+          <div class="user-item ${active}" data-id="${escapeHtml(id)}">
+            <div class="avatar" style="background:${avatarColor(id)}">${escapeHtml(u.name[0]?.toUpperCase() || '?')}</div>
+            <div class="info">
+              <div class="name">${escapeHtml(u.name)}</div>
+              <div class="status">Online</div>
+              <div class="typing-dot" id="typing_${escapeHtml(id)}"></div>
+            </div>
+            <div class="online-dot"></div>
+          </div>
+        `;
+      }
+      userList.innerHTML = html;
+      userCount.textContent = count;
+      // click handlers
+      userList.querySelectorAll('.user-item').forEach(el => {
+        el.addEventListener('click', () => {
+          const id = el.dataset.id;
+          if (id && id !== activeUserId) {
+            selectUser(id);
+          }
+        });
+      });
+    }
+    // ---------- SELECT USER ----------
+    function selectUser(id) {
+      activeUserId = id;
+      // re-render
+      renderUsers();
+      // load messages
+      renderMessages(id);
+      // enable input
+      msgInput.disabled = false;
+      sendBtn.disabled = false;
+      msgInput.focus();
+      // clear typing
+      typingIndicator.textContent = '';
+      // scroll
+      scrollMessages();
+    }
+    // ---------- MESSAGES ----------
+    function getMessages(partnerId) {
+      if (!messageHistory.has(partnerId)) messageHistory.set(partnerId, []);
+      return messageHistory.get(partnerId);
+    }
+    function addMessage(partnerId, msg) {
+      const msgs = getMessages(partnerId);
+      msgs.push(msg);
+      if (partnerId === activeUserId) {
+        renderMessages(partnerId);
+        scrollMessages();
+      }
+    }
+    function renderMessages(partnerId) {
+      const msgs = getMessages(partnerId);
+      emptyChat.style.display = msgs.length ? 'none' : 'flex';
+      if (!msgs.length) {
+        messagesEl.querySelectorAll('.msg-row').forEach(e => e.remove());
+        return;
+      }
+      let html = '';
+      for (const m of msgs) {
+        const isSelf = m.from === userId;
+        const cls = isSelf ? 'self' : 'other';
+        const name = isSelf ? 'You' : m.fromName;
+        html += `
+          <div class="msg-row ${cls}">
+            <div class="msg-bubble">
+              <div>${escapeHtml(m.content)}</div>
+              <div class="msg-time">${fmtTime(m.ts)}</div>
+            </div>
+          </div>
+        `;
+      }
+      // remove old messages but keep emptyChat
+      messagesEl.querySelectorAll('.msg-row').forEach(e => e.remove());
+      if (emptyChat) {
+        emptyChat.insertAdjacentHTML('afterend', html);
+      } else {
+        messagesEl.innerHTML = html;
+      }
+    }
+    function scrollMessages() {
+      setTimeout(() => { messagesEl.scrollTop = messagesEl.scrollHeight; }, 20);
+    }
+    // ---------- TYPING ----------
+    function showTyping(fromId, fromName) {
+      const el = document.getElementById(`typing_${fromId}`);
+      if (el) el.textContent = `${fromName} is typing...`;
+      if (fromId === activeUserId) {
+        typingIndicator.textContent = `${fromName} is typing...`;
+      }
+      if (typingTimers.has(fromId)) clearTimeout(typingTimers.get(fromId));
+      typingTimers.set(fromId, setTimeout(() => {
+        const el2 = document.getElementById(`typing_${fromId}`);
+        if (el2) el2.textContent = '';
+        if (fromId === activeUserId) typingIndicator.textContent = '';
+        typingTimers.delete(fromId);
+      }, 2000));
+    }
+    // ---------- SEND MESSAGE ----------
+    function sendMessage() {
+      const content = msgInput.value.trim();
+      if (!content || !activeUserId || !ws || ws.readyState !== WebSocket.OPEN) return;
+      ws.send(JSON.stringify({type:'message', target_id: activeUserId, content}));
+      msgInput.value = '';
+      msgInput.style.height = 'auto';
+    }
+    // ---------- WEBSOCKET ----------
+    function connectWS() {
+      if (ws) { ws.close(); ws = null; }
+      const protocol = location.protocol === 'https:' ? 'wss:' : 'ws:';
+      const url = `${protocol}//${location.host}/ws/${userId}`;
+      ws = new WebSocket(url);
+      ws.onopen = () => {
+        isConnected = true;
+        if (reconnectTimer) { clearTimeout(reconnectTimer); reconnectTimer = null; }
+      };
+      ws.onmessage = (e) => {
+        const msg = JSON.parse(e.data);
+        switch (msg.type) {
+          case 'message': {
+            const partnerId = msg.from_id === userId ? msg.target_id || activeUserId : msg.from_id;
+            // Only add if it's for current conversation
+            if (msg.from_id === userId) {
+              // our own message - add to the target's history
+              if (activeUserId) {
+                addMessage(activeUserId, {
+                  from: userId, fromName: myName, content: msg.content, ts: msg.ts
+                });
+              }
+            } else {
+              addMessage(msg.from_id, {
+                from: msg.from_id, fromName: msg.from_name, content: msg.content, ts: msg.ts
+              });
+            }
+            break;
+          }
+          case 'typing':
+            showTyping(msg.from_id, msg.from_name);
+            break;
+          case 'user_online': {
+            if (!onlineUsers.has(msg.id)) {
+              onlineUsers.set(msg.id, {name: msg.name});
+              renderUsers();
+            }
+            break;
+          }
+          case 'user_offline': {
+            onlineUsers.delete(msg.id);
+            if (activeUserId === msg.id) {
+              activeUserId = null;
+              msgInput.disabled = true;
+              sendBtn.disabled = true;
+              partnerName.textContent = 'Select a user';
+              partnerAvatar.textContent = '?';
+              partnerAvatar.style.background = '#3b82f6';
+              partnerStatus.textContent = '';
+              messagesEl.querySelectorAll('.msg-row').forEach(e => e.remove());
+              emptyChat.style.display = 'flex';
+              typingIndicator.textContent = '';
+            }
+            renderUsers();
+            break;
+          }
+          case 'user_renamed': {
+            if (onlineUsers.has(msg.id)) {
+              onlineUsers.get(msg.id).name = msg.name;
+              renderUsers();
+            }
+            break;
+          }
+        }
+      };
+      ws.onclose = () => {
+        isConnected = false;
+        if (userId) {
+          reconnectTimer = setTimeout(connectWS, 3000);
+        }
+      };
+      ws.onerror = () => {};
+    }
+    // ---------- JOIN ----------
+    async function join(name) {
+      try {
+        const res = await fetch('/api/join', {
+          method: 'POST',
+          headers: {'Content-Type':'application/json'},
+          body: JSON.stringify({display_name: name})
+        });
+        if (!res.ok) { const e = await res.json(); throw new Error(e.detail || 'Failed to join'); }
+        const data = await res.json();
+        userId = data.user_id;
+        myName = data.display_name;
+        landing.style.display = 'none';
+        chat.style.display = 'block';
+        selfNameLabel.textContent = myName;
+        // load users
+        fetchUsers();
+        // connect ws
+        connectWS();
+      } catch (err) {
+        landingError.textContent = err.message;
+      }
+    }
+    async function fetchUsers() {
+      try {
+        const res = await fetch(`/api/users/${userId}`);
+        if (!res.ok) throw new Error('Failed');
+        const data = await res.json();
+        onlineUsers.clear();
+        for (const u of data.users) {
+          onlineUsers.set(u.id, {name: u.name});
+        }
+        renderUsers();
+      } catch {}
+    }
+    // ---------- RENAME ----------
+    async function doRename(newName) {
+      try {
+        const res = await fetch('/api/rename', {
+          method: 'POST',
+          headers: {'Content-Type':'application/json'},
+          body: JSON.stringify({user_id: userId, display_name: newName})
+        });
+        if (!res.ok) { const e = await res.json(); throw new Error(e.detail || 'Failed'); }
+        const data = await res.json();
+        myName = data.display_name;
+        selfNameLabel.textContent = myName;
+        if (ws && ws.readyState === WebSocket.OPEN) {
+          ws.send(JSON.stringify({type:'rename', name: myName}));
+        }
+        renameModal.classList.remove('show');
+      } catch (err) {
+        alert(err.message);
+      }
+    }
+    // ---------- EVENT BINDINGS ----------
+    joinBtn.addEventListener('click', () => {
+      const name = nameInput.value.trim();
+      if (!name) { landingError.textContent = 'Please enter a display name.'; return; }
+      landingError.textContent = '';
+      join(name);
+    });
+    nameInput.addEventListener('keydown', (e) => {
+      if (e.key === 'Enter') { e.preventDefault(); joinBtn.click(); }
+    });
+    sendBtn.addEventListener('click', sendMessage);
+    msgInput.addEventListener('keydown', (e) => {
+      if (e.key === 'Enter' && !e.shiftKey) {
+        e.preventDefault();
+        sendMessage();
+      }
+    });
+    msgInput.addEventListener('input', () => {
+      msgInput.style.height = 'auto';
+      msgInput.style.height = Math.min(msgInput.scrollHeight, 120) + 'px';
+      // typing indicator
+      if (ws && ws.readyState === WebSocket.OPEN && activeUserId) {
+        ws.send(JSON.stringify({type:'typing', target_id: activeUserId}));
+      }
+    });
+    renameBtn.addEventListener('click', () => {
+      renameInput.value = myName;
+      renameModal.classList.add('show');
+      setTimeout(() => renameInput.focus(), 100);
+    });
+    renameCancel.addEventListener('click', () => {
+      renameModal.classList.remove('show');
+    });
+    renameSave.addEventListener('click', () => {
+      const n = renameInput.value.trim();
+      if (!n) return;
+      doRename(n);
+    });
+    renameInput.addEventListener('keydown', (e) => {
+      if (e.key === 'Enter') { e.preventDefault(); renameSave.click(); }
+    });
+    // close modal on overlay click
+    renameModal.addEventListener('click', (e) => {
+      if (e.target === renameModal) renameModal.classList.remove('show');
+    });
+    // ---------- INIT ----------
+    // Check for saved session in sessionStorage (exists per tab)
+    const savedId = sessionStorage.getItem('chat_user_id');
+    const savedName = sessionStorage.getItem('chat_user_name');
+    if (savedId && savedName) {
+      userId = savedId;
+      myName = savedName;
+      landing.style.display = 'none';
+      chat.style.display = 'block';
+      selfNameLabel.textContent = myName;
+      fetchUsers();
+      connectWS();
+    }
+    // Save session
+    const origJoin = join;
+    join = async function(name) {
+      await origJoin(name);
+      if (userId) {
+        sessionStorage.setItem('chat_user_id', userId);
+        sessionStorage.setItem('chat_user_name', myName);
+      }
+    };
+    // Handle page close - let WS close gracefully
+    window.addEventListener('beforeunload', () => {
+      sessionStorage.removeItem('chat_user_id');
+      sessionStorage.removeItem('chat_user_name');
+    });
+  })();
+</script>
+</body>
+</html>