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

tweak(ui): center titlebar search and soften keybind

Browse Source 
Mount the titlebar search in the center area and tune its sizing/spacing; use regular weight for the keybind pill text.
This commit is contained in:
David Hill
2026-02-17 14:12:32 +00:00
parent 8fcfbd697a
commit ce08442732
3 changed files with 7 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
packages/app/src/components/session/session-header.tsx
View File

@@ -311,23 +311,21 @@ export function SessionHeader() {
platform, platform,
}) })
const leftMount = createMemo( const centerMount = createMemo(() => document.getElementById("opencode-titlebar-center"))
() => document.getElementById("opencode-titlebar-left") ?? document.getElementById("opencode-titlebar-center"),
)
const rightMount = createMemo(() => document.getElementById("opencode-titlebar-right")) const rightMount = createMemo(() => document.getElementById("opencode-titlebar-right"))
return ( return (
<> <>
<Show when={leftMount()}> <Show when={centerMount()}>
{(mount) => ( {(mount) => (
<Portal mount={mount()}> <Portal mount={mount()}>
<button <button
type="button" type="button"
class="hidden md:flex w-[320px] max-w-full min-w-0 h-[24px] px-2 pl-1.5 items-center gap-2 justify-between rounded-md border border-border-base bg-surface-panel transition-colors cursor-default hover:bg-surface-raised-base-hover focus-visible:bg-surface-raised-base-hover active:bg-surface-raised-base-active" class="hidden md:flex w-[240px] max-w-full min-w-0 h-[24px] pl-0.5 pr-2 items-center gap-2 justify-between rounded-md border border-border-weak-base bg-surface-panel transition-colors cursor-default hover:bg-surface-raised-base-hover focus-visible:bg-surface-raised-base-hover active:bg-surface-raised-base-active"
onClick={() => command.trigger("file.open")} onClick={() => command.trigger("file.open")}
aria-label={language.t("session.header.searchFiles")} aria-label={language.t("session.header.searchFiles")}
> >
<div class="flex min-w-0 flex-1 items-center gap-2 overflow-visible"> <div class="flex min-w-0 flex-1 items-center gap-1.5 overflow-visible">
<Icon name="magnifying-glass" size="normal" class="icon-base shrink-0" /> <Icon name="magnifying-glass" size="normal" class="icon-base shrink-0" />
<span class="flex-1 min-w-0 text-12-regular text-text-weak truncate h-4.5 flex items-center"> <span class="flex-1 min-w-0 text-12-regular text-text-weak truncate h-4.5 flex items-center">
{language.t("session.header.search.placeholder", { project: name() })} {language.t("session.header.search.placeholder", { project: name() })}

2
packages/app/src/components/titlebar.tsx
View File

@@ -267,7 +267,7 @@ export function Titlebar() {
<div id="opencode-titlebar-left" class="flex items-center gap-3 min-w-0 px-2" /> <div id="opencode-titlebar-left" class="flex items-center gap-3 min-w-0 px-2" />
</div> </div>
<div class="min-w-0 flex items-center justify-center pointer-events-none lg:absolute lg:inset-0 lg:flex lg:items-center lg:justify-center"> <div class="min-w-0 flex items-center justify-center pointer-events-none">
<div id="opencode-titlebar-center" class="pointer-events-auto w-full min-w-0 flex justify-center lg:w-fit" /> <div id="opencode-titlebar-center" class="pointer-events-auto w-full min-w-0 flex justify-center lg:w-fit" />
</div> </div>

4
packages/ui/src/components/keybind.css
View File

@@ -9,10 +9,10 @@
background: var(--surface-base); background: var(--surface-base);
box-shadow: var(--shadow-xxs-border); box-shadow: var(--shadow-xxs-border);
/* text-12-medium */ /* text-12-regular */
font-family: var(--font-family-sans); font-family: var(--font-family-sans);
font-size: 12px; font-size: 12px;
font-weight: var(--font-weight-medium); font-weight: var(--font-weight-regular);
line-height: 1; line-height: 1;
color: var(--text-weak); color: var(--text-weak);
} }