alex/pi-gui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(quick-pane): polish spotlight lifecycle

Browse Source
This commit is contained in:
Alex
2026-08-25 21:53:00 +02:00
parent bab754714e
commit a204eea7da
5 changed files with 213 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files
test/quick-pane-ui.test.js
+35
View File
@@ -54,3 +54,38 @@ test("Quick Pane routes extension responses through existing bridge command", as
assert.match(source, /invoke\("respond_to_extension"/);
assert.match(source, /requestId: extension\.id/);
});
test("Quick Pane uses native quick dimensions and keyboard-first controls", async () => {
const [source, stylesheet, configSource] = await Promise.all([
readFile(
new URL("../ui/src/quick-pane/QuickPane.tsx", import.meta.url),
"utf8",
),
readFile(
new URL("../ui/src/quick-pane/quick-pane.css", import.meta.url),
"utf8",
),
readFile(new URL("../ui/src-tauri/tauri.conf.json", import.meta.url), "utf8"),
]);
const config = JSON.parse(configSource);
const quickPane = config.app.windows.find((window) => window.label === "quick-pane");
assert.deepEqual(
{
width: quickPane.width,
height: quickPane.height,
transparent: quickPane.transparent,
},
{ width: 640, height: 440, transparent: true },
);
assert.match(source, /ref=\{inputRef\}/);
assert.match(source, /focusInput\(\)/);
assert.match(
source,
/event\.key === "Enter" &&\s*!event\.shiftKey &&\s*!event\.nativeEvent\.isComposing/,
);
assert.match(source, /event\.preventDefault\(\);\s*void run\(\);/);
assert.match(source, /Could not load model catalog:/);
assert.match(stylesheet, /#f0a347/);
assert.doesNotMatch(stylesheet, /#8aa9d6|#46494f|#23252a/);
});
ui/src-tauri/src/lib.rs
+22 -5
View File
@@ -49,16 +49,31 @@ fn requested_quick_pane(args: &[String]) -> bool {
args.iter().any(|arg| arg == "--quick")
}
fn show_quick_pane(app: &AppHandle) {
fn quick_pane_action(is_visible: bool) -> WindowAction {
if is_visible {
WindowAction::Hide
} else {
WindowAction::ShowAndFocus
}
}
fn toggle_quick_pane(app: &AppHandle) {
if let Some(window) = app.get_webview_window("quick-pane") {
match quick_pane_action(window.is_visible().unwrap_or(false)) {
WindowAction::Hide => {
let _ = window.hide();
}
WindowAction::ShowAndFocus => {
if let Some(main) = app.get_webview_window("main") {
let _ = main.hide();
}
if let Some(window) = app.get_webview_window("quick-pane") {
let _ = window.show();
let _ = window.unminimize();
let _ = window.set_focus();
}
}
}
}
fn requested_new_worktree_argument(args: &[String]) -> Option<String> {
args.iter()
@@ -388,7 +403,7 @@ pub fn run() {
})
.plugin(tauri_plugin_single_instance::init(|app, args, _cwd| {
if requested_quick_pane(&args) {
show_quick_pane(app);
toggle_quick_pane(app);
return;
}
launch_new_session(app.clone(), &args);
@@ -406,7 +421,7 @@ pub fn run() {
}))
.setup(move |app| {
if requested_quick_pane(&launch_args) {
show_quick_pane(app.handle());
toggle_quick_pane(app.handle());
} else {
launch_new_session(app.handle().clone(), &launch_args);
}
@@ -482,9 +497,11 @@ mod tests {
}
#[test]
fn quick_flag_is_detected_without_affecting_toggle() {
fn quick_flag_is_detected_and_toggles_its_own_window() {
assert!(requested_quick_pane(&["--quick".to_owned()]));
assert!(!requested_quick_pane(&["--toggle".to_owned()]));
assert_eq!(quick_pane_action(false), WindowAction::ShowAndFocus);
assert_eq!(quick_pane_action(true), WindowAction::Hide);
}
#[test]
ui/src-tauri/tauri.conf.json
+3 -2
View File
@@ -28,13 +28,14 @@
{
"label": "quick-pane",
"title": "Pi Quick Pane",
"width": 520,
"height": 360,
"width": 640,
"height": 440,
"minWidth": 400,
"minHeight": 260,
"center": true,
"visible": false,
"decorations": false,
"transparent": true,
"alwaysOnTop": true,
"skipTaskbar": true,
"shadow": true
ui/src/quick-pane/QuickPane.tsx
+39 -16
View File
@@ -77,30 +77,39 @@ export default function QuickPane() {
const [extension, setExtension] = useState<Extension>();
const runtimeRef = useRef<Runtime | undefined>(undefined);
const requestRef = useRef(request);
const inputRef = useRef<HTMLTextAreaElement>(null);
const phaseRef = useRef<"idle" | "starting" | "running">("idle");
const invalid = useMemo(() => settingsError(settings), [settings]);
const dismissPane = () => getCurrentWindow().hide();
const focusInput = () => inputRef.current?.focus();
useEffect(() => {
let active = true;
invoke<UiState>("load_ui_state")
.then((state) => {
void (async () => {
let nextSettings: QuickPaneSettings;
try {
const state = await invoke<UiState>("load_ui_state");
if (!active) return;
const nextSettings = { ...defaults, ...state.quickPane };
nextSettings = { ...defaults, ...state.quickPane };
} catch (reason) {
if (active)
setError(`Could not load settings: ${String(reason)}`);
return;
}
setSettings(nextSettings);
setSettingsLoaded(true);
setSelectedModel(`${nextSettings.provider}/${nextSettings.model}`);
setStatus("");
return invoke<{ models?: Model[] }>("get_model_catalog");
})
.then((catalog) => {
try {
const catalog = await invoke<{ models?: Model[] }>("get_model_catalog");
if (active) setModels(catalog?.models ?? []);
})
.catch(
(reason) =>
active && setError(`Could not load settings: ${String(reason)}`),
);
} catch (reason) {
if (active)
setError(`Could not load model catalog: ${String(reason)}`);
}
})();
return () => {
active = false;
const current = runtimeRef.current;
@@ -111,6 +120,10 @@ export default function QuickPane() {
};
}, []);
useEffect(() => {
if (settingsLoaded) focusInput();
}, [settingsLoaded]);
useEffect(() => {
const paneWindow = getCurrentWindow();
const settingsListener = listen<QuickPaneSettings>(
@@ -126,12 +139,11 @@ export default function QuickPane() {
};
window.addEventListener("keydown", onKeyDown);
const focusListener = paneWindow.onFocusChanged((event) => {
if (
!event.payload &&
phaseRef.current === "idle" &&
!requestRef.current.trim()
)
if (event.payload) {
focusInput();
} else if (phaseRef.current === "idle" && !requestRef.current.trim()) {
void dismissPane();
}
});
const closeListener = paneWindow.onCloseRequested((event) => {
event.preventDefault();
@@ -299,11 +311,22 @@ export default function QuickPane() {
</header>
<textarea
autoFocus
ref={inputRef}
value={request}
onChange={(e) => {
requestRef.current = e.target.value;
setRequest(e.target.value);
}}
onKeyDown={(event) => {
if (
event.key === "Enter" &&
!event.shiftKey &&
!event.nativeEvent.isComposing
) {
event.preventDefault();
void run();
}
}}
placeholder="Ask a quick question or give a quick instruction"
style={{ width: "100%", minHeight: 90, marginTop: 14 }}
/>
ui/src/quick-pane/quick-pane.css
+106 -16
View File
@@ -1,20 +1,110 @@
:root { color-scheme: dark; }
body { margin: 0; background: transparent; }
:root {
color-scheme: dark;
}
body {
min-width: 0;
min-height: 0;
margin: 0;
background: transparent;
}
.quick-pane {
box-sizing: border-box;
min-height: 100vh;
padding: 18px;
color: #f4f2ee;
font: 14px/1.4 system-ui, sans-serif;
background: radial-gradient(circle at top, #46494f, #23252a 62%);
border: 1px solid rgba(255,255,255,.16);
border-radius: 14px;
box-shadow: 0 22px 70px rgba(0,0,0,.55);
overflow-y: auto;
padding: 12px;
color: #e6e3df;
font: 14px/1.4 Inter, ui-sans-serif, system-ui, sans-serif;
background: rgba(34, 34, 34, 0.98);
border: 1px solid #4b4b4b;
border-radius: 8px;
box-shadow: 0 22px 70px rgba(0, 0, 0, 0.55);
}
.quick-pane header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 12px;
color: #f0a347;
font-size: 11px;
font-weight: 900;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.quick-pane button,
.quick-pane select {
border: 0;
border-radius: 5px;
padding: 6px 9px;
font: inherit;
}
.quick-pane button {
margin-right: 6px;
background: #f0a347;
color: #25180b;
font-weight: 750;
cursor: pointer;
}
.quick-pane button:hover {
background: #ffc170;
}
.quick-pane button:disabled {
opacity: 0.6;
cursor: wait;
}
.quick-pane select {
color: #e6e3df;
background: #353535;
}
.quick-pane textarea {
box-sizing: border-box;
width: 100%;
min-height: 92px;
padding: 12px;
border: 1px solid #484848;
border-radius: 6px;
color: #e6e3df;
background: #292929;
font: inherit;
font-size: 16px;
resize: vertical;
}
.quick-pane textarea:focus,
.quick-pane button:focus-visible,
.quick-pane select:focus-visible {
outline: 3px solid #f0a347;
outline-offset: 2px;
}
.quick-pane > label {
display: inline-flex;
align-items: center;
gap: 7px;
margin: 10px 8px 10px 0;
color: #bbb7b0;
}
.quick-pane > pre,
.quick-pane > p {
margin: 10px 0 0;
padding: 10px 12px;
border: 1px solid #484848;
border-radius: 6px;
white-space: pre-wrap;
background: #292929;
}
.quick-pane [role="alert"] {
border-color: #a65b67;
color: #ffd7db;
background: #3d252b;
}
.quick-pane header { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; color:#c9c7c2; font-size:12px; letter-spacing:.08em; text-transform:uppercase; }
.quick-pane button, .quick-pane select { border:0; border-radius:7px; padding:7px 10px; color:inherit; background:#45484e; }
.quick-pane textarea { box-sizing:border-box; width:100%; min-height:92px; padding:14px; border:0; border-radius:10px; outline:1px solid rgba(255,255,255,.14); color:#fff; background:rgba(0,0,0,.24); font:inherit; font-size:16px; resize:none; }
.quick-pane textarea:focus { outline:2px solid #8aa9d6; background:rgba(0,0,0,.38); }
.quick-pane > label { display:inline-flex; align-items:center; gap:7px; margin:10px 8px 10px 0; color:#c9c7c2; }
.quick-pane > pre, .quick-pane > p { margin:10px 0 0; padding:10px 12px; border-radius:9px; white-space:pre-wrap; background:rgba(0,0,0,.22); }
.quick-pane [role="alert"] { color:#ffb8bd; background:rgba(119,42,52,.42); }