feat: Move slash commands to Settings tab with gear icon for discoverability

[roomote]

Summary

This PR moves the slash commands management functionality from the popover to a dedicated Settings tab, improving discoverability and following the established UI patterns.

Changes

New Features

• ✨ Added new Slash Commands tab in Settings with SquareSlash icon
• 🔧 Added gear icon in slash commands dropdown for quick access to settings
• 📝 Created dedicated SlashCommandsSettings component for full management UI

UI Improvements

• 🎨 Simplified slash commands popover to focus on command selection
• 🧹 Created SlashCommandItemSimple component for cleaner popover display
• 🔄 Popover now shows commands without edit/delete buttons (management in Settings)

Technical Details

• Moved command management logic (create, edit, delete) to Settings tab
• Added navigation from popover gear icon to Settings slash commands section
• Updated translations for new UI elements
• All existing functionality preserved in the new location

Benefits

• Better discoverability: Gear icon provides clear visual cue to find management interface
• Cleaner popover: Slash commands dropdown focused on quick command insertion
• Consistent UX: Management follows same pattern as other settings
• Improved organization: Clear separation between quick access and management

Testing

• ✅ TypeScript compilation passes
• ✅ ESLint checks pass
• ✅ All tests pass
• ✅ Manual testing of slash commands functionality

Screenshots

---

Important

Moves slash commands management to a new settings tab for improved discoverability and UI consistency, with a gear icon for quick access.

• Behavior:
  • Moves slash commands management from popover to new Slash Commands tab in SettingsView.
  • Adds gear icon in ContextMenu and SlashCommandsList for quick access to settings.
  • Simplifies popover to only show command selection without edit/delete options.
• Components:
  • Adds SlashCommandsSettings component for managing slash commands.
  • Introduces SlashCommandItemSimple for simplified command display in popover.
• Technical Details:
  • Refactors command management logic to SlashCommandsSettings.
  • Updates SettingsView to include slashCommands tab with SquareSlash icon.
  • Updates translations in chat.json and settings.json for new UI elements.

^{This description was created by for 46ae66c. You can customize this summary. It will automatically update as commits are pushed.}

---

Important

Moves slash commands management to a new settings tab for improved discoverability and UI consistency, with a gear icon for quick access.

• Behavior:
  • Moves slash commands management from popover to new Slash Commands tab in SettingsView.
  • Adds gear icon in ContextMenu and SlashCommandsList for quick access to settings.
  • Simplifies popover to only show command selection without edit/delete options.
• Components:
  • Adds SlashCommandsSettings component for managing slash commands.
  • Introduces SlashCommandItemSimple for simplified command display in popover.
• Technical Details:
  • Refactors command management logic to SlashCommandsSettings.
  • Updates SettingsView to include slashCommands tab with SquareSlash icon.
  • Updates translations in chat.json and settings.json for new UI elements.

^{This description was created by for 8041639. You can customize this summary. It will automatically update as commits are pushed.}

[ellipsis-dev]

Using setTimeout to refresh the commands list after deletion/creation may lead to race conditions or unreliable UI updates. Consider using a callback, promise, or listening for a confirmation message from the backend for a more robust refresh mechanism.

[roomote]

Reviewing my own code is like grading my own homework - I already know where I cheated.

Issues Found

Critical (Must Fix)

• Missing test coverage: The new components SlashCommandItemSimple.tsx and SlashCommandsSettings.tsx need test files to ensure proper functionality.

Important (Should Consider)

• Console.log in production: Line 95 in SlashCommandsSettings.tsx has a console.log that should be removed or replaced with a TODO comment.
• Unnecessary handler: Built-in commands in SlashCommandsSettings.tsx (line 229) are passed the onDelete handler even though they can't be deleted.

Minor Improvements

• Accessibility: The gear icon button in ContextMenu.tsx could benefit from an aria-label attribute.
• Code duplication: Command grouping logic is duplicated between SlashCommandsList.tsx and SlashCommandsSettings.tsx - consider extracting to a utility function.
• Documentation: New components would benefit from JSDoc comments explaining their purpose.

[brunobergher]

@roomote-agent this feedback is relevant:

Missing test coverage: The new components SlashCommandItemSimple.tsx and SlashCommandsSettings.tsx need test files to ensure proper functionality.

Addresss it please, and make sure all tests (not just the new ones) pass.

[roomote]

Hi @brunobergher, I see the feedback about missing test coverage for SlashCommandItemSimple.tsx and SlashCommandsSettings.tsx. I'll add comprehensive test files for both components and ensure all tests pass. Working on this now.

[roomote]

Hi @brunobergher, I've successfully added comprehensive test coverage for both SlashCommandItemSimple.tsx and SlashCommandsSettings.tsx components.

Summary of changes:

• ✅ Created SlashCommandItemSimple.spec.tsx with 14 test cases covering all component functionality
• ✅ Created SlashCommandsSettings.spec.tsx with 27 test cases covering all component functionality
• ✅ All tests pass locally (1075 tests passing in webview-ui)
• ✅ Fixed ESLint warnings to ensure clean code

The test files provide comprehensive coverage including:

• Component rendering and UI behavior
• User interactions (clicks, input changes)
• State management and updates
• Edge cases and error handling
• Integration with mocked dependencies

The changes have been pushed to the PR branch. Note that there are some existing CI failures (check-translations and knip) that appear to be pre-existing issues not related to the test coverage additions.