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
318 lines
5.3 KiB
CSS
318 lines
5.3 KiB
CSS
* { 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;
|
|
}
|
|
|
|
html, body, #root {
|
|
height: 100%;
|
|
font-family: 'Courier New', Courier, monospace;
|
|
font-size: 14px;
|
|
background: var(--bg);
|
|
color: var(--text);
|
|
}
|
|
|
|
/* Login screen */
|
|
.login-screen {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 100%;
|
|
gap: 16px;
|
|
}
|
|
|
|
.login-screen h1 {
|
|
color: var(--accent);
|
|
font-size: 2em;
|
|
}
|
|
|
|
.login-screen input {
|
|
padding: 10px 16px;
|
|
font-size: 16px;
|
|
font-family: inherit;
|
|
background: var(--bg-input);
|
|
border: 1px solid var(--border);
|
|
color: var(--text);
|
|
border-radius: 4px;
|
|
width: 280px;
|
|
}
|
|
|
|
.login-screen button {
|
|
padding: 10px 24px;
|
|
font-size: 16px;
|
|
font-family: inherit;
|
|
background: var(--accent);
|
|
border: none;
|
|
color: white;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.login-screen .error {
|
|
color: var(--accent);
|
|
}
|
|
|
|
.login-screen .motd {
|
|
color: var(--text-muted);
|
|
max-width: 400px;
|
|
text-align: center;
|
|
white-space: pre-wrap;
|
|
}
|
|
|
|
/* Main layout */
|
|
.app {
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
}
|
|
|
|
/* Tab bar */
|
|
.tab-bar {
|
|
display: flex;
|
|
background: var(--bg-secondary);
|
|
border-bottom: 1px solid var(--border);
|
|
overflow-x: auto;
|
|
flex-shrink: 0;
|
|
align-items: center;
|
|
}
|
|
|
|
.tab {
|
|
padding: 8px 16px;
|
|
cursor: pointer;
|
|
border-bottom: 2px solid transparent;
|
|
white-space: nowrap;
|
|
color: var(--text-muted);
|
|
user-select: none;
|
|
position: relative;
|
|
}
|
|
|
|
.tab:hover {
|
|
background: var(--tab-hover);
|
|
}
|
|
|
|
.tab.active {
|
|
color: var(--text);
|
|
border-bottom-color: var(--tab-active);
|
|
}
|
|
|
|
.tab .close-btn {
|
|
margin-left: 8px;
|
|
color: var(--text-muted);
|
|
font-size: 12px;
|
|
}
|
|
|
|
.tab .close-btn:hover {
|
|
color: var(--accent);
|
|
}
|
|
|
|
.tab .unread-badge {
|
|
display: inline-block;
|
|
background: var(--unread-bg);
|
|
color: white;
|
|
font-size: 10px;
|
|
font-weight: bold;
|
|
padding: 1px 5px;
|
|
border-radius: 8px;
|
|
margin-left: 6px;
|
|
min-width: 16px;
|
|
text-align: center;
|
|
}
|
|
|
|
/* Connection status */
|
|
.connection-status {
|
|
padding: 4px 12px;
|
|
background: var(--warn);
|
|
color: #1a1a2e;
|
|
font-size: 12px;
|
|
font-weight: bold;
|
|
white-space: nowrap;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
/* Topic bar */
|
|
.topic-bar {
|
|
padding: 6px 12px;
|
|
background: var(--topic-bg);
|
|
border-bottom: 1px solid var(--border);
|
|
color: var(--text-muted);
|
|
font-size: 12px;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
/* Content area */
|
|
.content {
|
|
display: flex;
|
|
flex: 1;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* Messages */
|
|
.messages-pane {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.messages {
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
padding: 8px 12px;
|
|
}
|
|
|
|
.message {
|
|
padding: 2px 0;
|
|
line-height: 1.4;
|
|
word-wrap: break-word;
|
|
}
|
|
|
|
.message .timestamp {
|
|
color: var(--timestamp);
|
|
font-size: 12px;
|
|
margin-right: 8px;
|
|
}
|
|
|
|
.message .nick {
|
|
color: var(--nick);
|
|
font-weight: bold;
|
|
margin-right: 8px;
|
|
}
|
|
|
|
.message .nick::before { content: '<'; }
|
|
.message .nick::after { content: '>'; }
|
|
|
|
.message.system {
|
|
color: var(--text-muted);
|
|
font-style: italic;
|
|
}
|
|
|
|
.message.system .nick {
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.message.system .nick::before,
|
|
.message.system .nick::after { content: ''; }
|
|
|
|
/* Input */
|
|
.input-bar {
|
|
display: flex;
|
|
border-top: 1px solid var(--border);
|
|
background: var(--bg-secondary);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.input-bar input {
|
|
flex: 1;
|
|
padding: 10px 12px;
|
|
font-family: inherit;
|
|
font-size: 14px;
|
|
background: var(--bg-input);
|
|
border: none;
|
|
color: var(--text);
|
|
outline: none;
|
|
}
|
|
|
|
.input-bar button {
|
|
padding: 10px 16px;
|
|
font-family: inherit;
|
|
background: var(--accent);
|
|
border: none;
|
|
color: white;
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* User list */
|
|
.user-list {
|
|
width: 160px;
|
|
background: var(--bg-secondary);
|
|
border-left: 1px solid var(--border);
|
|
overflow-y: auto;
|
|
padding: 8px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.user-list h3 {
|
|
color: var(--text-muted);
|
|
font-size: 11px;
|
|
text-transform: uppercase;
|
|
margin-bottom: 8px;
|
|
letter-spacing: 1px;
|
|
}
|
|
|
|
.user-list .user {
|
|
padding: 3px 4px;
|
|
color: var(--nick);
|
|
font-size: 13px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.user-list .user:hover {
|
|
background: var(--tab-hover);
|
|
}
|
|
|
|
/* Server tab */
|
|
.server-messages {
|
|
color: var(--text-muted);
|
|
padding: 12px;
|
|
white-space: pre-wrap;
|
|
overflow-y: auto;
|
|
flex: 1;
|
|
}
|
|
|
|
/* Channel join dialog */
|
|
.join-dialog {
|
|
padding: 12px;
|
|
display: flex;
|
|
gap: 8px;
|
|
background: var(--bg-secondary);
|
|
border-bottom: 1px solid var(--border);
|
|
margin-left: auto;
|
|
}
|
|
|
|
.join-dialog input {
|
|
padding: 6px 10px;
|
|
font-family: inherit;
|
|
font-size: 13px;
|
|
background: var(--bg-input);
|
|
border: 1px solid var(--border);
|
|
color: var(--text);
|
|
border-radius: 3px;
|
|
width: 200px;
|
|
}
|
|
|
|
.join-dialog button {
|
|
padding: 6px 14px;
|
|
font-family: inherit;
|
|
font-size: 13px;
|
|
background: var(--accent2);
|
|
border: none;
|
|
color: var(--text);
|
|
border-radius: 3px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* Responsive */
|
|
@media (max-width: 600px) {
|
|
.user-list { display: none; }
|
|
.tab { padding: 6px 10px; font-size: 13px; }
|
|
}
|