solid-chat 0.0.6 → 0.0.17

package/index.html

@@ -28,244 +28,89 @@
   <link rel="manifest" href="manifest.json">
 
   <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
-  <style>
-    :root {
-      --gradient-start: #667eea;
-      --gradient-end: #9f7aea;
-      --bg: #f7f8fc;
-      --text: #2d3748;
-      --text-muted: #a0aec0;
-      --accent: #805ad5;
-    }
 
+  <!-- Theme CSS - loaded dynamically -->
+  <link id="theme-css" rel="stylesheet" href="themes/wave.css">
+
+  <style>
+    /* Base styles that don't change between themes */
     * { box-sizing: border-box; margin: 0; padding: 0; }
 
     body {
       font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
       background: var(--bg);
       color: var(--text);
-      min-height: 100vh;
-    }
-
-    .app-header {
-      background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
-      color: white;
-      padding: 16px 24px;
-      box-shadow: 0 4px 20px rgba(102, 126, 234, 0.3);
-      display: flex;
-      align-items: center;
-      gap: 16px;
-    }
-
-    .app-header h1 {
-      font-size: 1.25rem;
-      font-weight: 600;
-      margin-bottom: 2px;
-    }
-
-    .app-header p {
-      font-size: 0.8rem;
-      opacity: 0.9;
-    }
-
-    .app-header button {
-      padding: 6px 14px;
-      background: rgba(255,255,255,0.2);
-      color: white;
-      border: 1px solid rgba(255,255,255,0.3);
-      border-radius: 6px;
-      font-size: 12px;
-      font-weight: 500;
-      cursor: pointer;
-      transition: background 0.2s;
-    }
-
-    .app-header button:hover {
-      background: rgba(255,255,255,0.3);
-    }
-
-    .app-header input {
-      padding: 6px 10px;
-      border: 1px solid rgba(255,255,255,0.3);
-      border-radius: 6px;
-      font-size: 12px;
-      background: rgba(255,255,255,0.15);
-      color: white;
-      width: 140px;
-    }
-
-    .app-header input::placeholder {
-      color: rgba(255,255,255,0.7);
-    }
-
-    #chatContainer {
-      background: white;
-      overflow: hidden;
-      height: 100%;
-    }
-
-    .placeholder {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: center;
-      height: 100%;
-      color: var(--text-muted);
-      text-align: center;
-    }
-
-    .placeholder-icon {
-      font-size: 64px;
-      margin-bottom: 16px;
-    }
-
-    .placeholder h2 {
-      color: var(--text);
-      margin-bottom: 8px;
-    }
-
-    .loading-spinner {
-      width: 40px;
-      height: 40px;
-      border: 3px solid #e0e0e0;
-      border-top-color: var(--primary);
-      border-radius: 50%;
-      animation: spin 0.8s linear infinite;
-      margin-bottom: 16px;
-    }
-
-    @keyframes spin {
-      to { transform: rotate(360deg); }
-    }
-
-    @keyframes fadeInUp {
-      from {
-        opacity: 0;
-        transform: translate(-50%, 20px);
-      }
-      to {
-        opacity: 1;
-        transform: translate(-50%, 0);
-      }
-    }
-
-    .error {
-      background: #fff3f3;
-      border: 1px solid #ffcdd2;
-      color: #c62828;
-      padding: 16px;
-      border-radius: 8px;
-      margin-top: 16px;
-    }
-
-    /* App layout with sidebar */
-    .app-layout {
-      display: flex;
-      height: calc(100vh - 68px);
-    }
-
-    .sidebar {
-      width: 320px;
-      flex-shrink: 0;
-      height: 100%;
+      height: 100vh;
       overflow: hidden;
     }
-
-    .main-content {
-      flex: 1;
-      overflow: hidden;
-      background: var(--bg);
-      height: 100%;
-    }
-
-    /* Mobile hamburger */
-    .mobile-menu-btn {
-      display: none;
-      width: 40px;
-      height: 40px;
-      background: rgba(255,255,255,0.2);
-      border: none;
-      border-radius: 8px;
-      color: white;
-      font-size: 24px;
-      cursor: pointer;
-      align-items: center;
-      justify-content: center;
-    }
-
-    .sidebar-overlay {
-      display: none;
-      position: fixed;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      background: rgba(0,0,0,0.5);
-      z-index: 99;
-    }
-
-    @media (max-width: 768px) {
-      .mobile-menu-btn {
-        display: flex;
-      }
-
-      .sidebar {
-        position: fixed;
-        top: 0;
-        left: -320px;
-        height: 100vh;
-        z-index: 100;
-        transition: left 0.3s ease;
-        box-shadow: 4px 0 20px rgba(0,0,0,0.2);
-      }
-
-      .sidebar.open {
-        left: 0;
-      }
-
-      .sidebar-overlay.open {
-        display: block;
-      }
-
-      .app-layout {
-        height: calc(100vh - 68px);
-      }
-
-      .main-content {
-        width: 100%;
-      }
-    }
   </style>
 </head>
 <body>
 
