@mooncompany/uplink-chat 0.5.0

package/public/js/themes.js

@@ -0,0 +1,164 @@
+// ============================================
+// THEMES MODULE
+// CSS-based theme system using data-theme attribute
+// ============================================
+
+import { UplinkCore } from './core.js';
+import { UplinkStorage } from './storage.js';
+
+// Available themes (visual definitions live in themes.css)
+// 'custom' is added dynamically by theme-generator.js
+const THEMES = ['midnight', 'daylight', 'ember', 'forest', 'phantom', 'custom'];
+const DEFAULT_THEME = 'midnight';
+
+// Theme accent colors for the visual picker
+const THEME_COLORS = {
+  midnight:  { accent: '#00f0ff', bg: '#000000' },
+  daylight:  { accent: '#c84b4b', bg: '#f8f5f1' },
+  ember:     { accent: '#f48c06', bg: '#03071e' },
+  forest:    { accent: '#a3b18a', bg: '#131813' },
+  phantom:   { accent: '#a0a0a0', bg: '#000000' },
+};
+
+function init() {
+  const current = document.documentElement.getAttribute('data-theme');
+  if (!current || !THEMES.includes(current)) {
+    document.documentElement.setAttribute('data-theme', DEFAULT_THEME);
+  }
+  buildPicker();
+  console.log('Themes: Initialized (' + (current || DEFAULT_THEME) + ')');
+}
+
+function apply(themeName) {
+  const theme = THEMES.includes(themeName) ? themeName : DEFAULT_THEME;
+
+  // Premium check: only allow free themes if not premium
+  if (window.UplinkPremium && !window.UplinkPremium.isActive()) {
+    const status = window.UplinkPremium.getStatus();
+    const allowed = (status && status.themes) || [DEFAULT_THEME];
+    if (!allowed.includes(theme)) {
+      window.UplinkPremium.showUpgradeModal('Premium themes');
+      return;
+    }
+  }
+
+  document.documentElement.setAttribute('data-theme', theme);
+
+  // Sync hidden select
+  const select = document.getElementById('themeSelect');
+  if (select) select.value = theme;
+
+  // Update visual picker
+  updatePickerState(theme);
+
+  // Dispatch event for any listeners
+  window.dispatchEvent(new CustomEvent('uplink:themeChange', { 
+    detail: { theme: theme } 
+  }));
+}
+
+function get() {
+  return document.documentElement.getAttribute('data-theme') || DEFAULT_THEME;
+}
+
+// ── Visual theme picker ──
+
+function buildPicker() {
+  const picker = document.getElementById('themePicker');
+  if (!picker) return;
+
+  const current = get();
+  const isPremium = window.UplinkPremium ? window.UplinkPremium.isActive() : true;
+  const allowedThemes = isPremium ? THEMES : ((window.UplinkPremium && window.UplinkPremium.getStatus().themes) || [DEFAULT_THEME]);
+
+  // Build items for built-in themes (not 'custom' — that's handled by theme generator)
+  const builtIn = THEMES.filter(function(t) { return t !== 'custom'; });
+
+  picker.innerHTML = builtIn.map(function(theme) {
+    const colors = THEME_COLORS[theme];
+    const isActive = current === theme;
+    const isLocked = !isPremium && !allowedThemes.includes(theme);
+    const label = theme.charAt(0).toUpperCase() + theme.slice(1);
+    const swatchStyle = 'background:linear-gradient(135deg,' + colors.bg + ' 50%,' + colors.accent + ' 100%)';
+
+    return '<div class="theme-picker-item' + (isActive ? ' active' : '') + '"' +
+      ' data-theme="' + theme + '"' +
+      (isLocked ? ' data-premium-locked="true"' : '') +
+      ' role="option" aria-selected="' + isActive + '"' +
+      ' title="' + label + (isLocked ? ' (Premium)' : '') + '">' +
+      '<div class="theme-picker-swatch" style="' + swatchStyle + '"></div>' +
+      '<span class="theme-picker-name">' + label + '</span>' +
+      (isLocked ? '<span class="theme-picker-lock">🔒</span>' : '') +
+    '</div>';
+  }).join('');
+
+  // If custom theme is active, add it
+  if (current === 'custom') {
+    var customAccent = '#8b5cf6';
+    if (window.UplinkThemeGenerator && window.UplinkThemeGenerator.getAccent) {
+      customAccent = window.UplinkThemeGenerator.getAccent();
+    }
+    picker.innerHTML += '<div class="theme-picker-item active" data-theme="custom" role="option" aria-selected="true">' +
+      '<div class="theme-picker-swatch" style="background:' + customAccent + '"></div>' +
+      '<span class="theme-picker-name">✦ Custom</span>' +
+    '</div>';
+  }
+
+  // Click handlers
+  picker.querySelectorAll('.theme-picker-item').forEach(function(item) {
+    item.addEventListener('click', function() {
+      var theme = item.dataset.theme;
+      if (item.dataset.premiumLocked === 'true') {
+        if (window.UplinkPremium) window.UplinkPremium.showUpgradeModal('Premium themes');
+        return;
+      }
+      apply(theme);
+      // Save preference
+      UplinkStorage.saveSettings({ theme: theme });
+    });
+  });
+}
+
+function updatePickerState(activeTheme) {
+  var picker = document.getElementById('themePicker');
+  if (!picker) return;
+
+  // Update active state on existing items
+  picker.querySelectorAll('.theme-picker-item').forEach(function(item) {
+    var isActive = item.dataset.theme === activeTheme;
+    item.classList.toggle('active', isActive);
+    item.setAttribute('aria-selected', isActive);
+  });
+
+  // If switching to custom and no custom item exists, rebuild
+  if (activeTheme === 'custom' && !picker.querySelector('[data-theme="custom"]')) {
+    buildPicker();
+  }
+  // If switching away from custom, remove the custom item
+  if (activeTheme !== 'custom') {
+    var customItem = picker.querySelector('[data-theme="custom"]');
+    if (customItem) customItem.remove();
+  }
+}
+
+// Rebuild picker when premium status changes
+window.addEventListener('uplink:premiumChange', function() {
+  buildPicker();
+});
+
+// Export API
+export const UplinkThemes = {
+  apply: apply,
+  get: get,
+  list: () => [...THEMES],
+  default: DEFAULT_THEME,
+  buildPicker: buildPicker,
+};
+
+export { apply, get, buildPicker, DEFAULT_THEME, THEMES };
+
+// Backward compat: assign to window
+window.UplinkThemes = UplinkThemes;
+
+// Register and init
+UplinkCore.registerModule('themes', init);

