From 518bd7a9a925d5d327e62c28faa01de5daf05d64 Mon Sep 17 00:00:00 2001
From: Ananovo <techotaku39@outlook.com>
Date: Mon, 3 Aug 2026 18:01:53 +0800
Subject: [PATCH] fix(web): align file search controls with outline (#1339)

---
 web/src/components/AssistantChat/HappyThread.tsx |  3 ++-
 web/src/routes/sessions/files.test.tsx           |  6 ++++++
 web/src/routes/sessions/files.tsx                | 16 +++++++++-------
 3 files changed, 17 insertions(+), 8 deletions(-)

diff --git a/web/src/components/AssistantChat/HappyThread.tsx b/web/src/components/AssistantChat/HappyThread.tsx
index c5d4a3dc..06a4d3a4 100644
--- a/web/src/components/AssistantChat/HappyThread.tsx
+++ b/web/src/components/AssistantChat/HappyThread.tsx
@@ -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">
diff --git a/web/src/routes/sessions/files.test.tsx b/web/src/routes/sessions/files.test.tsx
index 1cc8a941..42e95f36 100644
--- a/web/src/routes/sessions/files.test.tsx
+++ b/web/src/routes/sessions/files.test.tsx
@@ -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',
diff --git a/web/src/routes/sessions/files.tsx b/web/src/routes/sessions/files.tsx
index d8e53552..e4f4a1dd 100644
--- a/web/src/routes/sessions/files.tsx
+++ b/web/src/routes/sessions/files.tsx
@@ -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>