chore: generate
This commit is contained in:
@@ -185,151 +185,151 @@ export function Titlebar() {
|
|||||||
class="grid h-full min-h-full w-full grid-cols-[minmax(0,1fr)_auto_minmax(0,1fr)] items-center"
|
class="grid h-full min-h-full w-full grid-cols-[minmax(0,1fr)_auto_minmax(0,1fr)] items-center"
|
||||||
style={{ zoom: counterZoom() }}
|
style={{ zoom: counterZoom() }}
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
classList={{
|
classList={{
|
||||||
"flex items-center min-w-0": true,
|
"flex items-center min-w-0": true,
|
||||||
"pl-2": !mac(),
|
"pl-2": !mac(),
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<Show when={mac()}>
|
<Show when={mac()}>
|
||||||
<div class="h-full shrink-0" style={{ width: `${72 / zoom()}px` }} />
|
<div class="h-full shrink-0" style={{ width: `${72 / zoom()}px` }} />
|
||||||
<div class="xl:hidden w-10 shrink-0 flex items-center justify-center">
|
<div class="xl:hidden w-10 shrink-0 flex items-center justify-center">
|
||||||
<IconButton
|
<IconButton
|
||||||
icon="menu"
|
icon="menu"
|
||||||
variant="ghost"
|
variant="ghost"
|
||||||
class="titlebar-icon rounded-md"
|
class="titlebar-icon rounded-md"
|
||||||
onClick={layout.mobileSidebar.toggle}
|
onClick={layout.mobileSidebar.toggle}
|
||||||
aria-label={language.t("sidebar.menu.toggle")}
|
aria-label={language.t("sidebar.menu.toggle")}
|
||||||
aria-expanded={layout.mobileSidebar.opened()}
|
aria-expanded={layout.mobileSidebar.opened()}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</Show>
|
</Show>
|
||||||
<Show when={!mac()}>
|
<Show when={!mac()}>
|
||||||
<div class="xl:hidden w-[48px] shrink-0 flex items-center justify-center">
|
<div class="xl:hidden w-[48px] shrink-0 flex items-center justify-center">
|
||||||
<IconButton
|
<IconButton
|
||||||
icon="menu"
|
icon="menu"
|
||||||
variant="ghost"
|
variant="ghost"
|
||||||
class="titlebar-icon rounded-md"
|
class="titlebar-icon rounded-md"
|
||||||
onClick={layout.mobileSidebar.toggle}
|
onClick={layout.mobileSidebar.toggle}
|
||||||
aria-label={language.t("sidebar.menu.toggle")}
|
aria-label={language.t("sidebar.menu.toggle")}
|
||||||
aria-expanded={layout.mobileSidebar.opened()}
|
aria-expanded={layout.mobileSidebar.opened()}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</Show>
|
</Show>
|
||||||
<div class="flex items-center gap-1 shrink-0">
|
<div class="flex items-center gap-1 shrink-0">
|
||||||
<TooltipKeybind
|
<TooltipKeybind
|
||||||
class={web() ? "hidden xl:flex shrink-0 ml-14" : "hidden xl:flex shrink-0 ml-2"}
|
class={web() ? "hidden xl:flex shrink-0 ml-14" : "hidden xl:flex shrink-0 ml-2"}
|
||||||
placement="bottom"
|
placement="bottom"
|
||||||
title={language.t("command.sidebar.toggle")}
|
title={language.t("command.sidebar.toggle")}
|
||||||
keybind={command.keybind("sidebar.toggle")}
|
keybind={command.keybind("sidebar.toggle")}
|
||||||
>
|
|
||||||
<Button
|
|
||||||
variant="ghost"
|
|
||||||
class="group/sidebar-toggle titlebar-icon w-8 h-6 p-0 box-border"
|
|
||||||
onClick={layout.sidebar.toggle}
|
|
||||||
aria-label={language.t("command.sidebar.toggle")}
|
|
||||||
aria-expanded={layout.sidebar.opened()}
|
|
||||||
>
|
>
|
||||||
<Icon size="small" name={layout.sidebar.opened() ? "sidebar-active" : "sidebar"} />
|
<Button
|
||||||
</Button>
|
variant="ghost"
|
||||||
</TooltipKeybind>
|
class="group/sidebar-toggle titlebar-icon w-8 h-6 p-0 box-border"
|
||||||
<div class="hidden xl:flex items-center shrink-0">
|
onClick={layout.sidebar.toggle}
|
||||||
<Show when={params.dir}>
|
aria-label={language.t("command.sidebar.toggle")}
|
||||||
<div
|
aria-expanded={layout.sidebar.opened()}
|
||||||
class="flex items-center shrink-0 w-8 mr-1"
|
|
||||||
aria-hidden={layout.sidebar.opened() ? "true" : undefined}
|
|
||||||
>
|
>
|
||||||
|
<Icon size="small" name={layout.sidebar.opened() ? "sidebar-active" : "sidebar"} />
|
||||||
|
</Button>
|
||||||
|
</TooltipKeybind>
|
||||||
|
<div class="hidden xl:flex items-center shrink-0">
|
||||||
|
<Show when={params.dir}>
|
||||||
<div
|
<div
|
||||||
class="transition-opacity"
|
class="flex items-center shrink-0 w-8 mr-1"
|
||||||
classList={{
|
aria-hidden={layout.sidebar.opened() ? "true" : undefined}
|
||||||
"opacity-100 duration-120 ease-out": !layout.sidebar.opened(),
|
|
||||||
"opacity-0 duration-120 ease-in delay-0 pointer-events-none": layout.sidebar.opened(),
|
|
||||||
}}
|
|
||||||
>
|
>
|
||||||
<TooltipKeybind
|
<div
|
||||||
placement="bottom"
|
class="transition-opacity"
|
||||||
title={language.t("command.session.new")}
|
classList={{
|
||||||
keybind={command.keybind("session.new")}
|
"opacity-100 duration-120 ease-out": !layout.sidebar.opened(),
|
||||||
openDelay={2000}
|
"opacity-0 duration-120 ease-in delay-0 pointer-events-none": layout.sidebar.opened(),
|
||||||
|
}}
|
||||||
>
|
>
|
||||||
<Button
|
<TooltipKeybind
|
||||||
variant="ghost"
|
placement="bottom"
|
||||||
icon={creating() ? "new-session-active" : "new-session"}
|
title={language.t("command.session.new")}
|
||||||
class="titlebar-icon w-8 h-6 p-0 box-border"
|
keybind={command.keybind("session.new")}
|
||||||
disabled={layout.sidebar.opened()}
|
openDelay={2000}
|
||||||
tabIndex={layout.sidebar.opened() ? -1 : undefined}
|
>
|
||||||
onClick={() => {
|
<Button
|
||||||
if (!params.dir) return
|
variant="ghost"
|
||||||
navigate(`/${params.dir}/session`)
|
icon={creating() ? "new-session-active" : "new-session"}
|
||||||
}}
|
class="titlebar-icon w-8 h-6 p-0 box-border"
|
||||||
aria-label={language.t("command.session.new")}
|
disabled={layout.sidebar.opened()}
|
||||||
aria-current={creating() ? "page" : undefined}
|
tabIndex={layout.sidebar.opened() ? -1 : undefined}
|
||||||
/>
|
onClick={() => {
|
||||||
</TooltipKeybind>
|
if (!params.dir) return
|
||||||
</div>
|
navigate(`/${params.dir}/session`)
|
||||||
</div>
|
}}
|
||||||
</Show>
|
aria-label={language.t("command.session.new")}
|
||||||
<div
|
aria-current={creating() ? "page" : undefined}
|
||||||
class="flex items-center shrink-0"
|
/>
|
||||||
classList={{
|
</TooltipKeybind>
|
||||||
"-translate-x-[36px]": layout.sidebar.opened() && !!params.dir,
|
</div>
|
||||||
"duration-180 ease-out": !layout.sidebar.opened(),
|
|
||||||
"duration-180 ease-in": layout.sidebar.opened(),
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Show when={hasProjects() && nav()}>
|
|
||||||
<div class="flex items-center gap-0 transition-transform">
|
|
||||||
<Tooltip placement="bottom" value={language.t("common.goBack")} openDelay={2000}>
|
|
||||||
<Button
|
|
||||||
variant="ghost"
|
|
||||||
icon="chevron-left"
|
|
||||||
class="titlebar-icon w-6 h-6 p-0 box-border"
|
|
||||||
disabled={!canBack()}
|
|
||||||
onClick={back}
|
|
||||||
aria-label={language.t("common.goBack")}
|
|
||||||
/>
|
|
||||||
</Tooltip>
|
|
||||||
<Tooltip placement="bottom" value={language.t("common.goForward")} openDelay={2000}>
|
|
||||||
<Button
|
|
||||||
variant="ghost"
|
|
||||||
icon="chevron-right"
|
|
||||||
class="titlebar-icon w-6 h-6 p-0 box-border"
|
|
||||||
disabled={!canForward()}
|
|
||||||
onClick={forward}
|
|
||||||
aria-label={language.t("common.goForward")}
|
|
||||||
/>
|
|
||||||
</Tooltip>
|
|
||||||
</div>
|
</div>
|
||||||
</Show>
|
</Show>
|
||||||
<div id="opencode-titlebar-left" class="flex items-center gap-3 min-w-0 px-2" />
|
<div
|
||||||
{["beta", "dev"].includes(import.meta.env.VITE_OPENCODE_CHANNEL) && (
|
class="flex items-center shrink-0"
|
||||||
<div class="bg-icon-interactive-base text-[#FFF] font-medium px-2 rounded-sm uppercase font-mono">
|
classList={{
|
||||||
{import.meta.env.VITE_OPENCODE_CHANNEL.toUpperCase()}
|
"-translate-x-[36px]": layout.sidebar.opened() && !!params.dir,
|
||||||
</div>
|
"duration-180 ease-out": !layout.sidebar.opened(),
|
||||||
)}
|
"duration-180 ease-in": layout.sidebar.opened(),
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Show when={hasProjects() && nav()}>
|
||||||
|
<div class="flex items-center gap-0 transition-transform">
|
||||||
|
<Tooltip placement="bottom" value={language.t("common.goBack")} openDelay={2000}>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
icon="chevron-left"
|
||||||
|
class="titlebar-icon w-6 h-6 p-0 box-border"
|
||||||
|
disabled={!canBack()}
|
||||||
|
onClick={back}
|
||||||
|
aria-label={language.t("common.goBack")}
|
||||||
|
/>
|
||||||
|
</Tooltip>
|
||||||
|
<Tooltip placement="bottom" value={language.t("common.goForward")} openDelay={2000}>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
icon="chevron-right"
|
||||||
|
class="titlebar-icon w-6 h-6 p-0 box-border"
|
||||||
|
disabled={!canForward()}
|
||||||
|
onClick={forward}
|
||||||
|
aria-label={language.t("common.goForward")}
|
||||||
|
/>
|
||||||
|
</Tooltip>
|
||||||
|
</div>
|
||||||
|
</Show>
|
||||||
|
<div id="opencode-titlebar-left" class="flex items-center gap-3 min-w-0 px-2" />
|
||||||
|
{["beta", "dev"].includes(import.meta.env.VITE_OPENCODE_CHANNEL) && (
|
||||||
|
<div class="bg-icon-interactive-base text-[#FFF] font-medium px-2 rounded-sm uppercase font-mono">
|
||||||
|
{import.meta.env.VITE_OPENCODE_CHANNEL.toUpperCase()}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="min-w-0 flex items-center justify-center pointer-events-none">
|
<div class="min-w-0 flex items-center justify-center pointer-events-none">
|
||||||
<div id="opencode-titlebar-center" class="pointer-events-auto min-w-0 flex justify-center w-fit max-w-full" />
|
<div id="opencode-titlebar-center" class="pointer-events-auto min-w-0 flex justify-center w-fit max-w-full" />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div
|
<div
|
||||||
classList={{
|
classList={{
|
||||||
"flex items-center min-w-0 justify-end": true,
|
"flex items-center min-w-0 justify-end": true,
|
||||||
"pr-2": !windows(),
|
"pr-2": !windows(),
|
||||||
}}
|
}}
|
||||||
data-tauri-drag-region
|
data-tauri-drag-region
|
||||||
onMouseDown={drag}
|
onMouseDown={drag}
|
||||||
>
|
>
|
||||||
<div id="opencode-titlebar-right" class="flex items-center gap-1 shrink-0 justify-end" />
|
<div id="opencode-titlebar-right" class="flex items-center gap-1 shrink-0 justify-end" />
|
||||||
<Show when={windows()}>
|
<Show when={windows()}>
|
||||||
{!tauriApi() && <div class="shrink-0" style={{ width: windowsControlsWidth() }} />}
|
{!tauriApi() && <div class="shrink-0" style={{ width: windowsControlsWidth() }} />}
|
||||||
<div data-tauri-decorum-tb class="flex flex-row" />
|
<div data-tauri-decorum-tb class="flex flex-row" />
|
||||||
</Show>
|
</Show>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
)
|
)
|
||||||
|
|||||||
@@ -21,13 +21,16 @@ const clamp = (value: number) => Math.min(Math.max(value, MIN_ZOOM_LEVEL), MAX_Z
|
|||||||
|
|
||||||
const applyZoom = (next: number) => {
|
const applyZoom = (next: number) => {
|
||||||
requestedZoom = next
|
requestedZoom = next
|
||||||
void window.api.setZoomFactor(next).then(() => {
|
void window.api
|
||||||
if (requestedZoom !== next) return
|
.setZoomFactor(next)
|
||||||
setWebviewZoom(next)
|
.then(() => {
|
||||||
}).catch(() => {
|
if (requestedZoom !== next) return
|
||||||
if (requestedZoom !== next) return
|
setWebviewZoom(next)
|
||||||
requestedZoom = webviewZoom()
|
})
|
||||||
})
|
.catch(() => {
|
||||||
|
if (requestedZoom !== next) return
|
||||||
|
requestedZoom = webviewZoom()
|
||||||
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
window.addEventListener("keydown", (event) => {
|
window.addEventListener("keydown", (event) => {
|
||||||
|
|||||||
Reference in New Issue
Block a user