Jeffrey Smith
8364440081
Co-authored-by: Jeffrey Smith <jasafpro@gmail.com> Co-committed-by: Jeffrey Smith <jasafpro@gmail.com>
415 lines
18 KiB
JavaScript
415 lines
18 KiB
JavaScript
// ==========================================
|
|
// Chat Switchboard — Dashboard Package (v0.31.1)
|
|
// ==========================================
|
|
// SDK Exercise Surface. Exercises every sw.* primitive with ZERO
|
|
// component CSS overrides. All styling comes from the SDK itself.
|
|
//
|
|
// Primitives exercised:
|
|
// sw.userMenu, sw.menu, sw.toolbar, sw.tabs, sw.dropdown,
|
|
// sw.chat, sw.notes, sw.modal, sw.confirm, sw.toast,
|
|
// sw.on/emit, sw.api, sw.user/isAdmin, sw.theme, sw.pipe
|
|
//
|
|
// Dependencies (loaded by base.html):
|
|
// API, UI, App, sw, esc (ui-primitives)
|
|
// ==========================================
|
|
|
|
(function () {
|
|
'use strict';
|
|
|
|
const SURFACE_ID = 'dashboard';
|
|
if (window.__SURFACE__ !== SURFACE_ID) return;
|
|
|
|
const base = window.__BASE__ || '';
|
|
|
|
// ── Init ─────────────────────────────────────
|
|
|
|
async function _init() {
|
|
const mount = document.getElementById('extension-mount');
|
|
if (!mount) return;
|
|
|
|
const surface = document.createElement('div');
|
|
surface.className = 'surface-dashboard';
|
|
surface.id = 'dashboardSurface';
|
|
mount.appendChild(surface);
|
|
|
|
// ── Topbar ──
|
|
const topbar = _buildTopbar();
|
|
surface.appendChild(topbar);
|
|
|
|
// sw.userMenu — flyout: 'down' from topbar
|
|
sw.userMenu(topbar, { flyout: 'down' });
|
|
|
|
// ── Body ──
|
|
const body = document.createElement('div');
|
|
body.className = 'dashboard-body';
|
|
surface.appendChild(body);
|
|
|
|
// ── Sidebar (tabs: activity + notes) ──
|
|
const sidebar = document.createElement('div');
|
|
sidebar.className = 'dashboard-sidebar';
|
|
body.appendChild(sidebar);
|
|
|
|
// sw.tabs — two tabs
|
|
const tabs = sw.tabs(sidebar, {
|
|
tabs: [
|
|
{ id: 'activity', label: 'Activity' },
|
|
{ id: 'notes', label: 'Notes' },
|
|
],
|
|
activeTab: 'activity',
|
|
onActivate: function (id) {
|
|
if (id === 'notes' && !_notesLoaded) {
|
|
_notesLoaded = true;
|
|
if (_notePanel) {
|
|
_notePanel.loadNotesList();
|
|
_notePanel.loadNoteFolders();
|
|
}
|
|
}
|
|
},
|
|
});
|
|
|
|
// sw.chat — standalone in activity tab
|
|
const activityPanel = tabs.getPanel('activity');
|
|
if (activityPanel) {
|
|
sw.chat(activityPanel, { id: 'dash', standalone: true });
|
|
}
|
|
|
|
// sw.notes — lazy-loaded in notes tab
|
|
let _notePanel = null;
|
|
let _notesLoaded = false;
|
|
const notesPanel = tabs.getPanel('notes');
|
|
if (notesPanel) {
|
|
_notePanel = sw.notes(notesPanel, { projectId: null });
|
|
}
|
|
|
|
// ── Main content area ──
|
|
const main = document.createElement('div');
|
|
main.className = 'dashboard-main';
|
|
body.appendChild(main);
|
|
|
|
_buildMainContent(main);
|
|
|
|
// ── Theme reactivity ──
|
|
sw.theme.on('change', function (resolved) {
|
|
const cards = main.querySelectorAll('.dashboard-card');
|
|
cards.forEach(function (c) {
|
|
c.style.borderColor = ''; // reset to CSS default for new theme
|
|
});
|
|
});
|
|
|
|
// ── Cross-component events ──
|
|
sw.on('dashboard.filter.changed', function (payload) {
|
|
_loadChannels(main.querySelector('.dashboard-cards'), payload.value);
|
|
});
|
|
|
|
console.log('[DashboardPkg] Mounted');
|
|
}
|
|
|
|
// ── Topbar ──────────────────────────────────
|
|
|
|
function _buildTopbar() {
|
|
const el = document.createElement('div');
|
|
el.className = 'dashboard-topbar';
|
|
el.innerHTML =
|
|
'<a href="' + esc(base) + '/" class="dashboard-topbar-back" title="Back to chat">' +
|
|
'<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="19" y1="12" x2="5" y2="12"/><polyline points="12 19 5 12 12 5"/></svg>' +
|
|
'Back' +
|
|
'</a>' +
|
|
'<div class="dashboard-topbar-sep"></div>' +
|
|
'<span class="dashboard-topbar-title">Dashboard</span>' +
|
|
'<div class="dashboard-topbar-spacer"></div>';
|
|
|
|
// sw.toolbar — action buttons
|
|
const toolbarItems = [
|
|
{
|
|
id: 'refresh',
|
|
icon: '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="23 4 23 10 17 10"/><path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"/></svg>',
|
|
title: 'Refresh',
|
|
onClick: function () {
|
|
const cards = document.querySelector('.dashboard-cards');
|
|
if (cards) _loadChannels(cards, _currentFilter);
|
|
sw.toast('Refreshed', 'success');
|
|
},
|
|
},
|
|
];
|
|
|
|
// sw.isAdmin — conditionally show admin action
|
|
if (sw.isAdmin) {
|
|
toolbarItems.push({
|
|
id: 'admin',
|
|
icon: '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>',
|
|
title: 'Admin Panel',
|
|
onClick: function () { window.location.href = base + '/admin'; },
|
|
});
|
|
}
|
|
|
|
sw.toolbar(el, { items: toolbarItems });
|
|
|
|
return el;
|
|
}
|
|
|
|
// ── Main Content ────────────────────────────
|
|
|
|
let _currentFilter = '';
|
|
|
|
function _buildMainContent(main) {
|
|
// sw.user — greeting
|
|
const user = sw.user;
|
|
const greeting = document.createElement('div');
|
|
greeting.className = 'dashboard-greeting';
|
|
greeting.textContent = 'Welcome back' + (user ? ', ' + (user.display_name || user.username) : '');
|
|
main.appendChild(greeting);
|
|
|
|
const subtitle = document.createElement('div');
|
|
subtitle.className = 'dashboard-subtitle';
|
|
subtitle.textContent = 'Your recent conversations' + (sw.isAdmin ? ' \u00b7 Admin' : '');
|
|
main.appendChild(subtitle);
|
|
|
|
// ── Filter bar ──
|
|
const filterBar = document.createElement('div');
|
|
filterBar.className = 'dashboard-filter-bar';
|
|
main.appendChild(filterBar);
|
|
|
|
const filterLabel = document.createElement('span');
|
|
filterLabel.className = 'dashboard-filter-label';
|
|
filterLabel.textContent = 'Filter';
|
|
filterBar.appendChild(filterLabel);
|
|
|
|
// sw.dropdown — channel type filter
|
|
sw.dropdown(filterBar, {
|
|
items: [
|
|
{ value: '', label: 'All channels' },
|
|
{ value: 'channel', label: 'Team channels' },
|
|
{ value: 'direct', label: 'Direct chats' },
|
|
{ value: 'workflow', label: 'Workflows' },
|
|
],
|
|
value: '',
|
|
onChange: function (value) {
|
|
_currentFilter = value;
|
|
// sw.emit — cross-component event
|
|
sw.emit('dashboard.filter.changed', { value: value });
|
|
},
|
|
});
|
|
|
|
// ── Cards ──
|
|
const cards = document.createElement('div');
|
|
cards.className = 'dashboard-cards';
|
|
main.appendChild(cards);
|
|
|
|
_loadChannels(cards, '');
|
|
|
|
// ── Admin section (sw.isAdmin) ──
|
|
if (sw.isAdmin) {
|
|
const adminSection = document.createElement('div');
|
|
adminSection.className = 'dashboard-admin-section';
|
|
main.appendChild(adminSection);
|
|
|
|
const sectionTitle = document.createElement('div');
|
|
sectionTitle.className = 'dashboard-section-title';
|
|
sectionTitle.textContent = 'Administration';
|
|
adminSection.appendChild(sectionTitle);
|
|
|
|
const adminCards = document.createElement('div');
|
|
adminCards.className = 'dashboard-cards';
|
|
adminSection.appendChild(adminCards);
|
|
|
|
_loadAdminCards(adminCards);
|
|
}
|
|
}
|
|
|
|
// ── Channel Cards ───────────────────────────
|
|
|
|
async function _loadChannels(container, typeFilter) {
|
|
if (!container) return;
|
|
container.innerHTML = '<div class="dashboard-empty">Loading\u2026</div>';
|
|
|
|
try {
|
|
// sw.api — real API call
|
|
let url = '/api/v1/channels?page=1&per_page=12';
|
|
if (typeFilter) url += '&type=' + encodeURIComponent(typeFilter);
|
|
const resp = await sw.api.get(url);
|
|
const channels = resp.data || resp || [];
|
|
|
|
container.innerHTML = '';
|
|
if (!channels.length) {
|
|
container.innerHTML = '<div class="dashboard-empty">No channels found</div>';
|
|
return;
|
|
}
|
|
|
|
channels.forEach(function (ch) {
|
|
container.appendChild(_buildChannelCard(ch));
|
|
});
|
|
} catch (e) {
|
|
container.innerHTML = '<div class="dashboard-empty">Failed to load: ' + (typeof esc === 'function' ? esc(e.message) : e.message) + '</div>';
|
|
}
|
|
}
|
|
|
|
function _buildChannelCard(ch) {
|
|
const card = document.createElement('div');
|
|
card.className = 'dashboard-card';
|
|
|
|
const header = document.createElement('div');
|
|
header.className = 'dashboard-card-header';
|
|
card.appendChild(header);
|
|
|
|
const title = document.createElement('div');
|
|
title.className = 'dashboard-card-title';
|
|
title.textContent = ch.title || ch.name || 'Untitled';
|
|
header.appendChild(title);
|
|
|
|
const meta = document.createElement('div');
|
|
meta.className = 'dashboard-card-meta';
|
|
meta.textContent = ch.type || '';
|
|
card.appendChild(meta);
|
|
|
|
if (ch.description) {
|
|
const desc = document.createElement('div');
|
|
desc.className = 'dashboard-card-desc';
|
|
desc.textContent = ch.description.slice(0, 120);
|
|
card.appendChild(desc);
|
|
}
|
|
|
|
const updated = ch.updated_at || ch.created_at;
|
|
if (updated) {
|
|
const date = document.createElement('div');
|
|
date.className = 'dashboard-card-meta';
|
|
date.textContent = new Date(updated).toLocaleDateString();
|
|
card.appendChild(date);
|
|
}
|
|
|
|
// ── Card action menu ──
|
|
const actions = document.createElement('div');
|
|
actions.className = 'dashboard-card-actions';
|
|
card.appendChild(actions);
|
|
|
|
const menuBtn = document.createElement('button');
|
|
menuBtn.className = 'icon-btn';
|
|
menuBtn.title = 'Actions';
|
|
menuBtn.innerHTML = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="5" r="1"/><circle cx="12" cy="12" r="1"/><circle cx="12" cy="19" r="1"/></svg>';
|
|
actions.appendChild(menuBtn);
|
|
|
|
// sw.menu — per-card action flyout
|
|
sw.menu(menuBtn, {
|
|
items: [
|
|
{
|
|
label: 'Open',
|
|
icon: '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/></svg>',
|
|
onClick: function () {
|
|
window.location.href = base + '/chat/' + ch.id;
|
|
},
|
|
},
|
|
{
|
|
label: 'Details',
|
|
icon: '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg>',
|
|
onClick: function () {
|
|
// sw.modal — show channel details
|
|
_showDetailModal(ch);
|
|
},
|
|
},
|
|
{ divider: true },
|
|
{
|
|
label: 'Delete',
|
|
danger: true,
|
|
icon: '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg>',
|
|
onClick: function () {
|
|
_deleteChannel(ch);
|
|
},
|
|
},
|
|
],
|
|
position: 'down',
|
|
});
|
|
|
|
return card;
|
|
}
|
|
|
|
// ── Detail Modal ────────────────────────────
|
|
|
|
function _showDetailModal(ch) {
|
|
// Build modal content
|
|
let existing = document.getElementById('dashDetailModal');
|
|
if (existing) existing.remove();
|
|
|
|
const modal = document.createElement('div');
|
|
modal.id = 'dashDetailModal';
|
|
modal.className = 'modal-overlay';
|
|
modal.style.cssText = 'position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;background:var(--overlay)';
|
|
|
|
const box = document.createElement('div');
|
|
box.style.cssText = 'background:var(--bg-raised);border:1px solid var(--border);border-radius:var(--radius-lg);padding:24px;max-width:400px;width:90%;max-height:80vh;overflow-y:auto;';
|
|
|
|
box.innerHTML =
|
|
'<h3 style="margin:0 0 12px;font-size:16px;color:var(--text);">' + (typeof esc === 'function' ? esc(ch.title || 'Untitled') : (ch.title || 'Untitled')) + '</h3>' +
|
|
'<div style="font-size:12px;color:var(--text-2);margin-bottom:8px;"><strong>Type:</strong> ' + (typeof esc === 'function' ? esc(ch.type || 'unknown') : (ch.type || 'unknown')) + '</div>' +
|
|
'<div style="font-size:12px;color:var(--text-2);margin-bottom:8px;"><strong>ID:</strong> ' + (typeof esc === 'function' ? esc(ch.id || '') : (ch.id || '')) + '</div>' +
|
|
(ch.description ? '<div style="font-size:12px;color:var(--text-2);margin-bottom:8px;"><strong>Description:</strong> ' + (typeof esc === 'function' ? esc(ch.description) : ch.description) + '</div>' : '') +
|
|
(ch.created_at ? '<div style="font-size:12px;color:var(--text-3);margin-bottom:16px;">Created: ' + new Date(ch.created_at).toLocaleString() + '</div>' : '') +
|
|
'<div style="display:flex;justify-content:flex-end;gap:8px;">' +
|
|
'<button class="btn-small" id="dashDetailClose">Close</button>' +
|
|
'<button class="btn-small btn-primary" id="dashDetailOpen">Open Chat</button>' +
|
|
'</div>';
|
|
|
|
modal.appendChild(box);
|
|
document.body.appendChild(modal);
|
|
|
|
modal.addEventListener('click', function (e) {
|
|
if (e.target === modal) modal.remove();
|
|
});
|
|
document.getElementById('dashDetailClose').addEventListener('click', function () { modal.remove(); });
|
|
document.getElementById('dashDetailOpen').addEventListener('click', function () {
|
|
window.location.href = base + '/chat/' + ch.id;
|
|
});
|
|
}
|
|
|
|
// ── Delete Channel ──────────────────────────
|
|
|
|
async function _deleteChannel(ch) {
|
|
// sw.confirm — destructive action guard
|
|
const ok = await sw.confirm('Delete "' + (ch.title || 'Untitled') + '"? This cannot be undone.');
|
|
if (!ok) return;
|
|
|
|
try {
|
|
// sw.api.del — real DELETE call
|
|
await sw.api.del('/api/v1/channels/' + ch.id);
|
|
// sw.toast — success feedback
|
|
sw.toast('Channel deleted', 'success');
|
|
// Refresh cards
|
|
const cards = document.querySelector('.dashboard-cards');
|
|
if (cards) _loadChannels(cards, _currentFilter);
|
|
} catch (e) {
|
|
// sw.toast — error feedback
|
|
sw.toast('Delete failed: ' + e.message, 'error');
|
|
}
|
|
}
|
|
|
|
// ── Admin Cards ─────────────────────────────
|
|
|
|
async function _loadAdminCards(container) {
|
|
try {
|
|
const resp = await sw.api.get('/api/v1/admin/packages');
|
|
const packages = resp.data || resp || [];
|
|
|
|
container.innerHTML = '';
|
|
packages.forEach(function (pkg) {
|
|
const card = document.createElement('div');
|
|
card.className = 'dashboard-card';
|
|
card.innerHTML =
|
|
'<div class="dashboard-card-header">' +
|
|
'<div class="dashboard-card-title">' + (typeof esc === 'function' ? esc(pkg.title || pkg.id) : (pkg.title || pkg.id)) + '</div>' +
|
|
'</div>' +
|
|
'<div class="dashboard-card-meta">' + (typeof esc === 'function' ? esc(pkg.type || '') : (pkg.type || '')) + ' \u00b7 ' + (typeof esc === 'function' ? esc(pkg.tier || '') : (pkg.tier || '')) + '</div>' +
|
|
'<div class="dashboard-card-desc">' + (typeof esc === 'function' ? esc(pkg.description || '') : (pkg.description || '')) + '</div>';
|
|
container.appendChild(card);
|
|
});
|
|
|
|
if (!packages.length) {
|
|
container.innerHTML = '<div class="dashboard-empty">No packages installed</div>';
|
|
}
|
|
} catch (_) {
|
|
container.innerHTML = '<div class="dashboard-empty">Failed to load packages</div>';
|
|
}
|
|
}
|
|
|
|
// ── Boot ─────────────────────────────────────
|
|
|
|
document.addEventListener('DOMContentLoaded', _init);
|
|
})();
|