From e742a74f6d0c4370156694cba15a6004796c515d Mon Sep 17 00:00:00 2001
From: Sucukdeluxe <259325684+Sucukdeluxe@users.noreply.github.com>
Date: Fri, 21 Aug 2026 00:59:23 +0200
Subject: [PATCH] style: integrate queue filters into the command bar

Move search, host, status, and reset controls into one framed filter group beside the upload actions, preserving responsive wrapping within the same toolbar.
---
 renderer/index.html            | 17 ++++++++---------
 renderer/styles.css            | 18 +++++++++++++++++-
 tests/startup-renderer.test.js |  2 ++
 3 files changed, 27 insertions(+), 10 deletions(-)

diff --git a/renderer/index.html b/renderer/index.html
index fc2a9bc..8bc368e 100644
--- a/renderer/index.html
+++ b/renderer/index.html
@@ -289,15 +289,14 @@
           <button class="toolbar-btn" id="moveBottomBtn" title="Ganz nach unten" aria-label="Ganz nach unten">
             <svg width="16" height="16" viewBox="0 0 16 16"><path d="M8 7l-4-5h8z" fill="#4caf50"/><path d="M8 11l-4-5h8z" fill="#4caf50"/><rect x="4" y="13" width="8" height="2" rx="0.5" fill="#4caf50"/></svg>
           </button>
-        </div>
-
-        <div class="queue-filter-bar" aria-label="Warteschlange filtern">
-          <input class="key-input" id="queueSearchInput" type="search" placeholder="Dateiname suchen" aria-label="Dateiname suchen" style="max-width:260px">
-          <select class="hs-input" id="queueHosterFilter" aria-label="Nach Hoster filtern" style="width:auto;min-width:150px"><option value="">Alle Hoster</option></select>
-          <select class="hs-input" id="queueStatusFilter" aria-label="Nach Status filtern" style="width:auto;min-width:150px">
-            <option value="">Alle Status</option><option value="error">Nur Fehler</option><option value="active">Aktiv</option><option value="waiting">Wartend</option><option value="done">Erfolgreich</option>
-          </select>
-          <button class="btn btn-xs btn-secondary queue-filter-reset" id="queueFilterResetBtn" hidden>Filter zurücksetzen</button>
+          <div class="queue-filter-bar" aria-label="Warteschlange filtern">
+            <input class="key-input" id="queueSearchInput" type="search" placeholder="Dateiname suchen" aria-label="Dateiname suchen" style="max-width:260px">
+            <select class="hs-input" id="queueHosterFilter" aria-label="Nach Hoster filtern" style="width:auto;min-width:150px"><option value="">Alle Hoster</option></select>
+            <select class="hs-input" id="queueStatusFilter" aria-label="Nach Status filtern" style="width:auto;min-width:150px">
+              <option value="">Alle Status</option><option value="error">Nur Fehler</option><option value="active">Aktiv</option><option value="waiting">Wartend</option><option value="done">Erfolgreich</option>
+            </select>
+            <button class="btn btn-xs btn-secondary queue-filter-reset" id="queueFilterResetBtn" hidden>Filter zurücksetzen</button>
+          </div>
         </div>
 
         <div class="queue-container" id="queueContainer">
diff --git a/renderer/styles.css b/renderer/styles.css
index 4278bbd..6c359f0 100644
--- a/renderer/styles.css
+++ b/renderer/styles.css
@@ -402,12 +402,28 @@ body {
   margin: 0 4px;
 }
 .queue-filter-reset {
-  margin-left: auto;
+  margin-left: 2px;
   white-space: nowrap;
 }
 .queue-filter-reset[hidden] {
   display: none;
 }
+.queue-filter-bar {
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 5px;
+  margin-left: auto;
+  padding: 3px;
+  border: 1px solid var(--border);
+  border-radius: 7px;
+  background: var(--bg-input);
+}
+.queue-filter-bar .key-input,
+.queue-filter-bar .hs-input {
+  height: 30px;
+}
 .queue-container {
   flex: 1 1 0;
   min-height: 0;
diff --git a/tests/startup-renderer.test.js b/tests/startup-renderer.test.js
index 3426693..d752f6d 100644
--- a/tests/startup-renderer.test.js
+++ b/tests/startup-renderer.test.js
@@ -178,6 +178,8 @@ test('header occupies its final geometry before asynchronous initialization', ()
   assert.match(css, /\.update-release-notes\s*\{[^}]*height:\s*min\(264px,\s*48vh\);/su);
   assert.match(html, /class="update-progress-footer"[\s\S]*id="updateProgressDetails"[\s\S]*id="updateProgressSize"[\s\S]*id="updateProgressSpeed"[\s\S]*id="updateProgressEta"[\s\S]*id="updateProgressText"/u);
   assert.match(html, /id="queueFilterResetBtn"[^>]*hidden[^>]*>Filter zurücksetzen</u);
+  assert.doesNotMatch(html, /<\/div>\s*<div class="queue-filter-bar"/u);
+  assert.match(css, /\.queue-filter-bar\s*\{[^}]*display:\s*flex;[^}]*margin-left:\s*auto;[^}]*border:\s*1px solid var\(--border\);[^}]*border-radius:\s*7px;/su);
   assert.match(css, /#updateProgressDetails\s*\{[^}]*display:\s*grid;[^}]*grid-template-columns:\s*19ch 2ch 11ch 2ch 10ch;[^}]*column-gap:\s*0;[^}]*font-variant-numeric:\s*tabular-nums;/su);
   assert.match(css, /\.update-progress-separator\s*\{[^}]*display:\s*grid;[^}]*place-items:\s*center;/su);
   assert.match(css, /#updateProgressSpeed\s*\{[^}]*text-align:\s*right;/su);