1092 lines
30 KiB
TypeScript
1092 lines
30 KiB
TypeScript
/**
|
||
* <rstack-user-dashboard> — Customizable space dashboard with widget cards.
|
||
*
|
||
* Always accessible via the persistent home icon in the tab bar.
|
||
* Users can toggle and reorder summary widget cards from any rApp.
|
||
*
|
||
* Attributes:
|
||
* space — current space slug
|
||
*/
|
||
|
||
import { getSession, getAccessToken } from "./rstack-identity";
|
||
import { getModuleApiBase } from "../url-helpers";
|
||
|
||
interface MemberInfo {
|
||
did: string;
|
||
username: string;
|
||
displayName: string;
|
||
}
|
||
|
||
interface NotificationItem {
|
||
id: string;
|
||
category: string;
|
||
title: string;
|
||
body: string | null;
|
||
actionUrl: string | null;
|
||
createdAt: string;
|
||
read: boolean;
|
||
}
|
||
|
||
interface TabLayer {
|
||
moduleId: string;
|
||
label?: string;
|
||
icon?: string;
|
||
}
|
||
|
||
interface WidgetConfig {
|
||
id: string;
|
||
enabled: boolean;
|
||
order: number;
|
||
}
|
||
|
||
interface SummaryTask {
|
||
id: string;
|
||
title: string;
|
||
status: string;
|
||
priority: string;
|
||
createdAt: number;
|
||
}
|
||
|
||
interface SummaryEvent {
|
||
title: string;
|
||
start: string;
|
||
end: string;
|
||
allDay: boolean;
|
||
location: string | null;
|
||
}
|
||
|
||
interface SummaryFlow {
|
||
id: string;
|
||
name: string;
|
||
nodeCount: number;
|
||
createdAt: number;
|
||
}
|
||
|
||
interface WalletBalance {
|
||
tokenId: string;
|
||
symbol: string;
|
||
balance: number;
|
||
}
|
||
|
||
// ── Widget registry ──
|
||
|
||
const WIDGET_REGISTRY: Record<string, {
|
||
label: string;
|
||
icon: string;
|
||
requiresAuth: boolean;
|
||
defaultEnabled: boolean;
|
||
}> = {
|
||
tasks: { label: "Open Tasks", icon: "\u{1F4CB}", requiresAuth: false, defaultEnabled: true },
|
||
calendar: { label: "Upcoming Events", icon: "\u{1F4C5}", requiresAuth: false, defaultEnabled: true },
|
||
activity: { label: "Recent Activity", icon: "\u{1F514}", requiresAuth: true, defaultEnabled: true },
|
||
members: { label: "Members", icon: "\u{1F465}", requiresAuth: false, defaultEnabled: true },
|
||
tools: { label: "Recently Open", icon: "\u{1F527}", requiresAuth: false, defaultEnabled: true },
|
||
quickactions: { label: "Quick Actions", icon: "\u26A1", requiresAuth: false, defaultEnabled: true },
|
||
wallet: { label: "Wallet Balances", icon: "\u{1F4B0}", requiresAuth: true, defaultEnabled: false },
|
||
flows: { label: "Active Flows", icon: "\u{1F30A}", requiresAuth: false, defaultEnabled: false },
|
||
};
|
||
|
||
const WIDGET_ORDER = ["tasks", "calendar", "activity", "members", "tools", "quickactions", "wallet", "flows"];
|
||
|
||
const CACHE_TTL = 30_000; // 30s
|
||
|
||
const PRIORITY_COLORS: Record<string, string> = {
|
||
HIGH: "#ef4444",
|
||
MEDIUM: "#f59e0b",
|
||
LOW: "#22c55e",
|
||
};
|
||
|
||
export class RStackUserDashboard extends HTMLElement {
|
||
#shadow: ShadowRoot;
|
||
#members: MemberInfo[] = [];
|
||
#notifications: NotificationItem[] = [];
|
||
#openTabs: TabLayer[] = [];
|
||
#tasks: SummaryTask[] = [];
|
||
#events: SummaryEvent[] = [];
|
||
#flows: SummaryFlow[] = [];
|
||
#walletBalances: WalletBalance[] = [];
|
||
#membersLoading = true;
|
||
#notifLoading = true;
|
||
#summaryLoading = true;
|
||
#walletLoading = true;
|
||
#lastFetch = 0;
|
||
#widgetConfigs: WidgetConfig[] = [];
|
||
#isCustomizing = false;
|
||
|
||
constructor() {
|
||
super();
|
||
this.#shadow = this.attachShadow({ mode: "open" });
|
||
}
|
||
|
||
static get observedAttributes() {
|
||
return ["space"];
|
||
}
|
||
|
||
get space(): string {
|
||
return this.getAttribute("space") || "";
|
||
}
|
||
|
||
connectedCallback() {
|
||
this.#loadWidgetConfigs();
|
||
this.#render();
|
||
if (this.offsetParent !== null) {
|
||
this.#loadData();
|
||
}
|
||
}
|
||
|
||
attributeChangedCallback() {
|
||
this.#lastFetch = 0;
|
||
this.#loadWidgetConfigs();
|
||
this.#render();
|
||
}
|
||
|
||
setOpenTabs(tabs: TabLayer[]) {
|
||
this.#openTabs = tabs;
|
||
}
|
||
|
||
refresh() {
|
||
if (Date.now() - this.#lastFetch < CACHE_TTL) {
|
||
this.#render();
|
||
return;
|
||
}
|
||
this.#membersLoading = true;
|
||
this.#notifLoading = true;
|
||
this.#summaryLoading = true;
|
||
this.#walletLoading = true;
|
||
this.#render();
|
||
this.#loadData();
|
||
}
|
||
|
||
// ── Widget config persistence ──
|
||
|
||
#widgetConfigKey(): string {
|
||
return `rspace_dashboard_widgets_${this.space || "default"}`;
|
||
}
|
||
|
||
#loadWidgetConfigs() {
|
||
try {
|
||
const raw = localStorage.getItem(this.#widgetConfigKey());
|
||
if (raw) {
|
||
const parsed = JSON.parse(raw) as WidgetConfig[];
|
||
if (Array.isArray(parsed) && parsed.length > 0) {
|
||
// Merge with registry in case new widgets were added
|
||
const known = new Set(parsed.map(c => c.id));
|
||
let maxOrder = Math.max(...parsed.map(c => c.order));
|
||
for (const id of WIDGET_ORDER) {
|
||
if (!known.has(id)) {
|
||
const w = WIDGET_REGISTRY[id];
|
||
parsed.push({ id, enabled: w.defaultEnabled, order: ++maxOrder });
|
||
}
|
||
}
|
||
this.#widgetConfigs = parsed;
|
||
return;
|
||
}
|
||
}
|
||
} catch { /* ignore */ }
|
||
|
||
// Default config
|
||
this.#widgetConfigs = WIDGET_ORDER.map((id, i) => ({
|
||
id,
|
||
enabled: WIDGET_REGISTRY[id].defaultEnabled,
|
||
order: i,
|
||
}));
|
||
}
|
||
|
||
#saveWidgetConfigs() {
|
||
try {
|
||
localStorage.setItem(this.#widgetConfigKey(), JSON.stringify(this.#widgetConfigs));
|
||
} catch { /* ignore */ }
|
||
}
|
||
|
||
// ── Data loading ──
|
||
|
||
async #loadData() {
|
||
this.#lastFetch = Date.now();
|
||
const enabled = new Set(this.#widgetConfigs.filter(c => c.enabled).map(c => c.id));
|
||
const fetches: Promise<void>[] = [];
|
||
|
||
if (enabled.has("members")) fetches.push(this.#fetchMembers());
|
||
else { this.#membersLoading = false; }
|
||
|
||
if (enabled.has("activity")) fetches.push(this.#fetchNotifications());
|
||
else { this.#notifLoading = false; }
|
||
|
||
if (enabled.has("tasks") || enabled.has("calendar") || enabled.has("flows")) {
|
||
fetches.push(this.#fetchSummary());
|
||
} else { this.#summaryLoading = false; }
|
||
|
||
if (enabled.has("wallet")) fetches.push(this.#fetchWallet());
|
||
else { this.#walletLoading = false; }
|
||
|
||
await Promise.all(fetches);
|
||
}
|
||
|
||
async #fetchMembers() {
|
||
this.#membersLoading = true;
|
||
try {
|
||
const res = await fetch(`${getModuleApiBase("rspace")}/api/space-members`);
|
||
if (res.ok) {
|
||
const data = await res.json();
|
||
this.#members = data.members || [];
|
||
}
|
||
} catch { /* offline */ }
|
||
this.#membersLoading = false;
|
||
this.#render();
|
||
}
|
||
|
||
async #fetchNotifications() {
|
||
this.#notifLoading = true;
|
||
const token = getAccessToken();
|
||
if (!token) {
|
||
this.#notifLoading = false;
|
||
this.#render();
|
||
return;
|
||
}
|
||
try {
|
||
const res = await fetch("/api/notifications?limit=5", {
|
||
headers: { Authorization: `Bearer ${token}` },
|
||
});
|
||
if (res.ok) {
|
||
const data = await res.json();
|
||
this.#notifications = data.notifications || [];
|
||
}
|
||
} catch { /* offline */ }
|
||
this.#notifLoading = false;
|
||
this.#render();
|
||
}
|
||
|
||
async #fetchSummary() {
|
||
this.#summaryLoading = true;
|
||
try {
|
||
const res = await fetch(`/api/dashboard-summary/${encodeURIComponent(this.space)}`);
|
||
if (res.ok) {
|
||
const data = await res.json();
|
||
this.#tasks = data.tasks || [];
|
||
this.#events = data.calendar || [];
|
||
this.#flows = data.flows || [];
|
||
}
|
||
} catch { /* offline */ }
|
||
this.#summaryLoading = false;
|
||
this.#render();
|
||
}
|
||
|
||
async #fetchWallet() {
|
||
this.#walletLoading = true;
|
||
const token = getAccessToken();
|
||
if (!token) {
|
||
this.#walletLoading = false;
|
||
this.#render();
|
||
return;
|
||
}
|
||
try {
|
||
const res = await fetch("/api/crdt-tokens/my-balances", {
|
||
headers: { Authorization: `Bearer ${token}` },
|
||
});
|
||
if (res.ok) {
|
||
const data = await res.json();
|
||
this.#walletBalances = data.balances || [];
|
||
}
|
||
} catch { /* offline */ }
|
||
this.#walletLoading = false;
|
||
this.#render();
|
||
}
|
||
|
||
// ── Helpers ──
|
||
|
||
#timeAgo(iso: string): string {
|
||
const diff = Date.now() - new Date(iso).getTime();
|
||
const mins = Math.floor(diff / 60_000);
|
||
if (mins < 1) return "just now";
|
||
if (mins < 60) return `${mins}m ago`;
|
||
const hrs = Math.floor(mins / 60);
|
||
if (hrs < 24) return `${hrs}h ago`;
|
||
const days = Math.floor(hrs / 24);
|
||
if (days < 30) return `${days}d ago`;
|
||
return `${Math.floor(days / 30)}mo ago`;
|
||
}
|
||
|
||
#formatEventTime(iso: string, allDay: boolean): string {
|
||
if (allDay) return new Date(iso).toLocaleDateString(undefined, { month: "short", day: "numeric" });
|
||
return new Date(iso).toLocaleString(undefined, { month: "short", day: "numeric", hour: "numeric", minute: "2-digit" });
|
||
}
|
||
|
||
#dispatch(moduleId: string) {
|
||
this.dispatchEvent(new CustomEvent("dashboard-navigate", {
|
||
bubbles: true,
|
||
detail: { moduleId, spaceSlug: this.space },
|
||
}));
|
||
}
|
||
|
||
#parseActionUrl(url: string | null): { moduleId: string; spaceSlug?: string } | null {
|
||
if (!url) return null;
|
||
try {
|
||
const parts = url.replace(/^\//, "").split("/");
|
||
if (parts.length >= 2) return { spaceSlug: parts[0], moduleId: parts[1] };
|
||
if (parts.length === 1 && parts[0]) return { moduleId: parts[0] };
|
||
} catch { /* fall through */ }
|
||
return null;
|
||
}
|
||
|
||
#memberInitial(m: MemberInfo): string {
|
||
return (m.displayName || m.username || "?").charAt(0).toUpperCase();
|
||
}
|
||
|
||
#moduleIcon(moduleId: string): string {
|
||
const icons: Record<string, string> = {
|
||
rspace: "\u{1F30C}", rnotes: "\u{1F4DD}", rmeets: "\u{1F4F9}", rvote: "\u{1F5F3}",
|
||
rnetwork: "\u{1F465}", rcalendar: "\u{1F4C5}", rtasks: "\u2705",
|
||
rwallet: "\u{1F4B0}", rmail: "\u{1F4E7}", rmaps: "\u{1F5FA}",
|
||
rprompt: "\u{1F916}", rzine: "\u{1F4D6}", rfiles: "\u{1F4C1}",
|
||
};
|
||
return icons[moduleId] || "\u{1F4E6}";
|
||
}
|
||
|
||
#moduleLabel(tab: TabLayer): string {
|
||
if (tab.label) return tab.label;
|
||
const id = tab.moduleId;
|
||
return id.charAt(0).toUpperCase() + id.slice(1);
|
||
}
|
||
|
||
// ── Per-widget renderers ──
|
||
|
||
#renderWidgetTasks(): string {
|
||
if (this.#summaryLoading) return `<div class="section-empty">Loading...</div>`;
|
||
if (this.#tasks.length === 0) return `<div class="section-empty">No open tasks</div>`;
|
||
return `<div class="widget-list">${this.#tasks.map(t => `
|
||
<button class="widget-list-item" data-navigate="rtasks">
|
||
<span class="priority-dot" style="background:${PRIORITY_COLORS[t.priority] || "#94a3b8"}"></span>
|
||
<span class="widget-list-text">${this.#escHtml(t.title)}</span>
|
||
<span class="widget-list-meta">${t.status}</span>
|
||
</button>
|
||
`).join("")}</div>`;
|
||
}
|
||
|
||
#renderWidgetCalendar(): string {
|
||
if (this.#summaryLoading) return `<div class="section-empty">Loading...</div>`;
|
||
if (this.#events.length === 0) return `<div class="section-empty">No upcoming events</div>`;
|
||
return `<div class="widget-list">${this.#events.map(e => `
|
||
<button class="widget-list-item" data-navigate="rcal">
|
||
<span class="widget-list-text">${this.#escHtml(e.title)}</span>
|
||
<span class="widget-list-meta">${this.#formatEventTime(e.start, e.allDay)}</span>
|
||
</button>
|
||
`).join("")}</div>`;
|
||
}
|
||
|
||
#renderWidgetActivity(): string {
|
||
const session = getSession();
|
||
if (!session) return `<div class="section-empty">Sign in to see recent activity</div>`;
|
||
if (this.#notifLoading) return `<div class="section-empty">Loading...</div>`;
|
||
if (this.#notifications.length === 0) return `<div class="section-empty">No recent activity</div>`;
|
||
return `<div class="activity-list">${this.#notifications.map(n => `
|
||
<button class="activity-item ${n.read ? "read" : "unread"}" data-action-url="${n.actionUrl || ""}">
|
||
<div class="activity-content">
|
||
<div class="activity-title">${n.title}</div>
|
||
${n.body ? `<div class="activity-body">${n.body}</div>` : ""}
|
||
</div>
|
||
<span class="activity-time">${this.#timeAgo(n.createdAt)}</span>
|
||
</button>
|
||
`).join("")}</div>`;
|
||
}
|
||
|
||
#renderWidgetMembers(): string {
|
||
if (this.#membersLoading) return `<div class="section-empty">Loading members...</div>`;
|
||
if (this.#members.length === 0) return `<div class="section-empty">No members found</div>`;
|
||
return `<div class="members-row">${this.#members.map(m => `
|
||
<button class="member-circle" data-navigate="rnetwork" title="${this.#escHtml(m.displayName || m.username)}">
|
||
${this.#memberInitial(m)}
|
||
</button>
|
||
`).join("")}
|
||
<span class="member-count">${this.#members.length} member${this.#members.length !== 1 ? "s" : ""}</span>
|
||
</div>`;
|
||
}
|
||
|
||
#renderWidgetTools(): string {
|
||
if (this.#openTabs.length === 0) return `<div class="section-empty">No recent tabs</div>`;
|
||
return `<div class="tools-grid">${this.#openTabs.map(t => `
|
||
<button class="tool-chip" data-module="${t.moduleId}">
|
||
<span class="tool-icon">${this.#moduleIcon(t.moduleId)}</span>
|
||
<span>${this.#moduleLabel(t)}</span>
|
||
</button>
|
||
`).join("")}</div>`;
|
||
}
|
||
|
||
#renderWidgetQuickActions(): string {
|
||
return `<div class="actions-row">
|
||
<button class="action-btn" data-action-module="rmeets">
|
||
<span class="action-icon">\u{1F4F9}</span><span>Quick Meet</span>
|
||
</button>
|
||
<button class="action-btn" data-action-module="rnotes">
|
||
<span class="action-icon">\u{1F4DD}</span><span>New Note</span>
|
||
</button>
|
||
<button class="action-btn" data-action-module="rspace">
|
||
<span class="action-icon">\u{1F30C}</span><span>Canvas</span>
|
||
</button>
|
||
</div>`;
|
||
}
|
||
|
||
#renderWidgetWallet(): string {
|
||
const session = getSession();
|
||
if (!session) return `<div class="section-empty">Sign in to see wallet</div>`;
|
||
if (this.#walletLoading) return `<div class="section-empty">Loading...</div>`;
|
||
if (this.#walletBalances.length === 0) return `<div class="section-empty">No token balances</div>`;
|
||
return `<div class="widget-list">${this.#walletBalances.map(b => `
|
||
<button class="widget-list-item" data-navigate="rwallet">
|
||
<span class="widget-list-text">${this.#escHtml(b.symbol)}</span>
|
||
<span class="widget-list-meta">${b.balance.toLocaleString()}</span>
|
||
</button>
|
||
`).join("")}</div>`;
|
||
}
|
||
|
||
#renderWidgetFlows(): string {
|
||
if (this.#summaryLoading) return `<div class="section-empty">Loading...</div>`;
|
||
if (this.#flows.length === 0) return `<div class="section-empty">No active flows</div>`;
|
||
return `<div class="widget-list">${this.#flows.map(f => `
|
||
<button class="widget-list-item" data-navigate="rflows">
|
||
<span class="widget-list-text">${this.#escHtml(f.name)}</span>
|
||
<span class="widget-list-meta">${f.nodeCount} nodes</span>
|
||
</button>
|
||
`).join("")}</div>`;
|
||
}
|
||
|
||
#escHtml(s: string): string {
|
||
return s.replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">").replace(/"/g, """);
|
||
}
|
||
|
||
// ── Widget card wrapper ──
|
||
|
||
#renderWidget(config: WidgetConfig): string {
|
||
const w = WIDGET_REGISTRY[config.id];
|
||
if (!w) return "";
|
||
|
||
const renderers: Record<string, () => string> = {
|
||
tasks: () => this.#renderWidgetTasks(),
|
||
calendar: () => this.#renderWidgetCalendar(),
|
||
activity: () => this.#renderWidgetActivity(),
|
||
members: () => this.#renderWidgetMembers(),
|
||
tools: () => this.#renderWidgetTools(),
|
||
quickactions: () => this.#renderWidgetQuickActions(),
|
||
wallet: () => this.#renderWidgetWallet(),
|
||
flows: () => this.#renderWidgetFlows(),
|
||
};
|
||
|
||
const count = this.#getWidgetCount(config.id);
|
||
const countBadge = count !== null ? `<span class="widget-card__count">${count}</span>` : "";
|
||
const content = renderers[config.id]?.() || "";
|
||
|
||
return `
|
||
<div class="widget-card" data-widget="${config.id}">
|
||
<div class="widget-card__header">
|
||
<span class="widget-card__title">${w.icon} ${w.label}</span>
|
||
${countBadge}
|
||
</div>
|
||
${content}
|
||
</div>
|
||
`;
|
||
}
|
||
|
||
#getWidgetCount(id: string): number | null {
|
||
switch (id) {
|
||
case "tasks": return this.#summaryLoading ? null : this.#tasks.length || null;
|
||
case "calendar": return this.#summaryLoading ? null : this.#events.length || null;
|
||
case "activity": return this.#notifLoading ? null : this.#notifications.filter(n => !n.read).length || null;
|
||
case "members": return this.#membersLoading ? null : this.#members.length || null;
|
||
case "flows": return this.#summaryLoading ? null : this.#flows.length || null;
|
||
default: return null;
|
||
}
|
||
}
|
||
|
||
// ── Customize panel ──
|
||
|
||
#renderCustomizePanel(): string {
|
||
const sorted = [...this.#widgetConfigs].sort((a, b) => a.order - b.order);
|
||
return `
|
||
<div class="customize-panel">
|
||
<div class="customize-header">
|
||
<span>Customize Dashboard</span>
|
||
<button class="customize-done" id="customize-done">Done</button>
|
||
</div>
|
||
${sorted.map((c, i) => {
|
||
const w = WIDGET_REGISTRY[c.id];
|
||
if (!w) return "";
|
||
return `
|
||
<div class="customize-row">
|
||
<label class="customize-toggle">
|
||
<input type="checkbox" ${c.enabled ? "checked" : ""} data-widget-toggle="${c.id}" />
|
||
<span>${w.icon} ${w.label}</span>
|
||
</label>
|
||
<div class="customize-arrows">
|
||
${i > 0 ? `<button class="customize-arrow" data-move-up="${c.id}" title="Move up">\u25B2</button>` : `<span class="customize-arrow-placeholder"></span>`}
|
||
${i < sorted.length - 1 ? `<button class="customize-arrow" data-move-down="${c.id}" title="Move down">\u25BC</button>` : `<span class="customize-arrow-placeholder"></span>`}
|
||
</div>
|
||
</div>
|
||
`;
|
||
}).join("")}
|
||
</div>
|
||
`;
|
||
}
|
||
|
||
// ── Main render ──
|
||
|
||
#render() {
|
||
const space = this.space;
|
||
const spaceName = space.charAt(0).toUpperCase() + space.slice(1);
|
||
|
||
// Stats pills
|
||
const statPills: string[] = [];
|
||
if (!this.#membersLoading) {
|
||
statPills.push(`<span class="stat-pill">${this.#members.length} member${this.#members.length !== 1 ? "s" : ""}</span>`);
|
||
}
|
||
if (this.#openTabs.length > 0) {
|
||
statPills.push(`<span class="stat-pill">${this.#openTabs.length} tab${this.#openTabs.length !== 1 ? "s" : ""} open</span>`);
|
||
}
|
||
|
||
// Enabled widgets sorted by order
|
||
const enabled = this.#widgetConfigs
|
||
.filter(c => c.enabled)
|
||
.sort((a, b) => a.order - b.order);
|
||
|
||
this.#shadow.innerHTML = `
|
||
<style>${STYLES}</style>
|
||
<div class="dashboard">
|
||
<div class="dashboard-inner">
|
||
<div class="space-header">
|
||
<div class="space-icon">${spaceName.charAt(0)}</div>
|
||
<div class="space-header__info">
|
||
<h1 class="space-title">${spaceName}</h1>
|
||
${statPills.length > 0 ? `<div class="stat-row">${statPills.join("")}</div>` : ""}
|
||
</div>
|
||
<button class="customize-btn" id="customize-btn" title="Customize dashboard">
|
||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>
|
||
</button>
|
||
</div>
|
||
|
||
${this.#isCustomizing ? this.#renderCustomizePanel() : ""}
|
||
|
||
${enabled.map(c => this.#renderWidget(c)).join("")}
|
||
</div>
|
||
</div>
|
||
`;
|
||
|
||
this.#attachEvents();
|
||
}
|
||
|
||
#attachEvents() {
|
||
// Customize button
|
||
this.#shadow.getElementById("customize-btn")?.addEventListener("click", () => {
|
||
this.#isCustomizing = !this.#isCustomizing;
|
||
this.#render();
|
||
});
|
||
|
||
// Customize done button
|
||
this.#shadow.getElementById("customize-done")?.addEventListener("click", () => {
|
||
this.#isCustomizing = false;
|
||
this.#render();
|
||
// Reload data for newly enabled widgets
|
||
this.#lastFetch = 0;
|
||
this.#loadData();
|
||
});
|
||
|
||
// Widget toggles
|
||
this.#shadow.querySelectorAll<HTMLInputElement>("[data-widget-toggle]").forEach(input => {
|
||
input.addEventListener("change", () => {
|
||
const id = input.dataset.widgetToggle!;
|
||
const config = this.#widgetConfigs.find(c => c.id === id);
|
||
if (config) {
|
||
config.enabled = input.checked;
|
||
this.#saveWidgetConfigs();
|
||
this.#render();
|
||
}
|
||
});
|
||
});
|
||
|
||
// Move up/down arrows
|
||
this.#shadow.querySelectorAll<HTMLElement>("[data-move-up]").forEach(btn => {
|
||
btn.addEventListener("click", () => this.#moveWidget(btn.dataset.moveUp!, -1));
|
||
});
|
||
this.#shadow.querySelectorAll<HTMLElement>("[data-move-down]").forEach(btn => {
|
||
btn.addEventListener("click", () => this.#moveWidget(btn.dataset.moveDown!, 1));
|
||
});
|
||
|
||
// Navigation from widget items
|
||
this.#shadow.querySelectorAll<HTMLElement>("[data-navigate]").forEach(el => {
|
||
el.addEventListener("click", () => {
|
||
this.#dispatch(el.dataset.navigate!);
|
||
});
|
||
});
|
||
|
||
// Tool chips
|
||
this.#shadow.querySelectorAll(".tool-chip").forEach(el => {
|
||
el.addEventListener("click", () => {
|
||
this.#dispatch((el as HTMLElement).dataset.module!);
|
||
});
|
||
});
|
||
|
||
// Activity items
|
||
this.#shadow.querySelectorAll(".activity-item").forEach(el => {
|
||
el.addEventListener("click", () => {
|
||
const url = (el as HTMLElement).dataset.actionUrl;
|
||
const parsed = this.#parseActionUrl(url || null);
|
||
this.#dispatch(parsed?.moduleId || "rspace");
|
||
});
|
||
});
|
||
|
||
// Quick action buttons
|
||
this.#shadow.querySelectorAll(".action-btn").forEach(el => {
|
||
el.addEventListener("click", () => {
|
||
this.#dispatch((el as HTMLElement).dataset.actionModule!);
|
||
});
|
||
});
|
||
}
|
||
|
||
#moveWidget(id: string, direction: number) {
|
||
const sorted = [...this.#widgetConfigs].sort((a, b) => a.order - b.order);
|
||
const idx = sorted.findIndex(c => c.id === id);
|
||
if (idx < 0) return;
|
||
const targetIdx = idx + direction;
|
||
if (targetIdx < 0 || targetIdx >= sorted.length) return;
|
||
|
||
// Swap order values
|
||
const tmp = sorted[idx].order;
|
||
sorted[idx].order = sorted[targetIdx].order;
|
||
sorted[targetIdx].order = tmp;
|
||
|
||
this.#saveWidgetConfigs();
|
||
this.#render();
|
||
}
|
||
|
||
static define(tag = "rstack-user-dashboard") {
|
||
if (!customElements.get(tag)) customElements.define(tag, RStackUserDashboard);
|
||
}
|
||
}
|
||
|
||
// ============================================================================
|
||
// STYLES
|
||
// ============================================================================
|
||
|
||
const STYLES = `
|
||
:host {
|
||
display: block;
|
||
position: fixed;
|
||
top: 92px;
|
||
left: 0; right: 0; bottom: 0;
|
||
overflow-y: auto;
|
||
background: var(--rs-bg, var(--rs-bg-page, #0f172a));
|
||
z-index: 1;
|
||
}
|
||
|
||
.dashboard {
|
||
padding: 32px 24px;
|
||
}
|
||
|
||
.dashboard-inner {
|
||
max-width: 800px;
|
||
margin: 0 auto;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 16px;
|
||
}
|
||
|
||
/* ── Space header ── */
|
||
|
||
.space-header {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 16px;
|
||
}
|
||
|
||
.space-header__info { flex: 1; min-width: 0; }
|
||
|
||
.space-icon {
|
||
width: 48px;
|
||
height: 48px;
|
||
border-radius: 12px;
|
||
background: linear-gradient(135deg, rgba(6,182,212,0.2), rgba(94,234,212,0.12));
|
||
color: var(--rs-accent, #06b6d4);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 1.3rem;
|
||
font-weight: 700;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.space-title {
|
||
margin: 0;
|
||
font-size: 1.25rem;
|
||
font-weight: 700;
|
||
color: var(--rs-text-primary, #e2e8f0);
|
||
}
|
||
|
||
.stat-row {
|
||
display: flex;
|
||
gap: 8px;
|
||
margin-top: 4px;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.stat-pill {
|
||
font-size: 0.7rem;
|
||
padding: 2px 8px;
|
||
border-radius: 10px;
|
||
background: var(--rs-bg-surface, rgba(255,255,255,0.06));
|
||
color: var(--rs-text-muted, #94a3b8);
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.customize-btn {
|
||
flex-shrink: 0;
|
||
background: none;
|
||
border: 1px solid var(--rs-border, rgba(255,255,255,0.08));
|
||
color: var(--rs-text-muted, #94a3b8);
|
||
border-radius: 8px;
|
||
padding: 8px;
|
||
cursor: pointer;
|
||
transition: color 0.15s, border-color 0.15s;
|
||
}
|
||
.customize-btn:hover {
|
||
color: var(--rs-text-primary, #e2e8f0);
|
||
border-color: var(--rs-accent, #06b6d4);
|
||
}
|
||
|
||
/* ── Widget cards <20><><EFBFBD>─ */
|
||
|
||
.widget-card {
|
||
background: var(--rs-bg-surface, #1e293b);
|
||
border: 1px solid var(--rs-border, rgba(255,255,255,0.08));
|
||
border-radius: 10px;
|
||
padding: 16px;
|
||
}
|
||
|
||
.widget-card__header {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.widget-card__title {
|
||
font-size: 0.85rem;
|
||
font-weight: 600;
|
||
color: var(--rs-text-secondary, #cbd5e1);
|
||
}
|
||
|
||
.widget-card__count {
|
||
font-size: 0.7rem;
|
||
padding: 2px 8px;
|
||
border-radius: 10px;
|
||
background: rgba(20,184,166,0.15);
|
||
color: #14b8a6;
|
||
font-weight: 600;
|
||
}
|
||
|
||
/* ── Widget list (tasks, calendar, flows, wallet) ── */
|
||
|
||
.widget-list {
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.widget-list-item {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
padding: 8px 4px;
|
||
cursor: pointer;
|
||
transition: background 0.15s;
|
||
border: none;
|
||
border-bottom: 1px solid var(--rs-border, rgba(255,255,255,0.04));
|
||
background: none;
|
||
text-align: left;
|
||
color: inherit;
|
||
font: inherit;
|
||
width: 100%;
|
||
}
|
||
.widget-list-item:last-child { border-bottom: none; }
|
||
.widget-list-item:hover {
|
||
background: var(--rs-bg-hover, rgba(255,255,255,0.04));
|
||
}
|
||
|
||
.widget-list-text {
|
||
flex: 1;
|
||
font-size: 0.8rem;
|
||
color: var(--rs-text-primary, #e2e8f0);
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.widget-list-meta {
|
||
font-size: 0.7rem;
|
||
color: var(--rs-text-muted, #64748b);
|
||
flex-shrink: 0;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.priority-dot {
|
||
width: 6px;
|
||
height: 6px;
|
||
border-radius: 50%;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
/* ── Members (compact row) ── */
|
||
|
||
.members-row {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.member-circle {
|
||
width: 32px;
|
||
height: 32px;
|
||
border-radius: 50%;
|
||
background: linear-gradient(135deg, rgba(6,182,212,0.2), rgba(94,234,212,0.12));
|
||
color: var(--rs-accent, #06b6d4);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 0.75rem;
|
||
font-weight: 700;
|
||
flex-shrink: 0;
|
||
border: none;
|
||
cursor: pointer;
|
||
transition: transform 0.15s;
|
||
}
|
||
.member-circle:hover { transform: scale(1.1); }
|
||
|
||
.member-count {
|
||
font-size: 0.7rem;
|
||
color: var(--rs-text-muted, #94a3b8);
|
||
margin-left: 4px;
|
||
}
|
||
|
||
/* ── Tools grid ── */
|
||
|
||
.tools-grid {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 8px;
|
||
}
|
||
|
||
.tool-chip {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
padding: 8px 14px;
|
||
border-radius: 8px;
|
||
background: rgba(255,255,255,0.04);
|
||
border: 1px solid var(--rs-border, rgba(255,255,255,0.08));
|
||
color: var(--rs-text-primary, #e2e8f0);
|
||
font-size: 0.78rem;
|
||
font-weight: 500;
|
||
cursor: pointer;
|
||
transition: background 0.15s, border-color 0.15s;
|
||
font: inherit;
|
||
}
|
||
.tool-chip:hover {
|
||
background: var(--rs-bg-hover, rgba(255,255,255,0.06));
|
||
border-color: var(--rs-accent, #06b6d4);
|
||
}
|
||
|
||
.tool-icon { font-size: 0.95rem; }
|
||
|
||
/* ── Activity list ── */
|
||
|
||
.activity-list {
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.activity-item {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
justify-content: space-between;
|
||
gap: 10px;
|
||
padding: 8px 4px;
|
||
cursor: pointer;
|
||
transition: background 0.15s;
|
||
border: none;
|
||
border-bottom: 1px solid var(--rs-border, rgba(255,255,255,0.04));
|
||
background: none;
|
||
text-align: left;
|
||
color: inherit;
|
||
font: inherit;
|
||
width: 100%;
|
||
}
|
||
.activity-item:last-child { border-bottom: none; }
|
||
.activity-item:hover {
|
||
background: var(--rs-bg-hover, rgba(255,255,255,0.04));
|
||
}
|
||
.activity-item.unread {
|
||
background: rgba(6,182,212,0.04);
|
||
}
|
||
.activity-item.unread .activity-title {
|
||
font-weight: 600;
|
||
}
|
||
|
||
.activity-content { flex: 1; min-width: 0; }
|
||
|
||
.activity-title {
|
||
font-size: 0.8rem;
|
||
color: var(--rs-text-primary, #e2e8f0);
|
||
line-height: 1.3;
|
||
}
|
||
|
||
.activity-body {
|
||
font-size: 0.73rem;
|
||
color: var(--rs-text-muted, #94a3b8);
|
||
margin-top: 2px;
|
||
line-height: 1.3;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.activity-time {
|
||
font-size: 0.7rem;
|
||
color: var(--rs-text-muted, #64748b);
|
||
flex-shrink: 0;
|
||
white-space: nowrap;
|
||
margin-top: 2px;
|
||
}
|
||
|
||
/* ── Quick Actions ── */
|
||
|
||
.actions-row {
|
||
display: flex;
|
||
gap: 10px;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.action-btn {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
padding: 10px 18px;
|
||
border-radius: 8px;
|
||
background: rgba(255,255,255,0.04);
|
||
border: 1px solid var(--rs-border, rgba(255,255,255,0.08));
|
||
color: var(--rs-text-primary, #e2e8f0);
|
||
font-size: 0.8rem;
|
||
font-weight: 500;
|
||
cursor: pointer;
|
||
transition: background 0.15s, border-color 0.15s;
|
||
font: inherit;
|
||
}
|
||
.action-btn:hover {
|
||
background: var(--rs-bg-hover, rgba(255,255,255,0.06));
|
||
border-color: var(--rs-accent, #06b6d4);
|
||
}
|
||
|
||
.action-icon { font-size: 1rem; }
|
||
|
||
.section-empty {
|
||
padding: 16px 8px;
|
||
text-align: center;
|
||
color: var(--rs-text-muted, #94a3b8);
|
||
font-size: 0.78rem;
|
||
}
|
||
|
||
/* ─<><E29480><EFBFBD> Customize panel ── */
|
||
|
||
.customize-panel {
|
||
background: var(--rs-bg-surface, #1e293b);
|
||
border: 1px solid var(--rs-border, rgba(255,255,255,0.08));
|
||
border-radius: 10px;
|
||
padding: 16px;
|
||
}
|
||
|
||
.customize-header {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin-bottom: 12px;
|
||
font-size: 0.85rem;
|
||
font-weight: 600;
|
||
color: var(--rs-text-primary, #e2e8f0);
|
||
}
|
||
|
||
.customize-done {
|
||
padding: 4px 12px;
|
||
border-radius: 6px;
|
||
background: rgba(20,184,166,0.15);
|
||
color: #14b8a6;
|
||
border: none;
|
||
font-size: 0.78rem;
|
||
font-weight: 600;
|
||
cursor: pointer;
|
||
}
|
||
.customize-done:hover { background: rgba(20,184,166,0.25); }
|
||
|
||
.customize-row {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 6px 0;
|
||
border-bottom: 1px solid var(--rs-border, rgba(255,255,255,0.04));
|
||
}
|
||
.customize-row:last-child { border-bottom: none; }
|
||
|
||
.customize-toggle {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
font-size: 0.8rem;
|
||
color: var(--rs-text-primary, #e2e8f0);
|
||
cursor: pointer;
|
||
}
|
||
|
||
.customize-toggle input[type="checkbox"] {
|
||
accent-color: #14b8a6;
|
||
width: 16px;
|
||
height: 16px;
|
||
}
|
||
|
||
.customize-arrows {
|
||
display: flex;
|
||
gap: 4px;
|
||
}
|
||
|
||
.customize-arrow {
|
||
background: none;
|
||
border: 1px solid var(--rs-border, rgba(255,255,255,0.08));
|
||
color: var(--rs-text-muted, #94a3b8);
|
||
border-radius: 4px;
|
||
width: 24px;
|
||
height: 24px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
cursor: pointer;
|
||
font-size: 0.6rem;
|
||
transition: color 0.15s, border-color 0.15s;
|
||
}
|
||
.customize-arrow:hover {
|
||
color: var(--rs-text-primary, #e2e8f0);
|
||
border-color: var(--rs-accent, #06b6d4);
|
||
}
|
||
|
||
.customize-arrow-placeholder {
|
||
width: 24px;
|
||
height: 24px;
|
||
}
|
||
|
||
/* ── Responsive ── */
|
||
|
||
@media (max-width: 640px) {
|
||
:host {
|
||
position: static;
|
||
overflow-y: visible;
|
||
}
|
||
.dashboard { padding: 20px 12px; }
|
||
}
|
||
|
||
@media (max-width: 480px) {
|
||
.dashboard { padding: 16px 8px; }
|
||
.actions-row { flex-direction: column; }
|
||
.action-btn { justify-content: center; }
|
||
}
|
||
`;
|