Theme-aware topbar, dropdown, and inline Load All abort button

- Replace hardcoded topbar background with --bg-topbar CSS variable
- Remove dbc.Navbar color="dark" that overrode CSS with inline style
- Make auth dropdown use var(--bg-panel) instead of hardcoded #0a0f20
- Theme-aware input backgrounds and select options in dropdown
- Move Load All abort button inline next to status message
- Auto-dismiss "All pages loaded" after 10s instead of 5s
- Clear fetch status bar on Execute button click

Co-authored-by: Isaac

Author: guidooswaldDB

app.py

@@ -1053,55 +1053,55 @@ def build_sidebar() -> html.Div:
 _THEMES = {
     "midnight": {"label": "Midnight", "dark": True, "icon": "bi-moon-stars-fill",
                  "bg-void": "#050810", "bg-dark": "#080c18", "bg-panel": "#0d1225",
-                 "bg-surface": "#141a2e",
+                 "bg-surface": "#141a2e", "bg-topbar": "rgba(8,12,24,0.95)",
                  "bg-card": "rgba(255,255,255,0.028)", "bg-hover": "rgba(255,255,255,0.055)",
                  "bg-active": "rgba(0,212,255,0.09)", "border": "rgba(255,255,255,0.07)",
                  "border-hi": "rgba(0,212,255,0.45)", "text-hi": "#f8fafc",
                  "text-1": "#e2e8f0", "text-2": "#94a3b8", "text-3": "#4b5563",
                  "accent": "#00d4ff", "card-bg": "#1a1d23"},
     "obsidian": {"label": "Obsidian", "dark": True, "icon": "bi-gem",
                  "bg-void": "#0a0a0a", "bg-dark": "#111111", "bg-panel": "#181818",
-                 "bg-surface": "#222222",
+                 "bg-surface": "#222222", "bg-topbar": "rgba(10,10,10,0.95)",
                  "bg-card": "rgba(255,255,255,0.035)", "bg-hover": "rgba(255,255,255,0.06)",
                  "bg-active": "rgba(168,85,247,0.1)", "border": "rgba(255,255,255,0.08)",
                  "border-hi": "rgba(168,85,247,0.5)", "text-hi": "#fafafa",
                  "text-1": "#e0e0e0", "text-2": "#9e9e9e", "text-3": "#555555",
                  "accent": "#a855f7", "card-bg": "#1e1e1e"},
     "deep-ocean": {"label": "Deep Ocean", "dark": True, "icon": "bi-water",
                    "bg-void": "#020617", "bg-dark": "#0f172a", "bg-panel": "#1e293b",
-                   "bg-surface": "#263448",
+                   "bg-surface": "#263448", "bg-topbar": "rgba(2,6,23,0.95)",
                    "bg-card": "rgba(255,255,255,0.03)", "bg-hover": "rgba(255,255,255,0.05)",
                    "bg-active": "rgba(56,189,248,0.1)", "border": "rgba(255,255,255,0.06)",
                    "border-hi": "rgba(56,189,248,0.5)", "text-hi": "#f8fafc",
                    "text-1": "#cbd5e1", "text-2": "#64748b", "text-3": "#475569",
                    "accent": "#38bdf8", "card-bg": "#1e293b"},
     "aurora": {"label": "Aurora", "dark": True, "icon": "bi-stars",
                "bg-void": "#030712", "bg-dark": "#0c1427", "bg-panel": "#162032",
-               "bg-surface": "#1e2a3e",
+               "bg-surface": "#1e2a3e", "bg-topbar": "rgba(3,7,18,0.95)",
                "bg-card": "rgba(255,255,255,0.03)", "bg-hover": "rgba(255,255,255,0.055)",
                "bg-active": "rgba(16,185,129,0.1)", "border": "rgba(255,255,255,0.07)",
                "border-hi": "rgba(16,185,129,0.5)", "text-hi": "#ecfdf5",
                "text-1": "#d1fae5", "text-2": "#6ee7b7", "text-3": "#34d399",
                "accent": "#10b981", "card-bg": "#1a2332"},
     "snowlight": {"label": "Snowlight", "dark": False, "icon": "bi-sun-fill",
                   "bg-void": "#f8fafc", "bg-dark": "#f1f5f9", "bg-panel": "#ffffff",
-                  "bg-surface": "#eef2f7",
+                  "bg-surface": "#eef2f7", "bg-topbar": "rgba(255,255,255,0.92)",
                   "bg-card": "rgba(0,0,0,0.03)", "bg-hover": "rgba(0,0,0,0.05)",
                   "bg-active": "rgba(99,102,241,0.08)", "border": "rgba(0,0,0,0.1)",
                   "border-hi": "rgba(99,102,241,0.5)", "text-hi": "#0f172a",
                   "text-1": "#1e293b", "text-2": "#64748b", "text-3": "#94a3b8",
                   "accent": "#6366f1", "card-bg": "#ffffff"},
     "paper": {"label": "Paper", "dark": False, "icon": "bi-file-earmark-text",
               "bg-void": "#fafaf9", "bg-dark": "#f5f5f4", "bg-panel": "#ffffff",
-              "bg-surface": "#edeceb",
+              "bg-surface": "#edeceb", "bg-topbar": "rgba(255,255,255,0.92)",
               "bg-card": "rgba(0,0,0,0.025)", "bg-hover": "rgba(0,0,0,0.04)",
               "bg-active": "rgba(234,88,12,0.08)", "border": "rgba(0,0,0,0.08)",
               "border-hi": "rgba(234,88,12,0.45)", "text-hi": "#1c1917",
               "text-1": "#292524", "text-2": "#78716c", "text-3": "#a8a29e",
               "accent": "#ea580c", "card-bg": "#ffffff"},
     "cloud": {"label": "Cloud", "dark": False, "icon": "bi-cloud-sun-fill",
               "bg-void": "#f0f9ff", "bg-dark": "#e0f2fe", "bg-panel": "#ffffff",
-              "bg-surface": "#daeaf8",
+              "bg-surface": "#daeaf8", "bg-topbar": "rgba(255,255,255,0.92)",
               "bg-card": "rgba(0,0,0,0.02)", "bg-hover": "rgba(0,0,0,0.04)",
               "bg-active": "rgba(14,165,233,0.08)", "border": "rgba(0,0,0,0.08)",
               "border-hi": "rgba(14,165,233,0.45)", "text-hi": "#0c4a6e",
@@ -1405,7 +1405,7 @@ def _theme_card(tid: str, t: dict) -> html.Div:
             ),
         ], className="d-flex align-items-center"),
     ], fluid=True),
