@devchitchat/chat 4.2.3 → 4.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@devchitchat/chat",
-  "version": "4.2.3",
+  "version": "4.3.0",
   "description": "A small chat app. p2p video and screenshare.",
   "scripts": {
     "dev": "bun --watch index.js",

package/pages/api/preview/index.js

@@ -0,0 +1,27 @@
+/**
+ * POST /api/preview
+ *
+ * Renders markdown text server-side and returns the HTML.
+ * Used by the client-side compose overlay preview tab.
+ *
+ * Body: { text: string }
+ * Returns: { html: string }
+ */
+import { sessionFromRequest } from '../../../src/context.js'
+import { renderMarkdown } from '@devchitchat/index97/markdown'
+
+export async function POST(req) {
+  const session = sessionFromRequest(req)
+  if (!session?.user) return new Response('Unauthorized', { status: 401 })
+
+  let body
+  try {
+    body = await req.json()
+  } catch {
+    return new Response('Bad Request', { status: 400 })
+  }
+
+  const text = String(body.text ?? '').slice(0, 50_000)
+  const { html } = renderMarkdown(text)
+  return Response.json({ html })
+}

package/pages/channels/[channelId].phtml

@@ -11,7 +11,7 @@
       <ul each="channels" key="channel_id" class="channel-list">
         <template>
           <li class="channel-item" cls="className" draggable="true">
-            <a attr="href:url" text="name" class="channel-link"
+            <a attr="href:url; title:name" text="name" class="channel-link"
                data-channel-id=""
                data-channel-name=""
                data-channel-topic=""
@@ -23,8 +23,9 @@
         </template>
       {{#each channels}}
         <li data-key="{{channel_id}}" class="channel-item {{className}}" cls="className" draggable="true">
-          <a attr="href:url" text="name" class="channel-link"
+          <a attr="href:url; title:name" text="name" class="channel-link"
              href="{{base}}/channels/{{channel_id}}"
+             title="{{name}}"
              data-channel-id="{{channel_id}}"
              data-channel-name="{{name}}"
              data-channel-topic="{{topic}}"
@@ -157,8 +158,36 @@
     <textarea model="draft" id="message-input" placeholder="Message in {{channel.name}}" aria-label="Write a message"
       rows="1" onkeydown="handleComposerKey">
     </textarea>
+    <button onclick="toggleComposeMode" class="btn-compose-expand btn-icon" type="button"
+      title="Compose mode (Ctrl+E)" aria-label="Open compose mode">&#x26F6;</button>
     <button onclick="sendMessage" class="btn-send" aria-label="Send message" type="button">Send</button>
   </footer>
+
+  <!-- Compose overlay — full-panel editor with Write / Preview tabs -->
+  <div class="compose-overlay" id="compose-overlay" hidden>
+    <div class="compose-overlay-header">
+      <div class="compose-tabs" role="tablist">
+        <button class="compose-tab compose-tab--active" data-tab="write"
+          role="tab" aria-selected="true" type="button">Write</button>
+        <button class="compose-tab" data-tab="preview"
+          role="tab" aria-selected="false" type="button">Preview</button>
+      </div>
+      <button class="btn-compose-collapse btn-icon" id="btn-compose-collapse"
+        type="button" title="Collapse (Esc)" aria-label="Collapse compose mode">&#x2715;</button>
+    </div>
+    <div class="attachment-chips" id="compose-chips" hidden></div>
+    <textarea class="compose-textarea" id="compose-textarea"
+      placeholder="Write your message… (Ctrl+Enter to send)" aria-label="Compose message"></textarea>
+    <div class="compose-preview message-text" id="compose-preview" hidden aria-live="polite"></div>
+    <footer class="compose-overlay-footer">
+      <button class="btn-urgent-toggle" id="compose-urgent-toggle" type="button"
+        title="Toggle urgent mode" aria-label="Toggle urgent send">&#x1F514;</button>
+      <button class="btn-attach btn-icon" id="compose-attach" type="button"
+        title="Attach file" aria-label="Attach file">&#x1F4CE;</button>
+      <button class="btn-send" id="compose-send" type="button">Send</button>
+    </footer>
+  </div>
+
 </section><!-- /.chat-panel -->
 
 <!-- Tile panel: sibling of chat-panel, never inside it -->

package/pages/public/client/islands/call.js

@@ -583,32 +583,197 @@ export default function CallIsland(root) {
   }
 
   function renderChips() {
-    chipsEl.innerHTML = pendingAttachments.map((a, i) => `
+    const html = pendingAttachments.map((a, i) => `
       <span class="attachment-chip" data-index="${i}">
         <span class="attachment-chip-name">${escHtml(a.original_name)}</span>
         <button type="button" class="attachment-chip-remove" data-index="${i}" aria-label="Remove ${escHtml(a.original_name)}">×</button>
       </span>
     `).join('')
+    chipsEl.innerHTML = html
     chipsEl.hidden = pendingAttachments.length === 0
+    if (composeChipsEl) {
+      composeChipsEl.innerHTML = html
+      composeChipsEl.hidden = pendingAttachments.length === 0
+    }
+  }
+
+  function _removeChipAt(idx) {
+    pendingAttachments.splice(idx, 1)
+    renderChips()
   }
 
   chipsEl.addEventListener('click', e => {
     const btn = e.target.closest('.attachment-chip-remove')
     if (!btn) return
-    const idx = parseInt(btn.dataset.index, 10)
-    pendingAttachments.splice(idx, 1)
-    renderChips()
+    _removeChipAt(parseInt(btn.dataset.index, 10))
   })
 
   function showComposerError(msg) {
+    const target = composeOpen ? composeChipsEl : chipsEl
+    if (!target) return
     const chip = document.createElement('span')
     chip.className = 'attachment-chip attachment-chip-error'
     chip.textContent = msg
-    chipsEl.appendChild(chip)
-    chipsEl.hidden = false
+    target.appendChild(chip)
+    target.hidden = false
     setTimeout(() => chip.remove(), 5000)
   }
 
+  // ── Compose overlay ───────────────────────────────────────────────────────
+  const composeOverlayEl   = root.querySelector('#compose-overlay')
+  const composeTaEl        = document.getElementById('compose-textarea')
+  const composePreviewEl   = document.getElementById('compose-preview')
+  const composeCollapseBtn = document.getElementById('btn-compose-collapse')
+  const composeSendBtn     = document.getElementById('compose-send')
+  const composeUrgentBtn   = document.getElementById('compose-urgent-toggle')
+  const composeChipsEl     = document.getElementById('compose-chips')
+  const composeBtnAttach   = document.getElementById('compose-attach')
+
+  let composeOpen = false
+
+  function openComposeMode() {
+    if (composeOpen) return
+    composeOpen = true
+    if (composeTaEl) composeTaEl.value = draft()
+    messages.hidden = true
+    composerEl.hidden = true
+    if (composeOverlayEl) composeOverlayEl.hidden = false
+    _switchComposeTab('write')
+    requestAnimationFrame(() => {
+      if (!composeTaEl) return
+      composeTaEl.focus()
+      const len = composeTaEl.value.length
+      composeTaEl.setSelectionRange(len, len)
+    })
+  }
+
+  function closeComposeMode() {
+    if (!composeOpen) return
+    composeOpen = false
+    messages.hidden = false
+    composerEl.hidden = false
+    if (composeOverlayEl) composeOverlayEl.hidden = true
+    textareaEl?.focus()
+  }
+
+  function toggleComposeMode() {
+    composeOpen ? closeComposeMode() : openComposeMode()
+  }
+
+  function _switchComposeTab(tab) {
+    root.querySelectorAll('.compose-tab').forEach(btn => {
+      const active = btn.dataset.tab === tab
+      btn.classList.toggle('compose-tab--active', active)
+      btn.setAttribute('aria-selected', String(active))
+    })
+    if (composeTaEl) composeTaEl.hidden = tab !== 'write'
+    if (composePreviewEl) composePreviewEl.hidden = tab !== 'preview'
+    if (tab === 'preview') _renderComposePreview()
+  }
+
+  async function _renderComposePreview() {
+    const text = composeTaEl?.value ?? ''
+    if (!text.trim()) {
+      if (composePreviewEl) composePreviewEl.innerHTML = '<p style="color:var(--text-muted)">Nothing to preview yet.</p>'
+      return
+    }
+    try {
+      const res = await fetch(`${window.__BASE_PATH__}/api/preview`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ text }),
+      })
+      if (res.ok) {
+        const { html } = await res.json()
+        if (composePreviewEl) composePreviewEl.innerHTML = sanitizeHtml(html)
+      }
+    } catch {
+      if (composePreviewEl) composePreviewEl.textContent = text
+    }
+  }
+
+  // Sync compose textarea → draft signal
+  composeTaEl?.addEventListener('input', () => { draft.set(composeTaEl.value) })
+
+  // Ctrl+Enter / Cmd+Enter in compose textarea → send and collapse
+  composeTaEl?.addEventListener('keydown', e => {
+    if ((e.ctrlKey || e.metaKey) && e.key === 'Enter') {
+      e.preventDefault()
+      sendMessage()
+      closeComposeMode()
+    }
+  })
+
+  // Tab strip
+  root.querySelectorAll('.compose-tab').forEach(btn => {
+    btn.addEventListener('click', () => _switchComposeTab(btn.dataset.tab))
+  })
+
+  // Collapse, send, and attach buttons
+  composeCollapseBtn?.addEventListener('click', closeComposeMode)
+  composeSendBtn?.addEventListener('click', () => { sendMessage(); closeComposeMode() })
+  composeUrgentBtn?.addEventListener('click', () => toggleUrgentMode())
+  composeBtnAttach?.addEventListener('click', () => fileInputEl.click())
+  composeChipsEl?.addEventListener('click', e => {
+    const btn = e.target.closest('.attachment-chip-remove')
+    if (!btn) return
+    _removeChipAt(parseInt(btn.dataset.index, 10))
+  })
+
+  // Paste images into the compose textarea
+  composeTaEl?.addEventListener('paste', e => {
+    const items = [...(e.clipboardData?.items ?? [])]
+    const imageFiles = items
+      .filter(item => item.kind === 'file' && item.type.startsWith('image/'))
+      .map(item => {
+        const file = item.getAsFile()
+        if (!file) return null
+        if (!file.name) {
+          const ext = item.type.split('/')[1] ?? 'png'
+          return new File([file], `paste-${Date.now()}.${ext}`, { type: item.type })
+        }
+        return file
+      })
+      .filter(Boolean)
+    if (imageFiles.length === 0) return
+    e.preventDefault()
+    uploadFiles(imageFiles)
+  })
+
+  // Drag-and-drop files onto the compose overlay
+  let composeDropOverlayEl = null
+  function ensureComposeDropOverlay() {
+    if (composeDropOverlayEl) return composeDropOverlayEl
+    composeDropOverlayEl = document.createElement('div')
+    composeDropOverlayEl.className = 'drop-overlay'
+    composeDropOverlayEl.textContent = 'Drop to attach'
+    composeOverlayEl?.appendChild(composeDropOverlayEl)
+    return composeDropOverlayEl
+  }
+  composeOverlayEl?.addEventListener('dragover', e => {
+    if (!e.dataTransfer.types.includes('Files')) return
+    e.preventDefault()
+    ensureComposeDropOverlay().hidden = false
+  })
+  composeOverlayEl?.addEventListener('dragleave', e => {
+    if (composeOverlayEl.contains(e.relatedTarget)) return
+    if (composeDropOverlayEl) composeDropOverlayEl.hidden = true
+  })
+  composeOverlayEl?.addEventListener('drop', e => {
+    e.preventDefault()
+    if (composeDropOverlayEl) composeDropOverlayEl.hidden = true
+    const files = [...(e.dataTransfer.files ?? [])]
+    if (files.length > 0) uploadFiles(files)
+  })
+
+  // Ctrl+E / Cmd+E anywhere to toggle compose mode
+  document.addEventListener('keydown', e => {
+    if ((e.ctrlKey || e.metaKey) && e.key === 'e') {
+      e.preventDefault()
+      toggleComposeMode()
+    }
+  })
+
   // ── Urgent send ───────────────────────────────────────────────────────────
   const urgentMode = signal(false)
   const composerFooter = root.querySelector('.composer')
@@ -618,6 +783,8 @@ export default function CallIsland(root) {
   function toggleUrgentMode() {
     urgentMode.set(!urgentMode())
     composerFooter?.classList.toggle('composer-urgent', urgentMode())
+    composeOverlayEl?.classList.toggle('composer-urgent', urgentMode())
+    composeUrgentBtn?.classList.toggle('is-urgent', urgentMode())
   }
 
   function sendMessage({ priority } = {}) {
@@ -908,6 +1075,7 @@ export default function CallIsland(root) {
 
   document.addEventListener('keydown', e => {
     if (e.key === 'Escape') {
+      if (composeOpen) { closeComposeMode(); return }
       closeEmojiPicker()
     }
   })
@@ -1013,42 +1181,85 @@ export default function CallIsland(root) {
   // ── Inline edit ────────────────────────────────────────────────────────────
 
   function startInlineEdit(article) {
-    if (article.querySelector('.message-edit-input')) return // already editing
-    const textEl = article.querySelector('.message-text')
+    if (article.querySelector('.message-edit-wrap')) return
+    const textEl  = article.querySelector('.message-text')
     if (!textEl) return
     const rawText = article.dataset.rawText ?? ''
 
+    // Build the edit widget
+    const wrap = document.createElement('div')
+    wrap.className = 'message-edit-wrap'
+
+    const tabStrip = document.createElement('div')
+    tabStrip.className = 'message-edit-tabs'
+    tabStrip.setAttribute('role', 'tablist')
+    tabStrip.innerHTML = `
+      <button class="message-edit-tab message-edit-tab--active" data-tab="write" role="tab" aria-selected="true" type="button">Write</button>
+      <button class="message-edit-tab" data-tab="preview" role="tab" aria-selected="false" type="button">Preview</button>`
+
     const textarea = document.createElement('textarea')
     textarea.className = 'message-edit-input'
     textarea.value = rawText
-    textEl.replaceWith(textarea)
-    textarea.focus()
-    textarea.setSelectionRange(rawText.length, rawText.length)
+
+    const preview = document.createElement('div')
+    preview.className = 'message-edit-preview message-text'
+    preview.hidden = true
+    preview.setAttribute('aria-live', 'polite')
 
     const toolbar = document.createElement('div')
     toolbar.className = 'message-edit-toolbar'
-    toolbar.innerHTML = '<button class="btn-edit-save btn-primary" type="button">Save</button><button class="btn-edit-cancel btn-ghost" type="button">Cancel</button>'
-    textarea.after(toolbar)
+    toolbar.innerHTML = `
+      <span class="message-edit-hint">Ctrl+Enter to save · Esc to cancel</span>
+      <button class="btn-ghost btn-edit-cancel" type="button">Cancel</button>
+      <button class="btn-primary btn-edit-save" type="button">Save</button>`
+
+    wrap.append(tabStrip, textarea, preview, toolbar)
+    textEl.replaceWith(wrap)
+    textarea.focus()
+    textarea.setSelectionRange(rawText.length, rawText.length)
+
+    // Tab switching
+    tabStrip.addEventListener('click', async e => {
+      const btn = e.target.closest('.message-edit-tab')
+      if (!btn) return
+      const tab = btn.dataset.tab
+      tabStrip.querySelectorAll('.message-edit-tab').forEach(b => {
+        b.classList.toggle('message-edit-tab--active', b === btn)
+        b.setAttribute('aria-selected', String(b === btn))
+      })
+      textarea.hidden = tab !== 'write'
+      preview.hidden  = tab !== 'preview'
+      if (tab === 'preview') {
+        const text = textarea.value.trim()
+        if (!text) { preview.innerHTML = '<p style="color:var(--text-muted)">Nothing to preview yet.</p>'; return }
+        try {
+          const res = await fetch(`${window.__BASE_PATH__}/api/preview`, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ text }),
+          })
+          if (res.ok) { const { html } = await res.json(); preview.innerHTML = sanitizeHtml(html) }
+        } catch { preview.textContent = text }
+      }
+    })
 
     function cancel() {
-      textarea.replaceWith(textEl)
-      toolbar.remove()
+      wrap.replaceWith(textEl)
     }
 
     function save() {
       const newText = textarea.value.trim()
-      if (!newText) { cancel(); return }
-      if (newText === rawText) { cancel(); return }
-      // Optimistic: show new text immediately (unrendered), server will push rendered version via msg.edited
+      if (!newText || newText === rawText) { cancel(); return }
       textEl.textContent = newText
       cancel()
+      article.dataset.rawText = newText
       ws.send({ t: 'msg.edit', body: { msg_id: article.dataset.msgId, channel_id: channelId, text: newText } })
     }
 
     toolbar.querySelector('.btn-edit-save').addEventListener('click', save)
     toolbar.querySelector('.btn-edit-cancel').addEventListener('click', cancel)
     textarea.addEventListener('keydown', e => {
-      if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); save() }
+      if ((e.ctrlKey || e.metaKey) && e.key === 'Enter') { e.preventDefault(); save() }
       if (e.key === 'Escape') cancel()
     })
   }
@@ -1731,6 +1942,8 @@ export default function CallIsland(root) {
   document.addEventListener('chatpanel:navigated', (e) => {
     const { channelId: newId, name, topic, kind, seedSeq: newSeedSeq, seedFirstSeq: newFirstSeq, seedHasMore: newHasMore } = e.detail
 
+    if (composeOpen && newId !== channelId) closeComposeMode()
+
     // Morph strips dynamically-added content (reactions, attachments, timestamps, etc.)
     // but may preserve data-hydrated="1". Always clear and re-hydrate.
     for (const a of messages.querySelectorAll('article.message[data-hydrated]')) {
@@ -1811,5 +2024,5 @@ export default function CallIsland(root) {
 
   // ── Exports (rdbljs bindings) ──────────────────────────────────────────────
 
-  return { draft, channelName, channelTopic, urgentMode, urgentClass, sendMessage, handleComposerKey, toggleUrgentMode }
+  return { draft, channelName, channelTopic, urgentMode, urgentClass, sendMessage, handleComposerKey, toggleUrgentMode, toggleComposeMode }
 }

package/pages/public/themes/base.css

@@ -92,15 +92,19 @@ details summary {
   color: var(--text-secondary);
   text-decoration: none;
   flex: 1;
+  min-width: 0;
   height: 2.3rem;
-  display: flex;
-  align-items: center;
+  display: block;
+  line-height: 2.3rem;
   padding-left: .7rem;
   padding-right: .7rem;
   user-select: none;
   -webkit-user-select: none;
   -webkit-touch-callout: none;
   transition: color var(--transition), background var(--transition);
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
 }
 
 .channel-item a:hover {
@@ -753,6 +757,7 @@ details summary {
   border-radius: 0;
 }
 
+.composer[hidden] { display: none; }
 .composer {
   margin-top: auto;
   display: flex;
@@ -804,6 +809,97 @@ details summary {
 .composer.composer-urgent textarea,
 .composer.composer-urgent textarea:focus { border-color: var(--color-danger); }
 
+/* Expand button in the composer bar */
+.btn-compose-expand {
+  flex-shrink: 0;
+  align-self: center;
+  font-size: 16px;
+  opacity: 0.5;
+  transition: opacity var(--transition);
+}
+.btn-compose-expand:hover { opacity: 1; }
+
+/* ── Compose overlay ─────────────────────────────────────────────────────── */
+.compose-overlay {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-height: 0;
+  background: var(--bg-base);
+}
+.compose-overlay[hidden] { display: none; }
+
+.compose-overlay-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 6px 12px 0;
+  border-bottom: 1px solid var(--border);
+  flex-shrink: 0;
+}
+
+.compose-tabs { display: flex; }
+
+.compose-tab {
+  background: none;
+  border: none;
+  border-bottom: 2px solid transparent;
+  padding: 8px 14px;
+  cursor: pointer;
+  color: var(--text-secondary);
+  font-size: 13px;
+  font-weight: 500;
+  transition: color var(--transition), border-color var(--transition);
+  margin-bottom: -1px; /* sit on top of the header border */
+}
+.compose-tab:hover { color: var(--text-primary); }
+.compose-tab--active { color: var(--accent); border-bottom-color: var(--accent); }
+
+.btn-compose-collapse {
+  font-size: 14px;
+  opacity: 0.5;
+  transition: opacity var(--transition);
+}
+.btn-compose-collapse:hover { opacity: 1; }
+
+.compose-textarea {
+  flex: 1;
+  min-height: 0;
+  resize: none;
+  border: none;
+  background: var(--bg-base);
+  color: var(--text-primary);
+  font-family: var(--font-sans);
+  font-size: 14px;
+  line-height: 1.6;
+  padding: 16px 20px;
+  outline: none;
+  overflow-y: auto;
+}
+.compose-textarea::placeholder { color: var(--text-muted); }
+
+.compose-preview {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  padding: 16px 20px;
+  line-height: 1.6;
+}
+
+.compose-overlay-footer {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 8px;
+  padding: 10px 16px;
+  padding-bottom: calc(10px + env(safe-area-inset-bottom));
+  border-top: 1px solid var(--border);
+  flex-shrink: 0;
+}
+
+/* Urgent mode inside compose overlay */
+.compose-overlay.composer-urgent .compose-textarea { border-left: 3px solid var(--color-danger); }
+
 /* ── Load-more sentinel ──────────────────────────────────────────────────── */
 .load-more-sentinel {
   height: 1px;
@@ -1800,35 +1896,80 @@ form.inline { display: inline; }
   margin-left: 4px;
 }
 
+.message-edit-wrap {
+  grid-column: 1 / -1;
+  border: 1px solid var(--accent);
+  border-radius: var(--radius-md);
+  overflow: hidden;
+  background: var(--bg-input, var(--bg-sidebar));
+}
+
+.message-edit-tabs {
+  display: flex;
+  border-bottom: 1px solid var(--border);
+  padding: 0 4px;
+}
+
+.message-edit-tab {
+  background: none;
+  border: none;
+  border-bottom: 2px solid transparent;
+  padding: 6px 12px;
+  cursor: pointer;
+  color: var(--text-secondary);
+  font-size: 12px;
+  font-weight: 500;
+  margin-bottom: -1px;
+  transition: color var(--transition), border-color var(--transition);
+}
+.message-edit-tab:hover { color: var(--text-primary); }
+.message-edit-tab--active { color: var(--accent); border-bottom-color: var(--accent); }
+
+.message-edit-input[hidden] { display: none; }
 .message-edit-input {
+  display: block;
   width: 100%;
-  min-height: 60px;
-  padding: 6px 8px;
+  min-height: 80px;
+  max-height: 320px;
+  padding: 10px 12px;
   font: inherit;
   font-size: inherit;
   line-height: 1.5;
-  border: 1px solid var(--border);
-  border-radius: var(--radius-sm);
-  background: var(--bg-input, var(--bg-sidebar));
+  border: none;
+  background: transparent;
   color: var(--text-primary);
   resize: vertical;
   box-sizing: border-box;
-  grid-column: 1 / -1;
+  outline: none;
+  overflow-y: auto;
+}
+
+.message-edit-preview {
+  min-height: 80px;
+  max-height: 320px;
+  padding: 10px 12px;
+  overflow-y: auto;
 }
 
 .message-edit-toolbar {
   display: flex;
+  align-items: center;
   gap: 6px;
-  margin-top: 6px;
-  grid-column: 1 / -1;
+  padding: 8px 10px;
+  border-top: 1px solid var(--border);
+}
+.message-edit-hint {
+  font-size: 11px;
+  color: var(--text-muted);
+  margin-right: auto;
 }
 .message-edit-toolbar .btn-primary {
-  padding: 6px 14px;
-  font-size: 14px;
+  padding: 5px 14px;
+  font-size: 13px;
   font-weight: 600;
 }
 .message-edit-toolbar .btn-ghost {
-  font-size: 14px;
+  font-size: 13px;
 }
 
 /* Hover action toolbar — floats above the message on hover (Discord-style) */