Add embedded web chat client (closes #7) (#8)

2026-02-11 03:02:41 +01:00
parent 95ccc1b2cd
commit df2217a38b
55 changed files with 5182 additions and 123 deletions
--- a/web/src/app.jsx
+++ b/web/src/app.jsx
@@ -0,0 +1,371 @@
+import { h, render, Component } from 'preact';
+import { useState, useEffect, useRef, useCallback } from 'preact/hooks';
+
+const API = '/api/v1';
+
+function api(path, opts = {}) {
+  const token = localStorage.getItem('chat_token');
+  const headers = { 'Content-Type': 'application/json', ...(opts.headers || {}) };
+  if (token) headers['Authorization'] = `Bearer ${token}`;
+  return fetch(API + path, { ...opts, headers }).then(async r => {
+    const data = await r.json().catch(() => null);
+    if (!r.ok) throw { status: r.status, data };
+    return data;
+  });
+}
+
+function formatTime(ts) {
+  const d = new Date(ts);
+  return d.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', second: '2-digit' });
+}
+
+// Nick color hashing
+function nickColor(nick) {
+  let h = 0;
+  for (let i = 0; i < nick.length; i++) h = nick.charCodeAt(i) + ((h << 5) - h);
+  const hue = Math.abs(h) % 360;
+  return `hsl(${hue}, 70%, 65%)`;
+}
+
+function LoginScreen({ onLogin }) {
+  const [nick, setNick] = useState('');
+  const [error, setError] = useState('');
+  const [motd, setMotd] = useState('');
+  const [serverName, setServerName] = useState('Chat');
+  const inputRef = useRef();
+
+  useEffect(() => {
+    api('/server').then(s => {
+      if (s.name) setServerName(s.name);
+      if (s.motd) setMotd(s.motd);
+    }).catch(() => {});
+    // Check for saved token
+    const saved = localStorage.getItem('chat_token');
+    if (saved) {
+      api('/state').then(u => onLogin(u.nick, saved)).catch(() => localStorage.removeItem('chat_token'));
+    }
+    inputRef.current?.focus();
+  }, []);
+
+  const submit = async (e) => {
+    e.preventDefault();
+    setError('');
+    try {
+      const res = await api('/session', {
+        method: 'POST',
+        body: JSON.stringify({ nick: nick.trim() })
+      });
+      localStorage.setItem('chat_token', res.token);
+      onLogin(res.nick, res.token);
+    } catch (err) {
+      setError(err.data?.error || 'Connection failed');
+    }
+  };
+
+  return (
+    <div class="login-screen">
+      <h1>{serverName}</h1>
+      {motd && <div class="motd">{motd}</div>}
+      <form onSubmit={submit}>
+        <input
+          ref={inputRef}
+          type="text"
+          placeholder="Choose a nickname..."
+          value={nick}
+          onInput={e => setNick(e.target.value)}
+          maxLength={32}
+          autoFocus
+        />
+        <button type="submit">Connect</button>
+      </form>
+      {error && <div class="error">{error}</div>}
+    </div>
+  );
+}
+
+function Message({ msg }) {
+  return (
+    <div class={`message ${msg.system ? 'system' : ''}`}>
+      <span class="timestamp">{formatTime(msg.createdAt)}</span>
+      <span class="nick" style={{ color: msg.system ? undefined : nickColor(msg.nick) }}>{msg.nick}</span>
+      <span class="content">{msg.content}</span>
+    </div>
+  );
+}
+
+function App() {
+  const [loggedIn, setLoggedIn] = useState(false);
+  const [nick, setNick] = useState('');
+  const [tabs, setTabs] = useState([{ type: 'server', name: 'Server' }]);
+  const [activeTab, setActiveTab] = useState(0);
+  const [messages, setMessages] = useState({ server: [] }); // keyed by tab name
+  const [members, setMembers] = useState({}); // keyed by channel name
+  const [input, setInput] = useState('');
+  const [joinInput, setJoinInput] = useState('');
+  const [lastMsgId, setLastMsgId] = useState(0);
+  const messagesEndRef = useRef();
+  const inputRef = useRef();
+  const pollRef = useRef();
+
+  const addMessage = useCallback((tabName, msg) => {
+    setMessages(prev => ({
+      ...prev,
+      [tabName]: [...(prev[tabName] || []), msg]
+    }));
+  }, []);
+
+  const addSystemMessage = useCallback((tabName, text) => {
+    addMessage(tabName, {
+      id: Date.now(),
+      nick: '*',
+      content: text,
+      createdAt: new Date().toISOString(),
+      system: true
+    });
+  }, [addMessage]);
+
+  const onLogin = useCallback((userNick, token) => {
+    setNick(userNick);
+    setLoggedIn(true);
+    addSystemMessage('server', `Connected as ${userNick}`);
+    // Fetch server info
+    api('/server').then(s => {
+      if (s.motd) addSystemMessage('server', `MOTD: ${s.motd}`);
+    }).catch(() => {});
+  }, [addSystemMessage]);
+
+  // Poll for new messages
+  useEffect(() => {
+    if (!loggedIn) return;
+    let alive = true;
+    const poll = async () => {
+      try {
+        const msgs = await api(`/messages?after=${lastMsgId}`);
+        if (!alive) return;
+        let maxId = lastMsgId;
+        for (const msg of msgs) {
+          if (msg.id > maxId) maxId = msg.id;
+          if (msg.isDm) {
+            const dmTab = msg.nick === nick ? msg.dmTarget : msg.nick;
+            // Ensure DM tab exists
+            setTabs(prev => {
+              if (!prev.find(t => t.type === 'dm' && t.name === dmTab)) {
+                return [...prev, { type: 'dm', name: dmTab }];
+              }
+              return prev;
+            });
+            addMessage(dmTab, msg);
+          } else if (msg.channel) {
+            addMessage(msg.channel, msg);
+          }
+        }
+        if (maxId > lastMsgId) setLastMsgId(maxId);
+      } catch (err) {
+        // silent
+      }
+    };
+    pollRef.current = setInterval(poll, 1500);
+    poll();
+    return () => { alive = false; clearInterval(pollRef.current); };
+  }, [loggedIn, lastMsgId, nick, addMessage]);
+
+  // Fetch members for active channel tab
+  useEffect(() => {
+    if (!loggedIn) return;
+    const tab = tabs[activeTab];
+    if (!tab || tab.type !== 'channel') return;
+    const chName = tab.name.replace('#', '');
+    api(`/channels/${chName}/members`).then(m => {
+      setMembers(prev => ({ ...prev, [tab.name]: m }));
+    }).catch(() => {});
+    const iv = setInterval(() => {
+      api(`/channels/${chName}/members`).then(m => {
+        setMembers(prev => ({ ...prev, [tab.name]: m }));
+      }).catch(() => {});
+    }, 5000);
+    return () => clearInterval(iv);
+  }, [loggedIn, activeTab, tabs]);
+
+  // Auto-scroll
+  useEffect(() => {
+    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
+  }, [messages, activeTab]);
+
+  // Focus input on tab change
+  useEffect(() => {
+    inputRef.current?.focus();
+  }, [activeTab]);
+
+  const joinChannel = async (name) => {
+    if (!name) return;
+    name = name.trim();
+    if (!name.startsWith('#')) name = '#' + name;
+    try {
+      await api('/messages', { method: 'POST', body: JSON.stringify({ command: 'JOIN', to: name }) });
+      setTabs(prev => {
+        if (prev.find(t => t.type === 'channel' && t.name === name)) return prev;
+        return [...prev, { type: 'channel', name }];
+      });
+      setActiveTab(tabs.length); // switch to new tab
+      addSystemMessage(name, `Joined ${name}`);
+      setJoinInput('');
+    } catch (err) {
+      addSystemMessage('server', `Failed to join ${name}: ${err.data?.error || 'error'}`);
+    }
+  };
+
+  const partChannel = async (name) => {
+    try {
+      await api('/messages', { method: 'POST', body: JSON.stringify({ command: 'PART', to: name }) });
+    } catch (err) { /* ignore */ }
+    setTabs(prev => {
+      const next = prev.filter(t => !(t.type === 'channel' && t.name === name));
+      return next;
+    });
+    setActiveTab(0);
+  };
+
+  const closeTab = (idx) => {
+    const tab = tabs[idx];
+    if (tab.type === 'channel') {
+      partChannel(tab.name);
+    } else if (tab.type === 'dm') {
+      setTabs(prev => prev.filter((_, i) => i !== idx));
+      if (activeTab >= idx) setActiveTab(Math.max(0, activeTab - 1));
+    }
+  };
+
+  const openDM = (targetNick) => {
+    setTabs(prev => {
+      if (prev.find(t => t.type === 'dm' && t.name === targetNick)) return prev;
+      return [...prev, { type: 'dm', name: targetNick }];
+    });
+    setActiveTab(tabs.findIndex(t => t.type === 'dm' && t.name === targetNick) || tabs.length);
+  };
+
+  const sendMessage = async () => {
+    const text = input.trim();
+    if (!text) return;
+    setInput('');
+    const tab = tabs[activeTab];
+    if (!tab || tab.type === 'server') return;
+
+    // Handle /commands
+    if (text.startsWith('/')) {
+      const parts = text.split(' ');
+      const cmd = parts[0].toLowerCase();
+      if (cmd === '/join' && parts[1]) {
+        joinChannel(parts[1]);
+        return;
+      }
+      if (cmd === '/part') {
+        if (tab.type === 'channel') partChannel(tab.name);
+        return;
+      }
+      if (cmd === '/msg' && parts[1] && parts.slice(2).join(' ')) {
+        const target = parts[1];
+        const msg = parts.slice(2).join(' ');
+        try {
+          await api('/messages', { method: 'POST', body: JSON.stringify({ command: 'PRIVMSG', to: target, body: [msg] }) });
+          openDM(target);
+        } catch (err) {
+          addSystemMessage('server', `Failed to send DM: ${err.data?.error || 'error'}`);
+        }
+        return;
+      }
+      if (cmd === '/nick' && parts[1]) {
+        try {
+          await api('/messages', { method: 'POST', body: JSON.stringify({ command: 'NICK', body: [parts[1]] }) });
+          setNick(parts[1]);
+          addSystemMessage('server', `Nick changed to ${parts[1]}`);
+        } catch (err) {
+          addSystemMessage('server', `Nick change failed: ${err.data?.error || 'error'}`);
+        }
+        return;
+      }
+      addSystemMessage('server', `Unknown command: ${cmd}`);
+      return;
+    }
+
+    const to = tab.type === 'channel' ? tab.name : tab.name;
+    try {
+      await api('/messages', { method: 'POST', body: JSON.stringify({ command: 'PRIVMSG', to, body: [text] }) });
+    } catch (err) {
+      addSystemMessage(tab.name, `Send failed: ${err.data?.error || 'error'}`);
+    }
+  };
+
+  if (!loggedIn) return <LoginScreen onLogin={onLogin} />;
+
+  const currentTab = tabs[activeTab] || tabs[0];
+  const currentMessages = messages[currentTab.name] || [];
+  const currentMembers = members[currentTab.name] || [];
+
+  return (
+    <div class="app">
+      <div class="tab-bar">
+        {tabs.map((tab, i) => (
+          <div
+            class={`tab ${i === activeTab ? 'active' : ''}`}
+            onClick={() => setActiveTab(i)}
+          >
+            {tab.type === 'dm' ? `→${tab.name}` : tab.name}
+            {tab.type !== 'server' && (
+              <span class="close-btn" onClick={(e) => { e.stopPropagation(); closeTab(i); }}>×</span>
+            )}
+          </div>
+        ))}
+        <div class="join-dialog">
+          <input
+            placeholder="#channel"
+            value={joinInput}
+            onInput={e => setJoinInput(e.target.value)}
+            onKeyDown={e => e.key === 'Enter' && joinChannel(joinInput)}
+          />
+          <button onClick={() => joinChannel(joinInput)}>Join</button>
+        </div>
+      </div>
+
+      <div class="content">
+        <div class="messages-pane">
+          {currentTab.type === 'server' ? (
+            <div class="server-messages">
+              {currentMessages.map(m => <Message msg={m} />)}
+              <div ref={messagesEndRef} />
+            </div>
+          ) : (
+            <>
+              <div class="messages">
+                {currentMessages.map(m => <Message msg={m} />)}
+                <div ref={messagesEndRef} />
+              </div>
+              <div class="input-bar">
+                <input
+                  ref={inputRef}
+                  placeholder={`Message ${currentTab.name}...`}
+                  value={input}
+                  onInput={e => setInput(e.target.value)}
+                  onKeyDown={e => e.key === 'Enter' && sendMessage()}
+                />
+                <button onClick={sendMessage}>Send</button>
+              </div>
+            </>
+          )}
+        </div>
+
+        {currentTab.type === 'channel' && (
+          <div class="user-list">
+            <h3>Users ({currentMembers.length})</h3>
+            {currentMembers.map(u => (
+              <div class="user" onClick={() => openDM(u.nick)} style={{ color: nickColor(u.nick) }}>
+                {u.nick}
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+render(<App />, document.getElementById('root'));
--- a/web/src/index.html
+++ b/web/src/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Chat</title>
+  <link rel="stylesheet" href="/style.css">
+</head>
+<body>
+  <div id="root"></div>
+  <script src="/app.js"></script>
+</body>
+</html>
--- a/web/src/style.css
+++ b/web/src/style.css
@@ -0,0 +1,274 @@
+* { margin: 0; padding: 0; box-sizing: border-box; }
+
+:root {
+  --bg: #1a1a2e;
+  --bg-secondary: #16213e;
+  --bg-input: #0f3460;
+  --text: #e0e0e0;
+  --text-muted: #888;
+  --accent: #e94560;
+  --accent2: #0f3460;
+  --border: #2a2a4a;
+  --nick: #53a8b6;
+  --timestamp: #666;
+  --tab-active: #e94560;
+  --tab-bg: #16213e;
+  --tab-hover: #1a1a3e;
+}
+
+html, body, #root {
+  height: 100%;
+  font-family: 'Courier New', Courier, monospace;
+  font-size: 14px;
+  background: var(--bg);
+  color: var(--text);
+}
+
+/* Login screen */
+.login-screen {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  gap: 16px;
+}
+
+.login-screen h1 {
+  color: var(--accent);
+  font-size: 2em;
+}
+
+.login-screen input {
+  padding: 10px 16px;
+  font-size: 16px;
+  font-family: inherit;
+  background: var(--bg-input);
+  border: 1px solid var(--border);
+  color: var(--text);
+  border-radius: 4px;
+  width: 280px;
+}
+
+.login-screen button {
+  padding: 10px 24px;
+  font-size: 16px;
+  font-family: inherit;
+  background: var(--accent);
+  border: none;
+  color: white;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+.login-screen .error {
+  color: var(--accent);
+}
+
+.login-screen .motd {
+  color: var(--text-muted);
+  max-width: 400px;
+  text-align: center;
+  white-space: pre-wrap;
+}
+
+/* Main layout */
+.app {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+/* Tab bar */
+.tab-bar {
+  display: flex;
+  background: var(--bg-secondary);
+  border-bottom: 1px solid var(--border);
+  overflow-x: auto;
+  flex-shrink: 0;
+}
+
+.tab {
+  padding: 8px 16px;
+  cursor: pointer;
+  border-bottom: 2px solid transparent;
+  white-space: nowrap;
+  color: var(--text-muted);
+  user-select: none;
+}
+
+.tab:hover {
+  background: var(--tab-hover);
+}
+
+.tab.active {
+  color: var(--text);
+  border-bottom-color: var(--tab-active);
+}
+
+.tab .close-btn {
+  margin-left: 8px;
+  color: var(--text-muted);
+  font-size: 12px;
+}
+
+.tab .close-btn:hover {
+  color: var(--accent);
+}
+
+/* Content area */
+.content {
+  display: flex;
+  flex: 1;
+  overflow: hidden;
+}
+
+/* Messages */
+.messages-pane {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.messages {
+  flex: 1;
+  overflow-y: auto;
+  padding: 8px 12px;
+}
+
+.message {
+  padding: 2px 0;
+  line-height: 1.4;
+  word-wrap: break-word;
+}
+
+.message .timestamp {
+  color: var(--timestamp);
+  font-size: 12px;
+  margin-right: 8px;
+}
+
+.message .nick {
+  color: var(--nick);
+  font-weight: bold;
+  margin-right: 8px;
+}
+
+.message .nick::before { content: '<'; }
+.message .nick::after { content: '>'; }
+
+.message.system {
+  color: var(--text-muted);
+  font-style: italic;
+}
+
+.message.system .nick {
+  color: var(--text-muted);
+}
+
+.message.system .nick::before,
+.message.system .nick::after { content: ''; }
+
+/* Input */
+.input-bar {
+  display: flex;
+  border-top: 1px solid var(--border);
+  background: var(--bg-secondary);
+  flex-shrink: 0;
+}
+
+.input-bar input {
+  flex: 1;
+  padding: 10px 12px;
+  font-family: inherit;
+  font-size: 14px;
+  background: var(--bg-input);
+  border: none;
+  color: var(--text);
+  outline: none;
+}
+
+.input-bar button {
+  padding: 10px 16px;
+  font-family: inherit;
+  background: var(--accent);
+  border: none;
+  color: white;
+  cursor: pointer;
+}
+
+/* User list */
+.user-list {
+  width: 160px;
+  background: var(--bg-secondary);
+  border-left: 1px solid var(--border);
+  overflow-y: auto;
+  padding: 8px;
+  flex-shrink: 0;
+}
+
+.user-list h3 {
+  color: var(--text-muted);
+  font-size: 11px;
+  text-transform: uppercase;
+  margin-bottom: 8px;
+  letter-spacing: 1px;
+}
+
+.user-list .user {
+  padding: 3px 4px;
+  color: var(--nick);
+  font-size: 13px;
+  cursor: pointer;
+}
+
+.user-list .user:hover {
+  background: var(--tab-hover);
+}
+
+/* Server tab */
+.server-messages {
+  color: var(--text-muted);
+  padding: 12px;
+  white-space: pre-wrap;
+  overflow-y: auto;
+  flex: 1;
+}
+
+/* Channel join dialog */
+.join-dialog {
+  padding: 12px;
+  display: flex;
+  gap: 8px;
+  background: var(--bg-secondary);
+  border-bottom: 1px solid var(--border);
+}
+
+.join-dialog input {
+  padding: 6px 10px;
+  font-family: inherit;
+  font-size: 13px;
+  background: var(--bg-input);
+  border: 1px solid var(--border);
+  color: var(--text);
+  border-radius: 3px;
+  width: 200px;
+}
+
+.join-dialog button {
+  padding: 6px 14px;
+  font-family: inherit;
+  font-size: 13px;
+  background: var(--accent2);
+  border: none;
+  color: var(--text);
+  border-radius: 3px;
+  cursor: pointer;
+}
+
+/* Responsive */
+@media (max-width: 600px) {
+  .user-list { display: none; }
+  .tab { padding: 6px 10px; font-size: 13px; }
+}