feat(frontend): public channels, self-excluded member picker, editable display name

- create-channel modal: Public checkbox (default off), self excluded from
  member list (creator auto-added), shows member display names
- Settings modal to edit your own display name
- members panel shows names and marks (you)

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

src/pages/ChatPage.tsx

@@ -12,10 +12,10 @@ type MessageItem = {
 }
 
 type GuildChannel = { id: string; name: string; guildId?: string }
-type MemberItem = { userId: string; email: string; status: string }
+type MemberItem = { userId: string; email: string; name: string; status: string }
 
 export default function ChatPage() {
-  const { session, logout, ensureFreshToken, refreshGuilds } = useAuth()
+  const { session, logout, ensureFreshToken, refreshGuilds, updateName } = useAuth()
   const [selectedGuildId, setSelectedGuildId] = useState('')
   const [selectedChannelId, setSelectedChannelId] = useState('')
   const [channels, setChannels] = useState<GuildChannel[]>([])
@@ -26,7 +26,10 @@ export default function ChatPage() {
   const [newChannelName, setNewChannelName] = useState('')
   const [joinGuildNodeId, setJoinGuildNodeId] = useState('')
   const [selectedMemberIds, setSelectedMemberIds] = useState<string[]>([])
+  const [newChannelPublic, setNewChannelPublic] = useState(false)
   const [showCreateChannelModal, setShowCreateChannelModal] = useState(false)
+  const [showSettingsModal, setShowSettingsModal] = useState(false)
+  const [settingsName, setSettingsName] = useState('')
   const [showGuilds, setShowGuilds] = useState(true)
   const [showChannels, setShowChannels] = useState(true)
   const [showMembers, setShowMembers] = useState(true)
@@ -153,12 +156,14 @@ export default function ChatPage() {
       const payload = {
         name: newChannelName.trim(),
         guildId: effectiveGuildId,
+        isPublic: newChannelPublic,
         memberUserIds: selectedMemberIds,
       }
       const res = await guildApi().post('/channels', payload)
       const createdId = res.data?.id as string | undefined
       setNewChannelName('')
       setSelectedMemberIds([])
+      setNewChannelPublic(false)
       setShowCreateChannelModal(false)
       await loadChannels()
       if (createdId) setSelectedChannelId(createdId)
@@ -167,6 +172,21 @@ export default function ChatPage() {
     }
   }
 
+  async function saveName() {
+    const trimmed = settingsName.trim()
+    if (!trimmed) {
+      setError('Name must not be empty')
+      return
+    }
+    try {
+      await updateName(trimmed)
+      setShowSettingsModal(false)
+      await loadMembers()
+    } catch {
+      setError('Failed to update name')
+    }
+  }
+
   useEffect(() => {
     void loadMembers()
     setSelectedMemberIds([])
@@ -263,7 +283,12 @@ export default function ChatPage() {
           <h3>Members</h3>
           <ul className="list-reset">
             {members.map((m) => (
-              <li key={m.userId}><span className="muted">{m.email}</span></li>
+              <li key={m.userId}>
+                <span className="muted">
+                  {m.name || m.email}
+                  {m.userId === session?.user.id ? ' (you)' : ''}
+                </span>
+              </li>
             ))}
           </ul>
         </div>
@@ -274,7 +299,16 @@ export default function ChatPage() {
         <button className="btn btn-secondary" onClick={() => setShowChannels((v) => !v)}>{showChannels ? 'Hide v2' : 'Show v2'}</button>
         <button className="btn btn-secondary" onClick={() => setShowMembers((v) => !v)}>{showMembers ? 'Hide v4' : 'Show v4'}</button>
         <button className="btn btn-secondary" onClick={() => void logout()}>Logout</button>
-        <button className="btn btn-secondary" type="button">Settings</button>
+        <button
+          className="btn btn-secondary"
+          type="button"
+          onClick={() => {
+            setSettingsName(session?.user.name ?? '')
+            setShowSettingsModal(true)
+          }}
+        >
+          Settings
+        </button>
       </div>
 
       {showCreateChannelModal ? (
@@ -282,14 +316,27 @@ export default function ChatPage() {
           <div className="modal-card" onClick={(e) => e.stopPropagation()}>
             <h3>Create channel</h3>
             <input className="input" value={newChannelName} onChange={(e) => setNewChannelName(e.target.value)} placeholder="Channel name" />
-            <p className="muted" style={{ marginTop: 8 }}>Select members to include</p>
+            <label className="row-wrap" style={{ alignItems: 'center', marginTop: 8 }}>
+              <input type="checkbox" checked={newChannelPublic} onChange={(e) => setNewChannelPublic(e.target.checked)} />
+              <span>Public (visible to all guild members)</span>
+            </label>
+            <p className="muted" style={{ marginTop: 8 }}>
+              {newChannelPublic ? 'You are added automatically; all guild members can see it.' : 'You are added automatically. Select members to include'}
+            </p>
             <div className="modal-list">
-              {members.map((m) => (
-                <label key={m.userId} className="row-wrap" style={{ alignItems: 'center' }}>
-                  <input type="checkbox" checked={selectedMemberIds.includes(m.userId)} onChange={() => toggleMember(m.userId)} />
-                  <span>{m.email}</span>
-                </label>
-              ))}
+              {members
+                .filter((m) => m.userId !== session?.user.id)
+                .map((m) => (
+                  <label key={m.userId} className="row-wrap" style={{ alignItems: 'center' }}>
+                    <input
+                      type="checkbox"
+                      checked={selectedMemberIds.includes(m.userId)}
+                      disabled={newChannelPublic}
+                      onChange={() => toggleMember(m.userId)}
+                    />
+                    <span>{m.name || m.email}</span>
+                  </label>
+                ))}
             </div>
             <div className="row-wrap" style={{ marginTop: 12 }}>
               <button className="btn" onClick={createChannel}>Create</button>
@@ -299,6 +346,26 @@ export default function ChatPage() {
         </div>
       ) : null}
 
+      {showSettingsModal ? (
+        <div className="modal-backdrop" onClick={() => setShowSettingsModal(false)}>
+          <div className="modal-card" onClick={(e) => e.stopPropagation()}>
+            <h3>Settings</h3>
+            <p className="muted">Signed in as {session?.user.email}</p>
+            <p className="muted" style={{ marginTop: 8 }}>Display name</p>
+            <input
+              className="input"
+              value={settingsName}
+              onChange={(e) => setSettingsName(e.target.value)}
+              placeholder="Your name"
+            />
+            <div className="row-wrap" style={{ marginTop: 12 }}>
+              <button className="btn" onClick={saveName}>Save</button>
+              <button className="btn btn-secondary" onClick={() => setShowSettingsModal(false)}>Cancel</button>
+            </div>
+          </div>
+        </div>
+      ) : null}
+
       {error ? (
         <div className="modal-backdrop" onClick={() => setError('')}>
           <div className="modal-card" onClick={(e) => e.stopPropagation()}>