feat: update dependencies and refactor dropdown components for improved functionality

2026-02-11 02:33:51 +08:00 · 2026-01-30 17:26:07 +08:00
parent a5c3dff8d3
commit e78e95049b
18 changed files with 138 additions and 96 deletions
--- a/ccw/frontend/src/components/shared/IssueCard.tsx
+++ b/ccw/frontend/src/components/shared/IssueCard.tsx
@@ -20,7 +20,7 @@ import { cn } from '@/lib/utils';
 import { Card } from '@/components/ui/Card';
 import { Badge } from '@/components/ui/Badge';
 import { Button } from '@/components/ui/Button';
-import { Dropdown, DropdownTrigger, DropdownContent, DropdownItem } from '@/components/ui/Dropdown';
+import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem } from '@/components/ui/Dropdown';
 import type { Issue } from '@/lib/api';

 // ========== Types ==========
@@ -162,8 +162,8 @@ export function IssueCard({
          <p className="text-xs text-muted-foreground mt-1">#{issue.id}</p>
        </div>
        {showActions && (
-          <Dropdown open={isMenuOpen} onOpenChange={setIsMenuOpen}>
-            <DropdownTrigger asChild>
+          <DropdownMenu open={isMenuOpen} onOpenChange={setIsMenuOpen}>
+            <DropdownMenuTrigger asChild>
              <Button
                variant="ghost"
                size="sm"
@@ -172,26 +172,26 @@ export function IssueCard({
              >
                <MoreVertical className="w-4 h-4" />
              </Button>
-            </DropdownTrigger>
-            <DropdownContent align="end">
-              <DropdownItem onClick={handleEdit}>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end">
+              <DropdownMenuItem onClick={handleEdit}>
                <Edit className="w-4 h-4 mr-2" />
                Edit
-              </DropdownItem>
-              <DropdownItem onClick={() => onStatusChange?.(issue, 'in_progress')}>
+              </DropdownMenuItem>
+              <DropdownMenuItem onClick={() => onStatusChange?.(issue, 'in_progress')}>
                <Clock className="w-4 h-4 mr-2" />
                Start Progress
-              </DropdownItem>
-              <DropdownItem onClick={() => onStatusChange?.(issue, 'resolved')}>
+              </DropdownMenuItem>
+              <DropdownMenuItem onClick={() => onStatusChange?.(issue, 'resolved')}>
                <CheckCircle className="w-4 h-4 mr-2" />
                Mark Resolved
-              </DropdownItem>
-              <DropdownItem onClick={handleDelete} className="text-destructive">
+              </DropdownMenuItem>
+              <DropdownMenuItem onClick={handleDelete} className="text-destructive">
                <Trash2 className="w-4 h-4 mr-2" />
                Delete
-              </DropdownItem>
-            </DropdownContent>
-          </Dropdown>
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
        )}
      </div>

--- a/ccw/frontend/src/components/shared/KanbanBoard.tsx
+++ b/ccw/frontend/src/components/shared/KanbanBoard.tsx
@@ -3,7 +3,7 @@
 // ========================================
 // Drag-and-drop kanban board for loops and tasks

-import { useState, useCallback } from 'react';
+import { useCallback } from 'react';
 import {
  DragDropContext,
  Droppable,
--- a/ccw/frontend/src/components/shared/SessionCard.tsx
+++ b/ccw/frontend/src/components/shared/SessionCard.tsx
@@ -22,8 +22,6 @@ import {
  Eye,
  Archive,
  Trash2,
-  Play,
-  Pause,
 } from 'lucide-react';
 import type { SessionMetadata } from '@/types/store';

--- a/ccw/frontend/src/components/shared/SkillCard.tsx
+++ b/ccw/frontend/src/components/shared/SkillCard.tsx
@@ -18,7 +18,7 @@ import { cn } from '@/lib/utils';
 import { Card } from '@/components/ui/Card';
 import { Badge } from '@/components/ui/Badge';
 import { Button } from '@/components/ui/Button';
-import { Dropdown, DropdownTrigger, DropdownContent, DropdownItem } from '@/components/ui/Dropdown';
+import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem } from '@/components/ui/Dropdown';
 import type { Skill } from '@/lib/api';

 // ========== Types ==========
@@ -148,8 +148,8 @@ export function SkillCard({
          </div>
        </div>
        {showActions && (
-          <Dropdown open={isMenuOpen} onOpenChange={setIsMenuOpen}>
-            <DropdownTrigger asChild>
+          <DropdownMenu open={isMenuOpen} onOpenChange={setIsMenuOpen}>
+            <DropdownMenuTrigger asChild>
              <Button
                variant="ghost"
                size="sm"
@@ -158,17 +158,17 @@ export function SkillCard({
              >
                <MoreVertical className="w-4 h-4" />
              </Button>
-            </DropdownTrigger>
-            <DropdownContent align="end">
-              <DropdownItem onClick={() => onClick?.(skill)}>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end">
+              <DropdownMenuItem onClick={() => onClick?.(skill)}>
                <Info className="w-4 h-4 mr-2" />
                View Details
-              </DropdownItem>
-              <DropdownItem onClick={handleConfigure}>
+              </DropdownMenuItem>
+              <DropdownMenuItem onClick={handleConfigure}>
                <Settings className="w-4 h-4 mr-2" />
                Configure
-              </DropdownItem>
-              <DropdownItem onClick={handleToggle}>
+              </DropdownMenuItem>
+              <DropdownMenuItem onClick={handleToggle}>
                {skill.enabled ? (
                  <>
                    <PowerOff className="w-4 h-4 mr-2" />
@@ -180,9 +180,9 @@ export function SkillCard({
                    Enable
                  </>
                )}
-              </DropdownItem>
-            </DropdownContent>
-          </Dropdown>
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
        )}
      </div>

--- a/ccw/frontend/src/hooks/useIssues.ts
+++ b/ccw/frontend/src/hooks/useIssues.ts
@@ -13,7 +13,6 @@ import {
  deleteIssue,
  type Issue,
  type IssuesResponse,
-  type IssueQueue,
 } from '../lib/api';

 // Query key factory
--- a/ccw/frontend/src/pages/CommandsManagerPage.tsx
+++ b/ccw/frontend/src/pages/CommandsManagerPage.tsx
@@ -8,10 +8,8 @@ import {
  Terminal,
  Search,
  Plus,
-  Filter,
  RefreshCw,
  Copy,
-  Play,
  ChevronDown,
  ChevronUp,
  Code,
@@ -161,7 +159,6 @@ export function CommandsManagerPage() {
  const {
    commands,
    categories,
-    commandsByCategory,
    totalCount,
    isLoading,
    isFetching,
--- a/ccw/frontend/src/pages/IssueManagerPage.tsx
+++ b/ccw/frontend/src/pages/IssueManagerPage.tsx
@@ -7,12 +7,10 @@ import { useState, useMemo } from 'react';
 import {
  AlertCircle,
  Plus,
-  Filter,
  Search,
  RefreshCw,
  Loader2,
  Github,
-  ListFilter,
  CheckCircle,
  Clock,
  AlertTriangle,
@@ -21,7 +19,6 @@ import { Card } from '@/components/ui/Card';
 import { Button } from '@/components/ui/Button';
 import { Input } from '@/components/ui/Input';
 import { Badge } from '@/components/ui/Badge';
-import { Tabs, TabsList, TabsTrigger, TabsContent } from '@/components/ui/Tabs';
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/Dialog';
 import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from '@/components/ui/Select';
 import { IssueCard } from '@/components/shared/IssueCard';
@@ -31,7 +28,6 @@ import { cn } from '@/lib/utils';

 // ========== Types ==========

-type ViewMode = 'issues' | 'queue';
 type StatusFilter = 'all' | Issue['status'];
 type PriorityFilter = 'all' | Issue['priority'];

@@ -183,17 +179,14 @@ function IssueList({
 // ========== Main Page Component ==========

 export function IssueManagerPage() {
-  const [viewMode, setViewMode] = useState<ViewMode>('issues');
  const [searchQuery, setSearchQuery] = useState('');
  const [statusFilter, setStatusFilter] = useState<StatusFilter>('all');
  const [priorityFilter, setPriorityFilter] = useState<PriorityFilter>('all');
  const [isNewIssueOpen, setIsNewIssueOpen] = useState(false);
-  const [selectedIssue, setSelectedIssue] = useState<Issue | null>(null);

  const {
    issues,
    issuesByStatus,
-    issuesByPriority,
    openCount,
    criticalCount,
    isLoading,
@@ -207,7 +200,7 @@ export function IssueManagerPage() {
    },
  });

-  const { createIssue, updateIssue, deleteIssue, isCreating, isUpdating } = useIssueMutations();
+  const { createIssue, updateIssue, deleteIssue, isCreating } = useIssueMutations();

  // Filter counts
  const statusCounts = useMemo(() => ({
@@ -224,8 +217,7 @@ export function IssueManagerPage() {
    setIsNewIssueOpen(false);
  };

-  const handleEditIssue = (issue: Issue) => {
-    setSelectedIssue(issue);
+  const handleEditIssue = (_issue: Issue) => {
    // TODO: Open edit dialog
  };

@@ -381,7 +373,7 @@ export function IssueManagerPage() {
      <IssueList
        issues={issues}
        isLoading={isLoading}
-        onIssueClick={setSelectedIssue}
+        onIssueClick={() => {}}
        onIssueEdit={handleEditIssue}
        onIssueDelete={handleDeleteIssue}
        onStatusChange={handleStatusChange}
--- a/ccw/frontend/src/pages/LoopMonitorPage.tsx
+++ b/ccw/frontend/src/pages/LoopMonitorPage.tsx
@@ -11,11 +11,9 @@ import {
  StopCircle,
  Plus,
  Search,
-  Filter,
  Clock,
  CheckCircle,
  XCircle,
-  AlertCircle,
  Loader2,
 } from 'lucide-react';
 import type { DropResult, DraggableProvided } from '@hello-pangea/dnd';
@@ -23,7 +21,7 @@ import { Card } from '@/components/ui/Card';
 import { Button } from '@/components/ui/Button';
 import { Badge } from '@/components/ui/Badge';
 import { Input } from '@/components/ui/Input';
-import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/Dialog';
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/Dialog';
 import { KanbanBoard, useLoopKanbanColumns, type LoopKanbanItem } from '@/components/shared/KanbanBoard';
 import { useLoops, useLoopMutations } from '@/hooks';
 import type { Loop } from '@/lib/api';
@@ -226,7 +224,6 @@ function NewLoopDialog({ open, onOpenChange, onSubmit, isCreating }: NewLoopDial
 export function LoopMonitorPage() {
  const [searchQuery, setSearchQuery] = useState('');
  const [isNewLoopOpen, setIsNewLoopOpen] = useState(false);
-  const [selectedLoop, setSelectedLoop] = useState<Loop | null>(null);

  const {
    loops,
@@ -242,7 +239,7 @@ export function LoopMonitorPage() {
    refetchInterval: 5000, // Refresh every 5 seconds for real-time updates
  });

-  const { createLoop, updateStatus, isCreating, isUpdating } = useLoopMutations();
+  const { createLoop, updateStatus, isCreating } = useLoopMutations();

  // Kanban columns
  const columns = useLoopKanbanColumns(loopsByStatus as unknown as Record<string, LoopKanbanItem[]>);
@@ -312,7 +309,7 @@ export function LoopMonitorPage() {
        onPause={handlePause}
        onResume={handleResume}
        onStop={handleStop}
-        onClick={setSelectedLoop}
+        onClick={() => {}}
      />
    ),
    []
--- a/ccw/frontend/src/pages/MemoryPage.tsx
+++ b/ccw/frontend/src/pages/MemoryPage.tsx
@@ -13,7 +13,6 @@ import {
  RefreshCw,
  Trash2,
  Edit,
-  Eye,
  Tag,
  Loader2,
  Copy,
@@ -264,7 +263,7 @@ export function MemoryPage() {
    },
  });

-  const { createMemory, updateMemory, deleteMemory, isCreating, isUpdating, isDeleting } =
+  const { createMemory, updateMemory, deleteMemory, isCreating, isUpdating } =
    useMemoryMutations();

  const toggleExpand = (memoryId: string) => {
--- a/ccw/frontend/src/pages/SettingsPage.tsx
+++ b/ccw/frontend/src/pages/SettingsPage.tsx
@@ -3,21 +3,17 @@
 // ========================================
 // Application settings and configuration with CLI tools management

-import { useState, useEffect } from 'react';
+import { useState } from 'react';
 import {
  Settings,
  Moon,
  Sun,
-  Globe,
  Bell,
-  Shield,
  Cpu,
  RefreshCw,
-  Save,
  RotateCcw,
  Check,
  X,
-  Loader2,
  ChevronDown,
  ChevronUp,
 } from 'lucide-react';
@@ -25,7 +21,7 @@ import { Card } from '@/components/ui/Card';
 import { Button } from '@/components/ui/Button';
 import { Input } from '@/components/ui/Input';
 import { Badge } from '@/components/ui/Badge';
-import { useTheme, useConfig } from '@/hooks';
+import { useTheme } from '@/hooks';
 import { useConfigStore, selectCliTools, selectDefaultCliTool, selectUserPreferences } from '@/stores/configStore';
 import type { CliToolConfig, UserPreferences } from '@/types/store';
 import { cn } from '@/lib/utils';
@@ -170,7 +166,6 @@ export function SettingsPage() {
  const { updateCliTool, setDefaultCliTool, setUserPreferences, resetUserPreferences } = useConfigStore();

  const [expandedTools, setExpandedTools] = useState<Set<string>>(new Set());
-  const [isSaving, setIsSaving] = useState(false);

  const toggleToolExpand = (toolId: string) => {
    setExpandedTools((prev) => {
--- a/ccw/frontend/src/pages/SkillsManagerPage.tsx
+++ b/ccw/frontend/src/pages/SkillsManagerPage.tsx
@@ -8,17 +8,14 @@ import {
  Sparkles,
  Search,
  Plus,
-  Filter,
  RefreshCw,
  Power,
  PowerOff,
  Tag,
-  Loader2,
 } from 'lucide-react';
 import { Card } from '@/components/ui/Card';
 import { Button } from '@/components/ui/Button';
 import { Input } from '@/components/ui/Input';
-import { Badge } from '@/components/ui/Badge';
 import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from '@/components/ui/Select';
 import { SkillCard } from '@/components/shared/SkillCard';
 import { useSkills, useSkillMutations } from '@/hooks';
@@ -89,13 +86,10 @@ export function SkillsManagerPage() {
  const [sourceFilter, setSourceFilter] = useState<string>('all');
  const [enabledFilter, setEnabledFilter] = useState<'all' | 'enabled' | 'disabled'>('all');
  const [viewMode, setViewMode] = useState<'grid' | 'compact'>('grid');
-  const [selectedSkill, setSelectedSkill] = useState<Skill | null>(null);

  const {
    skills,
-    enabledSkills,
    categories,
-    skillsByCategory,
    totalCount,
    enabledCount,
    isLoading,
@@ -268,7 +262,7 @@ export function SkillsManagerPage() {
        skills={filteredSkills}
        isLoading={isLoading}
        onToggle={handleToggle}
-        onClick={setSelectedSkill}
+        onClick={() => {}}
        isToggling={isToggling}
        compact={viewMode === 'compact'}
      />
--- a/ccw/frontend/src/pages/orchestrator/ExecutionMonitor.tsx
+++ b/ccw/frontend/src/pages/orchestrator/ExecutionMonitor.tsx
@@ -106,7 +106,6 @@ export function ExecutionMonitor({ className }: ExecutionMonitorProps) {
  const isMonitorExpanded = useExecutionStore((state) => state.isMonitorExpanded);
  const autoScrollLogs = useExecutionStore((state) => state.autoScrollLogs);
  const setMonitorExpanded = useExecutionStore((state) => state.setMonitorExpanded);
-  const setAutoScrollLogs = useExecutionStore((state) => state.setAutoScrollLogs);
  const startExecution = useExecutionStore((state) => state.startExecution);

  // Local state for elapsed time (calculated from startedAt)
--- a/ccw/frontend/src/pages/orchestrator/FlowToolbar.tsx
+++ b/ccw/frontend/src/pages/orchestrator/FlowToolbar.tsx
@@ -9,7 +9,6 @@ import {
  Save,
  FolderOpen,
  Download,
-  Play,
  Trash2,
  Copy,
  Workflow,
--- a/ccw/frontend/src/pages/orchestrator/OrchestratorPage.tsx
+++ b/ccw/frontend/src/pages/orchestrator/OrchestratorPage.tsx
@@ -11,21 +11,11 @@ import { PropertyPanel } from './PropertyPanel';
 import { FlowToolbar } from './FlowToolbar';
 import { ExecutionMonitor } from './ExecutionMonitor';
 import { TemplateLibrary } from './TemplateLibrary';
-import { useWebSocket } from '@/hooks/useWebSocket';

 export function OrchestratorPage() {
  const fetchFlows = useFlowStore((state) => state.fetchFlows);
  const [isTemplateLibraryOpen, setIsTemplateLibraryOpen] = useState(false);

-  // Initialize WebSocket connection for real-time updates
-  const { isConnected, reconnect } = useWebSocket({
-    enabled: true,
-    onMessage: (message) => {
-      // Additional message handling can be added here if needed
-      console.log('[Orchestrator] WebSocket message:', message.type);
-    },
-  });
-
  // Load flows on mount
  useEffect(() => {
    fetchFlows();
--- a/ccw/frontend/src/pages/orchestrator/TemplateLibrary.tsx
+++ b/ccw/frontend/src/pages/orchestrator/TemplateLibrary.tsx
@@ -17,7 +17,6 @@ import {
  GitBranch,
  Loader2,
  Trash2,
-  ExternalLink,
 } from 'lucide-react';
 import { cn } from '@/lib/utils';
 import { Button } from '@/components/ui/Button';
--- a/ccw/frontend/src/stores/executionStore.ts
+++ b/ccw/frontend/src/stores/executionStore.ts
@@ -35,7 +35,7 @@ const initialState = {

 export const useExecutionStore = create<ExecutionStore>()(
  devtools(
-    (set, get) => ({
+    (set) => ({
      ...initialState,

      // ========== Execution Lifecycle ==========