Compare commits
1 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
8473520eb3 |
4
web/dist/app.js
vendored
4
web/dist/app.js
vendored
File diff suppressed because one or more lines are too long
318
web/dist/style.css
vendored
318
web/dist/style.css
vendored
@@ -1,28 +1,40 @@
|
||||
* { 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;
|
||||
--topic-bg: #121a30;
|
||||
--unread-bg: #e94560;
|
||||
--warn: #f0ad4e;
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html, body, #root {
|
||||
:root {
|
||||
--bg: #0a0e14;
|
||||
--bg-secondary: #0d1117;
|
||||
--bg-input: #161b22;
|
||||
--bg-highlight: #1a2030;
|
||||
--text: #c9d1d9;
|
||||
--text-muted: #6e7681;
|
||||
--accent: #58a6ff;
|
||||
--accent-dim: #1f6feb;
|
||||
--border: #21262d;
|
||||
--nick: #79c0ff;
|
||||
--timestamp: #484f58;
|
||||
--tab-active: #58a6ff;
|
||||
--tab-bg: #0d1117;
|
||||
--tab-hover: #161b22;
|
||||
--topic-bg: #0d1117;
|
||||
--unread-bg: #da3633;
|
||||
--warn: #d29922;
|
||||
--op-color: #f0883e;
|
||||
--voice-color: #3fb950;
|
||||
--action-color: #bc8cff;
|
||||
--system-color: #484f58;
|
||||
}
|
||||
|
||||
html,
|
||||
body,
|
||||
#root {
|
||||
height: 100%;
|
||||
font-family: 'Courier New', Courier, monospace;
|
||||
font-size: 14px;
|
||||
font-family: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'Courier New',
|
||||
Courier, monospace;
|
||||
font-size: 13px;
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
}
|
||||
@@ -57,15 +69,19 @@ html, body, #root {
|
||||
padding: 10px 24px;
|
||||
font-size: 16px;
|
||||
font-family: inherit;
|
||||
background: var(--accent);
|
||||
background: var(--accent-dim);
|
||||
border: none;
|
||||
color: white;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.login-screen button:hover {
|
||||
background: var(--accent);
|
||||
}
|
||||
|
||||
.login-screen .error {
|
||||
color: var(--accent);
|
||||
color: var(--unread-bg);
|
||||
}
|
||||
|
||||
.login-screen .motd {
|
||||
@@ -89,36 +105,63 @@ html, body, #root {
|
||||
border-bottom: 1px solid var(--border);
|
||||
overflow-x: auto;
|
||||
flex-shrink: 0;
|
||||
align-items: center;
|
||||
align-items: stretch;
|
||||
min-height: 32px;
|
||||
}
|
||||
|
||||
.tab-bar::-webkit-scrollbar {
|
||||
height: 2px;
|
||||
}
|
||||
|
||||
.tab-bar::-webkit-scrollbar-thumb {
|
||||
background: var(--border);
|
||||
}
|
||||
|
||||
.tab {
|
||||
padding: 8px 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 6px 12px;
|
||||
cursor: pointer;
|
||||
border-bottom: 2px solid transparent;
|
||||
white-space: nowrap;
|
||||
color: var(--text-muted);
|
||||
user-select: none;
|
||||
position: relative;
|
||||
font-size: 12px;
|
||||
gap: 6px;
|
||||
transition:
|
||||
background 0.1s,
|
||||
color 0.1s;
|
||||
}
|
||||
|
||||
.tab:hover {
|
||||
background: var(--tab-hover);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.tab.active {
|
||||
color: var(--text);
|
||||
border-bottom-color: var(--tab-active);
|
||||
background: var(--bg-highlight);
|
||||
}
|
||||
|
||||
.tab.server {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.tab .tab-name {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.tab .close-btn {
|
||||
margin-left: 8px;
|
||||
color: var(--text-muted);
|
||||
font-size: 12px;
|
||||
font-size: 14px;
|
||||
line-height: 1;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.tab .close-btn:hover {
|
||||
color: var(--accent);
|
||||
color: var(--unread-bg);
|
||||
}
|
||||
|
||||
.tab .unread-badge {
|
||||
@@ -127,19 +170,22 @@ html, body, #root {
|
||||
color: white;
|
||||
font-size: 10px;
|
||||
font-weight: bold;
|
||||
padding: 1px 5px;
|
||||
padding: 0 5px;
|
||||
border-radius: 8px;
|
||||
margin-left: 6px;
|
||||
min-width: 16px;
|
||||
text-align: center;
|
||||
line-height: 16px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* Connection status */
|
||||
.connection-status {
|
||||
padding: 4px 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 12px;
|
||||
background: var(--warn);
|
||||
color: #1a1a2e;
|
||||
font-size: 12px;
|
||||
color: var(--bg);
|
||||
font-size: 11px;
|
||||
font-weight: bold;
|
||||
white-space: nowrap;
|
||||
flex-shrink: 0;
|
||||
@@ -147,7 +193,7 @@ html, body, #root {
|
||||
|
||||
/* Topic bar */
|
||||
.topic-bar {
|
||||
padding: 6px 12px;
|
||||
padding: 4px 12px;
|
||||
background: var(--topic-bg);
|
||||
border-bottom: 1px solid var(--border);
|
||||
color: var(--text-muted);
|
||||
@@ -158,6 +204,11 @@ html, body, #root {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.topic-bar .topic-label {
|
||||
color: var(--accent);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* Content area */
|
||||
.content {
|
||||
display: flex;
|
||||
@@ -171,147 +222,210 @@ html, body, #root {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.messages {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 8px 12px;
|
||||
padding: 4px 0;
|
||||
}
|
||||
|
||||
.messages::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
.messages::-webkit-scrollbar-thumb {
|
||||
background: var(--border);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.message {
|
||||
padding: 2px 0;
|
||||
line-height: 1.4;
|
||||
padding: 1px 12px;
|
||||
line-height: 1.5;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.message:hover {
|
||||
background: var(--bg-highlight);
|
||||
}
|
||||
|
||||
.message .timestamp {
|
||||
color: var(--timestamp);
|
||||
font-size: 12px;
|
||||
margin-right: 8px;
|
||||
font-size: 11px;
|
||||
margin-right: 6px;
|
||||
}
|
||||
|
||||
.message .nick {
|
||||
color: var(--nick);
|
||||
font-weight: bold;
|
||||
margin-right: 8px;
|
||||
margin-right: 6px;
|
||||
}
|
||||
|
||||
.message .nick::before { content: '<'; }
|
||||
.message .nick::after { content: '>'; }
|
||||
.message .nick::before {
|
||||
content: '<';
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.message .nick::after {
|
||||
content: '>';
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.message.system {
|
||||
color: var(--text-muted);
|
||||
color: var(--system-color);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.message.system .nick {
|
||||
color: var(--text-muted);
|
||||
.message.system .timestamp {
|
||||
color: var(--timestamp);
|
||||
}
|
||||
|
||||
.message.system .nick::before,
|
||||
.message.system .nick::after { content: ''; }
|
||||
.message.system .content::before {
|
||||
content: '*** ';
|
||||
}
|
||||
|
||||
/* Input */
|
||||
.message.action {
|
||||
color: var(--action-color);
|
||||
}
|
||||
|
||||
.message.action .timestamp {
|
||||
color: var(--timestamp);
|
||||
}
|
||||
|
||||
.message.action .action-nick {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* Input bar — full width at bottom */
|
||||
.input-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-top: 1px solid var(--border);
|
||||
background: var(--bg-secondary);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.input-bar .input-nick {
|
||||
padding: 0 8px 0 12px;
|
||||
color: var(--accent);
|
||||
font-weight: bold;
|
||||
white-space: nowrap;
|
||||
flex-shrink: 0;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.input-bar .input-nick::after {
|
||||
content: '>';
|
||||
color: var(--text-muted);
|
||||
margin-left: 1px;
|
||||
}
|
||||
|
||||
.input-bar input {
|
||||
flex: 1;
|
||||
padding: 10px 12px;
|
||||
padding: 8px 8px;
|
||||
font-family: inherit;
|
||||
font-size: 14px;
|
||||
background: var(--bg-input);
|
||||
font-size: 13px;
|
||||
background: transparent;
|
||||
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;
|
||||
.input-bar input::placeholder {
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
/* User list */
|
||||
.user-list {
|
||||
width: 160px;
|
||||
width: 170px;
|
||||
background: var(--bg-secondary);
|
||||
border-left: 1px solid var(--border);
|
||||
overflow-y: auto;
|
||||
padding: 8px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.user-list h3 {
|
||||
.user-list-header {
|
||||
padding: 6px 10px;
|
||||
color: var(--text-muted);
|
||||
font-size: 11px;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 8px;
|
||||
letter-spacing: 1px;
|
||||
letter-spacing: 0.5px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
font-weight: bold;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.user-list-entries {
|
||||
overflow-y: auto;
|
||||
flex: 1;
|
||||
padding: 4px 0;
|
||||
}
|
||||
|
||||
.user-list-entries::-webkit-scrollbar {
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.user-list-entries::-webkit-scrollbar-thumb {
|
||||
background: var(--border);
|
||||
}
|
||||
|
||||
.user-list .user {
|
||||
padding: 3px 4px;
|
||||
color: var(--nick);
|
||||
font-size: 13px;
|
||||
padding: 2px 10px;
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.user-list .user:hover {
|
||||
background: var(--tab-hover);
|
||||
}
|
||||
|
||||
/* Server tab */
|
||||
.user-list .user.op {
|
||||
color: var(--op-color);
|
||||
}
|
||||
|
||||
.user-list .user.voice {
|
||||
color: var(--voice-color);
|
||||
}
|
||||
|
||||
/* Server tab messages */
|
||||
.server-messages {
|
||||
color: var(--text-muted);
|
||||
padding: 12px;
|
||||
padding: 8px 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);
|
||||
margin-left: auto;
|
||||
.server-messages .message {
|
||||
padding: 1px 0;
|
||||
}
|
||||
|
||||
.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;
|
||||
.server-messages .message:hover {
|
||||
background: var(--bg-highlight);
|
||||
}
|
||||
|
||||
/* Responsive */
|
||||
@media (max-width: 600px) {
|
||||
.user-list { display: none; }
|
||||
.tab { padding: 6px 10px; font-size: 13px; }
|
||||
.user-list {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.tab {
|
||||
padding: 5px 8px;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.input-bar .input-nick {
|
||||
padding-left: 8px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.input-bar input {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
688
web/src/app.jsx
688
web/src/app.jsx
@@ -5,13 +5,17 @@ const API = '/api/v1';
|
||||
const POLL_TIMEOUT = 15;
|
||||
const RECONNECT_DELAY = 3000;
|
||||
const MEMBER_REFRESH_INTERVAL = 10000;
|
||||
const MAX_HISTORY = 100;
|
||||
|
||||
function api(path, opts = {}) {
|
||||
const token = localStorage.getItem('neoirc_token');
|
||||
const headers = { 'Content-Type': 'application/json', ...(opts.headers || {}) };
|
||||
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 => {
|
||||
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;
|
||||
@@ -20,12 +24,17 @@ function api(path, opts = {}) {
|
||||
|
||||
function formatTime(ts) {
|
||||
const d = new Date(ts);
|
||||
return d.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', second: '2-digit' });
|
||||
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);
|
||||
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%)`;
|
||||
}
|
||||
@@ -38,13 +47,17 @@ function LoginScreen({ onLogin }) {
|
||||
const inputRef = useRef();
|
||||
|
||||
useEffect(() => {
|
||||
api('/server').then(s => {
|
||||
api('/server')
|
||||
.then((s) => {
|
||||
if (s.name) setServerName(s.name);
|
||||
if (s.motd) setMotd(s.motd);
|
||||
}).catch(() => {});
|
||||
})
|
||||
.catch(() => {});
|
||||
const saved = localStorage.getItem('neoirc_token');
|
||||
if (saved) {
|
||||
api('/state').then(u => onLogin(u.nick)).catch(() => localStorage.removeItem('neoirc_token'));
|
||||
api('/state')
|
||||
.then((u) => onLogin(u.nick))
|
||||
.catch(() => localStorage.removeItem('neoirc_token'));
|
||||
}
|
||||
inputRef.current?.focus();
|
||||
}, []);
|
||||
@@ -55,7 +68,7 @@ function LoginScreen({ onLogin }) {
|
||||
try {
|
||||
const res = await api('/session', {
|
||||
method: 'POST',
|
||||
body: JSON.stringify({ nick: nick.trim() })
|
||||
body: JSON.stringify({ nick: nick.trim() }),
|
||||
});
|
||||
localStorage.setItem('neoirc_token', res.token);
|
||||
onLogin(res.nick);
|
||||
@@ -74,7 +87,7 @@ function LoginScreen({ onLogin }) {
|
||||
type="text"
|
||||
placeholder="Choose a nickname..."
|
||||
value={nick}
|
||||
onInput={e => setNick(e.target.value)}
|
||||
onInput={(e) => setNick(e.target.value)}
|
||||
maxLength={32}
|
||||
autoFocus
|
||||
/>
|
||||
@@ -94,15 +107,64 @@ function Message({ msg }) {
|
||||
</div>
|
||||
);
|
||||
}
|
||||
if (msg.action) {
|
||||
return (
|
||||
<div class="message action">
|
||||
<span class="timestamp">{formatTime(msg.ts)}</span>
|
||||
<span class="content">
|
||||
{'* '}
|
||||
<span class="action-nick" style={{ color: nickColor(msg.from) }}>
|
||||
{msg.from}
|
||||
</span>{' '}
|
||||
{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="nick" style={{ color: nickColor(msg.from) }}>
|
||||
{msg.from}
|
||||
</span>
|
||||
<span class="content">{msg.text}</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function UserList({ members, userModes, onDM }) {
|
||||
const sorted = [...members].sort((a, b) => {
|
||||
const modeA = userModes[a.nick] || '';
|
||||
const modeB = userModes[b.nick] || '';
|
||||
const rankA = modeA === 'o' ? 0 : modeA === 'v' ? 1 : 2;
|
||||
const rankB = modeB === 'o' ? 0 : modeB === 'v' ? 1 : 2;
|
||||
if (rankA !== rankB) return rankA - rankB;
|
||||
return a.nick.localeCompare(b.nick);
|
||||
});
|
||||
|
||||
return (
|
||||
<div class="user-list">
|
||||
<div class="user-list-header">Users ({members.length})</div>
|
||||
<div class="user-list-entries">
|
||||
{sorted.map((u) => {
|
||||
const mode = userModes[u.nick] || '';
|
||||
const prefix = mode === 'o' ? '@' : mode === 'v' ? '+' : '';
|
||||
return (
|
||||
<div
|
||||
class={`user ${mode === 'o' ? 'op' : mode === 'v' ? 'voice' : ''}`}
|
||||
onClick={() => onDM(u.nick)}
|
||||
title={u.nick}
|
||||
>
|
||||
{prefix}
|
||||
{u.nick}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function App() {
|
||||
const [loggedIn, setLoggedIn] = useState(false);
|
||||
const [nick, setNick] = useState('');
|
||||
@@ -110,11 +172,13 @@ function App() {
|
||||
const [activeTab, setActiveTab] = useState(0);
|
||||
const [messages, setMessages] = useState({ Server: [] });
|
||||
const [members, setMembers] = useState({});
|
||||
const [userModes, setUserModes] = useState({});
|
||||
const [topics, setTopics] = useState({});
|
||||
const [unread, setUnread] = useState({});
|
||||
const [input, setInput] = useState('');
|
||||
const [joinInput, setJoinInput] = useState('');
|
||||
const [connected, setConnected] = useState(true);
|
||||
const [cmdHistory, setCmdHistory] = useState([]);
|
||||
const [historyIdx, setHistoryIdx] = useState(-1);
|
||||
|
||||
const lastIdRef = useRef(0);
|
||||
const seenIdsRef = useRef(new Set());
|
||||
@@ -125,69 +189,115 @@ function App() {
|
||||
const messagesEndRef = useRef();
|
||||
const inputRef = useRef();
|
||||
|
||||
useEffect(() => { tabsRef.current = tabs; }, [tabs]);
|
||||
useEffect(() => { activeTabRef.current = activeTab; }, [activeTab]);
|
||||
useEffect(() => { nickRef.current = nick; }, [nick]);
|
||||
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);
|
||||
const channels = tabs.filter((t) => t.type === 'channel').map((t) => t.name);
|
||||
localStorage.setItem('neoirc_channels', JSON.stringify(channels));
|
||||
}, [tabs]);
|
||||
|
||||
// Clear unread on tab switch
|
||||
useEffect(() => {
|
||||
const tab = tabs[activeTab];
|
||||
if (tab) setUnread(prev => ({ ...prev, [tab.name]: 0 }));
|
||||
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 => ({
|
||||
setMessages((prev) => ({
|
||||
...prev,
|
||||
[tabName]: [...(prev[tabName] || []), msg]
|
||||
[tabName]: [...(prev[tabName] || []), msg],
|
||||
}));
|
||||
const currentTab = tabsRef.current[activeTabRef.current];
|
||||
if (!currentTab || currentTab.name !== tabName) {
|
||||
setUnread(prev => ({ ...prev, [tabName]: (prev[tabName] || 0) + 1 }));
|
||||
setUnread((prev) => ({
|
||||
...prev,
|
||||
[tabName]: (prev[tabName] || 0) + 1,
|
||||
}));
|
||||
}
|
||||
}, []);
|
||||
|
||||
const addSystemMessage = useCallback((tabName, text) => {
|
||||
setMessages(prev => ({
|
||||
setMessages((prev) => ({
|
||||
...prev,
|
||||
[tabName]: [...(prev[tabName] || []), {
|
||||
[tabName]: [
|
||||
...(prev[tabName] || []),
|
||||
{
|
||||
id: 'sys-' + Date.now() + '-' + Math.random(),
|
||||
ts: new Date().toISOString(),
|
||||
text,
|
||||
system: true
|
||||
}]
|
||||
system: true,
|
||||
},
|
||||
],
|
||||
}));
|
||||
}, []);
|
||||
|
||||
const refreshMembers = useCallback((channel) => {
|
||||
const chName = channel.replace('#', '');
|
||||
api(`/channels/${chName}/members`).then(m => {
|
||||
setMembers(prev => ({ ...prev, [channel]: m }));
|
||||
}).catch(() => {});
|
||||
api(`/channels/${chName}/members`)
|
||||
.then((m) => {
|
||||
setMembers((prev) => ({ ...prev, [channel]: m }));
|
||||
})
|
||||
.catch(() => {});
|
||||
}, []);
|
||||
|
||||
const processMessage = useCallback((msg) => {
|
||||
const parseNamesReply = useCallback((channel, namesStr) => {
|
||||
// Parse 353 RPL_NAMREPLY body: "@op1 alice bob +voiced1"
|
||||
const nicks = namesStr.trim().split(/\s+/);
|
||||
const modes = {};
|
||||
for (const entry of nicks) {
|
||||
if (entry.startsWith('@')) {
|
||||
modes[entry.slice(1)] = 'o';
|
||||
} else if (entry.startsWith('+')) {
|
||||
modes[entry.slice(1)] = 'v';
|
||||
}
|
||||
// plain nicks have no mode entry
|
||||
}
|
||||
setUserModes((prev) => ({
|
||||
...prev,
|
||||
[channel]: { ...(prev[channel] || {}), ...modes },
|
||||
}));
|
||||
}, []);
|
||||
|
||||
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 };
|
||||
const base = {
|
||||
id: msg.id,
|
||||
ts: msg.ts,
|
||||
from: msg.from,
|
||||
to: msg.to,
|
||||
command: msg.command,
|
||||
};
|
||||
const isAction = msg.meta && msg.meta.action;
|
||||
|
||||
switch (msg.command) {
|
||||
case 'PRIVMSG':
|
||||
case 'NOTICE': {
|
||||
const parsed = { ...base, text: body, system: false };
|
||||
const parsed = {
|
||||
...base,
|
||||
text: body,
|
||||
system: false,
|
||||
action: isAction,
|
||||
};
|
||||
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)) {
|
||||
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;
|
||||
@@ -198,21 +308,23 @@ function App() {
|
||||
}
|
||||
case 'JOIN': {
|
||||
const text = `${msg.from} has joined ${msg.to}`;
|
||||
if (msg.to) addMessage(msg.to, { ...base, text, system: true });
|
||||
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 });
|
||||
const text = `${msg.from} has parted ${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 => {
|
||||
tabsRef.current.forEach((tab) => {
|
||||
if (tab.type === 'channel') {
|
||||
addMessage(tab.name, { ...base, text, system: true });
|
||||
}
|
||||
@@ -222,14 +334,13 @@ function App() {
|
||||
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 => {
|
||||
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 => {
|
||||
tabsRef.current.forEach((tab) => {
|
||||
if (tab.type === 'channel') refreshMembers(tab.name);
|
||||
});
|
||||
break;
|
||||
@@ -238,19 +349,50 @@ function App() {
|
||||
const text = `${msg.from} set the topic: ${body}`;
|
||||
if (msg.to) {
|
||||
addMessage(msg.to, { ...base, text, system: true });
|
||||
setTopics(prev => ({ ...prev, [msg.to]: body }));
|
||||
setTopics((prev) => ({ ...prev, [msg.to]: body }));
|
||||
}
|
||||
break;
|
||||
}
|
||||
case '332': {
|
||||
// RPL_TOPIC — channel topic on join
|
||||
const channel =
|
||||
Array.isArray(msg.params) && msg.params.length > 0
|
||||
? msg.params[0]
|
||||
: msg.to;
|
||||
if (channel) {
|
||||
setTopics((prev) => ({ ...prev, [channel]: body }));
|
||||
}
|
||||
break;
|
||||
}
|
||||
case '353': {
|
||||
// RPL_NAMREPLY — parse user modes from names list
|
||||
const channel =
|
||||
Array.isArray(msg.params) && msg.params.length > 1
|
||||
? msg.params[1]
|
||||
: msg.to;
|
||||
if (channel && body) {
|
||||
parseNamesReply(channel, body);
|
||||
}
|
||||
break;
|
||||
}
|
||||
case '366':
|
||||
// RPL_ENDOFNAMES — ignore
|
||||
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('Server', {
|
||||
...base,
|
||||
text: body || msg.command,
|
||||
system: true,
|
||||
});
|
||||
}
|
||||
}, [addMessage, refreshMembers]);
|
||||
},
|
||||
[addMessage, refreshMembers, parseNamesReply],
|
||||
);
|
||||
|
||||
// Long-poll loop
|
||||
useEffect(() => {
|
||||
@@ -264,7 +406,7 @@ function App() {
|
||||
pollAbortRef.current = controller;
|
||||
const result = await api(
|
||||
`/messages?after=${lastIdRef.current}&timeout=${POLL_TIMEOUT}`,
|
||||
{ signal: controller.signal }
|
||||
{ signal: controller.signal },
|
||||
);
|
||||
if (!alive) break;
|
||||
setConnected(true);
|
||||
@@ -278,13 +420,16 @@ function App() {
|
||||
if (!alive) break;
|
||||
if (err.name === 'AbortError') continue;
|
||||
setConnected(false);
|
||||
await new Promise(r => setTimeout(r, RECONNECT_DELAY));
|
||||
await new Promise((r) => setTimeout(r, RECONNECT_DELAY));
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
poll();
|
||||
return () => { alive = false; pollAbortRef.current?.abort(); };
|
||||
return () => {
|
||||
alive = false;
|
||||
pollAbortRef.current?.abort();
|
||||
};
|
||||
}, [loggedIn, processMessage]);
|
||||
|
||||
// Refresh members for active channel
|
||||
@@ -293,7 +438,10 @@ function App() {
|
||||
const tab = tabs[activeTab];
|
||||
if (!tab || tab.type !== 'channel') return;
|
||||
refreshMembers(tab.name);
|
||||
const iv = setInterval(() => refreshMembers(tab.name), MEMBER_REFRESH_INTERVAL);
|
||||
const iv = setInterval(
|
||||
() => refreshMembers(tab.name),
|
||||
MEMBER_REFRESH_INTERVAL,
|
||||
);
|
||||
return () => clearInterval(iv);
|
||||
}, [loggedIn, activeTab, tabs, refreshMembers]);
|
||||
|
||||
@@ -303,71 +451,100 @@ function App() {
|
||||
}, [messages, activeTab]);
|
||||
|
||||
// Focus input on tab change
|
||||
useEffect(() => { inputRef.current?.focus(); }, [activeTab]);
|
||||
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(() => {});
|
||||
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) => {
|
||||
const onLogin = useCallback(
|
||||
async (userNick) => {
|
||||
setNick(userNick);
|
||||
setLoggedIn(true);
|
||||
addSystemMessage('Server', `Connected as ${userNick}`);
|
||||
// Auto-rejoin saved channels
|
||||
const saved = JSON.parse(localStorage.getItem('neoirc_channels') || '[]');
|
||||
const saved = JSON.parse(
|
||||
localStorage.getItem('neoirc_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;
|
||||
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]);
|
||||
},
|
||||
[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;
|
||||
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`);
|
||||
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'}`);
|
||||
addSystemMessage(
|
||||
'Server',
|
||||
`Failed to join ${name}: ${err.data?.error || 'error'}`,
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
const partChannel = async (name) => {
|
||||
const partChannel = async (name, reason) => {
|
||||
try {
|
||||
await api('/messages', { method: 'POST', body: JSON.stringify({ command: 'PART', to: name }) });
|
||||
const payload = { command: 'PART', to: name };
|
||||
if (reason) payload.body = [reason];
|
||||
await api('/messages', {
|
||||
method: 'POST',
|
||||
body: JSON.stringify(payload),
|
||||
});
|
||||
} catch (e) {
|
||||
// Ignore
|
||||
}
|
||||
setTabs(prev => prev.filter(t => !(t.type === 'channel' && t.name === name)));
|
||||
setTabs((prev) =>
|
||||
prev.filter((t) => !(t.type === 'channel' && t.name === name)),
|
||||
);
|
||||
setActiveTab(0);
|
||||
};
|
||||
|
||||
@@ -376,68 +553,284 @@ function App() {
|
||||
if (tab.type === 'channel') {
|
||||
partChannel(tab.name);
|
||||
} else if (tab.type === 'dm') {
|
||||
setTabs(prev => prev.filter((_, i) => i !== idx));
|
||||
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;
|
||||
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);
|
||||
const idx = tabs.findIndex(
|
||||
(t) => t.type === 'dm' && t.name === targetNick,
|
||||
);
|
||||
setActiveTab(idx >= 0 ? idx : tabs.length);
|
||||
};
|
||||
|
||||
const handleCommand = async (text) => {
|
||||
const parts = text.split(' ');
|
||||
const cmd = parts[0].toLowerCase();
|
||||
const tab = tabs[activeTab];
|
||||
|
||||
switch (cmd) {
|
||||
case '/join':
|
||||
if (parts[1]) joinChannel(parts[1]);
|
||||
else
|
||||
addSystemMessage(
|
||||
tab?.name || 'Server',
|
||||
'Usage: /join #channel',
|
||||
);
|
||||
break;
|
||||
|
||||
case '/part': {
|
||||
if (tab?.type === 'channel') {
|
||||
const reason = parts.slice(1).join(' ') || '';
|
||||
partChannel(tab.name, reason);
|
||||
} else {
|
||||
addSystemMessage(
|
||||
tab?.name || 'Server',
|
||||
'Not in a channel',
|
||||
);
|
||||
}
|
||||
break;
|
||||
}
|
||||
|
||||
case '/msg':
|
||||
if (parts[1] && parts.slice(2).join(' ')) {
|
||||
const target = parts[1];
|
||||
const msgBody = parts.slice(2).join(' ');
|
||||
try {
|
||||
await api('/messages', {
|
||||
method: 'POST',
|
||||
body: JSON.stringify({
|
||||
command: 'PRIVMSG',
|
||||
to: target,
|
||||
body: [msgBody],
|
||||
}),
|
||||
});
|
||||
openDM(target);
|
||||
} catch (err) {
|
||||
addSystemMessage(
|
||||
'Server',
|
||||
`DM failed: ${err.data?.error || 'error'}`,
|
||||
);
|
||||
}
|
||||
} else {
|
||||
addSystemMessage(
|
||||
tab?.name || 'Server',
|
||||
'Usage: /msg <nick> <message>',
|
||||
);
|
||||
}
|
||||
break;
|
||||
|
||||
case '/me':
|
||||
if (tab && tab.type !== 'server') {
|
||||
const actionText = parts.slice(1).join(' ');
|
||||
if (actionText) {
|
||||
try {
|
||||
await api('/messages', {
|
||||
method: 'POST',
|
||||
body: JSON.stringify({
|
||||
command: 'PRIVMSG',
|
||||
to: tab.name,
|
||||
body: [actionText],
|
||||
meta: { action: true },
|
||||
}),
|
||||
});
|
||||
} catch (err) {
|
||||
addSystemMessage(
|
||||
tab.name,
|
||||
`Action failed: ${err.data?.error || 'error'}`,
|
||||
);
|
||||
}
|
||||
} else {
|
||||
addSystemMessage(tab.name, 'Usage: /me <action>');
|
||||
}
|
||||
}
|
||||
break;
|
||||
|
||||
case '/nick':
|
||||
if (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'}`,
|
||||
);
|
||||
}
|
||||
} else {
|
||||
addSystemMessage(
|
||||
tab?.name || 'Server',
|
||||
'Usage: /nick <newnick>',
|
||||
);
|
||||
}
|
||||
break;
|
||||
|
||||
case '/topic':
|
||||
if (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(
|
||||
tab.name,
|
||||
`Topic failed: ${err.data?.error || 'error'}`,
|
||||
);
|
||||
}
|
||||
} else {
|
||||
addSystemMessage(
|
||||
tab?.name || 'Server',
|
||||
'Not in a channel',
|
||||
);
|
||||
}
|
||||
break;
|
||||
|
||||
case '/mode':
|
||||
if (tab?.type === 'channel' && parts.length >= 2) {
|
||||
const modeTarget = parts[1].startsWith('#')
|
||||
? parts[1]
|
||||
: tab.name;
|
||||
const modeParams = parts[1].startsWith('#')
|
||||
? parts.slice(2)
|
||||
: parts.slice(1);
|
||||
try {
|
||||
await api('/messages', {
|
||||
method: 'POST',
|
||||
body: JSON.stringify({
|
||||
command: 'MODE',
|
||||
to: modeTarget,
|
||||
params: modeParams,
|
||||
}),
|
||||
});
|
||||
} catch (err) {
|
||||
addSystemMessage(
|
||||
tab.name,
|
||||
`Mode failed: ${err.data?.error || 'error'}`,
|
||||
);
|
||||
}
|
||||
} else {
|
||||
addSystemMessage(
|
||||
tab?.name || 'Server',
|
||||
'Usage: /mode [#channel] <+/-mode> [nick]',
|
||||
);
|
||||
}
|
||||
break;
|
||||
|
||||
case '/quit': {
|
||||
const quitMsg = parts.slice(1).join(' ');
|
||||
try {
|
||||
const payload = { command: 'QUIT' };
|
||||
if (quitMsg) payload.body = [quitMsg];
|
||||
await api('/messages', {
|
||||
method: 'POST',
|
||||
body: JSON.stringify(payload),
|
||||
});
|
||||
} catch (e) {
|
||||
// Ignore
|
||||
}
|
||||
localStorage.removeItem('neoirc_token');
|
||||
window.location.reload();
|
||||
break;
|
||||
}
|
||||
|
||||
case '/help':
|
||||
addSystemMessage(
|
||||
tab?.name || 'Server',
|
||||
'Commands: /join #channel, /part [reason], /msg nick message, ' +
|
||||
'/me action, /nick newnick, /topic text, /mode [#channel] +/-mode [nick], ' +
|
||||
'/quit [reason], /help',
|
||||
);
|
||||
break;
|
||||
|
||||
default:
|
||||
addSystemMessage(
|
||||
tab?.name || 'Server',
|
||||
`Unknown command: ${cmd} — Type /help for available commands`,
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
const sendMessage = async () => {
|
||||
const text = input.trim();
|
||||
if (!text) return;
|
||||
|
||||
// Add to command history
|
||||
setCmdHistory((prev) => {
|
||||
const next = [text, ...prev];
|
||||
return next.slice(0, MAX_HISTORY);
|
||||
});
|
||||
setHistoryIdx(-1);
|
||||
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'}`);
|
||||
}
|
||||
await handleCommand(text);
|
||||
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}`);
|
||||
|
||||
if (!tab || tab.type === 'server') {
|
||||
addSystemMessage(
|
||||
'Server',
|
||||
'Cannot send messages to the server tab. Join a channel with /join #channel',
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
await api('/messages', { method: 'POST', body: JSON.stringify({ command: 'PRIVMSG', to: tab.name, body: [text] }) });
|
||||
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'}`);
|
||||
addSystemMessage(
|
||||
tab.name,
|
||||
`Send failed: ${err.data?.error || 'error'}`,
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
const handleInputKeyDown = (e) => {
|
||||
if (e.key === 'Enter') {
|
||||
sendMessage();
|
||||
} else if (e.key === 'ArrowUp') {
|
||||
e.preventDefault();
|
||||
if (cmdHistory.length > 0) {
|
||||
const nextIdx = Math.min(historyIdx + 1, cmdHistory.length - 1);
|
||||
setHistoryIdx(nextIdx);
|
||||
setInput(cmdHistory[nextIdx]);
|
||||
}
|
||||
} else if (e.key === 'ArrowDown') {
|
||||
e.preventDefault();
|
||||
if (historyIdx > 0) {
|
||||
const nextIdx = historyIdx - 1;
|
||||
setHistoryIdx(nextIdx);
|
||||
setInput(cmdHistory[nextIdx]);
|
||||
} else {
|
||||
setHistoryIdx(-1);
|
||||
setInput('');
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
@@ -446,72 +839,87 @@ function App() {
|
||||
const currentTab = tabs[activeTab] || tabs[0];
|
||||
const currentMessages = messages[currentTab.name] || [];
|
||||
const currentMembers = members[currentTab.name] || [];
|
||||
const currentUserModes = userModes[currentTab.name] || {};
|
||||
const currentTopic = topics[currentTab.name] || '';
|
||||
|
||||
return (
|
||||
<div class="app">
|
||||
<div class="tab-bar">
|
||||
{!connected && <div class="connection-status">⚠ Reconnecting...</div>}
|
||||
{!connected && (
|
||||
<div class="connection-status">⚠ Reconnecting...</div>
|
||||
)}
|
||||
{tabs.map((tab, i) => (
|
||||
<div
|
||||
class={`tab ${i === activeTab ? 'active' : ''}`}
|
||||
class={`tab ${i === activeTab ? 'active' : ''} ${tab.type}`}
|
||||
onClick={() => setActiveTab(i)}
|
||||
>
|
||||
<span class="tab-name">
|
||||
{tab.type === 'dm' ? `→${tab.name}` : tab.name}
|
||||
</span>
|
||||
{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>
|
||||
<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>
|
||||
{currentTab.type === 'channel' && (
|
||||
<div class="topic-bar" title={currentTopic}>
|
||||
<span class="topic-label">Topic:</span>{' '}
|
||||
{currentTopic || '(no topic set)'}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div class="content">
|
||||
<div class="messages-pane">
|
||||
<div class={currentTab.type === 'server' ? 'server-messages' : 'messages'}>
|
||||
{currentMessages.map(m => <Message msg={m} />)}
|
||||
<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>
|
||||
<UserList
|
||||
members={currentMembers}
|
||||
userModes={currentUserModes}
|
||||
onDM={openDM}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div class="input-bar">
|
||||
<span class="input-nick">{nick}</span>
|
||||
<input
|
||||
ref={inputRef}
|
||||
placeholder={
|
||||
currentTab.type === 'server'
|
||||
? 'Type /join #channel to get started...'
|
||||
: `Message ${currentTab.name}...`
|
||||
}
|
||||
value={input}
|
||||
onInput={(e) => setInput(e.target.value)}
|
||||
onKeyDown={handleInputKeyDown}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,28 +1,40 @@
|
||||
* { 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;
|
||||
--topic-bg: #121a30;
|
||||
--unread-bg: #e94560;
|
||||
--warn: #f0ad4e;
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html, body, #root {
|
||||
:root {
|
||||
--bg: #0a0e14;
|
||||
--bg-secondary: #0d1117;
|
||||
--bg-input: #161b22;
|
||||
--bg-highlight: #1a2030;
|
||||
--text: #c9d1d9;
|
||||
--text-muted: #6e7681;
|
||||
--accent: #58a6ff;
|
||||
--accent-dim: #1f6feb;
|
||||
--border: #21262d;
|
||||
--nick: #79c0ff;
|
||||
--timestamp: #484f58;
|
||||
--tab-active: #58a6ff;
|
||||
--tab-bg: #0d1117;
|
||||
--tab-hover: #161b22;
|
||||
--topic-bg: #0d1117;
|
||||
--unread-bg: #da3633;
|
||||
--warn: #d29922;
|
||||
--op-color: #f0883e;
|
||||
--voice-color: #3fb950;
|
||||
--action-color: #bc8cff;
|
||||
--system-color: #484f58;
|
||||
}
|
||||
|
||||
html,
|
||||
body,
|
||||
#root {
|
||||
height: 100%;
|
||||
font-family: 'Courier New', Courier, monospace;
|
||||
font-size: 14px;
|
||||
font-family: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'Courier New',
|
||||
Courier, monospace;
|
||||
font-size: 13px;
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
}
|
||||
@@ -57,15 +69,19 @@ html, body, #root {
|
||||
padding: 10px 24px;
|
||||
font-size: 16px;
|
||||
font-family: inherit;
|
||||
background: var(--accent);
|
||||
background: var(--accent-dim);
|
||||
border: none;
|
||||
color: white;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.login-screen button:hover {
|
||||
background: var(--accent);
|
||||
}
|
||||
|
||||
.login-screen .error {
|
||||
color: var(--accent);
|
||||
color: var(--unread-bg);
|
||||
}
|
||||
|
||||
.login-screen .motd {
|
||||
@@ -89,36 +105,63 @@ html, body, #root {
|
||||
border-bottom: 1px solid var(--border);
|
||||
overflow-x: auto;
|
||||
flex-shrink: 0;
|
||||
align-items: center;
|
||||
align-items: stretch;
|
||||
min-height: 32px;
|
||||
}
|
||||
|
||||
.tab-bar::-webkit-scrollbar {
|
||||
height: 2px;
|
||||
}
|
||||
|
||||
.tab-bar::-webkit-scrollbar-thumb {
|
||||
background: var(--border);
|
||||
}
|
||||
|
||||
.tab {
|
||||
padding: 8px 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 6px 12px;
|
||||
cursor: pointer;
|
||||
border-bottom: 2px solid transparent;
|
||||
white-space: nowrap;
|
||||
color: var(--text-muted);
|
||||
user-select: none;
|
||||
position: relative;
|
||||
font-size: 12px;
|
||||
gap: 6px;
|
||||
transition:
|
||||
background 0.1s,
|
||||
color 0.1s;
|
||||
}
|
||||
|
||||
.tab:hover {
|
||||
background: var(--tab-hover);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.tab.active {
|
||||
color: var(--text);
|
||||
border-bottom-color: var(--tab-active);
|
||||
background: var(--bg-highlight);
|
||||
}
|
||||
|
||||
.tab.server {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.tab .tab-name {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.tab .close-btn {
|
||||
margin-left: 8px;
|
||||
color: var(--text-muted);
|
||||
font-size: 12px;
|
||||
font-size: 14px;
|
||||
line-height: 1;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.tab .close-btn:hover {
|
||||
color: var(--accent);
|
||||
color: var(--unread-bg);
|
||||
}
|
||||
|
||||
.tab .unread-badge {
|
||||
@@ -127,19 +170,22 @@ html, body, #root {
|
||||
color: white;
|
||||
font-size: 10px;
|
||||
font-weight: bold;
|
||||
padding: 1px 5px;
|
||||
padding: 0 5px;
|
||||
border-radius: 8px;
|
||||
margin-left: 6px;
|
||||
min-width: 16px;
|
||||
text-align: center;
|
||||
line-height: 16px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* Connection status */
|
||||
.connection-status {
|
||||
padding: 4px 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 12px;
|
||||
background: var(--warn);
|
||||
color: #1a1a2e;
|
||||
font-size: 12px;
|
||||
color: var(--bg);
|
||||
font-size: 11px;
|
||||
font-weight: bold;
|
||||
white-space: nowrap;
|
||||
flex-shrink: 0;
|
||||
@@ -147,7 +193,7 @@ html, body, #root {
|
||||
|
||||
/* Topic bar */
|
||||
.topic-bar {
|
||||
padding: 6px 12px;
|
||||
padding: 4px 12px;
|
||||
background: var(--topic-bg);
|
||||
border-bottom: 1px solid var(--border);
|
||||
color: var(--text-muted);
|
||||
@@ -158,6 +204,11 @@ html, body, #root {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.topic-bar .topic-label {
|
||||
color: var(--accent);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* Content area */
|
||||
.content {
|
||||
display: flex;
|
||||
@@ -171,147 +222,210 @@ html, body, #root {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.messages {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 8px 12px;
|
||||
padding: 4px 0;
|
||||
}
|
||||
|
||||
.messages::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
.messages::-webkit-scrollbar-thumb {
|
||||
background: var(--border);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.message {
|
||||
padding: 2px 0;
|
||||
line-height: 1.4;
|
||||
padding: 1px 12px;
|
||||
line-height: 1.5;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.message:hover {
|
||||
background: var(--bg-highlight);
|
||||
}
|
||||
|
||||
.message .timestamp {
|
||||
color: var(--timestamp);
|
||||
font-size: 12px;
|
||||
margin-right: 8px;
|
||||
font-size: 11px;
|
||||
margin-right: 6px;
|
||||
}
|
||||
|
||||
.message .nick {
|
||||
color: var(--nick);
|
||||
font-weight: bold;
|
||||
margin-right: 8px;
|
||||
margin-right: 6px;
|
||||
}
|
||||
|
||||
.message .nick::before { content: '<'; }
|
||||
.message .nick::after { content: '>'; }
|
||||
.message .nick::before {
|
||||
content: '<';
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.message .nick::after {
|
||||
content: '>';
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.message.system {
|
||||
color: var(--text-muted);
|
||||
color: var(--system-color);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.message.system .nick {
|
||||
color: var(--text-muted);
|
||||
.message.system .timestamp {
|
||||
color: var(--timestamp);
|
||||
}
|
||||
|
||||
.message.system .nick::before,
|
||||
.message.system .nick::after { content: ''; }
|
||||
.message.system .content::before {
|
||||
content: '*** ';
|
||||
}
|
||||
|
||||
/* Input */
|
||||
.message.action {
|
||||
color: var(--action-color);
|
||||
}
|
||||
|
||||
.message.action .timestamp {
|
||||
color: var(--timestamp);
|
||||
}
|
||||
|
||||
.message.action .action-nick {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* Input bar — full width at bottom */
|
||||
.input-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-top: 1px solid var(--border);
|
||||
background: var(--bg-secondary);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.input-bar .input-nick {
|
||||
padding: 0 8px 0 12px;
|
||||
color: var(--accent);
|
||||
font-weight: bold;
|
||||
white-space: nowrap;
|
||||
flex-shrink: 0;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.input-bar .input-nick::after {
|
||||
content: '>';
|
||||
color: var(--text-muted);
|
||||
margin-left: 1px;
|
||||
}
|
||||
|
||||
.input-bar input {
|
||||
flex: 1;
|
||||
padding: 10px 12px;
|
||||
padding: 8px 8px;
|
||||
font-family: inherit;
|
||||
font-size: 14px;
|
||||
background: var(--bg-input);
|
||||
font-size: 13px;
|
||||
background: transparent;
|
||||
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;
|
||||
.input-bar input::placeholder {
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
/* User list */
|
||||
.user-list {
|
||||
width: 160px;
|
||||
width: 170px;
|
||||
background: var(--bg-secondary);
|
||||
border-left: 1px solid var(--border);
|
||||
overflow-y: auto;
|
||||
padding: 8px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.user-list h3 {
|
||||
.user-list-header {
|
||||
padding: 6px 10px;
|
||||
color: var(--text-muted);
|
||||
font-size: 11px;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 8px;
|
||||
letter-spacing: 1px;
|
||||
letter-spacing: 0.5px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
font-weight: bold;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.user-list-entries {
|
||||
overflow-y: auto;
|
||||
flex: 1;
|
||||
padding: 4px 0;
|
||||
}
|
||||
|
||||
.user-list-entries::-webkit-scrollbar {
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.user-list-entries::-webkit-scrollbar-thumb {
|
||||
background: var(--border);
|
||||
}
|
||||
|
||||
.user-list .user {
|
||||
padding: 3px 4px;
|
||||
color: var(--nick);
|
||||
font-size: 13px;
|
||||
padding: 2px 10px;
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.user-list .user:hover {
|
||||
background: var(--tab-hover);
|
||||
}
|
||||
|
||||
/* Server tab */
|
||||
.user-list .user.op {
|
||||
color: var(--op-color);
|
||||
}
|
||||
|
||||
.user-list .user.voice {
|
||||
color: var(--voice-color);
|
||||
}
|
||||
|
||||
/* Server tab messages */
|
||||
.server-messages {
|
||||
color: var(--text-muted);
|
||||
padding: 12px;
|
||||
padding: 8px 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);
|
||||
margin-left: auto;
|
||||
.server-messages .message {
|
||||
padding: 1px 0;
|
||||
}
|
||||
|
||||
.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;
|
||||
.server-messages .message:hover {
|
||||
background: var(--bg-highlight);
|
||||
}
|
||||
|
||||
/* Responsive */
|
||||
@media (max-width: 600px) {
|
||||
.user-list { display: none; }
|
||||
.tab { padding: 6px 10px; font-size: 13px; }
|
||||
.user-list {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.tab {
|
||||
padding: 5px 8px;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.input-bar .input-nick {
|
||||
padding-left: 8px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.input-bar input {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user