From 396b2fd231f950980114b351c7aa4fc8e15cfad4 Mon Sep 17 00:00:00 2001
From: hzhang <hzhang@hangman-lab.top>
Date: Fri, 15 May 2026 09:35:37 +0100
Subject: [PATCH] feat(frontend): channel type selector on create

Required Type dropdown (general|work|report|discuss|triage|custom) in the
create-channel modal; sends xType; shows type badge on channel rows.

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

diff --git a/src/pages/ChatPage.tsx b/src/pages/ChatPage.tsx
index e48aee1..cd09f72 100644
--- a/src/pages/ChatPage.tsx
+++ b/src/pages/ChatPage.tsx
@@ -25,7 +25,10 @@ function timeOf(iso?: string): string {
   return d.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
 }
 
-type GuildChannel = { id: string; name: string; guildId?: 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 }
 type MemberItem = { userId: string; email: string; name: string; status: string }
 
 export default function ChatPage() {
@@ -41,6 +44,7 @@ export default function ChatPage() {
   const [joinGuildNodeId, setJoinGuildNodeId] = useState('')
   const [selectedMemberIds, setSelectedMemberIds] = useState<string[]>([])
   const [newChannelPublic, setNewChannelPublic] = useState(false)
+  const [newChannelXType, setNewChannelXType] = useState<XType>('general')
   const [showCreateChannelModal, setShowCreateChannelModal] = useState(false)
   const [showSettingsModal, setShowSettingsModal] = useState(false)
   const [showAddGuildModal, setShowAddGuildModal] = useState(false)
@@ -178,6 +182,7 @@ export default function ChatPage() {
       const payload = {
         name: newChannelName.trim(),
         guildId: effectiveGuildId,
+        xType: newChannelXType,
         isPublic: newChannelPublic,
         memberUserIds: selectedMemberIds,
       }
@@ -186,6 +191,7 @@ export default function ChatPage() {
       setNewChannelName('')
       setSelectedMemberIds([])
       setNewChannelPublic(false)
+      setNewChannelXType('general')
       setShowCreateChannelModal(false)
       await loadChannels()
       if (createdId) setSelectedChannelId(createdId)
@@ -287,6 +293,7 @@ export default function ChatPage() {
               >
                 <span className="hash">#</span>
                 <span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{c.name}</span>
+                {c.xType ? <span className="chan-tag">{c.xType}</span> : null}
               </button>
             ))
           ) : (
@@ -422,6 +429,20 @@ export default function ChatPage() {
               onChange={(e) => setNewChannelName(e.target.value)}
               placeholder="Channel name"
             />
+            <div className="field" style={{ marginTop: 10 }}>
+              <label>Type</label>
+              <select
+                className="input"
+                value={newChannelXType}
+                onChange={(e) => setNewChannelXType(e.target.value as XType)}
+              >
+                {X_TYPES.map((t) => (
+                  <option key={t} value={t}>
+                    {t}
+                  </option>
+                ))}
+              </select>
+            </div>
             <label className="check-row" style={{ marginTop: 10 }}>
               <input type="checkbox" checked={newChannelPublic} onChange={(e) => setNewChannelPublic(e.target.checked)} />
               <span>Public — visible to all guild members</span>