Replace HTTP status codes with IRC numeric replies in command handlers (closes #54)

IRC command handlers now return proper IRC numeric reply codes per
RFC 1459/2812 instead of HTTP status codes:

- 401 ERR_NOSUCHNICK for unknown DM targets
- 403 ERR_NOSUCHCHANNEL for invalid/missing channels
- 411 ERR_NORECIPIENT for missing message recipients
- 412 ERR_NOTEXTTOSEND for missing message body
- 421 ERR_UNKNOWNCOMMAND for unknown/empty commands
- 431 ERR_NONICKNAMEGIVEN for missing nick in NICK command
- 432 ERR_ERRONEUSNICKNAME for invalid nick format
- 433 ERR_NICKNAMEINUSE for taken nicks
- 442 ERR_NOTONCHANNEL for non-member channel actions
- 461 ERR_NEEDMOREPARAMS for missing required parameters

Error responses use the IRC numeric format:
  {"command":"4xx","from":"server","to":"nick","body":["..."],"params":[...]}

HTTP status codes are now reserved for transport-level concerns:
- 400 for malformed HTTP requests (bad JSON)
- 401 for authentication failures
- 500 for internal server errors

Successful message sends changed from 201 to 200 since HTTP
status codes should not encode IRC-level semantics.

internal/handlers/api.go

@@ -28,6 +28,18 @@ const (
 	defaultHistLimit   = 50
 	maxHistLimit       = 500
 	cmdPrivmsg         = "PRIVMSG"
+
+	// IRC numeric reply codes per RFC 1459/2812.
+	ircErrNoSuchNick       = "401"
+	ircErrNoSuchChannel    = "403"
+	ircErrNoRecipient      = "411"
+	ircErrNoTextToSend     = "412"
+	ircErrUnknownCommand   = "421"
+	ircErrNoNicknameGiven  = "431"
+	ircErrErroneusNickname = "432"
+	ircErrNicknameInUse    = "433"
+	ircErrNotOnChannel     = "442"
+	ircErrNeedMoreParams   = "461"
 )
 
 func (hdlr *Handlers) maxBodySize() int64 {
@@ -63,6 +75,43 @@ func (hdlr *Handlers) authSession(
 	return sessionID, clientID, nick, nil
 }
 
+// serverName returns the configured server name or the
+// default "neoirc".
+func (hdlr *Handlers) serverName() string {
+	if hdlr.params.Config.ServerName != "" {
+		return hdlr.params.Config.ServerName
+	}
+
+	return "neoirc"
+}
+
+// respondIRCError sends an IRC numeric error reply as a
+// JSON response with HTTP 200 OK. This is used for errors
+// in IRC command processing (as opposed to HTTP transport
+// errors). The params slice contains IRC-style positional
+// parameters (e.g. the target nick or channel).
+func (hdlr *Handlers) respondIRCError(
+	writer http.ResponseWriter,
+	request *http.Request,
+	nick, numeric, msg string,
+	params ...string,
+) {
+	resp := map[string]any{
+		"command": numeric,
+		"from":    hdlr.serverName(),
+		"to":      nick,
+		"body":    []string{msg},
+	}
+
+	if len(params) > 0 {
+		resp["params"] = params
+	}
+
+	hdlr.respondJSON(
+		writer, request, resp, http.StatusOK,
+	)
+}
+
 func (hdlr *Handlers) requireAuth(
 	writer http.ResponseWriter,
 	request *http.Request,
@@ -226,11 +275,7 @@ func (hdlr *Handlers) deliverMOTD(
 	clientID, sessionID int64,
 ) {
 	motd := hdlr.params.Config.MOTD
-	serverName := hdlr.params.Config.ServerName
+	serverName := hdlr.serverName()
-
-	if serverName == "" {
-		serverName = "neoirc"
-	}
 
 	if motd == "" {
 		return
@@ -557,10 +602,10 @@ func (hdlr *Handlers) HandleSendCommand() http.HandlerFunc {
 		payload.To = strings.TrimSpace(payload.To)
 
 		if payload.Command == "" {
-			hdlr.respondError(
+			hdlr.respondIRCError(
 				writer, request,
-				"command required",
+				nick, ircErrUnknownCommand,
-				http.StatusBadRequest,
+				"No command given",
 			)
 
 			return
@@ -631,10 +676,11 @@ func (hdlr *Handlers) dispatchCommand(
 			},
 			http.StatusOK)
 	default:
-		hdlr.respondError(
+		hdlr.respondIRCError(
 			writer, request,
-			"unknown command: "+command,
+			nick, ircErrUnknownCommand,
-			http.StatusBadRequest,
+			command+" :Unknown command",
+			command,
 		)
 	}
 }
@@ -648,10 +694,10 @@ func (hdlr *Handlers) handlePrivmsg(
 	bodyLines func() []string,
 ) {
 	if target == "" {
-		hdlr.respondError(
+		hdlr.respondIRCError(
 			writer, request,
-			"to field required",
+			nick, ircErrNoRecipient,
-			http.StatusBadRequest,
+			"No recipient given ("+command+")",
 		)
 
 		return
@@ -659,10 +705,10 @@ func (hdlr *Handlers) handlePrivmsg(
 
 	lines := bodyLines()
 	if len(lines) == 0 {
-		hdlr.respondError(
+		hdlr.respondIRCError(
 			writer, request,
-			"body required",
+			nick, ircErrNoTextToSend,
-			http.StatusBadRequest,
+			"No text to send",
 		)
 
 		return
@@ -694,10 +740,11 @@ func (hdlr *Handlers) handleChannelMsg(
 		request.Context(), target,
 	)
 	if err != nil {
-		hdlr.respondError(
+		hdlr.respondIRCError(
 			writer, request,
-			"channel not found",
+			nick, ircErrNoSuchChannel,
-			http.StatusNotFound,
+			"No such channel",
+			target,
 		)
 
 		return
@@ -720,10 +767,11 @@ func (hdlr *Handlers) handleChannelMsg(
 	}
 
 	if !isMember {
-		hdlr.respondError(
+		hdlr.respondIRCError(
 			writer, request,
-			"not a member of this channel",
+			nick, ircErrNotOnChannel,
-			http.StatusForbidden,
+			"You're not on that channel",
+			target,
 		)
 
 		return
@@ -761,7 +809,7 @@ func (hdlr *Handlers) handleChannelMsg(
 
 	hdlr.respondJSON(writer, request,
 		map[string]string{"id": msgUUID, "status": "sent"},
-		http.StatusCreated)
+		http.StatusOK)
 }
 
 func (hdlr *Handlers) handleDirectMsg(
@@ -775,10 +823,11 @@ func (hdlr *Handlers) handleDirectMsg(
 		request.Context(), target,
 	)
 	if err != nil {
-		hdlr.respondError(
+		hdlr.respondIRCError(
 			writer, request,
-			"user not found",
+			nick, ircErrNoSuchNick,
-			http.StatusNotFound,
+			"No such nick/channel",
+			target,
 		)
 
 		return
@@ -805,7 +854,7 @@ func (hdlr *Handlers) handleDirectMsg(
 
 	hdlr.respondJSON(writer, request,
 		map[string]string{"id": msgUUID, "status": "sent"},
-		http.StatusCreated)
+		http.StatusOK)
 }
 
 func (hdlr *Handlers) handleJoin(
@@ -815,10 +864,11 @@ func (hdlr *Handlers) handleJoin(
 	nick, target string,
 ) {
 	if target == "" {
-		hdlr.respondError(
+		hdlr.respondIRCError(
 			writer, request,
-			"to field required",
+			nick, ircErrNeedMoreParams,
-			http.StatusBadRequest,
+			"Not enough parameters",
+			"JOIN",
 		)
 
 		return
@@ -830,10 +880,11 @@ func (hdlr *Handlers) handleJoin(
 	}
 
 	if !validChannelRe.MatchString(channel) {
-		hdlr.respondError(
+		hdlr.respondIRCError(
 			writer, request,
-			"invalid channel name",
+			nick, ircErrNoSuchChannel,
-			http.StatusBadRequest,
+			"No such channel",
+			channel,
 		)
 
 		return
@@ -895,10 +946,11 @@ func (hdlr *Handlers) handlePart(
 	body json.RawMessage,
 ) {
 	if target == "" {
-		hdlr.respondError(
+		hdlr.respondIRCError(
 			writer, request,
-			"to field required",
+			nick, ircErrNeedMoreParams,
-			http.StatusBadRequest,
+			"Not enough parameters",
+			"PART",
 		)
 
 		return
@@ -913,10 +965,11 @@ func (hdlr *Handlers) handlePart(
 		request.Context(), channel,
 	)
 	if err != nil {
-		hdlr.respondError(
+		hdlr.respondIRCError(
 			writer, request,
-			"channel not found",
+			nick, ircErrNoSuchChannel,
-			http.StatusNotFound,
+			"No such channel",
+			channel,
 		)
 
 		return
@@ -967,10 +1020,10 @@ func (hdlr *Handlers) handleNick(
 ) {
 	lines := bodyLines()
 	if len(lines) == 0 {
-		hdlr.respondError(
+		hdlr.respondIRCError(
 			writer, request,
-			"body required (new nick)",
+			nick, ircErrNoNicknameGiven,
-			http.StatusBadRequest,
+			"No nickname given",
 		)
 
 		return
@@ -979,10 +1032,11 @@ func (hdlr *Handlers) handleNick(
 	newNick := strings.TrimSpace(lines[0])
 
 	if !validNickRe.MatchString(newNick) {
-		hdlr.respondError(
+		hdlr.respondIRCError(
 			writer, request,
-			"invalid nick",
+			nick, ircErrErroneusNickname,
-			http.StatusBadRequest,
+			"Erroneous nickname",
+			newNick,
 		)
 
 		return
@@ -1003,10 +1057,11 @@ func (hdlr *Handlers) handleNick(
 	)
 	if err != nil {
 		if strings.Contains(err.Error(), "UNIQUE") {
-			hdlr.respondError(
+			hdlr.respondIRCError(
 				writer, request,
-				"nick already in use",
+				nick, ircErrNicknameInUse,
-				http.StatusConflict,
+				"Nickname is already in use",
+				newNick,
 			)
 
 			return
@@ -1093,10 +1148,11 @@ func (hdlr *Handlers) handleTopic(
 	bodyLines func() []string,
 ) {
 	if target == "" {
-		hdlr.respondError(
+		hdlr.respondIRCError(
 			writer, request,
-			"to field required",
+			nick, ircErrNeedMoreParams,
-			http.StatusBadRequest,
+			"Not enough parameters",
+			"TOPIC",
 		)
 
 		return
@@ -1104,10 +1160,11 @@ func (hdlr *Handlers) handleTopic(
 
 	lines := bodyLines()
 	if len(lines) == 0 {
-		hdlr.respondError(
+		hdlr.respondIRCError(
 			writer, request,
-			"body required (topic text)",
+			nick, ircErrNeedMoreParams,
-			http.StatusBadRequest,
+			"Not enough parameters",
+			"TOPIC",
 		)
 
 		return
@@ -1140,10 +1197,11 @@ func (hdlr *Handlers) handleTopic(
 		request.Context(), channel,
 	)
 	if err != nil {
-		hdlr.respondError(
+		hdlr.respondIRCError(
 			writer, request,
-			"channel not found",
+			nick, ircErrNoSuchChannel,
-			http.StatusNotFound,
+			"No such channel",
+			channel,
 		)
 
 		return

internal/handlers/api_test.go

@@ -668,11 +668,18 @@ func TestJoinMissingTo(t *testing.T) {
 	tserver := newTestServer(t)
 	token := tserver.createSession("joiner3")
 
-	status, _ := tserver.sendCommand(
+	status, result := tserver.sendCommand(
 		token, map[string]any{commandKey: joinCmd},
 	)
-	if status != http.StatusBadRequest {
+	if status != http.StatusOK {
-		t.Fatalf("expected 400, got %d", status)
+		t.Fatalf("expected 200, got %d", status)
+	}
+
+	if result[commandKey] != "461" {
+		t.Fatalf(
+			"expected IRC 461, got %v",
+			result[commandKey],
+		)
 	}
 }
 
@@ -699,9 +706,9 @@ func TestChannelMessage(t *testing.T) {
 			bodyKey:    []string{"hello world"},
 		},
 	)
-	if status != http.StatusCreated {
+	if status != http.StatusOK {
 		t.Fatalf(
-			"expected 201, got %d: %v", status, result,
+			"expected 200, got %d: %v", status, result,
 		)
 	}
 
@@ -728,11 +735,18 @@ func TestMessageMissingBody(t *testing.T) {
 		commandKey: joinCmd, toKey: "#test",
 	})
 
-	status, _ := tserver.sendCommand(token, map[string]any{
+	status, result := tserver.sendCommand(token, map[string]any{
 		commandKey: privmsgCmd, toKey: "#test",
 	})
-	if status != http.StatusBadRequest {
+	if status != http.StatusOK {
-		t.Fatalf("expected 400, got %d", status)
+		t.Fatalf("expected 200, got %d", status)
+	}
+
+	if result[commandKey] != "412" {
+		t.Fatalf(
+			"expected IRC 412, got %v",
+			result[commandKey],
+		)
 	}
 }
 
@@ -740,12 +754,19 @@ func TestMessageMissingTo(t *testing.T) {
 	tserver := newTestServer(t)
 	token := tserver.createSession("noto")
 
-	status, _ := tserver.sendCommand(token, map[string]any{
+	status, result := tserver.sendCommand(token, map[string]any{
 		commandKey: privmsgCmd,
 		bodyKey:    []string{"hello"},
 	})
-	if status != http.StatusBadRequest {
+	if status != http.StatusOK {
-		t.Fatalf("expected 400, got %d", status)
+		t.Fatalf("expected 200, got %d", status)
+	}
+
+	if result[commandKey] != "411" {
+		t.Fatalf(
+			"expected IRC 411, got %v",
+			result[commandKey],
+		)
 	}
 }
 
@@ -760,7 +781,7 @@ func TestNonMemberCannotSend(t *testing.T) {
 	})
 
 	// Alice tries to send without joining.
-	status, _ := tserver.sendCommand(
+	status, result := tserver.sendCommand(
 		aliceToken,
 		map[string]any{
 			commandKey: privmsgCmd,
@@ -768,8 +789,15 @@ func TestNonMemberCannotSend(t *testing.T) {
 			bodyKey:    []string{"sneaky"},
 		},
 	)
-	if status != http.StatusForbidden {
+	if status != http.StatusOK {
-		t.Fatalf("expected 403, got %d", status)
+		t.Fatalf("expected 200, got %d", status)
+	}
+
+	if result[commandKey] != "442" {
+		t.Fatalf(
+			"expected IRC 442, got %v",
+			result[commandKey],
+		)
 	}
 }
 
@@ -786,9 +814,9 @@ func TestDirectMessage(t *testing.T) {
 			bodyKey:    []string{"hey bob"},
 		},
 	)
-	if status != http.StatusCreated {
+	if status != http.StatusOK {
 		t.Fatalf(
-			"expected 201, got %d: %v", status, result,
+			"expected 200, got %d: %v", status, result,
 		)
 	}
 
@@ -818,13 +846,20 @@ func TestDMToNonexistentUser(t *testing.T) {
 	tserver := newTestServer(t)
 	token := tserver.createSession("dmsender")
 
-	status, _ := tserver.sendCommand(token, map[string]any{
+	status, result := tserver.sendCommand(token, map[string]any{
 		commandKey: privmsgCmd,
 		toKey:      "nobody",
 		bodyKey:    []string{"hello?"},
 	})
-	if status != http.StatusNotFound {
+	if status != http.StatusOK {
-		t.Fatalf("expected 404, got %d", status)
+		t.Fatalf("expected 200, got %d", status)
+	}
+
+	if result[commandKey] != "401" {
+		t.Fatalf(
+			"expected IRC 401, got %v",
+			result[commandKey],
+		)
 	}
 }
 
@@ -871,12 +906,19 @@ func TestNickCollision(t *testing.T) {
 
 	tserver.createSession("taken_nick")
 
-	status, _ := tserver.sendCommand(token, map[string]any{
+	status, result := tserver.sendCommand(token, map[string]any{
 		commandKey: "NICK",
 		bodyKey:    []string{"taken_nick"},
 	})
-	if status != http.StatusConflict {
+	if status != http.StatusOK {
-		t.Fatalf("expected 409, got %d", status)
+		t.Fatalf("expected 200, got %d", status)
+	}
+
+	if result[commandKey] != "433" {
+		t.Fatalf(
+			"expected IRC 433, got %v",
+			result[commandKey],
+		)
 	}
 }
 
@@ -884,12 +926,19 @@ func TestNickInvalid(t *testing.T) {
 	tserver := newTestServer(t)
 	token := tserver.createSession("nickval")
 
-	status, _ := tserver.sendCommand(token, map[string]any{
+	status, result := tserver.sendCommand(token, map[string]any{
 		commandKey: "NICK",
 		bodyKey:    []string{"bad nick!"},
 	})
-	if status != http.StatusBadRequest {
+	if status != http.StatusOK {
-		t.Fatalf("expected 400, got %d", status)
+		t.Fatalf("expected 200, got %d", status)
+	}
+
+	if result[commandKey] != "432" {
+		t.Fatalf(
+			"expected IRC 432, got %v",
+			result[commandKey],
+		)
 	}
 }
 
@@ -897,11 +946,18 @@ func TestNickEmptyBody(t *testing.T) {
 	tserver := newTestServer(t)
 	token := tserver.createSession("nicknobody")
 
-	status, _ := tserver.sendCommand(
+	status, result := tserver.sendCommand(
 		token, map[string]any{commandKey: "NICK"},
 	)
-	if status != http.StatusBadRequest {
+	if status != http.StatusOK {
-		t.Fatalf("expected 400, got %d", status)
+		t.Fatalf("expected 200, got %d", status)
+	}
+
+	if result[commandKey] != "431" {
+		t.Fatalf(
+			"expected IRC 431, got %v",
+			result[commandKey],
+		)
 	}
 }
 
@@ -938,12 +994,19 @@ func TestTopicMissingTo(t *testing.T) {
 	tserver := newTestServer(t)
 	token := tserver.createSession("topicnoto")
 
-	status, _ := tserver.sendCommand(token, map[string]any{
+	status, result := tserver.sendCommand(token, map[string]any{
 		commandKey: "TOPIC",
 		bodyKey:    []string{"topic"},
 	})
-	if status != http.StatusBadRequest {
+	if status != http.StatusOK {
-		t.Fatalf("expected 400, got %d", status)
+		t.Fatalf("expected 200, got %d", status)
+	}
+
+	if result[commandKey] != "461" {
+		t.Fatalf(
+			"expected IRC 461, got %v",
+			result[commandKey],
+		)
 	}
 }
 
@@ -955,11 +1018,18 @@ func TestTopicMissingBody(t *testing.T) {
 		commandKey: joinCmd, toKey: "#topictest",
 	})
 
-	status, _ := tserver.sendCommand(token, map[string]any{
+	status, result := tserver.sendCommand(token, map[string]any{
 		commandKey: "TOPIC", toKey: "#topictest",
 	})
-	if status != http.StatusBadRequest {
+	if status != http.StatusOK {
-		t.Fatalf("expected 400, got %d", status)
+		t.Fatalf("expected 200, got %d", status)
+	}
+
+	if result[commandKey] != "461" {
+		t.Fatalf(
+			"expected IRC 461, got %v",
+			result[commandKey],
+		)
 	}
 }
 
@@ -1027,11 +1097,18 @@ func TestUnknownCommand(t *testing.T) {
 	tserver := newTestServer(t)
 	token := tserver.createSession("cmdtest")
 
-	status, _ := tserver.sendCommand(
+	status, result := tserver.sendCommand(
 		token, map[string]any{commandKey: "BOGUS"},
 	)
-	if status != http.StatusBadRequest {
+	if status != http.StatusOK {
-		t.Fatalf("expected 400, got %d", status)
+		t.Fatalf("expected 200, got %d", status)
+	}
+
+	if result[commandKey] != "421" {
+		t.Fatalf(
+			"expected IRC 421, got %v",
+			result[commandKey],
+		)
 	}
 }
 
@@ -1039,11 +1116,18 @@ func TestEmptyCommand(t *testing.T) {
 	tserver := newTestServer(t)
 	token := tserver.createSession("emptycmd")
 
-	status, _ := tserver.sendCommand(
+	status, result := tserver.sendCommand(
 		token, map[string]any{commandKey: ""},
 	)
-	if status != http.StatusBadRequest {
+	if status != http.StatusOK {
-		t.Fatalf("expected 400, got %d", status)
+		t.Fatalf("expected 200, got %d", status)
+	}
+
+	if result[commandKey] != "421" {
+		t.Fatalf(
+			"expected IRC 421, got %v",
+			result[commandKey],
+		)
 	}
 }
 

web/dist/style.css

@@ -1,40 +1,28 @@
-* {
+* { margin: 0; padding: 0; box-sizing: border-box; }
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-}
 
 :root {
-  --bg: #0a0e14;
+  --bg: #1a1a2e;
-  --bg-secondary: #0d1117;
+  --bg-secondary: #16213e;
-  --bg-input: #161b22;
+  --bg-input: #0f3460;
-  --bg-highlight: #1a2030;
+  --text: #e0e0e0;
-  --text: #c9d1d9;
+  --text-muted: #888;
-  --text-muted: #6e7681;
+  --accent: #e94560;
-  --accent: #58a6ff;
+  --accent2: #0f3460;
-  --accent-dim: #1f6feb;
+  --border: #2a2a4a;
-  --border: #21262d;
+  --nick: #53a8b6;
-  --nick: #79c0ff;
+  --timestamp: #666;
-  --timestamp: #484f58;
+  --tab-active: #e94560;
-  --tab-active: #58a6ff;
+  --tab-bg: #16213e;
-  --tab-bg: #0d1117;
+  --tab-hover: #1a1a3e;
-  --tab-hover: #161b22;
+  --topic-bg: #121a30;
-  --topic-bg: #0d1117;
+  --unread-bg: #e94560;
-  --unread-bg: #da3633;
+  --warn: #f0ad4e;
-  --warn: #d29922;
-  --op-color: #f0883e;
-  --voice-color: #3fb950;
-  --action-color: #bc8cff;
-  --system-color: #484f58;
 }
 
-html,
+html, body, #root {
-body,
-#root {
   height: 100%;
-  font-family: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'Courier New',
+  font-family: 'Courier New', Courier, monospace;
-    Courier, monospace;
+  font-size: 14px;
-  font-size: 13px;
   background: var(--bg);
   color: var(--text);
 }
@@ -69,19 +57,15 @@ body,
   padding: 10px 24px;
   font-size: 16px;
   font-family: inherit;
-  background: var(--accent-dim);
+  background: var(--accent);
   border: none;
   color: white;
   border-radius: 4px;
   cursor: pointer;
 }
 
-.login-screen button:hover {
-  background: var(--accent);
-}
-
 .login-screen .error {
-  color: var(--unread-bg);
+  color: var(--accent);
 }
 
 .login-screen .motd {
@@ -105,63 +89,36 @@ body,
   border-bottom: 1px solid var(--border);
   overflow-x: auto;
   flex-shrink: 0;
-  align-items: stretch;
+  align-items: center;
-  min-height: 32px;
-}
-
-.tab-bar::-webkit-scrollbar {
-  height: 2px;
-}
-
-.tab-bar::-webkit-scrollbar-thumb {
-  background: var(--border);
 }
 
 .tab {
-  display: flex;
+  padding: 8px 16px;
-  align-items: center;
-  padding: 6px 12px;
   cursor: pointer;
   border-bottom: 2px solid transparent;
   white-space: nowrap;
   color: var(--text-muted);
   user-select: none;
-  font-size: 12px;
+  position: relative;
-  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: 14px;
+  font-size: 12px;
-  line-height: 1;
-  flex-shrink: 0;
 }
 
 .tab .close-btn:hover {
-  color: var(--unread-bg);
+  color: var(--accent);
 }
 
 .tab .unread-badge {
@@ -170,22 +127,19 @@ body,
   color: white;
   font-size: 10px;
   font-weight: bold;
-  padding: 0 5px;
+  padding: 1px 5px;
   border-radius: 8px;
+  margin-left: 6px;
   min-width: 16px;
   text-align: center;
-  line-height: 16px;
-  flex-shrink: 0;
 }
 
 /* Connection status */
 .connection-status {
-  display: flex;
+  padding: 4px 12px;
-  align-items: center;
-  padding: 0 12px;
   background: var(--warn);
-  color: var(--bg);
+  color: #1a1a2e;
-  font-size: 11px;
+  font-size: 12px;
   font-weight: bold;
   white-space: nowrap;
   flex-shrink: 0;
@@ -193,7 +147,7 @@ body,
 
 /* Topic bar */
 .topic-bar {
-  padding: 4px 12px;
+  padding: 6px 12px;
   background: var(--topic-bg);
   border-bottom: 1px solid var(--border);
   color: var(--text-muted);
@@ -204,11 +158,6 @@ body,
   flex-shrink: 0;
 }
 
-.topic-bar .topic-label {
-  color: var(--accent);
-  font-weight: bold;
-}
-
 /* Content area */
 .content {
   display: flex;
@@ -222,210 +171,147 @@ body,
   display: flex;
   flex-direction: column;
   overflow: hidden;
-  min-width: 0;
 }
 
 .messages {
   flex: 1;
   overflow-y: auto;
-  padding: 4px 0;
+  padding: 8px 12px;
-}
-
-.messages::-webkit-scrollbar {
-  width: 6px;
-}
-
-.messages::-webkit-scrollbar-thumb {
-  background: var(--border);
-  border-radius: 3px;
 }
 
 .message {
-  padding: 1px 12px;
+  padding: 2px 0;
-  line-height: 1.5;
+  line-height: 1.4;
   word-wrap: break-word;
 }
 
-.message:hover {
-  background: var(--bg-highlight);
-}
-
 .message .timestamp {
   color: var(--timestamp);
-  font-size: 11px;
+  font-size: 12px;
-  margin-right: 6px;
+  margin-right: 8px;
 }
 
 .message .nick {
+  color: var(--nick);
   font-weight: bold;
-  margin-right: 6px;
+  margin-right: 8px;
 }
 
-.message .nick::before {
+.message .nick::before { content: '<'; }
-  content: '<';
+.message .nick::after { content: '>'; }
-  color: var(--text-muted);
-}
-
-.message .nick::after {
-  content: '>';
-  color: var(--text-muted);
-}
 
 .message.system {
-  color: var(--system-color);
+  color: var(--text-muted);
   font-style: italic;
 }
 
-.message.system .timestamp {
+.message.system .nick {
-  color: var(--timestamp);
+  color: var(--text-muted);
 }
 
-.message.system .content::before {
+.message.system .nick::before,
-  content: '*** ';
+.message.system .nick::after { content: ''; }
-}
 
-.message.action {
+/* Input */
-  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: 8px 8px;
+  padding: 10px 12px;
   font-family: inherit;
-  font-size: 13px;
+  font-size: 14px;
-  background: transparent;
+  background: var(--bg-input);
   border: none;
   color: var(--text);
   outline: none;
 }
 
-.input-bar input::placeholder {
+.input-bar button {
-  color: var(--text-muted);
+  padding: 10px 16px;
+  font-family: inherit;
+  background: var(--accent);
+  border: none;
+  color: white;
+  cursor: pointer;
 }
 
 /* User list */
 .user-list {
-  width: 170px;
+  width: 160px;
   background: var(--bg-secondary);
   border-left: 1px solid var(--border);
-  display: flex;
+  overflow-y: auto;
-  flex-direction: column;
+  padding: 8px;
   flex-shrink: 0;
 }
 
-.user-list-header {
+.user-list h3 {
-  padding: 6px 10px;
   color: var(--text-muted);
   font-size: 11px;
   text-transform: uppercase;
-  letter-spacing: 0.5px;
+  margin-bottom: 8px;
-  border-bottom: 1px solid var(--border);
+  letter-spacing: 1px;
-  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: 2px 10px;
+  padding: 3px 4px;
-  font-size: 12px;
+  color: var(--nick);
+  font-size: 13px;
   cursor: pointer;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  color: var(--text);
 }
 
 .user-list .user:hover {
   background: var(--tab-hover);
 }
 
-.user-list .user.op {
+/* Server tab */
-  color: var(--op-color);
-}
-
-.user-list .user.voice {
-  color: var(--voice-color);
-}
-
-/* Server tab messages */
 .server-messages {
   color: var(--text-muted);
-  padding: 8px 12px;
+  padding: 12px;
   white-space: pre-wrap;
   overflow-y: auto;
   flex: 1;
 }
 
-.server-messages .message {
+/* Channel join dialog */
-  padding: 1px 0;
+.join-dialog {
+  padding: 12px;
+  display: flex;
+  gap: 8px;
+  background: var(--bg-secondary);
+  border-bottom: 1px solid var(--border);
+  margin-left: auto;
 }
 
-.server-messages .message:hover {
+.join-dialog input {
-  background: var(--bg-highlight);
+  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 {
+  .user-list { display: none; }
-    display: none;
+  .tab { padding: 6px 10px; font-size: 13px; }
-  }
-
-  .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/app.jsx

@@ -5,17 +5,13 @@ 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 = {
+  const headers = { 'Content-Type': 'application/json', ...(opts.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;
@@ -24,17 +20,12 @@ function api(path, opts = {}) {
 
 function formatTime(ts) {
   const d = new Date(ts);
-  return d.toLocaleTimeString([], {
+  return d.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', second: '2-digit' });
-    hour: '2-digit',
-    minute: '2-digit',
-    second: '2-digit',
-  });
 }
 
 function nickColor(nick) {
   let h = 0;
-  for (let i = 0; i < nick.length; i++)
+  for (let i = 0; i < nick.length; i++) h = nick.charCodeAt(i) + ((h << 5) - h);
-    h = nick.charCodeAt(i) + ((h << 5) - h);
   const hue = Math.abs(h) % 360;
   return `hsl(${hue}, 70%, 65%)`;
 }
@@ -47,17 +38,13 @@ function LoginScreen({ onLogin }) {
   const inputRef = useRef();
 
   useEffect(() => {
-    api('/server')
+    api('/server').then(s => {
-      .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')
+      api('/state').then(u => onLogin(u.nick)).catch(() => localStorage.removeItem('neoirc_token'));
-        .then((u) => onLogin(u.nick))
-        .catch(() => localStorage.removeItem('neoirc_token'));
     }
     inputRef.current?.focus();
   }, []);
@@ -68,7 +55,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);
@@ -87,7 +74,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
         />
@@ -107,64 +94,15 @@ 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) }}>
+      <span class="nick" style={{ color: nickColor(msg.from) }}>{msg.from}</span>
-        {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('');
@@ -172,13 +110,11 @@ 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());
@@ -189,115 +125,69 @@ function App() {
   const messagesEndRef = useRef();
   const inputRef = useRef();
 
-  useEffect(() => {
+  useEffect(() => { tabsRef.current = tabs; }, [tabs]);
-    tabsRef.current = tabs;
+  useEffect(() => { activeTabRef.current = activeTab; }, [activeTab]);
-  }, [tabs]);
+  useEffect(() => { nickRef.current = nick; }, [nick]);
-  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) => ({
+      setUnread(prev => ({ ...prev, [tabName]: (prev[tabName] || 0) + 1 }));
-        ...prev,
-        [tabName]: (prev[tabName] || 0) + 1,
-      }));
     }
   }, []);
 
   const addSystemMessage = useCallback((tabName, text) => {
-    setMessages((prev) => ({
+    setMessages(prev => ({
       ...prev,
-      [tabName]: [
+      [tabName]: [...(prev[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`)
+    api(`/channels/${chName}/members`).then(m => {
-      .then((m) => {
+      setMembers(prev => ({ ...prev, [channel]: m }));
-        setMembers((prev) => ({ ...prev, [channel]: m }));
+    }).catch(() => {});
-      })
-      .catch(() => {});
   }, []);
 
-  const parseNamesReply = useCallback((channel, namesStr) => {
+  const processMessage = useCallback((msg) => {
-    // 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 = {
+    const base = { id: msg.id, ts: msg.ts, from: msg.from, to: msg.to, command: msg.command };
-        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 = {
+        const parsed = { ...base, text: body, system: false };
-            ...base,
-            text: body,
-            system: false,
-            action: isAction,
-          };
         const target = msg.to;
         if (target && target.startsWith('#')) {
           addMessage(target, parsed);
         } else {
-            const dmPeer =
+          const dmPeer = msg.from === nickRef.current ? msg.to : msg.from;
-              msg.from === nickRef.current ? msg.to : msg.from;
+          setTabs(prev => {
-            setTabs((prev) => {
+            if (!prev.find(t => t.type === 'dm' && t.name === dmPeer)) {
-              if (!prev.find((t) => t.type === 'dm' && t.name === dmPeer)) {
               return [...prev, { type: 'dm', name: dmPeer }];
             }
             return prev;
@@ -308,23 +198,21 @@ function App() {
       }
       case 'JOIN': {
         const text = `${msg.from} has joined ${msg.to}`;
-          if (msg.to)
+        if (msg.to) addMessage(msg.to, { ...base, text, system: true });
-            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 parted ${msg.to}${reason}`;
+        const text = `${msg.from} has left ${msg.to}${reason}`;
-          if (msg.to)
+        if (msg.to) addMessage(msg.to, { ...base, text, system: true });
-            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 });
           }
@@ -334,13 +222,14 @@ 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);
-          tabsRef.current.forEach((tab) => {
+        // Refresh members in all channels
+        tabsRef.current.forEach(tab => {
           if (tab.type === 'channel') refreshMembers(tab.name);
         });
         break;
@@ -349,50 +238,19 @@ 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', {
+        addMessage('Server', { ...base, text: body || msg.command, system: true });
-            ...base,
-            text: body || msg.command,
-            system: true,
-          });
     }
-    },
+  }, [addMessage, refreshMembers]);
-    [addMessage, refreshMembers, parseNamesReply],
-  );
 
   // Long-poll loop
   useEffect(() => {
@@ -406,7 +264,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);
@@ -420,16 +278,13 @@ 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 () => {
+    return () => { alive = false; pollAbortRef.current?.abort(); };
-      alive = false;
-      pollAbortRef.current?.abort();
-    };
   }, [loggedIn, processMessage]);
 
   // Refresh members for active channel
@@ -438,10 +293,7 @@ function App() {
     const tab = tabs[activeTab];
     if (!tab || tab.type !== 'channel') return;
     refreshMembers(tab.name);
-    const iv = setInterval(
+    const iv = setInterval(() => refreshMembers(tab.name), MEMBER_REFRESH_INTERVAL);
-      () => refreshMembers(tab.name),
-      MEMBER_REFRESH_INTERVAL,
-    );
     return () => clearInterval(iv);
   }, [loggedIn, activeTab, tabs, refreshMembers]);
 
@@ -451,100 +303,71 @@ function App() {
   }, [messages, activeTab]);
 
   // Focus input on tab change
-  useEffect(() => {
+  useEffect(() => { inputRef.current?.focus(); }, [activeTab]);
-    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')
+    api('/channels').then(channels => {
-      .then((channels) => {
+      const ch = channels.find(c => c.name === tab.name);
-        const ch = channels.find((c) => c.name === tab.name);
+      if (ch && ch.topic) setTopics(prev => ({ ...prev, [tab.name]: ch.topic }));
-        if (ch && ch.topic)
+    }).catch(() => {});
-          setTopics((prev) => ({ ...prev, [tab.name]: ch.topic }));
-      })
-      .catch(() => {});
   }, [loggedIn, activeTab, tabs]);
 
-  const onLogin = useCallback(
+  const onLogin = useCallback(async (userNick) => {
-    async (userNick) => {
     setNick(userNick);
     setLoggedIn(true);
     addSystemMessage('Server', `Connected as ${userNick}`);
     // Auto-rejoin saved channels
-      const saved = JSON.parse(
+    const saved = JSON.parse(localStorage.getItem('neoirc_channels') || '[]');
-        localStorage.getItem('neoirc_channels') || '[]',
-      );
     for (const ch of saved) {
       try {
-          await api('/messages', {
+        await api('/messages', { method: 'POST', body: JSON.stringify({ command: 'JOIN', to: ch }) });
-            method: 'POST',
+        setTabs(prev => {
-            body: JSON.stringify({ command: 'JOIN', to: ch }),
+          if (prev.find(t => t.type === 'channel' && t.name === ch)) return prev;
-          });
-          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', {
+      await api('/messages', { method: 'POST', body: JSON.stringify({ command: 'JOIN', to: name }) });
-        method: 'POST',
+      setTabs(prev => {
-        body: JSON.stringify({ command: 'JOIN', to: name }),
+        if (prev.find(t => t.type === 'channel' && t.name === name)) return prev;
-      });
-      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(
+        const hist = await api(`/history?target=${encodeURIComponent(name)}&limit=50`);
-          `/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(
+      addSystemMessage('Server', `Failed to join ${name}: ${err.data?.error || 'error'}`);
-        'Server',
-        `Failed to join ${name}: ${err.data?.error || 'error'}`,
-      );
     }
   };
 
-  const partChannel = async (name, reason) => {
+  const partChannel = async (name) => {
     try {
-      const payload = { command: 'PART', to: name };
+      await api('/messages', { method: 'POST', body: JSON.stringify({ command: 'PART', to: name }) });
-      if (reason) payload.body = [reason];
-      await api('/messages', {
-        method: 'POST',
-        body: JSON.stringify(payload),
-      });
     } catch (e) {
       // Ignore
     }
-    setTabs((prev) =>
+    setTabs(prev => prev.filter(t => !(t.type === 'channel' && t.name === name)));
-      prev.filter((t) => !(t.type === 'channel' && t.name === name)),
-    );
     setActiveTab(0);
   };
 
@@ -553,284 +376,68 @@ 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) => {
+    setTabs(prev => {
-      if (prev.find((t) => t.type === 'dm' && t.name === targetNick))
+      if (prev.find(t => t.type === 'dm' && t.name === targetNick)) return prev;
-        return prev;
       return [...prev, { type: 'dm', name: targetNick }];
     });
-    const idx = tabs.findIndex(
+    const idx = tabs.findIndex(t => t.type === 'dm' && t.name === targetNick);
-      (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('/')) {
-      await handleCommand(text);
+      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'}`);
+        }
         return;
       }
-
+      if (cmd === '/nick' && parts[1]) {
-    if (!tab || tab.type === 'server') {
+        try {
-      addSystemMessage(
+          await api('/messages', { method: 'POST', body: JSON.stringify({ command: 'NICK', body: [parts[1]] }) });
-        'Server',
+        } catch (err) {
-        'Cannot send messages to the server tab. Join a channel with /join #channel',
+          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}`);
       return;
     }
 
     try {
-      await api('/messages', {
+      await api('/messages', { method: 'POST', body: JSON.stringify({ command: 'PRIVMSG', to: tab.name, body: [text] }) });
-        method: 'POST',
-        body: JSON.stringify({
-          command: 'PRIVMSG',
-          to: tab.name,
-          body: [text],
-        }),
-      });
     } catch (err) {
-      addSystemMessage(
+      addSystemMessage(tab.name, `Send failed: ${err.data?.error || 'error'}`);
-        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('');
-      }
     }
   };
 
@@ -839,86 +446,71 @@ 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 && (
+        {!connected && <div class="connection-status">⚠ Reconnecting...</div>}
-          <div class="connection-status">⚠ Reconnecting...</div>
-        )}
         {tabs.map((tab, i) => (
           <div
-            class={`tab ${i === activeTab ? 'active' : ''} ${tab.type}`}
+            class={`tab ${i === activeTab ? 'active' : ''}`}
             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
+              <span class="close-btn" onClick={(e) => { e.stopPropagation(); closeTab(i); }}>×</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' && (
+      {currentTab.type === 'channel' && currentTopic && (
-        <div class="topic-bar" title={currentTopic}>
+        <div class="topic-bar" title={currentTopic}>{currentTopic}</div>
-          <span class="topic-label">Topic:</span>{' '}
-          {currentTopic || '(no topic set)'}
-        </div>
       )}
 
       <div class="content">
         <div class="messages-pane">
-          <div
+          <div class={currentTab.type === 'server' ? 'server-messages' : 'messages'}>
-            class={
+            {currentMessages.map(m => <Message msg={m} />)}
-              currentTab.type === 'server'
-                ? 'server-messages'
-                : 'messages'
-            }
-          >
-            {currentMessages.map((m) => (
-              <Message msg={m} />
-            ))}
             <div ref={messagesEndRef} />
           </div>
-        </div>
+          {currentTab.type !== 'server' && (
-
+            <div class="input-bar">
-        {currentTab.type === 'channel' && (
+              <input
-          <UserList
+                ref={inputRef}
-            members={currentMembers}
+                placeholder={`Message ${currentTab.name}...`}
-            userModes={currentUserModes}
+                value={input}
-            onDM={openDM}
+                onInput={e => setInput(e.target.value)}
+                onKeyDown={e => e.key === 'Enter' && sendMessage()}
               />
+              <button onClick={sendMessage}>Send</button>
+            </div>
           )}
         </div>
 
-      <div class="input-bar">
+        {currentTab.type === 'channel' && (
-        <span class="input-nick">{nick}</span>
+          <div class="user-list">
-        <input
+            <h3>Users ({currentMembers.length})</h3>
-          ref={inputRef}
+            {currentMembers.map(u => (
-          placeholder={
+              <div class="user" onClick={() => openDM(u.nick)} style={{ color: nickColor(u.nick) }}>
-            currentTab.type === 'server'
+                {u.nick}
-              ? 'Type /join #channel to get started...'
+              </div>
-              : `Message ${currentTab.name}...`
+            ))}
-          }
+          </div>
-          value={input}
+        )}
-          onInput={(e) => setInput(e.target.value)}
-          onKeyDown={handleInputKeyDown}
-        />
       </div>
     </div>
   );

web/src/style.css

@@ -1,40 +1,28 @@
-* {
+* { margin: 0; padding: 0; box-sizing: border-box; }
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-}
 
 :root {
-  --bg: #0a0e14;
+  --bg: #1a1a2e;
-  --bg-secondary: #0d1117;
+  --bg-secondary: #16213e;
-  --bg-input: #161b22;
+  --bg-input: #0f3460;
-  --bg-highlight: #1a2030;
+  --text: #e0e0e0;
-  --text: #c9d1d9;
+  --text-muted: #888;
-  --text-muted: #6e7681;
+  --accent: #e94560;
-  --accent: #58a6ff;
+  --accent2: #0f3460;
-  --accent-dim: #1f6feb;
+  --border: #2a2a4a;
-  --border: #21262d;
+  --nick: #53a8b6;
-  --nick: #79c0ff;
+  --timestamp: #666;
-  --timestamp: #484f58;
+  --tab-active: #e94560;
-  --tab-active: #58a6ff;
+  --tab-bg: #16213e;
-  --tab-bg: #0d1117;
+  --tab-hover: #1a1a3e;
-  --tab-hover: #161b22;
+  --topic-bg: #121a30;
-  --topic-bg: #0d1117;
+  --unread-bg: #e94560;
-  --unread-bg: #da3633;
+  --warn: #f0ad4e;
-  --warn: #d29922;
-  --op-color: #f0883e;
-  --voice-color: #3fb950;
-  --action-color: #bc8cff;
-  --system-color: #484f58;
 }
 
-html,
+html, body, #root {
-body,
-#root {
   height: 100%;
-  font-family: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'Courier New',
+  font-family: 'Courier New', Courier, monospace;
-    Courier, monospace;
+  font-size: 14px;
-  font-size: 13px;
   background: var(--bg);
   color: var(--text);
 }
@@ -69,19 +57,15 @@ body,
   padding: 10px 24px;
   font-size: 16px;
   font-family: inherit;
-  background: var(--accent-dim);
+  background: var(--accent);
   border: none;
   color: white;
   border-radius: 4px;
   cursor: pointer;
 }
 
-.login-screen button:hover {
-  background: var(--accent);
-}
-
 .login-screen .error {
-  color: var(--unread-bg);
+  color: var(--accent);
 }
 
 .login-screen .motd {
@@ -105,63 +89,36 @@ body,
   border-bottom: 1px solid var(--border);
   overflow-x: auto;
   flex-shrink: 0;
-  align-items: stretch;
+  align-items: center;
-  min-height: 32px;
-}
-
-.tab-bar::-webkit-scrollbar {
-  height: 2px;
-}
-
-.tab-bar::-webkit-scrollbar-thumb {
-  background: var(--border);
 }
 
 .tab {
-  display: flex;
+  padding: 8px 16px;
-  align-items: center;
-  padding: 6px 12px;
   cursor: pointer;
   border-bottom: 2px solid transparent;
   white-space: nowrap;
   color: var(--text-muted);
   user-select: none;
-  font-size: 12px;
+  position: relative;
-  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: 14px;
+  font-size: 12px;
-  line-height: 1;
-  flex-shrink: 0;
 }
 
 .tab .close-btn:hover {
-  color: var(--unread-bg);
+  color: var(--accent);
 }
 
 .tab .unread-badge {
@@ -170,22 +127,19 @@ body,
   color: white;
   font-size: 10px;
   font-weight: bold;
-  padding: 0 5px;
+  padding: 1px 5px;
   border-radius: 8px;
+  margin-left: 6px;
   min-width: 16px;
   text-align: center;
-  line-height: 16px;
-  flex-shrink: 0;
 }
 
 /* Connection status */
 .connection-status {
-  display: flex;
+  padding: 4px 12px;
-  align-items: center;
-  padding: 0 12px;
   background: var(--warn);
-  color: var(--bg);
+  color: #1a1a2e;
-  font-size: 11px;
+  font-size: 12px;
   font-weight: bold;
   white-space: nowrap;
   flex-shrink: 0;
@@ -193,7 +147,7 @@ body,
 
 /* Topic bar */
 .topic-bar {
-  padding: 4px 12px;
+  padding: 6px 12px;
   background: var(--topic-bg);
   border-bottom: 1px solid var(--border);
   color: var(--text-muted);
@@ -204,11 +158,6 @@ body,
   flex-shrink: 0;
 }
 
-.topic-bar .topic-label {
-  color: var(--accent);
-  font-weight: bold;
-}
-
 /* Content area */
 .content {
   display: flex;
@@ -222,210 +171,147 @@ body,
   display: flex;
   flex-direction: column;
   overflow: hidden;
-  min-width: 0;
 }
 
 .messages {
   flex: 1;
   overflow-y: auto;
-  padding: 4px 0;
+  padding: 8px 12px;
-}
-
-.messages::-webkit-scrollbar {
-  width: 6px;
-}
-
-.messages::-webkit-scrollbar-thumb {
-  background: var(--border);
-  border-radius: 3px;
 }
 
 .message {
-  padding: 1px 12px;
+  padding: 2px 0;
-  line-height: 1.5;
+  line-height: 1.4;
   word-wrap: break-word;
 }
 
-.message:hover {
-  background: var(--bg-highlight);
-}
-
 .message .timestamp {
   color: var(--timestamp);
-  font-size: 11px;
+  font-size: 12px;
-  margin-right: 6px;
+  margin-right: 8px;
 }
 
 .message .nick {
+  color: var(--nick);
   font-weight: bold;
-  margin-right: 6px;
+  margin-right: 8px;
 }
 
-.message .nick::before {
+.message .nick::before { content: '<'; }
-  content: '<';
+.message .nick::after { content: '>'; }
-  color: var(--text-muted);
-}
-
-.message .nick::after {
-  content: '>';
-  color: var(--text-muted);
-}
 
 .message.system {
-  color: var(--system-color);
+  color: var(--text-muted);
   font-style: italic;
 }
 
-.message.system .timestamp {
+.message.system .nick {
-  color: var(--timestamp);
+  color: var(--text-muted);
 }
 
-.message.system .content::before {
+.message.system .nick::before,
-  content: '*** ';
+.message.system .nick::after { content: ''; }
-}
 
-.message.action {
+/* Input */
-  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: 8px 8px;
+  padding: 10px 12px;
   font-family: inherit;
-  font-size: 13px;
+  font-size: 14px;
-  background: transparent;
+  background: var(--bg-input);
   border: none;
   color: var(--text);
   outline: none;
 }
 
-.input-bar input::placeholder {
+.input-bar button {
-  color: var(--text-muted);
+  padding: 10px 16px;
+  font-family: inherit;
+  background: var(--accent);
+  border: none;
+  color: white;
+  cursor: pointer;
 }
 
 /* User list */
 .user-list {
-  width: 170px;
+  width: 160px;
   background: var(--bg-secondary);
   border-left: 1px solid var(--border);
-  display: flex;
+  overflow-y: auto;
-  flex-direction: column;
+  padding: 8px;
   flex-shrink: 0;
 }
 
-.user-list-header {
+.user-list h3 {
-  padding: 6px 10px;
   color: var(--text-muted);
   font-size: 11px;
   text-transform: uppercase;
-  letter-spacing: 0.5px;
+  margin-bottom: 8px;
-  border-bottom: 1px solid var(--border);
+  letter-spacing: 1px;
-  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: 2px 10px;
+  padding: 3px 4px;
-  font-size: 12px;
+  color: var(--nick);
+  font-size: 13px;
   cursor: pointer;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  color: var(--text);
 }
 
 .user-list .user:hover {
   background: var(--tab-hover);
 }
 
-.user-list .user.op {
+/* Server tab */
-  color: var(--op-color);
-}
-
-.user-list .user.voice {
-  color: var(--voice-color);
-}
-
-/* Server tab messages */
 .server-messages {
   color: var(--text-muted);
-  padding: 8px 12px;
+  padding: 12px;
   white-space: pre-wrap;
   overflow-y: auto;
   flex: 1;
 }
 
-.server-messages .message {
+/* Channel join dialog */
-  padding: 1px 0;
+.join-dialog {
+  padding: 12px;
+  display: flex;
+  gap: 8px;
+  background: var(--bg-secondary);
+  border-bottom: 1px solid var(--border);
+  margin-left: auto;
 }
 
-.server-messages .message:hover {
+.join-dialog input {
-  background: var(--bg-highlight);
+  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 {
+  .user-list { display: none; }
-    display: none;
+  .tab { padding: 6px 10px; font-size: 13px; }
-  }
-
-  .tab {
-    padding: 5px 8px;
-    font-size: 11px;
-  }
-
-  .input-bar .input-nick {
-    padding-left: 8px;
-    font-size: 12px;
-  }
-
-  .input-bar input {
-    font-size: 12px;
-  }
 }