-<header class="app-header">
-  <button class="mobile-menu-btn" id="mobileMenuBtn">☰</button>
-  <div>
-    <h1>Solid Chat <span id="appVersion" style="font-size: 12px; font-weight: 400; opacity: 0.8;"></span></h1>
-    <p>Decentralized messaging for the web</p>
-  </div>
-  <div id="headerLoginArea" style="margin-left: auto; display: flex; align-items: center; gap: 8px;">
-    <button id="soundToggle" title="Toggle notification sound" style="background: none; border: none; font-size: 18px; cursor: pointer; padding: 4px;">🔔</button>
-    <span id="userStatus" style="font-size: 13px; opacity: 0.9;">Loading...</span>
-    <span id="loginArea"></span>
+<div class="app-wrapper">
+  <div class="app-banner">
+    <div class="brand">
+      <h1>Solid Chat</h1>
+      <p>Decentralized messaging</p>
+    </div>
   </div>
-</header>
 
-<div class="sidebar-overlay" id="sidebarOverlay"></div>
+  <div class="sidebar-overlay" id="sidebarOverlay"></div>
+
+  <div class="app-container">
+    <!-- Left Panel - Chat List -->
+    <aside class="left-panel" id="leftPanel">
+      <div class="panel-header">
+        <div class="header-left">
+          <div class="user-avatar" id="userAvatar">S</div>
+          <div>
+            <div class="header-title">Solid Chat <span class="header-version" id="appVersion"></span></div>
+          </div>
+        </div>
+        <div class="header-actions">
+        </div>
+      </div>
 
-<div class="app-layout">
-  <aside class="sidebar" id="sidebar"></aside>
+      <div class="sidebar" id="sidebar"></div>
 
-  <main class="main-content">
-    <div id="chatContainer">
-      <div class="placeholder" id="placeholder">
-        <div class="placeholder-icon">💬</div>
-        <h2>Welcome to Solid Chat</h2>
-        <p>Select a chat from the sidebar<br>or add a new one with the + button.</p>
+      <div class="sidebar-footer">
+        <select id="sidebarThemeSelect" class="sidebar-theme-select" title="Switch theme">
+          <option value="solid">Solid</option>
+          <option value="wave">Wave</option>
+          <option value="telegram">Telegram</option>
+          <option value="signal">Signal</option>
+        </select>
       </div>
-    </div>
-  </main>
+    </aside>
+
+    <!-- Right Panel - Chat -->
+    <main class="right-panel">
+      <div class="content-header">
+        <div class="header-left">
+          <button class="mobile-menu-btn" id="mobileMenuBtn">☰</button>
+          <span id="userStatus" class="user-status">Loading...</span>
+        </div>
+        <div class="header-right" id="headerLoginArea">
+          <span id="loginArea"></span>
+        </div>
+      </div>
+
+      <div class="chat-area">
+        <div id="chatContainer">
+          <div class="placeholder" id="placeholder">
+            <div class="placeholder-icon">💬</div>
+            <h2>Welcome to Solid Chat</h2>
+            <p>Send and receive messages from your Solid POD.<br>Your data stays with you, always.<br><br>Select a chat from the sidebar or add a new one.</p>
+          </div>
+        </div>
+      </div>
+    </main>
+  </div>
+</div>
+
+<div class="status-badge" id="statusBadge">
+  <div class="status-dot"></div>
+  <span>Connected</span>
 </div>
 
 <!-- Load rdflib and Solid auth -->
