feat(web): reuse session search in sessions/groups and fix dark tab styles

Author: jasonczc

web/src/lib/locales/en.ts

@@ -47,6 +47,7 @@ export default {
   'sessions.projectOffline.disable': 'Unmark project offline',
   'sessions.display.toggleToCompact': 'Switch to compact view',
   'sessions.display.toggleToComfortable': 'Switch to comfortable view',
+  'sessions.search.placeholder': 'Search sessions…',
   'sessions.sidebar.resize': 'Resize sidebar',
   'sessions.sidebar.open': 'Open sessions sidebar',
   'sessions.sidebar.close': 'Close sessions sidebar',

web/src/lib/locales/zh-CN.ts

@@ -47,6 +47,7 @@ export default {
   'sessions.projectOffline.disable': '取消项目离线',
   'sessions.display.toggleToCompact': '切换到紧凑视图',
   'sessions.display.toggleToComfortable': '切换到舒适视图',
+  'sessions.search.placeholder': '搜索会话…',
   'sessions.sidebar.resize': '调整侧边栏宽度',
   'sessions.sidebar.open': '打开会话侧边栏',
   'sessions.sidebar.close': '关闭会话侧边栏',

web/src/lib/session-search.ts

@@ -0,0 +1,31 @@
+import type { SessionSummary } from '@/types/api'
+import { getSessionTitle } from '@/lib/session-title'
+
+function normalizeQuery(query: string): string {
+    return query.trim().toLowerCase()
+}
+
+function buildSessionSearchFields(session: SessionSummary): string[] {
+    const title = getSessionTitle(session, { fallbackIdLength: 12 }).toLowerCase()
+    const name = (session.metadata?.name ?? '').toLowerCase()
+    const summary = (session.metadata?.summary?.text ?? '').toLowerCase()
+    const path = (session.metadata?.path ?? '').toLowerCase()
+    const sessionId = session.id.toLowerCase()
+    return [title, name, summary, path, sessionId]
+}
+
+export function matchesSessionSearch(session: SessionSummary, query: string): boolean {
+    const normalizedQuery = normalizeQuery(query)
+    if (!normalizedQuery) {
+        return true
+    }
+    return buildSessionSearchFields(session).some((field) => field.includes(normalizedQuery))
+}
+
+export function filterSessionsBySearch(sessions: SessionSummary[], query: string): SessionSummary[] {
+    const normalizedQuery = normalizeQuery(query)
+    if (!normalizedQuery) {
+        return sessions
+    }
+    return sessions.filter((session) => matchesSessionSearch(session, normalizedQuery))
+}

web/src/router.tsx

@@ -1,4 +1,4 @@
-import { createContext, useCallback, useContext, useEffect, useState, type CSSProperties } from 'react'
+import { createContext, useCallback, useContext, useEffect, useMemo, useState, type CSSProperties } from 'react'
 import { useQueryClient } from '@tanstack/react-query'
 import {
     Navigate,
@@ -40,6 +40,7 @@ import { usePlatform } from '@/hooks/usePlatform'
 import { SessionActionMenu } from '@/components/SessionActionMenu'
 import { ConfirmDialog } from '@/components/ui/ConfirmDialog'
 import type { GroupDetail } from '@/types/api'
+import { filterSessionsBySearch } from '@/lib/session-search'
 import FilesPage from '@/routes/sessions/files'
 import FilePage from '@/routes/sessions/file'
 import PreviewPage from '@/routes/sessions/preview'
@@ -231,6 +232,12 @@ function SessionsPage() {
     const { sidebarWidth, isResizing, startSidebarResize } = useSessionSidebarWidth()
     const { desktopSidebarHidden, setDesktopSidebarHidden, toggleDesktopSidebar } = useSessionSidebarVisibility()
     const [mobileSidebarOpen, setMobileSidebarOpen] = useState(false)
+    const [sessionSearchQuery, setSessionSearchQuery] = useState('')
+
+    const visibleSessions = useMemo(
+        () => filterSessionsBySearch(sessions, sessionSearchQuery),
+        [sessions, sessionSearchQuery]
+    )
 
     const handleRefresh = useCallback(() => {
         void refetch()
@@ -244,7 +251,7 @@ function SessionsPage() {
         })
     }, [navigate])
 
-    const projectCount = new Set(sessions.map(s => s.metadata?.worktree?.basePath ?? s.metadata?.path ?? 'Other')).size
+    const projectCount = new Set(visibleSessions.map(s => s.metadata?.worktree?.basePath ?? s.metadata?.path ?? 'Other')).size
     const sessionMatch = matchRoute({ to: '/sessions/$sessionId', fuzzy: true })
     const chatRouteMatch = matchRoute({ to: '/sessions/$sessionId', fuzzy: false })
     const selectedSessionId = sessionMatch && sessionMatch.sessionId !== 'new' ? sessionMatch.sessionId : null
@@ -325,7 +332,7 @@ function SessionsPage() {
                         <div className="flex items-center gap-1">
                             <button
                                 type="button"
-                                className="rounded-md px-2.5 py-1.5 text-xs bg-[var(--app-link)] text-white font-medium"
+                                className="rounded-md px-2.5 py-1.5 text-xs bg-[var(--app-button)] text-[var(--app-button-text)] font-medium"
                             >
                                 Sessions
                             </button>
@@ -392,9 +399,17 @@ function SessionsPage() {
                     </div>
                     <div className="mx-auto w-full max-w-content flex items-center justify-between px-3 py-1.5">
                         <div className="text-xs text-[var(--app-hint)]">
-                            {t('sessions.count', { n: sessions.length, m: projectCount })}
+                            {t('sessions.count', { n: visibleSessions.length, m: projectCount })}
                         </div>
                     </div>
+                    <div className="mx-auto w-full max-w-content px-3 pb-2">
+                        <input
+                            value={sessionSearchQuery}
+                            onChange={(e) => setSessionSearchQuery(e.target.value)}
+                            placeholder={t('sessions.search.placeholder')}
+                            className="w-full rounded-md border border-[var(--app-divider)] bg-[var(--app-secondary-bg)] px-3 py-1.5 text-sm outline-none focus:border-[var(--app-link)]"
+                        />
+                    </div>
                 </div>
 
                 <div className="flex min-h-0 flex-1 flex-col">
@@ -405,7 +420,7 @@ function SessionsPage() {
                     ) : null}
                     <div className="min-h-0 flex-1">
                         <SessionList
-                            sessions={sessions}
+                            sessions={visibleSessions}
                             selectedSessionId={selectedSessionId}
                             onSelect={selectSession}
                             onNewSession={openNewSession}
@@ -886,7 +901,7 @@ function GroupsLayout() {
                             </button>
                             <button
                                 type="button"
-                                className="rounded-md px-2.5 py-1.5 text-xs bg-[var(--app-link)] text-white font-medium"
+                                className="rounded-md px-2.5 py-1.5 text-xs bg-[var(--app-button)] text-[var(--app-button-text)] font-medium"
                             >
                                 Groups
                             </button>

web/src/routes/groups/detail.tsx

@@ -12,6 +12,7 @@ import { LoadingState } from '@/components/LoadingState'
 import { NewSession } from '@/components/NewSession'
 import { useTranslation } from '@/lib/use-translation'
 import { getSessionTitle } from '@/lib/session-title'
+import { matchesSessionSearch } from '@/lib/session-search'
 
 // ─── Icons ───────────────────────────────────────────────────────────────────
 
@@ -216,21 +217,9 @@ function AddMemberModal(props: {
     const onlineMachines = useMemo(() => machines.filter((m) => m.active), [machines])
 
     const { online, offline } = useMemo(() => {
-        const q = search.trim().toLowerCase()
         const available = sessions.filter((s) => {
             if (props.existingMemberSessionIds.has(s.id)) return false
-            if (!q) return true
-            const name = getSessionTitle(s, { fallbackIdLength: 12 }).toLowerCase()
-            const rawName = (s.metadata?.name ?? '').toLowerCase()
-            const summary = (s.metadata?.summary?.text ?? '').toLowerCase()
-            const path = (s.metadata?.path ?? '').toLowerCase()
-            return (
-                name.includes(q)
-                || rawName.includes(q)
-                || summary.includes(q)
-                || path.includes(q)
-                || s.id.toLowerCase().includes(q)
-            )
+            return matchesSessionSearch(s, search)
         })
         return {
             online: available.filter((s) => s.active),