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/index.css

@@ -1,314 +1,642 @@
 :root {
-  --text: #6b6375;
+  --rail: #18191c;
-  --text-h: #08060d;
+  --side: #1f2125;
-  --bg: #fff;
+  --main: #26282d;
-  --border: #e5e4e7;
+  --elevated: #1a1b1e;
-  --code-bg: #f4f3ec;
+  --input: #1a1b1e;
-  --accent: #aa3bff;
+  --hover: rgba(255, 255, 255, 0.04);
-  --accent-bg: rgba(170, 59, 255, 0.1);
+  --active: rgba(168, 85, 247, 0.16);
-  --accent-border: rgba(170, 59, 255, 0.5);
-  --social-bg: rgba(244, 243, 236, 0.5);
-  --shadow:
-    rgba(0, 0, 0, 0.1) 0 10px 15px -3px, rgba(0, 0, 0, 0.05) 0 4px 6px -2px;
 
-  --sans: system-ui, 'Segoe UI', Roboto, sans-serif;
+  --text: #dbdee1;
-  --heading: system-ui, 'Segoe UI', Roboto, sans-serif;
+  --text-muted: #949ba4;
-  --mono: ui-monospace, Consolas, monospace;
+  --text-faint: #6d7178;
+  --text-h: #f2f3f5;
 
-  font: 18px/145% var(--sans);
+  --border: #303237;
-  letter-spacing: 0.18px;
+  --accent: #a855f7;
-  color-scheme: light dark;
+  --accent-strong: #9333ea;
-  color: var(--text);
+  --accent-soft: rgba(168, 85, 247, 0.14);
-  background: var(--bg);
+  --danger: #f23f42;
+  --online: #23a55a;
+
+  --radius: 10px;
+  --radius-sm: 7px;
+  --sans: 'Inter', system-ui, 'Segoe UI', Roboto, sans-serif;
+  --mono: ui-monospace, 'SF Mono', Consolas, monospace;
+
+  color-scheme: dark;
   font-synthesis: none;
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-
-  @media (max-width: 1024px) {
-    font-size: 16px;
-  }
 }
 
-@media (prefers-color-scheme: dark) {
+* {
-  :root {
-    --text: #9ca3af;
-    --text-h: #f3f4f6;
-    --bg: #16171d;
-    --border: #2e303a;
-    --code-bg: #1f2028;
-    --accent: #c084fc;
-    --accent-bg: rgba(192, 132, 252, 0.15);
-    --accent-border: rgba(192, 132, 252, 0.5);
-    --social-bg: rgba(47, 48, 58, 0.5);
-    --shadow:
-      rgba(0, 0, 0, 0.4) 0 10px 15px -3px, rgba(0, 0, 0, 0.25) 0 4px 6px -2px;
-  }
-
-  #social .button-icon {
-    filter: invert(1) brightness(2);
-  }
-}
-
-#root {
-  width: 1126px;
-  max-width: 100%;
-  margin: 0 auto;
-  text-align: center;
-  border-inline: 1px solid var(--border);
-  min-height: 100svh;
-  display: flex;
-  flex-direction: column;
   box-sizing: border-box;
 }
 
-body {
+html,
+body,
+#root {
+  height: 100%;
   margin: 0;
-  background: linear-gradient(180deg, rgba(170, 59, 255, 0.08), transparent 220px) no-repeat var(--bg);
+}
+
+body {
+  font: 15px/1.5 var(--sans);
+  color: var(--text);
+  background: var(--main);
+}
+
+#root {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
 }
 
 a {
   color: var(--accent);
   text-decoration: none;
 }
-
 a:hover {
   text-decoration: underline;
 }
 
-.page-content {
+h1,
-  padding: 18px;
+h2,
-  text-align: left;
+h3,
-}
+h4 {
-
-.chat-layout {
-  display: grid;
-  gap: 12px;
-}
-
-.chat-top-grid {
-  display: grid;
-  grid-template-columns: 220px 260px 1fr 220px;
-  gap: 12px;
-  min-height: 68vh;
-}
-
-.chat-top-grid.hide-v1 {
-  grid-template-columns: 0 260px 1fr 220px;
-}
-
-.chat-top-grid.hide-v2 {
-  grid-template-columns: 220px 0 1fr 220px;
-}
-
-.chat-top-grid.hide-v4 {
-  grid-template-columns: 220px 260px 1fr 0;
-}
-
-.chat-top-grid.hide-v1.hide-v2 {
-  grid-template-columns: 0 0 1fr 220px;
-}
-
-.chat-top-grid.hide-v1.hide-v4 {
-  grid-template-columns: 0 260px 1fr 0;
-}
-
-.chat-top-grid.hide-v2.hide-v4 {
-  grid-template-columns: 220px 0 1fr 0;
-}
-
-.chat-top-grid.hide-v1.hide-v2.hide-v4 {
-  grid-template-columns: 0 0 1fr 0;
-}
-
-.chat-top-grid.hide-v1 .col-v1,
-.chat-top-grid.hide-v2 .col-v2,
-.chat-top-grid.hide-v4 .col-v4 {
-  display: none;
-}
-
-.chat-right {
-  display: grid;
-  grid-template-rows: 1fr auto;
-  gap: 12px;
-  min-height: 0;
-}
-
-.chat-history {
-  overflow: auto;
-}
-
-.composer {
-  display: flex;
-  gap: 8px;
-}
-
-.composer .input {
-  flex: 1;
-}
-
-.footer-actions {
-  display: flex;
-  gap: 8px;
-}
-
-.modal-backdrop {
-  position: fixed;
-  inset: 0;
-  background: rgba(0, 0, 0, 0.45);
-  display: grid;
-  place-items: center;
-  z-index: 30;
-}
-
-.modal-card {
-  width: min(560px, 92vw);
-  max-height: 80vh;
-  overflow: auto;
-  background: var(--bg);
-  border: 1px solid var(--border);
-  border-radius: 12px;
-  padding: 14px;
-}
-
-.modal-list {
-  display: grid;
-  gap: 8px;
-  margin-top: 8px;
-}
-
-.list-btn {
-  width: 100%;
-  text-align: left;
-  border: 1px solid var(--border);
-  background: transparent;
-  border-radius: 8px;
-  padding: 8px 10px;
   color: var(--text-h);
-  cursor: pointer;
+  font-weight: 600;
+  margin: 0;
 }
 
-.list-btn.active {
+p {
-  border-color: var(--accent-border);
+  margin: 0;
-  background: var(--accent-bg);
 }
 
-.panel {
+button {
-  border: 1px solid var(--border);
+  font-family: inherit;
-  border-radius: 12px;
-  padding: 16px;
-  box-shadow: var(--shadow);
-  background: var(--bg);
 }
 
-.form-grid {
+::-webkit-scrollbar {
-  display: grid;
+  width: 8px;
-  gap: 10px;
+  height: 8px;
-}
+}
-
+::-webkit-scrollbar-thumb {
-.row-wrap {
+  background: #00000050;
-  display: flex;
+  border-radius: 8px;
-  gap: 8px;
+}
-  flex-wrap: wrap;
+::-webkit-scrollbar-track {
+  background: transparent;
 }
 
+/* ---------- shared controls ---------- */
 .input {
-  border: 1px solid var(--border);
+  width: 100%;
-  border-radius: 8px;
+  border: 1px solid transparent;
-  padding: 8px 10px;
+  border-radius: var(--radius-sm);
-  min-width: 120px;
+  padding: 10px 12px;
-  background: transparent;
+  background: var(--input);
   color: var(--text-h);
+  font-size: 14px;
+  outline: none;
+  transition: border-color 0.12s ease;
+}
+.input::placeholder {
+  color: var(--text-faint);
 }
-
 .input:focus {
-  outline: 2px solid var(--accent-border);
+  border-color: var(--accent);
-  outline-offset: 1px;
 }
 
 .btn {
-  border: 1px solid var(--accent-border);
+  display: inline-flex;
-  background: var(--accent);
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  border: none;
+  border-radius: var(--radius-sm);
+  padding: 10px 16px;
+  font-size: 14px;
+  font-weight: 600;
   color: #fff;
-  border-radius: 8px;
+  background: var(--accent);
-  padding: 8px 12px;
   cursor: pointer;
+  transition:
+    background 0.12s ease,
+    opacity 0.12s ease,
+    transform 0.05s ease;
+}
+.btn:hover {
+  background: var(--accent-strong);
+}
+.btn:active {
+  transform: translateY(1px);
+}
+.btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
 }
-
 .btn-secondary {
-  background: transparent;
+  background: #3a3d44;
+  color: var(--text-h);
+}
+.btn-secondary:hover {
+  background: #44474f;
+}
+.btn-ghost {
+  background: transparent;
+  color: var(--text-muted);
+}
+.btn-ghost:hover {
+  background: var(--hover);
   color: var(--text-h);
 }
-
 .btn-danger {
-  background: #dc2626;
+  background: var(--danger);
-  border-color: #dc2626;
+}
+.btn-danger:hover {
+  background: #d83a3d;
 }
 
 .muted {
-  color: var(--text);
+  color: var(--text-muted);
 }
-
 .error-text {
-  color: #dc2626;
+  color: #f87171;
-  margin-top: 10px;
 }
-
 .list-reset {
   list-style: none;
   padding: 0;
   margin: 0;
 }
 
-.card {
+/* ---------- login ---------- */
-  border: 1px solid var(--border);
+.login-screen {
-  border-radius: 10px;
+  flex: 1;
-  padding: 10px;
+  min-height: 100vh;
   display: grid;
-  gap: 8px;
+  place-items: center;
-  background: color-mix(in srgb, var(--bg) 95%, var(--accent) 5%);
+  padding: 24px;
+  background:
+    radial-gradient(900px 500px at 50% -10%, rgba(168, 85, 247, 0.22), transparent 60%),
+    var(--main);
 }
-
+.login-card {
-h1,
+  width: min(420px, 100%);
-h2 {
+  background: var(--side);
-  font-family: var(--heading);
+  border: 1px solid var(--border);
-  font-weight: 500;
+  border-radius: 16px;
-  color: var(--text-h);
+  padding: 32px;
+  box-shadow: 0 20px 50px -20px rgba(0, 0, 0, 0.6);
 }
-
+.login-card h1 {
-h1 {
-  font-size: 56px;
-  letter-spacing: -1.68px;
-  margin: 32px 0;
-  @media (max-width: 1024px) {
-    font-size: 36px;
-    margin: 20px 0;
-  }
-}
-h2 {
   font-size: 24px;
-  line-height: 118%;
+  margin-bottom: 4px;
-  letter-spacing: -0.24px;
-  margin: 0 0 8px;
-  @media (max-width: 1024px) {
-    font-size: 20px;
-  }
 }
-p {
+.login-sub {
-  margin: 0;
+  color: var(--text-muted);
+  font-size: 14px;
+  margin-bottom: 24px;
+}
+.field {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  margin-bottom: 16px;
+}
+.field label {
+  font-size: 12px;
+  font-weight: 700;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: var(--text-muted);
+}
+.login-card .btn {
+  width: 100%;
+  margin-top: 4px;
 }
 
-code,
+/* ---------- chat shell ---------- */
-.counter {
+.dc-shell {
-  font-family: var(--mono);
+  flex: 1;
-  display: inline-flex;
+  height: 100vh;
+  display: flex;
+  overflow: hidden;
+  background: var(--main);
+}
+
+/* server rail */
+.dc-rail {
+  width: 72px;
+  background: var(--rail);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  padding: 12px 0;
+  overflow-y: auto;
+}
+.dc-rail::-webkit-scrollbar {
+  display: none;
+}
+.rail-btn {
+  position: relative;
+  width: 48px;
+  height: 48px;
+  border: none;
+  border-radius: 24px;
+  background: var(--side);
+  color: var(--text-h);
+  font-weight: 700;
+  font-size: 15px;
+  cursor: pointer;
+  transition:
+    border-radius 0.15s ease,
+    background 0.15s ease;
+}
+.rail-btn:hover {
+  border-radius: 16px;
+  background: var(--accent);
+  color: #fff;
+}
+.rail-btn.active {
+  border-radius: 16px;
+  background: var(--accent);
+  color: #fff;
+}
+.rail-btn.active::before {
+  content: '';
+  position: absolute;
+  left: -12px;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 4px;
+  height: 28px;
+  background: #fff;
+  border-radius: 0 4px 4px 0;
+}
+.rail-add {
+  background: transparent;
+  color: var(--online);
+  border: 1px solid var(--border);
+  font-size: 22px;
+  line-height: 1;
+}
+.rail-add:hover {
+  background: var(--online);
+  color: #fff;
+}
+.rail-sep {
+  width: 32px;
+  height: 1px;
+  background: var(--border);
+  flex: none;
+}
+
+/* channel sidebar */
+.dc-sidebar {
+  width: 248px;
+  background: var(--side);
+  display: flex;
+  flex-direction: column;
+}
+.dc-sidebar-head {
+  height: 50px;
+  padding: 0 16px;
+  display: flex;
+  align-items: center;
+  font-weight: 700;
+  color: var(--text-h);
+  border-bottom: 1px solid #00000040;
+  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
+}
+.dc-sidebar-scroll {
+  flex: 1;
+  overflow-y: auto;
+  padding: 12px 8px;
+}
+.dc-section-label {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px 8px 4px;
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: var(--text-faint);
+}
+.dc-section-label button {
+  border: none;
+  background: transparent;
+  color: var(--text-faint);
+  font-size: 18px;
+  line-height: 1;
+  cursor: pointer;
+  padding: 0 4px;
+}
+.dc-section-label button:hover {
+  color: var(--text-h);
+}
+.chan-btn {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  text-align: left;
+  border: none;
+  background: transparent;
+  border-radius: var(--radius-sm);
+  padding: 8px 10px;
+  margin: 1px 0;
+  color: var(--text-muted);
+  font-size: 15px;
+  cursor: pointer;
+}
+.chan-btn .hash {
+  color: var(--text-faint);
+  font-weight: 600;
+}
+.chan-btn:hover {
+  background: var(--hover);
+  color: var(--text);
+}
+.chan-btn.active {
+  background: var(--active);
+  color: var(--text-h);
+}
+.chan-tag {
+  margin-left: auto;
+  font-size: 10px;
+  font-weight: 700;
+  color: var(--accent);
+  border: 1px solid var(--accent);
   border-radius: 4px;
+  padding: 0 4px;
+}
+.dc-empty {
+  color: var(--text-faint);
+  font-size: 13px;
+  padding: 8px 10px;
+}
+
+/* user bar */
+.dc-userbar {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 10px;
+  background: var(--elevated);
+}
+.dc-userbar .who {
+  flex: 1;
+  min-width: 0;
+}
+.dc-userbar .who .nm {
+  color: var(--text-h);
+  font-size: 13px;
+  font-weight: 600;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.dc-userbar .who .sub {
+  color: var(--text-muted);
+  font-size: 11px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.icon-btn {
+  width: 32px;
+  height: 32px;
+  border: none;
+  border-radius: 7px;
+  background: transparent;
+  color: var(--text-muted);
+  font-size: 15px;
+  cursor: pointer;
+}
+.icon-btn:hover {
+  background: var(--hover);
   color: var(--text-h);
 }
 
-code {
+/* avatar */
-  font-size: 15px;
+.avatar {
-  line-height: 135%;
+  flex: none;
-  padding: 4px 8px;
+  width: 32px;
-  background: var(--code-bg);
+  height: 32px;
+  border-radius: 50%;
+  display: grid;
+  place-items: center;
+  font-size: 13px;
+  font-weight: 700;
+  color: #fff;
+  background: linear-gradient(135deg, var(--accent), #6d28d9);
+}
+.avatar.lg {
+  width: 40px;
+  height: 40px;
+  font-size: 15px;
+}
+
+/* main column */
+.dc-main {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  background: var(--main);
+}
+.dc-topbar {
+  height: 50px;
+  flex: none;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 0 16px;
+  border-bottom: 1px solid #00000040;
+  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
+}
+.dc-topbar .title {
+  font-weight: 700;
+  color: var(--text-h);
+}
+.dc-topbar .hash {
+  color: var(--text-faint);
+  margin-right: 2px;
+}
+.dc-topbar .spacer {
+  flex: 1;
+}
+
+.dc-messages {
+  flex: 1;
+  overflow-y: auto;
+  padding: 18px 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+.msg {
+  display: flex;
+  gap: 12px;
+  padding: 6px 8px;
+  border-radius: 8px;
+}
+.msg:hover {
+  background: rgba(0, 0, 0, 0.12);
+}
+.msg .body {
+  min-width: 0;
+}
+.msg .meta {
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+}
+.msg .author {
+  font-weight: 600;
+  color: var(--text-h);
+  font-size: 14px;
+}
+.msg .time {
+  font-size: 11px;
+  color: var(--text-faint);
+}
+.msg .text {
+  color: var(--text);
+  word-break: break-word;
+}
+.msg.deleted .text {
+  color: var(--text-faint);
+  font-style: italic;
+}
+.dc-empty-center {
+  margin: auto;
+  text-align: center;
+  color: var(--text-faint);
+}
+
+/* composer */
+.dc-composer {
+  flex: none;
+  display: flex;
+  gap: 10px;
+  padding: 0 16px 20px;
+}
+.dc-composer .input {
+  background: #303237;
+  padding: 12px 14px;
+}
+.dc-composer .btn {
+  flex: none;
+}
+
+/* members */
+.dc-members {
+  width: 232px;
+  background: var(--side);
+  padding: 16px 8px;
+  overflow-y: auto;
+}
+.dc-members .dc-section-label {
+  cursor: default;
+}
+.member-row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 6px 8px;
+  border-radius: var(--radius-sm);
+}
+.member-row:hover {
+  background: var(--hover);
+}
+.member-row .nm {
+  color: var(--text);
+  font-size: 14px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.member-row .you {
+  color: var(--text-faint);
+  font-size: 11px;
+  margin-left: 4px;
+}
+.dot {
+  position: relative;
+}
+.dot::after {
+  content: '';
+  position: absolute;
+  right: -1px;
+  bottom: -1px;
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  background: var(--online);
+  border: 2px solid var(--side);
+}
+
+/* ---------- modal ---------- */
+.modal-backdrop {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.6);
+  backdrop-filter: blur(2px);
+  display: grid;
+  place-items: center;
+  z-index: 50;
+  padding: 20px;
+}
+.modal-card {
+  width: min(460px, 100%);
+  max-height: 84vh;
+  overflow: auto;
+  background: var(--side);
+  border: 1px solid var(--border);
+  border-radius: 14px;
+  padding: 22px;
+  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.7);
+}
+.modal-card h3 {
+  font-size: 18px;
+  margin-bottom: 14px;
+}
+.modal-list {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  margin: 10px 0;
+  max-height: 240px;
+  overflow: auto;
+}
+.check-row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 8px 10px;
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+}
+.check-row:hover {
+  background: var(--hover);
+}
+.check-row input {
+  accent-color: var(--accent);
+  width: 16px;
+  height: 16px;
+}
+.modal-actions {
+  display: flex;
+  gap: 10px;
+  margin-top: 18px;
+}
+.modal-actions .btn {
+  flex: 1;
 }

src/layouts/AppLayout.tsx

@@ -1,17 +1,5 @@
-import { Link, Outlet } from 'react-router-dom'
+import { Outlet } from 'react-router-dom'
-import { useAuth } from '../auth/auth-context'
 
 export default function AppLayout() {
-  const { isAuthed } = useAuth()
+  return <Outlet />
-
-  return (
-    <main className="page-content">
-      {!isAuthed ? (
-        <nav className="row-wrap" style={{ marginBottom: 12 }}>
-          <Link to="/login">Login</Link>
-        </nav>
-      ) : null}
-      <Outlet />
-    </main>
-  )
 }

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="dc-shell">
-      <div className={`chat-top-grid ${!showGuilds ? 'hide-v1' : ''} ${!showChannels ? 'hide-v2' : ''} ${!showMembers ? 'hide-v4' : ''}`}>
+      <nav className="dc-rail">
-        <div className="panel col-list col-v1">
+        {guilds.map((g) => (
-          <h3>Guilds</h3>
+          <button
-          <div className="row-wrap" style={{ marginBottom: 8 }}>
+            key={g.nodeId}
-            <input className="input" value={joinGuildNodeId} onChange={(e) => setJoinGuildNodeId(e.target.value)} placeholder="Guild nodeId" />
+            className={`rail-btn ${selectedGuildId === g.nodeId ? 'active' : ''}`}
-            <button className="btn btn-secondary" onClick={addGuild}>Add guild</button>
+            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">
+          {channels.length ? (
-            {guilds.map((g) => (
+            channels.map((c) => (
-              <li key={g.nodeId}>
+              <button
-                <button className={`list-btn ${selectedGuildId === g.nodeId ? 'active' : ''}`} onClick={() => setSelectedGuildId(g.nodeId)}>
+                key={c.id}
-                  {g.name}
+                className={`chan-btn ${selectedChannelId === c.id ? 'active' : ''}`}
-                </button>
+                onClick={() => setSelectedChannelId(c.id)}
-              </li>
+              >
-            ))}
+                <span className="hash">#</span>
-          </ul>
+                <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">
+        <form
-          <h3>Channels</h3>
+          className="dc-composer"
-          <div className="row-wrap" style={{ marginBottom: 8 }}>
+          onSubmit={(e) => {
-            <button className="btn btn-secondary" onClick={() => setShowCreateChannelModal(true)}>Create channel</button>
+            e.preventDefault()
-          </div>
+            void sendMessage()
-          <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)
           }}
         >
-          Settings
+          <input
-        </button>
+            className="input"
-      </div>
+            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" />
+            <input
-            <label className="row-wrap" style={{ alignItems: 'center', marginTop: 8 }}>
+              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 }}>
+            <p className="muted" style={{ marginTop: 8, fontSize: 13 }}>
-              {newChannelPublic ? 'You are added automatically; all guild members can see it.' : 'You are added automatically. Select members to include'}
+              {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={{ marginBottom: 12 }}>Signed in as {session?.user.email}</p>
-            <p className="muted" style={{ marginTop: 8 }}>Display name</p>
+            <div className="field">
-            <input
+              <label>Display name</label>
-              className="input"
+              <input
-              value={settingsName}
+                className="input"
-              onChange={(e) => setSettingsName(e.target.value)}
+                value={settingsName}
-              placeholder="Your name"
+                onChange={(e) => setSettingsName(e.target.value)}
-            />
+                placeholder="Your name"
-            <div className="row-wrap" style={{ marginTop: 12 }}>
+              />
+            </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">
+    <div className="login-screen">
-      <h2>Login</h2>
+      <div className="login-card">
-      {isAuthed ? <p className="muted">Current user: {session?.user.email}</p> : null}
+        <h1>Welcome back</h1>
-      <form onSubmit={onSubmit} className="form-grid" style={{ maxWidth: 460 }}>
+        <p className="login-sub">
-        <input
+          {isAuthed ? `Signed in as ${session?.user.email}` : 'Sign in to continue to Fabric'}
-          className="input"
+        </p>
-          value={centerApiBase}
+        <form onSubmit={onSubmit}>
-          onChange={(e) => setCenterApiBase(e.target.value)}
+          <div className="field">
-          placeholder="Center API Base (e.g. http://localhost:7001/api)"
+            <label>Center API Base</label>
-        />
+            <input
-        <input className="input" value={email} onChange={(e) => setEmail(e.target.value)} placeholder="Email" type="email" />
+              className="input"
-        <input
+              value={centerApiBase}
-          className="input"
+              onChange={(e) => setCenterApiBase(e.target.value)}
-          value={password}
+              placeholder="http://localhost:7001/api"
-          onChange={(e) => setPassword(e.target.value)}
+            />
-          placeholder="Password"
+          </div>
-          type="password"
+          <div className="field">
-        />
+            <label>Email</label>
-        <button className="btn" type="submit">Sign in</button>
+            <input
-      </form>
+              className="input"
-      {error ? <p className="error-text">{error}</p> : null}
+              value={email}
-    </section>
+              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>
   )
 }