From 3788561bb7e52caf4541b1eefbc54046b2cb3298 Mon Sep 17 00:00:00 2001
From: xRangerDE <xRangerDE@24-music.de>
Date: Mon, 11 May 2026 10:26:00 +0200
Subject: [PATCH] cleanup: streamerProfileHeader uses .is-hidden +
 .streamer-profile-skeleton owns display:flex
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The profile header on the VOD tab cycled between three display states via inline .style.display assignments — 'none' when no streamer is selected, 'flex' while loading (skeleton), 'block' once profile data is back. Three separate inline writes plus a starting style="display:none" in HTML.

Two changes:

1. Baked display:flex into the .streamer-profile-skeleton CSS rule itself (was previously implicit via the JS flip). Now the skeleton class fully owns its layout — adding it switches the element to flex, removing it falls back to .streamer-profile-header's base display:block.

2. Replaced the inline 'none' assignment with the shared .is-hidden class (from 4.6.134). hideStreamerProfileHeader adds it; renderStreamerProfileSkeleton + renderStreamerProfileCard both remove it as part of their existing classList work. HTML drops the inline display:none too.

Three .style.display assignments + one inline display:none gone, profile header's visual state is now entirely class-driven.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/index.html          | 2 +-
 src/renderer-profile.ts | 8 +++-----
 src/styles.css          | 9 ++++++++-
 3 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/src/index.html b/src/index.html
index 32edc7f..eb8751c 100644
--- a/src/index.html
+++ b/src/index.html
@@ -260,7 +260,7 @@
             <div class="content">
                 <!-- VODs Tab -->
                 <div class="tab-content active" id="vodsTab">
-                    <div id="streamerProfileHeader" class="streamer-profile-header" style="display:none;"></div>
+                    <div id="streamerProfileHeader" class="streamer-profile-header is-hidden"></div>
                     <div class="vod-filter-row">
                         <input type="text" id="vodFilterInput" class="filter-input" placeholder="Filter VODs..." oninput="onVodFilterInput()">
                         <button type="button" id="vodFilterClearBtn" class="btn-close is-hidden" onclick="clearVodFilter()" title="Clear filter">x</button>
diff --git a/src/renderer-profile.ts b/src/renderer-profile.ts
index a019c26..572b0e0 100644
--- a/src/renderer-profile.ts
+++ b/src/renderer-profile.ts
@@ -30,16 +30,15 @@ function formatLastStreamAgo(iso: string | null): string {
 function hideStreamerProfileHeader(): void {
     const el = document.getElementById('streamerProfileHeader');
     if (!el) return;
-    el.style.display = 'none';
+    el.classList.add('is-hidden');
     applyHtml(el, '');
 }
 
 function renderStreamerProfileSkeleton(login: string): void {
     const el = document.getElementById('streamerProfileHeader');
     if (!el) return;
-    el.classList.remove('is-live');
+    el.classList.remove('is-live', 'is-hidden');
     el.classList.add('streamer-profile-skeleton');
-    el.style.display = 'flex';
     applyHtml(el, `
         <div class="streamer-profile-skel-block avatar"></div>
         <div class="streamer-profile-body">
@@ -60,9 +59,8 @@ function renderStreamerProfileSkeleton(login: string): void {
 function renderStreamerProfileCard(p: StreamerProfile): void {
     const el = document.getElementById('streamerProfileHeader');
     if (!el) return;
-    el.classList.remove('streamer-profile-skeleton');
+    el.classList.remove('streamer-profile-skeleton', 'is-hidden');
     if (p.isLive) el.classList.add('is-live'); else el.classList.remove('is-live');
-    el.style.display = 'block';
 
     const safeLogin = p.login.replace(/'/g, "\\'");
     const safeUrl = p.twitchUrl.replace(/'/g, "\\'");
diff --git a/src/styles.css b/src/styles.css
index 253ea91..95655e6 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -4257,7 +4257,14 @@ input[type="number"]::-webkit-outer-spin-button {
     box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85), 0 0 0 4px rgba(145, 70, 255, 0.55);
 }
 
-/* Skeleton loading state */
+/* Skeleton loading state — switches the profile-header from its
+   regular block layout to a flex row so the avatar + body sit
+   side-by-side. The element itself was previously flipped via inline
+   .style.display='flex' in renderStreamerProfileSkeleton(). */
+.streamer-profile-skeleton {
+    display: flex;
+}
+
 .streamer-profile-skeleton .streamer-profile-skel-block {
     background: linear-gradient(90deg, var(--bg-elevated) 0%, rgba(255,255,255,0.06) 50%, var(--bg-elevated) 100%);
     background-size: 200% 100%;