From 44c308bd06d502da545212b5c250fa4b31869e6d Mon Sep 17 00:00:00 2001
From: hzhang <hzhang@hangman-lab.top>
Date: Fri, 15 May 2026 16:52:44 +0100
Subject: [PATCH] feat(frontend): closed-channel read-only UI

Closed channels: composer replaced by a read-only banner; history still
viewable; GuildChannel carries closed.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/index.css          | 11 +++++++++++
 src/pages/ChatPage.tsx | 42 +++++++++++++++++++++++-------------------
 2 files changed, 34 insertions(+), 19 deletions(-)

diff --git a/src/index.css b/src/index.css
index a196794..e35eb6f 100644
--- a/src/index.css
+++ b/src/index.css
@@ -683,6 +683,17 @@ button {
 .dc-composer .btn {
   flex: none;
 }
+.dc-closed-banner {
+  flex: none;
+  margin: 0 16px 20px;
+  padding: 12px 14px;
+  text-align: center;
+  color: var(--text-muted);
+  background: var(--elevated);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  font-size: 13px;
+}
 
 /* members */
 .dc-members {
diff --git a/src/pages/ChatPage.tsx b/src/pages/ChatPage.tsx
index a3257ee..507c48e 100644
--- a/src/pages/ChatPage.tsx
+++ b/src/pages/ChatPage.tsx
@@ -34,7 +34,7 @@ function timeOf(iso?: string): string {
 const X_TYPES = ['general', 'work', 'report', 'discuss', 'triage', 'custom'] as const
 type XType = (typeof X_TYPES)[number]
 
-type GuildChannel = { id: string; name: string; guildId?: string; xType?: XType; isMember?: boolean; isPublic?: boolean }
+type GuildChannel = { id: string; name: string; guildId?: string; xType?: XType; isMember?: boolean; isPublic?: boolean; closed?: boolean }
 type MemberItem = { userId: string; email: string; name: string; status: string }
 
 export default function ChatPage() {
@@ -500,24 +500,28 @@ export default function ChatPage() {
           ))}
         </div>
 
-        <form
-          className="dc-composer"
-          onSubmit={(e) => {
-            e.preventDefault()
-            void sendMessage()
-          }}
-        >
-          <input
-            className="input"
-            value={content}
-            onChange={(e) => setContent(e.target.value)}
-            placeholder={currentChannel ? `Message #${currentChannel.name}` : 'Select a channel first'}
-            disabled={!currentChannel}
-          />
-          <button className="btn" type="submit" disabled={!currentChannel || !content.trim()}>
-            Send
-          </button>
-        </form>
+        {currentChannel?.closed ? (
+          <div className="dc-closed-banner">This channel is closed — history is read-only.</div>
+        ) : (
+          <form
+            className="dc-composer"
+            onSubmit={(e) => {
+              e.preventDefault()
+              void sendMessage()
+            }}
+          >
+            <input
+              className="input"
+              value={content}
+              onChange={(e) => setContent(e.target.value)}
+              placeholder={currentChannel ? `Message #${currentChannel.name}` : 'Select a channel first'}
+              disabled={!currentChannel}
+            />
+            <button className="btn" type="submit" disabled={!currentChannel || !content.trim()}>
+              Send
+            </button>
+          </form>
+        )}
       </main>
 
       {showMembers ? (