@jetcrab/pi-desk 1.1.18-dev → 1.1.21

package/src/client/l3_modules/project-files/l3-project-file-runtime.ts

@@ -1,13 +1,18 @@
 import type {
   L4ProjectFileEntry,
   L4ProjectFileImageMimeType,
-  L4ProjectFileImagePreviewMode
+  L4ProjectFileImagePreviewMode,
+  L4ProjectFileSearch,
+  L4ProjectSearchInput
 } from '@common/l4_foundation/file/l4-project-file-contract'
 import type { L4GitHistoricalDiff } from '@common/l4_foundation/git/l4-git-history-contract'
 import { L3_PROJECT_FILES_LOCALE_MESSAGES } from '@common/l3_modules/project-files/l3-project-files-locale-messages'
 import { l4LocalizedErrorMessage } from '@client/l4_foundation/locale/l4-localized-error'
 import { createL4Base64ImageBlob } from '@client/l4_foundation/media/l4-base64-image'
-import type { L4CodePreviewState } from '@client/l4_foundation/ui/code/l4-code-preview'
+import type {
+  L4CodePreviewState,
+  L4CodeLineNavigation
+} from '@client/l4_foundation/ui/code/l4-code-preview'
 import type { L4CodeDiffState } from '@client/l4_foundation/ui/code/l4-code-diff'
 import { saveL4CodePreferences } from '@client/l4_foundation/ui/code/l4-code-preferences'
 import { L3ProjectRequestError, type L3ProjectFileReader } from './l3-project-reader'
@@ -47,13 +52,26 @@ export type L3FileDocument =
     }
   | { status: 'image'; mimeType: L4ProjectFileImageMimeType; size: number; objectUrl: string }
   | { status: 'error'; error: string }
