feat(cmd): visible 'Try saying' panel under the input when empty
First-time users opening Cmd-K saw a blank input + a long list of items. Add a 6-row 'Try saying' panel that shows real typeable commands with kbd-styled chips and one-line hints. Hides as soon as the user types anything, so power-users aren't slowed down. Controlled-input wiring: useState<query>, onValueChange, reset on close. cmdk handles the actual filtering as before. 31/31 vitest pass.
This commit is contained in:
@@ -1,5 +1,5 @@
|
||||
// Command palette — scenarios, steps, scenes, recents, real actions.
|
||||
import { useEffect, useMemo } from "react";
|
||||
import { useEffect, useMemo, useState } from "react";
|
||||
import { Command } from "cmdk";
|
||||
import { useApp, scenarioById } from "../state/store";
|
||||
import { Play, Branch, Bot, Check, Home, HistoryIcon, Layers, Search, Refresh, Cog, User } from "./icons";
|
||||
@@ -26,6 +26,11 @@ export default function CommandBar() {
|
||||
const actor = useApp((s) => s.actor);
|
||||
|
||||
const sc = scenarioById(scenarioId);
|
||||
const [query, setQuery] = useState("");
|
||||
|
||||
useEffect(() => {
|
||||
if (!open) setQuery("");
|
||||
}, [open]);
|
||||
|
||||
useEffect(() => {
|
||||
const onKey = (e: KeyboardEvent) => {
|
||||
@@ -53,9 +58,22 @@ export default function CommandBar() {
|
||||
<Command className="cmd" onClick={(e) => e.stopPropagation()} label="Command bar">
|
||||
<div className="cmd-input-row">
|
||||
<Search size={14} />
|
||||
<Command.Input autoFocus placeholder="Switch scenario · jump to step · start instance · execute action…" />
|
||||
<Command.Input autoFocus placeholder="Switch scenario · jump to step · start instance · execute action…" value={query} onValueChange={setQuery} />
|
||||
<kbd className="kbd-hint">esc</kbd>
|
||||
</div>
|
||||
{!query && (
|
||||
<div className="cmd-try-saying" aria-hidden>
|
||||
<span className="cmd-try-label">Try saying</span>
|
||||
<ul className="cmd-try-list">
|
||||
<li><kbd>start laptop procurement</kbd> <span className="cmd-try-hint">opens Studio with intake filled in</span></li>
|
||||
<li><kbd>open procurement hub</kbd> <span className="cmd-try-hint">jumps to the Procurement hub</span></li>
|
||||
<li><kbd>find case INC-4427</kbd> <span className="cmd-try-hint">searches active runs by subject</span></li>
|
||||
<li><kbd>my approvals</kbd> <span className="cmd-try-hint">opens the queue waiting on you</span></li>
|
||||
<li><kbd>switch theme</kbd> <span className="cmd-try-hint">light ↔ dark</span></li>
|
||||
<li><kbd>open settings</kbd> <span className="cmd-try-hint">identity, polling, console</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
)}
|
||||
<Command.List>
|
||||
<Command.Empty>No matches.</Command.Empty>
|
||||
|
||||
|
||||
@@ -2349,3 +2349,31 @@ select.studio-input { background: var(--bp-paper); }
|
||||
font-weight: 700;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Command palette: visible 'Try saying' help when input is empty */
|
||||
.cmd-try-saying {
|
||||
padding: 10px 14px;
|
||||
border-top: 1px solid color-mix(in srgb, var(--bp-navy) 12%, transparent);
|
||||
border-bottom: 1px solid color-mix(in srgb, var(--bp-navy) 12%, transparent);
|
||||
background: color-mix(in srgb, var(--bp-paper) 92%, var(--bp-canvas));
|
||||
}
|
||||
.cmd-try-label {
|
||||
display: block;
|
||||
font-family: var(--bp-mono);
|
||||
font-size: 9.5px;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
color: var(--bp-muted);
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.cmd-try-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; }
|
||||
.cmd-try-list li { display: flex; align-items: center; gap: 8px; font-size: 12px; line-height: 1.4; }
|
||||
.cmd-try-list kbd {
|
||||
font-family: var(--bp-mono);
|
||||
font-size: 11px;
|
||||
padding: 2px 6px;
|
||||
border: 1px solid color-mix(in srgb, var(--bp-navy) 28%, transparent);
|
||||
background: var(--bp-paper);
|
||||
color: var(--bp-navy);
|
||||
}
|
||||
.cmd-try-hint { color: var(--bp-muted); font-size: 11px; }
|
||||
|
||||
Reference in New Issue
Block a user