From 543cf677ab65e8efbc2091b85fd79344cdfdad63 Mon Sep 17 00:00:00 2001
From: David Kaya <david@kaya.sk>
Date: Mon, 13 Apr 2026 12:20:17 +0200
Subject: [PATCH] fix: resolve Quick Prompt popup visibility and model picker
 issues

- Replace translucent glass background with solid surface-1 color;
  backdrop-filter does not work with transparent BrowserWindows on
  Windows, leaving the panel nearly invisible
- Add data-quickprompt body attribute to quickprompt.html and CSS
  overrides to ensure body/root are truly transparent, eliminating
  the visible rectangle behind the rounded panel
- Remove overflow-hidden from qp-panel so model selector dropdown
  is no longer clipped; the dropdown was positioned absolute and
  rendered entirely outside the panel bounds
- Change ModelSelector to open downward (top-full) instead of upward
  (bottom-full) for natural command-bar flow
- Update dropdown animation direction to match downward opening
- Increase blur handler delay to 200ms for safer dropdown interactions

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
---
 src/main/windows/createQuickPromptWindow.ts   |  6 ++---
 .../components/quick-prompt/ModelSelector.tsx |  2 +-
 .../quick-prompt/QuickPromptApp.tsx           |  2 +-
 src/renderer/quickprompt.html                 |  2 +-
 src/renderer/styles.css                       | 25 +++++++++++++------
 5 files changed, 24 insertions(+), 13 deletions(-)

diff --git a/src/main/windows/createQuickPromptWindow.ts b/src/main/windows/createQuickPromptWindow.ts
index 5a9edb4..51a4ec0 100644
--- a/src/main/windows/createQuickPromptWindow.ts
+++ b/src/main/windows/createQuickPromptWindow.ts
@@ -44,14 +44,14 @@ export function createQuickPromptWindow(): BrowserWindowType {
   // Hide on blur — but only if the window itself loses focus (not from
   // devtools or transient focus changes during show/hide).
   window.on('blur', () => {
-    // Small delay: avoid hiding during transient focus shifts (e.g. model
-    // selector dropdown causing a brief blur → refocus cycle).
+    // Longer delay: avoid hiding during transient focus shifts when
+    // interacting with model selector dropdown or other UI elements.
     setTimeout(() => {
       if (window.isVisible() && !window.isFocused()) {
         window.webContents.send('quick-prompt:hide');
         window.hide();
       }
-    }, 100);
+    }, 200);
   });
 
   return window;
diff --git a/src/renderer/components/quick-prompt/ModelSelector.tsx b/src/renderer/components/quick-prompt/ModelSelector.tsx
index 676b280..684fc47 100644
--- a/src/renderer/components/quick-prompt/ModelSelector.tsx
+++ b/src/renderer/components/quick-prompt/ModelSelector.tsx
@@ -90,7 +90,7 @@ export function ModelSelector({
   return (
     <div
       ref={containerRef}
-      className="qp-dropdown-enter absolute bottom-full left-3 right-3 z-10 mb-1 overflow-hidden rounded-xl border border-[var(--color-border)] bg-[var(--color-surface-1)] shadow-2xl shadow-black/50"
+      className="qp-dropdown-enter absolute top-full left-3 right-3 z-10 mt-1 overflow-hidden rounded-xl border border-[var(--color-border)] bg-[var(--color-surface-1)] shadow-2xl shadow-black/50"
       role="listbox"
       aria-label="Select model"
     >
diff --git a/src/renderer/components/quick-prompt/QuickPromptApp.tsx b/src/renderer/components/quick-prompt/QuickPromptApp.tsx
index 21a8bc8..32caad9 100644
--- a/src/renderer/components/quick-prompt/QuickPromptApp.tsx
+++ b/src/renderer/components/quick-prompt/QuickPromptApp.tsx
@@ -171,7 +171,7 @@ export function QuickPromptApp() {
   return (
     <div className="qp-container flex h-screen w-screen items-start justify-center pt-0">
       <div
-        className={`qp-panel qp-panel-enter flex w-full max-w-[680px] flex-col overflow-hidden rounded-2xl ${
+        className={`qp-panel qp-panel-enter flex w-full max-w-[680px] flex-col rounded-2xl ${
           phase === 'streaming' ? 'qp-border-streaming' : hasResponse ? 'qp-border-complete' : 'qp-border-idle'
         }`}
         role="dialog"
diff --git a/src/renderer/quickprompt.html b/src/renderer/quickprompt.html
index c73c21b..2a208f7 100644
--- a/src/renderer/quickprompt.html
+++ b/src/renderer/quickprompt.html
@@ -8,7 +8,7 @@
     />
     <title>Aryx Quick Prompt</title>
   </head>
-  <body style="margin: 0; background: transparent; overflow: hidden;">
+  <body data-quickprompt style="margin: 0; background: transparent; overflow: hidden;">
     <div id="root"></div>
     <script
       type="module"
diff --git a/src/renderer/styles.css b/src/renderer/styles.css
index 9f328b9..72ae630 100644
--- a/src/renderer/styles.css
+++ b/src/renderer/styles.css
@@ -705,17 +705,28 @@ body {
 
 /* ── Quick Prompt — Glass Command Bar ────────────────────────── */
 
+/* Override body/root backgrounds when inside the quickprompt window so the
+   transparent BrowserWindow doesn't show a colored rectangle behind the
+   rounded panel. The data attribute is set on the <body> in quickprompt.html. */
+body[data-quickprompt] {
+  background: transparent !important;
+  min-height: 0 !important;
+}
+
+body[data-quickprompt] #root {
+  min-height: 0 !important;
+}
+
 .qp-container {
   background: transparent;
 }
 
 .qp-panel {
-  background: var(--color-glass);
-  backdrop-filter: blur(24px) saturate(1.4);
-  -webkit-backdrop-filter: blur(24px) saturate(1.4);
+  background: var(--color-surface-1);
   box-shadow:
-    0 24px 80px rgba(0, 0, 0, 0.55),
-    0 0 1px rgba(255, 255, 255, 0.06) inset;
+    0 24px 80px rgba(0, 0, 0, 0.6),
+    0 8px 24px rgba(0, 0, 0, 0.4),
+    0 0 1px rgba(255, 255, 255, 0.08) inset;
   transition: border-color 0.3s ease;
 }
 
@@ -795,11 +806,11 @@ body {
   animation: qp-actions-in 0.2s cubic-bezier(0.16, 1, 0.3, 1) 0.05s both;
 }
 
-/* Dropdown entrance — opens upward */
+/* Dropdown entrance — opens downward */
 @keyframes qp-dropdown-in {
   from {
     opacity: 0;
-    transform: translateY(6px) scale(0.97);
+    transform: translateY(-6px) scale(0.97);
   }
   to {
     opacity: 1;