From 6fdfa08ecbb1fab29926c6df94282517ce245eaa Mon Sep 17 00:00:00 2001
From: xRangerDE <xRangerDE@24-music.de>
Date: Mon, 11 May 2026 02:24:50 +0200
Subject: [PATCH] feat: sidebar empty-state when no streamers added yet
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

First-launch (or after-clearing-everything) opens the app with an
empty sidebar streamer list — just the "Streamer" section heading
and a blank area below. New users had no in-app indication of where
to add their first streamer. The "Add streamer..." input lives in
the TOP bar, which is non-obvious from the sidebar context.

renderStreamers now short-circuits on empty streamers[] and stamps
a small dashed-border hint card into the list with locale-driven
copy pointing the user at the top-right input ("No streamers yet.
Add one via the input at the top right." / "Noch keine Streamer.
Fuege oben rechts einen hinzu.").

The empty state styling (.streamer-list-empty) is intentionally
subtler than the full-page .empty-state used for the VOD grid —
dashed border + tinted background + small padding so it fits the
narrow sidebar rail without dominating it.

Also clears the streamer-section-counter on this branch and hides
the bulk-remove X button, since both would otherwise have stale
state from a previous non-empty render.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/renderer-locale-de.ts |  3 ++-
 src/renderer-locale-en.ts |  3 ++-
 src/renderer-streamers.ts | 15 +++++++++++++++
 src/styles.css            | 15 +++++++++++++++
 4 files changed, 34 insertions(+), 2 deletions(-)

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
    ============================================ */