solid-chat 0.0.10 → 0.0.17

package/index.html

@@ -68,7 +68,6 @@
           </div>
         </div>
         <div class="header-actions">
-          <button class="icon-btn" id="soundToggle" title="Toggle notification sound">🔔</button>
         </div>
       </div>
 
@@ -76,8 +75,8 @@
 
       <div class="sidebar-footer">
         <select id="sidebarThemeSelect" class="sidebar-theme-select" title="Switch theme">
-          <option value="wave">Wave</option>
           <option value="solid">Solid</option>
+          <option value="wave">Wave</option>
           <option value="telegram">Telegram</option>
           <option value="signal">Signal</option>
         </select>
@@ -92,14 +91,6 @@
           <span id="userStatus" class="user-status">Loading...</span>
         </div>
         <div class="header-right" id="headerLoginArea">
-          <div class="theme-switcher">
-            <select id="themeSelect" title="Switch theme">
-              <option value="wave">Wave</option>
-              <option value="solid">Solid</option>
-              <option value="telegram">Telegram</option>
-              <option value="signal">Signal</option>
-            </select>
-          </div>
           <span id="loginArea"></span>
         </div>
       </div>
@@ -128,7 +119,7 @@
 
 <script type="module">
 import { longChatPane } from './src/longChatPane.js'
