feat(frontend): Discord-style dark redesign

- full design system rewrite (dark theme, system tokens)
- chat shell: server rail / channel sidebar / message area / members
- message rows with avatars, author + time; empty/loading states
- login screen redesign; add-guild moved to a modal
- removed debug v1/v2/v4 panel toggles; members toggle in topbar

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

src/pages/ChatPage.tsx

@@ -9,6 +9,20 @@ type MessageItem = {
   seq: number
   content: string
   isDeleted?: boolean
+  authorUserId?: string
+  createdAt?: string
+}
+
+function initials(s: string): string {
+  const t = (s || '?').trim()
+  return t.slice(0, 2).toUpperCase()
+}
+
+function timeOf(iso?: string): string {
+  if (!iso) return ''
+  const d = new Date(iso)
+  if (Number.isNaN(d.getTime())) return ''
+  return d.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
 }
 
 type GuildChannel = { id: string; name: string; guildId?: string }
@@ -29,9 +43,8 @@ export default function ChatPage() {
   const [newChannelPublic, setNewChannelPublic] = useState(false)
   const [showCreateChannelModal, setShowCreateChannelModal] = useState(false)
   const [showSettingsModal, setShowSettingsModal] = useState(false)
+  const [showAddGuildModal, setShowAddGuildModal] = useState(false)
   const [settingsName, setSettingsName] = useState('')
-  const [showGuilds, setShowGuilds] = useState(true)
-  const [showChannels, setShowChannels] = useState(true)
   const [showMembers, setShowMembers] = useState(true)
   const [loading, setLoading] = useState(false)
   const [error, setError] = useState('')
@@ -143,6 +156,7 @@ export default function ChatPage() {
       await joinGuildCenter(session.centerApiBase, token, joinGuildNodeId.trim())
       await refreshGuilds()
       setJoinGuildNodeId('')
+      setShowAddGuildModal(false)
     } catch {
       setError('Failed to add guild')
     }
@@ -231,111 +245,197 @@ export default function ChatPage() {
     }
   }, [socket, selectedChannelId])
 
