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:
catlog22
2026-02-27 21:03:37 +08:00
parent 75173312c1
commit 5c158d9a64
4 changed files with 60 additions and 10 deletions

View File

@@ -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>
);
}