From c10cdcf2e5f5011baae479f893fef6b8d598d6d6 Mon Sep 17 00:00:00 2001
From: hzhang <hzhang@hangman-lab.top>
Date: Fri, 15 May 2026 08:52:25 +0100
Subject: [PATCH] fix(frontend): create channel under selected guild and
 surface errors via modal

- createChannel falls back to selectedGuildId when guildDbId is unknown,
  so the first channel of a guild can be created (no chicken-and-egg)
- channel is created under the currently selected guild
- errors now show in a dismissible modal instead of the Messages pane

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/pages/ChatPage.tsx | 20 ++++++++++++++++----
 1 file changed, 16 insertions(+), 4 deletions(-)

diff --git a/src/pages/ChatPage.tsx b/src/pages/ChatPage.tsx
index 9f1d41c..c5ce19f 100644
--- a/src/pages/ChatPage.tsx
+++ b/src/pages/ChatPage.tsx
@@ -143,15 +143,16 @@ export default function ChatPage() {
 
   async function createChannel() {
     if (!guild || !guildToken || !newChannelName.trim()) return
-    if (!guildDbId) {
-      setError('Cannot create channel: guildId is missing')
+    const effectiveGuildId = guildDbId || selectedGuildId
+    if (!effectiveGuildId) {
+      setError('Cannot create channel: no guild selected')
       return
     }
     setError('')
     try {
       const payload = {
         name: newChannelName.trim(),
-        guildId: guildDbId,
+        guildId: effectiveGuildId,
         memberUserIds: selectedMemberIds,
       }
       const res = await guildApi().post('/channels', payload)
@@ -242,7 +243,6 @@ export default function ChatPage() {
           <div className="panel chat-history">
             <h3>Messages</h3>
             {loading ? <p className="muted">Loading...</p> : null}
-            {error ? <p className="error-text">{error}</p> : null}
             <ul className="list-reset">
               {messages.map((m) => (
                 <li key={m.messageId} className="card" style={{ marginTop: 8 }}>
@@ -298,6 +298,18 @@ export default function ChatPage() {
           </div>
         </div>
       ) : null}
+
+      {error ? (
+        <div className="modal-backdrop" onClick={() => setError('')}>
+          <div className="modal-card" onClick={(e) => e.stopPropagation()}>
+            <h3>Error</h3>
+            <p className="error-text">{error}</p>
+            <div className="row-wrap" style={{ marginTop: 12 }}>
+              <button className="btn" onClick={() => setError('')}>OK</button>
+            </div>
+          </div>
+        </div>
+      ) : null}
     </section>
   )
 }