solid-chat 0.0.5 → 0.0.10

package/bin/cli.js

@@ -26,7 +26,7 @@ const MIME_TYPES = {
   '.ttf': 'font/ttf'
 }
 
-const port = parseInt(process.argv[2]) || 3000
+let port = parseInt(process.argv[2]) || 3333
 
 const server = createServer((req, res) => {
   let filePath = join(ROOT, req.url === '/' ? 'index.html' : req.url)
@@ -61,9 +61,10 @@ const server = createServer((req, res) => {
   }
 })
 
-server.listen(port, () => {
-  const url = `http://localhost:${port}`
-  console.log(`
+function startServer(p) {
+  server.listen(p, () => {
+    const url = `http://localhost:${p}`
+    console.log(`
   ╭─────────────────────────────────────╮
   │                                     │
   │   Solid Chat running at:            │
@@ -73,5 +74,19 @@ server.listen(port, () => {
   │                                     │
   ╰─────────────────────────────────────╯
 `)
-  open(url)
+    open(url)
+  })
+}
+
+server.on('error', (err) => {
+  if (err.code === 'EADDRINUSE') {
+    console.log(`Port ${port} in use, trying ${port + 1}...`)
+    port++
+    startServer(port)
+  } else {
+    console.error('Server error:', err.message)
+    process.exit(1)
+  }
 })
+
+startServer(port)

package/index.html

@@ -28,244 +28,98 @@
   <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%;
-      overflow: hidden;
-    }
-
-    .main-content {
-      flex: 1;
+      height: 100vh;
       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">
+          <button class="icon-btn" id="soundToggle" title="Toggle notification sound">🔔</button>
+        </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="wave">Wave</option>
+          <option value="solid">Solid</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">
+          <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>
+
+      <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 -->
@@ -276,6 +130,54 @@
 import { longChatPane } from './src/longChatPane.js'
 import { chatListPane, addChat, updateChatPreview } 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 selects
+  const select = document.getElementById('themeSelect')
+  if (select) select.value = themeName
+  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('themeSelect').addEventListener('change', (e) => {
+    loadTheme(e.target.value)
+  })
+
+  document.getElementById('sidebarThemeSelect').addEventListener('change', (e) => {
+    loadTheme(e.target.value)
+  })
+}
+
 // Wait for libraries to be available
 async function waitForLibraries() {
   return new Promise((resolve) => {
@@ -299,17 +201,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 +245,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) => {
@@ -706,7 +614,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 +897,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(() => {
@@ -1016,13 +911,8 @@ window.solidChat = { createChat, copyShareLink, getMyPodRoot }
 
 // 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()
@@ -1047,6 +937,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.5",
+  "version": "0.0.10",
   "description": "Modern chat panes for Solid pods - longChatPane and chatListPane",
   "type": "module",
   "main": "src/index.js",