fix(dashboard): use power-off icon for disable actions

Author: x0sina

dashboard/src/components/groups/group-actions-menu.tsx

@@ -3,7 +3,7 @@ import { useTranslation } from 'react-i18next'
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger } from '@/components/ui/dropdown-menu'
 import { Button } from '@/components/ui/button'
 import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle } from '@/components/ui/alert-dialog'
-import { MoreVertical, Pencil, Power, Trash2 } from 'lucide-react'
+import { MoreVertical, Pencil, Power, PowerOff, Trash2 } from 'lucide-react'
 import { toast } from 'sonner'
 import { queryClient } from '@/utils/query-client'
 import { GroupResponse, useRemoveGroup } from '@/service/api'
@@ -80,7 +80,7 @@ export default function GroupActionsMenu({ group, onEdit, onToggleStatus, classN
       <div className={className} onClick={e => e.stopPropagation()}>
         <DropdownMenu>
           <DropdownMenuTrigger asChild>
-            <Button variant="ghost" size="icon" className="h-7 w-7 sm:h-8 sm:w-8">
+            <Button type="button" variant="ghost" size="icon" className="h-7 w-7 sm:h-8 sm:w-8">
               <MoreVertical className="h-3.5 w-3.5 sm:h-4 sm:w-4" />
             </Button>
           </DropdownMenuTrigger>
@@ -100,7 +100,7 @@ export default function GroupActionsMenu({ group, onEdit, onToggleStatus, classN
                 onToggleStatus(group)
               }}
             >
-              <Power className={cn('h-4 w-4 shrink-0', dir === 'rtl' ? 'ml-2' : 'mr-2')} />
+              {group.is_disabled ? <Power className={cn('h-4 w-4 shrink-0', dir === 'rtl' ? 'ml-2' : 'mr-2')} /> : <PowerOff className={cn('h-4 w-4 shrink-0', dir === 'rtl' ? 'ml-2' : 'mr-2')} />}
               <span className="min-w-0 truncate">{group.is_disabled ? t('enable') : t('disable')}</span>
             </DropdownMenuItem>
             <DropdownMenuSeparator />

dashboard/src/components/groups/group.tsx

@@ -6,7 +6,7 @@ import { useRemoveGroup } from '@/service/api'
 import { toast } from 'sonner'
 import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle } from '@/components/ui/alert-dialog'
 import { useState } from 'react'
-import { MoreVertical, Pencil, Power, Trash2 } from 'lucide-react'
+import { MoreVertical, Pencil, Power, PowerOff, Trash2 } from 'lucide-react'
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger } from '@/components/ui/dropdown-menu'
 import { cn } from '@/lib/utils'
 import useDirDetection from '@/hooks/use-dir-detection'
@@ -109,7 +109,7 @@ export default function Group({ group, onEdit, onToggleStatus, selectionControl,
                       onToggleStatus(group)
                     }}
                   >
-                    <Power className="mr-2 h-4 w-4" />
+                    {group.is_disabled ? <Power className="mr-2 h-4 w-4" /> : <PowerOff className="mr-2 h-4 w-4" />}
                     {group.is_disabled ? t('enable') : t('disable')}
                   </DropdownMenuItem>
                   <DropdownMenuSeparator />

dashboard/src/components/hosts/host-actions-menu.tsx

@@ -2,7 +2,7 @@ import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger } from '@/components/ui/dropdown-menu'
 import { Button } from '@/components/ui/button'
-import { Copy, MoreVertical, Pencil, Power, Trash2 } from 'lucide-react'
+import { Copy, MoreVertical, Pencil, Power, PowerOff, Trash2 } from 'lucide-react'
 import { BaseHost, modifyHost, removeHost } from '@/service/api'
 import { toast } from 'sonner'
 import useDirDetection from '@/hooks/use-dir-detection'
@@ -159,7 +159,7 @@ export default function HostActionsMenu({ host, onEdit, onDuplicate, onDataChang
               handleToggleStatus()
             }}
           >
-            <Power className={cn('h-4 w-4', dir === 'rtl' ? 'ml-2' : 'mr-2')} />
+            {host?.is_disabled ? <Power className={cn('h-4 w-4', dir === 'rtl' ? 'ml-2' : 'mr-2')} /> : <PowerOff className={cn('h-4 w-4', dir === 'rtl' ? 'ml-2' : 'mr-2')} />}
             {host?.is_disabled ? t('enable') : t('disable')}
           </DropdownMenuItem>
           <DropdownMenuSeparator />

dashboard/src/components/nodes/node-actions-menu.tsx

@@ -3,7 +3,7 @@ import { useTranslation } from 'react-i18next'
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger } from '@/components/ui/dropdown-menu'
 import { Button } from '@/components/ui/button'
 import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle } from '@/components/ui/alert-dialog'
-import { Activity, CircleFadingArrowUp, Loader2, Map, MoreVertical, Package, Pencil, Power, RefreshCcw, RotateCcw, Trash2, Wifi } from 'lucide-react'
+import { Activity, CircleFadingArrowUp, Loader2, Map, MoreVertical, Package, Pencil, Power, PowerOff, RefreshCcw, RotateCcw, Trash2, Wifi } from 'lucide-react'
 import { toast } from 'sonner'
 import { queryClient } from '@/utils/query-client'
 import { CoresSimpleResponse, NodeResponse, useReconnectNode, useRemoveNode, useResetNodeUsage, useSyncNode, useUpdateNode } from '@/service/api'
@@ -232,7 +232,7 @@ export default function NodeActionsMenu({ node, onEdit, onToggleStatus, coresDat
               onToggleStatus(node)
             }}
           >
-            <Power className="mr-2 h-4 w-4 shrink-0" />
+            {node.status === 'disabled' ? <Power className="mr-2 h-4 w-4 shrink-0" /> : <PowerOff className="mr-2 h-4 w-4 shrink-0" />}
             <span className="min-w-0 truncate">{node.status === 'disabled' ? t('enable') : t('disable')}</span>
           </DropdownMenuItem>
           <DropdownMenuSeparator />

dashboard/src/components/templates/user-template-actions-menu.tsx

@@ -2,7 +2,7 @@ import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger } from '@/components/ui/dropdown-menu'
 import { Button } from '@/components/ui/button'
-import { Copy, EllipsisVertical, Pen, Power, Trash2 } from 'lucide-react'
+import { Copy, EllipsisVertical, Pen, Power, PowerOff, Trash2 } from 'lucide-react'
 import useDirDetection from '@/hooks/use-dir-detection'
 import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle } from '@/components/ui/alert-dialog'
 import { cn } from '@/lib/utils'
@@ -126,7 +126,7 @@ export default function UserTemplateActionsMenu({ template, onEdit, onToggleStat
               onToggleStatus(template)
             }}
           >
-            <Power className="h-4 w-4" />
+            {template.is_disabled ? <Power className="h-4 w-4" /> : <PowerOff className="h-4 w-4" />}
             {template.is_disabled ? t('enable') : t('disable')}
           </DropdownMenuItem>
           <DropdownMenuItem