scriptoriumadmin/Roo-Code
1
0
Fork 0
mirror of https://github.com/RooVetGit/Roo-Code.git synced 2026-09-10 22:41:14 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

refine: improve scope indicator display for modes

Browse source 
- Change all scope badges to lowercase text ('project' / 'global')
- Remove scope badge from selected mode button in chat UI for cleaner appearance
- Add scope badge to all modes (built-in and custom) in dropdown menus
- Keep scope badge visible in modes settings page for clarity
- Remove scope badge from mode name label in modes editor

These changes improve visual consistency and reduce UI clutter while
maintaining clear scope indicators where they're most useful.
This commit is contained in:
heyseth 2025-10-13 14:52:35 -07:00
parent 2e10c139bc
commit ab017dbb2f
2 changed files with 9 additions and 36 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
webview-ui/src/components/chat/ModeSelector.tsx
View file

@ -210,13 +210,6 @@ export const ModeSelector = ({
: null,
)}>
<span className="truncate">{selectedMode?.name || ""}</span>
{selectedMode?.source && (
<span className="text-[10px] px-1 py-0.5 rounded bg-vscode-badge-background text-vscode-badge-foreground">
{selectedMode.source === "project"
? t("common:customModes.scope.project")
: t("common:customModes.scope.global")}
</span>
)}
</PopoverTrigger>
</StandardTooltip>
<PopoverContent
@ -262,7 +255,6 @@ export const ModeSelector = ({
<div className="py-1">
{filteredModes.map((mode) => {
const isSelected = mode.slug === value
const isCustomMode = mode.source !== undefined
return (
<div
key={mode.slug}
@ -279,13 +271,9 @@ export const ModeSelector = ({
<div className="flex-1 min-w-0">
<div className="flex items-center gap-1.5">
<span className="font-bold truncate">{mode.name}</span>
{isCustomMode && (
<span className="text-[10px] px-1 py-0.5 rounded bg-vscode-badge-background text-vscode-badge-foreground">
{mode.source === "project"
? t("common:scope.project")
: t("common:scope.global")}
</span>
)}
<span className="text-[10px] px-1 py-0.5 rounded bg-vscode-badge-background text-vscode-badge-foreground">
{mode.source === "project" ? "project" : "global"}
</span>
</div>
{mode.description && (
<div className="text-xs text-vscode-descriptionForeground truncate">

27
webview-ui/src/components/modes/ModesView.tsx
View file

@ -623,11 +623,9 @@ const ModesView = ({ onDone }: ModesViewProps) => {
<span className="truncate">
{getCurrentMode()?.name || t("prompts:modes.selectMode")}
</span>
{getCurrentMode()?.source && (
{getCurrentMode() && (
<span className="text-[10px] px-1 py-0.5 rounded bg-vscode-badge-background text-vscode-badge-foreground">
{getCurrentMode()?.source === "project"
? t("common:scope.project")
: t("common:scope.global")}
{getCurrentMode()?.source === "project" ? "project" : "global"}
</span>
)}
</div>
@ -691,13 +689,9 @@ const ModesView = ({ onDone }: ModesViewProps) => {
}}>
{modeConfig.name}
</span>
{modeConfig.source && (
<span className="text-[10px] px-1 py-0.5 rounded bg-vscode-badge-background text-vscode-badge-foreground">
{modeConfig.source === "project"
? t("common:scope.project")
: t("common:scope.global")}
</span>
)}
<span className="text-[10px] px-1 py-0.5 rounded bg-vscode-badge-background text-vscode-badge-foreground">
{modeConfig.source === "project" ? "project" : "global"}
</span>
</div>
<span
className="text-foreground"
@ -758,16 +752,7 @@ const ModesView = ({ onDone }: ModesViewProps) => {
{visualMode && findModeBySlug(visualMode, customModes) && (
<div className="flex gap-3 mb-4">
<div className="flex-1">
<div className="flex items-center gap-1.5 mb-1">
<span className="font-bold">{t("prompts:createModeDialog.name.label")}</span>
{findModeBySlug(visualMode, customModes)?.source && (
<span className="text-[10px] px-1 py-0.5 rounded bg-vscode-badge-background text-vscode-badge-foreground">
{findModeBySlug(visualMode, customModes)?.source === "project"
? t("common:customModes.scope.project")
: t("common:customModes.scope.global")}
</span>
)}
</div>
<div className="font-bold mb-1">{t("prompts:createModeDialog.name.label")}</div>
<div className="flex gap-2">
<Input
type="text"