@jetcrab/pi-desk 1.1.22-dev → 1.1.23-dev

package/src/client/l3_modules/project-files/l3-project-file-browser.tsx

@@ -43,6 +43,7 @@ import {
 } from './l3-project-git-model'
 import type { L3DirectoryState, L3ProjectFileRuntime } from './l3-project-file-runtime'
 import { L3ProjectPathMenu } from './l3-project-path-menu'
+import styles from './l3-project-file-browser.module.css'
 import {
   buildL3ProjectPathTree,
   compactL3PathTreeDirectory,
@@ -60,6 +61,7 @@ interface L3ProjectFileBrowserProps {
   onOpenGitBranches: (repositoryRoot: string) => void
   onFileOpened?: () => void
   rootTitle?: React.ReactNode
+  showRootTitle?: boolean
   gitReadOnly?: boolean
 }
 
@@ -155,6 +157,7 @@ export function L3ProjectFileBrowser({
   onOpenGitBranches,
   onFileOpened,
   rootTitle,
+  showRootTitle = true,
   gitReadOnly = false
 }: L3ProjectFileBrowserProps): React.JSX.Element {
   const { t } = useTranslation('projectFiles')
@@ -581,7 +584,7 @@ export function L3ProjectFileBrowser({
               type="button"
               disabled={gitReadOnly || repository.state !== 'ready'}
               className={cn(
-                buttonVariants({ variant: 'outline', size: 'sm' }),
+                buttonVariants({ variant: 'ghost', size: 'sm' }),
                 'max-w-28 shrink gap-1 font-mono text-xs text-muted-foreground'
               )}
               title={
@@ -589,6 +592,7 @@ export function L3ProjectFileBrowser({
                   ? t(gitReadOnly ? 'gitBranchReadOnly' : 'gitBranches')
                   : selectL4LocalizedText(repository.message, locale)
               }
+              aria-label={t(gitReadOnly ? 'gitBranchReadOnly' : 'gitBranches')}
               onClick={() => onOpenGitBranches(root)}
             >
               <GitBranchIcon className="size-3 shrink-0" />
@@ -678,6 +682,98 @@ export function L3ProjectFileBrowser({
     repositories.length === 1 && repositories[0]?.root === '' ? repositories[0] : null
   const showLayoutToggle = repositories.length > 0 && !singleProjectRootRepository
   const effectiveLayout = showLayoutToggle ? (gitWorkspace?.layout ?? 'directory') : 'directory'
+  const rootBranchButton = singleProjectRootRepository ? (
+    <button
+      type="button"
+      disabled={gitReadOnly || singleProjectRootRepository.state !== 'ready'}
+      className={cn(
+        buttonVariants({ variant: 'ghost', size: 'sm' }),
+        'max-w-32 shrink gap-1 font-mono text-xs text-muted-foreground',
+        !showRootTitle && 'min-w-0 flex-1 justify-start'
+      )}
+      aria-label={t(gitReadOnly ? 'gitBranchReadOnly' : 'gitBranches')}
+      title={
+        singleProjectRootRepository.state === 'ready'
+          ? `${t(gitReadOnly ? 'gitBranchReadOnly' : 'gitBranches')} · ${getL3GitHeadLabel(singleProjectRootRepository.head)}`
+          : selectL4LocalizedText(singleProjectRootRepository.message, locale)
+      }
+      onClick={() => onOpenGitBranches('')}
+    >
+      <GitBranchIcon className="size-3 shrink-0" />
+      <span className="truncate">
+        {singleProjectRootRepository.state === 'ready'
+          ? getL3GitHeadLabel(singleProjectRootRepository.head)
+          : t('unavailable')}
+      </span>
+    </button>
+  ) : null
+
+  const controls = (
+    <div
+      className="flex min-h-8 min-w-0 flex-wrap items-center gap-x-1 gap-y-0.5 outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring"
+      tabIndex={showRootTitle ? undefined : 0}
+      aria-label={t('projectFiles', { name: projectName })}
+    >
+      {showLayoutToggle ? (
+        <div className="flex shrink-0 gap-0.5" role="group" aria-label={t('layout')}>
+          {(['directory', 'repository'] as const).map((layout) => (
+            <button
+              key={layout}
+              data-testid={`project-file-layout-${layout}`}
+              type="button"
+              aria-pressed={effectiveLayout === layout}
+              className={cn(
+                buttonVariants({ variant: 'ghost', size: 'sm' }),
+                effectiveLayout === layout && 'bg-accent text-accent-foreground'
+              )}
+              onClick={() => {
+                runtime.cancelDirectoryExpansion()
+                gitRuntime.setLayout(cwd, layout)
+              }}
+            >
+              {t(layout === 'directory' ? 'directory' : 'repository')}
+            </button>
+          ))}
+        </div>
+      ) : null}
+      {repositories.length > 0 ? (
+        <button
+          data-testid="project-git-changes-toggle"
+          type="button"
+          aria-pressed={gitWorkspace?.changesOnly ?? false}
+          className={cn(
+            buttonVariants({ variant: 'ghost', size: 'sm' }),
+            'min-w-0 gap-1',
+            gitWorkspace?.changesOnly && 'bg-accent text-accent-foreground'
+          )}
+          onClick={() => {
+            runtime.cancelDirectoryExpansion()
+            gitRuntime.setChangesOnly(cwd, !(gitWorkspace?.changesOnly ?? false))
+          }}
+        >
+          <ListFilterIcon className="size-3 shrink-0" />
+          <span className="truncate">{t('changesOnly')}</span>
+          <span className="rounded-md bg-muted px-1 font-mono text-xs">
+            {projectChanges.length}
+          </span>
+        </button>
+      ) : null}
+      {!showRootTitle ? rootBranchButton : null}
+      <button
+        ref={searchButtonRef}
+        type="button"
+        className={cn(buttonVariants({ variant: 'ghost', size: 'icon-sm' }), 'ml-auto')}
+        aria-label={t('searchProject')}
+        title={t('searchProject')}
+        onClick={() => {
+          setSearchOpen(true)
+          requestAnimationFrame(() => searchInputRef.current?.focus())
+        }}
+      >
+        <SearchIcon className="size-3.5" />
+      </button>
+    </div>
+  )
 
   return (
     <section
@@ -706,8 +802,42 @@ export function L3ProjectFileBrowser({
           }
         />
       ) : (
-        <div className="space-y-1.5 border-b px-2.5 py-2">
-          <div className="flex min-h-7 min-w-0 items-center gap-2">
+        <div className="border-b px-1">
+          {showRootTitle ? (
+            <div className="flex min-h-7 min-w-0 items-center gap-1">
+              <L3ProjectPathMenu
+                cwd={cwd}
+                path=""
+                type="directory"
+                onReveal={
+                  runtime.canReveal ? (path, type) => runtime.revealFile(path, type) : undefined
+                }
+                trigger={
+                  rootTitle ? (
+                    <div className="flex min-w-0 flex-1">{rootTitle}</div>
+                  ) : (
+                    <div tabIndex={0} className="flex min-w-0 flex-1 items-baseline gap-1">
+                      <p className="shrink-0 truncate text-xs font-semibold" title={projectName}>
+                        {projectName}
+                      </p>
+                      <span className="text-xs text-muted-foreground">·</span>
+                      <p
+                        className="min-w-0 truncate font-mono text-xs text-muted-foreground"
+                        title={cwd}
+                      >
+                        {compactPath(cwd)}
+                      </p>
+                    </div>
+                  )
+                }
+              />
+              {rootBranchButton}
+            </div>
+          ) : null}
+
+          {showRootTitle ? (
+            controls
+          ) : (
             <L3ProjectPathMenu
               cwd={cwd}
               path=""
@@ -715,113 +845,9 @@ export function L3ProjectFileBrowser({
               onReveal={
                 runtime.canReveal ? (path, type) => runtime.revealFile(path, type) : undefined
               }
-              trigger={
-                rootTitle ? (
-                  <div className="flex min-w-0 flex-1">{rootTitle}</div>
-                ) : (
-                  <div tabIndex={0} className="flex min-w-0 flex-1 items-baseline gap-1">
-                    <p className="shrink-0 truncate text-xs font-semibold" title={projectName}>
-                      {projectName}
-                    </p>
-                    <span className="text-xs text-muted-foreground">·</span>
-                    <p
-                      className="min-w-0 truncate font-mono text-xs text-muted-foreground"
-                      title={cwd}
-                    >
-                      {compactPath(cwd)}
-                    </p>
-                  </div>
-                )
-              }
+              trigger={controls}
             />
-            {singleProjectRootRepository ? (
-              <button
-                type="button"
-                disabled={gitReadOnly || singleProjectRootRepository.state !== 'ready'}
-                className={cn(
-                  buttonVariants({ variant: 'outline', size: 'sm' }),
-                  'max-w-32 shrink gap-1 font-mono text-xs text-muted-foreground'
-                )}
-                title={
-                  singleProjectRootRepository.state === 'ready'
-                    ? t(gitReadOnly ? 'gitBranchReadOnly' : 'gitBranches')
-                    : selectL4LocalizedText(singleProjectRootRepository.message, locale)
-                }
-                onClick={() => onOpenGitBranches('')}
-              >
-                <GitBranchIcon className="size-3 shrink-0" />
-                <span className="truncate">
-                  {singleProjectRootRepository.state === 'ready'
-                    ? getL3GitHeadLabel(singleProjectRootRepository.head)
-                    : t('unavailable')}
-                </span>
-              </button>
-            ) : null}
-          </div>
-
-          <div className="flex min-h-8 min-w-0 items-center gap-1.5">
-            {showLayoutToggle ? (
-              <div
-                className="flex shrink-0 rounded-md border bg-background/55 p-0.5"
-                role="group"
-                aria-label={t('layout')}
-              >
-                {(['directory', 'repository'] as const).map((layout) => (
-                  <button
-                    key={layout}
-                    data-testid={`project-file-layout-${layout}`}
-                    type="button"
-                    aria-pressed={effectiveLayout === layout}
-                    className={cn(
-                      buttonVariants({ variant: 'ghost', size: 'sm' }),
-                      effectiveLayout === layout && 'bg-accent text-accent-foreground'
-                    )}
-                    onClick={() => {
-                      runtime.cancelDirectoryExpansion()
-                      gitRuntime.setLayout(cwd, layout)
-                    }}
-                  >
-                    {t(layout === 'directory' ? 'directory' : 'repository')}
-                  </button>
-                ))}
-              </div>
-            ) : null}
-            {repositories.length > 0 ? (
-              <button
-                data-testid="project-git-changes-toggle"
-                type="button"
-                aria-pressed={gitWorkspace?.changesOnly ?? false}
-                className={cn(
-                  buttonVariants({ variant: 'outline', size: 'sm' }),
-                  'min-w-0 gap-1',
-                  gitWorkspace?.changesOnly && 'bg-accent text-accent-foreground'
-                )}
-                onClick={() => {
-                  runtime.cancelDirectoryExpansion()
-                  gitRuntime.setChangesOnly(cwd, !(gitWorkspace?.changesOnly ?? false))
-                }}
-              >
-                <ListFilterIcon className="size-3 shrink-0" />
-                <span className="truncate">{t('changesOnly')}</span>
-                <span className="rounded-md bg-muted px-1 font-mono text-xs">
-                  {projectChanges.length}
-                </span>
-              </button>
-            ) : null}
-            <button
-              ref={searchButtonRef}
-              type="button"
-              className={cn(buttonVariants({ variant: 'outline', size: 'icon-sm' }), 'ml-auto')}
-              aria-label={t('searchProject')}
-              title={t('searchProject')}
-              onClick={() => {
-                setSearchOpen(true)
-                requestAnimationFrame(() => searchInputRef.current?.focus())
-              }}
-            >
-              <SearchIcon className="size-3.5" />
-            </button>
-          </div>
+          )}
         </div>
       )}
 
@@ -852,8 +878,8 @@ export function L3ProjectFileBrowser({
         />
       ) : (
         <L4ScrollArea
-          className="min-h-0 flex-1"
-          viewportClassName="py-1.5"
+          className={cn(styles.tree, 'min-h-0 flex-1')}
+          viewportClassName="py-0.5"
           viewportRef={scrollRef}
           onViewportScroll={(event) => runtime.setTreeScrollTop(event.currentTarget.scrollTop)}
         >

package/src/client/l3_modules/project-files/l3-project-file-tabs.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import { ChevronDownIcon, ChevronUpIcon, FileCode2Icon, XIcon } from 'lucide-react'
-import { useLayoutEffect, useRef, useState, useSyncExternalStore } from 'react'
+import { useLayoutEffect, useRef, useState, useSyncExternalStore, type ReactNode } from 'react'
 import { useTranslation } from 'react-i18next'
 import { cn } from '@client/l4_foundation/lib/l4-utils'
 import { Button } from '@client/l4_foundation/ui/shadcn/button'
@@ -23,6 +23,7 @@ interface L3ProjectFileTabsProps {
   activePath: string | null
   diffPath: string | null
   mobile: boolean
+  actions?: ReactNode
   onActivate: (path: string) => void
   onClose: (path: string | null, scope: L3FileTabCloseScope) => void
 }
@@ -49,6 +50,7 @@ export function L3ProjectFileTabs({
   activePath,
   diffPath,
   mobile,
+  actions,
   onActivate,
   onClose
 }: L3ProjectFileTabsProps): React.JSX.Element | null {
@@ -60,7 +62,9 @@ export function L3ProjectFileTabs({
   const [expanded, setExpanded] = useState(false)
   const [overflow, setOverflow] = useState(false)
   const [clippedIndexes, setClippedIndexes] = useState<readonly number[]>([])
-  const maxHeight = (mobile ? 2 : 3) * 36
+  const merged = actions !== undefined
+  const rowHeight = merged && !mobile ? 32 : 36
+  const maxHeight = (mobile ? 2 : 3) * rowHeight
   const tabs: { path: string | null; label: string; title: string }[] = paths.map((path) => ({
     path,
     label: fileLabel(path, paths),
@@ -95,8 +99,14 @@ export function L3ProjectFileTabs({
 
   if (tabs.length === 0) return null
   return (
-    <div className="shrink-0 border-b bg-muted" data-testid="file-tabs">
-      <div className="overflow-hidden" style={{ maxHeight: expanded ? undefined : maxHeight }}>
+    <div
+      className={cn('shrink-0 bg-muted', merged ? 'flex flex-wrap items-start' : 'border-b')}
+      data-testid="file-tabs"
+    >
+      <div
+        className={cn('overflow-hidden', merged && 'min-w-0 flex-[1_1_12rem]')}
+        style={{ maxHeight: expanded ? undefined : maxHeight }}
+      >
         <div
           ref={rowsRef}
           role="tablist"
@@ -137,7 +147,8 @@ export function L3ProjectFileTabs({
                       inert={clipped || undefined}
                       title={tab.title}
                       className={cn(
-                        'flex h-9 max-w-full items-center border-r border-b text-sm',
+                        'flex max-w-full items-center text-sm',
+                        merged ? (mobile ? 'h-9' : 'h-8') : 'h-9 border-r border-b',
                         mobile ? 'w-[min(50%,12rem)]' : 'max-w-60',
                         clipped && 'invisible',
                         selected
@@ -154,7 +165,7 @@ export function L3ProjectFileTabs({
                     type="button"
                     role="tab"
                     aria-selected={selected}
-                    className="flex h-9 min-w-0 flex-1 cursor-pointer items-center gap-2 pl-3 pr-1 outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring"
+                    className="flex h-full min-w-0 flex-1 cursor-pointer items-center gap-2 pl-3 pr-1 outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring"
                     onClick={() => {
                       if (suppressTouchClickRef.current) {
                         suppressTouchClickRef.current = false
@@ -260,6 +271,15 @@ export function L3ProjectFileTabs({
           })}
         </div>
       </div>
+      {merged && actions ? (
+        <div
+          className="ml-auto flex min-h-8 max-w-full flex-wrap items-center justify-end gap-1 px-1"
+          role="group"
+          aria-label={t('fileActions')}
+        >
+          {actions}
+        </div>
+      ) : null}
       {overflow ? (
         <Button
           variant="ghost"

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

@@ -59,65 +59,54 @@ export function L3ProjectSearchControls({
   )
 
   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>
+    <div className="shrink-0 px-1 pt-1">
+      <InputGroup className="rounded-md">
+        <InputGroupAddon className="pl-1.5 py-0">
+          <SearchIcon className="size-3.5" />
+        </InputGroupAddon>
+        <InputGroupInput
+          ref={inputRef}
+          data-testid="project-file-search"
+          className="min-h-7 min-w-0 px-1.5 py-0.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="pr-0.5 py-0 has-[>button]:mr-0">
           <Tooltip>
             <TooltipTrigger
               render={
-                <Button
-                  type="button"
-                  variant="ghost"
-                  size="icon-sm"
-                  className="size-7 shrink-0"
+                <InputGroupButton
+                  size="icon-xs"
+                  className="min-h-7"
                   aria-label={t('closeSearch')}
                   onClick={onClose}
                 />
@@ -127,74 +116,80 @@ export function L3ProjectSearchControls({
             </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') {
+        </InputGroupAddon>
+      </InputGroup>
+      <div className="flex min-h-7 flex-wrap items-center justify-between gap-x-1">
+        <div className="flex min-w-0 items-center" 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(
+                'px-1 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()
-                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>
+                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>
+        <div className="ml-auto flex items-center">
+          {OPTIONS.map(({ key, label, text }) => (
+            <Tooltip key={key}>
+              <TooltipTrigger
+                render={
+                  <Button
+                    type="button"
+                    variant="ghost"
+                    size="icon-sm"
+                    disabled={composition !== null}
+                    aria-label={t(label)}
+                    aria-pressed={input[key]}
+                    data-testid={`project-search-option-${key}`}
+                    className={cn(
+                      'font-mono text-xs text-muted-foreground',
+                      key === 'wholeWord' && 'underline underline-offset-4'
+                    )}
+                    onClick={() => onOptionsChange({ [key]: !input[key] })}
+                  />
+                }
+              >
+                {text}
+              </TooltipTrigger>
+              <TooltipContent>{t(label)}</TooltipContent>
+            </Tooltip>
+          ))}
+        </div>
       </div>
     </div>
   )