New paste
Recent API Trending Blog
Guest
 
Guest

Nexchat

Guest
Apr 11th, 2026
13
0
Never
Not a member of GistPad yet? Sign Up, it unlocks many cool features!
HTML 384.56 KB | Source Code | 0 0
copy raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>NexChat</title>
  7. <link href="https://fonts.googleapis.com/css2?family=Syne:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
  8. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
  9. <script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2"></script>
  10. <style>
  11. :root {
  12. --bg-void: #070910; --bg-servers: #0c0e18; --bg-sidebar: #10131f; --bg-main: #151a28;
  13. --bg-input: #1c2133; --bg-hover: #192035; --bg-active: #212a42; --accent: #818cf8;
  14. --accent-dim: #4f56c5; --accent-glow: rgba(129,140,248,0.18); --green: #4ade80;
  15. --amber: #fbbf24; --red: #f87171; --text-primary: #e8ecf5; --text-secondary: #8b96b3;
  16. --text-muted: #4a5470; --border: rgba(255,255,255,0.07); --radius: 8px;
  17. --font: 'Syne', sans-serif; --mono: 'JetBrains Mono', monospace;
  18. }
  19. [data-theme="light"] {
  20. --bg-void: #f5f7fa; --bg-servers: #eef0f5; --bg-sidebar: #ffffff; --bg-main: #fafbfc;
  21. --bg-input: #edf2f7; --bg-hover: #e2e8f0; --bg-active: #cbd5e1; --accent: #4f46e5;
  22. --accent-dim: #4338ca; --accent-glow: rgba(79,70,229,0.15); --green: #10b981;
  23. --amber: #f59e0b; --red: #ef4444; --text-primary: #0f172a; --text-secondary: #475569;
  24. --text-muted: #94a3b8; --border: rgba(0,0,0,0.06);
  25. }
  26. [data-theme="high-contrast"] {
  27. --bg-void: #000; --bg-servers: #111; --bg-sidebar: #1a1a1a; --bg-main: #222;
  28. --bg-input: #2d2d2d; --bg-hover: #333; --bg-active: #444; --accent: #ffcc00;
  29. --accent-dim: #e6b800; --accent-glow: rgba(255,204,0,0.2); --green: #00ff88; --amber: #ffaa00;
  30. --red: #ff4444; --text-primary: #fff; --text-secondary: #ccc; --text-muted: #888;
  31. --border: rgba(255,255,255,0.15);
  32. }
  33. [data-theme="forest"] {
  34. --bg-void: #0a1c14; --bg-servers: #0e241c; --bg-sidebar: #132a20; --bg-main: #18382a;
  35. --bg-input: #1e4534; --bg-hover: #265a44; --bg-active: #2f6e54; --accent: #6ee7b7;
  36. --accent-dim: #34d399; --accent-glow: rgba(110,231,183,0.2); --green: #10b981; --amber: #fbbf24;
  37. --red: #f87171; --text-primary: #e2f3eb; --text-secondary: #a7d7c5; --text-muted: #5f9c83;
  38. --border: rgba(255,255,255,0.08);
  39. }
  40. [data-theme="slate"] {
  41. --bg-void: #0d0d0d; --bg-servers: #161616; --bg-sidebar: #1e1e1e; --bg-main: #242424;
  42. --bg-input: #2c2c2c; --bg-hover: #333333; --bg-active: #3d3d3d; --accent: #a8a8a8;
  43. --accent-dim: #707070; --accent-glow: rgba(168,168,168,0.12); --green: #6fcf97;
  44. --amber: #f2c94c; --red: #eb5757; --text-primary: #dcdcdc; --text-secondary: #999999;
  45. --text-muted: #555555; --border: rgba(255,255,255,0.07);
  46. }
  47. * { margin: 0; padding: 0; box-sizing: border-box; }
  48. html, body { height: 100%; overflow: hidden; font-family: var(--font); background: var(--bg-void); color: var(--text-primary); }
  49. ::-webkit-scrollbar { width: 4px; height: 4px; }
  50. ::-webkit-scrollbar-track { background: transparent; }
  51. ::-webkit-scrollbar-thumb { background: var(--bg-active); border-radius: 2px; }
  52. #auth-page { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 100; background: radial-gradient(ellipse at 25% 35%, rgba(129,140,248,.14) 0%, transparent 55%), radial-gradient(ellipse at 75% 75%, rgba(251,191,36,.06) 0%, transparent 50%), var(--bg-void); }
  53. .auth-card { width: 380px; background: var(--bg-sidebar); border: 1px solid var(--border); border-radius: 16px; padding: 40px; box-shadow: 0 40px 90px rgba(0,0,0,.7); }
  54. .auth-logo { font-size: 28px; font-weight: 800; color: var(--accent); letter-spacing: -1px; margin-bottom: 6px; }
  55. .auth-logo span { color: var(--text-muted); font-weight: 400; }
  56. .auth-subtitle { color: var(--text-secondary); font-size: 13px; margin-bottom: 28px; }
  57. .auth-tabs { display: flex; gap: 4px; margin-bottom: 24px; background: var(--bg-void); border-radius: 8px; padding: 4px; }
  58. .auth-tab { flex: 1; padding: 8px; text-align: center; font-size: 13px; font-weight: 600; font-family: var(--font); border: none; border-radius: 6px; cursor: pointer; color: var(--text-muted); background: transparent; transition: all .2s; }
  59. .auth-tab.active { background: var(--accent); color: #fff; }
  60. .form-field { margin-bottom: 14px; }
  61. .form-field label { display: block; font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 7px; }
  62. .form-field input { width: 100%; padding: 11px 13px; background: var(--bg-void); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text-primary); font-family: var(--mono); font-size: 13px; outline: none; transition: border-color .2s; }
  63. .form-field input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }
  64. .btn-primary { width: 100%; padding: 13px; background: var(--accent); color: #fff; border: none; border-radius: var(--radius); font-family: var(--font); font-size: 14px; font-weight: 700; cursor: pointer; margin-top: 8px; transition: all .2s; letter-spacing: .02em; }
  65. .btn-primary:hover { background: var(--accent-dim); transform: translateY(-1px); }
  66. .auth-error { color: var(--red); font-size: 12px; margin-top: 10px; text-align: center; min-height: 16px; }
  67. #app-page { display: flex; width: 100%; height: 100vh; }
  68. #servers-bar { width: 66px; background: var(--bg-servers); display: flex; flex-direction: column; align-items: center; padding: 10px 0; gap: 5px; border-right: 1px solid var(--border); overflow-y: auto; overflow-x: hidden; flex-shrink: 0; }
  69. .server-icon { width: 44px; height: 44px; border-radius: 14px; background: var(--bg-sidebar); display: flex; align-items: center; justify-content: center; cursor: pointer; font-weight: 700; font-size: 18px; color: var(--text-secondary); transition: all .2s; border: 2px solid transparent; flex-shrink: 0; user-select: none; position: relative; overflow: hidden; }
  70. .server-icon i { font-size: 20px; }
  71. .server-icon:hover { border-radius: 10px; background: var(--accent); color: #fff; }
  72. .server-icon.active { border-color: var(--accent); color: var(--accent); border-radius: 10px; background: var(--bg-active); }
  73. .server-icon.dm-icon { font-size: 18px; color: var(--accent); background: var(--bg-active); }
  74. .server-icon.dm-icon.active { background: var(--accent); color: #fff; }
  75. .server-divider { width: 28px; height: 1px; background: var(--border); margin: 3px 0; }
  76. .add-server-btn { width: 44px; height: 44px; border-radius: 50%; background: var(--bg-sidebar); border: 2px dashed rgba(74,222,128,.3); display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--green); font-size: 20px; transition: all .2s; flex-shrink: 0; }
  77. .add-server-btn:hover { background: rgba(74,222,128,.1); border-color: var(--green); border-radius: 14px; }
  78. #channel-sidebar { width: 228px; background: var(--bg-sidebar); display: flex; flex-direction: column; border-right: 1px solid var(--border); flex-shrink: 0; }
  79. .sidebar-header { padding: 0 14px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; height: 50px; flex-shrink: 0; gap: 8px; }
  80. .sidebar-title { font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  81. .sidebar-actions { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
  82. .sidebar-btn { width: 22px; height: 22px; background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 14px; display: flex; align-items: center; justify-content: center; border-radius: 4px; transition: all .15s; flex-shrink: 0; }
  83. .sidebar-btn:hover { background: var(--bg-hover); color: var(--text-primary); }
  84. .channels-list { flex: 1; overflow-y: auto; padding: 6px 6px; }
  85. .ch-section { font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); padding: 10px 8px 4px; display: flex; align-items: center; justify-content: space-between; }
  86. .channel-item { display: flex; align-items: center; gap: 7px; padding: 7px 8px; border-radius: 6px; cursor: pointer; color: var(--text-muted); font-size: 13px; font-weight: 500; transition: all .15s; user-select: none; }
  87. .channel-item i { width: 16px; font-size: 12px; }
  88. .channel-item:hover { background: var(--bg-hover); color: var(--text-primary); }
  89. .channel-item.active { background: var(--bg-active); color: var(--text-primary); }
  90. .dm-item { display: flex; align-items: center; gap: 9px; padding: 7px 8px; border-radius: 6px; cursor: pointer; color: var(--text-muted); font-size: 13px; transition: all .15s; user-select: none; }
  91. .dm-item:hover { background: var(--bg-hover); color: var(--text-primary); }
  92. .dm-item.active { background: var(--bg-active); color: var(--text-primary); }
  93. .dm-avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--accent-dim); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: #fff; flex-shrink: 0; overflow: hidden; }
  94. .dm-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
  95. .dm-name { font-weight: 600; font-family: var(--mono); font-size: 12px; }
  96. .pin-btn { font-size: 12px; margin-left: auto; color: var(--amber); cursor: pointer; opacity: 0.6; transition: opacity 0.2s; }
  97. .pin-btn:hover { opacity: 1; }
  98. .user-bar { padding: 9px 10px; border-top: 1px solid var(--border); display: flex; align-items: center; gap: 9px; background: var(--bg-servers); flex-shrink: 0; cursor: pointer; }
  99. .user-av { width: 30px; height: 30px; border-radius: 50%; background: var(--accent-dim); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: #fff; flex-shrink: 0; overflow: hidden; }
  100. .user-av img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
  101. .user-name-display { font-size: 12px; font-weight: 600; font-family: var(--mono); color: var(--text-primary); }
  102. .user-status-dot { font-size: 10px; color: var(--green); }
  103. .logout-btn { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 15px; padding: 3px; border-radius: 4px; margin-left: auto; transition: all .15s; }
  104. .logout-btn:hover { color: var(--red); }
  105. #main-area { flex: 1; display: flex; flex-direction: column; background: var(--bg-main); min-width: 0; overflow: hidden; position: relative; }
  106. .chat-header { height: 50px; border-bottom: 1px solid var(--border); display: flex; align-items: center; padding: 0 18px; gap: 10px; flex-shrink: 0; }
  107. .chat-header i { color: var(--text-muted); font-size: 16px; width: 20px; }
  108. .chat-header-name { font-size: 14px; font-weight: 700; }
  109. .video-call-btn { margin-left: auto; background: none; border: none; color: var(--accent); cursor: pointer; font-size: 18px; padding: 5px; border-radius: 4px; transition: all 0.2s; }
  110. .video-call-btn:hover { background: var(--bg-hover); }
  111. #messages-wrap { flex: 1; overflow-y: auto; padding: 16px 18px 0; display: flex; flex-direction: column; gap: 1px; }
  112. .msg-group { display: flex; gap: 12px; padding: 5px 6px; border-radius: 6px; transition: background .1s; position: relative; }
  113. .msg-group:hover { background: rgba(255,255,255,.025); }
  114. .msg-av { width: 34px; height: 34px; border-radius: 50%; background: var(--accent-dim); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: #fff; flex-shrink: 0; margin-top: 1px; overflow: hidden; }
  115. .msg-av img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
  116. .msg-body { flex: 1; min-width: 0; }
  117. .msg-meta { display: flex; align-items: baseline; gap: 8px; margin-bottom: 3px; }
  118. .msg-author { font-size: 13px; font-weight: 700; color: var(--accent); font-family: var(--mono); }
  119. .msg-time { font-size: 10px; color: var(--text-muted); }
  120. .msg-text { font-size: 13px; color: var(--text-primary); line-height: 1.55; word-break: break-word; white-space: pre-wrap; font-family: var(--mono); }
  121. .msg-img-wrapper { position: relative; display: inline-block; }
  122. .msg-img { max-width: 380px; max-height: 280px; border-radius: 8px; object-fit: cover; cursor: pointer; margin-top: 4px; display: block; border: 1px solid var(--border); }
  123. .gif-badge { position: absolute; bottom: 6px; right: 6px; background: rgba(0,0,0,0.6); color: white; font-size: 10px; font-weight: 700; padding: 2px 6px; border-radius: 12px; backdrop-filter: blur(2px); pointer-events: none; }
  124. .msg-file { display: inline-flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--bg-input); border: 1px solid var(--border); border-radius: 8px; margin-top: 4px; max-width: 340px; }
  125. .msg-file-icon { font-size: 22px; flex-shrink: 0; }
  126. .msg-file-info { flex: 1; min-width: 0; }
  127. .msg-file-name { font-size: 12px; font-weight: 600; font-family: var(--mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text-primary); }
  128. .msg-file-type { font-size: 10px; color: var(--text-muted); margin-top: 2px; }
  129. .fa-btn { padding: 6px 11px; border-radius: 6px; border: none; font-family: var(--font); font-size: 11px; font-weight: 700; cursor: pointer; transition: all .15s; white-space: nowrap; text-decoration: none; }
  130. .fa-demo { background: var(--accent); color: #fff; }
  131. .fa-demo:hover { background: var(--accent-dim); }
  132. .fa-preview { background: rgba(251,191,36,.15); color: var(--amber); }
  133. .fa-preview:hover { background: rgba(251,191,36,.28); }
  134. .fa-dl { background: var(--bg-active); color: var(--text-primary); display: inline-flex; align-items: center; gap: 4px; }
  135. .fa-dl:hover { background: var(--bg-hover); }
  136. .msg-delete { position: absolute; top: 5px; right: 8px; width: 22px; height: 22px; border: none; border-radius: 6px; background: rgba(248,113,113,.12); color: var(--red); cursor: pointer; font-size: 12px; display: none; }
  137. .msg-group:hover .msg-delete { display: flex; align-items: center; justify-content: center; }
  138. .msg-delete:hover { background: rgba(248,113,113,.24); }
  139. .input-area { padding: 14px 18px; flex-shrink: 0; }
  140. .upload-preview { display: none; align-items: center; gap: 10px; padding: 8px 12px; background: var(--bg-input); border-radius: 7px; border: 1px dashed var(--accent-dim); font-size: 12px; color: var(--text-secondary); margin-bottom: 8px; }
  141. .upload-cancel { background: none; border: none; color: var(--red); cursor: pointer; font-size: 15px; margin-left: auto; }
  142. .input-bar { display: flex; align-items: flex-end; gap: 9px; background: var(--bg-input); border: 1px solid var(--border); border-radius: 10px; padding: 9px 13px; transition: border-color .2s; }
  143. .input-bar:focus-within { border-color: var(--accent-dim); }
  144. .attach-btn { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 18px; padding: 1px; transition: color .15s; flex-shrink: 0; }
  145. .attach-btn:hover { color: var(--accent); }
  146. #msg-input { flex: 1; background: none; border: none; outline: none; color: var(--text-primary); font-family: var(--font); font-size: 13px; resize: none; max-height: 110px; line-height: 1.5; }
  147. #msg-input::placeholder { color: var(--text-muted); }
  148. .send-btn { width: 32px; height: 32px; border-radius: 7px; background: var(--accent); border: none; color: #fff; cursor: pointer; font-size: 14px; display: flex; align-items: center; justify-content: center; transition: all .15s; flex-shrink: 0; }
  149. .send-btn:hover { background: var(--accent-dim); transform: scale(1.06); }
  150. .send-btn:disabled { opacity: .35; cursor: default; transform: none; }
  151. #file-input { display: none; }
  152. #friends-view { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
  153. .ftabs { display: flex; gap: 3px; padding: 0 14px; border-bottom: 1px solid var(--border); height: 50px; align-items: center; }
  154. .ftab { padding: 5px 13px; border-radius: 6px; border: none; background: none; color: var(--text-muted); font-family: var(--font); font-size: 13px; font-weight: 600; cursor: pointer; transition: all .15s; }
  155. .ftab i { margin-right: 4px; }
  156. .ftab:hover { background: var(--bg-hover); color: var(--text-primary); }
  157. .ftab.active { background: var(--bg-active); color: var(--text-primary); }
  158. .badge { background: var(--red); color: #fff; font-size: 10px; font-weight: 700; padding: 1px 5px; border-radius: 10px; margin-left: 4px; }
  159. .friends-content { flex: 1; overflow-y: auto; padding: 20px; }
  160. .f-section { font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); padding-bottom: 10px; border-bottom: 1px solid var(--border); margin-bottom: 10px; }
  161. .friend-card { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: 8px; transition: background .15s; }
  162. .friend-card:hover { background: var(--bg-hover); }
  163. .friend-av { width: 38px; height: 38px; border-radius: 50%; background: var(--accent-dim); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 15px; color: #fff; flex-shrink: 0; overflow: hidden; }
  164. .friend-av img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
  165. .friend-username { font-size: 13px; font-weight: 600; font-family: var(--mono); }
  166. .friend-label { font-size: 11px; color: var(--text-muted); margin-top: 1px; }
  167. .friend-actions { display: flex; gap: 5px; margin-left: auto; }
  168. .ibt { width: 32px; height: 32px; border-radius: 50%; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 14px; transition: all .15s; }
  169. .ibt.acc { background: rgba(74,222,128,.15); color: var(--green); }
  170. .ibt.acc:hover { background: rgba(74,222,128,.3); }
  171. .ibt.dec { background: rgba(248,113,113,.15); color: var(--red); }
  172. .ibt.dec:hover { background: rgba(248,113,113,.3); }
  173. .ibt.msg { background: var(--bg-active); color: var(--accent); }
  174. .ibt.msg:hover { background: var(--accent); color: #fff; }
  175. .add-friend-bar { display: flex; gap: 9px; margin-bottom: 18px; }
  176. .add-friend-bar input { flex: 1; padding: 10px 13px; background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text-primary); font-family: var(--mono); font-size: 13px; outline: none; transition: border-color .2s; }
  177. .add-friend-bar input:focus { border-color: var(--accent); }
  178. .add-friend-bar .send-fr-btn { padding: 10px 16px; background: var(--accent); border: none; border-radius: var(--radius); color: #fff; font-family: var(--font); font-size: 13px; font-weight: 700; cursor: pointer; transition: background .15s; white-space: nowrap; }
  179. .add-friend-bar .send-fr-btn:hover { background: var(--accent-dim); }
  180. #add-friend-msg { font-size: 12px; color: var(--text-muted); margin-top: 6px; }
  181. #welcome-screen { flex: 1; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 14px; color: var(--text-muted); }
  182. .wlc-icon { font-size: 56px; }
  183. .wlc-title { font-size: 20px; font-weight: 700; color: var(--text-secondary); }
  184. .wlc-sub { font-size: 13px; }
  185. .overlay { position: fixed; inset: 0; background: rgba(0,0,0,.75); display: flex; align-items: center; justify-content: center; z-index: 200; backdrop-filter: blur(5px); }
  186. .modal { background: var(--bg-sidebar); border: 1px solid var(--border); border-radius: 14px; padding: 28px; width: 400px; box-shadow: 0 40px 90px rgba(0,0,0,.7); }
  187. .modal h3 { font-size: 17px; font-weight: 700; margin-bottom: 18px; }
  188. .modal label { display: block; font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 7px; }
  189. .modal input, .modal select { width: 100%; padding: 10px 13px; background: var(--bg-void); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text-primary); font-family: var(--mono); font-size: 13px; outline: none; margin-bottom: 14px; transition: border-color .2s; }
  190. .modal input:focus, .modal select:focus { border-color: var(--accent); }
  191. .modal-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 6px; flex-wrap: wrap; }
  192. .btn-cancel { padding: 9px 16px; background: var(--bg-active); border: none; border-radius: var(--radius); color: var(--text-secondary); font-family: var(--font); font-size: 13px; font-weight: 600; cursor: pointer; }
  193. .btn-confirm { padding: 9px 18px; background: var(--accent); border: none; border-radius: var(--radius); color: #fff; font-family: var(--font); font-size: 13px; font-weight: 700; cursor: pointer; }
  194. .btn-confirm:hover { background: var(--accent-dim); }
  195. .btn-ghost { padding: 9px 16px; background: transparent; border: 1px solid var(--border); border-radius: var(--radius); color: var(--text-secondary); font-family: var(--font); font-size: 13px; font-weight: 600; cursor: pointer; }
  196. .btn-ghost:hover { background: var(--bg-hover); color: var(--text-primary); }
  197. .modal-tabs { display: flex; gap: 4px; margin-bottom: 18px; background: var(--bg-void); border-radius: 8px; padding: 4px; }
  198. .modal-tab { flex: 1; padding: 8px; text-align: center; font-size: 12px; font-weight: 600; font-family: var(--font); border: none; border-radius: 6px; cursor: pointer; color: var(--text-muted); background: transparent; transition: all .2s; }
  199. .modal-tab.active { background: var(--accent); color: #fff; }
  200. .share-id { padding: 8px 12px; background: var(--bg-void); border-radius: 6px; font-family: var(--mono); font-size: 11px; color: var(--text-muted); word-break: break-all; margin-top: -6px; margin-bottom: 14px; cursor: pointer; border: 1px solid var(--border); transition: all .15s; }
  201. .share-id:hover { border-color: var(--accent); color: var(--accent); }
  202. .preview-box { display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: var(--bg-void); border: 1px solid var(--border); border-radius: 10px; margin-bottom: 14px; }
  203. .preview-box img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; border: 1px solid var(--border); }
  204. .preview-box .txt { font-size: 12px; color: var(--text-muted); font-family: var(--mono); word-break: break-word; }
  205. .small-note { font-size: 11px; color: var(--text-muted); margin-top: -8px; margin-bottom: 14px; }
  206. #ctx-menu { position: fixed; background: var(--bg-sidebar); border: 1px solid var(--border); border-radius: 8px; padding: 4px; box-shadow: 0 10px 25px rgba(0,0,0,0.5); z-index: 1000; display: none; min-width: 150px; }
  207. .ctx-item { padding: 8px 12px; cursor: pointer; font-size: 13px; border-radius: 4px; color: var(--text-primary); transition: background 0.1s; }
  208. .ctx-item:hover { background: var(--bg-hover); }
  209. #timeout-overlay { position: absolute; inset: 0; background: #000000dd; backdrop-filter: blur(4px); display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 50; }
  210. .timeout-timer { font-size: 48px; font-family: var(--mono); color: white; margin-bottom: 20px; }
  211. #toast { position: fixed; bottom: 22px; right: 22px; padding: 11px 18px; background: var(--bg-active); border: 1px solid var(--border); border-radius: 10px; font-size: 12px; color: var(--text-primary); z-index: 500; transform: translateY(70px); opacity: 0; transition: all .3s; box-shadow: 0 8px 24px rgba(0,0,0,.5); max-width: 320px; }
  212. #toast.show { transform: translateY(0); opacity: 1; }
  213. #toast.success { border-color: var(--green); }
  214. #toast.error { border-color: var(--red); }
  215. .empty-state { text-align: center; padding: 36px 16px; color: var(--text-muted); font-size: 12px; }
  216. .empty-state .ico { font-size: 36px; margin-bottom: 10px; }
  217. .csv-wrap { flex: 1; overflow: auto; }
  218. .csv-tbl { border-collapse: collapse; font-size: 12px; font-family: var(--mono); }
  219. .csv-tbl th, .csv-tbl td { padding: 6px 10px; border: 1px solid var(--border); }
  220. .csv-tbl th { background: var(--bg-input); color: var(--accent); }
  221. #video-call-modal { z-index: 400; }
  222. #video-call-modal .modal { width: min(95vw, 1000px); padding: 20px; max-height: 95vh; overflow-y: auto; }
  223. .vc-videos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; }
  224. @media (max-width: 580px) { .vc-videos { grid-template-columns: 1fr; } }
  225. .vc-video-wrap { position: relative; background: #000; border-radius: 10px; overflow: hidden; aspect-ratio: 16/9; border: 2px solid var(--border); }
  226. .vc-video-wrap video { width: 100%; height: 100%; object-fit: cover; display: block; background: #000; }
  227. #vc-local-video { transform: scaleX(-1); }
  228. .vc-label { position: absolute; bottom: 8px; left: 10px; background: rgba(0,0,0,0.65); padding: 3px 10px; border-radius: 20px; font-size: 0.78rem; pointer-events: none; color: white; }
  229. .vc-controls { display: flex; gap: 10px; justify-content: center; margin-top: 16px; }
  230. .vc-btn { padding: 10px 20px; border: none; border-radius: 6px; cursor: pointer; font-weight: 700; transition: all 0.2s; font-family: var(--font); font-size: 14px; }
  231. .vc-btn-mute { background: #555; color: white; }
  232. .vc-btn-mute.active { background: #c0392b; }
  233. .vc-btn-video { background: #555; color: white; }
  234. .vc-btn-video.active { background: #c0392b; }
  235. .vc-btn-hangup { background: #c0392b; color: white; width: 100%; margin-top: 16px; }
  236. .vc-status { text-align: center; margin-bottom: 12px; padding: 8px; border-radius: 6px; background: var(--bg-input); font-size: 13px; color: var(--text-secondary); }
  237. .vc-connecting-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.75); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: white; font-size: 13px; }
  238. .spinner { width: 32px; height: 32px; border: 3px solid #333; border-top-color: var(--accent); border-radius: 50%; animation: spin 0.75s linear infinite; }
  239. @keyframes spin { to { transform: rotate(360deg); } }
  240. #incoming-call-popup { position: fixed; top: 20px; right: 20px; background: var(--bg-sidebar); border: 1px solid var(--accent); border-radius: 12px; padding: 20px; box-shadow: 0 10px 30px rgba(0,0,0,0.5); z-index: 600; display: none; align-items: center; gap: 16px; max-width: 350px; }
  241. .popup-avatar { width: 48px; height: 48px; border-radius: 50%; background: var(--accent-dim); display: flex; align-items: center; justify-content: center; font-weight: 700; color: white; flex-shrink: 0; overflow: hidden; }
  242. .popup-info { flex: 1; }
  243. .popup-title { font-weight: 700; margin-bottom: 4px; }
  244. .popup-sub { font-size: 12px; color: var(--text-muted); }
  245. .popup-actions { display: flex; gap: 8px; }
  246. .popup-btn { width: 40px; height: 40px; border-radius: 50%; border: none; cursor: pointer; font-size: 18px; display: flex; align-items: center; justify-content: center; }
  247. .popup-accept { background: var(--green); color: white; }
  248. .popup-decline { background: var(--red); color: white; }
  249. #lightbox { position: fixed; inset: 0; background: rgba(0,0,0,.88); display: flex; align-items: center; justify-content: center; z-index: 800; cursor: zoom-out; }
  250. #lightbox img { max-width: 90vw; max-height: 90vh; border-radius: 8px; object-fit: contain; }
  251. </style>
  252. </head>
  253. <body>
  254. <div id="auth-page">
  255. <div class="auth-card">
  256. <div class="auth-logo">Nex<span>Chat</span></div>
  257. <div class="auth-subtitle">Open a conversation. Build a community.</div>
  258. <div class="auth-tabs">
  259. <button class="auth-tab active" onclick="switchAuthTab('login')">Sign In</button>
  260. <button class="auth-tab" onclick="switchAuthTab('signup')">Create Account</button>
  261. </div>
  262. <div class="form-field">
  263. <label>Username</label>
  264. <input type="text" id="au" placeholder="your_handle" onkeydown="if(event.key==='Enter')handleAuth()">
  265. </div>
  266. <div class="form-field">
  267. <label>Password</label>
  268. <input type="password" id="ap" placeholder="••••••••" onkeydown="if(event.key==='Enter')handleAuth()">
  269. </div>
  270. <button class="btn-primary" id="auth-btn" onclick="handleAuth()">Sign In</button>
  271. <div class="auth-error" id="auth-error"></div>
  272. </div>
  273. </div>
  274. <div id="app-page" style="display:none">
  275. <div id="servers-bar">
  276. <div class="server-icon dm-icon active" id="dm-icon" title="Direct Messages" onclick="showDMHome()"><i class="fas fa-comment-dots"></i></div>
  277. <div class="server-icon" title="Friends & Requests" onclick="openFriendsView()"><i class="fas fa-user-friends"></i></div>
  278. <div class="server-divider"></div>
  279. <div id="server-icons-list"></div>
  280. <div class="server-divider"></div>
  281. <div class="add-server-btn" title="Create or Join Server" onclick="openServerModal()"><i class="fas fa-plus"></i></div>
  282. </div>
  283. <div id="channel-sidebar">
  284. <div class="sidebar-header">
  285. <span class="sidebar-title" id="sidebar-title">Direct Messages</span>
  286. <div class="sidebar-actions">
  287. <button class="sidebar-btn" title="Friends" onclick="openFriendsView()"><i class="fas fa-user-friends"></i></button>
  288. <button class="sidebar-btn" id="copy-server-id-btn" style="display:none" title="Copy Server ID" onclick="copyCurrentServerId()"><i class="fas fa-copy"></i></button>
  289. <button class="sidebar-btn" id="server-settings-btn" style="display:none" title="Server Settings" onclick="openServerSettingsModal()"><i class="fas fa-cog"></i></button>
  290. <button class="sidebar-btn" id="ch-add-btn" style="display:none" title="Create Channel" onclick="openChannelModal()"><i class="fas fa-plus"></i></button>
  291. </div>
  292. </div>
  293. <div class="channels-list" id="sidebar-list"></div>
  294. <div class="user-bar" onclick="openSettingsModal('profile')">
  295. <div class="user-av" id="uav">?</div>
  296. <div>
  297. <div class="user-name-display" id="uname">...</div>
  298. <div class="user-status-dot"><i class="fas fa-circle"></i> online</div>
  299. </div>
  300. <button class="logout-btn" onclick="event.stopPropagation();doLogout()" title="Log out"><i class="fas fa-sign-out-alt"></i></button>
  301. </div>
  302. </div>
  303. <div id="main-area">
  304. <div id="welcome-screen">
  305. <div class="wlc-icon"><i class="fas fa-comments"></i></div>
  306. <div class="wlc-title">Welcome to NexChat</div>
  307. <div class="wlc-sub">Select a channel or conversation to get started</div>
  308. </div>
  309. <div id="chat-view" style="display:none;flex-direction:column;flex:1;overflow:hidden">
  310. <div class="chat-header">
  311. <i id="chat-icon" class="fas fa-hashtag"></i>
  312. <span class="chat-header-name" id="chat-name">-</span>
  313. <button class="video-call-btn" id="start-video-call-btn" style="display:none" title="Start Video Call" onclick="initiateVideoCall()"><i class="fas fa-video"></i></button>
  314. <div style="margin-left:auto;display:flex;gap:8px">
  315. <button class="attach-btn" id="admin-members-btn" style="display:none" title="Manage Members" onclick="openAdminMembersModal()"><i class="fas fa-users-cog"></i></button>
  316. </div>
  317. </div>
  318. <div id="messages-wrap"></div>
  319. <div id="timeout-overlay" style="display:none">
  320. <div class="timeout-timer" id="timeout-timer">--:--</div>
  321. <div style="color:white;font-size:14px">You are timed out from chatting</div>
  322. </div>
  323. <div class="input-area">
  324. <div class="upload-preview" id="upload-prev">
  325. <span id="up-name"></span>
  326. <button class="upload-cancel" onclick="cancelUpload()"><i class="fas fa-times"></i></button>
  327. </div>
  328. <div class="input-bar">
  329. <button class="attach-btn" onclick="document.getElementById('file-input').click()" title="Attach file"><i class="fas fa-paperclip"></i></button>
  330. <button class="attach-btn" onclick="openGifModal()" title="Send GIF"><i class="fas fa-images"></i></button>
  331. <textarea id="msg-input" placeholder="Send a message..." rows="1" onkeydown="handleMsgKey(event)" oninput="autoGrow(this)"></textarea>
  332. <button class="send-btn" id="send-btn" onclick="sendMessage()"><i class="fas fa-paper-plane"></i></button>
  333. </div>
  334. <input type="file" id="file-input" onchange="onFileChosen(event)">
  335. </div>
  336. </div>
  337. <div id="friends-view" style="display:none;flex-direction:column;flex:1;overflow:hidden">
  338. <div class="ftabs">
  339. <button class="ftab active" onclick="ftab('friends')"><i class="fas fa-user-friends"></i> Friends</button>
  340. <button class="ftab" onclick="ftab('pending')"><i class="fas fa-clock"></i> Pending <span class="badge" id="pend-badge" style="display:none">0</span></button>
  341. <button class="ftab" onclick="ftab('add')"><i class="fas fa-user-plus"></i> Add Friend</button>
  342. </div>
  343. <div class="friends-content" id="friends-content"></div>
  344. </div>
  345. </div>
  346. </div>
  347. <!-- Server Modal -->
  348. <div class="overlay" id="server-modal" style="display:none" onclick="if(event.target===this)closeModal('server-modal')">
  349. <div class="modal">
  350. <h3><i class="fas fa-server"></i> Server</h3>
  351. <div class="modal-tabs">
  352. <button class="modal-tab active" id="mt-create" onclick="srvTab('create')">Create</button>
  353. <button class="modal-tab" id="mt-join" onclick="srvTab('join')">Join</button>
  354. </div>
  355. <div id="srv-create">
  356. <label>Server Name</label>
  357. <input type="text" id="srv-name" placeholder="My Awesome Server">
  358. <label>Server Icon (optional)</label>
  359. <input type="file" id="srv-icon-file" accept="image/*">
  360. <div class="small-note">You can also change the icon later from server settings.</div>
  361. </div>
  362. <div id="srv-join" style="display:none">
  363. <label>Server ID or Invite Code</label>
  364. <input type="text" id="srv-id" placeholder="Paste server ID or invite code here...">
  365. </div>
  366. <div class="modal-actions">
  367. <button class="btn-cancel" onclick="closeModal('server-modal')">Cancel</button>
  368. <button class="btn-confirm" id="srv-btn" onclick="handleServerModal()">Create</button>
  369. </div>
  370. </div>
  371. </div>
  372. <!-- Server Settings Modal -->
  373. <div class="overlay" id="server-settings-modal" style="display:none" onclick="if(event.target===this)closeModal('server-settings-modal')">
  374. <div class="modal">
  375. <h3><i class="fas fa-cog"></i> Server Settings</h3>
  376. <div class="preview-box" id="server-settings-preview">
  377. <img id="server-settings-preview-img" src="" alt="server icon preview" style="display:none">
  378. <div class="txt" id="server-settings-preview-txt">No icon selected</div>
  379. </div>
  380. <label>Server Name</label>
  381. <input type="text" id="ss-name" placeholder="Server name">
  382. <label>Server Icon (file upload)</label>
  383. <input type="file" id="ss-icon-file" accept="image/*">
  384. <label>Or Icon URL</label>
  385. <input type="text" id="ss-icon-url" placeholder="https://...">
  386. <label>Invite Code (valid 1 hour)</label>
  387. <div style="display:flex;gap:8px;margin-bottom:14px">
  388. <input type="text" id="invite-code-display" readonly style="margin-bottom:0;background:var(--bg-input)">
  389. <button class="btn-ghost" onclick="generateTempInvite()" style="white-space:nowrap"><i class="fas fa-sync-alt"></i> Generate</button>
  390. </div>
  391. <div class="modal-actions" style="justify-content:space-between">
  392. <button class="btn-ghost" style="color:var(--red)" onclick="deleteServer()"><i class="fas fa-trash-alt"></i> Delete Server</button>
  393. <div style="display:flex;gap:8px">
  394. <button class="btn-cancel" onclick="closeModal('server-settings-modal')">Cancel</button>
  395. <button class="btn-confirm" onclick="saveServerSettings()">Save</button>
  396. </div>
  397. </div>
  398. </div>
  399. </div>
  400. <!-- Settings Modal -->
  401. <div class="overlay" id="settings-modal" style="display:none" onclick="if(event.target===this)closeModal('settings-modal')">
  402. <div class="modal" style="width:500px;max-width:90vw;">
  403. <h3><i class="fas fa-sliders-h"></i> Settings</h3>
  404. <div class="modal-tabs">
  405. <button class="modal-tab active" data-stab="profile"><i class="fas fa-user-circle"></i> Profile</button>
  406. <button class="modal-tab" data-stab="account"><i class="fas fa-key"></i> Account</button>
  407. <button class="modal-tab" data-stab="blocked"><i class="fas fa-ban"></i> Blocked</button>
  408. <button class="modal-tab" data-stab="danger"><i class="fas fa-exclamation-triangle"></i> Danger</button>
  409. </div>
  410. <div id="stab-profile" class="stab-content">
  411. <div class="preview-box">
  412. <img id="settings-profile-preview-img" src="" alt="profile preview" style="display:none">
  413. <div class="txt" id="settings-profile-preview-txt">No avatar selected</div>
  414. </div>
  415. <label>Username</label>
  416. <input type="text" id="settings-username" disabled>
  417. <label>Profile Pic (file upload)</label>
  418. <input type="file" id="settings-avatar-file" accept="image/*">
  419. <label>Or Avatar URL</label>
  420. <input type="text" id="settings-avatar-url" placeholder="https://...">
  421. <label>Theme</label>
  422. <select id="settings-theme">
  423. <option value="dark">Dark</option>
  424. <option value="light">Light</option>
  425. <option value="high-contrast">High Contrast</option>
  426. <option value="forest">Forest</option>
  427. <option value="slate">Slate</option>
  428. </select>
  429. <label>Message Font</label>
  430. <select id="settings-font">
  431. <option value="JetBrains Mono">JetBrains Mono</option>
  432. <option value="Syne">Syne</option>
  433. <option value="Inter">Inter</option>
  434. <option value="monospace">Monospace</option>
  435. </select>
  436. </div>
  437. <div id="stab-account" class="stab-content" style="display:none">
  438. <label>Current Password</label>
  439. <input type="password" id="old-password" placeholder="Enter current password">
  440. <label>New Password</label>
  441. <input type="password" id="new-password" placeholder="New password">
  442. <label>Confirm New Password</label>
  443. <input type="password" id="confirm-password" placeholder="Confirm new password">
  444. <button class="btn-primary" onclick="changePassword()" style="margin-top:8px">Change Password</button>
  445. <div id="password-change-msg" style="font-size:12px;margin-top:8px;color:var(--amber)"></div>
  446. </div>
  447. <div id="stab-blocked" class="stab-content" style="display:none">
  448. <div id="blocked-list"></div>
  449. </div>
  450. <div id="stab-danger" class="stab-content" style="display:none">
  451. <p style="color:var(--red);margin-bottom:16px">Permanently delete your account and all data.</p>
  452. <label>Enter your password to confirm</label>
  453. <input type="password" id="delete-password" placeholder="Your password">
  454. <button class="btn-ghost" style="color:var(--red);border-color:var(--red);width:100%" onclick="deleteAccount()">Delete Account</button>
  455. </div>
  456. <div class="modal-actions">
  457. <button class="btn-cancel" onclick="closeModal('settings-modal')">Close</button>
  458. <button class="btn-confirm" id="save-settings-btn" onclick="saveProfileSettings()">Save</button>
  459. </div>
  460. </div>
  461. </div>
  462. <!-- Channel Modal -->
  463. <div class="overlay" id="channel-modal" style="display:none" onclick="if(event.target===this)closeModal('channel-modal')">
  464. <div class="modal">
  465. <h3><i class="fas fa-hashtag"></i> New Channel</h3>
  466. <label>Channel Name</label>
  467. <input type="text" id="ch-name" placeholder="general">
  468. <div style="display:flex;align-items:center;gap:8px;margin-bottom:14px">
  469. <input type="checkbox" id="ch-restricted" style="width:auto;margin-bottom:0">
  470. <label style="margin:0;text-transform:none;letter-spacing:normal;font-size:13px">Restricted (only selected members)</label>
  471. </div>
  472. <div class="modal-actions">
  473. <button class="btn-cancel" onclick="closeModal('channel-modal')">Cancel</button>
  474. <button class="btn-confirm" onclick="createChannel()">Create</button>
  475. </div>
  476. </div>
  477. </div>
  478. <!-- GIF Modal -->
  479. <div class="overlay" id="gif-modal" style="display:none" onclick="if(event.target===this)closeModal('gif-modal')">
  480. <div class="modal">
  481. <h3><i class="fas fa-images"></i> GIF</h3>
  482. <label>GIF URL or Tenor/Giphy link</label>
  483. <input type="text" id="gif-url" placeholder="Paste GIF link here...">
  484. <label>Caption (optional)</label>
  485. <input type="text" id="gif-caption" placeholder="Add text with the GIF...">
  486. <div class="small-note">Direct .gif links always work. Tenor/Giphy page links are auto-resolved when possible.</div>
  487. <div class="modal-actions">
  488. <button class="btn-cancel" onclick="closeModal('gif-modal')">Cancel</button>
  489. <button class="btn-confirm" onclick="sendGifFromModal()">Send GIF</button>
  490. </div>
  491. </div>
  492. </div>
  493. <!-- Admin Members Modal -->
  494. <div class="overlay" id="admin-members-modal" style="display:none" onclick="if(event.target===this)closeModal('admin-members-modal')">
  495. <div class="modal" style="width:500px;max-width:90vw">
  496. <h3><i class="fas fa-users-cog"></i> Manage Members</h3>
  497. <div id="admin-members-list"></div>
  498. </div>
  499. </div>
  500. <!-- Invite Server Modal -->
  501. <div class="overlay" id="invite-server-modal" style="display:none" onclick="if(event.target===this)closeModal('invite-server-modal')">
  502. <div class="modal">
  503. <h3><i class="fas fa-user-plus"></i> Invite to Server</h3>
  504. <p style="font-size:13px;margin-bottom:16px">Select a server to invite <span id="invite-friend-name"></span></p>
  505. <div id="invite-server-list" style="max-height:300px;overflow-y:auto"></div>
  506. <div class="modal-actions">
  507. <button class="btn-cancel" onclick="closeModal('invite-server-modal')">Cancel</button>
  508. </div>
  509. </div>
  510. </div>
  511. <!-- Demo Modal -->
  512. <div class="overlay" id="demo-modal" style="display:none" onclick="if(event.target===this)closeModal('demo-modal')">
  513. <div class="modal" style="width:min(92vw,960px);padding:18px;display:flex;flex-direction:column;max-height:90vh">
  514. <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:12px">
  515. <span style="font-weight:700;font-size:14px" id="demo-title">HTML Preview</span>
  516. <button class="btn-cancel" onclick="closeModal('demo-modal')">✕ Close</button>
  517. </div>
  518. <iframe id="demo-iframe" sandbox="allow-scripts allow-same-origin allow-forms" style="flex:1;border:1px solid var(--border);border-radius:8px;background:#fff;min-height:60vh"></iframe>
  519. </div>
  520. </div>
  521. <!-- CSV Modal -->
  522. <div class="overlay" id="csv-modal" style="display:none" onclick="if(event.target===this)closeModal('csv-modal')">
  523. <div class="modal" style="width:min(88vw,820px);max-height:82vh;overflow:hidden;display:flex;flex-direction:column;padding:20px">
  524. <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:8px">
  525. <span style="font-weight:700;font-size:14px" id="csv-title">CSV Preview</span>
  526. <button class="btn-cancel" onclick="closeModal('csv-modal')">✕ Close</button>
  527. </div>
  528. <div class="csv-wrap" id="csv-wrap"></div>
  529. </div>
  530. </div>
  531. <!-- Video Call Modal -->
  532. <div class="overlay" id="video-call-modal" style="display:none" onclick="if(event.target===this)vcHangUp()">
  533. <div class="modal">
  534. <h3><i class="fas fa-video"></i> Video Call with <span id="vc-peer-name"></span></h3>
  535. <div class="vc-status" id="vc-status">Connecting...</div>
  536. <div class="vc-videos">
  537. <div class="vc-video-wrap">
  538. <video id="vc-local-video" autoplay playsinline muted></video>
  539. <div class="vc-label">You</div>
  540. </div>
  541. <div class="vc-video-wrap" id="vc-remote-wrap">
  542. <video id="vc-remote-video" autoplay playsinline></video>
  543. <div class="vc-label" id="vc-remote-label">Remote</div>
  544. <div class="vc-connecting-overlay" id="vc-remote-overlay">
  545. <div class="spinner"></div>
  546. <span>Waiting for peer...</span>
  547. </div>
  548. </div>
  549. </div>
  550. <div class="vc-controls">
  551. <button class="vc-btn vc-btn-mute" id="vc-mute-btn" onclick="vcToggleMute()"><i class="fas fa-microphone"></i> Mute</button>
  552. <button class="vc-btn vc-btn-video" id="vc-video-btn" onclick="vcToggleVideo()"><i class="fas fa-video"></i> Stop Video</button>
  553. </div>
  554. <button class="vc-btn vc-btn-hangup" onclick="vcHangUp()"><i class="fas fa-phone-slash"></i> End Call</button>
  555. </div>
  556. </div>
  557. <!-- Incoming Call Popup -->
  558. <div id="incoming-call-popup">
  559. <div class="popup-avatar" id="incoming-avatar">?</div>
  560. <div class="popup-info">
  561. <div class="popup-title" id="incoming-title">Incoming Video Call</div>
  562. <div class="popup-sub" id="incoming-sub">from ...</div>
  563. </div>
  564. <div class="popup-actions">
  565. <button class="popup-btn popup-accept" onclick="acceptIncomingCall()"><i class="fas fa-check"></i></button>
  566. <button class="popup-btn popup-decline" onclick="declineIncomingCall()"><i class="fas fa-times"></i></button>
  567. </div>
  568. </div>
  569. <!-- Lightbox -->
  570. <div id="lightbox" style="display:none" onclick="closeLightbox()">
  571. <img id="lb-img" src="" alt="">
  572. </div>
  573. <!-- Context Menu -->
  574. <div id="ctx-menu">
  575. <div class="ctx-item" data-action="download"><i class="fas fa-download"></i> Download</div>
  576. <div class="ctx-item" data-action="copy-link"><i class="fas fa-link"></i> Copy Link</div>
  577. </div>
  578. <!-- Toast -->
  579. <div id="toast"></div>
  580. <script>
  581. // ==================== CONFIGURATION ====================
  582. const SUPABASE_URL = 'https://nmcawpwleesngoqobvzp.supabase.co';
  583. const SUPABASE_ANON = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6Im5tY2F3cHdsZWVzbmdvcW9idnpwIiwicm9sZSI6ImFub24iLCJpYXQiOjE3NzU3NTg0MzcsImV4cCI6MjA5MTMzNDQzN30.iTpKNR7d5MztIfxj01ycd7de8vCvLBHSqG7LCCcgVAY';
  584. const BUCKET = 'chat-files';
  585. const sb = window.supabase.createClient(SUPABASE_URL, SUPABASE_ANON);
  586. const GAS_URL = 'https://script.google.com/macros/s/AKfycbxZai-422M6DQZlXGgzqdteSSez5qad_IXBCZKPuk2oBsv7iCg3wcFXH8dAK2WZS7eg/exec';
  587. const ICE_CONFIG = {
  588. iceServers: [
  589. { urls: 'stun:stun.l.google.com:19302' },
  590. { urls: 'stun:stun1.l.google.com:19302' },
  591. { urls: 'stun:stun2.l.google.com:19302' },
  592. { urls: 'turn:openrelay.metered.ca:80', username: 'openrelayproject', credential: 'openrelayproject' },
  593. { urls: 'turn:openrelay.metered.ca:443', username: 'openrelayproject', credential: 'openrelayproject' },
  594. { urls: 'turn:openrelay.metered.ca:443?transport=tcp',username: 'openrelayproject', credential: 'openrelayproject' }
  595. ],
  596. iceCandidatePoolSize: 10
  597. };
  598. const VC_POLL_INTERVAL = 1500;
  599. const VC_MAX_POLL = 80;
  600. const VC_ICE_BATCH_MS = 600;
  601.  
  602. // ==================== GLOBAL STATE ====================
  603. let CU = null, CS = null, CC = null, CDM = null, VIEW = null;
  604. let srvModalTab = 'create', activeFTab = 'friends', pendingFile = null, msgSub = null;
  605. let pBadgeTimer = null, msgPollTimer = null, authMode = 'login', _tt = null;
  606. let renderedMsgIds = new Set(), pendingGifUrl = null;
  607. let currentContextTarget = null, timeoutInterval = null;
  608. let pendingInviteFriendId = null, pendingInviteFriendName = '';
  609. let activityInterval = null;
  610.  
  611. // Video call state
  612. let vcLocalStream = null;
  613. let vcPeerConnection = null;
  614. let vcCurrentCallId = null;
  615. let vcCurrentGasCode = null;
  616. let vcCurrentPeerId = null;
  617. let vcCurrentPeerName = '';
  618. let vcIsCaller = false;
  619. let vcAudioMuted = false;
  620. let vcVideoStopped = false;
  621. let vcCallSubscription = null;
  622. let vcIceBatchQueue = [];
  623. let vcIceBatchTimer = null;
  624. let vcPollTimer = null;
  625. let vcHangupPollTimer = null;
  626. let vcKnownCallerIce = 0;
  627. let vcKnownCalleeIce = 0;
  628. let vcCallActive = false;
  629. let vcHangupSignalled = false;
  630. let vcIsHangingUp = false; // guard against double-execution
  631. let incomingCallData = null;
  632. let incomingPollInterval= null;
  633. let vcStatusChannel = null; // Supabase realtime for call status changes
  634.  
  635. // ==================== UTILITY ====================
  636. function toast(msg, type = '') {
  637. const el = document.getElementById('toast');
  638. el.textContent = msg; el.className = 'show ' + type;
  639. if (_tt) clearTimeout(_tt);
  640. _tt = setTimeout(() => el.className = '', 3500);
  641. }
  642. async function gasApi(action, payload = {}) {
  643. const res = await fetch(GAS_URL, {
  644. method: 'POST', mode: 'cors', redirect: 'follow',
  645. headers: { 'Content-Type': 'text/plain' },
  646. body: JSON.stringify({ action, ...payload })
  647. });
  648. return res.json();
  649. }
  650. function getCurrentAuthorId(m) { return m.user_id ?? m.sender_id ?? m.author_id ?? null; }
  651. function hasCurrentOwnership(m) { const aid = getCurrentAuthorId(m); return CU && aid === CU.id; }
  652. function fmtBytes(b) {
  653. if (b < 1024) return b + 'B';
  654. if (b < 1048576) return (b / 1024).toFixed(1) + 'KB';
  655. return (b / 1048576).toFixed(1) + 'MB';
  656. }
  657. async function clearMsgSubscription() {
  658. if (msgSub) { try { await sb.removeChannel(msgSub); } catch (_) {} msgSub = null; }
  659. }
  660. function stopMsgPoll() { if (msgPollTimer) { clearInterval(msgPollTimer); msgPollTimer = null; } }
  661. function startMsgPoll() {
  662. stopMsgPoll();
  663. msgPollTimer = setInterval(() => { if ((VIEW === 'channel' && CC) || (VIEW === 'dm' && CDM)) loadMessages(); }, 2500);
  664. }
  665.  
  666. // ==================== ACTIVITY TRACKING ====================
  667. function startActivityTracking() {
  668. if (activityInterval) clearInterval(activityInterval);
  669. const updateLastSeen = async () => {
  670. if (!CU) return;
  671. await sb.from('profiles').update({ last_seen: new Date().toISOString() }).eq('id', CU.id);
  672. };
  673. updateLastSeen();
  674. activityInterval = setInterval(updateLastSeen, 30000);
  675. }
  676.  
  677. // ==================== AUTH ====================
  678. async function init() {
  679. document.getElementById('auth-page').style.display = 'flex';
  680. document.getElementById('app-page').style.display = 'none';
  681. showWelcome();
  682. initContextMenu();
  683. applyTheme(localStorage.getItem('nexchat_theme') || 'dark');
  684. applyMessageFont(localStorage.getItem('nexchat_msg_font') || 'JetBrains Mono');
  685. }
  686. async function finishLoginFlow(userData) {
  687. CU = {
  688. id: userData.id, username: userData.username,
  689. avatar_url: userData.avatar_url || null,
  690. pinned_friends: userData.pinned_friends || [],
  691. blocked_users: userData.blocked_users || [],
  692. last_seen: userData.last_seen || null
  693. };
  694. document.getElementById('uname').textContent = userData.username;
  695. document.getElementById('uav').innerHTML = userData.avatar_url
  696. ? `<img src="${userData.avatar_url}" alt="avatar">`
  697. : userData.username[0].toUpperCase();
  698. document.getElementById('auth-page').style.display = 'none';
  699. document.getElementById('app-page').style.display = 'flex';
  700. try {
  701. startActivityTracking();
  702. await showDMHome();
  703. await loadServers();
  704. startPendingPoll();
  705. setupVideoCallSubscriptions();
  706. setupServerMembersSubscription();
  707. try { await cleanupStaleCalls(); } catch (_) {}
  708. startIncomingCallPolling();
  709. } catch (e) {
  710. console.error('[LOGIN] Setup error:', e);
  711. toast('Login error: ' + (e.message || e) + ' — try refreshing.', 'error');
  712. }
  713. }
  714. async function doLogout() {
  715. if (activityInterval) clearInterval(activityInterval);
  716. if (incomingPollInterval) clearInterval(incomingPollInterval);
  717. if (vcCallSubscription) { sb.removeChannel(vcCallSubscription).catch(() => {}); vcCallSubscription = null; }
  718. if (vcStatusChannel) { sb.removeChannel(vcStatusChannel).catch(() => {}); vcStatusChannel = null; }
  719. CU = CS = CC = CDM = null; VIEW = null; pendingFile = null; renderedMsgIds.clear();
  720. stopMsgPoll(); await clearMsgSubscription();
  721. if (pBadgeTimer) { clearInterval(pBadgeTimer); pBadgeTimer = null; }
  722. document.getElementById('au').value = ''; document.getElementById('ap').value = '';
  723. document.getElementById('auth-error').textContent = '';
  724. document.getElementById('auth-page').style.display = 'flex';
  725. document.getElementById('app-page').style.display = 'none';
  726. showWelcome();
  727. }
  728. function switchAuthTab(m) {
  729. authMode = m;
  730. document.querySelectorAll('.auth-tab').forEach((t, i) => t.classList.toggle('active', m === 'login' ? i === 0 : i === 1));
  731. document.getElementById('auth-btn').textContent = m === 'login' ? 'Sign In' : 'Create Account';
  732. document.getElementById('auth-error').textContent = '';
  733. }
  734. async function handleAuth() {
  735. const username = document.getElementById('au').value.trim().toLowerCase();
  736. const password = document.getElementById('ap').value;
  737. const errEl = document.getElementById('auth-error');
  738. const btn = document.getElementById('auth-btn');
  739. errEl.textContent = '';
  740. if (!username || !password) { errEl.textContent = 'Fill in all fields.'; return; }
  741. if (username.length < 3) { errEl.textContent = 'Username must be ≥3 chars.'; return; }
  742. if (authMode === 'signup' && !/^[a-z0-9_]+$/.test(username)) { errEl.textContent = 'Username may only contain letters, numbers, and underscores.'; return; }
  743. btn.disabled = true; btn.textContent = 'Please wait…';
  744. try {
  745. if (authMode === 'signup') {
  746. if (password.length < 6) { errEl.textContent = 'Password must be ≥6 chars.'; return; }
  747. const { data: existingUser } = await sb.from('profiles').select('id').eq('username', username).maybeSingle();
  748. if (existingUser) { errEl.textContent = 'Username already taken.'; return; }
  749. const { data: newUser, error } = await sb.from('profiles').insert({ username, password, last_seen: new Date().toISOString() }).select('*').single();
  750. if (error) { errEl.textContent = 'Error creating account: ' + error.message; return; }
  751. await finishLoginFlow(newUser);
  752. } else {
  753. const { data: user, error } = await sb.from('profiles').select('*').eq('username', username).eq('password', password).maybeSingle();
  754. if (error) { errEl.textContent = 'Database error: ' + error.message; return; }
  755. if (!user) { errEl.textContent = 'Invalid username or password.'; return; }
  756. await finishLoginFlow(user);
  757. }
  758. } catch (e) {
  759. console.error('[AUTH] Unexpected error:', e);
  760. errEl.textContent = 'Something went wrong: ' + (e.message || e);
  761. } finally {
  762. btn.disabled = false;
  763. btn.textContent = authMode === 'login' ? 'Sign In' : 'Create Account';
  764. }
  765. }
  766.  
  767. // ==================== SERVERS ====================
  768. async function loadServers() {
  769. if (!CU) return;
  770. const list = document.getElementById('server-icons-list');
  771. list.innerHTML = '';
  772. const { data: memberships, error: memErr } = await sb.from('server_members').select('server_id').eq('user_id', CU.id);
  773. if (memErr) { console.error('[Servers] membership fetch error:', memErr); return; }
  774. const serverIds = [...new Set((memberships || []).map(r => r.server_id).filter(Boolean))];
  775. if (!serverIds.length) return;
  776. const { data: servers, error: srvErr } = await sb.from('servers').select('id,name,icon_url,owner_id').in('id', serverIds);
  777. if (srvErr) { console.error('[Servers] servers fetch error:', srvErr); return; }
  778. const serverMap = new Map((servers || []).map(s => [s.id, s]));
  779. serverIds.forEach(id => {
  780. const s = serverMap.get(id);
  781. if (!s) return;
  782. const el = document.createElement('div');
  783. el.className = 'server-icon' + (CS?.id === s.id ? ' active' : '');
  784. el.title = s.name;
  785. el.dataset.id = s.id;
  786. el.innerHTML = s.icon_url
  787. ? `<img src="${s.icon_url}" alt="server icon" style="width:100%;height:100%;object-fit:cover;border-radius:inherit">`
  788. : `<span style="font-size:18px;font-weight:800;letter-spacing:-0.5px">${s.name.trim()[0].toUpperCase()}</span>`;
  789. el.onclick = () => selectServer(s, true);
  790. list.appendChild(el);
  791. });
  792. }
  793. function setupServerMembersSubscription() {
  794. if (!CU) return;
  795. sb.channel('server-members-' + CU.id)
  796. .on('postgres_changes',
  797. { event: 'INSERT', schema: 'public', table: 'server_members', filter: `user_id=eq.${CU.id}` },
  798. async () => { await loadServers(); toast('You were added to a server!', 'success'); }
  799. ).subscribe();
  800. }
  801. async function selectServer(server, skipCheck = false) {
  802. if (!skipCheck) {
  803. const { data: membership } = await sb.from('server_members').select('server_id').eq('server_id', server.id).eq('user_id', CU.id).maybeSingle();
  804. if (!membership) { toast('You are not a member of this server.', 'error'); return; }
  805. }
  806. CS = server; CC = null; CDM = null; VIEW = 'channel';
  807. stopMsgPoll(); await clearMsgSubscription();
  808. document.querySelectorAll('.server-icon[data-id]').forEach(el => el.classList.toggle('active', el.dataset.id === server.id));
  809. document.getElementById('dm-icon').classList.remove('active');
  810. document.getElementById('sidebar-title').textContent = server.name;
  811. document.getElementById('ch-add-btn').style.display = 'flex';
  812. document.getElementById('copy-server-id-btn').style.display = 'flex';
  813. document.getElementById('server-settings-btn').style.display = CS.owner_id === CU.id ? 'flex' : 'none';
  814. document.getElementById('admin-members-btn').style.display = CS.owner_id === CU.id ? 'flex' : 'none';
  815. document.getElementById('start-video-call-btn').style.display = 'none';
  816. showWelcome();
  817. await loadChannels(server.id);
  818. checkTimeoutOrBan();
  819. await sb.from('profiles').update({ last_seen: new Date().toISOString() }).eq('id', CU.id);
  820. }
  821. async function loadChannels(serverId) {
  822. const { data, error } = await sb.from('channels').select('*').eq('server_id', serverId).order('name', { ascending: true });
  823. if (error) { toast('Failed to load channels', 'error'); return; }
  824. const list = document.getElementById('sidebar-list');
  825. list.innerHTML = '<div class="ch-section"><i class="fas fa-hashtag"></i> Text Channels</div>';
  826. if (!data?.length) { list.innerHTML += '<div class="empty-state"><div>No channels yet</div></div>'; return; }
  827. data.forEach(ch => {
  828. const el = document.createElement('div');
  829. el.className = 'channel-item' + (CC?.id === ch.id ? ' active' : '');
  830. el.dataset.id = ch.id;
  831. el.innerHTML = `<i class="fas fa-hashtag"></i><span>${ch.name}</span>`;
  832. el.onclick = () => selectChannel(ch);
  833. list.appendChild(el);
  834. });
  835. }
  836. function openServerModal() {
  837. srvTab('create');
  838. document.getElementById('srv-name').value = '';
  839. document.getElementById('srv-id').value = '';
  840. document.getElementById('srv-icon-file').value = '';
  841. document.getElementById('server-modal').style.display = 'flex';
  842. }
  843. function srvTab(t) {
  844. srvModalTab = t;
  845. document.getElementById('srv-create').style.display = t === 'create' ? 'block' : 'none';
  846. document.getElementById('srv-join').style.display = t === 'join' ? 'block' : 'none';
  847. document.getElementById('mt-create').classList.toggle('active', t === 'create');
  848. document.getElementById('mt-join').classList.toggle('active', t === 'join');
  849. document.getElementById('srv-btn').textContent = t === 'create' ? 'Create' : 'Join';
  850. }
  851. async function uploadImageFile(file, folder) {
  852. const path = `${folder}/${CU.id}/${Date.now()}-${file.name}`;
  853. const { error } = await sb.storage.from(BUCKET).upload(path, file, { upsert: false });
  854. if (error) throw error;
  855. return sb.storage.from(BUCKET).getPublicUrl(path).data.publicUrl;
  856. }
  857. async function handleServerModal() {
  858. if (!CU) return;
  859. if (srvModalTab === 'create') {
  860. const name = document.getElementById('srv-name').value.trim();
  861. if (!name) return;
  862. let icon_url = null;
  863. const iconFile = document.getElementById('srv-icon-file').files[0];
  864. if (iconFile) { try { icon_url = await uploadImageFile(iconFile, 'server-icons'); } catch (e) { toast('Icon upload failed: ' + e.message, 'error'); return; } }
  865. const { data: srv, error } = await sb.from('servers').insert({ name, owner_id: CU.id, icon_url }).select('id,name,icon_url,owner_id').single();
  866. if (error || !srv) { toast('Error creating server', 'error'); return; }
  867. await sb.from('server_members').insert({ server_id: srv.id, user_id: CU.id, role: 'owner' });
  868. await sb.from('channels').insert({ server_id: srv.id, name: 'general' });
  869. closeModal('server-modal'); await loadServers(); await selectServer(srv, true);
  870. toast(`"${name}" created!`, 'success');
  871. setTimeout(() => { navigator.clipboard?.writeText(srv.id); toast('Server ID copied!', 'success'); }, 1200);
  872. } else {
  873. const input = document.getElementById('srv-id').value.trim();
  874. if (!input) return;
  875. if (input.length <= 10) {
  876. const { data: invite } = await sb.from('server_invites').select('server_id').eq('code', input.toUpperCase()).gt('expires_at', new Date().toISOString()).maybeSingle();
  877. if (invite) {
  878. const { data: srv } = await sb.from('servers').select('id,name,icon_url,owner_id').eq('id', invite.server_id).single();
  879. if (srv) {
  880. const { error: memErr } = await sb.from('server_members').insert({ server_id: srv.id, user_id: CU.id });
  881. if (memErr) { toast('Failed to join', 'error'); return; }
  882. closeModal('server-modal'); await loadServers(); await selectServer(srv, true);
  883. toast(`Joined "${srv.name}"!`, 'success'); return;
  884. }
  885. }
  886. }
  887. const cleanSid = input.replace(/\s+/g, '');
  888. const { data: srv } = await sb.from('servers').select('id,name,icon_url,owner_id').eq('id', cleanSid).maybeSingle();
  889. if (!srv) { toast('Server not found', 'error'); return; }
  890. const { data: ex } = await sb.from('server_members').select('server_id').eq('server_id', cleanSid).eq('user_id', CU.id).maybeSingle();
  891. if (ex) { toast('Already a member', 'error'); return; }
  892. const { error: memErr } = await sb.from('server_members').insert({ server_id: cleanSid, user_id: CU.id });
  893. if (memErr) { toast('Failed to join', 'error'); return; }
  894. closeModal('server-modal'); await loadServers(); await selectServer(srv, true);
  895. toast(`Joined "${srv.name}"!`, 'success');
  896. }
  897. }
  898.  
  899. // ==================== SERVER SETTINGS ====================
  900. function openServerSettingsModal() {
  901. if (!CS) return;
  902. document.getElementById('ss-name').value = CS.name || '';
  903. document.getElementById('ss-icon-file').value = '';
  904. document.getElementById('ss-icon-url').value = CS.icon_url || '';
  905. setPreview('server-settings-preview', CS.icon_url);
  906. document.getElementById('invite-code-display').value = '';
  907. document.getElementById('server-settings-modal').style.display = 'flex';
  908. }
  909. async function generateTempInvite() {
  910. if (!CS || CS.owner_id !== CU.id) return;
  911. const code = Math.random().toString(36).substring(2, 7).toUpperCase();
  912. const expires = new Date(Date.now() + 3600000).toISOString();
  913. await sb.from('server_invites').insert({ server_id: CS.id, code, expires_at: expires });
  914. document.getElementById('invite-code-display').value = code;
  915. toast('Invite code generated! Valid 1 hour.', 'success');
  916. navigator.clipboard?.writeText(code);
  917. }
  918. async function deleteServer() {
  919. if (!CS || CS.owner_id !== CU.id) return;
  920. if (!confirm('Delete this server permanently? All data will be lost.')) return;
  921. await sb.from('servers').delete().eq('id', CS.id);
  922. CS = null; CC = null;
  923. closeModal('server-settings-modal');
  924. await showDMHome(); await loadServers();
  925. toast('Server deleted', 'success');
  926. }
  927. async function saveServerSettings() {
  928. if (!CS) return;
  929. const name = document.getElementById('ss-name').value.trim();
  930. const file = document.getElementById('ss-icon-file').files[0];
  931. const url = document.getElementById('ss-icon-url').value.trim();
  932. let icon_url = url || CS.icon_url || null;
  933. if (file) { try { icon_url = await uploadImageFile(file, 'server-icons'); } catch (e) { toast('Upload failed', 'error'); return; } }
  934. const { data, error } = await sb.from('servers').update({ name: name || CS.name, icon_url }).eq('id', CS.id).select('id,name,icon_url,owner_id').single();
  935. if (error) { toast('Failed to save', 'error'); return; }
  936. CS = data;
  937. document.getElementById('sidebar-title').textContent = CS.name;
  938. closeModal('server-settings-modal'); await loadServers();
  939. toast('Server updated!', 'success');
  940. }
  941. function copyCurrentServerId() { if (CS?.id) navigator.clipboard?.writeText(CS.id).then(() => toast('Server ID copied!', 'success')); }
  942.  
  943. // ==================== CHANNELS ====================
  944. function openChannelModal() {
  945. if (!CS) return;
  946. document.getElementById('ch-name').value = '';
  947. document.getElementById('ch-restricted').checked = false;
  948. document.getElementById('channel-modal').style.display = 'flex';
  949. }
  950. async function createChannel() {
  951. const name = document.getElementById('ch-name').value.trim().toLowerCase().replace(/\s+/g, '-').replace(/[^a-z0-9-]/g, '');
  952. if (!name || !CS) return;
  953. const restricted = document.getElementById('ch-restricted').checked;
  954. const { error } = await sb.from('channels').insert({ server_id: CS.id, name, is_restricted: restricted });
  955. if (error) { toast('Failed to create channel', 'error'); return; }
  956. closeModal('channel-modal'); await loadChannels(CS.id);
  957. toast(`#${name} created`, 'success');
  958. }
  959. async function selectChannel(ch) {
  960. if (ch.is_restricted) {
  961. const { data: allowed } = await sb.from('channel_allowed_users').select('user_id').eq('channel_id', ch.id).eq('user_id', CU.id).maybeSingle();
  962. if (!allowed && CS.owner_id !== CU.id) { toast('You do not have access to this restricted channel', 'error'); return; }
  963. }
  964. CC = ch; CDM = null; VIEW = 'channel';
  965. await clearMsgSubscription();
  966. document.querySelectorAll('.channel-item').forEach(el => el.classList.toggle('active', el.dataset.id == ch.id));
  967. document.getElementById('chat-icon').className = 'fas fa-hashtag';
  968. document.getElementById('chat-name').textContent = ch.name;
  969. document.getElementById('msg-input').placeholder = `Message #${ch.name}`;
  970. document.getElementById('start-video-call-btn').style.display = 'none';
  971. showChatView(); await loadMessages(); await subscribeMsgs(); startMsgPoll();
  972. checkTimeoutOrBan();
  973. await sb.from('profiles').update({ last_seen: new Date().toISOString() }).eq('id', CU.id);
  974. }
  975.  
  976. // ==================== DM / FRIENDS ====================
  977. async function showDMHome() {
  978. CS = null; CC = null; CDM = null; VIEW = 'home';
  979. stopMsgPoll(); await clearMsgSubscription();
  980. document.querySelectorAll('.server-icon[data-id]').forEach(el => el.classList.remove('active'));
  981. document.getElementById('dm-icon').classList.add('active');
  982. document.getElementById('sidebar-title').textContent = 'Direct Messages';
  983. document.getElementById('ch-add-btn').style.display = 'none';
  984. document.getElementById('copy-server-id-btn').style.display = 'none';
  985. document.getElementById('server-settings-btn').style.display = 'none';
  986. document.getElementById('admin-members-btn').style.display = 'none';
  987. document.getElementById('start-video-call-btn').style.display = 'none';
  988. showWelcome(); await loadDMSidebar();
  989. }
  990. async function loadDMSidebar() {
  991. if (!CU) return;
  992. const { data: fships } = await sb.from('friendships').select('id,requester_id,addressee_id,status').or(`requester_id.eq.${CU.id},addressee_id.eq.${CU.id}`).eq('status', 'accepted');
  993. const list = document.getElementById('sidebar-list');
  994. list.innerHTML = '<div class="ch-section"><i class="fas fa-comment-dots"></i> Direct Messages <button class="sidebar-btn" onclick="openFriendsView()" style="display:inline-flex;width:18px;height:18px;font-size:13px"><i class="fas fa-user-friends"></i></button></div>';
  995. const friendIds = [...new Set((fships || []).map(f => f.requester_id === CU.id ? f.addressee_id : f.requester_id).filter(Boolean))];
  996. if (!friendIds.length) { list.innerHTML += '<div class="empty-state"><div class="ico"><i class="fas fa-user-plus"></i></div><div>Add friends to start DMing</div></div>'; return; }
  997. const { data: profiles } = await sb.from('profiles').select('id,username,avatar_url,last_seen').in('id', friendIds);
  998. const profileMap = new Map((profiles || []).map(p => [String(p.id), p]));
  999. const pinned = CU.pinned_friends || [];
  1000. const sortedIds = [...friendIds].sort((a, b) => (pinned.includes(b) ? 1 : 0) - (pinned.includes(a) ? 1 : 0));
  1001. sortedIds.forEach(fid => {
  1002. const prof = profileMap.get(String(fid)); if (!prof) return;
  1003. const isPinned = pinned.includes(fid);
  1004. const el = document.createElement('div');
  1005. el.className = 'dm-item' + (CDM?.id === fid ? ' active' : '');
  1006. el.onclick = () => openDM({ id: fid, username: prof.username, avatar_url: prof.avatar_url || null });
  1007. const av = document.createElement('div'); av.className = 'dm-avatar';
  1008. av.innerHTML = prof.avatar_url ? `<img src="${prof.avatar_url}" alt="avatar">` : (prof.username || '?')[0].toUpperCase();
  1009. const name = document.createElement('span'); name.className = 'dm-name'; name.textContent = prof.username;
  1010. const pinBtn = document.createElement('span'); pinBtn.className = 'pin-btn';
  1011. pinBtn.innerHTML = isPinned ? '<i class="fas fa-thumbtack"></i>' : '<i class="far fa-thumbtack"></i>';
  1012. pinBtn.title = isPinned ? 'Unpin' : 'Pin';
  1013. pinBtn.onclick = (e) => { e.stopPropagation(); togglePinFriend(fid); };
  1014. el.appendChild(av); el.appendChild(name); el.appendChild(pinBtn);
  1015. list.appendChild(el);
  1016. });
  1017. }
  1018. async function togglePinFriend(friendId) {
  1019. let pinned = CU.pinned_friends || [];
  1020. if (pinned.includes(friendId)) pinned = pinned.filter(id => id !== friendId);
  1021. else pinned.push(friendId);
  1022. await sb.from('profiles').update({ pinned_friends: pinned }).eq('id', CU.id);
  1023. CU.pinned_friends = pinned;
  1024. await loadDMSidebar();
  1025. }
  1026. function openFriendsView() {
  1027. VIEW = 'friends'; CDM = null;
  1028. stopMsgPoll(); clearMsgSubscription();
  1029. showFriendsPanel(); ftab('friends');
  1030. }
  1031. async function openDM(user) {
  1032. CDM = user; CS = null; CC = null; VIEW = 'dm';
  1033. await clearMsgSubscription();
  1034. document.querySelectorAll('.dm-item').forEach(el => el.classList.remove('active'));
  1035. document.getElementById('chat-icon').className = 'fas fa-user';
  1036. document.getElementById('chat-name').textContent = user.username;
  1037. document.getElementById('msg-input').placeholder = `Message @${user.username}`;
  1038. document.getElementById('start-video-call-btn').style.display = 'flex';
  1039. showChatView(); await loadMessages(); await subscribeMsgs(); startMsgPoll();
  1040. await sb.from('profiles').update({ last_seen: new Date().toISOString() }).eq('id', CU.id);
  1041. if (!vcCallSubscription) setupVideoCallSubscriptions();
  1042. }
  1043.  
  1044. // ==================== MESSAGES ====================
  1045. async function loadMessages() {
  1046. if (!CU) return;
  1047. let data = [];
  1048. if (VIEW === 'channel' && CC) {
  1049. const { data: rows } = await sb.from('messages').select('*').eq('channel_id', CC.id).order('created_at', { ascending: true }).limit(100);
  1050. data = rows || [];
  1051. } else if (VIEW === 'dm' && CDM) {
  1052. const { data: rows } = await sb.from('direct_messages').select('*').in('sender_id', [CU.id, CDM.id]).in('receiver_id', [CU.id, CDM.id]).order('created_at', { ascending: true }).limit(100);
  1053. data = (rows || []).filter(m => (m.sender_id === CU.id && m.receiver_id === CDM.id) || (m.sender_id === CDM.id && m.receiver_id === CU.id));
  1054. }
  1055. const authorIds = [...new Set(data.map(getCurrentAuthorId).filter(Boolean))];
  1056. let profileMap = new Map();
  1057. if (authorIds.length) {
  1058. const { data: profiles } = await sb.from('profiles').select('id,username,avatar_url').in('id', authorIds);
  1059. profileMap = new Map((profiles || []).map(p => [String(p.id), p]));
  1060. }
  1061. data = data.map(m => {
  1062. const aid = getCurrentAuthorId(m); const pr = profileMap.get(String(aid));
  1063. return { ...m, _username: pr?.username || 'Unknown', _avatar_url: pr?.avatar_url || null };
  1064. });
  1065. const wrap = document.getElementById('messages-wrap');
  1066. wrap.innerHTML = ''; renderedMsgIds.clear();
  1067. if (!data.length) wrap.innerHTML = `<div class="empty-state"><div class="ico"><i class="fas fa-comments"></i></div><div>No messages yet — say something!</div></div>`;
  1068. else data.forEach(m => { renderedMsgIds.add(m.id); wrap.appendChild(buildMsg(m)); });
  1069. wrap.scrollTop = wrap.scrollHeight;
  1070. }
  1071. function buildMsg(m) {
  1072. const uname = m._username || 'Unknown';
  1073. const time = m.created_at ? new Date(m.created_at).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }) : '';
  1074. const g = document.createElement('div'); g.className = 'msg-group'; g.dataset.id = m.id || '';
  1075. const av = document.createElement('div'); av.className = 'msg-av';
  1076. av.innerHTML = m._avatar_url ? `<img src="${m._avatar_url}" alt="avatar">` : (uname || '?')[0].toUpperCase();
  1077. const body = document.createElement('div'); body.className = 'msg-body';
  1078. const meta = document.createElement('div'); meta.className = 'msg-meta';
  1079. const author = document.createElement('span'); author.className = 'msg-author'; author.textContent = uname;
  1080. const tm = document.createElement('span'); tm.className = 'msg-time'; tm.textContent = time;
  1081. meta.appendChild(author); meta.appendChild(tm); body.appendChild(meta);
  1082. const t = m.msg_type || 'text';
  1083. if (t === 'text') {
  1084. const d = document.createElement('div'); d.className = 'msg-text'; d.textContent = m.content || ''; body.appendChild(d);
  1085. } else if (t === 'image' || t === 'gif') {
  1086. const wrapper = document.createElement('div'); wrapper.className = 'msg-img-wrapper';
  1087. const img = document.createElement('img'); img.className = 'msg-img'; img.src = m.file_url; img.alt = m.file_name || 'image';
  1088. img.onclick = () => openLightbox(m.file_url);
  1089. wrapper.appendChild(img);
  1090. if (t === 'gif') { const badge = document.createElement('span'); badge.className = 'gif-badge'; badge.textContent = 'GIF'; wrapper.appendChild(badge); }
  1091. body.appendChild(wrapper);
  1092. } else if (t === 'file') {
  1093. body.appendChild(buildFileEl(m));
  1094. }
  1095. if (m.content && t !== 'text') { const d = document.createElement('div'); d.className = 'msg-text'; d.textContent = m.content; d.style.marginTop = '4px'; body.appendChild(d); }
  1096. if (hasCurrentOwnership(m)) {
  1097. const del = document.createElement('button'); del.className = 'msg-delete'; del.title = 'Delete message'; del.innerHTML = '<i class="fas fa-trash-alt"></i>';
  1098. del.onclick = () => deleteMyMessage(m); g.appendChild(del);
  1099. }
  1100. g.appendChild(av); g.appendChild(body);
  1101. return g;
  1102. }
  1103. const FILE_ICONS = { zip:'fa-file-archive',gz:'fa-file-archive',rar:'fa-file-archive',tar:'fa-file-archive',csv:'fa-file-csv',json:'fa-file-code',html:'fa-file-code',htm:'fa-file-code',pdf:'fa-file-pdf',mp4:'fa-file-video',webm:'fa-file-video',mp3:'fa-file-audio',wav:'fa-file-audio',txt:'fa-file-alt',js:'fa-file-code',ts:'fa-file-code',py:'fa-file-code',rb:'fa-file-code',go:'fa-file-code',rs:'fa-file-code',png:'fa-file-image',jpg:'fa-file-image',gif:'fa-file-image',webp:'fa-file-image',svg:'fa-file-image',docx:'fa-file-word',xlsx:'fa-file-excel',pptx:'fa-file-powerpoint',exe:'fa-file',dmg:'fa-file' };
  1104. function buildFileEl(m) {
  1105. const ext = (m.file_name || '').split('.').pop().toLowerCase();
  1106. const mime = m.file_mime || '';
  1107. const wrap = document.createElement('div'); wrap.className = 'msg-file';
  1108. const iconEl = document.createElement('div'); iconEl.className = 'msg-file-icon'; iconEl.innerHTML = `<i class="fas ${FILE_ICONS[ext] || 'fa-file'}"></i>`;
  1109. const info = document.createElement('div'); info.className = 'msg-file-info';
  1110. const name = document.createElement('div'); name.className = 'msg-file-name'; name.title = m.file_name || ''; name.textContent = m.file_name || 'file';
  1111. const type = document.createElement('div'); type.className = 'msg-file-type'; type.textContent = mime || ext.toUpperCase();
  1112. info.appendChild(name); info.appendChild(type);
  1113. let btn;
  1114. if (ext === 'html' || ext === 'htm' || mime === 'text/html') {
  1115. btn = document.createElement('button'); btn.className = 'fa-btn fa-demo'; btn.innerHTML = '<i class="fas fa-play"></i> Demo';
  1116. btn.onclick = () => openHTMLDemo(m.file_url, m.file_name);
  1117. } else if (ext === 'csv' || mime === 'text/csv') {
  1118. btn = document.createElement('button'); btn.className = 'fa-btn fa-preview'; btn.innerHTML = '<i class="fas fa-table"></i> Preview';
  1119. btn.onclick = () => openCSVPreview(m.file_url, m.file_name);
  1120. } else {
  1121. btn = document.createElement('a'); btn.className = 'fa-btn fa-dl'; btn.href = m.file_url; btn.target = '_blank'; btn.download = m.file_name; btn.innerHTML = '<i class="fas fa-download"></i> Download';
  1122. }
  1123. wrap.appendChild(iconEl); wrap.appendChild(info); wrap.appendChild(btn);
  1124. return wrap;
  1125. }
  1126. async function subscribeMsgs() {
  1127. await clearMsgSubscription();
  1128. if (!CU) return;
  1129. if (VIEW === 'channel' && CC) {
  1130. msgSub = sb.channel('ch-' + CC.id)
  1131. .on('postgres_changes', { event: 'INSERT', schema: 'public', table: 'messages', filter: `channel_id=eq.${CC.id}` }, async p => {
  1132. const m = p.new; if (m.id && renderedMsgIds.has(m.id)) return;
  1133. const authorId = getCurrentAuthorId(m);
  1134. const { data: pr } = await sb.from('profiles').select('id,username,avatar_url').eq('id', authorId).maybeSingle();
  1135. m._username = pr?.username || 'Unknown'; m._avatar_url = pr?.avatar_url || null;
  1136. appendMsg(m);
  1137. }).subscribe();
  1138. } else if (VIEW === 'dm' && CDM) {
  1139. msgSub = sb.channel('dm-' + CU.id + '-' + CDM.id)
  1140. .on('postgres_changes', { event: 'INSERT', schema: 'public', table: 'direct_messages' }, async p => {
  1141. const m = p.new;
  1142. if (!((m.sender_id === CU.id && m.receiver_id === CDM.id) || (m.sender_id === CDM.id && m.receiver_id === CU.id))) return;
  1143. if (m.id && renderedMsgIds.has(m.id)) return;
  1144. const { data: pr } = await sb.from('profiles').select('id,username,avatar_url').eq('id', m.sender_id).maybeSingle();
  1145. m._username = pr?.username || 'Unknown'; m._avatar_url = pr?.avatar_url || null;
  1146. appendMsg(m);
  1147. }).subscribe();
  1148. }
  1149. }
  1150. function appendMsg(m) {
  1151. const wrap = document.getElementById('messages-wrap');
  1152. const empty = wrap.querySelector('.empty-state'); if (empty) empty.remove();
  1153. if (m.id && renderedMsgIds.has(m.id)) return;
  1154. if (m.id) renderedMsgIds.add(m.id);
  1155. wrap.appendChild(buildMsg(m));
  1156. wrap.scrollTop = wrap.scrollHeight;
  1157. }
  1158. async function sendMessage() {
  1159. if (!CU) return;
  1160. const sendBtn = document.getElementById('send-btn'); if (sendBtn.disabled) return;
  1161. if (pendingGifUrl) { await sendGifResolved(pendingGifUrl, document.getElementById('gif-caption').value.trim()); return; }
  1162. if (pendingFile) { await uploadAndSend(); return; }
  1163. const input = document.getElementById('msg-input'); const content = input.value.trim(); if (!content) return;
  1164. sendBtn.disabled = true; input.value = ''; input.style.height = '';
  1165. try {
  1166. if (VIEW === 'channel' && CC) {
  1167. const { error } = await sb.from('messages').insert({ channel_id: CC.id, user_id: CU.id, content, msg_type: 'text' });
  1168. if (error) { toast('Failed to send', 'error'); input.value = content; return; }
  1169. await loadMessages();
  1170. } else if (VIEW === 'dm' && CDM) {
  1171. const { error } = await sb.from('direct_messages').insert({ sender_id: CU.id, receiver_id: CDM.id, content, msg_type: 'text' });
  1172. if (error) { toast('Failed to send', 'error'); input.value = content; return; }
  1173. await loadMessages();
  1174. }
  1175. await sb.from('profiles').update({ last_seen: new Date().toISOString() }).eq('id', CU.id);
  1176. } finally { sendBtn.disabled = false; }
  1177. }
  1178. function handleMsgKey(e) { if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); sendMessage(); } }
  1179. function autoGrow(el) { el.style.height = 'auto'; el.style.height = Math.min(el.scrollHeight, 110) + 'px'; }
  1180. function onFileChosen(e) {
  1181. const f = e.target.files[0]; if (!f) return;
  1182. pendingFile = f; pendingGifUrl = null;
  1183. document.getElementById('up-name').textContent = `📎 ${f.name} (${fmtBytes(f.size)})`;
  1184. document.getElementById('upload-prev').style.display = 'flex';
  1185. document.getElementById('msg-input').placeholder = 'Add a caption (optional)...';
  1186. e.target.value = '';
  1187. }
  1188. function cancelUpload() {
  1189. pendingFile = null; pendingGifUrl = null;
  1190. document.getElementById('upload-prev').style.display = 'none';
  1191. document.getElementById('msg-input').placeholder = VIEW === 'dm' ? `Message @${CDM?.username || ''}` : `Message #${CC?.name || ''}`;
  1192. }
  1193. async function uploadAndSend() {
  1194. if (!pendingFile || !CU) return;
  1195. const f = pendingFile; const caption = document.getElementById('msg-input').value.trim();
  1196. const sendBtn = document.getElementById('send-btn'); sendBtn.disabled = true;
  1197. const path = `chat/${CU.id}/${Date.now()}-${f.name}`;
  1198. const { error } = await sb.storage.from(BUCKET).upload(path, f, { upsert: false });
  1199. if (error) { toast('Upload failed', 'error'); sendBtn.disabled = false; return; }
  1200. const { data: publicData } = sb.storage.from(BUCKET).getPublicUrl(path);
  1201. const publicUrl = publicData.publicUrl;
  1202. const isImage = f.type.startsWith('image/');
  1203. const row = { user_id: CU.id, content: caption || null, msg_type: isImage ? 'image' : 'file', file_url: publicUrl, file_name: f.name, file_mime: f.type };
  1204. let err = null;
  1205. if (VIEW === 'channel' && CC) ({ error: err } = await sb.from('messages').insert({ ...row, channel_id: CC.id }));
  1206. else if (VIEW === 'dm' && CDM) ({ error: err } = await sb.from('direct_messages').insert({ ...row, sender_id: CU.id, receiver_id: CDM.id }));
  1207. if (err) { toast('Failed to send file', 'error'); sendBtn.disabled = false; return; }
  1208. cancelUpload(); document.getElementById('msg-input').value = ''; sendBtn.disabled = false;
  1209. await loadMessages(); toast('File sent!', 'success');
  1210. await sb.from('profiles').update({ last_seen: new Date().toISOString() }).eq('id', CU.id);
  1211. }
  1212. async function deleteMyMessage(m) {
  1213. if (!hasCurrentOwnership(m)) return;
  1214. if (!confirm('Delete this message?')) return;
  1215. const table = VIEW === 'dm' ? 'direct_messages' : 'messages';
  1216. const { error } = await sb.from(table).delete().eq('id', m.id);
  1217. if (error) { toast('Failed to delete', 'error'); return; }
  1218. renderedMsgIds.delete(m.id); await loadMessages();
  1219. }
  1220.  
  1221. // ==================== GIF ====================
  1222. function openGifModal() {
  1223. if (!VIEW || (!CC && !CDM)) { toast('Open a channel or DM first', 'error'); return; }
  1224. document.getElementById('gif-url').value = '';
  1225. document.getElementById('gif-caption').value = '';
  1226. pendingGifUrl = null;
  1227. document.getElementById('gif-modal').style.display = 'flex';
  1228. }
  1229. async function resolveGifUrl(input) {
  1230. const raw = input.trim(); if (!raw) return null;
  1231. if (/\.(gif)(\?.*)?$/i.test(raw)) return raw;
  1232. if (/^https?:\/\//i.test(raw) && /tenor\.com|giphy\.com/i.test(raw)) {
  1233. const endpoints = [
  1234. `https://giphy.com/services/oembed?url=${encodeURIComponent(raw)}`,
  1235. `https://tenor.com/oembed?url=${encodeURIComponent(raw)}`
  1236. ];
  1237. for (const ep of endpoints) { try { const r = await fetch(ep); if (!r.ok) continue; const j = await r.json(); return j.url || j.thumbnail_url || j.image_url || null; } catch (_) {} }
  1238. }
  1239. if (/^https?:\/\//i.test(raw)) return raw;
  1240. return null;
  1241. }
  1242. async function sendGifFromModal() {
  1243. const raw = document.getElementById('gif-url').value.trim(); const caption = document.getElementById('gif-caption').value.trim();
  1244. const resolved = await resolveGifUrl(raw); if (!resolved) { toast('Could not resolve GIF link', 'error'); return; }
  1245. closeModal('gif-modal'); await sendGifResolved(resolved, caption);
  1246. }
  1247. async function sendGifResolved(url, caption) {
  1248. if (!CU) return;
  1249. const row = { user_id: CU.id, content: caption || null, msg_type: 'gif', file_url: url, file_name: 'gif', file_mime: 'image/gif' };
  1250. let err = null;
  1251. if (VIEW === 'channel' && CC) ({ error: err } = await sb.from('messages').insert({ ...row, channel_id: CC.id }));
  1252. else if (VIEW === 'dm' && CDM) ({ error: err } = await sb.from('direct_messages').insert({ ...row, sender_id: CU.id, receiver_id: CDM.id }));
  1253. if (err) { toast('Failed to send GIF', 'error'); return; }
  1254. document.getElementById('gif-url').value = ''; document.getElementById('gif-caption').value = ''; pendingGifUrl = null;
  1255. await loadMessages(); toast('GIF sent!', 'success');
  1256. await sb.from('profiles').update({ last_seen: new Date().toISOString() }).eq('id', CU.id);
  1257. }
  1258.  
  1259. // ==================== FRIENDS PANEL ====================
  1260. async function ftab(t) {
  1261. activeFTab = t;
  1262. document.querySelectorAll('.ftab').forEach((el, i) => el.classList.toggle('active', ['friends', 'pending', 'add'][i] === t));
  1263. await renderFriends();
  1264. }
  1265. function isOnline(lastSeen) { if (!lastSeen) return false; return new Date(lastSeen) > new Date(Date.now() - 5 * 60 * 1000); }
  1266. async function renderFriends() {
  1267. const content = document.getElementById('friends-content'); content.innerHTML = '';
  1268. if (activeFTab === 'add') {
  1269. content.innerHTML = `<div class="f-section"><i class="fas fa-user-plus"></i> Add Friend</div><div class="add-friend-bar"><input type="text" id="af-input" placeholder="Enter username..." onkeydown="if(event.key==='Enter')sendFriendReq()"><button class="send-fr-btn" onclick="sendFriendReq()"><i class="fas fa-paper-plane"></i> Send</button></div><div id="add-friend-msg"></div>`;
  1270. return;
  1271. }
  1272. const { data: fships } = await sb.from('friendships').select('id,requester_id,addressee_id,status').or(`requester_id.eq.${CU.id},addressee_id.eq.${CU.id}`).eq('status', activeFTab === 'pending' ? 'pending' : 'accepted');
  1273. if (!fships) return;
  1274. const allIds = [...new Set(fships.flatMap(f => [f.requester_id, f.addressee_id]).filter(Boolean))];
  1275. let profiles = []; if (allIds.length) { const { data: fetched } = await sb.from('profiles').select('id,username,avatar_url,last_seen').in('id', allIds); profiles = fetched || []; }
  1276. const findProfile = id => profiles.find(p => p.id == id);
  1277. function makeAvatar(pr) { const av = document.createElement('div'); av.className = 'friend-av'; av.innerHTML = pr.avatar_url ? `<img src="${pr.avatar_url}" alt="avatar">` : (pr.username || '?')[0].toUpperCase(); return av; }
  1278. if (activeFTab === 'friends') {
  1279. const accepted = fships.filter(f => f.status === 'accepted');
  1280. if (!accepted.length) { content.innerHTML = `<div class="empty-state"><div class="ico"><i class="fas fa-user-friends"></i></div><div>No friends yet</div></div>`; return; }
  1281. content.innerHTML = `<div class="f-section"><i class="fas fa-user-friends"></i> Friends — ${accepted.length}</div>`;
  1282. for (const f of accepted) {
  1283. const fid = f.requester_id == CU.id ? f.addressee_id : f.requester_id;
  1284. const pr = findProfile(fid); if (!pr) continue;
  1285. const online = isOnline(pr.last_seen);
  1286. const card = document.createElement('div'); card.className = 'friend-card';
  1287. const info = document.createElement('div');
  1288. const uname = document.createElement('div'); uname.className = 'friend-username'; uname.textContent = pr.username;
  1289. const label = document.createElement('div'); label.className = 'friend-label';
  1290. label.innerHTML = online ? '<i class="fas fa-circle" style="color:var(--green);font-size:8px"></i> online' : '<i class="fas fa-circle" style="color:var(--text-muted);font-size:8px"></i> offline';
  1291. info.appendChild(uname); info.appendChild(label);
  1292. const actions = document.createElement('div'); actions.className = 'friend-actions';
  1293. actions.innerHTML = `<button class="ibt msg" title="Message"><i class="fas fa-comment"></i></button><button class="ibt" title="Invite to Server" style="background:var(--bg-active);color:var(--accent)"><i class="fas fa-user-plus"></i></button><button class="ibt dec" title="Block"><i class="fas fa-ban"></i></button>`;
  1294. actions.children[0].onclick = () => openDM({ id: fid, username: pr.username, avatar_url: pr.avatar_url || null });
  1295. actions.children[1].onclick = () => inviteToServer(fid);
  1296. actions.children[2].onclick = () => blockUser(fid);
  1297. card.appendChild(makeAvatar(pr)); card.appendChild(info); card.appendChild(actions); content.appendChild(card);
  1298. }
  1299. }
  1300. if (activeFTab === 'pending') {
  1301. const pending = fships.filter(f => f.status === 'pending');
  1302. if (!pending.length) { content.innerHTML = `<div class="empty-state"><div class="ico"><i class="fas fa-clock"></i></div><div>No pending requests</div></div>`; return; }
  1303. const incoming = pending.filter(f => f.addressee_id == CU.id);
  1304. const outgoing = pending.filter(f => f.requester_id == CU.id);
  1305. if (incoming.length) {
  1306. const sec = document.createElement('div'); sec.className = 'f-section'; sec.innerHTML = `<i class="fas fa-arrow-down"></i> Incoming — ${incoming.length}`; content.appendChild(sec);
  1307. for (const f of incoming) {
  1308. const pr = findProfile(f.requester_id); if (!pr) continue;
  1309. const card = document.createElement('div'); card.className = 'friend-card';
  1310. const info = document.createElement('div'); info.innerHTML = `<div class="friend-username">${pr.username}</div><div class="friend-label">Wants to be friends</div>`;
  1311. const actions = document.createElement('div'); actions.className = 'friend-actions';
  1312. actions.innerHTML = `<button class="ibt acc" title="Accept"><i class="fas fa-check"></i></button><button class="ibt dec" title="Decline"><i class="fas fa-times"></i></button>`;
  1313. actions.children[0].onclick = () => respondFR(f.id, 'accepted');
  1314. actions.children[1].onclick = () => respondFR(f.id, 'declined');
  1315. card.appendChild(makeAvatar(pr)); card.appendChild(info); card.appendChild(actions); content.appendChild(card);
  1316. }
  1317. }
  1318. if (outgoing.length) {
  1319. const sec = document.createElement('div'); sec.className = 'f-section'; sec.style.marginTop = '20px'; sec.innerHTML = `<i class="fas fa-arrow-up"></i> Outgoing — ${outgoing.length}`; content.appendChild(sec);
  1320. for (const f of outgoing) {
  1321. const pr = findProfile(f.addressee_id); if (!pr) continue;
  1322. const card = document.createElement('div'); card.className = 'friend-card';
  1323. const info = document.createElement('div'); info.innerHTML = `<div class="friend-username">${pr.username}</div><div class="friend-label">Request pending…</div>`;
  1324. const actions = document.createElement('div'); actions.className = 'friend-actions';
  1325. actions.innerHTML = `<button class="ibt dec" title="Cancel"><i class="fas fa-times"></i></button>`;
  1326. actions.children[0].onclick = () => cancelFR(f.id);
  1327. card.appendChild(makeAvatar(pr)); card.appendChild(info); card.appendChild(actions); content.appendChild(card);
  1328. }
  1329. }
  1330. }
  1331. }
  1332. async function sendFriendReq() {
  1333. const inp = document.getElementById('af-input'); const msgEl = document.getElementById('add-friend-msg');
  1334. const username = inp?.value.trim().toLowerCase(); if (!username) return;
  1335. if (username === CU.username) { if (msgEl) { msgEl.style.color = 'var(--red)'; msgEl.textContent = "That's you!"; } return; }
  1336. const { data: target } = await sb.from('profiles').select('id').eq('username', username).maybeSingle();
  1337. if (!target) { if (msgEl) { msgEl.style.color = 'var(--red)'; msgEl.textContent = 'User not found.'; } return; }
  1338. const { data: ex } = await sb.from('friendships').select('id,status').or(`and(requester_id.eq.${CU.id},addressee_id.eq.${target.id}),and(requester_id.eq.${target.id},addressee_id.eq.${CU.id})`).maybeSingle();
  1339. if (ex) { if (msgEl) { msgEl.style.color = 'var(--amber)'; msgEl.textContent = ex.status === 'accepted' ? 'Already friends!' : 'Request already sent.'; } return; }
  1340. const { error } = await sb.from('friendships').insert({ requester_id: CU.id, addressee_id: target.id });
  1341. if (error) { if (msgEl) { msgEl.style.color = 'var(--red)'; msgEl.textContent = 'Failed to send request.'; } return; }
  1342. if (msgEl) { msgEl.style.color = 'var(--green)'; msgEl.textContent = `Request sent to ${username}!`; }
  1343. if (inp) inp.value = ''; await updatePendingBadge();
  1344. }
  1345. async function respondFR(id, status) {
  1346. if (status === 'accepted') {
  1347. const { error } = await sb.from('friendships').update({ status }).eq('id', id);
  1348. if (error) { toast('Failed to accept', 'error'); return; }
  1349. toast('Friend added!', 'success'); await loadDMSidebar();
  1350. } else {
  1351. const { error } = await sb.from('friendships').delete().eq('id', id);
  1352. if (error) { toast('Failed to decline', 'error'); return; }
  1353. toast('Request declined.', '');
  1354. }
  1355. await renderFriends(); await updatePendingBadge();
  1356. }
  1357. async function cancelFR(id) { await sb.from('friendships').delete().eq('id', id); await renderFriends(); await updatePendingBadge(); }
  1358. async function updatePendingBadge() {
  1359. if (!CU) return;
  1360. const { data } = await sb.from('friendships').select('id').eq('addressee_id', CU.id).eq('status', 'pending');
  1361. const badge = document.getElementById('pend-badge'); if (!badge) return;
  1362. if (data?.length) { badge.style.display = 'inline'; badge.textContent = data.length; } else badge.style.display = 'none';
  1363. }
  1364. function startPendingPoll() { updatePendingBadge(); pBadgeTimer = setInterval(updatePendingBadge, 12000); }
  1365. async function blockUser(userId) {
  1366. let blocked = CU.blocked_users || []; if (blocked.includes(parseInt(userId))) return;
  1367. blocked.push(parseInt(userId));
  1368. await sb.from('profiles').update({ blocked_users: blocked }).eq('id', CU.id);
  1369. CU.blocked_users = blocked; toast('User blocked', 'success');
  1370. await renderFriends();
  1371. }
  1372. async function inviteToServer(friendId) {
  1373. if (!CU) return;
  1374. const { data: profile } = await sb.from('profiles').select('username').eq('id', friendId).single();
  1375. pendingInviteFriendId = friendId;
  1376. pendingInviteFriendName = profile?.username || 'this user';
  1377. document.getElementById('invite-friend-name').textContent = pendingInviteFriendName;
  1378. const { data: memberships } = await sb.from('server_members').select('server_id,role').eq('user_id', CU.id).in('role', ['owner', 'admin']);
  1379. if (!memberships?.length) { toast('You are not an owner/admin in any server', 'error'); return; }
  1380. const serverIds = memberships.map(m => m.server_id);
  1381. const { data: servers } = await sb.from('servers').select('id,name').in('id', serverIds);
  1382. const list = document.getElementById('invite-server-list'); list.innerHTML = '';
  1383. servers.forEach(srv => {
  1384. const div = document.createElement('div'); div.className = 'friend-card'; div.style.cursor = 'pointer';
  1385. div.innerHTML = `<span class="friend-username"><i class="fas fa-server"></i> ${srv.name}</span><button class="ibt msg"><i class="fas fa-plus"></i></button>`;
  1386. div.onclick = () => { closeModal('invite-server-modal'); confirmInviteToServer(srv.id, pendingInviteFriendId); };
  1387. list.appendChild(div);
  1388. });
  1389. document.getElementById('invite-server-modal').style.display = 'flex';
  1390. }
  1391. async function confirmInviteToServer(serverId, friendId) {
  1392. const { data: existing } = await sb.from('server_members').select('user_id').eq('server_id', serverId).eq('user_id', friendId).maybeSingle();
  1393. if (existing) { toast('User already in this server', 'error'); return; }
  1394. await sb.from('server_members').insert({ server_id: serverId, user_id: friendId });
  1395. toast(`Invited ${pendingInviteFriendName} to server!`, 'success');
  1396. pendingInviteFriendId = null;
  1397. }
  1398.  
  1399. // ==================== SETTINGS ====================
  1400. function openSettingsModal(initialTab = 'profile') {
  1401. if (!CU) return;
  1402. document.getElementById('settings-username').value = CU.username;
  1403. document.getElementById('settings-avatar-url').value = CU.avatar_url || '';
  1404. document.getElementById('settings-avatar-file').value = '';
  1405. setPreview('settings-profile-preview', CU.avatar_url);
  1406. document.getElementById('settings-theme').value = localStorage.getItem('nexchat_theme') || 'dark';
  1407. document.getElementById('settings-font').value = localStorage.getItem('nexchat_msg_font') || 'JetBrains Mono';
  1408. document.querySelectorAll('#settings-modal .modal-tab').forEach(tab => {
  1409. tab.classList.toggle('active', tab.dataset.stab === initialTab);
  1410. document.getElementById(`stab-${tab.dataset.stab}`).style.display = tab.dataset.stab === initialTab ? 'block' : 'none';
  1411. });
  1412. if (initialTab === 'blocked') renderBlockedList();
  1413. document.getElementById('settings-modal').style.display = 'flex';
  1414. }
  1415. function setPreview(prefix, url) {
  1416. const img = document.getElementById(prefix + '-img'); const txt = document.getElementById(prefix + '-txt');
  1417. if (url) { img.style.display = 'block'; img.src = url; txt.textContent = url; }
  1418. else { img.style.display = 'none'; img.src = ''; txt.textContent = 'No avatar selected'; }
  1419. }
  1420. async function saveProfileSettings() {
  1421. if (!CU) return;
  1422. const file = document.getElementById('settings-avatar-file').files[0];
  1423. const url = document.getElementById('settings-avatar-url').value.trim();
  1424. let avatar_url = url || CU.avatar_url;
  1425. if (file) { try { avatar_url = await uploadImageFile(file, 'avatars'); } catch (e) { toast('Upload failed', 'error'); return; } }
  1426. const theme = document.getElementById('settings-theme').value;
  1427. const font = document.getElementById('settings-font').value;
  1428. applyTheme(theme); applyMessageFont(font);
  1429. const { data, error } = await sb.from('profiles').update({ avatar_url }).eq('id', CU.id).select().single();
  1430. if (error) { toast('Failed to save profile', 'error'); return; }
  1431. CU.avatar_url = data.avatar_url;
  1432. document.getElementById('uav').innerHTML = CU.avatar_url ? `<img src="${CU.avatar_url}" alt="avatar">` : CU.username[0].toUpperCase();
  1433. closeModal('settings-modal'); toast('Profile updated!', 'success');
  1434. await refreshAllVisibleAvatars();
  1435. }
  1436. async function changePassword() {
  1437. const oldPass = document.getElementById('old-password').value;
  1438. const newPass = document.getElementById('new-password').value;
  1439. const confirm = document.getElementById('confirm-password').value;
  1440. const msgEl = document.getElementById('password-change-msg');
  1441. if (!oldPass || !newPass || !confirm) { msgEl.textContent = 'All fields required'; return; }
  1442. if (newPass !== confirm) { msgEl.textContent = 'New passwords do not match'; return; }
  1443. const { data: user } = await sb.from('profiles').select('password').eq('id', CU.id).single();
  1444. if (user.password !== oldPass) { msgEl.textContent = 'Current password is incorrect'; return; }
  1445. const { error } = await sb.from('profiles').update({ password: newPass }).eq('id', CU.id);
  1446. if (error) { msgEl.textContent = 'Failed to update password'; return; }
  1447. msgEl.style.color = 'var(--green)'; msgEl.textContent = 'Password changed successfully!';
  1448. document.getElementById('old-password').value = document.getElementById('new-password').value = document.getElementById('confirm-password').value = '';
  1449. }
  1450. async function renderBlockedList() {
  1451. const container = document.getElementById('blocked-list');
  1452. const blocked = CU.blocked_users || [];
  1453. if (!blocked.length) { container.innerHTML = '<div class="empty-state"><i class="fas fa-ban"></i> No blocked users</div>'; return; }
  1454. const { data: profiles } = await sb.from('profiles').select('id,username').in('id', blocked);
  1455. container.innerHTML = '';
  1456. (profiles || []).forEach(p => {
  1457. const div = document.createElement('div'); div.className = 'friend-card';
  1458. div.innerHTML = `<span class="friend-username">${p.username}</span>`;
  1459. const btn = document.createElement('button'); btn.className = 'ibt dec'; btn.innerHTML = '<i class="fas fa-undo-alt"></i> Unblock';
  1460. btn.onclick = async () => {
  1461. let newBlocked = blocked.filter(id => id !== p.id);
  1462. await sb.from('profiles').update({ blocked_users: newBlocked }).eq('id', CU.id);
  1463. CU.blocked_users = newBlocked; renderBlockedList(); toast(`${p.username} unblocked`, 'success');
  1464. };
  1465. div.appendChild(btn); container.appendChild(div);
  1466. });
  1467. }
  1468. async function deleteAccount() {
  1469. const password = document.getElementById('delete-password').value;
  1470. const { data: user } = await sb.from('profiles').select('password').eq('id', CU.id).single();
  1471. if (user.password !== password) { toast('Incorrect password', 'error'); return; }
  1472. await sb.from('profiles').delete().eq('id', CU.id);
  1473. doLogout(); toast('Account deleted', 'success');
  1474. }
  1475. function applyTheme(theme) { document.documentElement.setAttribute('data-theme', theme); localStorage.setItem('nexchat_theme', theme); }
  1476. function applyMessageFont(font) { document.documentElement.style.setProperty('--mono', `'${font}', monospace`); localStorage.setItem('nexchat_msg_font', font); }
  1477.  
  1478. // ==================== ADMIN TIMEOUT / BAN ====================
  1479. async function openAdminMembersModal() {
  1480. if (!CS || CS.owner_id !== CU.id) return;
  1481. const { data: members } = await sb.from('server_members').select('user_id').eq('server_id', CS.id);
  1482. const userIds = members.map(m => m.user_id);
  1483. const { data: profiles } = await sb.from('profiles').select('id,username').in('id', userIds);
  1484. const list = document.getElementById('admin-members-list'); list.innerHTML = '';
  1485. profiles.forEach(p => {
  1486. if (p.id === CU.id) return;
  1487. const div = document.createElement('div'); div.className = 'friend-card';
  1488. div.innerHTML = `<span class="friend-username">${p.username}</span>`;
  1489. const actions = document.createElement('div'); actions.className = 'friend-actions';
  1490. actions.innerHTML = `<button class="ibt dec" title="Kick"><i class="fas fa-user-slash"></i></button><button class="ibt" title="Timeout 5min" style="background:var(--bg-active);color:var(--amber)"><i class="fas fa-clock"></i></button><button class="ibt dec" title="Ban"><i class="fas fa-gavel"></i></button>`;
  1491. actions.children[0].onclick = () => kickUser(p.id);
  1492. actions.children[1].onclick = () => timeoutUser(p.id, 5);
  1493. actions.children[2].onclick = () => banUser(p.id);
  1494. div.appendChild(actions); list.appendChild(div);
  1495. });
  1496. document.getElementById('admin-members-modal').style.display = 'flex';
  1497. }
  1498. async function kickUser(userId) { await sb.from('server_members').delete().match({ server_id: CS.id, user_id: userId }); toast('User kicked', 'success'); closeModal('admin-members-modal'); }
  1499. async function timeoutUser(userId, minutes) {
  1500. const ip = await fetch('https://api.ipify.org?format=json').then(r => r.json()).then(d => d.ip).catch(() => null);
  1501. const until = new Date(Date.now() + minutes * 60000).toISOString();
  1502. await sb.from('timeouts').insert({ server_id: CS.id, user_id: userId, until, ip });
  1503. toast(`User timed out for ${minutes} min`, 'success');
  1504. if (userId === CU.id) checkTimeoutOrBan();
  1505. closeModal('admin-members-modal');
  1506. }
  1507. async function banUser(userId) {
  1508. const ip = await fetch('https://api.ipify.org?format=json').then(r => r.json()).then(d => d.ip).catch(() => null);
  1509. await sb.from('bans').insert({ server_id: CS.id, user_id: userId, ip });
  1510. await sb.from('server_members').delete().match({ server_id: CS.id, user_id: userId });
  1511. toast('User banned', 'success');
  1512. if (userId === CU.id) showDMHome();
  1513. closeModal('admin-members-modal');
  1514. }
  1515. async function checkTimeoutOrBan() {
  1516. if (!CS || !CU) return;
  1517. const { data: ban } = await sb.from('bans').select('id').eq('server_id', CS.id).eq('user_id', CU.id).maybeSingle();
  1518. if (ban) { toast('You are banned from this server', 'error'); showDMHome(); return; }
  1519. const { data: timeout } = await sb.from('timeouts').select('until').eq('server_id', CS.id).eq('user_id', CU.id).gt('until', new Date().toISOString()).maybeSingle();
  1520. const overlay = document.getElementById('timeout-overlay');
  1521. const timerEl = document.getElementById('timeout-timer');
  1522. if (timeoutInterval) clearInterval(timeoutInterval);
  1523. if (timeout) {
  1524. overlay.style.display = 'flex';
  1525. const updateTimer = () => {
  1526. const remaining = new Date(timeout.until) - new Date();
  1527. if (remaining <= 0) { overlay.style.display = 'none'; clearInterval(timeoutInterval); timeoutInterval = null; return; }
  1528. const mins = Math.floor(remaining / 60000); const secs = Math.floor((remaining % 60000) / 1000);
  1529. timerEl.textContent = `${mins}:${secs.toString().padStart(2, '0')}`;
  1530. };
  1531. updateTimer(); timeoutInterval = setInterval(updateTimer, 1000);
  1532. } else {
  1533. overlay.style.display = 'none';
  1534. }
  1535. }
  1536.  
  1537. // ==================== VIDEO CALL ====================
  1538. // DUAL HANGUP APPROACH:
  1539. // 1. GAS signalHangup — polled every 1.5s by BOTH sides from the moment a call starts
  1540. // 2. Supabase video_calls.status = 'ended' — watched via realtime on BOTH sides
  1541. // Either signal triggers vcHandleRemoteHangup() on the non-initiating side.
  1542.  
  1543. function setupVideoCallSubscriptions() {
  1544. if (!CU) return;
  1545. if (vcCallSubscription) sb.removeChannel(vcCallSubscription).catch(() => {});
  1546. vcCallSubscription = sb.channel('vc-incoming-' + CU.id)
  1547. .on('postgres_changes',
  1548. { event: 'INSERT', schema: 'public', table: 'video_calls', filter: `callee_id=eq.${CU.id}` },
  1549. payload => {
  1550. const call = payload.new;
  1551. if (new Date() - new Date(call.created_at) > 60000) return;
  1552. if (call.status === 'pending' && (!incomingCallData || incomingCallData.id !== call.id)) {
  1553. showIncomingCallPopup(call);
  1554. }
  1555. }
  1556. )
  1557. .on('postgres_changes',
  1558. { event: 'UPDATE', schema: 'public', table: 'video_calls', filter: `callee_id=eq.${CU.id}` },
  1559. payload => {
  1560. const call = payload.new;
  1561. if (call.status === 'cancelled' && incomingCallData?.id === call.id) {
  1562. hideIncomingPopup(); toast('Call cancelled', '');
  1563. }
  1564. // *** FIX: callee receives 'ended' via Supabase realtime ***
  1565. if (call.status === 'ended' && vcCurrentCallId === call.id && vcCallActive) {
  1566. vcHandleRemoteHangup();
  1567. }
  1568. }
  1569. )
  1570. .subscribe();
  1571. }
  1572.  
  1573. // Watch for the caller's call row being updated to 'ended' — covers callee hanging up
  1574. function vcSubscribeCallStatus(callId) {
  1575. if (vcStatusChannel) { sb.removeChannel(vcStatusChannel).catch(() => {}); vcStatusChannel = null; }
  1576. vcStatusChannel = sb.channel('vc-status-' + callId)
  1577. .on('postgres_changes',
  1578. { event: 'UPDATE', schema: 'public', table: 'video_calls', filter: `id=eq.${callId}` },
  1579. payload => {
  1580. const s = payload.new.status;
  1581. // Declined / missed — call never connected
  1582. if ((s === 'declined' || s === 'missed') && !vcCallActive) {
  1583. toast(s === 'declined' ? 'Call was declined' : 'No answer', '');
  1584. vcHangUp(); return;
  1585. }
  1586. // *** FIX: caller receives 'ended' via Supabase realtime when callee hangs up ***
  1587. if (s === 'ended' && vcCurrentCallId === callId && vcCallActive) {
  1588. vcHandleRemoteHangup();
  1589. }
  1590. }
  1591. ).subscribe();
  1592. }
  1593.  
  1594. async function cleanupStaleCalls() {
  1595. if (!CU) return;
  1596. const cutoff = new Date(Date.now() - 60000).toISOString();
  1597. await sb.from('video_calls')
  1598. .update({ status: 'missed' })
  1599. .eq('callee_id', CU.id)
  1600. .eq('status', 'pending')
  1601. .lt('created_at', cutoff);
  1602. }
  1603. function startIncomingCallPolling() {
  1604. if (incomingPollInterval) clearInterval(incomingPollInterval);
  1605. incomingPollInterval = setInterval(async () => {
  1606. if (!CU) return;
  1607. const { data: calls } = await sb.from('video_calls')
  1608. .select('*').eq('callee_id', CU.id).eq('status', 'pending')
  1609. .gt('created_at', new Date(Date.now() - 60000).toISOString())
  1610. .order('created_at', { ascending: false }).limit(1);
  1611. if (calls?.length > 0) {
  1612. const call = calls[0];
  1613. if (!incomingCallData || incomingCallData.id !== call.id) showIncomingCallPopup(call);
  1614. }
  1615. }, 3000);
  1616. }
  1617. function showIncomingCallPopup(call) {
  1618. incomingCallData = call;
  1619. document.getElementById('incoming-title').textContent = 'Incoming Video Call';
  1620. document.getElementById('incoming-sub').textContent = `from ${call.caller_name || 'User'}`;
  1621. const av = document.getElementById('incoming-avatar');
  1622. av.innerHTML = call.caller_avatar
  1623. ? `<img src="${call.caller_avatar}" style="width:100%;height:100%;object-fit:cover;border-radius:50%">`
  1624. : (call.caller_name?.[0] || '?').toUpperCase();
  1625. document.getElementById('incoming-call-popup').style.display = 'flex';
  1626. setTimeout(() => {
  1627. if (incomingCallData?.id === call.id) {
  1628. hideIncomingPopup();
  1629. sb.from('video_calls').update({ status: 'missed' }).eq('id', call.id).then(() => {});
  1630. }
  1631. }, 30000);
  1632. }
  1633. function hideIncomingPopup() {
  1634. document.getElementById('incoming-call-popup').style.display = 'none';
  1635. incomingCallData = null;
  1636. }
  1637. async function acceptIncomingCall() {
  1638. if (!incomingCallData) return;
  1639. const call = incomingCallData;
  1640. hideIncomingPopup();
  1641. await sb.from('video_calls').update({ status: 'accepted' }).eq('id', call.id);
  1642. vcCurrentCallId = call.id;
  1643. vcCurrentGasCode = call.gas_room_code;
  1644. vcCurrentPeerId = call.caller_id;
  1645. vcCurrentPeerName = call.caller_name;
  1646. vcIsCaller = false;
  1647. vcHangupSignalled = false;
  1648. vcIsHangingUp = false;
  1649. document.getElementById('vc-peer-name').textContent = vcCurrentPeerName;
  1650. if (!vcCurrentGasCode) { toast('No room code found in call', 'error'); return; }
  1651. const granted = await requestVideoCallPermissions();
  1652. if (!granted) { vcHangUp(); return; }
  1653. openVideoCallModal();
  1654. await setupVcPeerConnection();
  1655. // Start hangup polling immediately — don't wait for ontrack
  1656. vcStartHangupPoll();
  1657. vcPollForOffer();
  1658. // *** FIX: callee subscribes to Supabase status updates too ***
  1659. vcSubscribeCallStatus(call.id);
  1660. }
  1661. function declineIncomingCall() {
  1662. if (incomingCallData) {
  1663. sb.from('video_calls').update({ status: 'declined' }).eq('id', incomingCallData.id).then(() => {});
  1664. hideIncomingPopup();
  1665. }
  1666. }
  1667. async function initiateVideoCall() {
  1668. if (!CU) return;
  1669. if (!(VIEW === 'dm' && CDM)) { toast('Video calls are only available in DMs', 'error'); return; }
  1670. const callBtn = document.getElementById('start-video-call-btn');
  1671. const origHTML = callBtn.innerHTML;
  1672. callBtn.disabled = true;
  1673. callBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i>';
  1674. const showStartingPopup = () => {
  1675. const existing = document.getElementById('vc-starting-popup');
  1676. if (existing) existing.remove();
  1677. const popup = document.createElement('div');
  1678. popup.id = 'vc-starting-popup';
  1679. popup.style.cssText = 'position:fixed;top:20px;left:50%;transform:translateX(-50%);background:var(--bg-sidebar);border:1px solid var(--accent);border-radius:10px;padding:14px 22px;z-index:700;font-size:13px;font-weight:600;color:var(--text-primary);box-shadow:0 8px 24px rgba(0,0,0,.5);display:flex;align-items:center;gap:10px;';
  1680. popup.innerHTML = '<div class="spinner" style="width:18px;height:18px;border-width:2px"></div> Starting call with ' + CDM.username + '…';
  1681. document.body.appendChild(popup);
  1682. };
  1683. const hideStartingPopup = () => { const p = document.getElementById('vc-starting-popup'); if (p) p.remove(); };
  1684. const resetBtn = () => { callBtn.disabled = false; callBtn.innerHTML = origHTML; };
  1685. showStartingPopup();
  1686. const granted = await requestVideoCallPermissions();
  1687. if (!granted) { hideStartingPopup(); resetBtn(); return; }
  1688. let gasData;
  1689. try { gasData = await gasApi('generateRoomCode'); }
  1690. catch (e) { toast('Failed to get room code', 'error'); hideStartingPopup(); resetBtn(); return; }
  1691. const code = gasData?.code;
  1692. if (!code) { toast('Failed to get room code', 'error'); hideStartingPopup(); resetBtn(); return; }
  1693. const { data: call, error } = await sb.from('video_calls').insert({
  1694. caller_id: CU.id,
  1695. callee_id: CDM.id,
  1696. caller_name: CU.username,
  1697. caller_avatar: CU.avatar_url,
  1698. gas_room_code: code,
  1699. status: 'pending'
  1700. }).select().single();
  1701. if (error) { toast('Failed to start call', 'error'); hideStartingPopup(); resetBtn(); return; }
  1702. hideStartingPopup();
  1703. resetBtn();
  1704. vcCurrentCallId = call.id;
  1705. vcCurrentGasCode = code;
  1706. vcCurrentPeerId = CDM.id;
  1707. vcCurrentPeerName = CDM.username;
  1708. vcIsCaller = true;
  1709. vcHangupSignalled = false;
  1710. vcIsHangingUp = false;
  1711. document.getElementById('vc-peer-name').textContent = CDM.username;
  1712. openVideoCallModal();
  1713. document.getElementById('vc-status').textContent = 'Waiting for peer to join...';
  1714. await setupVcPeerConnection();
  1715. await vcCreateAndSendOffer();
  1716. // Start hangup polling immediately — don't wait for ontrack
  1717. vcStartHangupPoll();
  1718. vcPollForAnswer();
  1719. // *** FIX: caller subscribes to Supabase status updates ***
  1720. vcSubscribeCallStatus(call.id);
  1721. }
  1722.  
  1723. async function requestVideoCallPermissions() {
  1724. if (vcLocalStream) return true;
  1725. try {
  1726. vcLocalStream = await navigator.mediaDevices.getUserMedia({
  1727. video: { width: { ideal: 640 }, height: { ideal: 480 }, facingMode: 'user' },
  1728. audio: { echoCancellation: true, noiseSuppression: true, autoGainControl: true }
  1729. });
  1730. const lv = document.getElementById('vc-local-video');
  1731. lv.srcObject = vcLocalStream; lv.muted = true;
  1732. await lv.play().catch(e => console.warn('local play:', e));
  1733. return true;
  1734. } catch (err) {
  1735. toast('Camera/mic access denied', 'error');
  1736. return false;
  1737. }
  1738. }
  1739. function openVideoCallModal() {
  1740. document.getElementById('video-call-modal').style.display = 'flex';
  1741. document.getElementById('vc-status').textContent = 'Connecting...';
  1742. document.getElementById('vc-remote-overlay').style.display = 'flex';
  1743. document.getElementById('vc-remote-label').textContent = vcCurrentPeerName || 'Remote';
  1744. vcAudioMuted = false; vcVideoStopped = false;
  1745. document.getElementById('vc-mute-btn').innerHTML = '<i class="fas fa-microphone"></i> Mute';
  1746. document.getElementById('vc-video-btn').innerHTML = '<i class="fas fa-video"></i> Stop Video';
  1747. document.getElementById('vc-mute-btn').classList.remove('active');
  1748. document.getElementById('vc-video-btn').classList.remove('active');
  1749. }
  1750. async function setupVcPeerConnection() {
  1751. if (vcPeerConnection) { try { vcPeerConnection.close(); } catch (e) {} vcPeerConnection = null; }
  1752. vcPeerConnection = new RTCPeerConnection(ICE_CONFIG);
  1753. vcLocalStream.getTracks().forEach(t => vcPeerConnection.addTrack(t, vcLocalStream));
  1754. vcPeerConnection.ontrack = event => {
  1755. const rv = document.getElementById('vc-remote-video');
  1756. if (rv.srcObject !== event.streams[0]) {
  1757. rv.srcObject = event.streams[0];
  1758. rv.play().catch(e => console.warn('remote play:', e));
  1759. document.getElementById('vc-remote-overlay').style.display = 'none';
  1760. document.getElementById('vc-status').textContent = 'Connected';
  1761. vcCallActive = true;
  1762. }
  1763. };
  1764. vcPeerConnection.onicecandidate = event => {
  1765. if (event.candidate) {
  1766. vcIceBatchQueue.push(JSON.stringify(event.candidate));
  1767. if (vcIceBatchTimer) clearTimeout(vcIceBatchTimer);
  1768. vcIceBatchTimer = setTimeout(vcFlushIceBatch, VC_ICE_BATCH_MS);
  1769. } else {
  1770. if (vcIceBatchQueue.length) vcFlushIceBatch();
  1771. }
  1772. };
  1773. vcPeerConnection.oniceconnectionstatechange = () => {
  1774. const s = vcPeerConnection?.iceConnectionState;
  1775. if (!s) return;
  1776. if (s === 'connected' || s === 'completed') { document.getElementById('vc-status').textContent = 'Connected'; vcCallActive = true; }
  1777. if (s === 'failed') document.getElementById('vc-status').textContent = 'Connection failed';
  1778. if (s === 'disconnected') document.getElementById('vc-status').textContent = 'Connection dropped…';
  1779. };
  1780. }
  1781.  
  1782. // *** FIXED: Start hangup polling immediately when call starts, on BOTH sides ***
  1783. // This polls GAS every 1.5s looking for the hangup flag set by whichever side ends the call.
  1784. function vcStartHangupPoll() {
  1785. if (vcHangupPollTimer) { clearInterval(vcHangupPollTimer); vcHangupPollTimer = null; }
  1786. vcHangupPollTimer = setInterval(async () => {
  1787. if (!vcCurrentGasCode) { clearInterval(vcHangupPollTimer); vcHangupPollTimer = null; return; }
  1788. try {
  1789. const data = await gasApi('getRoomData', { code: vcCurrentGasCode });
  1790. if (data && data.hangup === true) {
  1791. clearInterval(vcHangupPollTimer); vcHangupPollTimer = null;
  1792. if (!vcIsHangingUp) vcHandleRemoteHangup();
  1793. }
  1794. } catch (e) { /* network blip — keep polling */ }
  1795. }, VC_POLL_INTERVAL);
  1796. }
  1797.  
  1798. function vcFlushIceBatch() {
  1799. if (!vcIceBatchQueue.length || !vcCurrentGasCode) return;
  1800. const batch = [...vcIceBatchQueue]; vcIceBatchQueue = [];
  1801. gasApi(vcIsCaller ? 'addCallerCandidates' : 'addCalleeCandidate', {
  1802. code: vcCurrentGasCode, candidates: batch
  1803. }).catch(e => console.warn('[VC] ICE flush error:', e));
  1804. }
  1805. async function vcCreateAndSendOffer() {
  1806. const offer = await vcPeerConnection.createOffer({ offerToReceiveAudio: true, offerToReceiveVideo: true });
  1807. await vcPeerConnection.setLocalDescription(offer);
  1808. await gasApi('storeOffer', { code: vcCurrentGasCode, offer: JSON.stringify(offer) });
  1809. document.getElementById('vc-status').textContent = 'Waiting for peer...';
  1810. }
  1811. function vcPollForAnswer() {
  1812. let count = 0;
  1813. vcPollTimer = setInterval(async () => {
  1814. if (++count > VC_MAX_POLL) { clearInterval(vcPollTimer); vcPollTimer = null; toast('Call timed out', ''); vcHangUp(); return; }
  1815. try {
  1816. const data = await gasApi('getRoomData', { code: vcCurrentGasCode });
  1817. if (!data || !vcPeerConnection) return;
  1818. if (data.answer && !vcPeerConnection.remoteDescription) {
  1819. await vcPeerConnection.setRemoteDescription(new RTCSessionDescription(JSON.parse(data.answer)));
  1820. }
  1821. if (vcPeerConnection.remoteDescription && data.calleeCandidates?.length > vcKnownCalleeIce) {
  1822. const fresh = data.calleeCandidates.slice(vcKnownCalleeIce);
  1823. for (const c of fresh) { try { await vcPeerConnection.addIceCandidate(new RTCIceCandidate(JSON.parse(c))); } catch (e) {} }
  1824. vcKnownCalleeIce = data.calleeCandidates.length;
  1825. }
  1826. if (vcCallActive) { clearInterval(vcPollTimer); vcPollTimer = null; }
  1827. } catch (e) { console.warn('[VC] answer poll error:', e); }
  1828. }, VC_POLL_INTERVAL);
  1829. }
  1830. function vcPollForOffer() {
  1831. let count = 0;
  1832. document.getElementById('vc-status').textContent = 'Waiting for host...';
  1833. vcPollTimer = setInterval(async () => {
  1834. if (++count > VC_MAX_POLL) { clearInterval(vcPollTimer); vcPollTimer = null; toast('Call timed out', ''); vcHangUp(); return; }
  1835. try {
  1836. const data = await gasApi('getRoomData', { code: vcCurrentGasCode });
  1837. if (!data || !vcPeerConnection) return;
  1838. if (data.offer && !vcPeerConnection.remoteDescription) {
  1839. await vcPeerConnection.setRemoteDescription(new RTCSessionDescription(JSON.parse(data.offer)));
  1840. const answer = await vcPeerConnection.createAnswer();
  1841. await vcPeerConnection.setLocalDescription(answer);
  1842. await gasApi('storeAnswer', { code: vcCurrentGasCode, answer: JSON.stringify(answer) });
  1843. document.getElementById('vc-status').textContent = 'Connecting...';
  1844. }
  1845. if (vcPeerConnection.remoteDescription && data.callerCandidates?.length > vcKnownCallerIce) {
  1846. const fresh = data.callerCandidates.slice(vcKnownCallerIce);
  1847. for (const c of fresh) { try { await vcPeerConnection.addIceCandidate(new RTCIceCandidate(JSON.parse(c))); } catch (e) {} }
  1848. vcKnownCallerIce = data.callerCandidates.length;
  1849. }
  1850. if (vcCallActive) { clearInterval(vcPollTimer); vcPollTimer = null; }
  1851. } catch (e) { console.warn('[VC] offer poll error:', e); }
  1852. }, VC_POLL_INTERVAL);
  1853. }
  1854.  
  1855. // Called on the REMOTE side when the other peer ends the call
  1856. function vcHandleRemoteHangup() {
  1857. if (vcIsHangingUp) return; // prevent double execution
  1858. vcIsHangingUp = true;
  1859. vcCallActive = false;
  1860. toast('Call ended by ' + (vcCurrentPeerName || 'peer'), '');
  1861. vcCleanupTimers();
  1862. vcCleanupMedia();
  1863. document.getElementById('video-call-modal').style.display = 'none';
  1864. vcResetState();
  1865. }
  1866.  
  1867. // *** FIXED vcHangUp: signals BEFORE cleanup so state is still intact ***
  1868. async function vcHangUp() {
  1869. if (vcIsHangingUp) return; // prevent double execution
  1870. vcIsHangingUp = true;
  1871.  
  1872. // Capture values BEFORE any cleanup nulls them
  1873. const callId = vcCurrentCallId;
  1874. const gasCode = vcCurrentGasCode;
  1875.  
  1876. // Close modal immediately for responsiveness
  1877. document.getElementById('video-call-modal').style.display = 'none';
  1878.  
  1879. // Stop all timers so we don't react to our own hangup signal
  1880. vcCleanupTimers();
  1881.  
  1882. // *** SIGNAL the remote peer via BOTH channels BEFORE media cleanup ***
  1883. // 1. GAS hangup flag — the other peer's vcHangupPollTimer will pick this up
  1884. if (gasCode && !vcHangupSignalled) {
  1885. vcHangupSignalled = true;
  1886. try { await gasApi('signalHangup', { code: gasCode }); } catch (e) { console.warn('[VC] GAS hangup signal failed:', e); }
  1887. // Delete the room after a short delay so the other peer has time to read the flag
  1888. setTimeout(() => gasApi('deleteRoom', { code: gasCode }).catch(() => {}), 5000);
  1889. }
  1890. // 2. Supabase status = 'ended' — the other peer's vcSubscribeCallStatus listener picks this up
  1891. if (callId) {
  1892. try { await sb.from('video_calls').update({ status: 'ended' }).eq('id', callId); } catch (e) { console.warn('[VC] Supabase hangup signal failed:', e); }
  1893. }
  1894.  
  1895. // Now clean up local media and state
  1896. vcCleanupMedia();
  1897. vcResetState();
  1898. toast('Call ended', '');
  1899. }
  1900.  
  1901. // Split cleanup into timers + media so we can call them independently
  1902. function vcCleanupTimers() {
  1903. if (vcPollTimer) { clearInterval(vcPollTimer); vcPollTimer = null; }
  1904. if (vcHangupPollTimer) { clearInterval(vcHangupPollTimer); vcHangupPollTimer = null; }
  1905. if (vcIceBatchTimer) { clearTimeout(vcIceBatchTimer); vcIceBatchTimer = null; }
  1906. if (vcStatusChannel) { sb.removeChannel(vcStatusChannel).catch(() => {}); vcStatusChannel = null; }
  1907. }
  1908. function vcCleanupMedia() {
  1909. if (vcLocalStream) { vcLocalStream.getTracks().forEach(t => t.stop()); vcLocalStream = null; }
  1910. if (vcPeerConnection) { try { vcPeerConnection.close(); } catch (e) {} vcPeerConnection = null; }
  1911. const lv = document.getElementById('vc-local-video'); if (lv) lv.srcObject = null;
  1912. const rv = document.getElementById('vc-remote-video'); if (rv) rv.srcObject = null;
  1913. }
  1914. function vcResetState() {
  1915. vcCurrentCallId = null;
  1916. vcCurrentGasCode = null;
  1917. vcCurrentPeerId = null;
  1918. vcCurrentPeerName = '';
  1919. vcCallActive = false;
  1920. vcHangupSignalled = false;
  1921. vcIsHangingUp = false;
  1922. vcIceBatchQueue = [];
  1923. vcKnownCallerIce = 0;
  1924. vcKnownCalleeIce = 0;
  1925. }
  1926.  
  1927. function vcToggleMute() {
  1928. if (!vcLocalStream) return;
  1929. vcAudioMuted = !vcAudioMuted;
  1930. vcLocalStream.getAudioTracks().forEach(t => t.enabled = !vcAudioMuted);
  1931. const btn = document.getElementById('vc-mute-btn');
  1932. btn.innerHTML = vcAudioMuted ? '<i class="fas fa-microphone-slash"></i> Unmute' : '<i class="fas fa-microphone"></i> Mute';
  1933. btn.classList.toggle('active', vcAudioMuted);
  1934. }
  1935. function vcToggleVideo() {
  1936. if (!vcLocalStream) return;
  1937. vcVideoStopped = !vcVideoStopped;
  1938. vcLocalStream.getVideoTracks().forEach(t => t.enabled = !vcVideoStopped);
  1939. const btn = document.getElementById('vc-video-btn');
  1940. btn.innerHTML = vcVideoStopped ? '<i class="fas fa-video-slash"></i> Start Video' : '<i class="fas fa-video"></i> Stop Video';
  1941. btn.classList.toggle('active', vcVideoStopped);
  1942. }
  1943.  
  1944. // ==================== UI HELPERS ====================
  1945. function showWelcome() { stopMsgPoll(); document.getElementById('welcome-screen').style.display = 'flex'; document.getElementById('chat-view').style.display = 'none'; document.getElementById('friends-view').style.display = 'none'; }
  1946. function showChatView() { document.getElementById('welcome-screen').style.display = 'none'; document.getElementById('chat-view').style.display = 'flex'; document.getElementById('friends-view').style.display = 'none'; }
  1947. function showFriendsPanel() { document.getElementById('welcome-screen').style.display = 'none'; document.getElementById('chat-view').style.display = 'none'; document.getElementById('friends-view').style.display = 'flex'; }
  1948. function closeModal(id) { document.getElementById(id).style.display = 'none'; }
  1949. function openLightbox(url) { document.getElementById('lb-img').src = url; document.getElementById('lightbox').style.display = 'flex'; }
  1950. function closeLightbox() { document.getElementById('lightbox').style.display = 'none'; }
  1951. function openHTMLDemo(url, name) { document.getElementById('demo-title').textContent = '▶ ' + (name || 'HTML File'); document.getElementById('demo-iframe').src = url; document.getElementById('demo-modal').style.display = 'flex'; }
  1952. async function openCSVPreview(url, name) {
  1953. document.getElementById('csv-title').textContent = '📊 ' + (name || 'CSV File');
  1954. const wrap = document.getElementById('csv-wrap');
  1955. wrap.innerHTML = '<div style="padding:20px;color:var(--text-muted)">Loading...</div>';
  1956. document.getElementById('csv-modal').style.display = 'flex';
  1957. try {
  1958. const text = await (await fetch(url)).text();
  1959. const rows = text.trim().split('\n').map(r => {
  1960. const cells = []; let cur = '', inQ = false;
  1961. for (let c of r) { if (c === '"') inQ = !inQ; else if (c === ',' && !inQ) { cells.push(cur.trim()); cur = ''; } else cur += c; }
  1962. cells.push(cur.trim()); return cells;
  1963. });
  1964. const heads = rows[0] || []; const body = rows.slice(1, 51);
  1965. wrap.innerHTML = `<table class="csv-tbl"><thead><tr>${heads.map(h => `<th>${h}</th>`).join('')}</tr></thead><tbody>${body.map(r => `<tr>${r.map(c => `<td>${c}</td>`).join('')}</tr>`).join('')}</tbody></table>${rows.length > 51 ? `<div style="padding:7px;font-size:10px;color:var(--text-muted)">Showing first 50 of ${rows.length - 1} rows</div>` : ''}`;
  1966. } catch { wrap.innerHTML = '<div style="padding:20px;color:var(--red)">Failed to load CSV.</div>'; }
  1967. }
  1968. async function refreshAllVisibleAvatars() {
  1969. if (VIEW === 'dm' && CDM) await openDM(CDM);
  1970. else if (VIEW === 'channel' && CC) await selectChannel(CC);
  1971. else if (VIEW === 'home') await loadDMSidebar();
  1972. }
  1973. function initContextMenu() {
  1974. const menu = document.getElementById('ctx-menu');
  1975. document.addEventListener('contextmenu', e => {
  1976. const img = e.target.closest('.msg-img');
  1977. if (!img) return;
  1978. e.preventDefault(); currentContextTarget = img.src;
  1979. menu.style.display = 'block'; menu.style.left = e.pageX + 'px'; menu.style.top = e.pageY + 'px';
  1980. });
  1981. document.addEventListener('click', () => menu.style.display = 'none');
  1982. menu.addEventListener('click', e => {
  1983. const action = e.target.dataset.action;
  1984. if (action === 'download' && currentContextTarget) { const a = document.createElement('a'); a.href = currentContextTarget; a.download = ''; a.click(); }
  1985. else if (action === 'copy-link' && currentContextTarget) { navigator.clipboard?.writeText(currentContextTarget); toast('Link copied!', 'success'); }
  1986. menu.style.display = 'none';
  1987. });
  1988. }
  1989. document.querySelectorAll('#settings-modal .modal-tab').forEach(tab => {
  1990. tab.addEventListener('click', () => {
  1991. const stab = tab.dataset.stab;
  1992. document.querySelectorAll('#settings-modal .modal-tab').forEach(t => t.classList.remove('active'));
  1993. tab.classList.add('active');
  1994. document.querySelectorAll('#settings-modal .stab-content').forEach(c => c.style.display = 'none');
  1995. document.getElementById(`stab-${stab}`).style.display = 'block';
  1996. if (stab === 'blocked') renderBlockedList();
  1997. });
  1998. });
  1999. document.addEventListener('keydown', e => {
  2000. if (e.key === 'Escape') {
  2001. closeLightbox();
  2002. ['demo-modal','csv-modal','server-modal','channel-modal','server-settings-modal','settings-modal','gif-modal','admin-members-modal','invite-server-modal'].forEach(id => {
  2003. const el = document.getElementById(id);
  2004. if (el && el.style.display !== 'none') closeModal(id);
  2005. });
  2006. // ESC on video call modal = hang up
  2007. const vcm = document.getElementById('video-call-modal');
  2008. if (vcm && vcm.style.display !== 'none') vcHangUp();
  2009. }
  2010. });
  2011. window.addEventListener('beforeunload', () => {
  2012. // Fire hangup signals synchronously on page close
  2013. if (vcCurrentCallId || vcCurrentGasCode) {
  2014. const callId = vcCurrentCallId;
  2015. const gasCode = vcCurrentGasCode;
  2016. if (gasCode && !vcHangupSignalled) {
  2017. vcHangupSignalled = true;
  2018. navigator.sendBeacon && navigator.sendBeacon(GAS_URL, JSON.stringify({ action: 'signalHangup', code: gasCode }));
  2019. }
  2020. if (callId) {
  2021. // Best-effort — may not complete on unload
  2022. sb.from('video_calls').update({ status: 'ended' }).eq('id', callId).catch(() => {});
  2023. }
  2024. }
  2025. if (msgSub) sb.removeChannel(msgSub).catch(() => {});
  2026. if (pBadgeTimer) clearInterval(pBadgeTimer);
  2027. if (msgPollTimer) clearInterval(msgPollTimer);
  2028. if (timeoutInterval) clearInterval(timeoutInterval);
  2029. if (vcCallSubscription) sb.removeChannel(vcCallSubscription).catch(() => {});
  2030. if (vcStatusChannel) sb.removeChannel(vcStatusChannel).catch(() => {});
  2031. if (activityInterval) clearInterval(activityInterval);
  2032. if (incomingPollInterval) clearInterval(incomingPollInterval);
  2033. });
  2034. init();
  2035. </script>
  2036. </body>
  2037. </html>
RAW Paste Data Copied
Public Pastes
Hello
Not a member of Fast Pastebin Alternative yet?
Sign Up, it unlocks many cool features!
 
We use cookies for various purposes including analytics. By continuing to use Fast Pastebin Alternative, you agree to our use of cookies as described in the Privacy Policy.  OK, I Understand