Feat v0.6.12 css isolation (#47)
All checks were successful
All checks were successful
Co-authored-by: Jeffrey Smith <jasafpro@gmail.com> Co-committed-by: Jeffrey Smith <jasafpro@gmail.com>
This commit was merged in pull request #47.
This commit is contained in:
@@ -6,7 +6,7 @@
|
||||
All SDK components style themselves.
|
||||
========================================== */
|
||||
|
||||
.surface-dashboard {
|
||||
.ext-dashboard {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
@@ -15,7 +15,7 @@
|
||||
|
||||
/* ── Topbar ──────────────────────────────── */
|
||||
|
||||
.dashboard-topbar {
|
||||
.ext-dashboard-topbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
@@ -26,7 +26,7 @@
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.dashboard-topbar-back {
|
||||
.ext-dashboard-topbar-back {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
@@ -39,30 +39,30 @@
|
||||
transition: color 0.15s, background 0.15s;
|
||||
}
|
||||
|
||||
.dashboard-topbar-back:hover {
|
||||
.ext-dashboard-topbar-back:hover {
|
||||
color: var(--text);
|
||||
background: var(--bg-hover);
|
||||
}
|
||||
|
||||
.dashboard-topbar-title {
|
||||
.ext-dashboard-topbar-title {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.dashboard-topbar-sep {
|
||||
.ext-dashboard-topbar-sep {
|
||||
width: 1px;
|
||||
height: 18px;
|
||||
background: var(--border);
|
||||
}
|
||||
|
||||
.dashboard-topbar-spacer {
|
||||
.ext-dashboard-topbar-spacer {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
/* ── Body ────────────────────────────────── */
|
||||
|
||||
.dashboard-body {
|
||||
.ext-dashboard-body {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
@@ -70,7 +70,7 @@
|
||||
|
||||
/* ── Sidebar ─────────────────────────────── */
|
||||
|
||||
.dashboard-sidebar {
|
||||
.ext-dashboard-sidebar {
|
||||
width: 300px;
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
@@ -81,34 +81,34 @@
|
||||
|
||||
/* ── Main Content ────────────────────────── */
|
||||
|
||||
.dashboard-main {
|
||||
.ext-dashboard-main {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 20px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.dashboard-greeting {
|
||||
.ext-dashboard-greeting {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: var(--text);
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.dashboard-subtitle {
|
||||
.ext-dashboard-subtitle {
|
||||
font-size: 13px;
|
||||
color: var(--text-3);
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.dashboard-filter-bar {
|
||||
.ext-dashboard-filter-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.dashboard-filter-label {
|
||||
.ext-dashboard-filter-label {
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: var(--text-2);
|
||||
@@ -118,13 +118,13 @@
|
||||
|
||||
/* ── Cards Grid ──────────────────────────── */
|
||||
|
||||
.dashboard-cards {
|
||||
.ext-dashboard-cards {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.dashboard-card {
|
||||
.ext-dashboard-card {
|
||||
background: var(--bg-raised);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-lg);
|
||||
@@ -135,17 +135,17 @@
|
||||
transition: border-color 0.15s;
|
||||
}
|
||||
|
||||
.dashboard-card:hover {
|
||||
.ext-dashboard-card:hover {
|
||||
border-color: var(--border-elevated);
|
||||
}
|
||||
|
||||
.dashboard-card-header {
|
||||
.ext-dashboard-card-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.dashboard-card-title {
|
||||
.ext-dashboard-card-title {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: var(--text);
|
||||
@@ -155,24 +155,24 @@
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.dashboard-card-meta {
|
||||
.ext-dashboard-card-meta {
|
||||
font-size: 11px;
|
||||
color: var(--text-3);
|
||||
}
|
||||
|
||||
.dashboard-card-desc {
|
||||
.ext-dashboard-card-desc {
|
||||
font-size: 12px;
|
||||
color: var(--text-2);
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.dashboard-card-actions {
|
||||
.ext-dashboard-card-actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.dashboard-empty {
|
||||
.ext-dashboard-empty {
|
||||
text-align: center;
|
||||
color: var(--text-3);
|
||||
font-size: 13px;
|
||||
@@ -181,13 +181,13 @@
|
||||
|
||||
/* ── Admin Section ───────────────────────── */
|
||||
|
||||
.dashboard-admin-section {
|
||||
.ext-dashboard-admin-section {
|
||||
margin-top: 24px;
|
||||
padding-top: 16px;
|
||||
border-top: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.dashboard-section-title {
|
||||
.ext-dashboard-section-title {
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: var(--text-2);
|
||||
|
||||
@@ -28,7 +28,7 @@
|
||||
if (!mount) return;
|
||||
|
||||
const surface = document.createElement('div');
|
||||
surface.className = 'surface-dashboard';
|
||||
surface.className = 'ext-dashboard';
|
||||
surface.id = 'dashboardSurface';
|
||||
mount.appendChild(surface);
|
||||
|
||||
@@ -41,12 +41,12 @@
|
||||
|
||||
// ── Body ──
|
||||
const body = document.createElement('div');
|
||||
body.className = 'dashboard-body';
|
||||
body.className = 'ext-dashboard-body';
|
||||
surface.appendChild(body);
|
||||
|
||||
// ── Sidebar (tabs: activity + notes) ──
|
||||
const sidebar = document.createElement('div');
|
||||
sidebar.className = 'dashboard-sidebar';
|
||||
sidebar.className = 'ext-dashboard-sidebar';
|
||||
body.appendChild(sidebar);
|
||||
|
||||
// sw.tabs — two tabs
|
||||
@@ -83,14 +83,14 @@
|
||||
|
||||
// ── Main content area ──
|
||||
const main = document.createElement('div');
|
||||
main.className = 'dashboard-main';
|
||||
main.className = 'ext-dashboard-main';
|
||||
body.appendChild(main);
|
||||
|
||||
_buildMainContent(main);
|
||||
|
||||
// ── Theme reactivity ──
|
||||
sw.theme.on('change', function (resolved) {
|
||||
const cards = main.querySelectorAll('.dashboard-card');
|
||||
const cards = main.querySelectorAll('.ext-dashboard-card');
|
||||
cards.forEach(function (c) {
|
||||
c.style.borderColor = ''; // reset to CSS default for new theme
|
||||
});
|
||||
@@ -98,7 +98,7 @@
|
||||
|
||||
// ── Cross-component events ──
|
||||
sw.on('dashboard.filter.changed', function (payload) {
|
||||
_loadChannels(main.querySelector('.dashboard-cards'), payload.value);
|
||||
_loadChannels(main.querySelector('.ext-dashboard-cards'), payload.value);
|
||||
});
|
||||
|
||||
console.log('[DashboardPkg] Mounted');
|
||||
@@ -108,15 +108,15 @@
|
||||
|
||||
function _buildTopbar() {
|
||||
const el = document.createElement('div');
|
||||
el.className = 'dashboard-topbar';
|
||||
el.className = 'ext-dashboard-topbar';
|
||||
el.innerHTML =
|
||||
'<a href="' + esc(base) + '/" class="dashboard-topbar-back" title="Back to chat">' +
|
||||
'<a href="' + esc(base) + '/" class="ext-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>';
|
||||
'<div class="ext-dashboard-topbar-sep"></div>' +
|
||||
'<span class="ext-dashboard-topbar-title">Dashboard</span>' +
|
||||
'<div class="ext-dashboard-topbar-spacer"></div>';
|
||||
|
||||
// sw.toolbar — action buttons
|
||||
const toolbarItems = [
|
||||
@@ -125,7 +125,7 @@
|
||||
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');
|
||||
const cards = document.querySelector('.ext-dashboard-cards');
|
||||
if (cards) _loadChannels(cards, _currentFilter);
|
||||
sw.toast('Refreshed', 'success');
|
||||
},
|
||||
@@ -155,22 +155,22 @@
|
||||
// sw.user — greeting
|
||||
const user = sw.user;
|
||||
const greeting = document.createElement('div');
|
||||
greeting.className = 'dashboard-greeting';
|
||||
greeting.className = 'ext-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.className = 'ext-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';
|
||||
filterBar.className = 'ext-dashboard-filter-bar';
|
||||
main.appendChild(filterBar);
|
||||
|
||||
const filterLabel = document.createElement('span');
|
||||
filterLabel.className = 'dashboard-filter-label';
|
||||
filterLabel.className = 'ext-dashboard-filter-label';
|
||||
filterLabel.textContent = 'Filter';
|
||||
filterBar.appendChild(filterLabel);
|
||||
|
||||
@@ -192,7 +192,7 @@
|
||||
|
||||
// ── Cards ──
|
||||
const cards = document.createElement('div');
|
||||
cards.className = 'dashboard-cards';
|
||||
cards.className = 'ext-dashboard-cards';
|
||||
main.appendChild(cards);
|
||||
|
||||
_loadChannels(cards, '');
|
||||
@@ -200,16 +200,16 @@
|
||||
// ── Admin section (sw.isAdmin) ──
|
||||
if (sw.isAdmin) {
|
||||
const adminSection = document.createElement('div');
|
||||
adminSection.className = 'dashboard-admin-section';
|
||||
adminSection.className = 'ext-dashboard-admin-section';
|
||||
main.appendChild(adminSection);
|
||||
|
||||
const sectionTitle = document.createElement('div');
|
||||
sectionTitle.className = 'dashboard-section-title';
|
||||
sectionTitle.className = 'ext-dashboard-section-title';
|
||||
sectionTitle.textContent = 'Administration';
|
||||
adminSection.appendChild(sectionTitle);
|
||||
|
||||
const adminCards = document.createElement('div');
|
||||
adminCards.className = 'dashboard-cards';
|
||||
adminCards.className = 'ext-dashboard-cards';
|
||||
adminSection.appendChild(adminCards);
|
||||
|
||||
_loadAdminCards(adminCards);
|
||||
@@ -220,7 +220,7 @@
|
||||
|
||||
async function _loadChannels(container, typeFilter) {
|
||||
if (!container) return;
|
||||
container.innerHTML = '<div class="dashboard-empty">Loading\u2026</div>';
|
||||
container.innerHTML = '<div class="ext-dashboard-empty">Loading\u2026</div>';
|
||||
|
||||
try {
|
||||
// sw.api — real API call
|
||||
@@ -231,7 +231,7 @@
|
||||
|
||||
container.innerHTML = '';
|
||||
if (!channels.length) {
|
||||
container.innerHTML = '<div class="dashboard-empty">No channels found</div>';
|
||||
container.innerHTML = '<div class="ext-dashboard-empty">No channels found</div>';
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -239,31 +239,31 @@
|
||||
container.appendChild(_buildChannelCard(ch));
|
||||
});
|
||||
} catch (e) {
|
||||
container.innerHTML = '<div class="dashboard-empty">Failed to load: ' + (typeof esc === 'function' ? esc(e.message) : e.message) + '</div>';
|
||||
container.innerHTML = '<div class="ext-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';
|
||||
card.className = 'ext-dashboard-card';
|
||||
|
||||
const header = document.createElement('div');
|
||||
header.className = 'dashboard-card-header';
|
||||
header.className = 'ext-dashboard-card-header';
|
||||
card.appendChild(header);
|
||||
|
||||
const title = document.createElement('div');
|
||||
title.className = 'dashboard-card-title';
|
||||
title.className = 'ext-dashboard-card-title';
|
||||
title.textContent = ch.title || ch.name || 'Untitled';
|
||||
header.appendChild(title);
|
||||
|
||||
const meta = document.createElement('div');
|
||||
meta.className = 'dashboard-card-meta';
|
||||
meta.className = 'ext-dashboard-card-meta';
|
||||
meta.textContent = ch.type || '';
|
||||
card.appendChild(meta);
|
||||
|
||||
if (ch.description) {
|
||||
const desc = document.createElement('div');
|
||||
desc.className = 'dashboard-card-desc';
|
||||
desc.className = 'ext-dashboard-card-desc';
|
||||
desc.textContent = ch.description.slice(0, 120);
|
||||
card.appendChild(desc);
|
||||
}
|
||||
@@ -271,14 +271,14 @@
|
||||
const updated = ch.updated_at || ch.created_at;
|
||||
if (updated) {
|
||||
const date = document.createElement('div');
|
||||
date.className = 'dashboard-card-meta';
|
||||
date.className = 'ext-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';
|
||||
actions.className = 'ext-dashboard-card-actions';
|
||||
card.appendChild(actions);
|
||||
|
||||
const menuBtn = document.createElement('button');
|
||||
@@ -372,7 +372,7 @@
|
||||
// sw.toast — success feedback
|
||||
sw.toast('Channel deleted', 'success');
|
||||
// Refresh cards
|
||||
const cards = document.querySelector('.dashboard-cards');
|
||||
const cards = document.querySelector('.ext-dashboard-cards');
|
||||
if (cards) _loadChannels(cards, _currentFilter);
|
||||
} catch (e) {
|
||||
// sw.toast — error feedback
|
||||
@@ -390,21 +390,21 @@
|
||||
container.innerHTML = '';
|
||||
packages.forEach(function (pkg) {
|
||||
const card = document.createElement('div');
|
||||
card.className = 'dashboard-card';
|
||||
card.className = 'ext-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 class="ext-dashboard-card-header">' +
|
||||
'<div class="ext-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>';
|
||||
'<div class="ext-dashboard-card-meta">' + (typeof esc === 'function' ? esc(pkg.type || '') : (pkg.type || '')) + ' \u00b7 ' + (typeof esc === 'function' ? esc(pkg.tier || '') : (pkg.tier || '')) + '</div>' +
|
||||
'<div class="ext-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>';
|
||||
container.innerHTML = '<div class="ext-dashboard-empty">No packages installed</div>';
|
||||
}
|
||||
} catch (_) {
|
||||
container.innerHTML = '<div class="dashboard-empty">Failed to load packages</div>';
|
||||
container.innerHTML = '<div class="ext-dashboard-empty">Failed to load packages</div>';
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user