-    color="dark", dark=True, className="topbar",
+    dark=True, className="topbar",
 )
 
 
@@ -1621,12 +1621,8 @@ def _custom_section() -> html.Div:
                     style={"display": "none"},
                 ),
                 html.Button(
-                    [html.I(className="bi bi-x-lg me-1"), "Abort"],
-                    id="load-all-abort-btn",
-                    n_clicks=0,
+                    "Abort", id="load-all-abort-btn", n_clicks=0,
                     className="load-all-abort-btn",
-                    title="Cancel loading",
-                    style={"display": "none"},
                 ),
             ], className="response-panel"),
         ], className="main-content"),
@@ -1814,6 +1810,7 @@ def update_settings(tz, lang, theme_clicks, current):
         root.style.setProperty('--bg-dark', theme['bg-dark']);
         root.style.setProperty('--bg-panel', theme['bg-panel']);
         root.style.setProperty('--bg-surface', theme['bg-surface']);
+        root.style.setProperty('--bg-topbar', theme['bg-topbar']);
         root.style.setProperty('--bg-card', theme['bg-card']);
         root.style.setProperty('--bg-hover', theme['bg-hover']);
         root.style.setProperty('--bg-active', theme['bg-active']);
@@ -2370,6 +2367,7 @@ def restore_cached_response(endpoint, cache):
     Output("chips-store", "data"),
     Output("response-cache", "data", allow_duplicate=True),
     Output("sp-load-all-btn", "style"),
+    Output("fetch-status-bar", "children", allow_duplicate=True),
     Input("execute-btn", "n_clicks"),
     State("selected-endpoint", "data"),
     State({"type": "param-input", "name": ALL}, "value"),
@@ -2383,7 +2381,7 @@ def restore_cached_response(endpoint, cache):
 def execute_api_call(n_clicks, endpoint, param_values, param_ids, body_text, timeout_val, conn_config, cache):
     """Callback 10: Execute the selected API call and render the response."""
     if not n_clicks or not endpoint:
-        return no_update, no_update, no_update, no_update, no_update, no_update
+        return no_update, no_update, no_update, no_update, no_update, no_update, no_update
 
     params: Dict[str, Any] = {}
     ep_param_map = {p["name"]: p for p in endpoint.get("params", [])}
@@ -2403,7 +2401,7 @@ def execute_api_call(n_clicks, endpoint, param_values, param_ids, body_text, tim
     for pp in endpoint.get("path_params", []):
         val = params.pop(pp, "")
         if not val:
-            return build_error_panel(f"Path parameter '{pp}' is required."), no_update, time.time(), None, no_update, {"display": "none"}
+            return build_error_panel(f"Path parameter '{pp}' is required."), no_update, time.time(), None, no_update, {"display": "none"}, ""
         path = path.replace(f"{{{pp}}}", str(val))
 
     method = endpoint.get("method", "GET")
@@ -2412,11 +2410,11 @@ def execute_api_call(n_clicks, endpoint, param_values, param_ids, body_text, tim
         try:
             body = json.loads(body_text)
         except json.JSONDecodeError as e:
-            return build_error_panel(f"Invalid JSON body: {e}"), no_update, time.time(), None, no_update, {"display": "none"}
+            return build_error_panel(f"Invalid JSON body: {e}"), no_update, time.time(), None, no_update, {"display": "none"}, ""
 
     ws_host, ws_token = _resolve_conn(conn_config)
     if not ws_host:
-        return build_error_panel("No workspace host. Configure a connection in the user menu."), no_update, time.time(), None, no_update, {"display": "none"}
+        return build_error_panel("No workspace host. Configure a connection in the user menu."), no_update, time.time(), None, no_update, {"display": "none"}, ""
 
     # Account-scope endpoints need a token issued for the accounts console
     is_account = endpoint.get("scope") == "account"
@@ -2427,7 +2425,7 @@ def execute_api_call(n_clicks, endpoint, param_values, param_ids, body_text, tim
 
     if not token:
         msg = "No auth token for the accounts console. Ensure your CLI profile has an account_id configured." if is_account else "No auth token. Configure a connection in the user menu."
-        return build_error_panel(msg), no_update, time.time(), None, no_update, {"display": "none"}
+        return build_error_panel(msg), no_update, time.time(), None, no_update, {"display": "none"}, ""
 
     try:
         ep_timeout = max(1, int(timeout_val or endpoint.get("timeout", 30)))
@@ -2464,7 +2462,7 @@ def execute_api_call(n_clicks, endpoint, param_values, param_ids, body_text, tim
     new_cache = dict(cache or {})
     new_cache[ep_id] = {"result": result, "chips": chips or None}
     btn_style = {"display": "inline-flex"} if has_more else {"display": "none"}
-    return build_response_panel(result, chips), last_req, time.time(), chips or None, new_cache, btn_style
+    return build_response_panel(result, chips), last_req, time.time(), chips or None, new_cache, btn_style, ""
 
 
 # 11. Signal tick_fetch to start a new pagination run whenever execute fires.
@@ -2787,15 +2785,14 @@ def _load_all_worker(last_req, host, token, list_key, initial_data):
     Output("load-all-ticker", "disabled"),
     Output("fetch-status-bar", "children", allow_duplicate=True),
     Output("sp-load-all-btn", "style", allow_duplicate=True),
-    Output("load-all-abort-btn", "style"),
     Input("sp-load-all-btn", "n_clicks"),
     State("last-request", "data"),
     State("conn-config", "data"),
     prevent_initial_call=True,
 )
 def start_load_all(n_clicks, last_req, conn_config):
     """Callback 11h-start: Launch the background Load All thread and enable the ticker."""
-    NO = (True, no_update, no_update, no_update)
+    NO = (True, no_update, no_update)
     if not n_clicks or not last_req:
         return NO
     initial_data = last_req.get("initial_data", {})
@@ -2830,9 +2827,12 @@ def start_load_all(n_clicks, last_req, conn_config):
     status = html.Div([
         html.I(className="bi bi-arrow-repeat me-2 spin-icon"),
         "Loading page 1…",
+        html.Button([html.I(className="bi bi-x-lg me-1"), "Abort"],
+                    id="load-all-abort-btn", n_clicks=0,
+                    className="load-all-abort-inline"),
     ], className="fetch-status-inner loading")
 
-    return False, status, {"display": "none"}, {"display": "inline-flex"}
+    return False, status, {"display": "none"}
 
 
 # 11h-tick: Poll progress from background thread
@@ -2842,34 +2842,35 @@ def start_load_all(n_clicks, last_req, conn_config):
     Output("chips-store", "data", allow_duplicate=True),
     Output("fetch-status-bar", "children", allow_duplicate=True),
     Output("load-all-ticker", "disabled", allow_duplicate=True),
-    Output("load-all-abort-btn", "style", allow_duplicate=True),
     Input("load-all-ticker", "n_intervals"),
     State("response-cache", "data"),
     prevent_initial_call=True,
 )
 def poll_load_all(n_intervals, cache):
     """Callback 11h-tick: Poll the background Load All thread for progress."""
-    NO = (no_update, no_update, no_update, no_update, no_update, no_update)
+    NO = (no_update, no_update, no_update, no_update, no_update)
     state = _load_all_state
     pages = state.get("pages", 0)
     total = state.get("total_items", 0)
     elapsed = state.get("elapsed_ms", 0)
-    HIDE = {"display": "none"}
 
     if state.get("running"):
         # Still loading — update status bar only
         status = html.Div([
             html.I(className="bi bi-arrow-repeat me-2 spin-icon"),
             f"Loading page {pages + 1}… ({total:,} items so far · {elapsed:,}ms)",
+            html.Button([html.I(className="bi bi-x-lg me-1"), "Abort"],
+                        id="load-all-abort-btn", n_clicks=0,
+                        className="load-all-abort-inline"),
         ], className="fetch-status-inner loading")
-        return no_update, no_update, no_update, status, False, no_update
+        return no_update, no_update, no_update, status, False
 
-    # Auto-dismiss: if finished_at was set, wait 5s then clear status bar
+    # Auto-dismiss: if finished_at was set, wait 10s then clear status bar
     finished_at = state.get("finished_at")
     if finished_at and not state.get("done"):
-        if time.time() - finished_at >= 5:
+        if time.time() - finished_at >= 10:
             state.pop("finished_at", None)
-            return no_update, no_update, no_update, "", True, HIDE  # clear status, stop ticker
+            return no_update, no_update, no_update, "", True  # clear status, stop ticker
         return NO  # keep ticking, waiting to dismiss
 
     if not state.get("done"):
@@ -2915,33 +2916,31 @@ def poll_load_all(n_intervals, cache):
     # Mark done, set dismiss timer — keep ticker running for auto-dismiss
     _load_all_state.update({"done": False, "items": [], "finished_at": time.time()})
 
-    return build_response_panel(merged_result, chips), new_cache, chips or None, status, False, HIDE
+    return build_response_panel(merged_result, chips), new_cache, chips or None, status, False
 
 
 # 11h-abort: Stop background Load All thread
 @app.callback(
     Output("fetch-status-bar", "children", allow_duplicate=True),
-    Output("load-all-abort-btn", "style", allow_duplicate=True),
     Input("load-all-abort-btn", "n_clicks"),
     prevent_initial_call=True,
 )
 def abort_load_all(n_clicks):
     """Callback 11h-abort: Signal the background Load All thread to stop."""
     if not n_clicks:
-        return no_update, no_update
+        return no_update
     _load_all_state["running"] = False
     _load_all_state["error"] = "Cancelled"
     return html.Div([
         html.I(className="bi bi-x-circle-fill me-2"),
         "Aborting…",
-    ], className="fetch-status-inner cancelled"), {"display": "none"}
+    ], className="fetch-status-inner cancelled")
 
 
 # 11h-abort-on-switch: Cancel Load All when a different endpoint is selected
 @app.callback(
     Output("load-all-ticker", "disabled", allow_duplicate=True),
     Output("fetch-status-bar", "children", allow_duplicate=True),
-    Output("load-all-abort-btn", "style", allow_duplicate=True),
     Input("selected-endpoint", "data"),
     prevent_initial_call=True,
 )
