From c9c15279d5fadc11cde60a598e114602a2b4dfd4 Mon Sep 17 00:00:00 2001
From: Meleki <meleki@gott.local>
Date: Tue, 3 Mar 2026 16:25:23 +0100
Subject: [PATCH] =?UTF-8?q?Claude-Statusbar=20global=20auf=20allen=20Seite?=
 =?UTF-8?q?n=20anzeigen=20+=20Schlie=C3=9Fen-Button?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- #claudeStatusBar aus Dashboard-Template nach body verschoben (vor #app)
- loadClaudeStatus() von dashboard.js nach app.js (einmalig beim Start)
- Schließen-Button (×) zum Ausblenden der Statusbar
- Status-Bar CSS von dashboard.css nach main.css verschoben
---
 wwwroot/css/dashboard.css     | 45 --------------------------
 wwwroot/css/main.css          | 60 +++++++++++++++++++++++++++++++++++
 wwwroot/index.html            |  9 +++---
 wwwroot/js/app.js             | 29 +++++++++++++++++
 wwwroot/js/pages/dashboard.js | 26 ---------------
 5 files changed, 94 insertions(+), 75 deletions(-)

diff --git a/wwwroot/css/dashboard.css b/wwwroot/css/dashboard.css
index 2041d58..ff3648f 100644
--- a/wwwroot/css/dashboard.css
+++ b/wwwroot/css/dashboard.css
@@ -1,48 +1,3 @@
-/* Status Bar */
-
-.status-bar {
-  display: flex;
-  align-items: center;
-  gap: var(--badge-spacing);
-  padding: var(--box-padding);
-  border-radius: var(--border-radius);
-}
-
-.status-bar[hidden] {
-  display: none;
-}
-
-.status-indicator {
-  width: 0.5em;
-  height: 0.5em;
-  border-radius: 50%;
-  flex-shrink: 0;
-}
-
-.status-bar.status-none .status-indicator {
-  background: var(--secondary);
-}
-
-.status-bar.status-minor .status-indicator {
-  background: var(--warning);
-}
-
-.status-bar.status-major .status-indicator,
-.status-bar.status-critical .status-indicator {
-  background: var(--dangerous);
-}
-
-.status-bar.status-minor,
-.status-bar.status-major,
-.status-bar.status-critical {
-  background: rgb(from var(--warning) r g b / .1);
-}
-
-.status-bar.status-major,
-.status-bar.status-critical {
-  background: rgb(from var(--dangerous) r g b / .1);
-}
-
 .dashboard .page-content {
   padding: var(--page-padding);
 }
