From 15b3977e88d633e113bb2039b0d840cdf08f5ec0 Mon Sep 17 00:00:00 2001
From: catlog22 <catlog22@github.com>
Date: Thu, 22 Jan 2026 11:13:07 +0800
Subject: [PATCH] fix: reorganize left sidebar into 3-row layout
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Row 1: Tab buttons (循环 | 任务) + New Loop button
- Row 2: Filter dropdown (全部 / 运行中 / 已暂停 / 已完成 / 失败)
- Row 3: Loop list items

This fixes the layout issue where multiple elements were stacking vertically
and appearing on multiple lines. Now creates a clear, organized left panel.
---
 .../dashboard-css/36-loop-monitor.css         | 20 ++++++++++++
 .../dashboard-js/views/loop-monitor.js        | 31 +++++++++++--------
 2 files changed, 38 insertions(+), 13 deletions(-)

diff --git a/ccw/src/templates/dashboard-css/36-loop-monitor.css b/ccw/src/templates/dashboard-css/36-loop-monitor.css
index 8f7705e6..72c8da73 100644
--- a/ccw/src/templates/dashboard-css/36-loop-monitor.css
+++ b/ccw/src/templates/dashboard-css/36-loop-monitor.css
@@ -172,6 +172,26 @@
   overflow: hidden;
 }
 
+/* Panel Header - Row 1: Tabs + New Button */
+.panel-header-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 1rem 1rem 0.75rem 1rem;
+  gap: 0.75rem;
+}
+
+/* Panel Filter - Row 2: Filter Dropdown */
+.panel-filter-row {
+  padding: 0 1rem 0.75rem 1rem;
+  border-bottom: 1px solid hsl(var(--border));
+}
+
+.panel-filter-row .filter-select {
+  width: 100%;
+}
+
+/* Legacy panel-header support */
 .panel-header {
   display: flex;
   align-items: center;
diff --git a/ccw/src/templates/dashboard-js/views/loop-monitor.js b/ccw/src/templates/dashboard-js/views/loop-monitor.js
index c2503aa6..48427a8b 100644
--- a/ccw/src/templates/dashboard-js/views/loop-monitor.js
+++ b/ccw/src/templates/dashboard-js/views/loop-monitor.js
@@ -54,7 +54,8 @@ async function renderLoopMonitor() {
       <div class="loop-monitor-layout">
         <!-- Loop List -->
         <div class="loop-list-panel">
-          <div class="panel-header">
+          <!-- Row 1: Tabs + New Button -->
+          <div class="panel-header-row">
             <div class="view-tabs">
               <button class="tab-button active" data-tab="loops" onclick="switchView('loops')">
                 <i data-lucide="activity" class="w-4 h-4"></i> ${t('loop.loops')}
@@ -63,19 +64,23 @@ async function renderLoopMonitor() {
                 <i data-lucide="list" class="w-4 h-4"></i> ${t('loop.tasks')}
               </button>
             </div>
-            <div class="header-actions">
-              <button class="btn btn-primary" onclick="showCreateLoopModal()" title="Create new loop task">
-                <i data-lucide="plus" class="w-4 h-4"></i> ${t('loop.newLoop')}
-              </button>
-              <select id="loopFilter" class="filter-select" onchange="filterLoops()">
-                <option value="all">${t('loop.all')}</option>
-                <option value="running">${t('loop.running')}</option>
-                <option value="paused">${t('loop.paused')}</option>
-                <option value="completed">${t('loop.completed')}</option>
-                <option value="failed">${t('loop.failed')}</option>
-              </select>
-            </div>
+            <button class="btn btn-primary btn-sm" onclick="showCreateLoopModal()" title="Create new loop task">
+              <i data-lucide="plus" class="w-4 h-4"></i> ${t('loop.newLoop')}
+            </button>
           </div>
+
+          <!-- Row 2: Filter -->
+          <div class="panel-filter-row">
+            <select id="loopFilter" class="filter-select" onchange="filterLoops()">
+              <option value="all">${t('loop.all')}</option>
+              <option value="running">${t('loop.running')}</option>
+              <option value="paused">${t('loop.paused')}</option>
+              <option value="completed">${t('loop.completed')}</option>
+              <option value="failed">${t('loop.failed')}</option>
+            </select>
+          </div>
+
+          <!-- Row 3: Loop List -->
           <div class="loop-list" id="loopList">
             <div class="loading-spinner">${t('loop.loading')}</div>
           </div>