feat(electrobun): settings overhaul — fonts, shells, providers, retention, chords
- Settings drawer: responsive width clamp(24rem, 45vw, 50rem) - System font detection: fc-list for UI fonts (preferred sans-serif starred) and mono fonts (Nerd Fonts starred), fallback to hardcoded lists - Scrollback: default 5000, min 1000, step 500 - Shell detection: system.shells RPC, pre-selects $SHELL login shell - Provider enablement: provider.scan gates toggle, unavailable shown as N/A - Session retention: count 0-100 (0=Keep all), age 0-365 (0=Forever) - Chord keybindings: Ctrl+K → Ctrl+S style multi-key sequences, 1s prefix wait, arrow separator display, 26 tests passing
This commit is contained in:
Hibryda
parent
afaa2253de
commit
1de6c93e01
9 changed files with 346 additions and 187 deletions
|
|
@ -25,6 +25,11 @@
|
|||
let permissionMode = $state<PermMode>('bypassPermissions');
|
||||
let systemPrompt = $state('');
|
||||
|
||||
// Detected shells from system.shells RPC
|
||||
let detectedShells = $state<Array<{ path: string; name: string }>>([
|
||||
{ path: '/bin/bash', name: 'bash' },
|
||||
]);
|
||||
|
||||
interface ProviderState { enabled: boolean; model: string; }
|
||||
let providerState = $state<Record<string, ProviderState>>({
|
||||
claude: { enabled: true, model: 'claude-opus-4-5' },
|
||||
|
|
@ -33,6 +38,10 @@
|
|||
gemini: { enabled: false, model: 'gemini-2.5-pro' },
|
||||
});
|
||||
|
||||
// Provider availability from provider.scan RPC
|
||||
interface ProviderAvail { available: boolean; hasApiKey: boolean; hasCli: boolean }
|
||||
let providerAvail = $state<Record<string, ProviderAvail>>({});
|
||||
|
||||
let expandedProvider = $state<string | null>(null);
|
||||
|
||||
function persist(key: string, value: string) {
|
||||
|
|
@ -49,11 +58,20 @@
|
|||
function setPrompt(v: string) { systemPrompt = v; persist('system_prompt_template', v); }
|
||||
|
||||
function toggleProvider(id: string) {
|
||||
// Don't allow enabling unavailable providers
|
||||
const avail = providerAvail[id];
|
||||
if (avail && !avail.available && !providerState[id].enabled) return;
|
||||
providerState[id] = { ...providerState[id], enabled: !providerState[id].enabled };
|
||||
providerState = { ...providerState };
|
||||
persistProviders();
|
||||
}
|
||||
|
||||
function isProviderAvailable(id: string): boolean {
|
||||
const avail = providerAvail[id];
|
||||
if (!avail) return true; // Not scanned yet — assume available
|
||||
return avail.available;
|
||||
}
|
||||
|
||||
function setModel(id: string, model: string) {
|
||||
providerState[id] = { ...providerState[id], model };
|
||||
providerState = { ...providerState };
|
||||
|
|
@ -63,21 +81,48 @@
|
|||
onMount(async () => {
|
||||
if (!appRpc) return;
|
||||
const { settings } = await appRpc.request['settings.getAll']({}).catch(() => ({ settings: {} }));
|
||||
if (settings['default_shell']) defaultShell = settings['default_shell'];
|
||||
if (settings['default_cwd']) defaultCwd = settings['default_cwd'];
|
||||
if (settings['permission_mode']) permissionMode = settings['permission_mode'] as PermMode;
|
||||
if (settings['system_prompt_template']) systemPrompt = settings['system_prompt_template'];
|
||||
if (settings['provider_settings']) {
|
||||
try { providerState = JSON.parse(settings['provider_settings']); } catch { /* ignore */ }
|
||||
}
|
||||
|
||||
// Detect installed shells and pre-select login shell
|
||||
try {
|
||||
const shellRes = await appRpc.request['system.shells']({});
|
||||
if (shellRes.shells.length > 0) detectedShells = shellRes.shells;
|
||||
// Use persisted shell, else login shell from $SHELL, else first detected
|
||||
if (settings['default_shell']) {
|
||||
defaultShell = settings['default_shell'];
|
||||
} else {
|
||||
defaultShell = shellRes.loginShell || detectedShells[0]?.path || '/bin/bash';
|
||||
}
|
||||
} catch {
|
||||
if (settings['default_shell']) defaultShell = settings['default_shell'];
|
||||
}
|
||||
|
||||
// Scan provider availability
|
||||
try {
|
||||
const provRes = await appRpc.request['provider.scan']({});
|
||||
const avail: Record<string, ProviderAvail> = {};
|
||||
for (const p of provRes.providers) {
|
||||
avail[p.id] = { available: p.available, hasApiKey: p.hasApiKey, hasCli: p.hasCli };
|
||||
}
|
||||
providerAvail = avail;
|
||||
} catch { /* keep defaults */ }
|
||||
});
|
||||
</script>
|
||||
|
||||
<Section heading="Defaults">
|
||||
<div class="field">
|
||||
<label class="lbl" for="ag-shell">Shell</label>
|
||||
<input id="ag-shell" class="text-in" value={defaultShell} placeholder="/bin/bash"
|
||||
onchange={e => setShell((e.target as HTMLInputElement).value)} />
|
||||
<select id="ag-shell" class="text-in" value={defaultShell}
|
||||
onchange={e => setShell((e.target as HTMLSelectElement).value)}>
|
||||
{#each detectedShells as shell}
|
||||
<option value={shell.path} selected={shell.path === defaultShell}>{shell.name} ({shell.path})</option>
|
||||
{/each}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
|
|
@ -101,18 +146,25 @@
|
|||
<div class="prov-list">
|
||||
{#each PROVIDERS as prov}
|
||||
{@const state = providerState[prov.id]}
|
||||
<div class="prov-panel" class:disabled={!state.enabled}>
|
||||
{@const available = isProviderAvailable(prov.id)}
|
||||
<div class="prov-panel" class:disabled={!state.enabled} class:unavailable={!available}>
|
||||
<button class="prov-hdr" onclick={() => expandedProvider = expandedProvider === prov.id ? null : prov.id}>
|
||||
<span class="prov-name">{prov.label}</span>
|
||||
<span class="prov-desc">{prov.desc}</span>
|
||||
{#if !available}<span class="prov-badge" title="Not installed">N/A</span>{/if}
|
||||
<span class="prov-chev">{expandedProvider === prov.id ? '\u25B4' : '\u25BE'}</span>
|
||||
</button>
|
||||
{#if expandedProvider === prov.id}
|
||||
<div class="prov-body">
|
||||
{#if !available}
|
||||
<div class="prov-unavail">Not installed — install the CLI or set an API key to enable.</div>
|
||||
{/if}
|
||||
<label class="toggle-row">
|
||||
<span class="lbl">Enabled</span>
|
||||
<button class="toggle" class:on={state.enabled} role="switch"
|
||||
aria-checked={state.enabled} aria-label="Toggle {prov.label} provider"
|
||||
disabled={!available && !state.enabled}
|
||||
title={!available ? 'Not installed' : ''}
|
||||
onclick={() => toggleProvider(prov.id)}><span class="thumb"></span></button>
|
||||
</label>
|
||||
<div class="field">
|
||||
|
|
@ -167,6 +219,10 @@
|
|||
.thumb { position: absolute; top: 0.125rem; left: 0.125rem; width: 0.875rem; height: 0.875rem; border-radius: 50%; background: var(--ctp-text); transition: transform 0.2s; display: block; }
|
||||
.toggle.on .thumb { transform: translateX(0.875rem); }
|
||||
|
||||
.prov-panel.unavailable { opacity: 0.6; border-style: dashed; }
|
||||
.prov-badge { padding: 0.0625rem 0.375rem; background: color-mix(in srgb, var(--ctp-yellow) 15%, transparent); color: var(--ctp-yellow); border-radius: 0.75rem; font-size: 0.6rem; font-weight: 600; flex-shrink: 0; }
|
||||
.prov-unavail { padding: 0.25rem 0.375rem; font-size: 0.7rem; color: var(--ctp-overlay0); font-style: italic; }
|
||||
|
||||
.caps { display: flex; flex-wrap: wrap; gap: 0.25rem; }
|
||||
.cap { padding: 0.125rem 0.5rem; background: color-mix(in srgb, var(--ctp-blue) 10%, transparent); color: var(--ctp-blue); border-radius: 0.75rem; font-size: 0.65rem; font-weight: 500; }
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -8,7 +8,8 @@
|
|||
import ThemeEditor from './ThemeEditor.svelte';
|
||||
import CustomDropdown from '../ui/CustomDropdown.svelte';
|
||||
|
||||
const UI_FONTS = [
|
||||
// Fallback lists — replaced by system detection on mount
|
||||
const FALLBACK_UI_FONTS = [
|
||||
{ value: '', label: 'System Default' },
|
||||
{ value: 'Inter', label: 'Inter' },
|
||||
{ value: 'IBM Plex Sans', label: 'IBM Plex Sans' },
|
||||
|
|
@ -17,7 +18,7 @@
|
|||
{ value: 'Ubuntu', label: 'Ubuntu' },
|
||||
];
|
||||
|
||||
const TERM_FONTS = [
|
||||
const FALLBACK_TERM_FONTS = [
|
||||
{ value: '', label: 'Default (JetBrains Mono)' },
|
||||
{ value: 'JetBrains Mono', label: 'JetBrains Mono' },
|
||||
{ value: 'Fira Code', label: 'Fira Code' },
|
||||
|
|
@ -27,6 +28,9 @@
|
|||
{ value: 'monospace', label: 'monospace' },
|
||||
];
|
||||
|
||||
let uiFontItems = $state(FALLBACK_UI_FONTS.map(f => ({ value: f.value, label: f.label })));
|
||||
let termFontItems = $state(FALLBACK_TERM_FONTS.map(f => ({ value: f.value, label: f.label })));
|
||||
|
||||
// ── Local reactive state ───────────────────────────────────────────────────
|
||||
let themeId = $state<ThemeId>(themeStore.currentTheme);
|
||||
let uiFont = $state(fontStore.uiFontFamily);
|
||||
|
|
@ -35,7 +39,7 @@
|
|||
let termFontSize = $state(fontStore.termFontSize);
|
||||
let cursorStyle = $state('block');
|
||||
let cursorBlink = $state(true);
|
||||
let scrollback = $state(1000);
|
||||
let scrollback = $state(5000);
|
||||
|
||||
interface CustomThemeMeta { id: string; name: string; }
|
||||
let customThemes = $state<CustomThemeMeta[]>([]);
|
||||
|
|
@ -67,8 +71,7 @@
|
|||
|
||||
// ── Dropdown items for CustomDropdown ──────────────────────────────────────
|
||||
let themeItems = $derived(allThemes.map(t => ({ value: t.id, label: t.label, group: t.group })));
|
||||
let uiFontItems = UI_FONTS.map(f => ({ value: f.value, label: f.label }));
|
||||
let termFontItems = TERM_FONTS.map(f => ({ value: f.value, label: f.label }));
|
||||
// uiFontItems and termFontItems are $state — populated by system.fonts on mount
|
||||
let langItems = AVAILABLE_LOCALES.map(l => ({ value: l.tag, label: l.nativeLabel }));
|
||||
|
||||
// ── Actions ────────────────────────────────────────────────────────────────
|
||||
|
|
@ -135,10 +138,35 @@
|
|||
const { settings } = await appRpc.request['settings.getAll']({}).catch(() => ({ settings: {} }));
|
||||
if (settings['cursor_style']) cursorStyle = settings['cursor_style'];
|
||||
if (settings['cursor_blink']) cursorBlink = settings['cursor_blink'] !== 'false';
|
||||
if (settings['scrollback']) scrollback = parseInt(settings['scrollback'], 10) || 1000;
|
||||
if (settings['scrollback']) scrollback = parseInt(settings['scrollback'], 10) || 5000;
|
||||
|
||||
const res = await appRpc.request['themes.getCustom']({}).catch(() => ({ themes: [] }));
|
||||
customThemes = res.themes.map(t => ({ id: t.id, name: t.name }));
|
||||
|
||||
// Detect system fonts
|
||||
try {
|
||||
const fontRes = await appRpc.request['system.fonts']({});
|
||||
if (fontRes.uiFonts.length > 0) {
|
||||
uiFontItems = [
|
||||
{ value: '', label: 'System Default' },
|
||||
...fontRes.uiFonts.map(f => ({
|
||||
value: f.family,
|
||||
label: f.preferred ? `\u2605 ${f.family}` : f.family,
|
||||
})),
|
||||
];
|
||||
}
|
||||
if (fontRes.monoFonts.length > 0) {
|
||||
termFontItems = [
|
||||
{ value: '', label: 'Default (JetBrains Mono)' },
|
||||
...fontRes.monoFonts.map(f => ({
|
||||
value: f.family,
|
||||
label: f.isNerdFont ? `\u2B50 ${f.family}` : f.family,
|
||||
})),
|
||||
];
|
||||
}
|
||||
} catch {
|
||||
// Keep fallback font lists
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
|
|
@ -216,8 +244,8 @@
|
|||
|
||||
<h3 class="sh">{t('settings.scrollback')}</h3>
|
||||
<div class="field row">
|
||||
<input type="number" class="num-in" min="100" max="100000" step="100" value={scrollback}
|
||||
onchange={e => persistScrollback(parseInt((e.target as HTMLInputElement).value, 10) || 1000)}
|
||||
<input type="number" class="num-in" min="1000" max="100000" step="500" value={scrollback}
|
||||
onchange={e => persistScrollback(parseInt((e.target as HTMLInputElement).value, 10) || 5000)}
|
||||
aria-label="Scrollback lines" />
|
||||
<span class="hint">{t('settings.scrollbackHint')}</span>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,10 +1,13 @@
|
|||
<script lang="ts">
|
||||
import { keybindingStore, chordFromEvent, type Keybinding } from '../keybinding-store.svelte.ts';
|
||||
import { keybindingStore, chordFromEvent, formatChord, chordParts, type Keybinding } from '../keybinding-store.svelte.ts';
|
||||
|
||||
// ── State ─────────────────────────────────────────────────────
|
||||
let searchQuery = $state('');
|
||||
let capturingId = $state<string | null>(null);
|
||||
let conflictWarning = $state<string | null>(null);
|
||||
// Chord capture: first key of a multi-key sequence
|
||||
let capturePrefix = $state<string | null>(null);
|
||||
let capturePrefixTimer = $state<ReturnType<typeof setTimeout> | null>(null);
|
||||
|
||||
// ── Derived filtered list ──────────────────────────────────────
|
||||
let filtered = $derived(
|
||||
|
|
@ -28,10 +31,28 @@
|
|||
|
||||
const CATEGORY_ORDER = ['Global', 'Navigation', 'Terminal', 'Settings'];
|
||||
|
||||
// Known chord prefixes for multi-key detection
|
||||
const KNOWN_PREFIXES = ['Ctrl+K', 'Ctrl+Shift+K'];
|
||||
|
||||
function isKnownPrefix(chord: string): boolean {
|
||||
return KNOWN_PREFIXES.includes(chord);
|
||||
}
|
||||
|
||||
// ── Capture mode ──────────────────────────────────────────────
|
||||
function startCapture(id: string) {
|
||||
capturingId = id;
|
||||
conflictWarning = null;
|
||||
capturePrefix = null;
|
||||
if (capturePrefixTimer) clearTimeout(capturePrefixTimer);
|
||||
capturePrefixTimer = null;
|
||||
}
|
||||
|
||||
function clearCapture() {
|
||||
capturingId = null;
|
||||
conflictWarning = null;
|
||||
capturePrefix = null;
|
||||
if (capturePrefixTimer) clearTimeout(capturePrefixTimer);
|
||||
capturePrefixTimer = null;
|
||||
}
|
||||
|
||||
function handleCaptureKeydown(e: KeyboardEvent, id: string) {
|
||||
|
|
@ -40,8 +61,7 @@
|
|||
|
||||
const chord = chordFromEvent(e);
|
||||
if (!chord || chord === 'Escape') {
|
||||
capturingId = null;
|
||||
conflictWarning = null;
|
||||
clearCapture();
|
||||
return;
|
||||
}
|
||||
// Skip bare modifier key presses (no actual key yet)
|
||||
|
|
@ -49,6 +69,31 @@
|
|||
return;
|
||||
}
|
||||
|
||||
// If we already have a prefix, complete the chord sequence
|
||||
if (capturePrefix) {
|
||||
if (capturePrefixTimer) clearTimeout(capturePrefixTimer);
|
||||
const fullChord = `${capturePrefix} ${chord}`;
|
||||
applyChord(id, fullChord);
|
||||
return;
|
||||
}
|
||||
|
||||
// If this looks like a chord prefix, wait for second key
|
||||
if (isKnownPrefix(chord)) {
|
||||
capturePrefix = chord;
|
||||
capturePrefixTimer = setTimeout(() => {
|
||||
// Timeout — use the prefix as a single-key chord
|
||||
if (capturePrefix) {
|
||||
applyChord(id, capturePrefix);
|
||||
}
|
||||
}, 1000);
|
||||
return;
|
||||
}
|
||||
|
||||
// Single-key chord
|
||||
applyChord(id, chord);
|
||||
}
|
||||
|
||||
function applyChord(id: string, chord: string) {
|
||||
// Conflict check
|
||||
const conflict = keybindingStore.bindings.find(
|
||||
(b) => b.id !== id && b.chord === chord
|
||||
|
|
@ -61,7 +106,7 @@
|
|||
}
|
||||
|
||||
keybindingStore.setChord(id, chord);
|
||||
capturingId = null;
|
||||
clearCapture();
|
||||
}
|
||||
|
||||
function resetAll() {
|
||||
|
|
@ -80,7 +125,7 @@
|
|||
<input
|
||||
class="kb-search"
|
||||
type="search"
|
||||
placeholder="Search shortcuts…"
|
||||
placeholder="Search shortcuts\u2026"
|
||||
bind:value={searchQuery}
|
||||
aria-label="Search keyboard shortcuts"
|
||||
/>
|
||||
|
|
@ -115,18 +160,18 @@
|
|||
aria-label="Press new key combination for {binding.label}"
|
||||
autofocus
|
||||
onkeydown={(e) => handleCaptureKeydown(e, binding.id)}
|
||||
onblur={() => capturingId = null}
|
||||
onblur={() => clearCapture()}
|
||||
>
|
||||
Press keys…
|
||||
{capturePrefix ? `${capturePrefix} + \u2026` : 'Press keys\u2026'}
|
||||
</div>
|
||||
{:else}
|
||||
<button
|
||||
class="kb-chord"
|
||||
onclick={() => startCapture(binding.id)}
|
||||
title="Click to rebind"
|
||||
aria-label="Current shortcut for {binding.label}: {binding.chord}. Click to change."
|
||||
aria-label="Current shortcut for {binding.label}: {formatChord(binding.chord)}. Click to change."
|
||||
>
|
||||
{binding.chord}
|
||||
{formatChord(binding.chord)}
|
||||
</button>
|
||||
{/if}
|
||||
|
||||
|
|
@ -135,10 +180,10 @@
|
|||
<button
|
||||
class="kb-reset"
|
||||
onclick={() => keybindingStore.resetChord(binding.id)}
|
||||
title="Reset to {binding.defaultChord}"
|
||||
title="Reset to {formatChord(binding.defaultChord)}"
|
||||
aria-label="Reset {binding.label} to default"
|
||||
>
|
||||
↩ {binding.defaultChord}
|
||||
\u21A9 {formatChord(binding.defaultChord)}
|
||||
</button>
|
||||
{:else}
|
||||
<span class="kb-reset-placeholder"></span>
|
||||
|
|
@ -156,160 +201,26 @@
|
|||
</div>
|
||||
|
||||
<style>
|
||||
.kb-settings {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.kb-toolbar {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.kb-search {
|
||||
flex: 1;
|
||||
height: 1.75rem;
|
||||
background: var(--ctp-surface0);
|
||||
border: 1px solid var(--ctp-surface1);
|
||||
border-radius: 0.3rem;
|
||||
color: var(--ctp-text);
|
||||
font-family: var(--ui-font-family);
|
||||
font-size: 0.8125rem;
|
||||
padding: 0 0.5rem;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.kb-settings { display: flex; flex-direction: column; gap: 1rem; }
|
||||
.kb-toolbar { display: flex; gap: 0.5rem; align-items: center; }
|
||||
.kb-search { flex: 1; height: 1.75rem; background: var(--ctp-surface0); border: 1px solid var(--ctp-surface1); border-radius: 0.3rem; color: var(--ctp-text); font-family: var(--ui-font-family); font-size: 0.8125rem; padding: 0 0.5rem; outline: none; }
|
||||
.kb-search:focus { border-color: var(--ctp-mauve); }
|
||||
|
||||
.kb-reset-all {
|
||||
padding: 0.25rem 0.625rem;
|
||||
background: transparent;
|
||||
border: 1px solid var(--ctp-surface1);
|
||||
border-radius: 0.3rem;
|
||||
color: var(--ctp-subtext0);
|
||||
font-family: var(--ui-font-family);
|
||||
font-size: 0.75rem;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
transition: border-color 0.12s, color 0.12s;
|
||||
}
|
||||
|
||||
.kb-reset-all:hover {
|
||||
border-color: var(--ctp-red);
|
||||
color: var(--ctp-red);
|
||||
}
|
||||
|
||||
.kb-conflict-banner {
|
||||
padding: 0.375rem 0.5rem;
|
||||
background: color-mix(in srgb, var(--ctp-yellow) 12%, transparent);
|
||||
border: 1px solid var(--ctp-yellow);
|
||||
border-radius: 0.3rem;
|
||||
color: var(--ctp-yellow);
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.kb-category {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.kb-category-header {
|
||||
font-size: 0.625rem;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
color: var(--ctp-overlay0);
|
||||
padding: 0 0.25rem;
|
||||
}
|
||||
|
||||
.kb-table {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.125rem;
|
||||
}
|
||||
|
||||
.kb-row {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto auto;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.25rem 0.375rem;
|
||||
border-radius: 0.25rem;
|
||||
transition: background 0.1s;
|
||||
}
|
||||
|
||||
.kb-reset-all { padding: 0.25rem 0.625rem; background: transparent; border: 1px solid var(--ctp-surface1); border-radius: 0.3rem; color: var(--ctp-subtext0); font-family: var(--ui-font-family); font-size: 0.75rem; cursor: pointer; white-space: nowrap; transition: border-color 0.12s, color 0.12s; }
|
||||
.kb-reset-all:hover { border-color: var(--ctp-red); color: var(--ctp-red); }
|
||||
.kb-conflict-banner { padding: 0.375rem 0.5rem; background: color-mix(in srgb, var(--ctp-yellow) 12%, transparent); border: 1px solid var(--ctp-yellow); border-radius: 0.3rem; color: var(--ctp-yellow); font-size: 0.75rem; }
|
||||
.kb-category { display: flex; flex-direction: column; gap: 0.25rem; }
|
||||
.kb-category-header { font-size: 0.625rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ctp-overlay0); padding: 0 0.25rem; }
|
||||
.kb-table { display: flex; flex-direction: column; gap: 0.125rem; }
|
||||
.kb-row { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 0.5rem; padding: 0.25rem 0.375rem; border-radius: 0.25rem; transition: background 0.1s; }
|
||||
.kb-row:hover { background: var(--ctp-surface0); }
|
||||
.kb-row.modified { background: color-mix(in srgb, var(--ctp-mauve) 6%, transparent); }
|
||||
|
||||
.kb-label {
|
||||
font-size: 0.8125rem;
|
||||
color: var(--ctp-text);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.kb-chord {
|
||||
padding: 0.125rem 0.5rem;
|
||||
background: var(--ctp-surface0);
|
||||
border: 1px solid var(--ctp-surface1);
|
||||
border-radius: 0.25rem;
|
||||
color: var(--ctp-text);
|
||||
font-family: var(--term-font-family);
|
||||
font-size: 0.75rem;
|
||||
cursor: pointer;
|
||||
transition: border-color 0.12s, background 0.12s;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.kb-chord:hover:not(.capturing) {
|
||||
border-color: var(--ctp-mauve);
|
||||
background: var(--ctp-surface1);
|
||||
}
|
||||
|
||||
.kb-chord.capturing {
|
||||
border-color: var(--ctp-mauve);
|
||||
background: color-mix(in srgb, var(--ctp-mauve) 15%, var(--ctp-surface0));
|
||||
color: var(--ctp-mauve);
|
||||
animation: pulse-capture 0.8s ease-in-out infinite;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
@keyframes pulse-capture {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0.65; }
|
||||
}
|
||||
|
||||
.kb-reset {
|
||||
padding: 0.125rem 0.375rem;
|
||||
background: transparent;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 0.25rem;
|
||||
color: var(--ctp-overlay0);
|
||||
font-family: var(--ui-font-family);
|
||||
font-size: 0.6875rem;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
transition: border-color 0.12s, color 0.12s;
|
||||
}
|
||||
|
||||
.kb-reset:hover {
|
||||
border-color: var(--ctp-surface1);
|
||||
color: var(--ctp-subtext0);
|
||||
}
|
||||
|
||||
.kb-reset-placeholder {
|
||||
width: 5rem; /* Reserve space so layout stays stable */
|
||||
}
|
||||
|
||||
.kb-empty {
|
||||
text-align: center;
|
||||
color: var(--ctp-overlay0);
|
||||
font-size: 0.8125rem;
|
||||
font-style: italic;
|
||||
padding: 2rem 0;
|
||||
}
|
||||
.kb-label { font-size: 0.8125rem; color: var(--ctp-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.kb-chord { padding: 0.125rem 0.5rem; background: var(--ctp-surface0); border: 1px solid var(--ctp-surface1); border-radius: 0.25rem; color: var(--ctp-text); font-family: var(--term-font-family); font-size: 0.75rem; cursor: pointer; transition: border-color 0.12s, background 0.12s; white-space: nowrap; }
|
||||
.kb-chord:hover:not(.capturing) { border-color: var(--ctp-mauve); background: var(--ctp-surface1); }
|
||||
.kb-chord.capturing { border-color: var(--ctp-mauve); background: color-mix(in srgb, var(--ctp-mauve) 15%, var(--ctp-surface0)); color: var(--ctp-mauve); animation: pulse-capture 0.8s ease-in-out infinite; outline: none; }
|
||||
@keyframes pulse-capture { 0%, 100% { opacity: 1; } 50% { opacity: 0.65; } }
|
||||
.kb-reset { padding: 0.125rem 0.375rem; background: transparent; border: 1px solid transparent; border-radius: 0.25rem; color: var(--ctp-overlay0); font-family: var(--ui-font-family); font-size: 0.6875rem; cursor: pointer; white-space: nowrap; transition: border-color 0.12s, color 0.12s; }
|
||||
.kb-reset:hover { border-color: var(--ctp-surface1); color: var(--ctp-subtext0); }
|
||||
.kb-reset-placeholder { width: 5rem; }
|
||||
.kb-empty { text-align: center; color: var(--ctp-overlay0); font-size: 0.8125rem; font-style: italic; padding: 2rem 0; }
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -137,17 +137,17 @@
|
|||
<h3 class="sh" style="margin-top: 0.625rem;">Session retention</h3>
|
||||
<div class="slider-row">
|
||||
<span class="lbl">Keep last</span>
|
||||
<input type="range" min="1" max="20" step="1" value={sessionRetentionCount}
|
||||
<input type="range" min="0" max="100" step="1" value={sessionRetentionCount}
|
||||
oninput={e => updateRetention('count', parseInt((e.target as HTMLInputElement).value, 10))}
|
||||
/>
|
||||
<span class="slider-val">{sessionRetentionCount}</span>
|
||||
<span class="slider-val">{sessionRetentionCount === 0 ? '\u221E' : sessionRetentionCount}</span>
|
||||
</div>
|
||||
<div class="slider-row">
|
||||
<span class="lbl">Max age</span>
|
||||
<input type="range" min="1" max="90" step="1" value={sessionRetentionDays}
|
||||
<input type="range" min="0" max="365" step="1" value={sessionRetentionDays}
|
||||
oninput={e => updateRetention('days', parseInt((e.target as HTMLInputElement).value, 10))}
|
||||
/>
|
||||
<span class="slider-val">{sessionRetentionDays}d</span>
|
||||
<span class="slider-val">{sessionRetentionDays === 0 ? 'Forever' : sessionRetentionDays + 'd'}</span>
|
||||
</div>
|
||||
|
||||
<h3 class="sh" style="margin-top: 0.625rem;">Custom context</h3>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue