@devchitchat/chat 5.0.0 → 5.0.1

package/pages/design/tokens/index.phtml

@@ -0,0 +1,236 @@
+<h1 class="ds-page-title">Tokens</h1>
+<p class="ds-page-subtitle">
+  CSS custom properties that define the visual language. All tokens are defined on
+  <code>:root</code> and override per theme. Switch the theme picker to see them update live.
+</p>
+
+<!-- ── Colors ────────────────────────────────────────────────────────────── -->
+<div class="ds-section">
+  <h2 class="ds-section-title">Backgrounds</h2>
+  <p class="ds-section-desc">Layered surfaces create the sense of depth (HIG: Depth).</p>
+  <div class="token-grid">
+    <div class="token-swatch">
+      <div class="token-swatch-preview" style="background: var(--bg-base)"></div>
+      <div class="token-swatch-label">
+        <span class="token-swatch-name">--bg-base</span>
+        <span class="token-swatch-value" data-css-var="--bg-base">—</span>
+      </div>
+    </div>
+    <div class="token-swatch">
+      <div class="token-swatch-preview" style="background: var(--bg-sidebar)"></div>
+      <div class="token-swatch-label">
+        <span class="token-swatch-name">--bg-sidebar</span>
+        <span class="token-swatch-value" data-css-var="--bg-sidebar">—</span>
+      </div>
+    </div>
+    <div class="token-swatch">
+      <div class="token-swatch-preview" style="background: var(--bg-elevated)"></div>
+      <div class="token-swatch-label">
+        <span class="token-swatch-name">--bg-elevated</span>
+        <span class="token-swatch-value" data-css-var="--bg-elevated">—</span>
+      </div>
+    </div>
+    <div class="token-swatch">
+      <div class="token-swatch-preview" style="background: var(--bg-input)"></div>
+      <div class="token-swatch-label">
+        <span class="token-swatch-name">--bg-input</span>
+        <span class="token-swatch-value" data-css-var="--bg-input">—</span>
+      </div>
+    </div>
+    <div class="token-swatch">
+      <div class="token-swatch-preview" style="background: var(--bg-hover)"></div>
+      <div class="token-swatch-label">
+        <span class="token-swatch-name">--bg-hover</span>
+        <span class="token-swatch-value" data-css-var="--bg-hover">—</span>
+      </div>
+    </div>
+    <div class="token-swatch">
+      <div class="token-swatch-preview" style="background: var(--bg-active)"></div>
+      <div class="token-swatch-label">
+        <span class="token-swatch-name">--bg-active</span>
+        <span class="token-swatch-value" data-css-var="--bg-active">—</span>
+      </div>
+    </div>
+  </div>
+</div>
+
+<div class="ds-section">
+  <h2 class="ds-section-title">Text</h2>
+  <p class="ds-section-desc">Three levels of hierarchy. Use muted only for metadata, never for actionable content.</p>
+  <div class="ds-canvas">
+    <p style="font-size: 15px; font-weight: 600; color: var(--text-primary); margin: 0 0 8px;">
+      --text-primary — Channel name, message handle, body text
+    </p>
+    <p style="font-size: 14px; color: var(--text-secondary); margin: 0 0 8px;">
+      --text-secondary — Descriptions, labels, nav items at rest
+    </p>
+    <p style="font-size: 13px; color: var(--text-muted); margin: 0;">
+      --text-muted — Timestamps, section headers, placeholder text
+    </p>
+  </div>
+</div>
+
+<div class="ds-section">
+  <h2 class="ds-section-title">Accent &amp; Status</h2>
+  <div class="token-grid">
+    <div class="token-swatch">
+      <div class="token-swatch-preview" style="background: var(--accent)"></div>
+      <div class="token-swatch-label">
+        <span class="token-swatch-name">--accent</span>
+        <span class="token-swatch-value" data-css-var="--accent">—</span>
+      </div>
+    </div>
+    <div class="token-swatch">
+      <div class="token-swatch-preview" style="background: var(--color-success)"></div>
+      <div class="token-swatch-label">
+        <span class="token-swatch-name">--color-success</span>
+        <span class="token-swatch-value" data-css-var="--color-success">—</span>
+      </div>
+    </div>
+    <div class="token-swatch">
+      <div class="token-swatch-preview" style="background: var(--color-danger)"></div>
+      <div class="token-swatch-label">
+        <span class="token-swatch-name">--color-danger</span>
+        <span class="token-swatch-value" data-css-var="--color-danger">—</span>
+      </div>
+    </div>
+    <div class="token-swatch">
+      <div class="token-swatch-preview" style="background: var(--color-warning)"></div>
+      <div class="token-swatch-label">
+        <span class="token-swatch-name">--color-warning</span>
+        <span class="token-swatch-value" data-css-var="--color-warning">—</span>
+      </div>
+    </div>
+    <div class="token-swatch">
+      <div class="token-swatch-preview" style="background: var(--border)"></div>
+      <div class="token-swatch-label">
+        <span class="token-swatch-name">--border</span>
+        <span class="token-swatch-value" data-css-var="--border">—</span>
+      </div>
+    </div>
+  </div>
+</div>
+
+<hr class="ds-divider">
+
+<!-- ── Typography ─────────────────────────────────────────────────────────── -->
+<div class="ds-section">
+  <h2 class="ds-section-title">Typography</h2>
+  <p class="ds-section-desc">System fonts. SF Pro on Apple, Segoe UI on Windows — no web font download required.</p>
+
+  <div class="ds-canvas">
+    <div class="token-row">
+      <div class="token-row-preview" style="background: var(--bg-hover); display: flex; align-items: center; justify-content: center;">
+        <span style="font-family: var(--font-sans); font-size: 13px; font-weight: 600;">Aa</span>
+      </div>
+      <span class="token-row-name">--font-sans</span>
+      <span class="token-row-value">-apple-system, SF Pro Text, system-ui, Segoe UI, sans-serif</span>
+    </div>
+    <div class="token-row">
+      <div class="token-row-preview" style="background: var(--bg-hover); display: flex; align-items: center; justify-content: center;">
+        <span style="font-family: var(--font-mono); font-size: 13px; font-weight: 600;">01</span>
+      </div>
+      <span class="token-row-name">--font-mono</span>
+      <span class="token-row-value">SF Mono, ui-monospace, Cascadia Code, Fira Code, JetBrains Mono</span>
+    </div>
+  </div>
+
+  <div class="ds-canvas" style="margin-top: 12px;">
+    <p style="font-size: 20px; font-weight: 700; margin: 0 0 6px; line-height: 1.2;">Page title — 20px/700</p>
+    <p style="font-size: 17px; font-weight: 600; margin: 0 0 6px; line-height: 1.3;">Section title — 17px/600</p>
+    <p style="font-size: 15px; font-weight: 500; margin: 0 0 6px;">Message handle — 15px/500</p>
+    <p style="font-size: 14px; color: var(--text-secondary); margin: 0 0 6px; line-height: 1.5;">Body text — 14px/400, --text-secondary for descriptions</p>
+    <p style="font-size: 13px; color: var(--text-secondary); margin: 0 0 6px;">UI label — 13px/400, most controls</p>
+    <p style="font-size: 12px; color: var(--text-muted); margin: 0 0 6px;">Timestamp / metadata — 12px/400, --text-muted</p>
+    <p style="font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); margin: 0;">Section label — 11px/600 uppercase</p>
+  </div>
+</div>
+
+<hr class="ds-divider">
+
+<!-- ── Radii ──────────────────────────────────────────────────────────────── -->
+<div class="ds-section">
+  <h2 class="ds-section-title">Border Radius</h2>
+  <p class="ds-section-desc">Consistent rounding communicates surface type and elevation.</p>
+  <div class="ds-canvas ds-canvas--grid">
+    <div style="text-align: center;">
+      <div style="width: 60px; height: 60px; background: var(--accent); border-radius: var(--radius-sm); margin: 0 auto 8px;"></div>
+      <code style="font-size: 11px;">--radius-sm<br>6px</code>
+    </div>
+    <div style="text-align: center;">
+      <div style="width: 60px; height: 60px; background: var(--accent); border-radius: var(--radius-md); margin: 0 auto 8px;"></div>
+      <code style="font-size: 11px;">--radius-md<br>10px</code>
+    </div>
+    <div style="text-align: center;">
+      <div style="width: 60px; height: 60px; background: var(--accent); border-radius: var(--radius-lg); margin: 0 auto 8px;"></div>
+      <code style="font-size: 11px;">--radius-lg<br>14px</code>
+    </div>
+    <div style="text-align: center;">
+      <div style="width: 60px; height: 60px; background: var(--accent); border-radius: var(--radius-xl); margin: 0 auto 8px;"></div>
+      <code style="font-size: 11px;">--radius-xl<br>20px</code>
+    </div>
+    <div style="text-align: center;">
+      <div style="width: 60px; height: 60px; background: var(--accent); border-radius: var(--radius-pill); margin: 0 auto 8px;"></div>
+      <code style="font-size: 11px;">--radius-pill<br>999px</code>
+    </div>
+  </div>
+  <div class="ds-annotation">
+    <strong>Usage guide:</strong> sm → nav items, code blocks, small chips. md → inputs, popovers.
+    lg → panels, modals, cards. xl → large overlays, sheets. pill → tags, reaction pills, primary buttons.
+  </div>
+</div>
+
+<hr class="ds-divider">
+
+<!-- ── Shadows ─────────────────────────────────────────────────────────────── -->
+<div class="ds-section">
+  <h2 class="ds-section-title">Shadows</h2>
+  <p class="ds-section-desc">Used for elevation — overlays, floating elements, modals.</p>
+  <div class="ds-canvas ds-canvas--grid" style="gap: 32px;">
+    <div style="text-align: center;">
+      <div style="width: 80px; height: 80px; background: var(--bg-elevated); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); margin: 0 auto 12px;"></div>
+      <code style="font-size: 11px; color: var(--text-muted);">--shadow-sm<br>nav items, small chips</code>
+    </div>
+    <div style="text-align: center;">
+      <div style="width: 80px; height: 80px; background: var(--bg-elevated); border-radius: var(--radius-md); box-shadow: var(--shadow-md); margin: 0 auto 12px;"></div>
+      <code style="font-size: 11px; color: var(--text-muted);">--shadow-md<br>popovers, context menus</code>
+    </div>
+    <div style="text-align: center;">
+      <div style="width: 80px; height: 80px; background: var(--bg-elevated); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); margin: 0 auto 12px;"></div>
+      <code style="font-size: 11px; color: var(--text-muted);">--shadow-lg<br>modals, sheets</code>
+    </div>
+  </div>
+</div>
+
+<hr class="ds-divider">
+
+<!-- ── Motion ─────────────────────────────────────────────────────────────── -->
+<div class="ds-section">
+  <h2 class="ds-section-title">Motion</h2>
+  <p class="ds-section-desc">One transition token. Use it for all interactive state changes.</p>
+  <div class="ds-canvas">
+    <div class="token-row" style="border: none; padding: 0;">
+      <span class="token-row-name">--transition</span>
+      <span class="token-row-value">200ms cubic-bezier(0.25, 0.1, 0.25, 1)</span>
+    </div>
+  </div>
+  <div class="ds-annotation">
+    <strong>Refactoring opportunity:</strong> Several components hardcode their own transition values
+    instead of using <code>var(--transition)</code>. When adding new interactive elements, always
+    use the token. Consider a pass through <code>base.css</code> to replace hardcoded transitions.
+  </div>
+</div>
+
+<script>
+  // Read computed CSS variable values and show them under swatches
+  document.querySelectorAll('[data-css-var]').forEach(el => {
+    const update = () => {
+      const val = getComputedStyle(document.documentElement)
+        .getPropertyValue(el.dataset.cssVar).trim()
+      el.textContent = val || '—'
+    }
+    update()
+    // Re-read on theme change (theme.js swaps the stylesheet link)
+    document.getElementById('theme-stylesheet')?.addEventListener('load', update)
+  })
+</script>

