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

feat(app): better sidebar hover when collapsed

Browse Source
This commit is contained in:
adamelmore
2026-01-26 09:25:10 -06:00
parent 7016be0739
commit cd4676171b
1 changed files with 25 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
packages/app/src/pages/layout.tsx
View File

@@ -138,6 +138,12 @@ export default function Layout(props: ParentProps) {
const [hoverProject, setHoverProject] = createSignal<string | undefined>() const [hoverProject, setHoverProject] = createSignal<string | undefined>()
const [nav, setNav] = createSignal<HTMLElement | undefined>(undefined) const [nav, setNav] = createSignal<HTMLElement | undefined>(undefined)
const navLeave = { current: undefined as number | undefined }
onCleanup(() => {
if (navLeave.current === undefined) return
clearTimeout(navLeave.current)
})
const sidebarHovering = createMemo(() => !layout.sidebar.opened() && hoverProject() !== undefined) const sidebarHovering = createMemo(() => !layout.sidebar.opened() && hoverProject() !== undefined)
const sidebarExpanded = createMemo(() => layout.sidebar.opened() || sidebarHovering()) const sidebarExpanded = createMemo(() => layout.sidebar.opened() || sidebarHovering())
@@ -1702,9 +1708,10 @@ export default function Layout(props: ParentProps) {
> >
<HoverCard <HoverCard
openDelay={1000} openDelay={1000}
closeDelay={sidebarHovering() ? 300 : 0} closeDelay={sidebarHovering() ? 600 : 0}
placement="right" placement="right-start"
gutter={28} gutter={16}
shift={-2}
trigger={item} trigger={item}
mount={!props.mobile ? nav() : undefined} mount={!props.mobile ? nav() : undefined}
open={hoverSession() === props.session.id} open={hoverSession() === props.session.id}
@@ -2067,7 +2074,7 @@ export default function Layout(props: ParentProps) {
size="large" size="large"
onClick={(e: MouseEvent) => { onClick={(e: MouseEvent) => {
loadMore() loadMore()
;(e.currentTarget as HTMLButtonElement).blur() ; (e.currentTarget as HTMLButtonElement).blur()
}} }}
> >
{language.t("common.loadMore")} {language.t("common.loadMore")}
@@ -2302,7 +2309,7 @@ export default function Layout(props: ParentProps) {
size="large" size="large"
onClick={(e: MouseEvent) => { onClick={(e: MouseEvent) => {
loadMore() loadMore()
;(e.currentTarget as HTMLButtonElement).blur() ; (e.currentTarget as HTMLButtonElement).blur()
}} }}
> >
{language.t("common.loadMore")} {language.t("common.loadMore")}
@@ -2663,9 +2670,20 @@ export default function Layout(props: ParentProps) {
ref={(el) => { ref={(el) => {
setNav(el) setNav(el)
}} }}
onMouseEnter={() => {
if (navLeave.current === undefined) return
clearTimeout(navLeave.current)
navLeave.current = undefined
}}
onMouseLeave={() => { onMouseLeave={() => {
setHoverSession(undefined) if (!sidebarHovering()) return
setHoverProject(undefined)
if (navLeave.current !== undefined) clearTimeout(navLeave.current)
navLeave.current = window.setTimeout(() => {
navLeave.current = undefined
setHoverProject(undefined)
setHoverSession(undefined)
}, 300)
}} }}
> >
<div class="@container w-full h-full contain-strict"> <div class="@container w-full h-full contain-strict">