diff --git a/src/renderer-locale-de.ts b/src/renderer-locale-de.ts index 833a519..856c78b 100644 --- a/src/renderer-locale-de.ts +++ b/src/renderer-locale-de.ts @@ -352,7 +352,8 @@ const UI_TEXT_DE = { autoRecordScanTriggered: 'Manueller Scan: {count} Live-Aufnahme(n) gestartet.', autoRecordScanEmpty: 'Manueller Scan: kein Streamer ist gerade live.', liveNowTooltip: 'Aktuell live auf Twitch', - modalCloseAria: 'Dialog schliessen' + modalCloseAria: 'Dialog schliessen', + sidebarEmpty: 'Noch keine Streamer. Fuege oben rechts einen hinzu.' }, vods: { noneTitle: 'Keine VODs', diff --git a/src/renderer-locale-en.ts b/src/renderer-locale-en.ts index 8824b08..7e8fd68 100644 --- a/src/renderer-locale-en.ts +++ b/src/renderer-locale-en.ts @@ -352,7 +352,8 @@ const UI_TEXT_EN = { autoRecordScanTriggered: 'Manual scan: {count} live recording(s) started.', autoRecordScanEmpty: 'Manual scan: no streamers currently live.', liveNowTooltip: 'Currently live on Twitch', - modalCloseAria: 'Close dialog' + modalCloseAria: 'Close dialog', + sidebarEmpty: 'No streamers yet. Add one via the input at the top right.' }, vods: { noneTitle: 'No VODs', diff --git a/src/renderer-streamers.ts b/src/renderer-streamers.ts index f61d491..7c9a22d 100644 --- a/src/renderer-streamers.ts +++ b/src/renderer-streamers.ts @@ -426,6 +426,21 @@ function renderStreamers(): void { // Compact title margin when filter is shown — avoids double gap. if (sectionTitle) sectionTitle.style.marginBottom = showFilter ? '4px' : ''; + // Empty state — small hint inside the sidebar when no streamers have + // been added yet. Without this the user sees a heading + blank space + // and has to guess where to add the first streamer. + if (all.length === 0) { + const empty = document.createElement('div'); + empty.className = 'streamer-list-empty'; + empty.textContent = UI_TEXT.streamers.sidebarEmpty || 'No streamers yet. Add one via the top bar.'; + list.appendChild(empty); + const counter = document.getElementById('streamerSectionCounter'); + if (counter) counter.textContent = ''; + const bulkBtn = document.getElementById('btnStreamerBulkRemove') as HTMLButtonElement | null; + if (bulkBtn) bulkBtn.style.display = 'none'; + return; + } + // Section counter — "X · Y live". Updates on every re-render, so it // stays accurate after add/remove/live-status changes. const counter = document.getElementById('streamerSectionCounter'); diff --git a/src/styles.css b/src/styles.css index f709d25..b13886e 100644 --- a/src/styles.css +++ b/src/styles.css @@ -2826,6 +2826,21 @@ input[type="number"]::-webkit-outer-spin-button { font-weight: 600; } +/* Empty-state hint inside the sidebar streamer list (no streamers + added yet). Subtler than the full-page .empty-state — fits the + narrow sidebar context. */ +.streamer-list-empty { + padding: 12px 14px; + margin: 4px 8px; + color: var(--text-secondary); + font-size: 12px; + line-height: 1.45; + border: 1px dashed var(--border-soft); + border-radius: 6px; + text-align: center; + background: rgba(255, 255, 255, 0.02); +} + /* ============================================ VOD DURATION BADGE — Twitch-style pill on the thumbnail ============================================ */