monadical/opencode
13
0
Fork 0
Code Issues Pull Requests Actions 5 Packages Projects Releases Wiki Activity

update keyboard shortcuts panel to match general settings styling

Browse Source
This commit is contained in:
David Hill
2026-01-20 18:14:25 +00:00
parent dbc15d4816
commit 261b1eca2e
1 changed files with 10 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
packages/app/src/components/settings-keybinds.tsx
View File

@@ -279,7 +279,7 @@ export const SettingsKeybinds: Component = () => {
})
return (
<div class="flex flex-col h-full overflow-y-auto no-scrollbar">
<div class="flex flex-col h-full overflow-y-auto no-scrollbar" style={{ padding: "0 40px 40px 40px" }}>
<div
class="sticky top-0 z-10"
style={{
@@ -287,35 +287,32 @@ export const SettingsKeybinds: Component = () => {
"linear-gradient(to bottom, var(--surface-raised-stronger-non-alpha) calc(100% - 24px), transparent)",
}}
>
<div class="flex items-start justify-between gap-4 p-8 max-w-[720px]">
<div class="flex flex-col gap-1">
<h2 class="text-16-medium text-text-strong">Keyboard shortcuts</h2>
<p class="text-14-regular text-text-weak">Click a shortcut to edit. Press Esc to cancel.</p>
</div>
<div class="flex items-center justify-between gap-4 pt-6 pb-8 max-w-[720px]">
<h2 class="text-16-medium text-text-strong">Keyboard shortcuts</h2>
<Button size="small" variant="secondary" onClick={resetAll} disabled={!hasOverrides()}>
Reset to defaults
</Button>
</div>
</div>
<div class="flex flex-col gap-6 p-8 pt-6 max-w-[720px]">
<div class="flex flex-col gap-8 max-w-[720px]">
<For each={GROUPS}>
{(group) => (
<Show when={(grouped().get(group) ?? []).length > 0}>
<div class="flex flex-col gap-2">
<h3 class="text-14-medium text-text-strong">{group}</h3>
<div class="border border-border-weak-base rounded-lg overflow-hidden">
<div class="flex flex-col gap-1">
<h3 class="text-14-medium text-text-strong pb-2">{group}</h3>
<div class="bg-surface-raised-base px-4 rounded-lg">
<For each={grouped().get(group) ?? []}>
{(id) => (
<div class="flex items-center justify-between gap-4 px-4 py-3 border-b border-border-weak-base last:border-none">
<div class="flex items-center justify-between gap-4 py-3 border-b border-border-weak-base last:border-none">
<span class="text-14-regular text-text-strong">{title(id)}</span>
<button
type="button"
classList={{
"h-8 px-3 rounded-md text-12-regular border border-border-base": true,
"h-8 px-3 rounded-md text-12-regular": true,
"bg-surface-base text-text-subtle hover:bg-surface-raised-base-hover active:bg-surface-raised-base-active":
active() !== id,
"bg-surface-raised-stronger-non-alpha text-text-strong": active() === id,
"border border-border-weak-base bg-surface-inset-base text-text-weak": active() === id,
}}
onClick={() => start(id)}
>