@devchitchat/chat 4.5.0 → 5.0.1

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/shared/messages.js

@@ -33,8 +33,9 @@ export function makeDateSeparator(dateKey) {
 
 /**
  * Escape HTML then wrap @handles in <span class="mention"> (or mention-self for current user).
+ * Only handles that appear in `knownHandles` are styled; unrecognised @words are left as plain text.
  * @param {string} text
- * @param {{ userHandle?: string }} [opts]
+ * @param {{ userHandle?: string, knownHandles?: Set<string> }} [opts]
  */
 // Combined regex (operates on raw text before HTML-escaping):
 //   group 1 (+ inner 2, 3) — markdown link: [text](url)
@@ -42,7 +43,7 @@ export function makeDateSeparator(dateKey) {
 //   group 5                — @mention
 const INLINE_RE = /(\[([^\]]*)\]\((https?:\/\/[^)]+)\))|(https?:\/\/[^\s<>"'[\]()*]+)|(@[a-zA-Z0-9_.-]+)/g
 
-export function renderText(text, { userHandle } = {}) {
+export function renderText(text, { userHandle, knownHandles } = {}) {
   let result = ''
   let lastIndex = 0
   INLINE_RE.lastIndex = 0
@@ -58,9 +59,14 @@ export function renderText(text, { userHandle } = {}) {
       const trailing = bareUrl.slice(trimmed.length)
       result += `<a href="${escHtml(trimmed)}" target="_blank" rel="noopener noreferrer">${escHtml(trimmed)}</a>${escHtml(trailing)}`
     } else if (mention) {
-      const handle = mention.slice(1)
-      const isSelf = userHandle && handle.toLowerCase() === userHandle.toLowerCase()
-      result += `<span class="mention${isSelf ? ' mention-self' : ''}">${escHtml(mention)}</span>`
+      const handle = mention.slice(1).toLowerCase()
+      const known  = !knownHandles || knownHandles.has(handle)
+      if (known) {
+        const isSelf = userHandle && handle === userHandle.toLowerCase()
+        result += `<span class="mention${isSelf ? ' mention-self' : ''}">${escHtml(mention)}</span>`
+      } else {
+        result += escHtml(mention)
+      }
     }
     lastIndex = m.index + full.length
   }
@@ -75,7 +81,7 @@ export function renderText(text, { userHandle } = {}) {
  * @param {Element} el
  * @param {{ userHandle?: string }} [opts]
  */
-export function applyInlineRenderingToTextNodes(el, { userHandle } = {}) {
+export function applyInlineRenderingToTextNodes(el, { userHandle, knownHandles } = {}) {
   const walker = document.createTreeWalker(el, NodeFilter.SHOW_TEXT)
   const nodes = []
   let n
@@ -86,7 +92,7 @@ export function applyInlineRenderingToTextNodes(el, { userHandle } = {}) {
   for (const textNode of nodes) {
     const raw = textNode.textContent
     if (!raw.trim()) continue
-    const rendered = renderText(raw, { userHandle })
+    const rendered = renderText(raw, { userHandle, knownHandles })
     if (rendered === escHtml(raw)) continue  // nothing changed
     const span = document.createElement('span')
     span.innerHTML = rendered
@@ -123,7 +129,7 @@ export function renderAttachment(a) {
  * @param {{ userId?: string, userHandle?: string, isThreadReply?: boolean }} [ctx]
  *   isThreadReply — omits the "Reply in thread" button (threads can't be nested)
  */
-export function makeMessageEl({ msg_id, seq, user_id, user_display_name, ts, text, rendered_text, edited_at, attachments }, { userId, userHandle, isThreadReply = false } = {}) {
+export function makeMessageEl({ msg_id, seq, user_id, user_display_name, ts, text, rendered_text, edited_at, attachments }, { userId, userHandle, knownHandles, isThreadReply = false } = {}) {
   const article = document.createElement('article')
   article.className = 'message'
   article.dataset.seq = seq
@@ -137,7 +143,7 @@ export function makeMessageEl({ msg_id, seq, user_id, user_display_name, ts, tex
   const editedHtml = edited_at ? '<span class="message-edited">(edited)</span>' : ''
   const replyBtn = isThreadReply ? '' : '<button class="btn-reply btn-icon" type="button" title="Reply in thread" aria-label="Reply in thread">&#x21A9;</button>'
   const actionsHtml = `<div class="message-hover-actions"><span class="quick-picks"></span>${replyBtn}<button class="btn-react btn-icon" type="button" title="Add reaction" aria-label="Add reaction">🙂</button>${isSelf ? '<button class="btn-msg-actions btn-icon" type="button" title="Message actions">…</button>' : ''}</div>`
-  const textHtml = rendered_text ?? (text ? renderText(text, { userHandle }) : '')
+  const textHtml = rendered_text ?? (text ? renderText(text, { userHandle, knownHandles }) : '')
   article.innerHTML = `
       <span class="message-handle${isSelf ? '' : ' dm-trigger'}" data-user-id="${escHtml(user_id)}" title="${isSelf ? '' : 'Send a direct message'}">${escHtml(user_display_name ?? user_id)}</span>
       <time class="message-time" datetime="${ts}">${time}${editedHtml}</time>
@@ -146,5 +152,11 @@ export function makeMessageEl({ msg_id, seq, user_id, user_display_name, ts, tex
       <div class="reaction-bar"></div>
       ${actionsHtml}
     `
+  // When the server provides rendered_text, @mention styling is not included.
+  // Apply it now so every code path gets consistent output.
+  if (rendered_text) {
+    const textEl = article.querySelector('.message-text')
+    if (textEl) applyInlineRenderingToTextNodes(textEl, { userHandle, knownHandles })
+  }
   return article
 }

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))
 }