perf(web): streamline table actions and destructive dialogs (#5645)

* perf(data-table): autosize action columns

- exclude actions columns from shared table width calculations so action cells size to their content.
- remove fixed size and w-* width overrides from feature action columns to preserve content-based layout.

* perf(data-table): streamline row action controls

- expose common edit and status actions directly while moving secondary actions into overflow menus.
- add shared row action menu helpers so static and table rows use consistent action controls.
- let action columns size to their content instead of relying on fixed widths.

* fix(web): localize destructive dialog copy

- route delete, reset, and batch update confirmation text through i18n.
- add locale entries for affected channel, model, system settings, and user dialogs.

* perf(web): unify destructive dialog actions

- align delete and cleanup confirmation buttons with the shared destructive variant.
- replace custom destructive color overrides with semantic button variants.
- clean up lint errors in touched dialog files before committing.

* fix(web): add user action success translations

- add localized success messages for user delete, status, and role changes.
- keep user management toast copy available across all frontend locales.

* fix(data-table): prevent mobile badge clipping

- expose badge cell slots so mobile card styles can target nested badge wrappers.
- reset badge margins in card rows to keep provider icons fully visible on small screens.

web/default/src/features/channels/components/channels-columns.tsx

@@ -200,8 +200,11 @@ function PriorityCell({ channel }: { channel: Channel }) {
           open={confirmOpen}
           onOpenChange={setConfirmOpen}
           title={t('Confirm Batch Update')}
-          desc={`This will update the priority to ${pendingValue} for all ${channelCount} channel(s) with tag "${tag}". Continue?`}
-          confirmText='Update'
+          desc={t(
+            'This will update the priority to {{value}} for all {{count}} channel(s) with tag "{{tag}}". Continue?',
+            { value: pendingValue, count: channelCount, tag }
+          )}
+          confirmText={t('Update')}
           handleConfirm={() => {
             if (pendingValue !== null) {
               handleUpdateTagField(tag, 'priority', pendingValue, queryClient)
@@ -255,8 +258,11 @@ function WeightCell({ channel }: { channel: Channel }) {
           open={confirmOpen}
           onOpenChange={setConfirmOpen}
           title={t('Confirm Batch Update')}
-          desc={`This will update the weight to ${pendingValue} for all ${channelCount} channel(s) with tag "${tag}". Continue?`}
-          confirmText='Update'
+          desc={t(
+            'This will update the weight to {{value}} for all {{count}} channel(s) with tag "{{tag}}". Continue?',
+            { value: pendingValue, count: channelCount, tag }
+          )}
+          confirmText={t('Update')}
           handleConfirm={() => {
             if (pendingValue !== null) {
               handleUpdateTagField(tag, 'weight', pendingValue, queryClient)
@@ -1108,7 +1114,6 @@ export function useChannelsColumns(): ColumnDef<Channel>[] {
 
           return <DataTableRowActions row={row} />
         },
-        size: 132,
         enableSorting: false,
         enableHiding: false,
         meta: { pinned: 'right' as const },

web/default/src/features/channels/components/channels-primary-buttons.tsx

@@ -226,7 +226,9 @@ export function ChannelsPrimaryButtons() {
         open={showDeleteDialog}
         onOpenChange={setShowDeleteDialog}
         title={t('Delete All Disabled Channels?')}
-        desc='This will permanently delete all manually and automatically disabled channels. This action cannot be undone.'
+        desc={t(
+          'This will permanently delete all manually and automatically disabled channels. This action cannot be undone.'
+        )}
         destructive
         handleConfirm={() => {
           handleDeleteAllDisabled(queryClient, (_count) => {

web/default/src/features/channels/components/data-table-row-actions.tsx

@@ -18,7 +18,7 @@ For commercial licensing, please contact support@quantumnous.com
 */
 import { useContext, useState } from 'react'
 import { useQueryClient } from '@tanstack/react-query'
-import { type Row } from '@tanstack/react-table'
+import type { Row } from '@tanstack/react-table'
 import {
   MoreHorizontal,
   Boxes,
@@ -36,6 +36,8 @@ import {
   Loader2,
 } from 'lucide-react'
 import { useTranslation } from 'react-i18next'
+
+import { ConfirmDialog } from '@/components/confirm-dialog'
 import { Button } from '@/components/ui/button'
 import {
   DropdownMenu,
@@ -50,7 +52,7 @@ import {
   TooltipContent,
   TooltipTrigger,
 } from '@/components/ui/tooltip'
-import { ConfirmDialog } from '@/components/confirm-dialog'
+
 import { MODEL_FETCHABLE_TYPES } from '../constants'
 import {
   channelsQueryKeys,
@@ -96,13 +98,9 @@ export function DataTableRowActions({ row }: DataTableRowActionsProps) {
     e.stopPropagation()
     setIsTesting(true)
     try {
-      await handleTestChannel(
-        channel.id,
-        { channelName: channel.name },
-        () => {
-          queryClient.invalidateQueries({ queryKey: channelsQueryKeys.lists() })
-        }
-      )
+      await handleTestChannel(channel.id, { channelName: channel.name }, () => {
+        queryClient.invalidateQueries({ queryKey: channelsQueryKeys.lists() })
+      })
     } finally {
       setIsTesting(false)
     }
@@ -145,8 +143,34 @@ export function DataTableRowActions({ row }: DataTableRowActionsProps) {
     }
   }
 
+  let statusIcon = <Power className='size-4' />
+  if (isTogglingStatus) {
+    statusIcon = <Loader2 className='size-4 animate-spin' />
+  } else if (isEnabled) {
+    statusIcon = <PowerOff className='size-4' />
+  }
+
   return (
     <div className='-ml-1.5 flex items-center gap-1'>
+      <Tooltip>
+        <TooltipTrigger
+          render={
+            <Button
+              variant='ghost'
+              size='icon-sm'
+              onClick={(e) => {
+                e.stopPropagation()
+                handleEdit()
+              }}
+              aria-label={t('Edit')}
+            />
+          }
+        >
+          <Pencil className='size-4' />
+        </TooltipTrigger>
+        <TooltipContent>{t('Edit')}</TooltipContent>
+      </Tooltip>
+
       <Tooltip>
         <TooltipTrigger
           render={
@@ -206,13 +230,7 @@ export function DataTableRowActions({ row }: DataTableRowActionsProps) {
             />
           }
         >
-          {isTogglingStatus ? (
-            <Loader2 className='size-4 animate-spin' />
-          ) : isEnabled ? (
-            <PowerOff className='size-4' />
-          ) : (
-            <Power className='size-4' />
-          )}
+          {statusIcon}
         </TooltipTrigger>
         <TooltipContent>
           {isEnabled ? t('Disable') : t('Enable')}
@@ -232,14 +250,6 @@ export function DataTableRowActions({ row }: DataTableRowActionsProps) {
           <span className='sr-only'>{t('Open menu')}</span>
         </DropdownMenuTrigger>
         <DropdownMenuContent align='end' className='w-48'>
-          {/* Edit */}
-          <DropdownMenuItem onClick={handleEdit}>
-            {t('Edit')}
-            <DropdownMenuShortcut>
-              <Pencil size={16} />
-            </DropdownMenuShortcut>
-          </DropdownMenuItem>
-
           {/* Test Connection */}
           <DropdownMenuItem onClick={handleTest}>
             {t('Test Connection')}
@@ -343,8 +353,11 @@ export function DataTableRowActions({ row }: DataTableRowActionsProps) {
         open={deleteConfirmOpen}
         onOpenChange={setDeleteConfirmOpen}
         title={t('Delete Channel')}
-        desc={`Are you sure you want to delete "${channel.name}"? This action cannot be undone.`}
-        confirmText='Delete'
+        desc={t(
+          'Are you sure you want to delete channel "{{name}}"? This action cannot be undone.',
+          { name: channel.name }
+        )}
+        confirmText={t('Delete')}
         destructive
         handleConfirm={() => {
           handleDeleteChannel(channel.id, queryClient)

web/default/src/features/channels/components/data-table-tag-row-actions.tsx

@@ -17,18 +17,21 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
 For commercial licensing, please contact support@quantumnous.com
 */
 import { useQueryClient } from '@tanstack/react-query'
-import { type Row } from '@tanstack/react-table'
-import { MoreHorizontal, Power, PowerOff, Pencil, Edit } from 'lucide-react'
+import type { Row } from '@tanstack/react-table'
+import { Power, PowerOff, Pencil, Edit } from 'lucide-react'
 import { useTranslation } from 'react-i18next'
 import { Button } from '@/components/ui/button'
 import {
-  DropdownMenu,
-  DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuSeparator,
   DropdownMenuShortcut,
-  DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu'
+import { DataTableRowActionMenu } from '@/components/data-table/core/row-action-menu'
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from '@/components/ui/tooltip'
 import { handleEnableTagChannels, handleDisableTagChannels } from '../lib'
 import type { Channel } from '../types'
 import { useChannels } from './channels-provider'
@@ -64,27 +67,24 @@ export function DataTableTagRowActions({ row }: DataTableTagRowActionsProps) {
   }
 
   return (
-    <DropdownMenu>
-      <DropdownMenuTrigger
-        render={
-          <Button
-            variant='ghost'
-            className='data-popup-open:bg-muted flex h-8 w-8 p-0'
-          />
-        }
-      >
-        <MoreHorizontal className='h-4 w-4' />
-        <span className='sr-only'>{t('Open menu')}</span>
-      </DropdownMenuTrigger>
-      <DropdownMenuContent align='end' className='w-48'>
-        {/* Edit Tag */}
-        <DropdownMenuItem onClick={handleEditTag}>
-          {t('Edit Tag')}
-          <DropdownMenuShortcut>
-            <Edit size={16} />
-          </DropdownMenuShortcut>
-        </DropdownMenuItem>
+    <div className='-ml-1.5 flex items-center gap-1'>
+      <Tooltip>
+        <TooltipTrigger
+          render={
+            <Button
+              variant='ghost'
+              size='icon-sm'
+              onClick={handleEditTag}
+              aria-label={t('Edit Tag')}
+            />
+          }
+        >
+          <Edit />
+        </TooltipTrigger>
+        <TooltipContent>{t('Edit Tag')}</TooltipContent>
+      </Tooltip>
 
+      <DataTableRowActionMenu ariaLabel={t('Open menu')}>
         {/* Batch Edit */}
         <DropdownMenuItem onClick={handleBatchEdit}>
           {t('Batch Edit')}
@@ -110,7 +110,7 @@ export function DataTableTagRowActions({ row }: DataTableTagRowActionsProps) {
             <PowerOff size={16} />
           </DropdownMenuShortcut>
         </DropdownMenuItem>
-      </DropdownMenuContent>
-    </DropdownMenu>
+      </DataTableRowActionMenu>
+    </div>
   )
 }

web/default/src/features/channels/components/dialogs/channel-test-dialog.tsx

@@ -872,7 +872,6 @@ function ChannelTestDialogContent({
           )
         },
         enableSorting: false,
-        size: 120,
       },
     ],
     [
@@ -1068,7 +1067,6 @@ function ChannelTestDialogContent({
                   {
                     columnId: 'actions',
                     side: 'right',
-                    className: 'w-24 min-w-24 sm:w-28 sm:min-w-28',
                     cellClassName: 'bg-popover',
                   },
                 ]}
@@ -1077,7 +1075,7 @@ function ChannelTestDialogContent({
                     <col className='w-10 min-w-10' />
                     <col className='w-auto' />
                     <col className='w-70' />
-                    <col className='w-24 sm:w-28' />
+                    <col className='w-auto' />
                   </colgroup>
                 }
                 getColumnClassName={(columnId) =>

web/default/src/features/channels/components/dialogs/multi-key-manage-dialog.tsx

@@ -387,7 +387,7 @@ export function MultiKeyManageDialog({
                   {
                     id: 'actions',
                     header: t('Actions'),
-                    className: 'w-44 text-right',
+                    className: 'text-right',
                     cell: (key) => (
                       <MultiKeyTableRowActions
                         keyIndex={key.index}

web/default/src/features/channels/components/dialogs/ollama-models-dialog.tsx

@@ -186,7 +186,7 @@ export function OllamaModelsDialog({
     setSelected((prev) => {
       const next = new Set(prev)
       filteredModels.forEach((m) => next.add(m.id))
-      return Array.from(next)
+      return [...next]
     })
   }
 
@@ -201,8 +201,8 @@ export function OllamaModelsDialog({
 
     const next =
       mode === 'replace'
-        ? Array.from(new Set(selected))
-        : Array.from(new Set([...existingModels, ...selected]))
+        ? [...new Set(selected)]
+        : [...new Set([...existingModels, ...selected])]
 
     try {
       const res = await updateChannel(currentRow.id, { models: next.join(',') })
@@ -587,7 +587,7 @@ export function OllamaModelsDialog({
               {t('Cancel')}
             </AlertDialogCancel>
             <AlertDialogAction
-              className='bg-destructive text-destructive-foreground hover:bg-destructive/90'
+              variant='destructive'
               disabled={isDeleting || !deleteTarget}
               onClick={() => {
                 if (!deleteTarget) return

web/default/src/features/keys/components/api-keys-columns.tsx

@@ -314,7 +314,6 @@ export function useApiKeysColumns(): ColumnDef<ApiKey>[] {
       header: () => t('Actions'),
       cell: ({ row }) => <DataTableRowActions row={row} />,
       meta: { pinned: 'right' as const },
-      size: 88,
     },
   ]
 }

web/default/src/features/keys/components/api-keys-delete-dialog.tsx

@@ -51,7 +51,7 @@ export function ApiKeysDeleteDialog() {
       } else {
         toast.error(result.message || t(ERROR_MESSAGES.DELETE_FAILED))
       }
-    } catch (_error) {
+    } catch {
       toast.error(t(ERROR_MESSAGES.UNEXPECTED))
     } finally {
       setIsDeleting(false)
@@ -79,7 +79,7 @@ export function ApiKeysDeleteDialog() {
           <AlertDialogAction
             onClick={handleDelete}
             disabled={isDeleting}
-            className='bg-destructive text-destructive-foreground hover:bg-destructive/90'
+            variant='destructive'
           >
             {isDeleting ? t('Deleting...') : t('Delete')}
           </AlertDialogAction>

web/default/src/features/keys/components/data-table-row-actions.tsx

@@ -17,7 +17,7 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
 For commercial licensing, please contact support@quantumnous.com
 */
 import { useCallback, useState } from 'react'
-import { type Row } from '@tanstack/react-table'
+import type { Row } from '@tanstack/react-table'
 import {
   Trash2,
   Edit,
@@ -28,22 +28,19 @@ import {
   Copy,
   Link,
   Loader2,
-  MoreHorizontal as DotsHorizontalIcon,
 } from 'lucide-react'
 import { useTranslation } from 'react-i18next'
 import { toast } from 'sonner'
-import { copyToClipboard } from '@/lib/copy-to-clipboard'
+
+import { DataTableRowActionMenu } from '@/components/data-table/core/row-action-menu'
 import { Button } from '@/components/ui/button'
 import {
-  DropdownMenu,
-  DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuSeparator,
   DropdownMenuSub,
   DropdownMenuSubContent,
   DropdownMenuSubTrigger,
   DropdownMenuShortcut,
-  DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu'
 import {
   Tooltip,
@@ -53,6 +50,8 @@ import {
 import { useChatPresets } from '@/features/chat/hooks/use-chat-presets'
 import { resolveChatUrl, type ChatPreset } from '@/features/chat/lib/chat-links'
 import { sendToFluent } from '@/features/chat/lib/send-to-fluent'
+import { copyToClipboard } from '@/lib/copy-to-clipboard'
+
 import { updateApiKeyStatus } from '../api'
 import { API_KEY_STATUS, ERROR_MESSAGES, SUCCESS_MESSAGES } from '../constants'
 import { apiKeySchema } from '../types'
@@ -104,6 +103,7 @@ export function DataTableRowActions<TData>({
   const isRealKeyLoading = Boolean(loadingKeys[apiKey.id])
 
   const hasChatPresets = chatPresets.length > 0
+  const toggleLabel = isEnabled ? t('Disable') : t('Enable')
 
   const handleMenuOpenChange = useCallback(
     (open: boolean) => {
@@ -189,6 +189,13 @@ export function DataTableRowActions<TData>({
     }
   }
 
+  let statusIcon = <Power className='size-4' />
+  if (isTogglingStatus) {
+    statusIcon = <Loader2 className='size-4 animate-spin' />
+  } else if (isEnabled) {
+    statusIcon = <PowerOff className='size-4' />
+  }
+
   return (
     <div className='-ml-1.5 flex items-center gap-1'>
       <Tooltip>
@@ -199,7 +206,7 @@ export function DataTableRowActions<TData>({
               size='icon-sm'
               onClick={handleToggleStatus}
               disabled={isTogglingStatus}
-              aria-label={isEnabled ? t('Disable') : t('Enable')}
+              aria-label={toggleLabel}
               className={
                 isEnabled
                   ? 'text-destructive hover:text-destructive'
@@ -208,123 +215,112 @@ export function DataTableRowActions<TData>({
             />
           }
         >
-          {isTogglingStatus ? (
-            <Loader2 className='size-4 animate-spin' />
-          ) : isEnabled ? (
-            <PowerOff className='size-4' />
-          ) : (
-            <Power className='size-4' />
-          )}
+          {statusIcon}
         </TooltipTrigger>
-        <TooltipContent>
-          {isEnabled ? t('Disable') : t('Enable')}
-        </TooltipContent>
+        <TooltipContent>{toggleLabel}</TooltipContent>
       </Tooltip>
 
-      <DropdownMenu modal={false} onOpenChange={handleMenuOpenChange}>
-        <DropdownMenuTrigger
+      <Tooltip>
+        <TooltipTrigger
           render={
             <Button
               variant='ghost'
-              className='data-popup-open:bg-muted flex h-8 w-8 p-0'
+              size='icon-sm'
+              onClick={() => {
+                setCurrentRow(apiKey)
+                setOpen('update')
+              }}
+              aria-label={t('Edit')}
             />
           }
         >
-          <DotsHorizontalIcon className='h-4 w-4' />
-          <span className='sr-only'>{t('Open menu')}</span>
-        </DropdownMenuTrigger>
-        <DropdownMenuContent align='end' className='w-[200px]'>
-          <DropdownMenuItem
-            onClick={async () => {
-              const realKey = getCachedRealKey()
-              if (!realKey) return
-              const ok = await copyToClipboard(realKey)
-              if (ok) toast.success(t('Copied'))
-            }}
-          >
-            {t('Copy Key')}
-            <DropdownMenuShortcut>
-              <Copy size={16} />
-            </DropdownMenuShortcut>
-          </DropdownMenuItem>
-          <DropdownMenuItem
-            onClick={async () => {
-              const realKey = getCachedRealKey()
-              if (!realKey) return
-              const connStr = encodeConnectionString(
-                realKey,
-                getServerAddress()
-              )
-              const ok = await copyToClipboard(connStr)
-              if (ok) toast.success(t('Copied'))
-            }}
-          >
-            {t('Copy Connection Info')}
-            <DropdownMenuShortcut>
-              <Link size={16} />
-            </DropdownMenuShortcut>
-          </DropdownMenuItem>
-          <DropdownMenuSeparator />
-          <DropdownMenuItem
-            onClick={() => {
-              setCurrentRow(apiKey)
-              setOpen('update')
-            }}
-          >
-            {t('Edit')}
-            <DropdownMenuShortcut>
-              <Edit size={16} />
-            </DropdownMenuShortcut>
-          </DropdownMenuItem>
-          <DropdownMenuItem
-            onClick={async () => {
-              const realKey = await resolveRealKey(apiKey.id)
-              if (!realKey) return
-              setResolvedKey(realKey)
-              setCurrentRow(apiKey)
-              setOpen('cc-switch')
-            }}
-          >
-            {t('CC Switch')}
-            <DropdownMenuShortcut>
-              <ArrowRightLeft size={16} />
-            </DropdownMenuShortcut>
-          </DropdownMenuItem>
-          {hasChatPresets && (
-            <DropdownMenuSub>
-              <DropdownMenuSubTrigger>{t('Chat')}</DropdownMenuSubTrigger>
-              <DropdownMenuSubContent>
-                {chatPresets.map((preset) => (
-                  <DropdownMenuItem
-                    key={preset.id}
-                    onClick={() => handleOpenChatPreset(preset)}
-                  >
-                    {preset.name}
-                    {preset.type !== 'web' && (
-                      <DropdownMenuShortcut>
-                        <ExternalLink size={16} />
-                      </DropdownMenuShortcut>
-                    )}
-                  </DropdownMenuItem>
-                ))}
-              </DropdownMenuSubContent>
-            </DropdownMenuSub>
-          )}
-          <DropdownMenuSeparator />
-          <DropdownMenuItem
-            onClick={() => {
-              setCurrentRow(apiKey)
-              setOpen('delete')
-            }}
-            className='text-destructive focus:text-destructive'
-          >
-            {t('Delete')}
-            <DropdownMenuShortcut>
-              <Trash2 size={16} />
-            </DropdownMenuShortcut>
-          </DropdownMenuItem>
-        </DropdownMenuContent>
-      </DropdownMenu>
+          <Edit />
+        </TooltipTrigger>
+        <TooltipContent>{t('Edit')}</TooltipContent>
+      </Tooltip>
+
+      <DataTableRowActionMenu
+        ariaLabel={t('Open menu')}
+        contentClassName='w-[200px]'
+        modal={false}
+        onOpenChange={handleMenuOpenChange}
+      >
+        <DropdownMenuItem
+          onClick={async () => {
+            const realKey = getCachedRealKey()
+            if (!realKey) return
+            const ok = await copyToClipboard(realKey)
+            if (ok) toast.success(t('Copied'))
+          }}
+        >
+          {t('Copy Key')}
+          <DropdownMenuShortcut>
+            <Copy size={16} />
+          </DropdownMenuShortcut>
+        </DropdownMenuItem>
+        <DropdownMenuItem
+          onClick={async () => {
+            const realKey = getCachedRealKey()
+            if (!realKey) return
+            const connStr = encodeConnectionString(realKey, getServerAddress())
+            const ok = await copyToClipboard(connStr)
+            if (ok) toast.success(t('Copied'))
+          }}
+        >
+          {t('Copy Connection Info')}
+          <DropdownMenuShortcut>
+            <Link size={16} />
+          </DropdownMenuShortcut>
+        </DropdownMenuItem>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem
+          onClick={async () => {
+            const realKey = await resolveRealKey(apiKey.id)
+            if (!realKey) return
+            setResolvedKey(realKey)
+            setCurrentRow(apiKey)
+            setOpen('cc-switch')
+          }}
+        >
+          {t('CC Switch')}
+          <DropdownMenuShortcut>
+            <ArrowRightLeft size={16} />
+          </DropdownMenuShortcut>
+        </DropdownMenuItem>
+        {hasChatPresets && (
+          <DropdownMenuSub>
+            <DropdownMenuSubTrigger>{t('Chat')}</DropdownMenuSubTrigger>
+            <DropdownMenuSubContent>
+              {chatPresets.map((preset) => (
+                <DropdownMenuItem
+                  key={preset.id}
+                  onClick={() => handleOpenChatPreset(preset)}
+                >
+                  {preset.name}
+                  {preset.type !== 'web' && (
+                    <DropdownMenuShortcut>
+                      <ExternalLink size={16} />
+                    </DropdownMenuShortcut>
+                  )}
+                </DropdownMenuItem>
+              ))}
+            </DropdownMenuSubContent>
+          </DropdownMenuSub>
+        )}
+        <DropdownMenuSeparator />
+        <DropdownMenuItem
+          onClick={() => {
+            setCurrentRow(apiKey)
+            setOpen('delete')
+          }}
+          className='text-destructive focus:text-destructive'
+        >
+          {t('Delete')}
+          <DropdownMenuShortcut>
+            <Trash2 size={16} />
+          </DropdownMenuShortcut>
+        </DropdownMenuItem>
+      </DataTableRowActionMenu>
     </div>
   )
 }

web/default/src/features/models/components/data-table-row-actions.tsx

@@ -18,18 +18,20 @@ For commercial licensing, please contact support@quantumnous.com
 */
 import { useState } from 'react'
 import { useQueryClient } from '@tanstack/react-query'
-import { type Row } from '@tanstack/react-table'
-import { MoreHorizontal, Pencil, Power, PowerOff, Trash2 } from 'lucide-react'
+import type { Row } from '@tanstack/react-table'
+import { Pencil, Power, PowerOff, Trash2 } from 'lucide-react'
 import { useTranslation } from 'react-i18next'
 import { Button } from '@/components/ui/button'
 import {
-  DropdownMenu,
-  DropdownMenuContent,
   DropdownMenuItem,
-  DropdownMenuSeparator,
   DropdownMenuShortcut,
-  DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu'
+import { DataTableRowActionMenu } from '@/components/data-table/core/row-action-menu'
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from '@/components/ui/tooltip'
 import { ConfirmDialog } from '@/components/confirm-dialog'
 import {
   handleDeleteModel,
@@ -61,80 +63,77 @@ export function DataTableRowActions({ row }: DataTableRowActionsProps) {
     handleToggleModelStatus(model.id, model.status, queryClient)
   }
 
+  const toggleLabel = isEnabled ? t('Disable') : t('Enable')
+
   return (
-    <div className='-ml-2'>
-      <DropdownMenu>
-        <DropdownMenuTrigger
+    <div className='-ml-1.5 flex items-center gap-1'>
+      <Tooltip>
+        <TooltipTrigger
           render={
             <Button
               variant='ghost'
-              className='data-popup-open:bg-muted flex h-8 w-8 p-0'
+              size='icon-sm'
+              onClick={handleEdit}
+              aria-label={t('Edit')}
             />
           }
         >
-          <MoreHorizontal className='h-4 w-4' />
-          <span className='sr-only'>{t('Open menu')}</span>
-        </DropdownMenuTrigger>
-        <DropdownMenuContent align='end' className='w-48'>
-          {/* Edit */}
-          <DropdownMenuItem onClick={handleEdit}>
-            {t('Edit')}
-            <DropdownMenuShortcut>
-              <Pencil size={16} />
-            </DropdownMenuShortcut>
-          </DropdownMenuItem>
+          <Pencil />
+        </TooltipTrigger>
+        <TooltipContent>{t('Edit')}</TooltipContent>
+      </Tooltip>
 
-          <DropdownMenuSeparator />
+      <Tooltip>
+        <TooltipTrigger
+          render={
+            <Button
+              variant='ghost'
+              size='icon-sm'
+              onClick={handleToggleStatus}
+              aria-label={toggleLabel}
+              className={
+                isEnabled
+                  ? 'text-destructive hover:text-destructive'
+                  : 'text-success hover:text-success'
+              }
+            />
+          }
+        >
+          {isEnabled ? <PowerOff /> : <Power />}
+        </TooltipTrigger>
+        <TooltipContent>{toggleLabel}</TooltipContent>
+      </Tooltip>
 
-          {/* Enable/Disable */}
-          <DropdownMenuItem onClick={handleToggleStatus}>
-            {isEnabled ? (
-              <>
-                {t('Disable')}
-                <DropdownMenuShortcut>
-                  <PowerOff size={16} />
-                </DropdownMenuShortcut>
-              </>
-            ) : (
-              <>
-                {t('Enable')}
-                <DropdownMenuShortcut>
-                  <Power size={16} />
-                </DropdownMenuShortcut>
-              </>
-            )}
-          </DropdownMenuItem>
-
-          <DropdownMenuSeparator />
-
-          {/* Delete */}
-          <DropdownMenuItem
-            onSelect={(e) => {
-              e.preventDefault()
-              setDeleteConfirmOpen(true)
-            }}
-            className='text-destructive focus:text-destructive'
-          >
-            {t('Delete')}
-            <DropdownMenuShortcut>
-              <Trash2 size={16} />
-            </DropdownMenuShortcut>
-          </DropdownMenuItem>
-        </DropdownMenuContent>
-
-        <ConfirmDialog
-          open={deleteConfirmOpen}
-          onOpenChange={setDeleteConfirmOpen}
-          title={t('Delete Model')}
-          desc={`Are you sure you want to delete "${model.model_name}"? This action cannot be undone.`}
-          confirmText='Delete'
-          destructive
-          handleConfirm={() => {
-            handleDeleteModel(model.id, queryClient)
-            setDeleteConfirmOpen(false)
+      <DataTableRowActionMenu ariaLabel={t('Open menu')}>
+        <DropdownMenuItem
+          onSelect={(e) => {
+            e.preventDefault()
+            setDeleteConfirmOpen(true)
           }}
-        />
-      </DropdownMenu>
+          className='text-destructive focus:text-destructive'
+        >
+          {t('Delete')}
+          <DropdownMenuShortcut>
+            <Trash2 size={16} />
+          </DropdownMenuShortcut>
+        </DropdownMenuItem>
+      </DataTableRowActionMenu>
+
+      <ConfirmDialog
+        open={deleteConfirmOpen}
+        onOpenChange={setDeleteConfirmOpen}
+        title={t('Delete Model')}
+        desc={t(
+          'Are you sure you want to delete model "{{name}}"? This action cannot be undone.',
+          { name: model.model_name }
+        )}
+        confirmText={t('Delete')}
+        destructive
+        handleConfirm={() => {
+          handleDeleteModel(model.id, queryClient)
+          setDeleteConfirmOpen(false)
+        }}
+      />
     </div>
   )
 }

web/default/src/features/models/components/deployments-columns.tsx

@@ -16,13 +16,21 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
 
 For commercial licensing, please contact support@quantumnous.com
 */
-import { type ColumnDef } from '@tanstack/react-table'
+import type { ColumnDef } from '@tanstack/react-table'
 import { Eye, Info, Pencil, Settings2, Timer, Trash2 } from 'lucide-react'
 import { useTranslation } from 'react-i18next'
-import { formatTimestampToDate } from '@/lib/format'
-import { Button } from '@/components/ui/button'
+
+import { DataTableRowActionMenu } from '@/components/data-table/core/row-action-menu'
 import { StatusBadge } from '@/components/status-badge'
 import { TableId } from '@/components/table-id'
+import { Button } from '@/components/ui/button'
+import {
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+} from '@/components/ui/dropdown-menu'
+import { formatTimestampToDate } from '@/lib/format'
+
 import { getDeploymentStatusConfig } from '../constants'
 import {
   formatRemainingMinutes,
@@ -113,8 +121,9 @@ export function useDeploymentsColumns(opts: {
       header: t('Provider'),
       cell: ({ row }) => {
         const provider = row.original.provider
-        if (!provider)
+        if (!provider) {
           return <span className='text-muted-foreground text-xs'>-</span>
+        }
         return (
           <StatusBadge
             label={String(provider)}
@@ -194,8 +203,9 @@ export function useDeploymentsColumns(opts: {
           typeof row.original.hardware_quantity === 'number'
             ? row.original.hardware_quantity
             : null
-        if (!hardware)
+        if (!hardware) {
           return <span className='text-muted-foreground text-xs'>-</span>
+        }
         return (
           <div className='flex max-w-full min-w-0 flex-nowrap items-center gap-2 overflow-hidden'>
             <StatusBadge
@@ -218,12 +228,12 @@ export function useDeploymentsColumns(opts: {
       header: t('Created'),
       meta: { mobileHidden: true },
       cell: ({ row }) => {
-        const ts =
-          typeof row.original.created_at === 'number'
-            ? row.original.created_at
-            : typeof row.original.created_at === 'string'
-              ? Number(row.original.created_at)
-              : undefined
+        let ts: number | undefined
+        if (typeof row.original.created_at === 'number') {
+          ts = row.original.created_at
+        } else if (typeof row.original.created_at === 'string') {
+          ts = Number(row.original.created_at)
+        }
         return (
           <div className='min-w-[140px] font-mono text-sm'>
             {formatTimestampToDate(ts)}
@@ -249,56 +259,51 @@ export function useDeploymentsColumns(opts: {
           <div className='-ml-2.5 flex items-center gap-1'>
             <Button
               variant='ghost'
-              size='sm'
+              size='icon-sm'
               onClick={() => opts.onViewLogs(id)}
-              title={t('View logs')}
+              aria-label={t('View logs')}
             >
-              <Eye className='h-4 w-4' />
-            </Button>
-            <Button
-              variant='ghost'
-              size='sm'
-              onClick={() => opts.onViewDetails(id)}
-              title={t('View details')}
-            >
-              <Info className='h-4 w-4' />
-            </Button>
-            <Button
-              variant='ghost'
-              size='sm'
-              onClick={() => opts.onUpdateConfig(id)}
-              title={t('Update configuration')}
-            >
-              <Settings2 className='h-4 w-4' />
-            </Button>
-            <Button
-              variant='ghost'
-              size='sm'
-              onClick={() => opts.onExtend(id)}
-              title={t('Extend deployment')}
-            >
-              <Timer className='h-4 w-4' />
-            </Button>
-            <Button
-              variant='ghost'
-              size='sm'
-              onClick={() => opts.onRename(id, String(currentName))}
-              title={t('Rename deployment')}
-            >
-              <Pencil className='h-4 w-4' />
-            </Button>
-            <Button
-              variant='ghost'
-              size='sm'
-              onClick={() => opts.onDelete(row.original)}
-              title={t('Delete')}
-            >
-              <Trash2 className='h-4 w-4 text-red-500' />
+              <Eye />
             </Button>
+            <DataTableRowActionMenu ariaLabel={t('Open menu')}>
+              <DropdownMenuItem onClick={() => opts.onViewDetails(id)}>
+                {t('View details')}
+                <DropdownMenuShortcut>
+                  <Info size={16} />
+                </DropdownMenuShortcut>
+              </DropdownMenuItem>
+              <DropdownMenuItem onClick={() => opts.onUpdateConfig(id)}>
+                {t('Update configuration')}
+                <DropdownMenuShortcut>
+                  <Settings2 size={16} />
+                </DropdownMenuShortcut>
+              </DropdownMenuItem>
+              <DropdownMenuItem onClick={() => opts.onExtend(id)}>
+                {t('Extend deployment')}
+                <DropdownMenuShortcut>
+                  <Timer size={16} />
+                </DropdownMenuShortcut>
+              </DropdownMenuItem>
+              <DropdownMenuItem onClick={() => opts.onRename(id, currentName)}>
+                {t('Rename deployment')}
+                <DropdownMenuShortcut>
+                  <Pencil size={16} />
+                </DropdownMenuShortcut>
+              </DropdownMenuItem>
+              <DropdownMenuSeparator />
+              <DropdownMenuItem
+                onClick={() => opts.onDelete(row.original)}
+                className='text-destructive focus:text-destructive'
+              >
+                {t('Delete')}
+                <DropdownMenuShortcut>
+                  <Trash2 size={16} />
+                </DropdownMenuShortcut>
+              </DropdownMenuItem>
+            </DataTableRowActionMenu>
           </div>
         )
       },
-      size: 180,
       meta: { pinned: 'right' as const },
     },
   ]

web/default/src/features/models/components/deployments-table.tsx

@@ -308,7 +308,7 @@ export function DeploymentsTable() {
             <AlertDialogAction
               onClick={handleDelete}
               disabled={isDeleting}
-              className='bg-destructive text-destructive-foreground hover:bg-destructive/90'
+              variant='destructive'
             >
               {isDeleting ? t('Deleting...') : t('Delete')}
             </AlertDialogAction>

web/default/src/features/models/components/dialogs/prefill-group-management-dialog.tsx

@@ -16,7 +16,7 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
 
 For commercial licensing, please contact support@quantumnous.com
 */
-import { useEffect, useMemo, useState } from 'react'
+import { useEffect, useMemo, useState, type ReactNode } from 'react'
 import { useQuery, useQueryClient } from '@tanstack/react-query'
 import {
   Layers3,
@@ -28,8 +28,13 @@ import {
 } from 'lucide-react'
 import { useTranslation } from 'react-i18next'
 import { toast } from 'sonner'
-import { cn } from '@/lib/utils'
-import { useIsMobile } from '@/hooks/use-mobile'
+
+import { ConfirmDialog } from '@/components/confirm-dialog'
+import { StaticDataTable } from '@/components/data-table/static/static-data-table'
+import { StaticRowActions } from '@/components/data-table/static/static-row-actions'
+import { Dialog } from '@/components/dialog'
+import { StatusBadge } from '@/components/status-badge'
+import { TableId } from '@/components/table-id'
 import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert'
 import { Button } from '@/components/ui/button'
 import {
@@ -46,11 +51,9 @@ import {
   EmptyMedia,
   EmptyTitle,
 } from '@/components/ui/empty'
-import { ConfirmDialog } from '@/components/confirm-dialog'
-import { StaticDataTable } from '@/components/data-table'
-import { Dialog } from '@/components/dialog'
-import { StatusBadge } from '@/components/status-badge'
-import { TableId } from '@/components/table-id'
+import { useIsMobile } from '@/hooks/use-mobile'
+import { cn } from '@/lib/utils'
+
 import { deletePrefillGroup, getPrefillGroups } from '../../api'
 import { prefillGroupsQueryKeys } from '../../lib'
 import type { PrefillGroup } from '../../types'
@@ -140,21 +143,245 @@ export function PrefillGroupManagementDialog({
     try {
       const response = await deletePrefillGroup(deleteState.group.id)
       if (response.success) {
-        toast.success(`Deleted "${deleteState.group.name}"`)
+        toast.success(
+          t('Deleted "{{name}}"', { name: deleteState.group.name })
+        )
         queryClient.invalidateQueries({
           queryKey: prefillGroupsQueryKeys.lists(),
         })
         setDeleteState({ open: false, group: null })
       } else {
-        toast.error(response.message || 'Failed to delete group')
+        toast.error(response.message || t('Failed to delete group'))
       }
     } catch (err: unknown) {
-      toast.error((err as Error)?.message || 'Failed to delete group')
+      toast.error((err as Error)?.message || t('Failed to delete group'))
     } finally {
       setIsDeleting(false)
     }
   }
 
+  let groupsContent: ReactNode
+  if (isLoading) {
+    groupsContent = (
+      <div className='flex flex-col items-center justify-center gap-2 py-12 text-center'>
+        <Loader2 className='text-muted-foreground h-6 w-6 animate-spin' />
+        <p className='text-muted-foreground text-sm'>
+          {t('Fetching prefill groups...')}
+        </p>
+      </div>
+    )
+  } else if (normalizedGroups.length === 0) {
+    groupsContent = (
+      <Empty className='border border-dashed py-10'>
+        <EmptyMedia variant='icon'>
+          <Layers3 className='h-6 w-6' />
+        </EmptyMedia>
+        <EmptyHeader>
+          <EmptyTitle>{t('No prefill groups yet')}</EmptyTitle>
+          <EmptyDescription>
+            {t(
+              'Create your first group to reuse model, tag, or endpoint selections anywhere in the dashboard.'
+            )}
+          </EmptyDescription>
+        </EmptyHeader>
+        <EmptyDescription>
+          {t('Prefill groups help you keep complex configurations in sync.')}
+        </EmptyDescription>
+      </Empty>
+    )
+  } else if (isMobile) {
+    groupsContent = (
+      <div className='space-y-3'>
+        {normalizedGroups.map(({ group, meta, parsedItems }) => (
+          <Card key={group.id} className='border-border/60'>
+            <CardHeader className='flex flex-row items-start justify-between gap-4'>
+              <div className='space-y-2'>
+                <CardTitle className='flex flex-wrap items-center gap-2'>
+                  {group.name}
+                  <StatusBadge variant={meta.badge} size='sm' copyable={false}>
+                    {meta.label}
+                    <span className='text-muted-foreground/30'>·</span>
+                    <span className='text-muted-foreground font-mono'>
+                      #{group.id}
+                    </span>
+                  </StatusBadge>
+                </CardTitle>
+                {group.description ? (
+                  <CardDescription className='line-clamp-2'>
+                    {group.description}
+                  </CardDescription>
+                ) : (
+                  <CardDescription className='text-muted-foreground italic'>
+                    No description provided
+                  </CardDescription>
+                )}
+              </div>
+
+              <div className='flex items-center gap-2'>
+                <Button
+                  size='icon'
+                  variant='outline'
+                  onClick={() => onEditGroup(group)}
+                >
+                  <Pencil className='h-4 w-4' />
+                  <span className='sr-only'>{t('Edit group')}</span>
+                </Button>
+                <Button
+                  size='icon'
+                  variant='ghost'
+                  className='text-destructive hover:text-destructive'
+                  onClick={() => handleDeleteClick(group)}
+                >
+                  <Trash2 className='h-4 w-4' />
+                  <span className='sr-only'>{t('Delete group')}</span>
+                </Button>
+              </div>
+            </CardHeader>
+            <CardContent className='space-y-3'>
+              <div className='text-muted-foreground flex flex-wrap items-center gap-2 text-xs font-medium tracking-wide uppercase'>
+                <span>Items</span>
+                <StatusBadge
+                  label={`${parsedItems.length} item${parsedItems.length === 1 ? '' : 's'}`}
+                  variant='neutral'
+                  size='sm'
+                  copyable={false}
+                />
+              </div>
+              {parsedItems.length > 0 ? (
+                <div className='flex flex-wrap gap-2'>
+                  {parsedItems.slice(0, 6).map((item) => (
+                    <StatusBadge
+                      key={item}
+                      label={item}
+                      autoColor={item}
+                      size='sm'
+                    />
+                  ))}
+                  {parsedItems.length > 6 && (
+                    <StatusBadge
+                      label={`+${parsedItems.length - 6} more`}
+                      variant='neutral'
+                      size='sm'
+                      copyable={false}
+                    />
+                  )}
+                </div>
+              ) : (
+                <p className='text-muted-foreground text-sm'>
+                  {group.type === 'endpoint'
+                    ? 'No endpoint mappings configured.'
+                    : 'No items configured yet.'}
+                </p>
+              )}
+            </CardContent>
+          </Card>
+        ))}
+      </div>
+    )
+  } else {
+    groupsContent = (
+      <StaticDataTable
+        tableClassName='min-w-[680px]'
+        data={normalizedGroups}
+        getRowKey={({ group }) => group.id}
+        columns={[
+          {
+            id: 'group',
+            header: t('Group'),
+            cellClassName: 'align-top whitespace-normal',
+            cell: ({ group }) => (
+              <div className='flex flex-col gap-1'>
+                <div className='flex flex-wrap items-center gap-2'>
+                  <span className='font-medium'>{group.name}</span>
+                  <TableId value={group.id} />
+                </div>
+                {group.description ? (
+                  <p className='text-muted-foreground text-xs'>
+                    {group.description}
+                  </p>
+                ) : (
+                  <p className='text-muted-foreground text-xs italic'>
+                    No description provided
+                  </p>
+                )}
+              </div>
+            ),
+          },
+          {
+            id: 'type',
+            header: t('Type'),
+            cellClassName: 'align-top',
+            cell: ({ meta }) => (
+              <StatusBadge
+                label={meta.label}
+                variant={meta.badge}
+                size='sm'
+                copyable={false}
+              />
+            ),
+          },
+          {
+            id: 'items',
+            header: t('Items'),
+            className: 'min-w-[240px]',
+            cellClassName: 'align-top whitespace-normal',
+            cell: ({ group, parsedItems }) => (
+              <>
+                <div className='flex flex-wrap gap-2'>
+                  {parsedItems.length > 0 ? (
+                    <>
+                      {parsedItems.slice(0, 6).map((item) => (
+                        <StatusBadge
+                          key={item}
+                          label={item}
+                          autoColor={item}
+                          size='sm'
+                        />
+                      ))}
+                      {parsedItems.length > 6 && (
+                        <StatusBadge
+                          label={`+${parsedItems.length - 6} more`}
+                          variant='neutral'
+                          size='sm'
+                          copyable={false}
+                        />
+                      )}
+                    </>
+                  ) : (
+                    <p className='text-muted-foreground text-sm'>
+                      {group.type === 'endpoint'
+                        ? 'No endpoint mappings configured.'
+                        : 'No items configured yet.'}
+                    </p>
+                  )}
+                </div>
+                <div className='text-muted-foreground mt-2 text-xs font-medium tracking-wide uppercase'>
+                  {parsedItems.length} item
+                  {parsedItems.length === 1 ? '' : 's'}
+                </div>
+              </>
+            ),
+          },
+          {
+            id: 'actions',
+            header: t('Actions'),
+            className: 'text-right',
+            cellClassName: 'align-top',
+            cell: ({ group }) => (
+              <StaticRowActions
+                editLabel={t('Edit group')}
+                deleteLabel={t('Delete group')}
+                menuLabel={t('Open menu')}
+                onEdit={() => onEditGroup(group)}
+                onDelete={() => handleDeleteClick(group)}
+              />
+            ),
+          },
+        ]}
+      />
+    )
+  }
+
   return (
     <>
       <Dialog
@@ -219,236 +446,7 @@ export function PrefillGroupManagementDialog({
             </Alert>
           )}
 
-          {isLoading ? (
-            <div className='flex flex-col items-center justify-center gap-2 py-12 text-center'>
-              <Loader2 className='text-muted-foreground h-6 w-6 animate-spin' />
-              <p className='text-muted-foreground text-sm'>
-                {t('Fetching prefill groups...')}
-              </p>
-            </div>
-          ) : normalizedGroups.length === 0 ? (
-            <Empty className='border border-dashed py-10'>
-              <EmptyMedia variant='icon'>
-                <Layers3 className='h-6 w-6' />
-              </EmptyMedia>
-              <EmptyHeader>
-                <EmptyTitle>{t('No prefill groups yet')}</EmptyTitle>
-                <EmptyDescription>
-                  {t(
-                    'Create your first group to reuse model, tag, or endpoint selections anywhere in the dashboard.'
-                  )}
-                </EmptyDescription>
-              </EmptyHeader>
-              <EmptyDescription>
-                {t(
-                  'Prefill groups help you keep complex configurations in sync.'
-                )}
-              </EmptyDescription>
-            </Empty>
-          ) : isMobile ? (
-            <div className='space-y-3'>
-              {normalizedGroups.map(({ group, meta, parsedItems }) => (
-                <Card key={group.id} className='border-border/60'>
-                  <CardHeader className='flex flex-row items-start justify-between gap-4'>
-                    <div className='space-y-2'>
-                      <CardTitle className='flex flex-wrap items-center gap-2'>
-                        {group.name}
-                        <StatusBadge
-                          variant={meta.badge}
-                          size='sm'
-                          copyable={false}
-                        >
-                          {meta.label}
-                          <span className='text-muted-foreground/30'>·</span>
-                          <span className='text-muted-foreground font-mono'>
-                            #{group.id}
-                          </span>
-                        </StatusBadge>
-                      </CardTitle>
-                      {group.description ? (
-                        <CardDescription className='line-clamp-2'>
-                          {group.description}
-                        </CardDescription>
-                      ) : (
-                        <CardDescription className='text-muted-foreground italic'>
-                          No description provided
-                        </CardDescription>
-                      )}
-                    </div>
-
-                    <div className='flex items-center gap-2'>
-                      <Button
-                        size='icon'
-                        variant='outline'
-                        onClick={() => onEditGroup(group)}
-                      >
-                        <Pencil className='h-4 w-4' />
-                        <span className='sr-only'>Edit group</span>
-                      </Button>
-                      <Button
-                        size='icon'
-                        variant='ghost'
-                        className='text-destructive hover:text-destructive'
-                        onClick={() => handleDeleteClick(group)}
-                      >
-                        <Trash2 className='h-4 w-4' />
-                        <span className='sr-only'>Delete group</span>
-                      </Button>
-                    </div>
-                  </CardHeader>
-                  <CardContent className='space-y-3'>
-                    <div className='text-muted-foreground flex flex-wrap items-center gap-2 text-xs font-medium tracking-wide uppercase'>
-                      <span>Items</span>
-                      <StatusBadge
-                        label={`${parsedItems.length} item${parsedItems.length === 1 ? '' : 's'}`}
-                        variant='neutral'
-                        size='sm'
-                        copyable={false}
-                      />
-                    </div>
-                    {parsedItems.length > 0 ? (
-                      <div className='flex flex-wrap gap-2'>
-                        {parsedItems.slice(0, 6).map((item) => (
-                          <StatusBadge
-                            key={item}
-                            label={item}
-                            autoColor={item}
-                            size='sm'
-                          />
-                        ))}
-                        {parsedItems.length > 6 && (
-                          <StatusBadge
-                            label={`+${parsedItems.length - 6} more`}
-                            variant='neutral'
-                            size='sm'
-                            copyable={false}
-                          />
-                        )}
-                      </div>
-                    ) : (
-                      <p className='text-muted-foreground text-sm'>
-                        {group.type === 'endpoint'
-                          ? 'No endpoint mappings configured.'
-                          : 'No items configured yet.'}
-                      </p>
-                    )}
-                  </CardContent>
-                </Card>
-              ))}
-            </div>
-          ) : (
-            <StaticDataTable
-              tableClassName='min-w-[680px]'
-              data={normalizedGroups}
-              getRowKey={({ group }) => group.id}
-              columns={[
-                {
-                  id: 'group',
-                  header: t('Group'),
-                  cellClassName: 'align-top whitespace-normal',
-                  cell: ({ group }) => (
-                    <div className='flex flex-col gap-1'>
-                      <div className='flex flex-wrap items-center gap-2'>
-                        <span className='font-medium'>{group.name}</span>
-                        <TableId value={group.id} />
-                      </div>
-                      {group.description ? (
-                        <p className='text-muted-foreground text-xs'>
-                          {group.description}
-                        </p>
-                      ) : (
-                        <p className='text-muted-foreground text-xs italic'>
-                          No description provided
-                        </p>
-                      )}
-                    </div>
-                  ),
-                },
-                {
-                  id: 'type',
-                  header: t('Type'),
-                  cellClassName: 'align-top',
-                  cell: ({ meta }) => (
-                    <StatusBadge
-                      label={meta.label}
-                      variant={meta.badge}
-                      size='sm'
-                      copyable={false}
-                    />
-                  ),
-                },
-                {
-                  id: 'items',
-                  header: t('Items'),
-                  className: 'min-w-[240px]',
-                  cellClassName: 'align-top whitespace-normal',
-                  cell: ({ group, parsedItems }) => (
-                    <>
-                      <div className='flex flex-wrap gap-2'>
-                        {parsedItems.length > 0 ? (
-                          <>
-                            {parsedItems.slice(0, 6).map((item) => (
-                              <StatusBadge
-                                key={item}
-                                label={item}
-                                autoColor={item}
-                                size='sm'
-                              />
-                            ))}
-                            {parsedItems.length > 6 && (
-                              <StatusBadge
-                                label={`+${parsedItems.length - 6} more`}
-                                variant='neutral'
-                                size='sm'
-                                copyable={false}
-                              />
-                            )}
-                          </>
-                        ) : (
-                          <p className='text-muted-foreground text-sm'>
-                            {group.type === 'endpoint'
-                              ? 'No endpoint mappings configured.'
-                              : 'No items configured yet.'}
-                          </p>
-                        )}
-                      </div>
-                      <div className='text-muted-foreground mt-2 text-xs font-medium tracking-wide uppercase'>
-                        {parsedItems.length} item
-                        {parsedItems.length === 1 ? '' : 's'}
-                      </div>
-                    </>
-                  ),
-                },
-                {
-                  id: 'actions',
-                  header: t('Actions'),
-                  className: 'w-[120px] text-right',
-                  cellClassName: 'align-top',
-                  cell: ({ group }) => (
-                    <div className='flex justify-end gap-2'>
-                      <Button
-                        size='icon'
-                        variant='outline'
-                        onClick={() => onEditGroup(group)}
-                      >
-                        <Pencil className='h-4 w-4' />
-                        <span className='sr-only'>Edit group</span>
-                      </Button>
-                      <Button
-                        size='icon'
-                        variant='ghost'
-                        className='text-destructive hover:text-destructive'
-                        onClick={() => handleDeleteClick(group)}
-                      >
-                        <Trash2 className='h-4 w-4' />
-                        <span className='sr-only'>Delete group</span>
-                      </Button>
-                    </div>
-                  ),
-                },
-              ]}
-            />
-          )}
+          {groupsContent}
         </div>
       </Dialog>
 
@@ -458,13 +456,14 @@ export function PrefillGroupManagementDialog({
         title={t('Delete group')}
         desc={
           <p>
-            {t('Are you sure you want to delete')}{' '}
-            <span className='font-medium'>{deleteState.group?.name}</span>
-            {t('? This action cannot be undone.')}
+            {t(
+              'Are you sure you want to delete group "{{name}}"? This action cannot be undone.',
+              { name: deleteState.group?.name ?? '' }
+            )}
           </p>
         }
         destructive
-        confirmText={isDeleting ? 'Deleting...' : 'Delete'}
+        confirmText={isDeleting ? t('Deleting...') : t('Delete')}
         isLoading={isDeleting}
         handleConfirm={handleDeleteConfirm}
       />

web/default/src/features/models/components/models-columns.tsx

@@ -470,7 +470,6 @@ export function useModelsColumns(vendors: Vendor[] = []): ColumnDef<Model>[] {
       cell: ({ row }) => {
         return <DataTableRowActions row={row} />
       },
-      size: 100,
       enableSorting: false,
       enableHiding: false,
       meta: { pinned: 'right' as const },

web/default/src/features/profile/components/passkey-card.tsx

@@ -125,11 +125,12 @@ export function PasskeyCard({ loading: pageLoading }: PasskeyCardProps) {
 
   const handleRemove = useCallback(async () => {
     const methods = await fetchVerificationMethods()
-    const required: VerificationMethod | null = methods.has2FA
-      ? '2fa'
-      : methods.hasPasskey
-        ? 'passkey'
-        : null
+    let required: VerificationMethod | null = null
+    if (methods.has2FA) {
+      required = '2fa'
+    } else if (methods.hasPasskey) {
+      required = 'passkey'
+    }
 
     if (!required) {
       toast.error(
@@ -205,6 +206,24 @@ export function PasskeyCard({ loading: pageLoading }: PasskeyCardProps) {
       : t('Not used yet')
 
   const showUnsupportedNotice = !supported && !enabled
+  let backupStatus: {
+    label: string
+    variant: 'success' | 'warning' | 'neutral'
+  } | null = null
+
+  if (status?.backup_eligible !== undefined) {
+    backupStatus = {
+      label: t('No backup'),
+      variant: 'neutral',
+    }
+
+    if (status.backup_eligible) {
+      backupStatus = {
+        label: status.backup_state ? t('Backed up') : t('Not backed up'),
+        variant: status.backup_state ? 'success' : 'warning',
+      }
+    }
+  }
 
   return (
     <>
@@ -234,22 +253,10 @@ export function PasskeyCard({ loading: pageLoading }: PasskeyCardProps) {
                       showDot
                       copyable={false}
                     />
-                    {status?.backup_eligible !== undefined && (
+                    {backupStatus && (
                       <StatusBadge
-                        label={
-                          status.backup_eligible
-                            ? status.backup_state
-                              ? t('Backed up')
-                              : t('Not backed up')
-                            : t('No backup')
-                        }
-                        variant={
-                          status.backup_eligible
-                            ? status.backup_state
-                              ? 'success'
-                              : 'warning'
-                            : 'neutral'
-                        }
+                        label={backupStatus.label}
+                        variant={backupStatus.variant}
                         showDot
                         copyable={false}
                       />
@@ -310,7 +317,7 @@ export function PasskeyCard({ loading: pageLoading }: PasskeyCardProps) {
                         {t('Cancel')}
                       </AlertDialogCancel>
                       <AlertDialogAction
-                        className='bg-destructive text-destructive-foreground'
+                        variant='destructive'
                         disabled={removing}
                         onClick={(event) => {
                           event.preventDefault()

web/default/src/features/redemption-codes/components/data-table-row-actions.tsx

@@ -16,25 +16,27 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
 
 For commercial licensing, please contact support@quantumnous.com
 */
-import { type Row } from '@tanstack/react-table'
+import type { Row } from '@tanstack/react-table'
 import {
   Trash2,
   Edit,
   Power,
   PowerOff,
-  MoreHorizontal as DotsHorizontalIcon,
 } from 'lucide-react'
 import { useTranslation } from 'react-i18next'
 import { toast } from 'sonner'
 import { Button } from '@/components/ui/button'
 import {
-  DropdownMenu,
-  DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuSeparator,
   DropdownMenuShortcut,
-  DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu'
+import { DataTableRowActionMenu } from '@/components/data-table/core/row-action-menu'
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from '@/components/ui/tooltip'
 import { updateRedemptionStatus } from '../api'
 import { REDEMPTION_STATUS, SUCCESS_MESSAGES } from '../constants'
 import { isRedemptionExpired } from '../lib'
@@ -77,66 +79,61 @@ export function DataTableRowActions<TData>({
   const canToggle = !isUsed && !isExpired
 
   return (
-    <div className='-ml-2'>
-      <DropdownMenu modal={false}>
-        <DropdownMenuTrigger
+    <div className='-ml-1.5 flex items-center gap-1'>
+      <Tooltip>
+        <TooltipTrigger
           render={
             <Button
               variant='ghost'
-              className='data-popup-open:bg-muted flex h-8 w-8 p-0'
+              size='icon-sm'
+              onClick={() => {
+                setCurrentRow(redemption)
+                setOpen('update')
+              }}
+              disabled={!canEdit}
+              aria-label={t('Edit')}
             />
           }
         >
-          <DotsHorizontalIcon className='h-4 w-4' />
-          <span className='sr-only'>{t('Open menu')}</span>
-        </DropdownMenuTrigger>
-        <DropdownMenuContent align='end' className='w-[160px]'>
-          <DropdownMenuItem
-            onClick={() => {
-              setCurrentRow(redemption)
-              setOpen('update')
-            }}
-            disabled={!canEdit}
-          >
-            {t('Edit')}
-            <DropdownMenuShortcut>
-              <Edit size={16} />
-            </DropdownMenuShortcut>
+          <Edit />
+        </TooltipTrigger>
+        <TooltipContent>{t('Edit')}</TooltipContent>
+      </Tooltip>
+
+      <DataTableRowActionMenu ariaLabel={t('Open menu')} modal={false}>
+        {canToggle && (
+          <DropdownMenuItem onClick={handleToggleStatus}>
+            {isEnabled ? (
+              <>
+                {t('Disable')}
+                <DropdownMenuShortcut>
+                  <PowerOff size={16} />
+                </DropdownMenuShortcut>
+              </>
+            ) : (
+              <>
+                {t('Enable')}
+                <DropdownMenuShortcut>
+                  <Power size={16} />
+                </DropdownMenuShortcut>
+              </>
+            )}
           </DropdownMenuItem>
-          {canToggle && (
-            <DropdownMenuItem onClick={handleToggleStatus}>
-              {isEnabled ? (
-                <>
-                  {t('Disable')}
-                  <DropdownMenuShortcut>
-                    <PowerOff size={16} />
-                  </DropdownMenuShortcut>
-                </>
-              ) : (
-                <>
-                  {t('Enable')}
-                  <DropdownMenuShortcut>
-                    <Power size={16} />
-                  </DropdownMenuShortcut>
-                </>
-              )}
-            </DropdownMenuItem>
-          )}
-          <DropdownMenuSeparator />
-          <DropdownMenuItem
-            onClick={() => {
-              setCurrentRow(redemption)
-              setOpen('delete')
-            }}
-            className='text-destructive focus:text-destructive'
-          >
-            {t('Delete')}
-            <DropdownMenuShortcut>
-              <Trash2 size={16} />
-            </DropdownMenuShortcut>
-          </DropdownMenuItem>
-        </DropdownMenuContent>
-      </DropdownMenu>
+        )}
+        {canToggle && <DropdownMenuSeparator />}
+        <DropdownMenuItem
+          onClick={() => {
+            setCurrentRow(redemption)
+            setOpen('delete')
+          }}
+          className='text-destructive focus:text-destructive'
+        >
+          {t('Delete')}
+          <DropdownMenuShortcut>
+            <Trash2 size={16} />
+          </DropdownMenuShortcut>
+        </DropdownMenuItem>
+      </DataTableRowActionMenu>
     </div>
   )
 }

web/default/src/features/redemption-codes/components/redemptions-columns.tsx

@@ -255,7 +255,6 @@ export function useRedemptionsColumns(): ColumnDef<Redemption>[] {
       header: () => t('Actions'),
       cell: ({ row }) => <DataTableRowActions row={row} />,
       meta: { pinned: 'right' as const },
-      size: 88,
     },
   ]
 }

web/default/src/features/redemption-codes/components/redemptions-delete-dialog.tsx

@@ -75,7 +75,7 @@ export function RedemptionsDeleteDialog() {
           <AlertDialogAction
             onClick={handleDelete}
             disabled={isDeleting}
-            className='bg-destructive text-destructive-foreground hover:bg-destructive/90'
+            variant='destructive'
           >
             {isDeleting ? t('Deleting...') : t('Delete')}
           </AlertDialogAction>

web/default/src/features/subscriptions/components/data-table-row-actions.tsx

@@ -16,16 +16,15 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
 
 For commercial licensing, please contact support@quantumnous.com
 */
-import { type Row } from '@tanstack/react-table'
-import { MoreHorizontal, Pencil, Power, PowerOff } from 'lucide-react'
+import type { Row } from '@tanstack/react-table'
+import { Pencil, Power, PowerOff } from 'lucide-react'
 import { useTranslation } from 'react-i18next'
 import { Button } from '@/components/ui/button'
 import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from '@/components/ui/dropdown-menu'
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from '@/components/ui/tooltip'
 import type { PlanRecord } from '../types'
 import { useSubscriptions } from './subscriptions-provider'
 
@@ -36,47 +35,59 @@ interface DataTableRowActionsProps {
 export function DataTableRowActions({ row }: DataTableRowActionsProps) {
   const { t } = useTranslation()
   const { setOpen, setCurrentRow, complianceConfirmed } = useSubscriptions()
+  const isEnabled = row.original.plan.enabled
+  const toggleLabel = isEnabled ? t('Disable') : t('Enable')
+
+  const handleEdit = () => {
+    setCurrentRow(row.original)
+    setOpen('update')
+  }
+
+  const handleToggleStatus = () => {
+    setCurrentRow(row.original)
+    setOpen('toggle-status')
+  }
 
   return (
-    <div className='-ml-2'>
-      <DropdownMenu>
-        <DropdownMenuTrigger
-          render={<Button variant='ghost' className='h-8 w-8 p-0' />}
+    <div className='-ml-1.5 flex items-center gap-1'>
+      <Tooltip>
+        <TooltipTrigger
+          render={
+            <Button
+              variant='ghost'
+              size='icon-sm'
+              disabled={!complianceConfirmed}
+              onClick={handleEdit}
+              aria-label={t('Edit')}
+            />
+          }
         >
-          <MoreHorizontal className='h-4 w-4' />
-        </DropdownMenuTrigger>
-        <DropdownMenuContent align='end'>
-          <DropdownMenuItem
-            disabled={!complianceConfirmed}
-            onClick={() => {
-              setCurrentRow(row.original)
-              setOpen('update')
-            }}
-          >
-            <Pencil className='mr-2 h-4 w-4' />
-            {t('Edit')}
-          </DropdownMenuItem>
-          <DropdownMenuItem
-            disabled={!complianceConfirmed}
-            onClick={() => {
-              setCurrentRow(row.original)
-              setOpen('toggle-status')
-            }}
-          >
-            {row.original.plan.enabled ? (
-              <>
-                <PowerOff className='mr-2 h-4 w-4' />
-                {t('Disable')}
-              </>
-            ) : (
-              <>
-                <Power className='mr-2 h-4 w-4' />
-                {t('Enable')}
-              </>
-            )}
-          </DropdownMenuItem>
-        </DropdownMenuContent>
-      </DropdownMenu>
+          <Pencil />
+        </TooltipTrigger>
+        <TooltipContent>{t('Edit')}</TooltipContent>
+      </Tooltip>
+
+      <Tooltip>
+        <TooltipTrigger
+          render={
+            <Button
+              variant='ghost'
+              size='icon-sm'
+              disabled={!complianceConfirmed}
+              onClick={handleToggleStatus}
+              aria-label={toggleLabel}
+              className={
+                isEnabled
+                  ? 'text-destructive hover:text-destructive'
+                  : 'text-success hover:text-success'
+              }
+            />
+          }
+        >
+          {isEnabled ? <PowerOff /> : <Power />}
+        </TooltipTrigger>
+        <TooltipContent>{toggleLabel}</TooltipContent>
+      </Tooltip>
     </div>
   )
 }

web/default/src/features/subscriptions/components/subscriptions-columns.tsx

@@ -196,7 +196,6 @@ export function useSubscriptionsColumns(): ColumnDef<PlanRecord>[] {
         header: () => t('Actions'),
         cell: ({ row }) => <DataTableRowActions row={row} />,
         meta: { pinned: 'right' as const },
-        size: 80,
       },
     ],
     [t]

web/default/src/features/system-settings/auth/custom-oauth/components/provider-table.tsx

@@ -17,11 +17,13 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
 For commercial licensing, please contact support@quantumnous.com
 */
 import { useState } from 'react'
-import { Pencil, Trash2, Plus } from 'lucide-react'
+import { Plus } from 'lucide-react'
 import { useTranslation } from 'react-i18next'
 import { Button } from '@/components/ui/button'
 import { ConfirmDialog } from '@/components/confirm-dialog'
-import { BadgeCell, StaticDataTable } from '@/components/data-table'
+import { BadgeCell } from '@/components/data-table/core/badge-cell'
+import { StaticDataTable } from '@/components/data-table/static/static-data-table'
+import { StaticRowActions } from '@/components/data-table/static/static-row-actions'
 import { StatusBadge } from '@/components/status-badge'
 import { useDeleteProvider } from '../hooks/use-custom-oauth-mutations'
 import type { CustomOAuthProvider } from '../types'
@@ -118,22 +120,13 @@ export function ProviderTable(props: ProviderTableProps) {
             className: 'text-right',
             cellClassName: 'text-right',
             cell: (provider) => (
-              <div className='flex justify-end gap-1'>
-                <Button
-                  variant='ghost'
-                  size='sm'
-                  onClick={() => props.onEdit(provider)}
-                >
-                  <Pencil className='h-4 w-4' />
-                </Button>
-                <Button
-                  variant='ghost'
-                  size='sm'
-                  onClick={() => setDeleteTarget(provider)}
-                >
-                  <Trash2 className='text-destructive h-4 w-4' />
-                </Button>
-              </div>
+              <StaticRowActions
+                editLabel={t('Edit')}
+                deleteLabel={t('Delete')}
+                menuLabel={t('Open menu')}
+                onEdit={() => props.onEdit(provider)}
+                onDelete={() => setDeleteTarget(provider)}
+              />
             ),
           },
         ]}

web/default/src/features/system-settings/content/announcements-section.tsx

@@ -20,7 +20,7 @@ import { useEffect, useMemo, useState } from 'react'
 import * as z from 'zod'
 import { useForm } from 'react-hook-form'
 import { zodResolver } from '@hookform/resolvers/zod'
-import { Plus, Edit, Trash2, Save } from 'lucide-react'
+import { Plus, Trash2, Save } from 'lucide-react'
 import { useTranslation } from 'react-i18next'
 import { toast } from 'sonner'
 import dayjs from '@/lib/dayjs'
@@ -55,7 +55,8 @@ import {
   SelectValue,
 } from '@/components/ui/select'
 import { Textarea } from '@/components/ui/textarea'
-import { StaticDataTable } from '@/components/data-table'
+import { StaticDataTable } from '@/components/data-table/static/static-data-table'
+import { StaticRowActions } from '@/components/data-table/static/static-row-actions'
 import { DateTimePicker } from '@/components/datetime-picker'
 import { Dialog } from '@/components/dialog'
 import { StatusBadge } from '@/components/status-badge'
@@ -419,24 +420,14 @@ export function AnnouncementsSection({
             {
               id: 'actions',
               header: t('Actions'),
-              className: 'w-32',
               cell: (announcement) => (
-                <div className='flex gap-2'>
-                  <Button
-                    onClick={() => handleEdit(announcement)}
-                    size='sm'
-                    variant='ghost'
-                  >
-                    <Edit className='h-4 w-4' />
-                  </Button>
-                  <Button
-                    onClick={() => handleDelete(announcement)}
-                    size='sm'
-                    variant='ghost'
-                  >
-                    <Trash2 className='h-4 w-4' />
-                  </Button>
-                </div>
+                <StaticRowActions
+                  editLabel={t('Edit')}
+                  deleteLabel={t('Delete')}
+                  menuLabel={t('Open menu')}
+                  onEdit={() => handleEdit(announcement)}
+                  onDelete={() => handleDelete(announcement)}
+                />
               ),
             },
           ]}
@@ -600,13 +591,16 @@ export function AnnouncementsSection({
             <AlertDialogTitle>{t('Are you sure?')}</AlertDialogTitle>
             <AlertDialogDescription>
               {deleteTarget === 'single'
-                ? 'This announcement will be removed from the list.'
-                : `${selectedIds.length} announcements will be removed from the list.`}
+                ? t('This announcement will be removed from the list.')
+                : t(
+                    '{{count}} announcements will be removed from the list.',
+                    { count: selectedIds.length }
+                  )}
             </AlertDialogDescription>
           </AlertDialogHeader>
           <AlertDialogFooter>
             <AlertDialogCancel>{t('Cancel')}</AlertDialogCancel>
-            <AlertDialogAction onClick={confirmDelete}>
+            <AlertDialogAction variant='destructive' onClick={confirmDelete}>
               {t('Delete')}
             </AlertDialogAction>
           </AlertDialogFooter>

web/default/src/features/system-settings/content/api-info-section.tsx

@@ -20,7 +20,7 @@ import { useMemo, useState } from 'react'
 import * as z from 'zod'
 import { useForm } from 'react-hook-form'
 import { zodResolver } from '@hookform/resolvers/zod'
-import { Plus, Edit, Trash2, Save } from 'lucide-react'
+import { Plus, Trash2, Save } from 'lucide-react'
 import { useTranslation } from 'react-i18next'
 import { toast } from 'sonner'
 import { getBgColorClass } from '@/lib/colors'
@@ -54,7 +54,9 @@ import {
   SelectTrigger,
   SelectValue,
 } from '@/components/ui/select'
-import { BadgeCell, StaticDataTable } from '@/components/data-table'
+import { BadgeCell } from '@/components/data-table/core/badge-cell'
+import { StaticDataTable } from '@/components/data-table/static/static-data-table'
+import { StaticRowActions } from '@/components/data-table/static/static-row-actions'
 import { Dialog } from '@/components/dialog'
 import { StatusBadge } from '@/components/status-badge'
 import { SettingsSwitchField } from '../components/settings-form-layout'
@@ -369,24 +371,14 @@ export function ApiInfoSection({ enabled, data }: ApiInfoSectionProps) {
             {
               id: 'actions',
               header: t('Actions'),
-              className: 'w-32',
               cell: (apiInfo) => (
-                <div className='flex gap-2'>
-                  <Button
-                    onClick={() => handleEdit(apiInfo)}
-                    size='sm'
-                    variant='ghost'
-                  >
-                    <Edit className='h-4 w-4' />
-                  </Button>
-                  <Button
-                    onClick={() => handleDelete(apiInfo)}
-                    size='sm'
-                    variant='ghost'
-                  >
-                    <Trash2 className='h-4 w-4' />
-                  </Button>
-                </div>
+                <StaticRowActions
+                  editLabel={t('Edit')}
+                  deleteLabel={t('Delete')}
+                  menuLabel={t('Open menu')}
+                  onEdit={() => handleEdit(apiInfo)}
+                  onDelete={() => handleDelete(apiInfo)}
+                />
               ),
             },
           ]}
@@ -526,13 +518,16 @@ export function ApiInfoSection({ enabled, data }: ApiInfoSectionProps) {
             <AlertDialogTitle>{t('Are you sure?')}</AlertDialogTitle>
             <AlertDialogDescription>
               {deleteTarget === 'single'
-                ? 'This API shortcut will be removed from the list.'
-                : `${selectedIds.length} API shortcuts will be removed from the list.`}
+                ? t('This API shortcut will be removed from the list.')
+                : t(
+                    '{{count}} API shortcuts will be removed from the list.',
+                    { count: selectedIds.length }
+                  )}
             </AlertDialogDescription>
           </AlertDialogHeader>
           <AlertDialogFooter>
             <AlertDialogCancel>{t('Cancel')}</AlertDialogCancel>
-            <AlertDialogAction onClick={confirmDelete}>
+            <AlertDialogAction variant='destructive' onClick={confirmDelete}>
               {t('Delete')}
             </AlertDialogAction>
           </AlertDialogFooter>

web/default/src/features/system-settings/content/chat-settings-visual-editor.tsx

@@ -17,11 +17,12 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
 For commercial licensing, please contact support@quantumnous.com
 */
 import { useState, useMemo } from 'react'
-import { Pencil, Plus, Search, Trash2 } from 'lucide-react'
+import { Plus, Search } from 'lucide-react'
 import { useTranslation } from 'react-i18next'
 import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
-import { StaticDataTable } from '@/components/data-table'
+import { StaticDataTable } from '@/components/data-table/static/static-data-table'
+import { StaticRowActions } from '@/components/data-table/static/static-row-actions'
 import { safeJsonParseWithValidation } from '../utils/json-parser'
 import { isArray } from '../utils/json-validators'
 import { ChatDialog, type ChatEntryData } from './chat-dialog'
@@ -171,22 +172,13 @@ export function ChatSettingsVisualEditor({
             className: 'text-right',
             cellClassName: 'text-right',
             cell: (chat) => (
-              <div className='flex justify-end gap-2'>
-                <Button
-                  variant='ghost'
-                  size='sm'
-                  onClick={() => handleEdit(chat)}
-                >
-                  <Pencil className='h-4 w-4' />
-                </Button>
-                <Button
-                  variant='ghost'
-                  size='sm'
-                  onClick={() => handleDelete(chat.name)}
-                >
-                  <Trash2 className='h-4 w-4' />
-                </Button>
-              </div>
+              <StaticRowActions
+                editLabel={t('Edit')}
+                deleteLabel={t('Delete')}
+                menuLabel={t('Open menu')}
+                onEdit={() => handleEdit(chat)}
+                onDelete={() => handleDelete(chat.name)}
+              />
             ),
           },
         ]}

web/default/src/features/system-settings/content/faq-section.tsx

@@ -20,7 +20,7 @@ import { useEffect, useState } from 'react'
 import * as z from 'zod'
 import { useForm } from 'react-hook-form'
 import { zodResolver } from '@hookform/resolvers/zod'
-import { Plus, Edit, Trash2, Save } from 'lucide-react'
+import { Plus, Trash2, Save } from 'lucide-react'
 import { useTranslation } from 'react-i18next'
 import { toast } from 'sonner'
 import {
@@ -46,7 +46,8 @@ import {
 } from '@/components/ui/form'
 import { Input } from '@/components/ui/input'
 import { Textarea } from '@/components/ui/textarea'
-import { StaticDataTable } from '@/components/data-table'
+import { StaticDataTable } from '@/components/data-table/static/static-data-table'
+import { StaticRowActions } from '@/components/data-table/static/static-row-actions'
 import { Dialog } from '@/components/dialog'
 import { SettingsSwitchField } from '../components/settings-form-layout'
 import { SettingsSection } from '../components/settings-section'
@@ -302,24 +303,14 @@ export function FAQSection({ enabled, data }: FAQSectionProps) {
             {
               id: 'actions',
               header: t('Actions'),
-              className: 'w-32',
               cell: (faq) => (
-                <div className='flex gap-2'>
-                  <Button
-                    onClick={() => handleEdit(faq)}
-                    size='sm'
-                    variant='ghost'
-                  >
-                    <Edit className='h-4 w-4' />
-                  </Button>
-                  <Button
-                    onClick={() => handleDelete(faq)}
-                    size='sm'
-                    variant='ghost'
-                  >
-                    <Trash2 className='h-4 w-4' />
-                  </Button>
-                </div>
+                <StaticRowActions
+                  editLabel={t('Edit')}
+                  deleteLabel={t('Delete')}
+                  menuLabel={t('Open menu')}
+                  onEdit={() => handleEdit(faq)}
+                  onDelete={() => handleDelete(faq)}
+                />
               ),
             },
           ]}
@@ -406,13 +397,15 @@ export function FAQSection({ enabled, data }: FAQSectionProps) {
             <AlertDialogTitle>{t('Are you sure?')}</AlertDialogTitle>
             <AlertDialogDescription>
               {deleteTarget === 'single'
-                ? 'This FAQ entry will be removed from the list.'
-                : `${selectedIds.length} FAQ entries will be removed from the list.`}
+                ? t('This FAQ entry will be removed from the list.')
+                : t('{{count}} FAQ entries will be removed from the list.', {
+                    count: selectedIds.length,
+                  })}
             </AlertDialogDescription>
           </AlertDialogHeader>
           <AlertDialogFooter>
             <AlertDialogCancel>{t('Cancel')}</AlertDialogCancel>
-            <AlertDialogAction onClick={confirmDelete}>
+            <AlertDialogAction variant='destructive' onClick={confirmDelete}>
               {t('Delete')}
             </AlertDialogAction>
           </AlertDialogFooter>

web/default/src/features/system-settings/content/uptime-kuma-section.tsx

@@ -20,7 +20,7 @@ import { useEffect, useState } from 'react'
 import * as z from 'zod'
 import { useForm } from 'react-hook-form'
 import { zodResolver } from '@hookform/resolvers/zod'
-import { Plus, Edit, Trash2, Save } from 'lucide-react'
+import { Plus, Trash2, Save } from 'lucide-react'
 import { useTranslation } from 'react-i18next'
 import { toast } from 'sonner'
 import {
@@ -45,7 +45,8 @@ import {
   FormMessage,
 } from '@/components/ui/form'
 import { Input } from '@/components/ui/input'
-import { StaticDataTable } from '@/components/data-table'
+import { StaticDataTable } from '@/components/data-table/static/static-data-table'
+import { StaticRowActions } from '@/components/data-table/static/static-row-actions'
 import { Dialog } from '@/components/dialog'
 import { SettingsSwitchField } from '../components/settings-form-layout'
 import { SettingsSection } from '../components/settings-section'
@@ -319,24 +320,14 @@ export function UptimeKumaSection({ enabled, data }: UptimeKumaSectionProps) {
             {
               id: 'actions',
               header: t('Actions'),
-              className: 'w-32',
               cell: (group) => (
-                <div className='flex gap-2'>
-                  <Button
-                    onClick={() => handleEdit(group)}
-                    size='sm'
-                    variant='ghost'
-                  >
-                    <Edit className='h-4 w-4' />
-                  </Button>
-                  <Button
-                    onClick={() => handleDelete(group)}
-                    size='sm'
-                    variant='ghost'
-                  >
-                    <Trash2 className='h-4 w-4' />
-                  </Button>
-                </div>
+                <StaticRowActions
+                  editLabel={t('Edit')}
+                  deleteLabel={t('Delete')}
+                  menuLabel={t('Open menu')}
+                  onEdit={() => handleEdit(group)}
+                  onDelete={() => handleDelete(group)}
+                />
               ),
             },
           ]}
@@ -445,13 +436,16 @@ export function UptimeKumaSection({ enabled, data }: UptimeKumaSectionProps) {
             <AlertDialogTitle>{t('Are you sure?')}</AlertDialogTitle>
             <AlertDialogDescription>
               {deleteTarget === 'single'
-                ? 'This Uptime Kuma group will be removed from the list.'
-                : `${selectedIds.length} Uptime Kuma groups will be removed from the list.`}
+                ? t('This Uptime Kuma group will be removed from the list.')
+                : t(
+                    '{{count}} Uptime Kuma groups will be removed from the list.',
+                    { count: selectedIds.length }
+                  )}
             </AlertDialogDescription>
           </AlertDialogHeader>
           <AlertDialogFooter>
             <AlertDialogCancel>{t('Cancel')}</AlertDialogCancel>
-            <AlertDialogAction onClick={confirmDelete}>
+            <AlertDialogAction variant='destructive' onClick={confirmDelete}>
               {t('Delete')}
             </AlertDialogAction>
           </AlertDialogFooter>

web/default/src/features/system-settings/integrations/amount-discount-visual-editor.tsx

@@ -20,7 +20,8 @@ import { useState, useMemo } from 'react'
 import { Pencil, Plus, Trash2 } from 'lucide-react'
 import { useTranslation } from 'react-i18next'
 import { Button } from '@/components/ui/button'
-import { StaticDataTable } from '@/components/data-table'
+import { StaticDataTable } from '@/components/data-table/static/static-data-table'
+import { StaticRowActions } from '@/components/data-table/static/static-row-actions'
 import { StatusBadge } from '@/components/status-badge'
 import { safeJsonParseWithValidation } from '../utils/json-parser'
 import { isObjectRecord } from '../utils/json-validators'
@@ -52,9 +53,9 @@ export function AmountDiscountVisualEditor({
 
     return Object.entries(parsed)
       .map(([amount, rate]) => ({
-        amount: parseInt(amount, 10),
+        amount: Number.parseInt(amount, 10),
         discountRate:
-          typeof rate === 'number' ? rate : parseFloat(String(rate)),
+          typeof rate === 'number' ? rate : Number.parseFloat(String(rate)),
       }))
       .filter((item) => !isNaN(item.amount) && !isNaN(item.discountRate))
       .sort((a, b) => a.amount - b.amount)
@@ -180,32 +181,13 @@ export function AmountDiscountVisualEditor({
                 className: 'text-right',
                 cellClassName: 'text-right',
                 cell: (discount) => (
-                  <div className='flex justify-end gap-2'>
-                    <Button
-                      type='button'
-                      variant='ghost'
-                      size='sm'
-                      onClick={(e) => {
-                        e.preventDefault()
-                        e.stopPropagation()
-                        handleEdit(discount)
-                      }}
-                    >
-                      <Pencil className='h-4 w-4' />
-                    </Button>
-                    <Button
-                      type='button'
-                      variant='ghost'
-                      size='sm'
-                      onClick={(e) => {
-                        e.preventDefault()
-                        e.stopPropagation()
-                        handleDelete(discount.amount)
-                      }}
-                    >
-                      <Trash2 className='h-4 w-4' />
-                    </Button>
-                  </div>
+                  <StaticRowActions
+                    editLabel={t('Edit')}
+                    deleteLabel={t('Delete')}
+                    menuLabel={t('Open menu')}
+                    onEdit={() => handleEdit(discount)}
+                    onDelete={() => handleDelete(discount.amount)}
+                  />
                 ),
               },
             ]}

web/default/src/features/system-settings/integrations/creem-products-visual-editor.tsx

@@ -21,7 +21,8 @@ import { Pencil, Plus, Search, Trash2 } from 'lucide-react'
 import { useTranslation } from 'react-i18next'
 import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
-import { StaticDataTable } from '@/components/data-table'
+import { StaticDataTable } from '@/components/data-table/static/static-data-table'
+import { StaticRowActions } from '@/components/data-table/static/static-row-actions'
 import {
   formatCreemPrice,
   formatQuotaShort,
@@ -220,32 +221,13 @@ export function CreemProductsVisualEditor({
                 className: 'text-right',
                 cellClassName: 'text-right',
                 cell: (product) => (
-                  <div className='flex justify-end gap-2'>
-                    <Button
-                      type='button'
-                      variant='ghost'
-                      size='sm'
-                      onClick={(e) => {
-                        e.preventDefault()
-                        e.stopPropagation()
-                        handleEdit(product)
-                      }}
-                    >
-                      <Pencil className='h-4 w-4' />
-                    </Button>
-                    <Button
-                      type='button'
-                      variant='ghost'
-                      size='sm'
-                      onClick={(e) => {
-                        e.preventDefault()
-                        e.stopPropagation()
-                        handleDelete(product)
-                      }}
-                    >
-                      <Trash2 className='h-4 w-4' />
-                    </Button>
-                  </div>
+                  <StaticRowActions
+                    editLabel={t('Edit')}
+                    deleteLabel={t('Delete')}
+                    menuLabel={t('Open menu')}
+                    onEdit={() => handleEdit(product)}
+                    onDelete={() => handleDelete(product)}
+                  />
                 ),
               },
             ]}

web/default/src/features/system-settings/integrations/payment-methods-visual-editor.tsx

@@ -19,6 +19,10 @@ For commercial licensing, please contact support@quantumnous.com
 import { useState, useMemo } from 'react'
 import { Lightbulb, Pencil, Plus, Search, Trash2 } from 'lucide-react'
 import { useTranslation } from 'react-i18next'
+
+import { StaticDataTable } from '@/components/data-table/static/static-data-table'
+import { StaticRowActions } from '@/components/data-table/static/static-row-actions'
+import { ReactIconByName } from '@/components/react-icon-by-name'
 import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
 import {
@@ -26,8 +30,7 @@ import {
   PopoverContent,
   PopoverTrigger,
 } from '@/components/ui/popover'
-import { StaticDataTable } from '@/components/data-table'
-import { ReactIconByName } from '@/components/react-icon-by-name'
+
 import { safeJsonParseWithValidation } from '../utils/json-parser'
 import { isArray } from '../utils/json-validators'
 import {
@@ -362,32 +365,13 @@ export function PaymentMethodsVisualEditor({
                 className: 'text-right',
                 cellClassName: 'text-right',
                 cell: (method) => (
-                  <div className='flex justify-end gap-2'>
-                    <Button
-                      type='button'
-                      variant='ghost'
-                      size='sm'
-                      onClick={(e) => {
-                        e.preventDefault()
-                        e.stopPropagation()
-                        handleEdit(method)
-                      }}
-                    >
-                      <Pencil className='h-4 w-4' />
-                    </Button>
-                    <Button
-                      type='button'
-                      variant='ghost'
-                      size='sm'
-                      onClick={(e) => {
-                        e.preventDefault()
-                        e.stopPropagation()
-                        handleDelete(method)
-                      }}
-                    >
-                      <Trash2 className='h-4 w-4' />
-                    </Button>
-                  </div>
+                  <StaticRowActions
+                    editLabel={t('Edit')}
+                    deleteLabel={t('Delete')}
+                    menuLabel={t('Open menu')}
+                    onEdit={() => handleEdit(method)}
+                    onDelete={() => handleDelete(method)}
+                  />
                 ),
               },
             ]}
@@ -395,11 +379,20 @@ export function PaymentMethodsVisualEditor({
 
           {/* Mobile card view */}
           <div className='divide-y md:hidden'>
-            {filteredMethods.map((method, index) => {
+            {filteredMethods.map((method) => {
               const iconName = getEffectiveIconName(method)
+              const methodKey = [
+                method.type,
+                method.name,
+                method.icon,
+                method.min_topup,
+                method.color,
+              ]
+                .filter(Boolean)
+                .join('-')
 
               return (
-                <div key={`${method.type}-${index}`} className='p-4'>
+                <div key={methodKey} className='p-4'>
                   <div className='mb-3 flex items-start justify-between'>
                     <div className='flex-1'>
                       <div className='mb-1 font-medium'>{method.name}</div>

web/default/src/features/system-settings/integrations/waffo-settings-section.tsx

@@ -17,7 +17,7 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
 For commercial licensing, please contact support@quantumnous.com
 */
 import { type ChangeEvent, useRef, type SetStateAction, useState } from 'react'
-import { Plus, Pencil, Trash2 } from 'lucide-react'
+import { Plus } from 'lucide-react'
 import { useTranslation } from 'react-i18next'
 import { toast } from 'sonner'
 import { Alert, AlertDescription } from '@/components/ui/alert'
@@ -26,7 +26,8 @@ import { Input } from '@/components/ui/input'
 import { Label } from '@/components/ui/label'
 import { Separator } from '@/components/ui/separator'
 import { Textarea } from '@/components/ui/textarea'
-import { StaticDataTable } from '@/components/data-table'
+import { StaticDataTable } from '@/components/data-table/static/static-data-table'
+import { StaticRowActions } from '@/components/data-table/static/static-row-actions'
 import { Dialog } from '@/components/dialog'
 import { SettingsSwitchField } from '../components/settings-form-layout'
 
@@ -364,30 +365,17 @@ export function WaffoSettingsSection({
               className: 'text-right',
               cellClassName: 'text-right',
               cell: (_m, idx) => (
-                <div className='flex justify-end gap-1'>
-                  <Button
-                    type='button'
-                    variant='ghost'
-                    size='icon'
-                    className='h-7 w-7'
-                    onClick={() => openEdit(idx)}
-                  >
-                    <Pencil className='h-3 w-3' />
-                  </Button>
-                  <Button
-                    type='button'
-                    variant='ghost'
-                    size='icon'
-                    className='h-7 w-7'
-                    onClick={() =>
-                      onPayMethodsChange((prev) =>
-                        prev.filter((_, i) => i !== idx)
-                      )
-                    }
-                  >
-                    <Trash2 className='h-3 w-3' />
-                  </Button>
-                </div>
+                <StaticRowActions
+                  editLabel={t('Edit')}
+                  deleteLabel={t('Delete')}
+                  menuLabel={t('Open menu')}
+                  onEdit={() => openEdit(idx)}
+                  onDelete={() =>
+                    onPayMethodsChange((prev) =>
+                      prev.filter((_, i) => i !== idx)
+                    )
+                  }
+                />
               ),
             },
           ]}

web/default/src/features/system-settings/maintenance/log-settings-section.tsx

@@ -220,14 +220,15 @@ export function LogSettingsSection({
   )
   const logCleanupProcessed = logCleanupState?.processed ?? 0
   const logCleanupTotal = logCleanupState?.total ?? 0
+  const logCleanupTaskId = logCleanupTask?.task_id
 
   useEffect(() => {
-    if (!logCleanupTask || !isActiveLogCleanupTask(logCleanupTask)) return
+    if (!logCleanupTaskId || !logCleanupActive) return
 
     let cancelled = false
     const interval = window.setInterval(async () => {
       try {
-        const res = await getSystemTask(logCleanupTask.task_id)
+        const res = await getSystemTask(logCleanupTaskId)
         if (cancelled || !res.success || !res.data) return
 
         setLogCleanupTask(res.data)
@@ -253,7 +254,7 @@ export function LogSettingsSection({
       cancelled = true
       window.clearInterval(interval)
     }
-  }, [logCleanupTask?.task_id, logCleanupTask?.status, t])
+  }, [logCleanupActive, logCleanupTaskId, t])
 
   const onSubmit = async (values: LogSettingsFormValues) => {
     if (values.LogConsumeEnabled === defaultEnabled) return
@@ -558,7 +559,10 @@ export function LogSettingsSection({
                     </AlertDialogHeader>
                     <AlertDialogFooter>
                       <AlertDialogCancel>{t('Cancel')}</AlertDialogCancel>
-                      <AlertDialogAction onClick={cleanupServerLogFiles}>
+                      <AlertDialogAction
+                        variant='destructive'
+                        onClick={cleanupServerLogFiles}
+                      >
                         {t('Confirm Cleanup')}
                       </AlertDialogAction>
                     </AlertDialogFooter>
@@ -598,6 +602,7 @@ export function LogSettingsSection({
               {t('Cancel')}
             </AlertDialogCancel>
             <AlertDialogAction
+              variant='destructive'
               onClick={handleCleanLogs}
               disabled={isStartingLogCleanup}
             >

web/default/src/features/system-settings/maintenance/performance-section.tsx

@@ -553,7 +553,10 @@ export function PerformanceSection(props: Props) {
               </AlertDialogHeader>
               <AlertDialogFooter>
                 <AlertDialogCancel>{t('Cancel')}</AlertDialogCancel>
-                <AlertDialogAction onClick={clearDiskCache}>
+                <AlertDialogAction
+                  variant='destructive'
+                  onClick={clearDiskCache}
+                >
                   {t('Confirm')}
                 </AlertDialogAction>
               </AlertDialogFooter>

web/default/src/features/system-settings/models/group-ratio-visual-editor.tsx

@@ -17,8 +17,12 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
 For commercial licensing, please contact support@quantumnous.com
 */
 import { useState, useMemo, useEffect, useCallback, memo } from 'react'
-import { Pencil, Plus, Trash2, GripVertical, ChevronDown } from 'lucide-react'
+import { Plus, Trash2, GripVertical, ChevronDown } from 'lucide-react'
 import { useTranslation } from 'react-i18next'
+
+import { StaticDataTable } from '@/components/data-table/static/static-data-table'
+import { StaticRowActions } from '@/components/data-table/static/static-row-actions'
+import { Dialog } from '@/components/dialog'
 import { Button } from '@/components/ui/button'
 import {
   Card,
@@ -35,8 +39,7 @@ import {
 } from '@/components/ui/collapsible'
 import { Input } from '@/components/ui/input'
 import { Label } from '@/components/ui/label'
-import { StaticDataTable } from '@/components/data-table'
-import { Dialog } from '@/components/dialog'
+
 import { safeJsonParse } from '../utils/json-parser'
 
 type GroupRatioVisualEditorProps = {
@@ -95,11 +98,11 @@ function buildGroupPricingRows(
   })
   const names = new Set([...Object.keys(ratioMap), ...Object.keys(usableMap)])
 
-  return Array.from(names).map((name) => ({
+  return [...names].map((name) => ({
     _id: createGroupPricingId(),
     name,
     ratio: normalizeRatio(ratioMap[name]),
-    selectable: Object.prototype.hasOwnProperty.call(usableMap, name),
+    selectable: Object.hasOwn(usableMap, name),
     description: String(usableMap[name] ?? ''),
   }))
 }
@@ -246,7 +249,7 @@ export const GroupRatioVisualEditor = memo(function GroupRatioVisualEditor({
       delete map[simpleEditData.name]
     }
 
-    map[name] = parseFloat(value)
+    map[name] = Number.parseFloat(value)
 
     const field =
       simpleDialogType === 'groupRatio' ? 'GroupRatio' : 'TopupGroupRatio'
@@ -441,26 +444,17 @@ export const GroupRatioVisualEditor = memo(function GroupRatioVisualEditor({
                     className: 'text-right',
                     cellClassName: 'text-right',
                     cell: (group) => (
-                      <div className='flex justify-end gap-2'>
-                        <Button
-                          variant='ghost'
-                          size='sm'
-                          onClick={() =>
-                            handleSimpleEdit('topupGroupRatio', group)
-                          }
-                        >
-                          <Pencil className='h-4 w-4' />
-                        </Button>
-                        <Button
-                          variant='ghost'
-                          size='sm'
-                          onClick={() =>
-                            handleSimpleDelete('topupGroupRatio', group.name)
-                          }
-                        >
-                          <Trash2 className='h-4 w-4' />
-                        </Button>
-                      </div>
+                      <StaticRowActions
+                        editLabel={t('Edit')}
+                        deleteLabel={t('Delete')}
+                        menuLabel={t('Open menu')}
+                        onEdit={() =>
+                          handleSimpleEdit('topupGroupRatio', group)
+                        }
+                        onDelete={() =>
+                          handleSimpleDelete('topupGroupRatio', group.name)
+                        }
+                      />
                     ),
                   },
                 ]}
@@ -553,32 +547,23 @@ export const GroupRatioVisualEditor = memo(function GroupRatioVisualEditor({
                                   className: 'text-right',
                                   cellClassName: 'text-right',
                                   cell: (override) => (
-                                    <div className='flex justify-end gap-2'>
-                                      <Button
-                                        variant='ghost'
-                                        size='sm'
-                                        onClick={() =>
-                                          handleOverrideEdit(
-                                            userGroupData.userGroup,
-                                            override
-                                          )
-                                        }
-                                      >
-                                        <Pencil className='h-4 w-4' />
-                                      </Button>
-                                      <Button
-                                        variant='ghost'
-                                        size='sm'
-                                        onClick={() =>
-                                          handleOverrideDelete(
-                                            userGroupData.userGroup,
-                                            override.targetGroup
-                                          )
-                                        }
-                                      >
-                                        <Trash2 className='h-4 w-4' />
-                                      </Button>
-                                    </div>
+                                    <StaticRowActions
+                                      editLabel={t('Edit')}
+                                      deleteLabel={t('Delete')}
+                                      menuLabel={t('Open menu')}
+                                      onEdit={() =>
+                                        handleOverrideEdit(
+                                          userGroupData.userGroup,
+                                          override
+                                        )
+                                      }
+                                      onDelete={() =>
+                                        handleOverrideDelete(
+                                          userGroupData.userGroup,
+                                          override.targetGroup
+                                        )
+                                      }
+                                    />
                                   ),
                                 },
                               ]}
@@ -615,7 +600,7 @@ export const GroupRatioVisualEditor = memo(function GroupRatioVisualEditor({
               <div className='space-y-2'>
                 {autoGroupsList.map((group, index) => (
                   <div
-                    key={index}
+                    key={group}
                     className='flex items-center gap-2 rounded-md border p-3'
                   >
                     <GripVertical className='text-muted-foreground h-4 w-4' />
@@ -826,7 +811,7 @@ function GroupPricingTable({
       if (!name) continue
       counts.set(name, (counts.get(name) ?? 0) + 1)
     }
-    return Array.from(counts.entries())
+    return [...counts.entries()]
       .filter(([, count]) => count > 1)
       .map(([name]) => name)
   }, [rows])
@@ -929,7 +914,7 @@ function GroupPricingTable({
               {
                 id: 'actions',
                 header: t('Actions'),
-                className: 'w-16 text-right',
+                className: 'text-right',
                 cellClassName: 'text-right',
                 cell: (row) => (
                   <Button
@@ -1037,7 +1022,7 @@ function SimpleGroupDialog({
             value={value}
             onChange={(e) => {
               const val = e.target.value
-              if (val === '' || !isNaN(parseFloat(val))) {
+              if (val === '' || !isNaN(Number.parseFloat(val))) {
                 setValue(val)
               }
             }}
@@ -1082,7 +1067,7 @@ function GroupOverrideDialog({
 
   const handleSave = () => {
     if (!targetGroup.trim() || !ratio.trim()) return
-    const parsedRatio = parseFloat(ratio)
+    const parsedRatio = Number.parseFloat(ratio)
     if (isNaN(parsedRatio)) return
 
     onSave(targetGroup.trim(), parsedRatio, editData?.targetGroup)
@@ -1137,7 +1122,7 @@ function GroupOverrideDialog({
             value={ratio}
             onChange={(e) => {
               const val = e.target.value
-              if (val === '' || !isNaN(parseFloat(val))) {
+              if (val === '' || !isNaN(Number.parseFloat(val))) {
                 setRatio(val)
               }
             }}

web/default/src/features/system-settings/models/model-ratio-table-columns.tsx

@@ -16,12 +16,12 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
 
 For commercial licensing, please contact support@quantumnous.com
 */
-import { type ColumnDef } from '@tanstack/react-table'
-import { Pencil, Trash2 } from 'lucide-react'
-import { Button } from '@/components/ui/button'
-import { Checkbox } from '@/components/ui/checkbox'
-import { DataTableColumnHeader } from '@/components/data-table'
+import type { ColumnDef } from '@tanstack/react-table'
+import { DataTableColumnHeader } from '@/components/data-table/core/column-header'
+import { StaticRowActions } from '@/components/data-table/static/static-row-actions'
 import { StatusBadge } from '@/components/status-badge'
+import { Checkbox } from '@/components/ui/checkbox'
+
 import {
   getModeLabel,
   getModeVariant,
@@ -144,22 +144,13 @@ export function buildModelRatioColumns({
       id: 'actions',
       header: () => <div>{t('Actions')}</div>,
       cell: ({ row }) => (
-        <div className='flex justify-end gap-2'>
-          <Button
-            variant='ghost'
-            size='sm'
-            onClick={() => onEdit(row.original)}
-          >
-            <Pencil />
-          </Button>
-          <Button
-            variant='ghost'
-            size='sm'
-            onClick={() => onDelete(row.original.name)}
-          >
-            <Trash2 />
-          </Button>
-        </div>
+        <StaticRowActions
+          editLabel={t('Edit')}
+          deleteLabel={t('Delete')}
+          menuLabel={t('Open menu')}
+          onEdit={() => onEdit(row.original)}
+          onDelete={() => onDelete(row.original.name)}
+        />
       ),
       enableHiding: false,
     },

web/default/src/features/system-settings/models/model-ratio-visual-editor.tsx

@@ -683,7 +683,6 @@ const ModelRatioVisualEditorComponent = forwardRef<
                 {
                   columnId: 'actions',
                   side: 'right',
-                  className: 'w-24 min-w-24',
                 },
               ]}
               colgroup={
@@ -692,7 +691,7 @@ const ModelRatioVisualEditorComponent = forwardRef<
                   <col className='w-[300px]' />
                   <col className='w-[120px]' />
                   <col className='w-[300px]' />
-                  <col className='w-24' />
+                  <col className='w-auto' />
                 </colgroup>
               }
               renderRow={(row, { getCellClassName }) => (

web/default/src/features/system-settings/models/tool-price-settings.tsx

@@ -289,7 +289,7 @@ export const ToolPriceSettings = memo(function ToolPriceSettings({
             {
               id: 'actions',
               header: t('Actions'),
-              className: 'w-[80px] text-right',
+              className: 'text-right',
               cellClassName: 'text-right',
               cell: (row) => (
                 <Button

web/default/src/features/system-settings/request-limits/rate-limit-visual-editor.tsx

@@ -17,11 +17,12 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
 For commercial licensing, please contact support@quantumnous.com
 */
 import { useState, useMemo } from 'react'
-import { Pencil, Plus, Search, Trash2 } from 'lucide-react'
+import { Plus, Search } from 'lucide-react'
 import { useTranslation } from 'react-i18next'
 import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
-import { StaticDataTable } from '@/components/data-table'
+import { StaticDataTable } from '@/components/data-table/static/static-data-table'
+import { StaticRowActions } from '@/components/data-table/static/static-row-actions'
 import { safeJsonParseWithValidation } from '../utils/json-parser'
 import { isObjectRecord } from '../utils/json-validators'
 import { RateLimitDialog, type RateLimitEntryData } from './rate-limit-dialog'
@@ -182,22 +183,13 @@ export function RateLimitVisualEditor({
             className: 'text-right',
             cellClassName: 'text-right',
             cell: (limit) => (
-              <div className='flex justify-end gap-2'>
-                <Button
-                  variant='ghost'
-                  size='sm'
-                  onClick={() => handleEdit(limit)}
-                >
-                  <Pencil className='h-4 w-4' />
-                </Button>
-                <Button
-                  variant='ghost'
-                  size='sm'
-                  onClick={() => handleDelete(limit.groupName)}
-                >
-                  <Trash2 className='h-4 w-4' />
-                </Button>
-              </div>
+              <StaticRowActions
+                editLabel={t('Edit')}
+                deleteLabel={t('Delete')}
+                menuLabel={t('Open menu')}
+                onEdit={() => handleEdit(limit)}
+                onDelete={() => handleDelete(limit.groupName)}
+              />
             ),
           },
         ]}

web/default/src/features/users/components/data-table-row-actions.tsx

@@ -17,9 +17,8 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
 For commercial licensing, please contact support@quantumnous.com
 */
 import { useState } from 'react'
-import { type Row } from '@tanstack/react-table'
+import type { Row } from '@tanstack/react-table'
 import {
-  MoreHorizontal,
   Pencil,
   Trash2,
   Power,
@@ -35,13 +34,16 @@ import { useTranslation } from 'react-i18next'
 import { toast } from 'sonner'
 import { Button } from '@/components/ui/button'
 import {
-  DropdownMenu,
-  DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuSeparator,
   DropdownMenuShortcut,
-  DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu'
+import { DataTableRowActionMenu } from '@/components/data-table/core/row-action-menu'
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from '@/components/ui/tooltip'
 import { ConfirmDialog } from '@/components/confirm-dialog'
 import { UserSubscriptionsDialog } from '@/features/subscriptions/components/dialogs/user-subscriptions-dialog'
 import { manageUser, resetUserPasskey, resetUserTwoFA } from '../api'
@@ -52,7 +54,7 @@ import {
   isUserDeleted,
 } from '../constants'
 import { getUserActionMessage } from '../lib'
-import { type User, type ManageUserAction } from '../types'
+import type { User, ManageUserAction } from '../types'
 import { UserBindingDialog } from './dialogs/user-binding-dialog'
 import { useUsers } from './users-provider'
 
@@ -90,7 +92,7 @@ export function DataTableRowActions({ row }: DataTableRowActionsProps) {
           result.message || t('Failed to {{action}} user', { action })
         )
       }
-    } catch (_error) {
+    } catch {
       toast.error(t(ERROR_MESSAGES.UNEXPECTED))
     }
   }
@@ -104,7 +106,7 @@ export function DataTableRowActions({ row }: DataTableRowActionsProps) {
       } else {
         toast.error(result.message || t('Failed to reset Passkey'))
       }
-    } catch (_error) {
+    } catch {
       toast.error(t(ERROR_MESSAGES.UNEXPECTED))
     } finally {
       setResetPasskeyOpen(false)
@@ -120,7 +122,7 @@ export function DataTableRowActions({ row }: DataTableRowActionsProps) {
       } else {
         toast.error(result.message || t('Failed to reset 2FA'))
       }
-    } catch (_error) {
+    } catch {
       toast.error(t(ERROR_MESSAGES.UNEXPECTED))
     } finally {
       setResetTwoFAOpen(false)
@@ -136,47 +138,42 @@ export function DataTableRowActions({ row }: DataTableRowActionsProps) {
   }
 
   return (
-    <div className='-ml-2'>
-      <DropdownMenu>
-        <DropdownMenuTrigger
+    <div className='-ml-1.5 flex items-center gap-1'>
+      <Tooltip>
+        <TooltipTrigger
           render={
             <Button
               variant='ghost'
-              className='data-popup-open:bg-muted flex h-8 w-8 p-0'
+              size='icon-sm'
+              onClick={handleEdit}
+              aria-label={t('Edit')}
             />
           }
         >
-          <MoreHorizontal className='h-4 w-4' />
-          <span className='sr-only'>{t('Open menu')}</span>
-        </DropdownMenuTrigger>
-        <DropdownMenuContent align='end' className='w-[180px]'>
-          <DropdownMenuItem onClick={handleEdit}>
-            {t('Edit')}
+          <Pencil />
+        </TooltipTrigger>
+        <TooltipContent>{t('Edit')}</TooltipContent>
+      </Tooltip>
+
+      <DataTableRowActionMenu ariaLabel={t('Open menu')} contentClassName='w-48'>
+        {isDisabled ? (
+          <DropdownMenuItem onClick={() => handleManage('enable')}>
+            {t('Enable')}
             <DropdownMenuShortcut>
-              <Pencil size={16} />
+              <Power size={16} />
             </DropdownMenuShortcut>
           </DropdownMenuItem>
-
-          <DropdownMenuSeparator />
-
-          {isDisabled ? (
-            <DropdownMenuItem onClick={() => handleManage('enable')}>
-              {t('Enable')}
-              <DropdownMenuShortcut>
-                <Power size={16} />
-              </DropdownMenuShortcut>
-            </DropdownMenuItem>
-          ) : (
-            <DropdownMenuItem
-              onClick={() => handleManage('disable')}
-              disabled={isRoot}
-            >
-              {t('Disable')}
-              <DropdownMenuShortcut>
-                <PowerOff size={16} />
-              </DropdownMenuShortcut>
-            </DropdownMenuItem>
-          )}
+        ) : (
+          <DropdownMenuItem
+            onClick={() => handleManage('disable')}
+            disabled={isRoot}
+          >
+            {t('Disable')}
+            <DropdownMenuShortcut>
+              <PowerOff size={16} />
+            </DropdownMenuShortcut>
+          </DropdownMenuItem>
+        )}
 
           {isAdmin && !isRoot && (
             <DropdownMenuItem onClick={() => handleManage('demote')}>
@@ -260,15 +257,17 @@ export function DataTableRowActions({ row }: DataTableRowActionsProps) {
               <Trash2 size={16} />
             </DropdownMenuShortcut>
           </DropdownMenuItem>
-        </DropdownMenuContent>
-      </DropdownMenu>
+      </DataTableRowActionMenu>
 
       <ConfirmDialog
         open={resetPasskeyOpen}
         onOpenChange={setResetPasskeyOpen}
         title={t('Reset Passkey')}
-        desc={`Reset Passkey for ${user.username}? The user will need to register a new Passkey before using passwordless login.`}
-        confirmText='Reset Passkey'
+        desc={t(
+          'Reset Passkey for {{username}}? The user will need to register a new Passkey before using passwordless login.',
+          { username: user.username }
+        )}
+        confirmText={t('Reset Passkey')}
         handleConfirm={handleResetPasskey}
       />
 
@@ -276,8 +275,11 @@ export function DataTableRowActions({ row }: DataTableRowActionsProps) {
         open={resetTwoFAOpen}
         onOpenChange={setResetTwoFAOpen}
         title={t('Reset Two-Factor Authentication')}
-        desc={`Reset 2FA for ${user.username}? The user must set up 2FA again to continue using it.`}
-        confirmText='Reset 2FA'
+        desc={t(
+          'Reset 2FA for {{username}}? The user must set up 2FA again to continue using it.',
+          { username: user.username }
+        )}
+        confirmText={t('Reset 2FA')}
         handleConfirm={handleResetTwoFA}
       />
 

web/default/src/features/users/components/users-delete-dialog.tsx

@@ -19,16 +19,7 @@ For commercial licensing, please contact support@quantumnous.com
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { toast } from 'sonner'
-import {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogTitle,
-} from '@/components/ui/alert-dialog'
+import { ConfirmDialog } from '@/components/confirm-dialog'
 import { deleteUser } from '../api'
 import { ERROR_MESSAGES } from '../constants'
 import { getUserActionMessage } from '../lib'
@@ -52,7 +43,7 @@ export function UsersDeleteDialog() {
       } else {
         toast.error(result.message || t(ERROR_MESSAGES.DELETE_FAILED))
       }
-    } catch (_error) {
+    } catch {
       toast.error(t(ERROR_MESSAGES.UNEXPECTED))
     } finally {
       setIsDeleting(false)
@@ -60,32 +51,21 @@ export function UsersDeleteDialog() {
   }
 
   return (
-    <AlertDialog
+    <ConfirmDialog
       open={open === 'delete'}
       onOpenChange={(open) => !open && setOpen(null)}
-    >
-      <AlertDialogContent>
-        <AlertDialogHeader>
-          <AlertDialogTitle>{t('Are you sure?')}</AlertDialogTitle>
-          <AlertDialogDescription>
-            {t('This will permanently delete user')}{' '}
-            <span className='font-semibold'>{currentRow?.username}</span>
-            {t('. This action cannot be undone.')}
-          </AlertDialogDescription>
-        </AlertDialogHeader>
-        <AlertDialogFooter>
-          <AlertDialogCancel disabled={isDeleting}>
-            {t('Cancel')}
-          </AlertDialogCancel>
-          <AlertDialogAction
-            onClick={handleDelete}
-            disabled={isDeleting}
-            className='bg-destructive text-destructive-foreground hover:bg-destructive/90'
-          >
-            {isDeleting ? 'Deleting...' : 'Delete'}
-          </AlertDialogAction>
-        </AlertDialogFooter>
-      </AlertDialogContent>
-    </AlertDialog>
+      title={t('Are you sure?')}
+      desc={
+        <>
+          {t('This will permanently delete user')}{' '}
+          <span className='font-semibold'>{currentRow?.username}</span>
+          {t('. This action cannot be undone.')}
+        </>
+      }
+      confirmText={isDeleting ? t('Deleting...') : t('Delete')}
+      destructive
+      isLoading={isDeleting}
+      handleConfirm={handleDelete}
+    />
   )
 }