diff --git a/wwwroot/css/main.css b/wwwroot/css/main.css
index ba0e3f2..c7dada8 100644
--- a/wwwroot/css/main.css
+++ b/wwwroot/css/main.css
@@ -1,3 +1,63 @@
+/* Status Bar */
+
+.status-bar {
+  display: flex;
+  align-items: center;
+  gap: var(--badge-spacing);
+  padding: var(--box-padding);
+}
+
+.status-bar[hidden] {
+  display: none;
+}
+
+.status-indicator {
+  width: 0.5em;
+  height: 0.5em;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+
+.status-text {
+  flex: 1;
+}
+
+.status-close {
+  margin-left: auto;
+  opacity: var(--semi-transparent);
+  font-size: var(--font-size);
+}
+
+.status-close:hover {
+  opacity: 1;
+}
+
+.status-bar.status-none .status-indicator {
+  background: var(--secondary);
+}
+
+.status-bar.status-minor .status-indicator {
+  background: var(--warning);
+}
+
+.status-bar.status-major .status-indicator,
+.status-bar.status-critical .status-indicator {
+  background: var(--dangerous);
+}
+
+.status-bar.status-minor,
+.status-bar.status-major,
+.status-bar.status-critical {
+  background: rgb(from var(--warning) r g b / .1);
+}
+
+.status-bar.status-major,
+.status-bar.status-critical {
+  background: rgb(from var(--dangerous) r g b / .1);
+}
+
+/* Layout */
+
 header {
   padding: var(--box-padding);
   display: flex;
diff --git a/wwwroot/index.html b/wwwroot/index.html
index e18ff64..21c50f9 100644
--- a/wwwroot/index.html
+++ b/wwwroot/index.html
@@ -25,6 +25,11 @@
 </head>
 <body>
 
+<div id="claudeStatusBar" class="status-bar" hidden>
+  <span class="status-indicator"></span>
+  <span class="status-text"></span>
+  <button class="status-close icon-btn"><i class="fa fa-times"></i></button>
+</div>
 <div id="app"></div>
 
 <!-- Templates -->
@@ -45,10 +50,6 @@
 
 <template id="tpl-dashboard">
   <div class="page dashboard">
-    <div id="claudeStatusBar" class="status-bar" hidden>
-      <span class="status-indicator"></span>
-      <span class="status-text"></span>
-    </div>
     <header>
       <button class="back-btn icon-btn" disabled></button>
       <h1 class="dashboard-title">// gott</h1>
diff --git a/wwwroot/js/app.js b/wwwroot/js/app.js
index 8f12da4..b801c31 100644
--- a/wwwroot/js/app.js
+++ b/wwwroot/js/app.js
@@ -12,12 +12,41 @@ document.addEventListener('DOMContentLoaded', async () => {
   }
 
   currentUser = user;
+  loadClaudeStatus();
 
   const { page, id } = parseHash();
   var target = page === 'login' ? 'dashboard' : page;
   await navigateTo(target, { id }, { replace: true });
 });
 
+async function loadClaudeStatus() {
+  const statusBar = document.getElementById('claudeStatusBar');
+  if (!statusBar) return;
+
+  // Schließen-Button
+  const closeBtn = statusBar.querySelector('.status-close');
+  if (closeBtn) {
+    closeBtn.addEventListener('click', () => { statusBar.hidden = true; });
+  }
+
+  try {
+    const res = await fetch('https://status.claude.com/api/v2/status.json');
+    if (!res.ok) return;
+    const data = await res.json();
+
+    const indicator = data.status?.indicator || 'none';
+    const description = data.status?.description || '';
+
+    if (indicator === 'none') return;
+
+    statusBar.classList.add(`status-${indicator}`);
+    statusBar.querySelector('.status-text').textContent = description;
+    statusBar.hidden = false;
+  } catch {
+    // Status-Abruf fehlgeschlagen – still ignorieren
+  }
+}
+
 // Browser Zurück/Vor-Button
 window.addEventListener('popstate', async (e) => {
   var page, id;
diff --git a/wwwroot/js/pages/dashboard.js b/wwwroot/js/pages/dashboard.js
index f40b594..3b84bca 100644
--- a/wwwroot/js/pages/dashboard.js
+++ b/wwwroot/js/pages/dashboard.js
@@ -2,9 +2,6 @@
 
 registerPage('dashboard', {
   async init() {
-    // Claude Status laden
-    loadClaudeStatus();
-
     // Einstellungen-Link
     document.getElementById('dashboardSettingsLink').addEventListener('click', (e) => {
       e.preventDefault();
@@ -265,29 +262,6 @@ registerPage('dashboard', {
   }
 });
 
-async function loadClaudeStatus() {
-  const statusBar = document.getElementById('claudeStatusBar');
-  if (!statusBar) return;
-
-  try {
-    const res = await fetch('https://status.claude.com/api/v2/status.json');
-    if (!res.ok) return;
-    const data = await res.json();
-
-    const indicator = data.status?.indicator || 'none';
-    const description = data.status?.description || '';
-
-    // Nur anzeigen wenn es kein "none" ist (alles OK)
-    if (indicator === 'none') return;
-
-    statusBar.classList.add(`status-${indicator}`);
-    statusBar.querySelector('.status-text').textContent = description;
-    statusBar.hidden = false;
-  } catch {
-    // Status-Abruf fehlgeschlagen – still ignorieren
-  }
-}
-
 function showTelegramLinkCode(code, sessionName) {
   // Bestehendes Modal entfernen
   const existing = document.getElementById('telegramLinkModal');