tabs in beiträgen gemerget

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();

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>
 

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 {