diff --git a/src/App.svelte b/src/App.svelte index 8ea5630..7bceed7 100644 --- a/src/App.svelte +++ b/src/App.svelte @@ -148,6 +148,7 @@ let collaboratorSearchError = ''; let collaboratorSearchTimer: number | undefined; let sharedChatSession: { session_id: string; host_broadcaster_id: string; participants: Array<{ broadcaster_id: string }> } | null = null; + let showSharedChatDetails = false; let collaborationSettings: { is_moderator_send_live_enabled: boolean; slot_count: number; is_browser_source_audio_enabled: boolean; group_layout: string; browser_source_token: string } | null = null; let collaborationCapabilities: { guest_star_available: boolean; guest_star_reason?: string | null; shared_chat_available: boolean; shared_chat_reason?: string | null } | null = null; let oauthLink = ''; @@ -509,6 +510,7 @@ } catch { collaborationSession = null; sharedChatSession = null; + showSharedChatDetails = false; collaborationSettings = null; collaborationCapabilities = null; } @@ -1652,4 +1654,12 @@ {/if} + {#if authenticated && sharedChatSession} +
+ + {#if showSharedChatDetails} +
SHARED CHAT
HOST
{sharedChatSession.host_broadcaster_id}
PARTICIPATING CHANNELS
{#each sharedChatSession.participants as participant}
{participant.broadcaster_id}
{/each}

Chat remains in the main chat panel. This popover only shows Twitch-authoritative collaboration details.

+ {/if} +
+ {/if} diff --git a/src/styles.css b/src/styles.css index cf66462..ec22117 100644 --- a/src/styles.css +++ b/src/styles.css @@ -421,6 +421,21 @@ label { color: var(--ed-good); font: 10px/1.4 var(--font-data); } +.shared-chat-status-control { + position: fixed; + right: 16px; + bottom: 16px; + z-index: 20; +} +.shared-chat-status-button { + border-color: var(--ed-cyan); +} +.shared-chat-popover { + position: absolute; + right: 0; + bottom: 42px; + width: min(340px, calc(100vw - 32px)); +} .auth-gate { min-height: 300px; }