mirror of
https://github.com/catlog22/Claude-Code-Workflow.git
synced 2026-03-06 16:31:12 +08:00
feat(commands): add create button and file browser to commands page
- Add "New Command" button to CommandsManagerPage header - Integrate CommandCreateDialog for creating/importing commands - Add file browser button to source path input in CommandCreateDialog - Uses FloatingFileBrowser component for file selection - Supports browsing project directory for .md command files - Add i18n keys for browse file button (en/zh) Users can now create commands via: 1. Import existing .md file (with visual file picker) 2. AI-generate new command from description
This commit is contained in:
@@ -18,6 +18,7 @@ import {
|
||||
AlertCircle,
|
||||
Maximize2,
|
||||
Minimize2,
|
||||
Plus,
|
||||
} from 'lucide-react';
|
||||
import { useAppStore, selectIsImmersiveMode } from '@/stores/appStore';
|
||||
import { Card } from '@/components/ui/Card';
|
||||
@@ -27,6 +28,7 @@ import { Badge } from '@/components/ui/Badge';
|
||||
import { TabsNavigation } from '@/components/ui/TabsNavigation';
|
||||
import { useCommands, useCommandMutations } from '@/hooks';
|
||||
import { CommandGroupAccordion } from '@/components/commands/CommandGroupAccordion';
|
||||
import { CommandCreateDialog } from '@/components/shared/CommandCreateDialog';
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
// ========== Main Page Component ==========
|
||||
@@ -42,6 +44,8 @@ export function CommandsManagerPage() {
|
||||
const [expandedGroups, setExpandedGroups] = useState<Set<string>>(new Set(['cli', 'workflow']));
|
||||
// Search state
|
||||
const [searchQuery, setSearchQuery] = useState('');
|
||||
// Create dialog state
|
||||
const [isCreateDialogOpen, setIsCreateDialogOpen] = useState(false);
|
||||
|
||||
// Immersive mode state
|
||||
const isImmersiveMode = useAppStore(selectIsImmersiveMode);
|
||||
@@ -117,6 +121,10 @@ export function CommandsManagerPage() {
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Button onClick={() => setIsCreateDialogOpen(true)} disabled={isToggling}>
|
||||
<Plus className="w-4 h-4 mr-2" />
|
||||
{formatMessage({ id: 'commands.actions.create' })}
|
||||
</Button>
|
||||
<button
|
||||
onClick={toggleImmersiveMode}
|
||||
className={cn(
|
||||
@@ -279,6 +287,16 @@ export function CommandsManagerPage() {
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Command Create Dialog */}
|
||||
<CommandCreateDialog
|
||||
open={isCreateDialogOpen}
|
||||
onOpenChange={setIsCreateDialogOpen}
|
||||
onCreated={() => {
|
||||
setIsCreateDialogOpen(false);
|
||||
refetch();
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user