feat(ui): add quick shortcuts panel with add/edit/delete support
Adds a compact shortcuts row inside the composer panel for one-click
instruction queuing, with full lifecycle management stored in localStorage.
Features
--------
- Six built-in defaults (Stop, Summarize, Explain error, Undo, Continue, etc.)
- Click any chip → instantly POSTs to /api/instructions, no typing required
- Cyan border pulse on fire; green glow flash on success
- Edit mode (toggle button in header):
- Per-chip edit (✏) button → replaces chip with inline input, Enter to save
- Per-chip delete (✕) button → removes with vanish animation
- '+ Add' chip → inline form appended below rail
- All changes persisted to localStorage key 'local-mcp-shortcuts'
- Accessible: button elements, aria-labels, keyboard support (Enter/Escape)
Files
-----
- static/js/shortcuts.js new module (loadShortcuts, renderShortcuts,
startInlineEdit, showAddPrompt, initShortcuts)
- static/index.html #shortcuts-container inside composer .panel-body
- static/js/app.js import + initShortcuts() in bootstrap()
- static/css/components.css .shortcuts-container, .shortcut-chip variants,
.shortcut-inline-edit, keyframes chip-fire/sent/vanish
This commit is contained in:
Brandon Zhang
@@ -559,4 +559,208 @@
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* ── Quick shortcuts ─────────────────────────────────────────────────────── */
|
||||
|
||||
.shortcuts-container {
|
||||
margin-top: var(--space-3);
|
||||
border-top: 1px solid var(--border-subtle);
|
||||
padding-top: var(--space-3);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-2);
|
||||
}
|
||||
|
||||
.shortcuts-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: var(--space-3);
|
||||
}
|
||||
|
||||
.shortcuts-label {
|
||||
font-family: var(--font-ui);
|
||||
font-size: var(--text-xs);
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.12em;
|
||||
text-transform: uppercase;
|
||||
color: var(--text-muted);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.shortcut-edit-toggle {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--space-1);
|
||||
padding: 2px var(--space-2);
|
||||
background: none;
|
||||
border: 1px solid var(--border-subtle);
|
||||
border-radius: var(--radius-sm);
|
||||
font-family: var(--font-ui);
|
||||
font-size: var(--text-xs);
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.06em;
|
||||
color: var(--text-muted);
|
||||
cursor: pointer;
|
||||
transition: border-color 150ms, color 150ms;
|
||||
}
|
||||
.shortcut-edit-toggle:hover {
|
||||
border-color: var(--border-strong);
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.shortcuts-rail {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--space-2);
|
||||
min-height: 28px;
|
||||
}
|
||||
|
||||
/* Individual shortcut chip */
|
||||
.shortcut-chip {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--space-1);
|
||||
max-width: 220px;
|
||||
padding: 4px var(--space-3);
|
||||
background: var(--bg-overlay);
|
||||
border: 1px solid var(--border-muted);
|
||||
border-radius: 4px;
|
||||
font-family: var(--font-mono);
|
||||
font-size: var(--text-xs);
|
||||
font-weight: 400;
|
||||
color: var(--text-secondary);
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
transition: border-color 140ms ease, color 140ms ease,
|
||||
background 140ms ease, transform 80ms ease;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.shortcut-chip:hover {
|
||||
border-color: var(--cyan-dim);
|
||||
color: var(--text-primary);
|
||||
background: var(--bg-hover);
|
||||
}
|
||||
|
||||
.shortcut-chip:active {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
|
||||
.shortcut-chip__text {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
/* Delete handle (shown in edit mode) */
|
||||
.shortcut-chip__del {
|
||||
display: none; /* toggled via JS */
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
flex-shrink: 0;
|
||||
border-radius: 50%;
|
||||
background: var(--red-dim);
|
||||
color: var(--red);
|
||||
transition: background 120ms;
|
||||
}
|
||||
.shortcut-chip:hover .shortcut-chip__del {
|
||||
background: var(--red);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* Edit handle (shown in edit mode) */
|
||||
.shortcut-chip__edit {
|
||||
display: none; /* toggled via JS */
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
flex-shrink: 0;
|
||||
border-radius: 50%;
|
||||
background: var(--border-muted);
|
||||
color: var(--text-secondary);
|
||||
transition: background 120ms;
|
||||
}
|
||||
.shortcut-chip:hover .shortcut-chip__edit {
|
||||
background: var(--cyan-dim);
|
||||
color: var(--cyan);
|
||||
}
|
||||
|
||||
/* Inline chip edit row */
|
||||
.shortcut-inline-edit {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--space-2);
|
||||
animation: chip-fire 160ms ease;
|
||||
}
|
||||
.shortcut-inline-input {
|
||||
width: 180px;
|
||||
padding: 3px var(--space-2);
|
||||
font-size: var(--text-xs);
|
||||
height: 26px;
|
||||
}
|
||||
|
||||
/* Firing state (just clicked) */
|
||||
.shortcut-chip--firing {
|
||||
border-color: var(--cyan);
|
||||
color: var(--cyan);
|
||||
animation: chip-fire 280ms ease;
|
||||
}
|
||||
|
||||
/* Sent confirmation flash */
|
||||
.shortcut-chip--sent {
|
||||
border-color: var(--green);
|
||||
color: var(--green);
|
||||
animation: chip-sent 600ms ease;
|
||||
}
|
||||
|
||||
/* Add chip */
|
||||
.shortcut-chip--add {
|
||||
border-style: dashed;
|
||||
border-color: var(--border-subtle);
|
||||
color: var(--text-muted);
|
||||
gap: var(--space-1);
|
||||
padding: 4px var(--space-2);
|
||||
}
|
||||
.shortcut-chip--add:hover {
|
||||
border-color: var(--cyan-dim);
|
||||
color: var(--cyan);
|
||||
}
|
||||
|
||||
/* Chip animations */
|
||||
@keyframes chip-fire {
|
||||
0% { transform: scale(1); }
|
||||
40% { transform: scale(0.93); }
|
||||
100% { transform: scale(1); }
|
||||
}
|
||||
|
||||
@keyframes chip-sent {
|
||||
0% { box-shadow: 0 0 0 0 var(--green-glow); }
|
||||
50% { box-shadow: 0 0 0 6px transparent; }
|
||||
100% { box-shadow: none; }
|
||||
}
|
||||
|
||||
@keyframes chip-vanish {
|
||||
to { opacity: 0; transform: scale(0.8); width: 0; padding: 0; margin: 0; }
|
||||
}
|
||||
|
||||
/* Add shortcut inline form */
|
||||
.shortcut-add-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-2);
|
||||
padding-top: var(--space-2);
|
||||
border-top: 1px solid var(--border-subtle);
|
||||
margin-top: var(--space-1);
|
||||
animation: fade-in-up 180ms ease;
|
||||
}
|
||||
|
||||
.shortcut-add-actions {
|
||||
display: flex;
|
||||
gap: var(--space-2);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user