From 18d77efed55ec93f7b80ea3de3cecc9c24844b5a Mon Sep 17 00:00:00 2001 From: Aarav Sareen <96787824+arvsrn@users.noreply.github.com> Date: Sat, 27 Jun 2026 16:46:20 +0530 Subject: [PATCH 1/6] sticky session list header --- packages/app/src/index.css | 39 ++++++++++++++ packages/app/src/pages/home.tsx | 92 +++++++++++++++++++++++++++++---- 2 files changed, 122 insertions(+), 9 deletions(-) diff --git a/packages/app/src/index.css b/packages/app/src/index.css index a99034f5da9c..bec8b6c93f6b 100644 --- a/packages/app/src/index.css +++ b/packages/app/src/index.css @@ -108,6 +108,45 @@ } } + .home-session-header-new::before { + content: ""; + position: absolute; + top: -12px; + left: 0; + width: 100%; + height: 12px; + background: var(--v2-background-bg-base); + } + + .home-session-header-new::after { + content: ""; + position: absolute; + top: 100%; + left: 0; + width: 100%; + height: 12px; + pointer-events: none; + background: linear-gradient( + 180deg, + var(--v2-background-bg-base) 0%, + color-mix(in srgb, var(--v2-background-bg-base) 96.4148%, transparent) 16.11%, + color-mix(in srgb, var(--v2-background-bg-base) 91.509%, transparent) 30.26%, + color-mix(in srgb, var(--v2-background-bg-base) 85.4857%, transparent) 42.58%, + color-mix(in srgb, var(--v2-background-bg-base) 78.5481%, transparent) 53.21%, + color-mix(in srgb, var(--v2-background-bg-base) 70.8995%, transparent) 62.31%, + color-mix(in srgb, var(--v2-background-bg-base) 62.7429%, transparent) 70.01%, + color-mix(in srgb, var(--v2-background-bg-base) 54.2815%, transparent) 76.46%, + color-mix(in srgb, var(--v2-background-bg-base) 45.7185%, transparent) 81.8%, + color-mix(in srgb, var(--v2-background-bg-base) 37.2571%, transparent) 86.16%, + color-mix(in srgb, var(--v2-background-bg-base) 29.1005%, transparent) 89.7%, + color-mix(in srgb, var(--v2-background-bg-base) 21.4519%, transparent) 92.56%, + color-mix(in srgb, var(--v2-background-bg-base) 14.5143%, transparent) 94.87%, + color-mix(in srgb, var(--v2-background-bg-base) 8.49101%, transparent) 96.79%, + color-mix(in srgb, var(--v2-background-bg-base) 3.58519%, transparent) 98.45%, + transparent 100% + ); + } + [data-slot="titlebar-update-loader"] { display: block; flex-shrink: 0; diff --git a/packages/app/src/pages/home.tsx b/packages/app/src/pages/home.tsx index 7a8a33db8460..b6f1e00b549d 100644 --- a/packages/app/src/pages/home.tsx +++ b/packages/app/src/pages/home.tsx @@ -68,6 +68,8 @@ import { archiveHomeSession } from "./home-session-archive" import { showToast } from "@/utils/toast" const HOME_SESSION_LIMIT = 64 +const HOME_SESSION_HEADER_STICKY_TOP = 12 +const HOME_SESSION_HEADER_FADE_DISTANCE = 48 const SHOW_HOME_SESSION_ARCHIVE = false const HOME_ROW_LAYOUT = "flex min-w-0 w-full shrink-0 cursor-default items-center rounded-[6px] bg-transparent text-left transition-[background-color,color,box-shadow] duration-[120ms] ease-in-out focus-visible:outline-none" @@ -149,9 +151,13 @@ export function NewHome() { const marked = useMarked() const openSettings = useSettingsCommand() let focusSessionSearch: (() => void) | undefined + let sessionListViewport: HTMLDivElement | undefined + let headerOpacityFrame: number | undefined + const sessionHeaderRefs = new Map() const [state, setState] = createStore({ search: "", searchFocused: false, + headerTitleOpacity: {} as Partial>, }) const selection = layout.home.selection @@ -225,6 +231,18 @@ export function NewHome() { const groups = createMemo(() => groupSessions(records(), language)) const prefetched = new Set() + createEffect(() => { + const ids = new Set(groups().map((group) => group.id)) + sessionHeaderRefs.forEach((_, id) => { + if (!ids.has(id)) sessionHeaderRefs.delete(id) + }) + queueHeaderTitleOpacityUpdate() + }) + + onCleanup(() => { + if (headerOpacityFrame !== undefined) cancelAnimationFrame(headerOpacityFrame) + }) + createEffect(() => { const ctx = focusedServerCtx() if (!ctx) return @@ -267,6 +285,41 @@ export function NewHome() { setState("searchFocused", false) } + function setSessionHeaderRef(id: HomeSessionGroup["id"], el: HTMLDivElement) { + sessionHeaderRefs.set(id, el) + queueHeaderTitleOpacityUpdate() + } + + function queueHeaderTitleOpacityUpdate() { + if (typeof requestAnimationFrame === "undefined" || headerOpacityFrame !== undefined) return + headerOpacityFrame = requestAnimationFrame(() => { + headerOpacityFrame = undefined + updateHeaderTitleOpacity() + }) + } + + function updateHeaderTitleOpacity() { + if (!sessionListViewport) return + const viewportTop = sessionListViewport.getBoundingClientRect().top + const headerTops = groups().map((group) => { + const el = sessionHeaderRefs.get(group.id) + if (!el) return + return el.getBoundingClientRect().top - viewportTop + }) + + groups().forEach((group, index) => { + const nextTop = headerTops.slice(index + 1).find((top) => top !== undefined) + const opacity = + nextTop === undefined + ? 1 + : Math.max( + 0, + Math.min(1, (nextTop - HOME_SESSION_HEADER_STICKY_TOP) / HOME_SESSION_HEADER_FADE_DISTANCE), + ) + setState("headerTitleOpacity", group.id, Math.round(opacity * 1000) / 1000) + }) + } + function selectSearchSession(session: Session) { openSession(session) closeSearch() @@ -455,7 +508,14 @@ export function NewHome() { onClose={closeSearch} onSelect={selectSearchSession} /> - + { + sessionListViewport = el + queueHeaderTitleOpacityUpdate() + }} + onScroll={queueHeaderTitleOpacityUpdate} + > 0} fallback={} > -
+
{(group, index) => ( -
+ <> setSessionHeaderRef(group.id, el)} onNewSession={index() === 0 && newSessionProject() ? openNewSession : undefined} /> -
+
{(record) => (
-
+ )}
@@ -1130,11 +1194,21 @@ function HomeSessionSearchResultRow(props: { ) } -function HomeSessionGroupHeader(props: { title: string; onNewSession?: () => void }) { +function HomeSessionGroupHeader(props: { + title: string + titleOpacity: number + headerRef: (el: HTMLDivElement) => void + onNewSession?: () => void +}) { const language = useLanguage() return ( -
-
{props.title}
+
+
+ {props.title} +
{(onNewSession) => ( voi variant="ghost-muted" size="normal" icon="edit" - class="h-7 px-2 [font-weight:530]" + class="relative z-20 h-7 px-2 [font-weight:530]" onClick={onNewSession()} > {language.t("command.session.new")} From d0ca85b63c56f7ea6e48435699ea6420db3a709d Mon Sep 17 00:00:00 2001 From: Aarav Sareen <96787824+arvsrn@users.noreply.github.com> Date: Sat, 27 Jun 2026 17:01:07 +0530 Subject: [PATCH 2/6] adjusted fade animation --- packages/app/src/pages/home.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/app/src/pages/home.tsx b/packages/app/src/pages/home.tsx index b6f1e00b549d..2d8d81bf44fd 100644 --- a/packages/app/src/pages/home.tsx +++ b/packages/app/src/pages/home.tsx @@ -69,7 +69,8 @@ import { showToast } from "@/utils/toast" const HOME_SESSION_LIMIT = 64 const HOME_SESSION_HEADER_STICKY_TOP = 12 -const HOME_SESSION_HEADER_FADE_DISTANCE = 48 +const HOME_SESSION_HEADER_TEXT_HEIGHT = 16 +const HOME_SESSION_HEADER_FADE_DISTANCE = 16 const SHOW_HOME_SESSION_ARCHIVE = false const HOME_ROW_LAYOUT = "flex min-w-0 w-full shrink-0 cursor-default items-center rounded-[6px] bg-transparent text-left transition-[background-color,color,box-shadow] duration-[120ms] ease-in-out focus-visible:outline-none" @@ -309,12 +310,13 @@ export function NewHome() { groups().forEach((group, index) => { const nextTop = headerTops.slice(index + 1).find((top) => top !== undefined) + const fadeEnd = HOME_SESSION_HEADER_STICKY_TOP + HOME_SESSION_HEADER_TEXT_HEIGHT const opacity = nextTop === undefined ? 1 : Math.max( 0, - Math.min(1, (nextTop - HOME_SESSION_HEADER_STICKY_TOP) / HOME_SESSION_HEADER_FADE_DISTANCE), + Math.min(1, (nextTop - fadeEnd) / HOME_SESSION_HEADER_FADE_DISTANCE), ) setState("headerTitleOpacity", group.id, Math.round(opacity * 1000) / 1000) }) From ef830571837e7668f4d7c223e70afc631ceafd82 Mon Sep 17 00:00:00 2001 From: Aarav Sareen <96787824+arvsrn@users.noreply.github.com> Date: Sat, 27 Jun 2026 17:07:41 +0530 Subject: [PATCH 3/6] cleanup --- packages/app/src/pages/home.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/app/src/pages/home.tsx b/packages/app/src/pages/home.tsx index 2d8d81bf44fd..1432562b1017 100644 --- a/packages/app/src/pages/home.tsx +++ b/packages/app/src/pages/home.tsx @@ -1206,7 +1206,7 @@ function HomeSessionGroupHeader(props: { return (
{props.title} From d6323c1a40323fd1a8ddeea9d6b4c880ff915dcf Mon Sep 17 00:00:00 2001 From: Aarav Sareen <96787824+arvsrn@users.noreply.github.com> Date: Sat, 27 Jun 2026 17:37:11 +0530 Subject: [PATCH 4/6] adjusted gradient --- packages/app/src/index.css | 30 +++++++++++++++--------------- 1 file changed, 15 insertions(+), 15 deletions(-) diff --git a/packages/app/src/index.css b/packages/app/src/index.css index bec8b6c93f6b..00d042845c6c 100644 --- a/packages/app/src/index.css +++ b/packages/app/src/index.css @@ -124,25 +124,25 @@ top: 100%; left: 0; width: 100%; - height: 12px; + height: 16px; pointer-events: none; background: linear-gradient( 180deg, var(--v2-background-bg-base) 0%, - color-mix(in srgb, var(--v2-background-bg-base) 96.4148%, transparent) 16.11%, - color-mix(in srgb, var(--v2-background-bg-base) 91.509%, transparent) 30.26%, - color-mix(in srgb, var(--v2-background-bg-base) 85.4857%, transparent) 42.58%, - color-mix(in srgb, var(--v2-background-bg-base) 78.5481%, transparent) 53.21%, - color-mix(in srgb, var(--v2-background-bg-base) 70.8995%, transparent) 62.31%, - color-mix(in srgb, var(--v2-background-bg-base) 62.7429%, transparent) 70.01%, - color-mix(in srgb, var(--v2-background-bg-base) 54.2815%, transparent) 76.46%, - color-mix(in srgb, var(--v2-background-bg-base) 45.7185%, transparent) 81.8%, - color-mix(in srgb, var(--v2-background-bg-base) 37.2571%, transparent) 86.16%, - color-mix(in srgb, var(--v2-background-bg-base) 29.1005%, transparent) 89.7%, - color-mix(in srgb, var(--v2-background-bg-base) 21.4519%, transparent) 92.56%, - color-mix(in srgb, var(--v2-background-bg-base) 14.5143%, transparent) 94.87%, - color-mix(in srgb, var(--v2-background-bg-base) 8.49101%, transparent) 96.79%, - color-mix(in srgb, var(--v2-background-bg-base) 3.58519%, transparent) 98.45%, + color-mix(in srgb, var(--v2-background-bg-base) 92.0456%, transparent) 7.93%, + color-mix(in srgb, var(--v2-background-bg-base) 84.9947%, transparent) 14.14%, + color-mix(in srgb, var(--v2-background-bg-base) 78.6813%, transparent) 19%, + color-mix(in srgb, var(--v2-background-bg-base) 72.9394%, transparent) 22.85%, + color-mix(in srgb, var(--v2-background-bg-base) 67.6028%, transparent) 26.05%, + color-mix(in srgb, var(--v2-background-bg-base) 62.5055%, transparent) 28.95%, + color-mix(in srgb, var(--v2-background-bg-base) 57.4815%, transparent) 31.91%, + color-mix(in srgb, var(--v2-background-bg-base) 52.3647%, transparent) 35.27%, + color-mix(in srgb, var(--v2-background-bg-base) 46.989%, transparent) 39.4%, + color-mix(in srgb, var(--v2-background-bg-base) 41.1884%, transparent) 44.65%, + color-mix(in srgb, var(--v2-background-bg-base) 34.7969%, transparent) 51.36%, + color-mix(in srgb, var(--v2-background-bg-base) 27.6484%, transparent) 59.9%, + color-mix(in srgb, var(--v2-background-bg-base) 19.5767%, transparent) 70.62%, + color-mix(in srgb, var(--v2-background-bg-base) 10.416%, transparent) 83.87%, transparent 100% ); } From fa4b594b26d41dd1750cb5631c8971a0122fd94d Mon Sep 17 00:00:00 2001 From: Aarav Sareen <96787824+arvsrn@users.noreply.github.com> Date: Mon, 29 Jun 2026 11:17:01 +0530 Subject: [PATCH 5/6] fix bug --- packages/app/src/pages/home.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/app/src/pages/home.tsx b/packages/app/src/pages/home.tsx index 24c1de940be9..31e2f1d25f76 100644 --- a/packages/app/src/pages/home.tsx +++ b/packages/app/src/pages/home.tsx @@ -1023,7 +1023,7 @@ function HomeSessionSearch(props: { return (
-
+
Date: Mon, 29 Jun 2026 17:19:13 +0800 Subject: [PATCH 6/6] refactor --- packages/app/src/index.css | 4 +- packages/app/src/pages/home.tsx | 211 +++++++++++++++++++------------- 2 files changed, 131 insertions(+), 84 deletions(-) diff --git a/packages/app/src/index.css b/packages/app/src/index.css index 00d042845c6c..7b8435c04e3d 100644 --- a/packages/app/src/index.css +++ b/packages/app/src/index.css @@ -108,7 +108,7 @@ } } - .home-session-header-new::before { + .home-session-group-header::before { content: ""; position: absolute; top: -12px; @@ -118,7 +118,7 @@ background: var(--v2-background-bg-base); } - .home-session-header-new::after { + .home-session-group-header::after { content: ""; position: absolute; top: 100%; diff --git a/packages/app/src/pages/home.tsx b/packages/app/src/pages/home.tsx index 31e2f1d25f76..eae7e0145f56 100644 --- a/packages/app/src/pages/home.tsx +++ b/packages/app/src/pages/home.tsx @@ -1,5 +1,6 @@ import type { Session } from "@opencode-ai/sdk/v2/client" import { + type ComponentProps, createEffect, createMemo, createResource, @@ -136,6 +137,107 @@ function homeSessionSearchKey(record: HomeSessionRecord) { return `${pathKey(record.session.directory)}:${record.session.id}` } +function useHomeSessionHeaderOpacity(groups: () => HomeSessionGroup[]) { + let viewport: HTMLDivElement | undefined + let content: HTMLDivElement | undefined + let positionFrame: number | undefined + let resizeObserver: ResizeObserver | undefined + const headerRefs = new Map() + const headerOffsets = new Map() + const [state, setState] = createStore({ + titleOpacity: {} as Partial>, + }) + + createEffect(() => { + const items = groups() + const ids = new Set(items.map((group) => group.id)) + headerRefs.forEach((_, id) => { + if (!ids.has(id)) headerRefs.delete(id) + }) + headerOffsets.forEach((_, id) => { + if (!ids.has(id)) headerOffsets.delete(id) + }) + if (items.length === 0) { + content = undefined + bindResizeObserver() + } + queuePositionUpdate() + }) + + onCleanup(() => { + if (positionFrame !== undefined) cancelAnimationFrame(positionFrame) + resizeObserver?.disconnect() + }) + + function setViewport(el: HTMLDivElement) { + viewport = el + bindResizeObserver() + queuePositionUpdate() + } + + function setContentRef(el: HTMLDivElement) { + content = el + bindResizeObserver() + queuePositionUpdate() + } + + function setHeaderRef(id: HomeSessionGroup["id"], el: HTMLDivElement) { + headerRefs.set(id, el) + queuePositionUpdate() + } + + function queuePositionUpdate() { + if (typeof requestAnimationFrame === "undefined") { + updatePositionCache() + return + } + if (positionFrame !== undefined) return + positionFrame = requestAnimationFrame(() => { + positionFrame = undefined + updatePositionCache() + }) + } + + function updatePositionCache() { + if (!viewport) return + groups().forEach((group) => { + const el = headerRefs.get(group.id) + if (!el) return + headerOffsets.set(group.id, el.offsetTop) + }) + update(viewport.scrollTop) + } + + function update(scrollTop: number) { + const items = groups() + items.forEach((group, index) => { + const nextOffset = items + .slice(index + 1) + .map((item) => headerOffsets.get(item.id)) + .find((offset) => offset !== undefined) + const fadeEnd = HOME_SESSION_HEADER_STICKY_TOP + HOME_SESSION_HEADER_TEXT_HEIGHT + const nextTop = nextOffset === undefined ? undefined : nextOffset - scrollTop + const opacity = + nextTop === undefined ? 1 : Math.max(0, Math.min(1, (nextTop - fadeEnd) / HOME_SESSION_HEADER_FADE_DISTANCE)) + setState("titleOpacity", group.id, Math.round(opacity * 1000) / 1000) + }) + } + + function titleOpacity(id: HomeSessionGroup["id"]) { + return state.titleOpacity[id] ?? 1 + } + + function bindResizeObserver() { + resizeObserver?.disconnect() + if (typeof ResizeObserver === "undefined") return + resizeObserver = new ResizeObserver(() => queuePositionUpdate()) + if (viewport) resizeObserver.observe(viewport) + if (content) resizeObserver.observe(content) + } + + return { setViewport, setContentRef, setHeaderRef, update, titleOpacity } +} + export function NewHome() { const sync = useServerSync() const layout = useLayout() @@ -152,13 +254,9 @@ export function NewHome() { const marked = useMarked() const openSettings = useSettingsCommand() let focusSessionSearch: (() => void) | undefined - let sessionListViewport: HTMLDivElement | undefined - let headerOpacityFrame: number | undefined - const sessionHeaderRefs = new Map() const [state, setState] = createStore({ search: "", searchFocused: false, - headerTitleOpacity: {} as Partial>, }) const selection = layout.home.selection @@ -230,20 +328,9 @@ export function NewHome() { }) const searchOpen = createMemo(() => state.searchFocused && search().length > 0) const groups = createMemo(() => groupSessions(records(), language)) + const sessionHeaderOpacity = useHomeSessionHeaderOpacity(groups) const prefetched = new Set() - createEffect(() => { - const ids = new Set(groups().map((group) => group.id)) - sessionHeaderRefs.forEach((_, id) => { - if (!ids.has(id)) sessionHeaderRefs.delete(id) - }) - queueHeaderTitleOpacityUpdate() - }) - - onCleanup(() => { - if (headerOpacityFrame !== undefined) cancelAnimationFrame(headerOpacityFrame) - }) - createEffect(() => { const ctx = focusedServerCtx() if (!ctx) return @@ -286,42 +373,6 @@ export function NewHome() { setState("searchFocused", false) } - function setSessionHeaderRef(id: HomeSessionGroup["id"], el: HTMLDivElement) { - sessionHeaderRefs.set(id, el) - queueHeaderTitleOpacityUpdate() - } - - function queueHeaderTitleOpacityUpdate() { - if (typeof requestAnimationFrame === "undefined" || headerOpacityFrame !== undefined) return - headerOpacityFrame = requestAnimationFrame(() => { - headerOpacityFrame = undefined - updateHeaderTitleOpacity() - }) - } - - function updateHeaderTitleOpacity() { - if (!sessionListViewport) return - const viewportTop = sessionListViewport.getBoundingClientRect().top - const headerTops = groups().map((group) => { - const el = sessionHeaderRefs.get(group.id) - if (!el) return - return el.getBoundingClientRect().top - viewportTop - }) - - groups().forEach((group, index) => { - const nextTop = headerTops.slice(index + 1).find((top) => top !== undefined) - const fadeEnd = HOME_SESSION_HEADER_STICKY_TOP + HOME_SESSION_HEADER_TEXT_HEIGHT - const opacity = - nextTop === undefined - ? 1 - : Math.max( - 0, - Math.min(1, (nextTop - fadeEnd) / HOME_SESSION_HEADER_FADE_DISTANCE), - ) - setState("headerTitleOpacity", group.id, Math.round(opacity * 1000) / 1000) - }) - } - function selectSearchSession(session: Session) { openSession(session) closeSearch() @@ -489,7 +540,7 @@ export function NewHome() { />
{ - sessionListViewport = el - queueHeaderTitleOpacityUpdate() - }} - onScroll={queueHeaderTitleOpacityUpdate} + class="mt-3 -mr-3 min-h-0 flex-1 relative" + viewportRef={sessionHeaderOpacity.setViewport} + onScroll={(event) => sessionHeaderOpacity.update(event.currentTarget.scrollTop)} > + 0 && newSessionProject()}> +
+ + {language.t("command.session.new")} + +
+ 0} fallback={} > -
+
{(group, index) => ( <> setSessionHeaderRef(group.id, el)} - onNewSession={index() === 0 && newSessionProject() ? openNewSession : undefined} + titleOpacity={sessionHeaderOpacity.titleOpacity(group.id)} + ref={(el) => sessionHeaderOpacity.setHeaderRef(group.id, el)} + elevated={index() === 0} />
void - onNewSession?: () => void + ref: ComponentProps<"div">["ref"] + elevated?: boolean }) { - const language = useLanguage() return (
{props.title}
- - {(onNewSession) => ( - - {language.t("command.session.new")} - - )} -
) }