starred/aryx
1
0
Fork 0
mirror of https://github.com/davidkaya/aryx.git synced 2026-08-09 05:08:44 +02:00
Code Issues 3 Packages Projects Releases 10 Wiki Activity

fix: resolve Quick Prompt popup visibility and model picker issues

Browse Source 
- 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>
This commit is contained in:
David Kaya
2026-04-13 12:20:17 +02:00
co-authored by Copilot
parent 952e69da9f
commit 543cf677ab
5 changed files with 24 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/main/windows/createQuickPromptWindow.ts
+3 -3
View File
@@ -44,14 +44,14 @@ export function createQuickPromptWindow(): BrowserWindowType {
// Hide on blur — but only if the window itself loses focus (not from // Hide on blur — but only if the window itself loses focus (not from
// devtools or transient focus changes during show/hide). // devtools or transient focus changes during show/hide).
window.on('blur', () => { window.on('blur', () => {
// Small delay: avoid hiding during transient focus shifts (e.g. model // Longer delay: avoid hiding during transient focus shifts when
// selector dropdown causing a brief blur → refocus cycle). // interacting with model selector dropdown or other UI elements.
setTimeout(() => { setTimeout(() => {
if (window.isVisible() && !window.isFocused()) { if (window.isVisible() && !window.isFocused()) {
window.webContents.send('quick-prompt:hide'); window.webContents.send('quick-prompt:hide');
window.hide(); window.hide();
} }
}, 100); }, 200);
}); });
return window; return window;
src/renderer/components/quick-prompt/ModelSelector.tsx
+1 -1
View File
@@ -90,7 +90,7 @@ export function ModelSelector({
return ( return (
<div <div
ref={containerRef} 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" role="listbox"
aria-label="Select model" aria-label="Select model"
> >
src/renderer/components/quick-prompt/QuickPromptApp.tsx
+1 -1
View File
@@ -171,7 +171,7 @@ export function QuickPromptApp() {
return ( return (
<div className="qp-container flex h-screen w-screen items-start justify-center pt-0"> <div className="qp-container flex h-screen w-screen items-start justify-center pt-0">
<div <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' phase === 'streaming' ? 'qp-border-streaming' : hasResponse ? 'qp-border-complete' : 'qp-border-idle'
}`} }`}
role="dialog" role="dialog"
src/renderer/quickprompt.html
+1 -1
View File
@@ -8,7 +8,7 @@
/> />
<title>Aryx Quick Prompt</title> <title>Aryx Quick Prompt</title>
</head> </head>
<body style="margin: 0; background: transparent; overflow: hidden;"> <body data-quickprompt style="margin: 0; background: transparent; overflow: hidden;">
<div id="root"></div> <div id="root"></div>
<script <script
type="module" type="module"
src/renderer/styles.css
+18 -7
View File
@@ -705,17 +705,28 @@ body {
/* ── Quick Prompt — Glass Command Bar ────────────────────────── */ /* ── 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 { .qp-container {
background: transparent; background: transparent;
} }
.qp-panel { .qp-panel {
background: var(--color-glass); background: var(--color-surface-1);
backdrop-filter: blur(24px) saturate(1.4);
-webkit-backdrop-filter: blur(24px) saturate(1.4);
box-shadow: box-shadow:
0 24px 80px rgba(0, 0, 0, 0.55), 0 24px 80px rgba(0, 0, 0, 0.6),
0 0 1px rgba(255, 255, 255, 0.06) inset; 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; 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; 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 { @keyframes qp-dropdown-in {
from { from {
opacity: 0; opacity: 0;
transform: translateY(6px) scale(0.97); transform: translateY(-6px) scale(0.97);
} }
to { to {
opacity: 1; opacity: 1;