feat: enhance project-specific slash commands management

- Add scopeFilter prop to SlashCommandsManager for filtering by scope
- Replace browser confirm() with proper delete confirmation dialog
- Fix slash_command_delete to handle project commands with project_path param
- Add Slash Commands tab to ProjectSettings as the default tab
- Add Commands button to ClaudeCodeSession for quick access
- Improve error handling and user feedback for delete operations
- Better UI text when showing project-specific commands only

Author: 123vivekr

src-tauri/src/commands/slash_commands.rs

@@ -416,11 +416,25 @@ pub async fn slash_command_save(
 
 /// Delete a slash command
 #[tauri::command]
-pub async fn slash_command_delete(command_id: String) -> Result<String, String> {
+pub async fn slash_command_delete(command_id: String, project_path: Option<String>) -> Result<String, String> {
     info!("Deleting slash command: {}", command_id);
 
-    // Get the command to find its file path
-    let command = slash_command_get(command_id.clone()).await?;
+    // First, we need to determine if this is a project command by parsing the ID
+    let is_project_command = command_id.starts_with("project-");
+    
+    // If it's a project command and we don't have a project path, error out
+    if is_project_command && project_path.is_none() {
+        return Err("Project path required to delete project commands".to_string());
+    }
+    
+    // List all commands (including project commands if applicable)
+    let commands = slash_commands_list(project_path).await?;
+    
+    // Find the command by ID
+    let command = commands
+        .into_iter()
+        .find(|cmd| cmd.id == command_id)
+        .ok_or_else(|| format!("Command not found: {}", command_id))?;
 
     // Delete the file
     fs::remove_file(&command.file_path)

src/components/ClaudeCodeSession.tsx

@@ -10,7 +10,8 @@ import {
   Settings,
   ChevronUp,
   X,
-  Hash
+  Hash,
+  Command
 } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
@@ -25,6 +26,7 @@ import { FloatingPromptInput, type FloatingPromptInputRef } from "./FloatingProm
 import { ErrorBoundary } from "./ErrorBoundary";
 import { TimelineNavigator } from "./TimelineNavigator";
 import { CheckpointSettings } from "./CheckpointSettings";
+import { SlashCommandsManager } from "./SlashCommandsManager";
 import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter } from "@/components/ui/dialog";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
 import { SplitPane } from "@/components/ui/split-pane";
@@ -87,6 +89,7 @@ export const ClaudeCodeSession: React.FC<ClaudeCodeSessionProps> = ({
   const [timelineVersion, setTimelineVersion] = useState(0);
   const [showSettings, setShowSettings] = useState(false);
   const [showForkDialog, setShowForkDialog] = useState(false);
+  const [showSlashCommandsSettings, setShowSlashCommandsSettings] = useState(false);
   const [forkCheckpointId, setForkCheckpointId] = useState<string | null>(null);
   const [forkSessionName, setForkSessionName] = useState("");
 
@@ -995,6 +998,17 @@ export const ClaudeCodeSession: React.FC<ClaudeCodeSessionProps> = ({
                 Hooks
               </Button>
             )}
+            {projectPath && (
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={() => setShowSlashCommandsSettings(true)}
+                disabled={isLoading}
+              >
+                <Command className="h-4 w-4 mr-2" />
+                Commands
+              </Button>
+            )}
             <div className="flex items-center gap-2">
               {showSettings && (
                 <CheckpointSettings
@@ -1386,6 +1400,23 @@ export const ClaudeCodeSession: React.FC<ClaudeCodeSessionProps> = ({
           </DialogContent>
         </Dialog>
       )}
+
+      {/* Slash Commands Settings Dialog */}
+      {showSlashCommandsSettings && (
+        <Dialog open={showSlashCommandsSettings} onOpenChange={setShowSlashCommandsSettings}>
+          <DialogContent className="max-w-4xl max-h-[80vh] overflow-hidden">
+            <DialogHeader>
+              <DialogTitle>Slash Commands</DialogTitle>
+              <DialogDescription>
+                Manage project-specific slash commands for {projectPath}
+              </DialogDescription>
+            </DialogHeader>
+            <div className="flex-1 overflow-y-auto">
+              <SlashCommandsManager projectPath={projectPath} />
+            </div>
+          </DialogContent>
+        </Dialog>
+      )}
     </div>
   );
 };

src/components/ProjectSettings.tsx

@@ -4,14 +4,16 @@
 
 import React, { useState, useEffect } from 'react';
 import { HooksEditor } from '@/components/HooksEditor';
+import { SlashCommandsManager } from '@/components/SlashCommandsManager';
 import { api } from '@/lib/api';
 import { 
   AlertTriangle, 
   ArrowLeft, 
   Settings,
   FolderOpen,
   GitBranch,
-  Shield
+  Shield,
+  Command
 } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { Card } from '@/components/ui/card';
@@ -31,7 +33,7 @@ export const ProjectSettings: React.FC<ProjectSettingsProps> = ({
   onBack,
   className
 }) => {
-  const [activeTab, setActiveTab] = useState('project');
+  const [activeTab, setActiveTab] = useState('commands');
   const [toast, setToast] = useState<{ message: string; type: 'success' | 'error' } | null>(null);
 
   // Other hooks settings
@@ -88,7 +90,7 @@ export const ProjectSettings: React.FC<ProjectSettingsProps> = ({
             </Button>
             <div className="flex items-center gap-2">
               <Settings className="h-5 w-5 text-muted-foreground" />
-              <h2 className="text-xl font-semibold">Hooks</h2>
+              <h2 className="text-xl font-semibold">Project Settings</h2>
             </div>
           </div>
         </div>
@@ -106,6 +108,10 @@ export const ProjectSettings: React.FC<ProjectSettingsProps> = ({
         <div className="p-6">
           <Tabs value={activeTab} onValueChange={setActiveTab}>
             <TabsList className="mb-6">
+              <TabsTrigger value="commands" className="gap-2">
+                <Command className="h-4 w-4" />
+                Slash Commands
+              </TabsTrigger>
               <TabsTrigger value="project" className="gap-2">
                 <GitBranch className="h-4 w-4" />
                 Project Hooks
@@ -116,6 +122,26 @@ export const ProjectSettings: React.FC<ProjectSettingsProps> = ({
               </TabsTrigger>
             </TabsList>
 
+            <TabsContent value="commands" className="space-y-6">
+              <Card className="p-6">
+                <div className="space-y-4">
+                  <div>
+                    <h3 className="text-lg font-semibold mb-2">Project Slash Commands</h3>
+                    <p className="text-sm text-muted-foreground mb-4">
+                      Custom commands that are specific to this project. These commands are stored in
+                      <code className="mx-1 px-2 py-1 bg-muted rounded text-xs">.claude/slash-commands/</code>
+                      and can be committed to version control.
+                    </p>
+                  </div>
+                  
+                  <SlashCommandsManager
+                    projectPath={project.path}
+                    scopeFilter="project"
+                  />
+                </div>
+              </Card>
+            </TabsContent>
+
             <TabsContent value="project" className="space-y-6">
               <Card className="p-6">
                 <div className="space-y-4">