fix: improve Quick Prompt popup UX and settings design

- Fix window lifecycle: await renderer load before showing, debounce
  blur handler to prevent dropdown-induced dismiss
- Increase window height from 72px to 520px for response display
- Rewrite ModelSelector with tier-grouped upward-opening dropdown,
  reasoning effort controls, and Brain icon for reasoning models
- Rewrite QuickPromptInput with visible model trigger, animated
  chevron, auto-resize textarea, and proper stop button
- Improve QuickPromptResponse with compact thinking block, markdown
  code/pre/link styling, and refined spacing
- Polish QuickPromptActions with consistent sizing and hover states
- Redesign settings QuickPromptSettingsSection: replace flat radio
  list with compact grouped dropdown selector, only show reasoning
  effort when selected model supports it, combine hotkey toggle
  into single row
- Add markdown code block, inline code, and link CSS styles
- Fix dropdown animation direction for upward-opening selector
- Handle message-complete event in QuickPromptApp

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
This commit is contained in:
David Kaya
2026-04-13 12:14:29 +02:00
co-authored by Copilot
parent fb5970cfa7
commit 952e69da9f
9 changed files with 413 additions and 245 deletions
+42 -3
View File
@@ -795,15 +795,15 @@ body {
animation: qp-actions-in 0.2s cubic-bezier(0.16, 1, 0.3, 1) 0.05s both;
}
/* Dropdown entrance */
/* Dropdown entrance — opens upward */
@keyframes qp-dropdown-in {
from {
opacity: 0;
transform: translateY(calc(100% - 4px)) scale(0.98);
transform: translateY(6px) scale(0.97);
}
to {
opacity: 1;
transform: translateY(100%);
transform: translateY(0) scale(1);
}
}
@@ -917,3 +917,42 @@ body {
max-width: 100%;
border-radius: 0.5rem;
}
.markdown-content code {
font-family: var(--font-mono);
font-size: 0.85em;
background: var(--color-surface-2);
border: 1px solid var(--color-border-subtle);
border-radius: 0.25rem;
padding: 0.15em 0.35em;
color: var(--color-text-primary);
}
.markdown-content pre {
background: var(--color-surface-0);
border: 1px solid var(--color-border);
border-radius: 0.5rem;
padding: 0.875em 1em;
overflow-x: auto;
margin-top: 0.75em;
margin-bottom: 0.75em;
}
.markdown-content pre code {
background: none;
border: none;
padding: 0;
font-size: 0.8125rem;
line-height: 1.6;
}
.markdown-content a {
color: var(--color-text-accent);
text-decoration: underline;
text-decoration-color: var(--color-text-accent);
text-underline-offset: 2px;
}
.markdown-content a:hover {
color: var(--color-accent-hover);
}