package/public/js/timestamps.js

@@ -0,0 +1,198 @@
+// ============================================
+// TIMESTAMPS MODULE
+// Show message timestamps below bubble text
+// ============================================
+
+const STORAGE_KEY = 'uplink-timestamps';
+let enabled = false;
+let messagesObserver = null;
+
+function init() {
+  loadSetting();
+  addSettingsUI();
+  applyTimestamps();
+
+  // Re-apply when messages load from gateway (they arrive after init)
+  window.addEventListener('uplink:satellite-switched', function() {
+    if (enabled) setTimeout(applyTimestamps, 200);
+  });
+  // Also re-apply periodically during initial load to catch gateway messages
+  if (enabled) {
+    var retries = 0;
+    var reapplyInterval = setInterval(function() {
+      applyTimestamps();
+      retries++;
+      if (retries >= 5) clearInterval(reapplyInterval);
+    }, 1000);
+  }
+
+  // Cleanup previous observer if init called again
+  if (messagesObserver) {
+    messagesObserver.disconnect();
+    messagesObserver = null;
+  }
+
+  // Watch for new messages
+  const messagesEl = document.getElementById('messages');
+  if (messagesEl) {
+    messagesObserver = new MutationObserver((mutations) => {
+      if (!enabled) return;
+      mutations.forEach(mutation => {
+        mutation.addedNodes.forEach(node => {
+          if (node.classList?.contains('message')) {
+            addTimestampToMessage(node);
+          }
+        });
+      });
+    });
+    messagesObserver.observe(messagesEl, { childList: true });
+  }
+
+  console.log('Timestamps: Initialized');
+}
+
+function loadSetting() {
+  enabled = localStorage.getItem(STORAGE_KEY) === 'true';
+}
+
+function saveSetting() {
+  localStorage.setItem(STORAGE_KEY, enabled.toString());
+}
+
+function addSettingsUI() {
+  const settingsPanel = document.getElementById('settingsPanel');
+  if (!settingsPanel) {
+    setTimeout(addSettingsUI, 100);
+    return;
+  }
+
+  if (document.getElementById('timestampsRow')) return;
+
+  const row = document.createElement('div');
+  row.className = 'setting-row';
+  row.id = 'timestampsRow';
+  row.innerHTML = `
+    <div>
+      <div class="setting-label">Message timestamps</div>
+      <div class="setting-desc">Show when messages were sent</div>
+    </div>
+    <div class="toggle ${enabled ? 'on' : ''}" id="timestampsToggle" tabindex="0" role="switch" aria-checked="${enabled}" aria-label="Toggle message timestamps"></div>
+  `;
+
+  // Insert into General section, after text size row
+  const generalSection = document.getElementById('section-general');
+  if (generalSection) {
+    generalSection.appendChild(row);
+  } else {
+    settingsPanel.appendChild(row);
+  }
+
+  const toggle = document.getElementById('timestampsToggle');
+  toggle.addEventListener('click', () => {
+    enabled = !enabled;
+    toggle.classList.toggle('on', enabled);
+    toggle.setAttribute('aria-checked', enabled.toString());
+    saveSetting();
+    applyTimestamps();
+  });
+  toggle.addEventListener('keydown', (e) => {
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault();
+      toggle.click();
+    }
+  });
+}
+
+/**
+ * Get the time for a message from its data-time attribute
+ */
+function getMessageTime(msg) {
+  var timeStr = msg.dataset.time;
+  if (timeStr) return new Date(parseInt(timeStr, 10));
+  return null;
+}
+
+/**
+ * Add a timestamp element inside a message bubble
+ */
+function addTimestampToMessage(msg) {
+  if (!msg || msg.classList.contains('system')) return;
+  if (!msg.querySelector('.message-timestamp')) {
+    var time = getMessageTime(msg);
+    var ts = document.createElement('span');
+    ts.className = 'message-timestamp';
+    ts.textContent = time ? formatTime(time) : '';
+    msg.appendChild(ts);
+  }
+  if (enabled) {
+    msg.classList.add('show-timestamp');
+  }
+}
+
+/**
+ * Apply or remove timestamps on all existing messages
+ */
+function applyTimestamps() {
+  var messages = document.querySelectorAll('#messages .message');
+
+  messages.forEach(function(msg) {
+    if (msg.classList.contains('system')) return;
+
+    if (enabled) {
+      if (!msg.querySelector('.message-timestamp')) {
+        var time = getMessageTime(msg);
+        var ts = document.createElement('span');
+        ts.className = 'message-timestamp';
+        ts.textContent = time ? formatTime(time) : '';
+        msg.appendChild(ts);
+      }
+      msg.classList.add('show-timestamp');
+    } else {
+      msg.classList.remove('show-timestamp');
+    }
+  });
+}
+
+function formatTime(date) {
+  const now = new Date();
+  const isToday = date.toDateString() === now.toDateString();
+  
+  if (isToday) {
+    return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+  }
+  
+  const yesterday = new Date(now);
+  yesterday.setDate(yesterday.getDate() - 1);
+  if (date.toDateString() === yesterday.toDateString()) {
+    return 'Yesterday ' + date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+  }
+  
+  return date.toLocaleDateString([], { month: 'short', day: 'numeric' }) + ' ' + 
+         date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+}
+
+// Cleanup function
+function destroy() {
+  if (messagesObserver) {
+    messagesObserver.disconnect();
+    messagesObserver = null;
+  }
+}
+
+// Expose API
+export const UplinkTimestamps = {
+  enable: () => { enabled = true; saveSetting(); applyTimestamps(); },
+  disable: () => { enabled = false; saveSetting(); applyTimestamps(); },
+  toggle: () => { enabled = !enabled; saveSetting(); applyTimestamps(); },
+  isEnabled: () => enabled,
+  format: formatTime,
+  destroy
+};
+
+import { UplinkCore } from './core.js';
+
+// Backward compat: assign to window
+window.UplinkTimestamps = UplinkTimestamps;
+
+// Register and init
+UplinkCore.registerModule('timestamps', init);