372 lines
12 KiB
JavaScript
372 lines
12 KiB
JavaScript
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'));
|