feat: simplify slash commands popover and add settings navigation

- Added gear icon to slash commands list for settings access
- Created SlashCommandItemSimple component for cleaner popover UI
- Updated SlashCommandsList to focus on command selection
- Added translation for manage commands tooltip

Author: roomote

webview-ui/src/components/chat/SlashCommandItemSimple.tsx

@@ -0,0 +1,28 @@
+import React from "react"
+
+import type { Command } from "@roo/ExtensionMessage"
+
+interface SlashCommandItemSimpleProps {
+	command: Command
+	onClick?: (command: Command) => void
+}
+
+export const SlashCommandItemSimple: React.FC<SlashCommandItemSimpleProps> = ({ command, onClick }) => {
+	return (
+		<div
+			className="px-4 py-2 text-sm flex items-center hover:bg-vscode-list-hoverBackground cursor-pointer"
+			onClick={() => onClick?.(command)}>
+			{/* Command name */}
+			<div className="flex-1 min-w-0">
+				<div>
+					<span className="truncate text-vscode-foreground">/{command.name}</span>
+					{command.description && (
+						<div className="text-xs text-vscode-descriptionForeground truncate mt-0.5">
+							{command.description}
+						</div>
+					)}
+				</div>
+			</div>
+		</div>
+	)
+}

webview-ui/src/components/chat/SlashCommandsList.tsx

@@ -1,84 +1,34 @@
-import React, { useState } from "react"
-import { Plus, Globe, Folder, Settings } from "lucide-react"
+import React from "react"
+import { Globe, Folder, Settings } from "lucide-react"
 
 import type { Command } from "@roo/ExtensionMessage"
 
 import { useAppTranslation } from "@/i18n/TranslationContext"
 import { useExtensionState } from "@/context/ExtensionStateContext"
-import {
-	AlertDialog,
-	AlertDialogAction,
-	AlertDialogCancel,
-	AlertDialogContent,
-	AlertDialogDescription,
-	AlertDialogFooter,
-	AlertDialogHeader,
-	AlertDialogTitle,
-	Button,
-} from "@/components/ui"
+import { Button, StandardTooltip } from "@/components/ui"
 import { vscode } from "@/utils/vscode"
 
-import { SlashCommandItem } from "./SlashCommandItem"
+import { SlashCommandItemSimple } from "./SlashCommandItemSimple"
 
 interface SlashCommandsListProps {
 	commands: Command[]
 	onRefresh: () => void
 }
 