+  const currentChannel = channels.find((c) => c.id === selectedChannelId) ?? null
+  const nameById = new Map(members.map((m) => [m.userId, m.name || m.email]))
+  const authorLabel = (uid?: string) =>
+    uid ? (uid === session?.user.id ? session?.user.name || 'You' : nameById.get(uid) || uid.slice(0, 8)) : 'unknown'
+
   return (
-    <section className="chat-layout">
-      <div className={`chat-top-grid ${!showGuilds ? 'hide-v1' : ''} ${!showChannels ? 'hide-v2' : ''} ${!showMembers ? 'hide-v4' : ''}`}>
-        <div className="panel col-list col-v1">
-          <h3>Guilds</h3>
-          <div className="row-wrap" style={{ marginBottom: 8 }}>
-            <input className="input" value={joinGuildNodeId} onChange={(e) => setJoinGuildNodeId(e.target.value)} placeholder="Guild nodeId" />
-            <button className="btn btn-secondary" onClick={addGuild}>Add guild</button>
+    <div className="dc-shell">
+      <nav className="dc-rail">
+        {guilds.map((g) => (
+          <button
+            key={g.nodeId}
+            className={`rail-btn ${selectedGuildId === g.nodeId ? 'active' : ''}`}
+            title={g.name}
+            onClick={() => setSelectedGuildId(g.nodeId)}
+          >
+            {initials(g.name)}
+          </button>
+        ))}
+        {guilds.length ? <div className="rail-sep" /> : null}
+        <button className="rail-btn rail-add" title="Add guild" onClick={() => setShowAddGuildModal(true)}>
+          +
+        </button>
+      </nav>
+
+      <aside className="dc-sidebar">
+        <div className="dc-sidebar-head">{guild?.name ?? 'No guild selected'}</div>
+        <div className="dc-sidebar-scroll">
+          <div className="dc-section-label">
+            <span>Channels</span>
+            <button title="Create channel" onClick={() => setShowCreateChannelModal(true)}>
+              +
+            </button>
           </div>
-          <ul className="list-reset">
-            {guilds.map((g) => (
-              <li key={g.nodeId}>
-                <button className={`list-btn ${selectedGuildId === g.nodeId ? 'active' : ''}`} onClick={() => setSelectedGuildId(g.nodeId)}>
-                  {g.name}
-                </button>
-              </li>
-            ))}
-          </ul>
+          {channels.length ? (
+            channels.map((c) => (
+              <button
+                key={c.id}
+                className={`chan-btn ${selectedChannelId === c.id ? 'active' : ''}`}
+                onClick={() => setSelectedChannelId(c.id)}
+              >
+                <span className="hash">#</span>
+                <span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{c.name}</span>
+              </button>
+            ))
+          ) : (
+            <div className="dc-empty">{guild ? 'No channels yet' : 'Pick a guild from the left'}</div>
+          )}
+        </div>
+        <div className="dc-userbar">
+          <div className="avatar">{initials(session?.user.name || session?.user.email || '?')}</div>
+          <div className="who">
+            <div className="nm">{session?.user.name || session?.user.email}</div>
+            <div className="sub">{session?.user.email}</div>
+          </div>
+          <button
+            className="icon-btn"
+            title="Settings"
+            onClick={() => {
+              setSettingsName(session?.user.name ?? '')
+              setShowSettingsModal(true)
+            }}
+          >
+            ⚙
+          </button>
+          <button className="icon-btn" title="Logout" onClick={() => void logout()}>
+            ⏻
+          </button>
+        </div>
+      </aside>
+
+      <main className="dc-main">
+        <header className="dc-topbar">
+          {currentChannel ? (
+            <span className="title">
+              <span className="hash">#</span>
+              {currentChannel.name}
+            </span>
+          ) : (
+            <span className="title muted">Select a channel</span>
+          )}
+          <span className="spacer" />
+          <button
+            className="icon-btn"
+            title={showMembers ? 'Hide members' : 'Show members'}
+            onClick={() => setShowMembers((v) => !v)}
+          >
+            ☰
+          </button>
+        </header>
+
+        <div className="dc-messages">
+          {loading ? <p className="muted" style={{ padding: 8 }}>Loading…</p> : null}
+          {!loading && !messages.length ? (
+            <div className="dc-empty-center">
+              {currentChannel ? `This is the start of #${currentChannel.name}` : 'No channel selected'}
+            </div>
+          ) : null}
+          {messages.map((m) => (
+            <div key={m.messageId} className={`msg ${m.isDeleted ? 'deleted' : ''}`}>
+              <div className="avatar">{initials(authorLabel(m.authorUserId))}</div>
+              <div className="body">
+                <div className="meta">
+                  <span className="author">{authorLabel(m.authorUserId)}</span>
+                  <span className="time">{timeOf(m.createdAt)} · #{m.seq}</span>
+                </div>
+                <div className="text">{m.content}</div>
+              </div>
+            </div>
+          ))}
         </div>
 
-        <div className="panel col-list col-v2">
-          <h3>Channels</h3>
-          <div className="row-wrap" style={{ marginBottom: 8 }}>
-            <button className="btn btn-secondary" onClick={() => setShowCreateChannelModal(true)}>Create channel</button>
-          </div>
-          <ul className="list-reset">
-            {channels.map((c) => (
-              <li key={c.id}>
-                <button className={`list-btn ${selectedChannelId === c.id ? 'active' : ''}`} onClick={() => setSelectedChannelId(c.id)}>
-                  #{c.name}
-                </button>
-              </li>
-            ))}
-          </ul>
-        </div>
-
-        <div className="chat-right col-v3">
-          <div className="panel chat-history">
-            <h3>Messages</h3>
-            {loading ? <p className="muted">Loading...</p> : null}
-            <ul className="list-reset">
-              {messages.map((m) => (
-                <li key={m.messageId} className="card" style={{ marginTop: 8 }}>
-                  <div>
-                    <strong>#{m.seq}</strong> {m.content}
-                  </div>
-                </li>
-              ))}
-            </ul>
-          </div>
-          <div className="panel composer">
-            <input className="input" value={content} onChange={(e) => setContent(e.target.value)} placeholder="Type a message" />
-            <button className="btn" onClick={sendMessage}>Send</button>
-          </div>
-        </div>
-
-        <div className="panel col-list col-v4">
-          <h3>Members</h3>
-          <ul className="list-reset">
-            {members.map((m) => (
-              <li key={m.userId}>
-                <span className="muted">
-                  {m.name || m.email}
-                  {m.userId === session?.user.id ? ' (you)' : ''}
-                </span>
-              </li>
-            ))}
-          </ul>
-        </div>
-      </div>
-
-      <div className="panel footer-actions">
-        <button className="btn btn-secondary" onClick={() => setShowGuilds((v) => !v)}>{showGuilds ? 'Hide v1' : 'Show v1'}</button>
-        <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"
-          onClick={() => {
-            setSettingsName(session?.user.name ?? '')
-            setShowSettingsModal(true)
+        <form
+          className="dc-composer"
+          onSubmit={(e) => {
+            e.preventDefault()
+            void sendMessage()
           }}
         >
-          Settings
-        </button>
-      </div>
+          <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 ? (
+        <aside className="dc-members">
+          <div className="dc-section-label">
+            <span>Members — {members.length}</span>
+          </div>
+          {members.map((m) => (
+            <div key={m.userId} className="member-row">
+              <div className="avatar dot">{initials(m.name || m.email)}</div>
+              <div style={{ minWidth: 0 }}>
+                <span className="nm">{m.name || m.email}</span>
+                {m.userId === session?.user.id ? <span className="you">you</span> : null}
+              </div>
+            </div>
+          ))}
+        </aside>
+      ) : null}
+
+      {showAddGuildModal ? (
+        <div className="modal-backdrop" onClick={() => setShowAddGuildModal(false)}>
+          <div className="modal-card" onClick={(e) => e.stopPropagation()}>
+            <h3>Add guild</h3>
+            <p className="muted" style={{ marginBottom: 10 }}>Enter the guild node id to join.</p>
+            <input
+              className="input"
+              value={joinGuildNodeId}
+              onChange={(e) => setJoinGuildNodeId(e.target.value)}
+              placeholder="e.g. test-guild1"
+            />
+            <div className="modal-actions">
+              <button className="btn" onClick={addGuild}>Join</button>
+              <button className="btn btn-secondary" onClick={() => setShowAddGuildModal(false)}>Cancel</button>
+            </div>
+          </div>
+        </div>
+      ) : null}
 
       {showCreateChannelModal ? (
         <div className="modal-backdrop" onClick={() => setShowCreateChannelModal(false)}>
           <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" />
-            <label className="row-wrap" style={{ alignItems: 'center', marginTop: 8 }}>
+            <input
+              className="input"
+              value={newChannelName}
+              onChange={(e) => setNewChannelName(e.target.value)}
+              placeholder="Channel name"
+            />
+            <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>
+              <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 className="muted" style={{ marginTop: 8, fontSize: 13 }}>
+              {newChannelPublic
+                ? "You're added automatically; every guild member can see it."
+                : "You're added automatically. Pick who else to include:"}
             </p>
             <div className="modal-list">
               {members
                 .filter((m) => m.userId !== session?.user.id)
                 .map((m) => (
-                  <label key={m.userId} className="row-wrap" style={{ alignItems: 'center' }}>
+                  <label key={m.userId} className="check-row">
                     <input
                       type="checkbox"
                       checked={selectedMemberIds.includes(m.userId)}
@@ -345,8 +445,11 @@ export default function ChatPage() {
                     <span>{m.name || m.email}</span>
                   </label>
                 ))}
+              {members.filter((m) => m.userId !== session?.user.id).length === 0 ? (
+                <div className="dc-empty">No other members in this guild.</div>
+              ) : null}
             </div>
-            <div className="row-wrap" style={{ marginTop: 12 }}>
+            <div className="modal-actions">
               <button className="btn" onClick={createChannel}>Create</button>
               <button className="btn btn-secondary" onClick={() => setShowCreateChannelModal(false)}>Cancel</button>
             </div>
@@ -358,15 +461,17 @@ export default function ChatPage() {
         <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 }}>
+            <p className="muted" style={{ marginBottom: 12 }}>Signed in as {session?.user.email}</p>
+            <div className="field">
+              <label>Display name</label>
+              <input
+                className="input"
+                value={settingsName}
+                onChange={(e) => setSettingsName(e.target.value)}
+                placeholder="Your name"
+              />
+            </div>
+            <div className="modal-actions">
               <button className="btn" onClick={saveName}>Save</button>
               <button className="btn btn-secondary" onClick={() => setShowSettingsModal(false)}>Cancel</button>
             </div>
@@ -377,14 +482,14 @@ export default function ChatPage() {
       {error ? (
         <div className="modal-backdrop" onClick={() => setError('')}>
           <div className="modal-card" onClick={(e) => e.stopPropagation()}>
-            <h3>Error</h3>
+            <h3>Something went wrong</h3>
             <p className="error-text">{error}</p>
-            <div className="row-wrap" style={{ marginTop: 12 }}>
+            <div className="modal-actions">
               <button className="btn" onClick={() => setError('')}>OK</button>
             </div>
           </div>
         </div>
       ) : null}
-    </section>
+    </div>
   )
 }

src/pages/LoginPage.tsx

@@ -23,27 +23,46 @@ export default function LoginPage() {
   }
 
   return (
-    <section className="panel">
-      <h2>Login</h2>
-      {isAuthed ? <p className="muted">Current user: {session?.user.email}</p> : null}
-      <form onSubmit={onSubmit} className="form-grid" style={{ maxWidth: 460 }}>
-        <input
-          className="input"
-          value={centerApiBase}
-          onChange={(e) => setCenterApiBase(e.target.value)}
-          placeholder="Center API Base (e.g. http://localhost:7001/api)"
-        />
-        <input className="input" value={email} onChange={(e) => setEmail(e.target.value)} placeholder="Email" type="email" />
-        <input
-          className="input"
-          value={password}
-          onChange={(e) => setPassword(e.target.value)}
-          placeholder="Password"
-          type="password"
-        />
-        <button className="btn" type="submit">Sign in</button>
-      </form>
-      {error ? <p className="error-text">{error}</p> : null}
-    </section>
+    <div className="login-screen">
+      <div className="login-card">
+        <h1>Welcome back</h1>
+        <p className="login-sub">
+          {isAuthed ? `Signed in as ${session?.user.email}` : 'Sign in to continue to Fabric'}
+        </p>
+        <form onSubmit={onSubmit}>
+          <div className="field">
+            <label>Center API Base</label>
+            <input
+              className="input"
+              value={centerApiBase}
+              onChange={(e) => setCenterApiBase(e.target.value)}
+              placeholder="http://localhost:7001/api"
+            />
+          </div>
+          <div className="field">
+            <label>Email</label>
+            <input
+              className="input"
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              placeholder="you@example.com"
+              type="email"
+            />
+          </div>
+          <div className="field">
+            <label>Password</label>
+            <input
+              className="input"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              placeholder="••••••••"
+              type="password"
+            />
+          </div>
+          {error ? <p className="error-text" style={{ marginBottom: 12 }}>{error}</p> : null}
+          <button className="btn" type="submit">Sign in</button>
+        </form>
+      </div>
+    </div>
   )
 }