feat: update dependencies and refactor dropdown components for improved functionality

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>
 

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,

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';
 

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>