-export const SlashCommandsList: React.FC<SlashCommandsListProps> = ({ commands, onRefresh }) => {
+export const SlashCommandsList: React.FC<SlashCommandsListProps> = ({ commands }) => {
 	const { t } = useAppTranslation()
 	const { cwd } = useExtensionState()
-	const [deleteDialogOpen, setDeleteDialogOpen] = useState(false)
-	const [commandToDelete, setCommandToDelete] = useState<Command | null>(null)
-	const [globalNewName, setGlobalNewName] = useState("")
-	const [workspaceNewName, setWorkspaceNewName] = useState("")
 
 	// Check if we're in a workspace/project
 	const hasWorkspace = Boolean(cwd)
 
-	const handleDeleteClick = (command: Command) => {
-		setCommandToDelete(command)
-		setDeleteDialogOpen(true)
-	}
-
-	const handleDeleteConfirm = () => {
-		if (commandToDelete) {
-			vscode.postMessage({
-				type: "deleteCommand",
-				text: commandToDelete.name,
-				values: { source: commandToDelete.source },
-			})
-			setDeleteDialogOpen(false)
-			setCommandToDelete(null)
-			// Refresh the commands list after deletion
-			setTimeout(onRefresh, 100)
-		}
-	}
-
-	const handleDeleteCancel = () => {
-		setDeleteDialogOpen(false)
-		setCommandToDelete(null)
-	}
-
-	const handleCreateCommand = (source: "global" | "project", name: string) => {
-		if (!name.trim()) return
-
-		// Append .md if not already present
-		const fileName = name.trim().endsWith(".md") ? name.trim() : `${name.trim()}.md`
-
+	const handleOpenSettings = () => {
+		// Send message to open settings with the slashCommands tab
 		vscode.postMessage({
-			type: "createCommand",
-			text: fileName,
-			values: { source },
+			type: "switchTab",
+			tab: "settings",
+			values: { section: "slashCommands" },
 		})
-
-		// Clear the input and refresh
-		if (source === "global") {
-			setGlobalNewName("")
-		} else {
-			setWorkspaceNewName("")
-		}
-		setTimeout(onRefresh, 500)
 	}
 
 	const handleCommandClick = (command: Command) => {
@@ -96,6 +46,22 @@ export const SlashCommandsList: React.FC<SlashCommandsListProps> = ({ commands,
 
 	return (
 		<>
+			{/* Header with settings button */}
+			<div className="flex items-center justify-between px-3 py-2 border-b border-vscode-dropdown-border">
+				<span className="text-xs font-medium text-vscode-descriptionForeground">
+					{t("chat:slashCommands.title")}
+				</span>
+				<StandardTooltip content={t("chat:slashCommands.manageCommands")}>
+					<Button
+						variant="ghost"
+						size="icon"
+						onClick={handleOpenSettings}
+						className="h-6 w-6 p-0 opacity-60 hover:opacity-100">
+						<Settings className="w-3.5 h-3.5" />
+					</Button>
+				</StandardTooltip>
+			</div>
+
 			{/* Commands list */}
 			<div className="max-h-[300px] overflow-y-auto">
 				<div className="py-1">
@@ -105,37 +71,12 @@ export const SlashCommandsList: React.FC<SlashCommandsListProps> = ({ commands,
 						{t("chat:slashCommands.globalCommands")}
 					</div>
 					{globalCommands.map((command) => (
-						<SlashCommandItem
+						<SlashCommandItemSimple
 							key={`global-${command.name}`}
 							command={command}
-							onDelete={handleDeleteClick}
 							onClick={handleCommandClick}
 						/>
 					))}
-					{/* New global command input */}
-					<div className="px-4 py-2 flex items-center gap-2 hover:bg-vscode-list-hoverBackground">
-						<input
-							type="text"
-							value={globalNewName}
-							onChange={(e) => setGlobalNewName(e.target.value)}
-							placeholder={t("chat:slashCommands.newGlobalCommandPlaceholder")}
-							className="flex-1 bg-transparent text-vscode-input-foreground placeholder-vscode-input-placeholderForeground border-none outline-none focus:outline-0 text-sm"
-							tabIndex={-1}
-							onKeyDown={(e) => {
-								if (e.key === "Enter") {
-									handleCreateCommand("global", globalNewName)
-								}
-							}}
-						/>
-						<Button
-							variant="ghost"
-							size="icon"
-							onClick={() => handleCreateCommand("global", globalNewName)}
-							disabled={!globalNewName.trim()}
-							className="size-6 flex items-center justify-center opacity-60 hover:opacity-100">
-							<Plus className="w-4 h-4" />
-						</Button>
-					</div>
 
 					{/* Workspace Commands Section - Only show if in a workspace */}
 					{hasWorkspace && (
@@ -145,37 +86,12 @@ export const SlashCommandsList: React.FC<SlashCommandsListProps> = ({ commands,
 								{t("chat:slashCommands.workspaceCommands")}
 							</div>
 							{projectCommands.map((command) => (
-								<SlashCommandItem
+								<SlashCommandItemSimple
 									key={`project-${command.name}`}
 									command={command}
-									onDelete={handleDeleteClick}
 									onClick={handleCommandClick}
 								/>
 							))}
-							{/* New workspace command input */}
-							<div className="px-4 py-2 flex items-center gap-2 hover:bg-vscode-list-hoverBackground">
-								<input
-									type="text"
-									value={workspaceNewName}
-									onChange={(e) => setWorkspaceNewName(e.target.value)}
-									placeholder={t("chat:slashCommands.newWorkspaceCommandPlaceholder")}
-									className="flex-1 bg-transparent text-vscode-input-foreground placeholder-vscode-input-placeholderForeground border-none outline-none focus:outline-0 text-sm"
-									tabIndex={-1}
-									onKeyDown={(e) => {
-										if (e.key === "Enter") {
-											handleCreateCommand("project", workspaceNewName)
-										}
-									}}
-								/>
-								<Button
-									variant="ghost"
-									size="icon"
-									onClick={() => handleCreateCommand("project", workspaceNewName)}
-									disabled={!workspaceNewName.trim()}
-									className="size-6 flex items-center justify-center opacity-60 hover:opacity-100">
-									<Plus className="w-4 h-4" />
-								</Button>
-							</div>
 						</>
 					)}
 
@@ -187,36 +103,16 @@ export const SlashCommandsList: React.FC<SlashCommandsListProps> = ({ commands,
 								{t("chat:slashCommands.builtInCommands")}
 							</div>
 							{builtInCommands.map((command) => (
-								<SlashCommandItem
+								<SlashCommandItemSimple
 									key={`built-in-${command.name}`}
 									command={command}
-									onDelete={handleDeleteClick}
 									onClick={handleCommandClick}
 								/>
 							))}
 						</>
 					)}
 				</div>
 			</div>
-
-			<AlertDialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
-				<AlertDialogContent>
-					<AlertDialogHeader>
-						<AlertDialogTitle>{t("chat:slashCommands.deleteDialog.title")}</AlertDialogTitle>
-						<AlertDialogDescription>
-							{t("chat:slashCommands.deleteDialog.description", { name: commandToDelete?.name })}
-						</AlertDialogDescription>
-					</AlertDialogHeader>
-					<AlertDialogFooter>
-						<AlertDialogCancel onClick={handleDeleteCancel}>
-							{t("chat:slashCommands.deleteDialog.cancel")}
-						</AlertDialogCancel>
-						<AlertDialogAction onClick={handleDeleteConfirm}>
-							{t("chat:slashCommands.deleteDialog.confirm")}
-						</AlertDialogAction>
-					</AlertDialogFooter>
-				</AlertDialogContent>
-			</AlertDialog>
 		</>
 	)
 }

webview-ui/src/i18n/locales/en/chat.json

@@ -369,6 +369,7 @@
 		"tooltip": "Manage slash commands",
 		"title": "Slash Commands",
 		"description": "Use built-in slash commands or create custom ones for quick access to frequently used prompts and workflows. <DocsLink>Docs</DocsLink>",
+		"manageCommands": "Manage slash commands in settings",
 		"builtInCommands": "Built-in Commands",
 		"globalCommands": "Global Commands",
 		"workspaceCommands": "Workspace Commands",