32419fb1f7
All checks were successful
check / check (push) Successful in 1m51s
Backend: - Session/client UUID model: sessions table (uuid, nick, signing_key), clients table (uuid, session_id, token) with per-client message queues - MOTD delivery as IRC numeric messages (375/372/376) on connect - EnqueueToSession fans out to all clients of a session - EnqueueToClient for targeted delivery (MOTD) - All queries updated for session/client model SPA client: - Long-poll loop (15s timeout) instead of setInterval - IRC message envelope parsing (command/from/to/body) - Display JOIN/PART/NICK/TOPIC/QUIT system messages - Nick change via /nick command - Topic display in header bar - Unread count badges on inactive tabs - Auto-rejoin channels on reconnect (localStorage) - Connection status indicator - Message deduplication by UUID - Channel history loaded on join - /topic command support Closes #9
520 lines
17 KiB
JavaScript
520 lines
17 KiB
JavaScript
import { h, render } from 'preact';
|
||
import { useState, useEffect, useRef, useCallback } from 'preact/hooks';
|
||
|
||
const API = '/api/v1';
|
||
const POLL_TIMEOUT = 15;
|
||
const RECONNECT_DELAY = 3000;
|
||
const MEMBER_REFRESH_INTERVAL = 10000;
|
||
|
||
function api(path, opts = {}) {
|
||
const token = localStorage.getItem('chat_token');
|
||
const headers = { 'Content-Type': 'application/json', ...(opts.headers || {}) };
|
||
if (token) headers['Authorization'] = `Bearer ${token}`;
|
||
const { signal, ...rest } = opts;
|
||
return fetch(API + path, { ...rest, headers, signal }).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' });
|
||
}
|
||
|
||
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(() => {});
|
||
const saved = localStorage.getItem('chat_token');
|
||
if (saved) {
|
||
api('/state').then(u => onLogin(u.nick)).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);
|
||
} 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 }) {
|
||
if (msg.system) {
|
||
return (
|
||
<div class="message system">
|
||
<span class="timestamp">{formatTime(msg.ts)}</span>
|
||
<span class="content">{msg.text}</span>
|
||
</div>
|
||
);
|
||
}
|
||
return (
|
||
<div class="message">
|
||
<span class="timestamp">{formatTime(msg.ts)}</span>
|
||
<span class="nick" style={{ color: nickColor(msg.from) }}>{msg.from}</span>
|
||
<span class="content">{msg.text}</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: [] });
|
||
const [members, setMembers] = useState({});
|
||
const [topics, setTopics] = useState({});
|
||
const [unread, setUnread] = useState({});
|
||
const [input, setInput] = useState('');
|
||
const [joinInput, setJoinInput] = useState('');
|
||
const [connected, setConnected] = useState(true);
|
||
|
||
const lastIdRef = useRef(0);
|
||
const seenIdsRef = useRef(new Set());
|
||
const pollAbortRef = useRef(null);
|
||
const tabsRef = useRef(tabs);
|
||
const activeTabRef = useRef(activeTab);
|
||
const nickRef = useRef(nick);
|
||
const messagesEndRef = useRef();
|
||
const inputRef = useRef();
|
||
|
||
useEffect(() => { tabsRef.current = tabs; }, [tabs]);
|
||
useEffect(() => { activeTabRef.current = activeTab; }, [activeTab]);
|
||
useEffect(() => { nickRef.current = nick; }, [nick]);
|
||
|
||
// Persist joined channels
|
||
useEffect(() => {
|
||
const channels = tabs.filter(t => t.type === 'channel').map(t => t.name);
|
||
localStorage.setItem('chat_channels', JSON.stringify(channels));
|
||
}, [tabs]);
|
||
|
||
// Clear unread on tab switch
|
||
useEffect(() => {
|
||
const tab = tabs[activeTab];
|
||
if (tab) setUnread(prev => ({ ...prev, [tab.name]: 0 }));
|
||
}, [activeTab, tabs]);
|
||
|
||
const addMessage = useCallback((tabName, msg) => {
|
||
if (msg.id && seenIdsRef.current.has(msg.id)) return;
|
||
if (msg.id) seenIdsRef.current.add(msg.id);
|
||
setMessages(prev => ({
|
||
...prev,
|
||
[tabName]: [...(prev[tabName] || []), msg]
|
||
}));
|
||
const currentTab = tabsRef.current[activeTabRef.current];
|
||
if (!currentTab || currentTab.name !== tabName) {
|
||
setUnread(prev => ({ ...prev, [tabName]: (prev[tabName] || 0) + 1 }));
|
||
}
|
||
}, []);
|
||
|
||
const addSystemMessage = useCallback((tabName, text) => {
|
||
setMessages(prev => ({
|
||
...prev,
|
||
[tabName]: [...(prev[tabName] || []), {
|
||
id: 'sys-' + Date.now() + '-' + Math.random(),
|
||
ts: new Date().toISOString(),
|
||
text,
|
||
system: true
|
||
}]
|
||
}));
|
||
}, []);
|
||
|
||
const refreshMembers = useCallback((channel) => {
|
||
const chName = channel.replace('#', '');
|
||
api(`/channels/${chName}/members`).then(m => {
|
||
setMembers(prev => ({ ...prev, [channel]: m }));
|
||
}).catch(() => {});
|
||
}, []);
|
||
|
||
const processMessage = useCallback((msg) => {
|
||
const body = Array.isArray(msg.body) ? msg.body.join('\n') : '';
|
||
const base = { id: msg.id, ts: msg.ts, from: msg.from, to: msg.to, command: msg.command };
|
||
|
||
switch (msg.command) {
|
||
case 'PRIVMSG':
|
||
case 'NOTICE': {
|
||
const parsed = { ...base, text: body, system: false };
|
||
const target = msg.to;
|
||
if (target && target.startsWith('#')) {
|
||
addMessage(target, parsed);
|
||
} else {
|
||
const dmPeer = msg.from === nickRef.current ? msg.to : msg.from;
|
||
setTabs(prev => {
|
||
if (!prev.find(t => t.type === 'dm' && t.name === dmPeer)) {
|
||
return [...prev, { type: 'dm', name: dmPeer }];
|
||
}
|
||
return prev;
|
||
});
|
||
addMessage(dmPeer, parsed);
|
||
}
|
||
break;
|
||
}
|
||
case 'JOIN': {
|
||
const text = `${msg.from} has joined ${msg.to}`;
|
||
if (msg.to) addMessage(msg.to, { ...base, text, system: true });
|
||
if (msg.to && msg.to.startsWith('#')) refreshMembers(msg.to);
|
||
break;
|
||
}
|
||
case 'PART': {
|
||
const reason = body ? ': ' + body : '';
|
||
const text = `${msg.from} has left ${msg.to}${reason}`;
|
||
if (msg.to) addMessage(msg.to, { ...base, text, system: true });
|
||
if (msg.to && msg.to.startsWith('#')) refreshMembers(msg.to);
|
||
break;
|
||
}
|
||
case 'QUIT': {
|
||
const reason = body ? ': ' + body : '';
|
||
const text = `${msg.from} has quit${reason}`;
|
||
tabsRef.current.forEach(tab => {
|
||
if (tab.type === 'channel') {
|
||
addMessage(tab.name, { ...base, text, system: true });
|
||
}
|
||
});
|
||
break;
|
||
}
|
||
case 'NICK': {
|
||
const newNick = Array.isArray(msg.body) ? msg.body[0] : body;
|
||
const text = `${msg.from} is now known as ${newNick}`;
|
||
tabsRef.current.forEach(tab => {
|
||
if (tab.type === 'channel') {
|
||
addMessage(tab.name, { ...base, text, system: true });
|
||
}
|
||
});
|
||
if (msg.from === nickRef.current && newNick) setNick(newNick);
|
||
// Refresh members in all channels
|
||
tabsRef.current.forEach(tab => {
|
||
if (tab.type === 'channel') refreshMembers(tab.name);
|
||
});
|
||
break;
|
||
}
|
||
case 'TOPIC': {
|
||
const text = `${msg.from} set the topic: ${body}`;
|
||
if (msg.to) {
|
||
addMessage(msg.to, { ...base, text, system: true });
|
||
setTopics(prev => ({ ...prev, [msg.to]: body }));
|
||
}
|
||
break;
|
||
}
|
||
case '375':
|
||
case '372':
|
||
case '376':
|
||
addMessage('Server', { ...base, text: body, system: true });
|
||
break;
|
||
default:
|
||
addMessage('Server', { ...base, text: body || msg.command, system: true });
|
||
}
|
||
}, [addMessage, refreshMembers]);
|
||
|
||
// Long-poll loop
|
||
useEffect(() => {
|
||
if (!loggedIn) return;
|
||
let alive = true;
|
||
|
||
const poll = async () => {
|
||
while (alive) {
|
||
try {
|
||
const controller = new AbortController();
|
||
pollAbortRef.current = controller;
|
||
const result = await api(
|
||
`/messages?after=${lastIdRef.current}&timeout=${POLL_TIMEOUT}`,
|
||
{ signal: controller.signal }
|
||
);
|
||
if (!alive) break;
|
||
setConnected(true);
|
||
if (result.messages) {
|
||
for (const m of result.messages) processMessage(m);
|
||
}
|
||
if (result.last_id > lastIdRef.current) {
|
||
lastIdRef.current = result.last_id;
|
||
}
|
||
} catch (err) {
|
||
if (!alive) break;
|
||
if (err.name === 'AbortError') continue;
|
||
setConnected(false);
|
||
await new Promise(r => setTimeout(r, RECONNECT_DELAY));
|
||
}
|
||
}
|
||
};
|
||
|
||
poll();
|
||
return () => { alive = false; pollAbortRef.current?.abort(); };
|
||
}, [loggedIn, processMessage]);
|
||
|
||
// Refresh members for active channel
|
||
useEffect(() => {
|
||
if (!loggedIn) return;
|
||
const tab = tabs[activeTab];
|
||
if (!tab || tab.type !== 'channel') return;
|
||
refreshMembers(tab.name);
|
||
const iv = setInterval(() => refreshMembers(tab.name), MEMBER_REFRESH_INTERVAL);
|
||
return () => clearInterval(iv);
|
||
}, [loggedIn, activeTab, tabs, refreshMembers]);
|
||
|
||
// Auto-scroll
|
||
useEffect(() => {
|
||
messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
|
||
}, [messages, activeTab]);
|
||
|
||
// Focus input on tab change
|
||
useEffect(() => { inputRef.current?.focus(); }, [activeTab]);
|
||
|
||
// Fetch topic for active channel
|
||
useEffect(() => {
|
||
if (!loggedIn) return;
|
||
const tab = tabs[activeTab];
|
||
if (!tab || tab.type !== 'channel') return;
|
||
api('/channels').then(channels => {
|
||
const ch = channels.find(c => c.name === tab.name);
|
||
if (ch && ch.topic) setTopics(prev => ({ ...prev, [tab.name]: ch.topic }));
|
||
}).catch(() => {});
|
||
}, [loggedIn, activeTab, tabs]);
|
||
|
||
const onLogin = useCallback(async (userNick) => {
|
||
setNick(userNick);
|
||
setLoggedIn(true);
|
||
addSystemMessage('Server', `Connected as ${userNick}`);
|
||
// Auto-rejoin saved channels
|
||
const saved = JSON.parse(localStorage.getItem('chat_channels') || '[]');
|
||
for (const ch of saved) {
|
||
try {
|
||
await api('/messages', { method: 'POST', body: JSON.stringify({ command: 'JOIN', to: ch }) });
|
||
setTabs(prev => {
|
||
if (prev.find(t => t.type === 'channel' && t.name === ch)) return prev;
|
||
return [...prev, { type: 'channel', name: ch }];
|
||
});
|
||
} catch (e) {
|
||
// Channel may not exist anymore
|
||
}
|
||
}
|
||
}, [addSystemMessage]);
|
||
|
||
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);
|
||
// Load history
|
||
try {
|
||
const hist = await api(`/history?target=${encodeURIComponent(name)}&limit=50`);
|
||
if (Array.isArray(hist)) {
|
||
for (const m of hist) processMessage(m);
|
||
}
|
||
} catch (e) {
|
||
// History may be empty
|
||
}
|
||
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 (e) {
|
||
// Ignore
|
||
}
|
||
setTabs(prev => prev.filter(t => !(t.type === 'channel' && t.name === name)));
|
||
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 }];
|
||
});
|
||
const idx = tabs.findIndex(t => t.type === 'dm' && t.name === targetNick);
|
||
setActiveTab(idx >= 0 ? idx : tabs.length);
|
||
};
|
||
|
||
const sendMessage = async () => {
|
||
const text = input.trim();
|
||
if (!text) return;
|
||
setInput('');
|
||
const tab = tabs[activeTab];
|
||
if (!tab || tab.type === 'server') return;
|
||
|
||
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 body = parts.slice(2).join(' ');
|
||
try {
|
||
await api('/messages', { method: 'POST', body: JSON.stringify({ command: 'PRIVMSG', to: target, body: [body] }) });
|
||
openDM(target);
|
||
} catch (err) {
|
||
addSystemMessage('Server', `DM failed: ${err.data?.error || 'error'}`);
|
||
}
|
||
return;
|
||
}
|
||
if (cmd === '/nick' && parts[1]) {
|
||
try {
|
||
await api('/messages', { method: 'POST', body: JSON.stringify({ command: 'NICK', body: [parts[1]] }) });
|
||
} catch (err) {
|
||
addSystemMessage('Server', `Nick change failed: ${err.data?.error || 'error'}`);
|
||
}
|
||
return;
|
||
}
|
||
if (cmd === '/topic' && tab.type === 'channel') {
|
||
const topicText = parts.slice(1).join(' ');
|
||
try {
|
||
await api('/messages', { method: 'POST', body: JSON.stringify({ command: 'TOPIC', to: tab.name, body: [topicText] }) });
|
||
} catch (err) {
|
||
addSystemMessage('Server', `Topic failed: ${err.data?.error || 'error'}`);
|
||
}
|
||
return;
|
||
}
|
||
addSystemMessage('Server', `Unknown command: ${cmd}`);
|
||
return;
|
||
}
|
||
|
||
try {
|
||
await api('/messages', { method: 'POST', body: JSON.stringify({ command: 'PRIVMSG', to: tab.name, 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] || [];
|
||
const currentTopic = topics[currentTab.name] || '';
|
||
|
||
return (
|
||
<div class="app">
|
||
<div class="tab-bar">
|
||
{!connected && <div class="connection-status">⚠ Reconnecting...</div>}
|
||
{tabs.map((tab, i) => (
|
||
<div
|
||
class={`tab ${i === activeTab ? 'active' : ''}`}
|
||
onClick={() => setActiveTab(i)}
|
||
>
|
||
{tab.type === 'dm' ? `→${tab.name}` : tab.name}
|
||
{unread[tab.name] > 0 && i !== activeTab && (
|
||
<span class="unread-badge">{unread[tab.name]}</span>
|
||
)}
|
||
{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>
|
||
|
||
{currentTab.type === 'channel' && currentTopic && (
|
||
<div class="topic-bar" title={currentTopic}>{currentTopic}</div>
|
||
)}
|
||
|
||
<div class="content">
|
||
<div class="messages-pane">
|
||
<div class={currentTab.type === 'server' ? 'server-messages' : 'messages'}>
|
||
{currentMessages.map(m => <Message msg={m} />)}
|
||
<div ref={messagesEndRef} />
|
||
</div>
|
||
{currentTab.type !== 'server' && (
|
||
<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'));
|