package/pages/public/client/app.js

@@ -19,11 +19,13 @@ import { ThreadPanelView }       from './views/ThreadPanelView.js'
 import { ComposerView }          from './views/ComposerView.js'
 import { SidebarView }           from './views/SidebarView.js'
 import { CallView }              from './views/CallView.js'
+import { ChatHeaderView }        from './views/ChatHeaderView.js'
 import { cancelActiveEdit }      from './views/shared/MessageInteractions.js'
 import { closeEmojiPicker }      from './views/shared/EmojiPickerSingleton.js'
 import { getSettings, syncFromServer, patchSettings } from './settings-sync.js'
 import { initSwipeNav }          from './swipe-nav.js'
 import { initRouter }            from './router.js'
+import { attachResizeHandle }    from './resizable.js'
 
 const BASE_PATH = window.__BASE_PATH__ ?? ''
 
@@ -68,7 +70,7 @@ if (chatPanelEl) {
 
 const wsController   = new WebSocketController(model, `${BASE_PATH}/ws`)
 const ws             = wsController.ws
-const chatController = new ChatController(model, ws)
+new ChatController(model, ws)
 
 // ── 4. Views ──────────────────────────────────────────────────────────────────
 
@@ -85,12 +87,24 @@ if (chatPanelEl) {
   const composerEl   = chatPanelEl.querySelector('.composer')
   const threadPanelEl = document.getElementById('thread-panel')
 
+  const headerEl = chatPanelEl.querySelector('.chat-header')
+  if (headerEl) {
+    new ChatHeaderView(model, headerEl)
+  }
+
   if (messagesEl) {
     new MessageListView(model, messagesEl, sentinelEl)
   }
 
   if (threadPanelEl) {
     new ThreadPanelView(model, threadPanelEl)
+    attachResizeHandle(threadPanelEl, {
+      edge:       'left',
+      cssVar:     '--thread-panel-width',
+      min:        260,
+      max:        640,
+      prefKey: 'thread_panel_width',
+    })
   }
 
   if (composerEl) {
@@ -98,11 +112,32 @@ if (chatPanelEl) {
   }
 
   // CallView (WebRTC) — only if call UI elements are present
-  if (document.getElementById('tile-panel') || document.getElementById('btn-start-call')) {
-    new CallView(model, ws, chatPanelEl)
+  const tilePanelEl = document.getElementById('tile-panel')
+  if (tilePanelEl || document.getElementById('btn-start-call')) {
+    new CallView(model, ws)
+  }
+  if (tilePanelEl) {
+    attachResizeHandle(tilePanelEl, {
+      edge:       'left',
+      cssVar:     '--tile-panel-width',
+      min:        200,
+      max:        640,
+      prefKey: 'tile_panel_width',
+    })
   }
 }
 
+// Sidebar resize — desktop only (mobile sidebar is full-screen overlay)
+if (sidebarEl && window.matchMedia('(min-width: 769px)').matches) {
+  attachResizeHandle(sidebarEl, {
+    edge:       'right',
+    cssVar:     '--sidebar-width',
+    min:        180,
+    max:        480,
+    prefKey: 'sidebar_width',
+  })
+}
+
 // ── 5. SPA navigation ─────────────────────────────────────────────────────────
 
 // router.js morphs the DOM and dispatches 'chatpanel:navigated'.

package/pages/public/client/resizable.js

@@ -0,0 +1,74 @@
+/**
+ * resizable.js — attach a drag-to-resize handle to a panel edge.
+ *
+ * Usage:
+ *   attachResizeHandle(el, {
+ *     edge:    'right' | 'left',   // which edge gets the handle
+ *     cssVar:  '--sidebar-width',  // CSS custom property to update on :root
+ *     min:     180,                // minimum width in px
+ *     max:     600,                // maximum width in px
+ *     prefKey: 'sidebar_width',    // settings-sync pref key (omit to skip persistence)
+ *   })
+ */
+
+import { getPref, setPref } from './settings-sync.js'
+
+export function attachResizeHandle(el, { edge, cssVar, min = 160, max = 700, prefKey } = {}) {
+  // Restore persisted width
+  if (prefKey) {
+    const saved = getPref(prefKey)
+    if (saved != null) {
+      const px = parseInt(saved, 10)
+      if (px >= min && px <= max) {
+        document.documentElement.style.setProperty(cssVar, `${px}px`)
+      }
+    }
+  }
+
+  const handle = document.createElement('div')
+  handle.className = `resize-handle resize-handle--${edge}`
+  handle.setAttribute('aria-hidden', 'true')
+  el.appendChild(handle)
+
+  let startX = 0
+  let startWidth = 0
+
+  const onMove = e => {
+    const clientX = e.touches ? e.touches[0].clientX : e.clientX
+    const dx = clientX - startX
+    const newWidth = edge === 'right'
+      ? Math.max(min, Math.min(max, startWidth + dx))
+      : Math.max(min, Math.min(max, startWidth - dx))
+    document.documentElement.style.setProperty(cssVar, `${newWidth}px`)
+  }
+
+  const onEnd = () => {
+    document.removeEventListener('mousemove', onMove)
+    document.removeEventListener('mouseup',   onEnd)
+    document.removeEventListener('touchmove', onMove)
+    document.removeEventListener('touchend',  onEnd)
+    document.body.style.userSelect = ''
+    document.body.style.cursor = ''
+
+    if (prefKey) {
+      const current = getComputedStyle(document.documentElement).getPropertyValue(cssVar).trim()
+      setPref(prefKey, parseInt(current, 10))
+    }
+  }
+
+  const onStart = e => {
+    if (e.button != null && e.button !== 0) return
+    e.preventDefault()
+    startX = e.touches ? e.touches[0].clientX : e.clientX
+    startWidth = el.getBoundingClientRect().width
+    document.body.style.userSelect = 'none'
+    document.body.style.cursor = 'col-resize'
+    document.addEventListener('mousemove', onMove)
+    document.addEventListener('mouseup',   onEnd)
+    document.addEventListener('touchmove', onMove, { passive: false })
+    document.addEventListener('touchend',  onEnd)
+  }
+
+  handle.addEventListener('mousedown',  onStart)
+  handle.addEventListener('touchstart', onStart, { passive: false })
+}

package/pages/public/client/rtc-peer-manager.js

@@ -86,8 +86,11 @@ export class RtcPeerManager {
       }
 
       // Video stream → render tile + ensure audio (video stream may carry audio track)
-      const tileId = `${peerId}-${event.transceiver?.mid ?? 'cam'}`
-      const label  = this.#displayNames.get(peerId) ?? peerId
+      // Use semantic slot name (cam/screen) so WS signaling can address tiles by kind.
+      const slots    = this.#getTransceiverSlots(pc)
+      const slotName = event.transceiver === slots.screen ? 'screen' : 'cam'
+      const tileId   = `${peerId}-${slotName}`
+      const label    = this.#displayNames.get(peerId) ?? peerId
       this.#handlers.onTrack(peerId, tileId, stream, label)
       this.#handlers.onAudio(peerId, stream)
     }

package/pages/public/client/settings-sync.js

@@ -1,25 +1,63 @@
 /**
- * settings-sync.js — client-side settings: localStorage + background server sync.
+ * settings-sync.js — all client-side persistence in one place.
  *
- * This module owns all localStorage reads/writes and server sync. Islands import
- * from here — they never touch localStorage or the API directly.
+ * Two namespaces:
+ *   settings  — synced to server (last_channel_id, mobile_chat_open, …)
+ *   prefs     — local-only UI preferences (theme, panel widths, devices, …)
  *
- * Storage shape: { settings: { last_channel_id, mobile_chat_open }, updated_at: number }
+ * Callers never touch localStorage directly — they use the exports below.
+ *
+ * Storage keys:
+ *   devchitchat_settings  { settings: {…}, updated_at: number }
+ *   devchitchat_prefs     { theme, sidebar_width, thread_panel_width,
+ *                           tile_panel_width, tile_layout, devices, … }
  */
 
-const STORAGE_KEY = 'devchitchat_settings'
+const SETTINGS_KEY = 'devchitchat_settings'
+const PREFS_KEY    = 'devchitchat_prefs'
 const BASE_PATH = window.__BASE_PATH__ ?? ''
 
 function readLocal() {
   try {
-    return JSON.parse(localStorage.getItem(STORAGE_KEY) ?? '{}')
+    return JSON.parse(localStorage.getItem(SETTINGS_KEY) ?? '{}')
   } catch {
     return {}
   }
 }
 
 function writeLocal(data) {
-  localStorage.setItem(STORAGE_KEY, JSON.stringify(data))
+  localStorage.setItem(SETTINGS_KEY, JSON.stringify(data))
+}
+
+// ── Local-only UI preferences ─────────────────────────────────────────────────
+
+function readPrefs() {
+  try {
+    return JSON.parse(localStorage.getItem(PREFS_KEY) ?? '{}')
+  } catch {
+    return {}
+  }
+}
+
+/**
+ * Read a UI preference. Returns `defaultValue` when the key has never been set.
+ * @param {string} key
+ * @param {*} [defaultValue]
+ */
+export function getPref(key, defaultValue = null) {
+  const prefs = readPrefs()
+  return key in prefs ? prefs[key] : defaultValue
+}
+
+/**
+ * Write one or more UI preferences.
+ * @param {string|Record<string,*>} keyOrPatch  — key string or { key: value } map
+ * @param {*} [value]                           — value when keyOrPatch is a string
+ */
+export function setPref(keyOrPatch, value) {
+  const prefs = readPrefs()
+  const patch  = typeof keyOrPatch === 'string' ? { [keyOrPatch]: value } : keyOrPatch
+  localStorage.setItem(PREFS_KEY, JSON.stringify({ ...prefs, ...patch }))
 }
 
 // Returns current settings object (instant, synchronous)

package/pages/public/client/theme.js

@@ -3,9 +3,11 @@
  *
  * Each theme is a separate CSS file in /themes/<name>.css.
  * The <html data-theme> attribute is set so themes can also use attribute selectors.
+ * Theme preference is stored via settings-sync getPref/setPref ('theme' key).
  */
+import { getPref, setPref } from './settings-sync.js'
+
 const THEMES = ['dark', 'light', 'ocean', 'forest', 'rose']
-const STORAGE_KEY = 'devchitchat_theme'
 const BASE_PATH = window.__BASE_PATH__ ?? ''
 const stylesheet = document.getElementById('theme-stylesheet')
 const picker = document.getElementById('theme-picker')
@@ -15,13 +17,13 @@ function applyTheme(name) {
   document.documentElement.dataset.theme = theme
   if (stylesheet) stylesheet.href = `${BASE_PATH}/themes/${theme}.css`
   if (picker) picker.value = theme
-  localStorage.setItem(STORAGE_KEY, theme)
+  setPref('theme', theme)
 }
 
 // Restore saved theme immediately (before paint)
-applyTheme(localStorage.getItem(STORAGE_KEY) ?? 'dark')
+applyTheme(getPref('theme', 'dark'))
 
 // Wire picker
 if (picker) {
-  picker.addEventListener('change', (e) => applyTheme(e.target.value))
+  picker.addEventListener('change', e => applyTheme(e.target.value))
 }