feat(web): overhaul SPA to look like a proper IRC client

Major UI overhaul of the embedded web SPA to match traditional IRC client
look and feel:

Layout changes:
- Input bar now spans full width at bottom of window (below user list)
- Removed inline join dialog from tab bar (use /join command instead)
- Nick prefix shown in input bar (e.g. 'alice>')
- Topic bar shows 'Topic:' label with accent color

IRC command support:
- Added /me command (action messages via meta.action flag)
- Added /mode command for channel/user mode changes
- Added /quit command for clean disconnect
- Added /help command listing all available commands
- /part now accepts optional reason message

User list improvements:
- Parse 353 RPL_NAMREPLY to extract user mode prefixes
- Display @nick for ops, +nick for voiced, plain for regular users
- Sort users by mode rank: ops first, then voiced, then regular
- Ops shown in orange, voiced in green, regular in default color
- Extracted UserList into dedicated component

Message display:
- Messages displayed inline with nick on same line (IRC style)
- Action messages (/me) shown as '* nick does something' in purple
- System messages prefixed with '***'
- Uses IRC vocabulary: 'has parted' instead of 'has left'
- Parse 332 RPL_TOPIC for channel topic on join

UX improvements:
- Command history with up/down arrow keys (100 entries)
- Input always visible including on Server tab
- Dark theme with monospace font (JetBrains Mono/Fira Code)
- Hover highlight on messages
- Custom scrollbar styling
- Tab type-based styling (server tab bold)

closes #50

web/dist/style.css

@@ -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;
+  }
 }

web/src/style.css

@@ -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;
+  }
 }