@@ -274,7 +119,49 @@
 
 <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 = {
+  wave: { name: 'Wave', file: 'themes/wave.css' },
+  solid: { name: 'Solid', file: 'themes/solid.css' },
+  telegram: { name: 'Telegram', file: 'themes/telegram.css' },
+  signal: { name: 'Signal', file: 'themes/signal.css' }
+}
+
+function loadTheme(themeName) {
+  const theme = THEMES[themeName] || THEMES.wave
+  const themeLink = document.getElementById('theme-css')
+  themeLink.href = theme.file
+  localStorage.setItem('solidchat-theme', themeName)
+
+  // Update sidebar select
+  const sidebarSelect = document.getElementById('sidebarThemeSelect')
+  if (sidebarSelect) sidebarSelect.value = themeName
+
+  // Update title based on theme
+  const titles = { wave: 'Wave', solid: 'Solid Chat', telegram: 'Telegram', signal: 'Signal' }
+  document.title = titles[themeName] || 'Solid Chat'
+  document.querySelector('.header-title').innerHTML = `${titles[themeName]} <span class="header-version" id="appVersion"></span>`
+
+  // Reload version
+  fetch('./package.json')
+    .then(r => r.json())
+    .then(pkg => {
+      const el = document.getElementById('appVersion')
+      if (el) el.textContent = `v${pkg.version}`
+    })
+    .catch(() => {})
+}
+
+function initTheme() {
+  const saved = localStorage.getItem('solidchat-theme') || 'solid'
+  loadTheme(saved)
+
+  document.getElementById('sidebarThemeSelect').addEventListener('change', (e) => {
+    loadTheme(e.target.value)
+  })
+}
 
 // Wait for libraries to be available
 async function waitForLibraries() {
@@ -299,17 +186,19 @@ const placeholder = document.getElementById('placeholder')
 const userStatus = document.getElementById('userStatus')
 const loginArea = document.getElementById('loginArea')
 const sidebar = document.getElementById('sidebar')
+const leftPanel = document.getElementById('leftPanel')
 const mobileMenuBtn = document.getElementById('mobileMenuBtn')
 const sidebarOverlay = document.getElementById('sidebarOverlay')
+const statusBadge = document.getElementById('statusBadge')
 
 // Mobile menu toggle
 mobileMenuBtn.addEventListener('click', () => {
-  sidebar.classList.toggle('open')
+  leftPanel.classList.toggle('open')
   sidebarOverlay.classList.toggle('open')
 })
 
 sidebarOverlay.addEventListener('click', () => {
-  sidebar.classList.remove('open')
+  leftPanel.classList.remove('open')
   sidebarOverlay.classList.remove('open')
 })
 
@@ -341,14 +230,18 @@ async function handleAuthRedirect() {
 function updateAuthUI(isLoggedIn) {
   if (isLoggedIn && currentWebId) {
     const shortId = currentWebId.split('//')[1]?.split('/')[0] || currentWebId
-    userStatus.innerHTML = `Logged in as <strong><a href="${currentWebId}" target="_blank" style="color: white; text-decoration: underline; text-underline-offset: 2px;">${shortId}</a></strong>`
-    loginArea.innerHTML = `<button id="logoutBtn">Logout</button>`
+    userStatus.innerHTML = `Logged in as <a href="${currentWebId}" target="_blank">${shortId}</a>`
+    loginArea.innerHTML = `<button class="btn btn-secondary" id="logoutBtn">Logout</button>`
     document.getElementById('logoutBtn').addEventListener('click', handleLogout)
+
+    // Update avatar with user initial
+    const initial = shortId.charAt(0).toUpperCase()
+    document.getElementById('userAvatar').textContent = initial
   } else {
     userStatus.textContent = 'Not logged in'
     loginArea.innerHTML = `
-      <input type="text" id="idpInput" placeholder="e.g. solidweb.org" style="padding: 8px 12px; border: 2px solid #e2e8f0; border-radius: 8px; font-size: 13px; width: 160px;">
-      <button id="loginBtn">Login</button>
+      <input type="text" class="input-field" id="idpInput" placeholder="e.g. solidweb.org">
+      <button class="btn btn-primary" id="loginBtn">Login</button>
     `
     document.getElementById('loginBtn').addEventListener('click', handleLogin)
     document.getElementById('idpInput').addEventListener('keydown', (e) => {
@@ -517,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
@@ -592,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)
     }
 
@@ -629,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)
       }
     }
@@ -706,7 +609,7 @@ async function loadChat(uri) {
   }
 
   // Close mobile sidebar if open
-  sidebar.classList.remove('open')
+  leftPanel.classList.remove('open')
   sidebarOverlay.classList.remove('open')
 
   chatContainer.innerHTML = `
@@ -989,19 +892,6 @@ function showToast(message) {
   const toast = document.createElement('div')
   toast.className = 'toast'
   toast.textContent = message
-  toast.style.cssText = `
-    position: fixed;
-    bottom: 24px;
-    left: 50%;
-    transform: translateX(-50%);
-    background: #1e1e2e;
-    color: white;
-    padding: 12px 24px;
-    border-radius: 8px;
-    font-size: 14px;
-    z-index: 9999;
-    animation: fadeInUp 0.3s ease;
-  `
   document.body.appendChild(toast)
 
   setTimeout(() => {
@@ -1013,20 +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() {
-  // Load and display version
-  fetch('./package.json')
-    .then(r => r.json())
-    .then(pkg => {
-      document.getElementById('appVersion').textContent = `v${pkg.version}`
-    })
-    .catch(() => {})
+  // 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()
@@ -1047,6 +939,13 @@ async function init() {
   })
   sidebar.appendChild(sidebarElement)
 
+  // Move theme selector above Discover Chats button
+  const discoverBtn = sidebar.querySelector('.discover-btn')
+  const themeSelect = document.getElementById('sidebarThemeSelect')
+  if (discoverBtn && themeSelect) {
+    discoverBtn.parentNode.insertBefore(themeSelect.parentNode, discoverBtn)
+  }
+
   // Check for ?chat= deep link first, then ?uri= (legacy), then default
   const deepLinkedChat = await handleDeepLink()
   if (deepLinkedChat) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "solid-chat",
-  "version": "0.0.6",
+  "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)) {