-export interface L3FileSearch {
-  query: string
+export interface L3FileSearch extends L4ProjectSearchInput, L4ProjectFileSearch {
   status: 'idle' | 'loading' | 'ready' | 'error'
-  matches: string[]
-  truncated: boolean
   error: string | null
 }
+const DEFAULT_SEARCH_OPTIONS = {
+  scope: 'all',
+  caseSensitive: false,
+  wholeWord: false,
+  regex: false
+} as const
+function emptySearch(input: L4ProjectSearchInput): L3FileSearch {
+  return {
+    ...input,
+    status: input.query.trim() ? 'loading' : 'idle',
+    fileMatches: [],
+    contentMatches: [],
+    truncated: false,
+    error: null
+  }
+}
 interface DiffOptions {
   repositoryRoot: string
   path: string
@@ -132,7 +150,7 @@ export class L3ProjectFileRuntime {
     directories: new Map(),
     expandedPaths: new Set(),
     treeScrollTop: 0,
-    search: { query: '', status: 'idle', matches: [], truncated: false, error: null },
+    search: emptySearch({ query: '', ...DEFAULT_SEARCH_OPTIONS }),
     searchOpen: false,
     documents: new Map(),
     activeDiff: null
@@ -150,6 +168,7 @@ export class L3ProjectFileRuntime {
   private readonly restoredFileViewModes = new Map<string, 'source' | 'preview'>()
   private readonly restoredPreviewScrollTops = new Map<string, number>()
   private searchRequest: AbortController | null = null
+  private navigation: L4CodeLineNavigation | null = null
   private diffRequest: AbortController | null = null
   private revision = 0
   private disposed = false
@@ -165,8 +184,23 @@ export class L3ProjectFileRuntime {
   }
   getRevision = (): number => this.revision
   setSearchOpen(open: boolean): void {
-    if (this.state.searchOpen === open) return
+    if (this.disposed || this.state.searchOpen === open) return
+    this.cancelSearch()
     this.state.searchOpen = open
+    this.state.search = emptySearch({
+      ...this.searchInput(),
+      scope: open ? 'all' : this.state.search.scope
+    })
+    this.publish()
+  }
+  get pendingNavigation(): L4CodeLineNavigation | null {
+    const path = this.state.activePath
+    return path && !this.documentRequests.has(path) ? this.navigation : null
+  }
+  consumeNavigation(target: L4CodeLineNavigation, exists: boolean): void {
+    if (this.navigation !== target) return
+    this.navigation = null
+    if (!exists) this.options.onNotice?.(projectText('searchLineUnavailable'))
     this.publish()
   }
   get canReveal(): boolean {
@@ -203,13 +237,7 @@ export class L3ProjectFileRuntime {
       input.activePath && input.tabs.includes(input.activePath) ? input.activePath : null
     this.state.expandedPaths = new Set(input.expandedPaths)
     this.state.treeScrollTop = input.treeScrollTop
-    this.state.search = {
-      query: input.searchQuery,
-      status: input.searchQuery ? 'loading' : 'idle',
-      matches: [],
-      truncated: false,
-      error: null
-    }
+    this.state.search = emptySearch({ query: input.searchQuery, ...DEFAULT_SEARCH_OPTIONS })
     for (const path of input.tabs) this.state.documents.set(path, { status: 'unloaded' })
     for (const path of input.expandedPaths) void this.ensureDirectory(path)
     if (input.activeDiff) {
@@ -320,18 +348,12 @@ export class L3ProjectFileRuntime {
     this.directoryRequests.clear()
     this.state.directories.clear()
     this.cancelSearch()
-    this.state.search = {
-      query: this.state.search.query,
-      status: this.state.search.query ? 'loading' : 'idle',
-      matches: [],
-      truncated: false,
-      error: null
-    }
+    this.state.search = emptySearch(this.searchInput())
     this.publish()
     void this.ensureRoot().then(() => {
       if (this.disposed) return
       for (const path of this.state.expandedPaths) void this.ensureDirectory(path)
-      if (this.state.search.query) {
+      if (this.state.searchOpen && this.state.search.query.trim()) {
         this.cancelSearch()
         this.state.search = { ...this.state.search, status: 'loading' }
         void this.search(this.state.search.query)
@@ -339,17 +361,31 @@ export class L3ProjectFileRuntime {
     })
   }
   setSearchQuery(query: string): void {
-    if (this.state.search.query === query) return
+    if (this.disposed || this.state.search.query === query) return
     this.cancelSearch()
-    this.state.search = {
-      query,
-      status: query.trim() ? 'loading' : 'idle',
-      matches: [],
-      truncated: false,
-      error: null
-    }
+    this.state.search = emptySearch({ ...this.searchInput(), query })
     this.publish()
   }
+  setSearchOptions(options: Partial<Omit<L4ProjectSearchInput, 'query'>>): void {
+    if (this.disposed) return
+    const previous = this.searchInput()
+    const next = { ...previous, ...options }
+    if (
+      next.scope === previous.scope &&
+      next.caseSensitive === previous.caseSensitive &&
+      next.wholeWord === previous.wholeWord &&
+      next.regex === previous.regex
+    )
+      return
+    this.cancelSearch()
+    this.state.search = emptySearch(next)
+    this.publish()
+    if (this.state.searchOpen) void this.search(next.query)
+  }
+  private searchInput(): L4ProjectSearchInput {
+    const { query, scope, caseSensitive, wholeWord, regex } = this.state.search
+    return { query, scope, caseSensitive, wholeWord, regex }
+  }
   async search(query: string): Promise<void> {
     if (
       this.disposed ||
@@ -361,27 +397,22 @@ export class L3ProjectFileRuntime {
       return
     const request = new AbortController()
     this.searchRequest = request
-    this.state.search = { query, status: 'loading', matches: [], truncated: false, error: null }
+    const input = this.searchInput()
+    this.state.search = emptySearch(input)
     this.publish()
     try {
-      const result = await this.reader.search(query.trim(), request.signal)
+      const result = await this.reader.search(input, request.signal)
       if (this.searchRequest !== request) return
-      this.state.search = { query, status: 'ready', ...result, error: null }
+      this.state.search = { ...input, status: 'ready', ...result, error: null }
     } catch (cause) {
       if (this.searchRequest !== request) return
-      this.state.search = {
-        query,
-        status: 'error',
-        matches: [],
-        truncated: false,
-        error: message(cause)
-      }
+      this.state.search = { ...emptySearch(input), status: 'error', error: message(cause) }
     }
     if (this.searchRequest !== request) return
     this.searchRequest = null
     this.publish()
   }
-  openFile(input: string): void {
+  openFile(input: string, line?: number): void {
     if (this.disposed) return
     const normalized = normalizePath(this.cwd, input)
     const windows = /^[a-z]:[\\/]/i.test(this.cwd) || this.cwd.startsWith('\\\\')
@@ -399,8 +430,11 @@ export class L3ProjectFileRuntime {
     this.clearDiff()
     if (!this.state.documents.has(path)) this.state.documents.set(path, { status: 'unloaded' })
     this.state.activePath = path
+    this.navigation = line === undefined ? null : { line }
+    const document = this.state.documents.get(path)
+    if (line !== undefined && document?.status === 'text') document.viewMode = 'source'
+    void this.ensureDocument(path, line !== undefined)
     this.publish()
-    void this.ensureDocument(path)
   }
   closeTabs(target: string | null, scope: L3FileTabCloseScope): void {
     const state = this.state
@@ -439,6 +473,7 @@ export class L3ProjectFileRuntime {
     }
     state.tabs = state.tabs.filter((path) => !removed.has(path))
     if (state.activePath && removed.has(state.activePath)) {
+      this.navigation = null
       const activeIndex = tabs.indexOf(state.activePath)
       state.activePath =
         tabs.slice(activeIndex + 1).find((path) => path !== null && !removed.has(path)) ??
@@ -454,17 +489,23 @@ export class L3ProjectFileRuntime {
   }
   reloadFile(path: string): void {
     if (!this.state.tabs.includes(path)) return
+    if (this.state.activePath === path && this.navigation) {
+      // 面板显示时的自动重读与搜索定位共用刷新，不能清除待消费的目标行。
+      void this.ensureDocument(path, true)
+      return
+    }
     this.invalidateDocument(path)
     this.publish()
     void this.ensureDocument(path)
   }
-  async ensureDocument(path: string): Promise<void> {
-    if (this.disposed || !this.state.tabs.includes(path)) return
+  async ensureDocument(path: string, refresh = false): Promise<void> {
+    if (this.disposed || !this.state.tabs.includes(path) || this.documentRequests.has(path)) return
     const current = this.state.documents.get(path)
-    if (current && ['loading', 'text', 'image'].includes(current.status)) return
+    if (!refresh && current && ['loading', 'text', 'image'].includes(current.status)) return
     const request = new AbortController()
     this.documentRequests.set(path, request)
-    this.state.documents.set(path, { status: 'loading' })
+    // 搜索定位刷新正文时保留已挂载的代码视图，内容未变时不重建编辑器。
+    if (current?.status !== 'text') this.state.documents.set(path, { status: 'loading' })
     this.publish()
     try {
       const result = await this.reader.get(path, this.options.imagePreviewMode(), request.signal)
@@ -472,29 +513,47 @@ export class L3ProjectFileRuntime {
       this.documentRequests.delete(path)
       this.closeMissing.delete(path)
       this.restoredTabs.delete(path)
-      this.state.documents.set(
-        path,
-        result.kind === 'text'
-          ? {
-              status: 'text',
-              content: result.content,
-              size: result.size,
-              editorState: this.restoredEditorStates.get(path) ?? null,
-              viewMode:
-                this.restoredFileViewModes.get(path) ??
-                (getL3ProjectTextPreviewKind(path) === 'markdown' ||
-                (this.options.htmlPreview && getL3ProjectTextPreviewKind(path) === 'html')
-                  ? 'preview'
-                  : 'source'),
-              previewScrollTop: this.restoredPreviewScrollTops.get(path) ?? 0
-            }
-          : {
-              status: 'image',
-              mimeType: result.mimeType,
-              size: result.size,
-              objectUrl: URL.createObjectURL(createL4Base64ImageBlob(result))
-            }
-      )
+      const unchanged =
+        current?.status === 'text' &&
+        result.kind === 'text' &&
+        current.content === result.content &&
+        current.size === result.size
+      if (!unchanged)
+        this.state.documents.set(
+          path,
+          result.kind === 'text'
+            ? {
+                status: 'text',
+                content: result.content,
+                size: result.size,
+                editorState:
+                  current?.status === 'text'
+                    ? current.editorState
+                    : (this.restoredEditorStates.get(path) ?? null),
+                viewMode:
+                  this.state.activePath === path && this.navigation
+                    ? 'source'
+                    : current?.status === 'text'
+                      ? current.viewMode
+                      : (this.restoredFileViewModes.get(path) ??
+                        (getL3ProjectTextPreviewKind(path) === 'markdown' ||
+                        (this.options.htmlPreview && getL3ProjectTextPreviewKind(path) === 'html')
+                          ? 'preview'
+                          : 'source')),
+                previewScrollTop:
+                  current?.status === 'text'
+                    ? current.previewScrollTop
+                    : (this.restoredPreviewScrollTops.get(path) ?? 0)
+              }
+            : {
+                status: 'image',
+                mimeType: result.mimeType,
+                size: result.size,
+                objectUrl: URL.createObjectURL(createL4Base64ImageBlob(result))
+              }
+        )
+      if (this.state.activePath === path && result.kind !== 'text') this.navigation = null
+      this.releaseDocument(current)
     } catch (cause) {
       if (this.documentRequests.get(path) !== request) return
       this.documentRequests.delete(path)
@@ -516,6 +575,8 @@ export class L3ProjectFileRuntime {
         error: message(cause)
       })
       this.state.documents.set(path, { status: 'error', error: message(cause) })
+      this.releaseDocument(current)
+      if (this.state.activePath === path) this.navigation = null
     }
     this.publish()
   }
@@ -703,6 +764,7 @@ export class L3ProjectFileRuntime {
     this.publish()
   }
   private clearDiff(): void {
+    this.navigation = null
     this.diffRequest?.abort()
     this.diffRequest = null
     this.state.activeDiff = null
@@ -712,6 +774,7 @@ export class L3ProjectFileRuntime {
     this.searchRequest = null
   }
   private invalidateDocument(path: string): void {
+    if (this.state.activePath === path) this.navigation = null
     this.documentRequests.get(path)?.abort()
     this.documentRequests.delete(path)
     const document = this.state.documents.get(path)

package/src/client/l3_modules/project-files/l3-project-reader.ts

@@ -5,6 +5,7 @@ import * as contract from '@common/l3_modules/project-files/l3-project-files-con
 import type {
   L4ProjectFileList,
   L4ProjectFileSearch,
+  L4ProjectSearchInput,
   L4ProjectFileContent,
   L4ProjectFileImagePreviewMode
 } from '@common/l4_foundation/file/l4-project-file-contract'
@@ -62,7 +63,7 @@ export async function requestL3Project<I, O>(
 
 export interface L3ProjectFileReader {
   list(path: string, signal?: AbortSignal): Promise<L4ProjectFileList>
-  search(query: string, signal?: AbortSignal): Promise<L4ProjectFileSearch>
+  search(input: L4ProjectSearchInput, signal?: AbortSignal): Promise<L4ProjectFileSearch>
   get(
     path: string,
     imagePreviewMode: L4ProjectFileImagePreviewMode,
@@ -84,49 +85,37 @@ export interface L3ProjectReader extends L3ProjectFileReader {
 
 export function createL3ProjectReader(
   clientId: string,
-  context: contract.L3ProjectReadContext
+  context: contract.L3ProjectReadContext,
+  onUnauthorized?: () => void
 ): L3ProjectReader {
+  async function request<I, O>(
+    api: { path: string; request: z.ZodType<I>; response: z.ZodType<O> },
+    input: I,
+    signal?: AbortSignal
+  ): Promise<O> {
+    try {
+      return await requestL3Project(clientId, api, input, signal)
+    } catch (cause) {
+      if (!signal?.aborted && cause instanceof L3ProjectRequestError && cause.status === 401)
+        onUnauthorized?.()
+      throw cause
+    }
+  }
   return {
-    list: (path, signal) =>
-      requestL3Project(clientId, contract.L3ProjectFileList, { ...context, path }, signal),
-    search: (query, signal) =>
-      requestL3Project(clientId, contract.L3ProjectFileSearch, { ...context, query }, signal),
+    list: (path, signal) => request(contract.L3ProjectFileList, { ...context, path }, signal),
+    search: (input, signal) =>
+      request(contract.L3ProjectFileSearch, { ...context, ...input }, signal),
     get: (path, imagePreviewMode, signal) =>
-      requestL3Project(
-        clientId,
-        contract.L3ProjectFileGet,
-        { ...context, path, imagePreviewMode },
-        signal
-      ),
+      request(contract.L3ProjectFileGet, { ...context, path, imagePreviewMode }, signal),
     snapshot: (signal, refresh) =>
-      requestL3Project(clientId, contract.L3ProjectGitGet, { ...context, refresh }, signal),
+      request(contract.L3ProjectGitGet, { ...context, refresh }, signal),
     branches: (repositoryRoot, signal) =>
-      requestL3Project(
-        clientId,
-        contract.L3ProjectGitBranches,
-        { ...context, repositoryRoot },
-        signal
-      ),
+      request(contract.L3ProjectGitBranches, { ...context, repositoryRoot }, signal),
     log: (repositoryRoot, query, signal) =>
-      requestL3Project(
-        clientId,
-        contract.L3ProjectGitLog,
-        { ...context, repositoryRoot, ...query },
-        signal
-      ),
+      request(contract.L3ProjectGitLog, { ...context, repositoryRoot, ...query }, signal),
     changes: (repositoryRoot, query, signal) =>
-      requestL3Project(
-        clientId,
-        contract.L3ProjectGitChanges,
-        { ...context, repositoryRoot, ...query },
-        signal
-      ),
+      request(contract.L3ProjectGitChanges, { ...context, repositoryRoot, ...query }, signal),
     diff: (repositoryRoot, path, signal, comparison) =>
-      requestL3Project(
-        clientId,
-        contract.L3ProjectGitDiff,
-        { ...context, repositoryRoot, path, comparison },
-        signal
-      )
+      request(contract.L3ProjectGitDiff, { ...context, repositoryRoot, path, comparison }, signal)
   }
 }

package/src/client/l3_modules/project-files/views/l3-project-search-controls.tsx

@@ -0,0 +1,201 @@
+'use client'
+
+import { SearchIcon, XIcon } from 'lucide-react'
+import { useEffect, useRef, useState, type Ref } from 'react'
+import { useTranslation } from 'react-i18next'
+import type { L4ProjectSearchInput } from '@common/l4_foundation/file/l4-project-file-contract'
+import { cn } from '@client/l4_foundation/lib/l4-utils'
+import { Button } from '@client/l4_foundation/ui/shadcn/button'
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupInput
+} from '@client/l4_foundation/ui/shadcn/input-group'
+import { Tooltip, TooltipContent, TooltipTrigger } from '@client/l4_foundation/ui/shadcn/tooltip'
+
+type SearchOptions = Partial<Omit<L4ProjectSearchInput, 'query'>>
+
+interface L3ProjectSearchControlsProps {
+  input: L4ProjectSearchInput
+  inputRef: Ref<HTMLInputElement>
+  invalid: boolean
+  onQueryChange: (query: string) => void
+  onOptionsChange: (options: SearchOptions) => void
+  onComposingChange: (composing: boolean) => void
+  onClose: () => void
+  onOpenFirst: () => void
+  onFocusResults: () => void
+}
+
+const SCOPES = ['all', 'files', 'content'] as const
+const OPTIONS = [
+  { key: 'caseSensitive', label: 'searchCaseSensitive', text: 'Aa' },
+  { key: 'wholeWord', label: 'searchWholeWord', text: 'Ab' },
+  { key: 'regex', label: 'searchRegex', text: '.*' }
+] as const
+
+export function L3ProjectSearchControls({
+  input,
+  inputRef,
+  invalid,
+  onQueryChange,
+  onOptionsChange,
+  onComposingChange,
+  onClose,
+  onOpenFirst,
+  onFocusResults
+}: L3ProjectSearchControlsProps): React.JSX.Element {
+  const { t } = useTranslation('projectFiles')
+  const [composition, setComposition] = useState<string | null>(null)
+  const composing = useRef(false)
+  useEffect(() => () => onComposingChange(false), [onComposingChange])
+  const placeholder = t(
+    input.scope === 'files'
+      ? 'searchFiles'
+      : input.scope === 'content'
+        ? 'searchContent'
+        : 'searchAll'
+  )
+
+  return (
+    <div className="shrink-0 border-b px-2.5 py-2">
+      <div className="rounded-lg border border-input bg-card p-1 focus-within:border-ring focus-within:outline-2 focus-within:-outline-offset-2 focus-within:outline-ring">
+        <div className="flex min-h-7 items-center justify-between gap-1">
+          <div
+            className="flex min-w-0 items-center gap-1"
+            role="radiogroup"
+            aria-label={t('searchScope')}
+          >
+            {SCOPES.map((scope, index) => (
+              <Button
+                key={scope}
+                type="button"
+                role="radio"
+                aria-checked={input.scope === scope}
+                tabIndex={input.scope === scope ? 0 : -1}
+                disabled={composition !== null}
+                variant="ghost"
+                size="sm"
+                data-testid={`project-search-scope-${scope}`}
+                className={cn(
+                  'min-h-7 px-2 text-xs',
+                  input.scope === scope && 'bg-accent text-accent-foreground'
+                )}
+                onClick={() => onOptionsChange({ scope })}
+                onKeyDown={(event) => {
+                  const forward = event.key === 'ArrowRight' || event.key === 'ArrowDown'
+                  const backward = event.key === 'ArrowLeft' || event.key === 'ArrowUp'
+                  if (!forward && !backward && event.key !== 'Home' && event.key !== 'End') return
+                  event.preventDefault()
+                  const next =
+                    event.key === 'Home'
+                      ? 0
+                      : event.key === 'End'
+                        ? 2
+                        : (index + (forward ? 1 : 2)) % 3
+                  onOptionsChange({ scope: SCOPES[next] })
+                  event.currentTarget.parentElement
+                    ?.querySelectorAll<HTMLButtonElement>('[role="radio"]')
+                    [next]?.focus()
+                }}
+              >
+                {t(
+                  scope === 'all'
+                    ? 'searchScopeAll'
+                    : scope === 'files'
+                      ? 'searchScopeFiles'
+                      : 'searchScopeContent'
+                )}
+              </Button>
+            ))}
+          </div>
+          <Tooltip>
+            <TooltipTrigger
+              render={
+                <Button
+                  type="button"
+                  variant="ghost"
+                  size="icon-sm"
+                  className="size-7 shrink-0"
+                  aria-label={t('closeSearch')}
+                  onClick={onClose}
+                />
+              }
+            >
+              <XIcon className="size-4" />
+            </TooltipTrigger>
+            <TooltipContent>{t('closeSearch')}</TooltipContent>
+          </Tooltip>
+        </div>
+        <InputGroup className="min-h-8 rounded-none border-0 bg-transparent has-[[data-slot=input-group-control]:focus-visible]:outline-none">
+          <InputGroupAddon className="pl-1.5 py-0">
+            <SearchIcon className="size-3.5" />
+          </InputGroupAddon>
+          <InputGroupInput
+            ref={inputRef}
+            data-testid="project-file-search"
+            className="min-w-0 px-1.5 text-sm placeholder:text-xs"
+            value={composition ?? input.query}
+            placeholder={placeholder}
+            aria-label={placeholder}
+            aria-invalid={invalid || undefined}
+            autoComplete="off"
+            spellCheck={false}
+            onChange={(event) => {
+              if (composing.current) setComposition(event.target.value)
+              else onQueryChange(event.target.value)
+            }}
+            onCompositionStart={(event) => {
+              composing.current = true
+              setComposition(event.currentTarget.value)
+              onComposingChange(true)
+            }}
+            onCompositionEnd={(event) => {
+              composing.current = false
+              setComposition(null)
+              onQueryChange(event.currentTarget.value)
+              onComposingChange(false)
+            }}
+            onKeyDown={(event) => {
+              if (event.nativeEvent.isComposing || composing.current) return
+              if (event.key === 'Enter') {
+                event.preventDefault()
+                onOpenFirst()
+              } else if (event.key === 'ArrowDown') {
+                event.preventDefault()
+                onFocusResults()
+              }
+            }}
+          />
+          <InputGroupAddon align="inline-end" className="gap-0 pr-1 py-0">
+            {OPTIONS.map(({ key, label, text }) => (
+              <Tooltip key={key}>
+                <TooltipTrigger
+                  render={
+                    <InputGroupButton
+                      size="icon-xs"
+                      disabled={composition !== null}
+                      aria-label={t(label)}
+                      aria-pressed={input[key]}
+                      data-testid={`project-search-option-${key}`}
+                      className={cn(
+                        'border border-transparent font-mono text-xs text-muted-foreground',
+                        key === 'wholeWord' && 'underline underline-offset-4',
+                        input[key] && 'border-input bg-accent text-accent-foreground'
+                      )}
+                      onClick={() => onOptionsChange({ [key]: !input[key] })}
+                    />
+                  }
+                >
+                  {text}
+                </TooltipTrigger>
+                <TooltipContent>{t(label)}</TooltipContent>
+              </Tooltip>
+            ))}
+          </InputGroupAddon>
+        </InputGroup>
+      </div>
+    </div>
+  )
+}