wushenghua/hapi
1
0
Fork 0
mirror of https://github.com/wu736139669/hapi.git synced 2026-08-05 06:24:37 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(web): keep sticky workspace headers opaque and aligned (#1234)

Browse Source
This commit is contained in:
Ananovo
2026-07-29 19:55:56 +08:00
committed by GitHub
parent 633e990d7f
commit c404008072
2 changed files with 40 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/components/SessionList.directory-action.test.tsx
+37
View File
@@ -88,6 +88,43 @@ describe('SessionList directory action', () => {
})
})
it('keeps the sticky project header opaque and aligned with the list viewport', () => {
const session = makeSession({
id: 'session-1',
updatedAt: Date.now(),
metadata: {
path: '/home/ubuntu',
name: 'Greeting',
flavor: 'codex',
}
})
renderWithProviders(
<SessionList
sessions={[session]}
selectedSessionId={null}
onSelect={vi.fn()}
onNewSession={vi.fn()}
onRefresh={vi.fn()}
isLoading={false}
renderHeader={false}
api={null}
/>
)
const projectHeader = screen.getByTitle('/home/ubuntu')
expect(projectHeader).toHaveClass('bg-[var(--app-bg)]')
expect(projectHeader).toHaveClass('hover:bg-[var(--app-secondary-bg)]')
expect(projectHeader).not.toHaveClass('hover:bg-[var(--app-subtle-bg)]')
const listContent = projectHeader.parentElement?.parentElement
expect(listContent).not.toHaveClass('pt-1')
const searchInput = screen.getByPlaceholderText(/Search sessions/)
const searchWrapper = searchInput.parentElement?.parentElement
expect(searchWrapper).toHaveClass('pb-1')
})
it('hides the directory action for sessions without path metadata', () => {
renderWithProviders(
<SessionList
web/src/components/SessionList.tsx
+3 -3
View File
@@ -677,7 +677,7 @@ function SessionListSearch(props: {
const [datePickerOpen, setDatePickerOpen] = useState(false)
const hasDateRange = Boolean(props.customStart && props.customEnd)
return (
<div className="px-2 pb-2">
<div className="px-2 pb-1">
<div className="relative min-w-0">
<div className="pointer-events-none absolute inset-y-0 left-2.5 flex items-center text-[var(--app-hint)]">
<SearchIcon className="h-3.5 w-3.5" />
@@ -1281,7 +1281,7 @@ export function SessionList(props: {
</div>
<div className="app-scroll-y session-list-scrollbar-left min-h-0 flex-1">
<div className="mx-auto flex w-full max-w-content flex-col gap-1 pl-1.5 pr-2 pt-1 pb-2">
<div className="mx-auto flex w-full max-w-content flex-col gap-1 pl-1.5 pr-2 pb-2">
{groups.map((group) => {
const isCollapsed = isGroupCollapsed(group)
const visibleGroupSessions = getVisibleGroupSessions(group)
@@ -1297,7 +1297,7 @@ export function SessionList(props: {
return (
<div key={group.key}>
<div
className="group/project sticky top-0 z-10 flex items-center gap-2 bg-[var(--app-bg)] py-1.5 pl-2 pr-2 text-left rounded-lg transition-colors hover:bg-[var(--app-subtle-bg)] cursor-pointer min-w-0 w-full select-none"
className="group/project sticky top-0 z-10 flex items-center gap-2 bg-[var(--app-bg)] py-1.5 pl-2 pr-2 text-left rounded-lg transition-colors hover:bg-[var(--app-secondary-bg)] cursor-pointer min-w-0 w-full select-none"
onClick={() => toggleGroup(group.key, isCollapsed)}
title={group.directory}
>