-import { chatListPane, addChat, updateChatPreview } from './src/chatListPane.js'
+import { chatListPane, addChat, updateChatPreview, incrementUnread, resetUnread } from './src/chatListPane.js'
 
 // Theme management
 const THEMES = {
@@ -144,9 +135,7 @@ function loadTheme(themeName) {
   themeLink.href = theme.file
   localStorage.setItem('solidchat-theme', themeName)
 
-  // Update selects
-  const select = document.getElementById('themeSelect')
-  if (select) select.value = themeName
+  // Update sidebar select
   const sidebarSelect = document.getElementById('sidebarThemeSelect')
   if (sidebarSelect) sidebarSelect.value = themeName
 
@@ -169,10 +158,6 @@ function initTheme() {
   const saved = localStorage.getItem('solidchat-theme') || 'solid'
   loadTheme(saved)
 
-  document.getElementById('themeSelect').addEventListener('change', (e) => {
-    loadTheme(e.target.value)
-  })
-
   document.getElementById('sidebarThemeSelect').addEventListener('change', (e) => {
     loadTheme(e.target.value)
   })
@@ -425,7 +410,11 @@ function toggleSound() {
 
 function updateSoundButton() {
   const btn = document.getElementById('soundToggle')
-  if (btn) btn.textContent = soundEnabled ? '🔔' : '🔕'
+  if (btn) {
+    btn.innerHTML = soundEnabled
+      ? '<svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor"><path d="M12 22c1.1 0 2-.9 2-2h-4c0 1.1.9 2 2 2zm6-6v-5c0-3.07-1.63-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.64 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2z"/></svg>'
+      : '<svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor"><path d="M12 22c1.1 0 2-.9 2-2h-4c0 1.1.9 2 2 2zm6-6v-5c0-3.07-1.63-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.64 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2z"/><line x1="3" y1="3" x2="21" y2="21" stroke="currentColor" stroke-width="2"/></svg>'
+  }
 }
 
 // Subscribe to real-time updates for a resource
@@ -500,6 +489,9 @@ async function subscribeWebSocketChannel2023(uri, authFetch) {
       console.log('WebSocketChannel2023 notification:', event.data)
       // Any message means the resource changed
       playNotificationSound()
+      if (document.hidden) {
+        incrementUnread(uri)
+      }
       setTimeout(() => refreshChat(), 500)
     }
 
@@ -537,6 +529,9 @@ function connectLegacyWebSocket(updatesVia, uri) {
       if (updatedUri === uri || uri.startsWith(updatedUri)) {
         console.log('Chat updated, refreshing...')
         playNotificationSound()
+        if (document.hidden) {
+          incrementUnread(uri)
+        }
         setTimeout(() => refreshChat(), 500)
       }
     }
@@ -908,15 +903,22 @@ function showToast(message) {
 
 // Make createChat and copyShareLink available globally for chatListPane
 window.solidChat = { createChat, copyShareLink, getMyPodRoot }
+window.toggleSound = toggleSound
 
 // Initialize: handle auth redirect first, then render sidebar
 async function init() {
   // Initialize theme
   initTheme()
 
-  // Set initial sound button state
-  updateSoundButton()
-  document.getElementById('soundToggle').addEventListener('click', toggleSound)
+  // Sound button is now created in chatListPane with onclick handler
+
+  // Clear unread count when user returns to tab
+  document.addEventListener('visibilitychange', () => {
+    if (!document.hidden && currentChatUri) {
+      resetUnread(currentChatUri)
+      chatListPane.setActiveChat(currentChatUri)
+    }
+  })
 
   // Handle auth redirect callback (if returning from IdP)
   await handleAuthRedirect()

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "solid-chat",
-  "version": "0.0.10",
+  "version": "0.0.17",
   "description": "Modern chat panes for Solid pods - longChatPane and chatListPane",
   "type": "module",
   "main": "src/index.js",

package/src/chatListPane.js

@@ -19,6 +19,45 @@ const MEETING = {
 
 // Storage key for localStorage
 const STORAGE_KEY = 'solidchat-chats'
+const UNREAD_KEY = 'solidchat-unread'
+
+// Get unread count for a chat
+function getUnreadCount(uri) {
+  try {
+    const data = JSON.parse(localStorage.getItem(UNREAD_KEY) || '{}')
+    return data[uri] || 0
+  } catch {
+    return 0
+  }
+}
+
+// Increment unread count for a chat (call when new message arrives)
+function incrementUnread(uri) {
+  try {
+    const data = JSON.parse(localStorage.getItem(UNREAD_KEY) || '{}')
+    data[uri] = (data[uri] || 0) + 1
+    localStorage.setItem(UNREAD_KEY, JSON.stringify(data))
+    renderChatList()
+  } catch (e) {
+    console.warn('Failed to increment unread:', e)
+  }
+}
+
+// Reset unread count (call when chat is opened)
+function resetUnread(uri) {
+  try {
+    const data = JSON.parse(localStorage.getItem(UNREAD_KEY) || '{}')
+    data[uri] = 0
+    localStorage.setItem(UNREAD_KEY, JSON.stringify(data))
+  } catch (e) {
+    console.warn('Failed to reset unread:', e)
+  }
+}
+
+// Legacy alias for compatibility
+function setLastRead(uri) {
+  resetUnread(uri)
+}
 
 // Default global chats
 const DEFAULT_CHATS = [
@@ -96,6 +135,24 @@ const styles = `
   background: rgba(255,255,255,0.3);
 }
 
+.sound-toggle-btn {
+  background: none;
+  border: none;
+  color: rgba(255,255,255,0.7);
+  cursor: pointer;
+  padding: 6px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  transition: all 0.2s;
+}
+
+.sound-toggle-btn:hover {
+  color: white;
+  background: rgba(255,255,255,0.15);
+}
+
 .chat-list {
   flex: 1;
   overflow-y: auto;
@@ -164,6 +221,21 @@ const styles = `
   flex-shrink: 0;
 }
 
+.chat-item-badge {
+  background: #e74c3c;
+  color: white;
+  font-size: 11px;
+  font-weight: 600;
+  min-width: 18px;
+  height: 18px;
+  border-radius: 9px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 5px;
+  margin-left: 8px;
+}
+
 .chat-item-preview {
   font-size: 13px;
   color: var(--text-muted);
@@ -555,6 +627,15 @@ function renderChatList() {
     header.appendChild(title)
     header.appendChild(time)
 
+    // Show unread count badge
+    const unreadCount = getUnreadCount(chat.uri)
+    if (unreadCount > 0) {
+      const badge = dom.createElement('div')
+      badge.className = 'chat-item-badge'
+      badge.textContent = unreadCount > 99 ? '99+' : unreadCount
+      header.appendChild(badge)
+    }
+
     const preview = dom.createElement('div')
     preview.className = 'chat-item-preview'
     preview.textContent = chat.lastMessage || 'No messages yet'
@@ -577,6 +658,7 @@ function renderChatList() {
 
     item.onclick = () => {
       activeUri = chat.uri
+      setLastRead(chat.uri)
       renderChatList()
       if (onSelectCallback) {
         onSelectCallback(chat.uri)
@@ -859,13 +941,33 @@ export const chatListPane = {
     title.className = 'sidebar-title'
     title.textContent = 'Chats'
 
+    // Sound toggle button (subtle white bell like Telegram)
+    const soundBtn = dom.createElement('button')
+    soundBtn.className = 'sound-toggle-btn'
+    soundBtn.id = 'soundToggle'
+    soundBtn.title = 'Toggle notification sound'
+    soundBtn.innerHTML = localStorage.getItem('solidchat-sound') !== 'false'
+      ? '<svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor"><path d="M12 22c1.1 0 2-.9 2-2h-4c0 1.1.9 2 2 2zm6-6v-5c0-3.07-1.63-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.64 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2z"/></svg>'
+      : '<svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor"><path d="M12 22c1.1 0 2-.9 2-2h-4c0 1.1.9 2 2 2zm6-6v-5c0-3.07-1.63-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.64 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2z"/><path d="M3.27 3L2 4.27l2.92 2.92C4.34 8.16 4 9.5 4 11v5l-2 2v1h14.73l2 2L20 19.73 3.27 3z"/></svg>'
+    soundBtn.onclick = () => {
+      if (window.toggleSound) {
+        window.toggleSound()
+      }
+    }
+
     const addBtn = dom.createElement('button')
     addBtn.className = 'add-chat-btn'
     addBtn.textContent = '+'
     addBtn.title = 'Add or create chat'
     addBtn.onclick = () => showAddModal(dom, options.webId)
 
-    header.appendChild(title)
+    // Group title and sound button together (flush)
+    const titleGroup = dom.createElement('div')
+    titleGroup.style.cssText = 'display: flex; align-items: center; gap: 8px;'
+    titleGroup.appendChild(title)
+    titleGroup.appendChild(soundBtn)
+
+    header.appendChild(titleGroup)
     header.appendChild(addBtn)
 
     // Chat list
@@ -931,4 +1033,4 @@ export const chatListPane = {
 }
 
 // Export for use in index.html
-export { addChat, removeChat, updateChatPreview }
+export { addChat, removeChat, updateChatPreview, setLastRead, incrementUnread, resetUnread }

package/src/longChatPane.js

@@ -695,6 +695,10 @@ function renderMessageContent(dom, content) {
         img.alt = 'Image'
         img.loading = 'lazy'
         img.onclick = () => window.open(part, '_blank')
+        img.onload = () => {
+          const mc = img.closest('.messages-container')
+          if (mc) mc.scrollTop = mc.scrollHeight
+        }
         wrapper.appendChild(img)
         container.appendChild(wrapper)
       } else if (VIDEO_EXT.test(part)) {