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): align file search controls with outline (#1339)

Browse Source
This commit is contained in:
Ananovo
2026-08-03 18:01:53 +08:00
committed by GitHub
parent 2acaeae2ab
commit 518bd7a9a9
3 changed files with 17 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/components/AssistantChat/HappyThread.tsx
+2 -1
View File
@@ -301,9 +301,10 @@ export function ConversationOutlinePanel(props: {
return (
<aside
className="absolute inset-y-0 right-0 z-30 flex w-full max-w-[24rem] flex-col border-l border-[var(--app-border)] bg-[var(--app-bg)] shadow-2xl sm:w-[24rem]"
className="absolute inset-y-0 right-0 z-30 flex w-full max-w-[24rem] flex-col bg-[var(--app-bg)] shadow-2xl sm:w-[24rem]"
aria-label={t('session.outline.title')}
>
<div aria-hidden="true" className="pointer-events-none absolute inset-y-0 -left-px w-px bg-[var(--app-border)]" />
<div className="border-b border-[var(--app-border)] p-3">
<div className="flex items-center gap-2">
<div className="relative min-w-0 flex-1">
web/src/routes/sessions/files.test.tsx
+6
View File
@@ -99,6 +99,12 @@ describe('FilesPage search navigation', () => {
const input = screen.getByRole('textbox')
expect(input).toHaveValue('感')
const sortButton = screen.getByRole('button', { name: 'Sort files' })
const refreshButton = screen.getByRole('button', { name: 'Refresh filesystem view' })
expect(sortButton.parentElement?.parentElement).toBe(input.parentElement)
expect(input.parentElement?.nextElementSibling).toBe(refreshButton)
expect(sortButton).toHaveClass('w-10', 'self-stretch')
expect(refreshButton).toHaveClass('h-9', 'w-9')
expect(mocks.fileSearch).toHaveBeenCalledWith(
expect.anything(),
'session-1',
web/src/routes/sessions/files.tsx
+9 -7
View File
@@ -23,6 +23,7 @@ import { useQueryClient } from '@tanstack/react-query'
import { useTranslation } from '@/lib/use-translation'
import * as Popover from '@radix-ui/react-popover'
import { CheckIcon, CloseIcon } from '@/components/icons'
import { Button } from '@/components/ui/button'
import {
DEFAULT_DIRECTORY_SORT,
type DirectorySort,
@@ -94,7 +95,7 @@ function DirectorySortMenu(props: { sort: DirectorySort; onChange: (sort: Direct
<button
type="button"
className={props.embedded
? 'flex w-10 shrink-0 self-stretch items-center justify-center rounded-r-md rounded-l-sm text-[var(--app-hint)] transition-colors hover:bg-[var(--app-bg)] hover:text-[var(--app-fg)]'
? 'flex w-10 shrink-0 self-stretch items-center justify-center rounded-r-md rounded-l-sm text-[var(--app-hint)] transition-colors hover:bg-[var(--app-subtle-bg)] hover:text-[var(--app-fg)]'
: 'flex h-9 w-9 shrink-0 items-center justify-center rounded-full text-[var(--app-hint)] transition-colors hover:bg-[var(--app-subtle-bg)] hover:text-[var(--app-fg)]'}
title={t('files.sort.title')}
aria-label={t('files.sort.title')}
@@ -483,13 +484,13 @@ export default function FilesPage() {
<div className="bg-[var(--app-bg)]">
<div className="mx-auto flex w-full max-w-content items-center gap-2 border-b border-[var(--app-border)] p-3">
<div className="relative min-w-0 flex-1 rounded-md bg-[var(--app-subtle-bg)]">
<SearchIcon className="absolute left-3 top-1/2 -translate-y-1/2 text-[var(--app-hint)]" />
<div className="relative min-w-0 flex-1">
<SearchIcon className="pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-[var(--app-hint)]" />
<input
value={searchQuery}
onChange={(event) => setSearchQuery(event.target.value)}
placeholder={t('files.page.searchPlaceholder')}
className="w-full bg-transparent py-2 pl-10 pr-20 text-sm text-[var(--app-fg)] placeholder:text-[var(--app-hint)] focus:outline-none"
className="h-9 w-full rounded-md border border-[var(--app-border)] bg-[var(--app-bg)] py-2 pl-9 pr-20 text-sm text-[var(--app-fg)] outline-none placeholder:text-[var(--app-hint)] focus:border-[var(--app-link)] focus:ring-1 focus:ring-[var(--app-link)]"
autoCapitalize="none"
autoCorrect="off"
/>
@@ -510,15 +511,16 @@ export default function FilesPage() {
</div>
) : null}
</div>
<button
<Button
variant="outline"
type="button"
onClick={handleRefresh}
className="flex h-9 w-9 shrink-0 items-center justify-center rounded-full text-[var(--app-hint)] transition-colors hover:bg-[var(--app-subtle-bg)] hover:text-[var(--app-fg)]"
className="h-9 w-9 shrink-0 px-0"
title={t('files.page.refreshFilesystem')}
aria-label={t('files.page.refreshFilesystem')}
>
<RefreshIcon />
</button>
</Button>
</div>
</div>