@@ -2952,7 +2951,7 @@ def abort_load_all_on_switch(endpoint):
         _load_all_state["error"] = "Cancelled"
     # Also clear any lingering dismiss timer
     _load_all_state.pop("finished_at", None)
-    return True, "", {"display": "none"}
+    return True, ""
 
 
 # 13. Search filter

assets/style.css

@@ -10,6 +10,7 @@
   --bg-dark:    #080c18;
   --bg-panel:   #0d1225;
   --bg-surface: #141a2e;
+  --bg-topbar:  rgba(8,12,24,0.95);
   --bg-card:    rgba(255,255,255,0.028);
   --bg-hover:   rgba(255,255,255,0.055);
   --bg-active:  rgba(0,212,255,0.09);
@@ -58,7 +59,7 @@ body {
 /* ── Top Navigation Bar ───────────────────────────────────────────── */
 .topbar {
   height: 56px;
-  background: rgba(8,12,24,0.95) !important;
+  background: var(--bg-topbar) !important;
   border-bottom: 1px solid var(--border) !important;
   backdrop-filter: blur(20px);
   -webkit-backdrop-filter: blur(20px);
@@ -872,25 +873,23 @@ body {
   border-color: rgba(239,68,68,0.6);
   box-shadow: 0 0 8px rgba(239,68,68,0.2);
 }
-.load-all-abort-btn {
-  position: absolute;
-  right: 18px;
-  top: 6px;
-  z-index: 10;
+.load-all-abort-btn { display: none; }
+.load-all-abort-inline {
   background: rgba(239,68,68,0.1);
   border: 1px solid rgba(239,68,68,0.3);
   color: var(--red);
   border-radius: var(--r-sm);
-  padding: 2px 10px;
+  padding: 1px 8px;
   font-size: 11px;
   font-family: var(--font-mono);
   cursor: pointer;
   display: inline-flex;
   align-items: center;
   white-space: nowrap;
+  margin-left: 12px;
   transition: all 0.15s;
 }
-.load-all-abort-btn:hover {
+.load-all-abort-inline:hover {
   background: rgba(239,68,68,0.22);
   border-color: rgba(239,68,68,0.6);
 }
@@ -1132,14 +1131,14 @@ body {
   top: 56px;
   right: 0;
   width: 520px;
-  background: #0a0f20;
+  background: var(--bg-panel);
   border-left: 1px solid rgba(0,212,255,0.18);
   border-bottom: 1px solid rgba(0,212,255,0.18);
   border-radius: 0 0 0 var(--r-lg);
   z-index: 9999;
   max-height: calc(100vh - 56px);
   overflow-y: auto;
-  box-shadow: -10px 10px 40px rgba(0,0,0,0.7);
+  box-shadow: -10px 10px 40px rgba(0,0,0,0.35);
   scrollbar-width: thin;
   scrollbar-color: rgba(255,255,255,0.08) transparent;
 }
@@ -1187,7 +1186,7 @@ body {
   margin-bottom: 4px;
 }
 .conn-select, .conn-input {
-  background: rgba(255,255,255,0.04) !important;
+  background: var(--bg-card) !important;
   border: 1px solid var(--border) !important;
   color: var(--text-1) !important;
   font-size: 12px !important;
@@ -1198,7 +1197,7 @@ body {
   border-color: var(--border-hi) !important;
   box-shadow: 0 0 0 2px rgba(0,212,255,0.1) !important;
 }
-.conn-select option { background: #0d1225; }
+.conn-select option { background: var(--bg-panel); }
 .conn-hint { font-size: 11px; color: var(--text-3); }
 
 /* Apply / Connect button */

version.txt

@@ -1 +1 @@
-549
+581