scriptoriumadmin/Roo-Code
1
0
Fork 0
mirror of https://github.com/RooVetGit/Roo-Code.git synced 2026-09-06 08:18:39 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Settings header restyling

Browse source
This commit is contained in:
Bruno Bergher 2026-01-10 09:19:01 +00:00
parent a48981f144
commit 461494a3cc
5 changed files with 36 additions and 32 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
webview-ui/src/components/settings/SettingsSearchInput.tsx
View file

@ -15,8 +15,8 @@ export function SettingsSearchInput({ value, onChange, onFocus, onBlur }: Settin
const { t } = useAppTranslation()
return (
<div className="relative flex-1 max-w-xs">
<Search className="absolute left-2.5 top-1/2 -translate-y-1/2 h-4 w-4 text-vscode-descriptionForeground pointer-events-none" />
<div className="relative flex justify-end ml-2">
<Search className="absolute left-2.5 top-1/2 -translate-y-1/2 size-4 text-vscode-descriptionForeground pointer-events-none" />
<Input
data-testid="settings-search-input"
type="text"
@ -25,15 +25,18 @@ export function SettingsSearchInput({ value, onChange, onFocus, onBlur }: Settin
onFocus={onFocus}
onBlur={onBlur}
placeholder={t("settings:search.placeholder")}
className={cn("pl-8", value && "pr-8")}
className={cn(
"pl-6 w-[0px] focus:pl-8 focus:min-w-[130px] focus:w-full active:w-full",
value && "pr-8",
)}
/>
{value && (
<button
type="button"
onClick={() => onChange("")}
className="absolute right-2.5 top-1/2 -translate-y-1/2 h-4 w-4 text-vscode-descriptionForeground hover:text-vscode-foreground focus:outline-none"
className="absolute cursor-pointer right-2.5 top-1/2 -translate-y-1/2 size-4 text-vscode-descriptionForeground hover:text-vscode-foreground focus:outline-none"
aria-label="Clear search">
<X className="h-4 w-4" />
<X className="size-4" />
</button>
)}
</div>

2
webview-ui/src/components/settings/SettingsSearchResults.tsx
View file

@ -33,7 +33,7 @@ function HighlightMatch({ text, query }: HighlightMatchProps) {
<>
{parts.map((part, index) =>
regex.test(part) ? (
<mark key={index} className="bg-vscode-editor-findMatchHighlightBackground text-inherit">
<mark key={index} className="bg-vscode-input-foreground/20 rounded-xs text-inherit">
{part}
</mark>
) : (

49
webview-ui/src/components/settings/SettingsView.tsx
View file

@ -28,6 +28,7 @@ import {
Plug,
Server,
Users2,
ArrowLeft,
} from "lucide-react"
import {
@ -599,26 +600,31 @@ const SettingsView = forwardRef<SettingsViewRef, SettingsViewProps>(({ onDone, t
return (
<Tab>
<TabHeader className="flex justify-between items-center gap-2">
<div className="flex items-center gap-2">
<div className="flex items-center gap-2 grow">
<StandardTooltip content={t("settings:header.doneButtonTooltip")}>
<Button variant="ghost" className="px-1.5 -ml-2" onClick={() => checkUnsaveChanges(onDone)}>
<ArrowLeft />
</Button>
</StandardTooltip>
<h3 className="text-vscode-foreground m-0 flex-shrink-0">{t("settings:header.title")}</h3>
<div className="relative flex-1 max-w-xs">
<SettingsSearchInput
value={searchQuery}
onChange={setSearchQuery}
onFocus={() => setIsSearchFocused(true)}
onBlur={() => setTimeout(() => setIsSearchFocused(false), 200)}
/>
{searchQuery && isSearchFocused && (
<div className="absolute top-full left-0 right-0 mt-1 bg-vscode-dropdown-background border border-vscode-dropdown-border rounded shadow-lg z-50">
<SettingsSearchResults
results={searchResults}
query={searchQuery}
onSelectResult={handleSelectResult}
sections={sections}
/>
</div>
)}
</div>
</div>
<div className="relative justify-end">
<SettingsSearchInput
value={searchQuery}
onChange={setSearchQuery}
onFocus={() => setIsSearchFocused(true)}
onBlur={() => setTimeout(() => setIsSearchFocused(false), 200)}
/>
{searchQuery && isSearchFocused && (
<div className="absolute top-full left-0 right-0 mt-1 bg-vscode-dropdown-background border border-vscode-dropdown-border rounded shadow-lg z-50">
<SettingsSearchResults
results={searchResults}
query={searchQuery}
onSelectResult={handleSelectResult}
sections={sections}
/>
</div>
)}
</div>
<div className="flex gap-2 flex-shrink-0">
<StandardTooltip
@ -638,11 +644,6 @@ const SettingsView = forwardRef<SettingsViewRef, SettingsViewProps>(({ onDone, t
{t("settings:common.save")}
</Button>
</StandardTooltip>
<StandardTooltip content={t("settings:header.doneButtonTooltip")}>
<Button variant="secondary" onClick={() => checkUnsaveChanges(onDone)}>
{t("settings:common.done")}
</Button>
</StandardTooltip>
</div>
</TabHeader>

2
webview-ui/src/components/ui/input.tsx
View file

@ -8,7 +8,7 @@ const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<"input">>(
<input
type={type}
className={cn(
"flex w-full text-vscode-input-foreground border border-vscode-dropdown-border bg-vscode-input-background rounded-xs px-3 py-1 text-base transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus:outline-0 focus-visible:outline-none focus-visible:border-vscode-focusBorder disabled:cursor-not-allowed disabled:opacity-50",
"flex w-full text-vscode-input-foreground border border-vscode-dropdown-border bg-vscode-input-background rounded-full px-3 py-1 text-base transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus:outline-0 focus-visible:outline-none focus-visible:border-vscode-focusBorder disabled:cursor-not-allowed disabled:opacity-50",
className,
)}
ref={ref}

2
webview-ui/src/i18n/locales/en/settings.json
View file

@ -1,6 +1,6 @@
{
"search": {
"placeholder": "Search settings...",
"placeholder": "Find setting...",
"noResults": "No results found for \"{{query}}\""
},
"common": {