add bot command catalog view

This commit is contained in:
2026-10-25 05:09:25 +01:00
parent 85cd8aee00
commit 450503afc3
2 changed files with 51 additions and 0 deletions
+16
View File
@@ -61,6 +61,8 @@
let oauthIdentity: 'streamer' | 'bot' = 'streamer';
let oauthBusy = false;
let oauthError = '';
let botCommands: Array<{ id: string; name: string; description: string; permission_level: string; aliases: string[]; tags: string[]; cooldown_seconds: number; cooldown_scope: string; response_template: string; error_template: string | null; enabled: boolean }> = [];
let botCommandError = '';
let oauthScopes: Record<'streamer' | 'bot', { connected: boolean; missing_scopes: string[]; reauthorization_required: boolean }> = {
streamer: { connected: false, missing_scopes: [], reauthorization_required: false },
bot: { connected: false, missing_scopes: [], reauthorization_required: false },
@@ -113,6 +115,7 @@
await loadDiagnostics();
await loadOAuthStatus();
await loadCollaboration();
await loadBotCommands();
await loadStreamInfo();
connectRealtime();
if (!mustReplaceCredentials) password = '';
@@ -515,6 +518,17 @@
}
}
async function loadBotCommands() {
try {
const response = await fetch(`${serverAddress}/api/v1/bot/commands`);
if (!response.ok) throw new Error('Commands could not be loaded.');
botCommands = await response.json();
botCommandError = '';
} catch (error) {
botCommandError = error instanceof Error ? error.message : 'Commands could not be loaded.';
}
}
async function revokeOAuth(identity: 'streamer' | 'bot') {
oauthBusy = true;
oauthError = '';
@@ -627,6 +641,8 @@
{#if authError}<div class="auth-error">{authError}</div>{/if}
</div>
</section>
{:else if activeView === 'Bot'}
<section class="bot-page panel"><div class="panel-header"><span>BOT COMMANDS</span><button class="secondary" onclick={loadBotCommands}>REFRESH</button></div><div class="bot-page-body"><div class="micro">PUBLIC COMMAND CATALOG</div>{#if botCommandError}<div class="auth-error">{botCommandError}</div>{:else if botCommands.length}<div class="bot-command-list">{#each botCommands as command}<article class="bot-command-row"><div><strong>!{command.name}</strong><span class="bot-command-description">{command.description}</span>{#if command.tags.length}<div class="micro">{command.tags.join(' · ')}</div>{/if}</div><div class="bot-command-meta"><span>{command.permission_level.toUpperCase()}</span>{#if command.cooldown_seconds}<span>{command.cooldown_seconds}s / {command.cooldown_scope}</span>{/if}</div></article>{/each}</div>{:else}<div class="empty-state"><strong>No enabled commands</strong><span>Create commands on the server to make them available here.</span></div>{/if}</div></section>
{:else}
<div class="dashboard-grid">
<section class="panel preview-panel"><div class="panel-header"><span>STREAM PREVIEW</span><span class="panel-menu">⋮</span></div>{#if playerSrc}<iframe class="twitch-player" title={`Twitch player for ${streamerName}`} src={playerSrc} allowfullscreen></iframe>{:else}<div class="preview-stage"><div class="offline-mark">STREAM OFFLINE</div><div class="offline-subtitle">CONNECT TWITCH TO BEGIN</div></div>{/if}<div class="panel-footer"><span class="micro">VIDEO PLAYER</span><span class="badge">{playerSrc ? streamerName : 'OFFLINE'}</span></div></section>
+35
View File
@@ -510,6 +510,41 @@ label {
margin-top: auto;
border-bottom: 0;
}
.bot-page {
min-height: 100%;
}
.bot-page-body {
padding: 18px;
}
.bot-command-list {
margin-top: 12px;
border-top: 1px solid var(--ui-divider);
}
.bot-command-row {
display: flex;
justify-content: space-between;
gap: 20px;
padding: 13px 4px;
border-bottom: 1px solid var(--ui-divider);
}
.bot-command-row strong {
display: block;
color: var(--ed-cyan);
font-family: var(--font-data);
}
.bot-command-description {
display: block;
margin-top: 4px;
color: var(--ed-dim);
}
.bot-command-meta {
display: flex;
gap: 10px;
align-items: flex-start;
color: var(--ed-dim);
font: 10px var(--font-data);
white-space: nowrap;
}
.version-label {
display: block;
margin-top: 13px;