This commit was merged in pull request #8.
This commit is contained in:
371
web/src/app.jsx
Normal file
371
web/src/app.jsx
Normal file
@@ -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'));
|
||||
Reference in New Issue
Block a user