From 23a5714119242bcfb803713c3cc6106364c3c199 Mon Sep 17 00:00:00 2001
From: Meik <meikdre@gmx.de>
Date: Fri, 21 Nov 2025 13:57:07 +0100
Subject: [PATCH] =?UTF-8?q?tabs=20in=20beitr=C3=A4gen=20gemerget?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/app.js     | 17 ++++++++++++++++-
 web/index.html |  2 +-
 web/style.css  | 12 +++++++++---
 3 files changed, 26 insertions(+), 5 deletions(-)

diff --git a/web/app.js b/web/app.js
index fd45fc6..b006c93 100644
--- a/web/app.js
+++ b/web/app.js
@@ -18,7 +18,7 @@ let focusTabAdjusted = null;
 let currentProfile = 1;
 let currentTab = 'pending';
 let posts = [];
-let includeExpiredPosts = loadIncludeExpiredPreference();
+let includeExpiredPosts = false;
 let profilePollTimer = null;
 const UPDATES_RECONNECT_DELAY = 5000;
 let updatesEventSource = null;
@@ -280,6 +280,19 @@ function updateIncludeExpiredToggleUI() {
   includeExpiredToggle.checked = includeExpiredPosts;
 }
 
+includeExpiredPosts = loadIncludeExpiredPreference();
+
+function updateIncludeExpiredToggleVisibility() {
+  if (!includeExpiredToggle) {
+    return;
+  }
+  const wrapper = includeExpiredToggle.closest('.search-filter-toggle');
+  if (!wrapper) {
+    return;
+  }
+  wrapper.style.display = currentTab === 'all' ? 'inline-flex' : 'none';
+}
+
 function initializeFocusParams() {
   try {
     const params = new URLSearchParams(window.location.search);
@@ -2793,6 +2806,7 @@ if (profileSelectElement) {
 
 if (includeExpiredToggle) {
   updateIncludeExpiredToggleUI();
+  updateIncludeExpiredToggleVisibility();
   includeExpiredToggle.addEventListener('change', () => {
     includeExpiredPosts = includeExpiredToggle.checked;
     persistIncludeExpiredPreference(includeExpiredPosts);
@@ -3097,6 +3111,7 @@ function renderPosts() {
     return;
   }
 
+  updateIncludeExpiredToggleVisibility();
   closeActiveDeadlinePicker();
   updateTabButtons();
   cleanupLoadMoreObserver();
diff --git a/web/index.html b/web/index.html
index 413054c..bc538d5 100644
--- a/web/index.html
+++ b/web/index.html
@@ -85,11 +85,11 @@
                 <button class="tab-btn" data-tab="all">Alle Beiträge</button>
               </div>
               <div class="search-container">
-                <input type="text" id="searchInput" class="search-input" placeholder="Beiträge durchsuchen...">
                 <label class="search-filter-toggle" for="includeExpiredToggle">
                   <input type="checkbox" id="includeExpiredToggle">
                   <span>Abgelaufene/abgeschlossene anzeigen</span>
                 </label>
+                <input type="text" id="searchInput" class="search-input" placeholder="Beiträge durchsuchen...">
               </div>
             </div>
 
diff --git a/web/style.css b/web/style.css
index b6783c6..4bde367 100644
--- a/web/style.css
+++ b/web/style.css
@@ -455,15 +455,21 @@ h1 {
 .search-filter-toggle {
   display: inline-flex;
   align-items: center;
-  gap: 6px;
+  gap: 8px;
   font-size: 13px;
-  font-weight: 600;
-  color: #1f2937;
+  font-weight: 700;
+  color: #0f172a;
+  padding: 7px 12px;
+  border-radius: 10px;
+  background: linear-gradient(135deg, #eef2ff 0%, #e0f2fe 100%);
+  border: 1px solid #d0d7ff;
+  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.06);
 }
 
 .search-filter-toggle input {
   width: 16px;
   height: 16px;
+  accent-color: #2563eb;
 }
 
 .tab-btn {