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/.oxlintrc.json

@@ -31,7 +31,7 @@
     ],
     ],
     "import/first": "warn",
     "import/first": "warn",
     "import/newline-after-import": "warn",
     "import/newline-after-import": "warn",
-    "import/no-cycle": "warn",
+    "import/no-cycle": "error",
     "import/no-duplicates": [
     "import/no-duplicates": [
       "error",
       "error",
       {
       {

web/default/AGENTS.md

@@ -76,6 +76,7 @@
 - **可读性**：控制函数圈复杂度，复杂逻辑拆成小函数；变量与函数命名需有意义，遵循驼峰等常规约定。
 - **可读性**：控制函数圈复杂度，复杂逻辑拆成小函数；变量与函数命名需有意义，遵循驼峰等常规约定。
 - **TypeScript**：避免 `any`，优先具体类型或 `unknown`；为参数与返回值显式标注类型；仅类型用途的导入使用 `import type { X } from '...'`。
 - **TypeScript**：避免 `any`，优先具体类型或 `unknown`；为参数与返回值显式标注类型；仅类型用途的导入使用 `import type { X } from '...'`。
 - **类型检查**：每次改动 TypeScript 或 TSX 代码后都要执行类型检查（如 `bun run typecheck`）；若出现类型错误，须修复至无错误为止，不得遗留。
 - **类型检查**：每次改动 TypeScript 或 TSX 代码后都要执行类型检查（如 `bun run typecheck`）；若出现类型错误，须修复至无错误为止，不得遗留。
+- **Lint 检查**：每次完成代码改动前，必须对所涉及文件执行 lint 检查，并修复这些文件中的所有 lint error；不得遗留 error。warning 可按变更范围与风险评估处理。
 - **解构**：对象非必要不要进行解构，特别是组件的 props；直接使用 `props.xxx` 更清晰，避免不必要的解构增加代码复杂度。
 - **解构**：对象非必要不要进行解构，特别是组件的 props；直接使用 `props.xxx` 更清晰，避免不必要的解构增加代码复杂度。
 
 
 ### 3.3 组件
 ### 3.3 组件
@@ -176,3 +177,4 @@
 - **2026-01-28**：补充状态管理、API、表单、路由、错误处理、样式、文件组织、可访问性、安全、测试、依赖与构建部署规范。
 - **2026-01-28**：补充状态管理、API、表单、路由、错误处理、样式、文件组织、可访问性、安全、测试、依赖与构建部署规范。
 - **2026-01-29**：重组文档结构，合并重复内容，明确主次与交叉引用。
 - **2026-01-29**：重组文档结构，合并重复内容，明确主次与交叉引用。
 - **2026-01-31**：在 3.2 中补充「类型检查」要求：改动 TS/TSX 后须执行 typecheck 并修复至无错。
 - **2026-01-31**：在 3.2 中补充「类型检查」要求：改动 TS/TSX 后须执行 typecheck 并修复至无错。
+- **2026-06-21**：在 3.2 中补充「Lint 检查」要求：完成代码改动前须修复所涉及文件的所有 lint error。

web/default/src/components/data-table/core/badge-cell.tsx

@@ -24,6 +24,7 @@ type BadgeCellProps = React.HTMLAttributes<HTMLDivElement>
 export function BadgeCell({ className, ...props }: BadgeCellProps) {
 export function BadgeCell({ className, ...props }: BadgeCellProps) {
   return (
   return (
     <div
     <div
+      data-slot='badge-cell'
       className={cn(
       className={cn(
         '-ml-1.5 flex max-w-full min-w-0 items-center gap-1 overflow-hidden [&_[data-slot=status-badge]]:max-w-full [&_[data-slot=status-badge]]:min-w-0',
         '-ml-1.5 flex max-w-full min-w-0 items-center gap-1 overflow-hidden [&_[data-slot=status-badge]]:max-w-full [&_[data-slot=status-badge]]:min-w-0',
         className
         className

web/default/src/components/data-table/core/content-sized-columns.ts

+/*
+Copyright (C) 2023-2026 QuantumNous
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as
+published by the Free Software Foundation, either version 3 of the
+License, or (at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+For commercial licensing, please contact support@quantumnous.com
+*/
+export function isContentSizedColumn(columnId: string): boolean {
+  return columnId === 'actions'
+}

web/default/src/components/data-table/core/data-table-colgroup.tsx

@@ -18,27 +18,36 @@ For commercial licensing, please contact support@quantumnous.com
 */
 */
 import type { Table as TanstackTable } from '@tanstack/react-table'
 import type { Table as TanstackTable } from '@tanstack/react-table'
 
 
+import { isContentSizedColumn } from './content-sized-columns'
+
 export function DataTableColgroup<TData>({
 export function DataTableColgroup<TData>({
   table,
   table,
 }: {
 }: {
   table: TanstackTable<TData>
   table: TanstackTable<TData>
 }) {
 }) {
   const columns = table.getVisibleLeafColumns()
   const columns = table.getVisibleLeafColumns()
-  const totalSize = columns.reduce((sum, col) => sum + col.getSize(), 0)
+  const sizedColumns = columns.filter(
+    (column) => !isContentSizedColumn(column.id)
+  )
+  const totalSize = sizedColumns.reduce((sum, col) => sum + col.getSize(), 0)
 
 
   return (
   return (
     <colgroup>
     <colgroup>
-      {columns.map((column) => (
-        <col
-          key={column.id}
-          style={{
-            width:
-              totalSize > 0
-                ? `${(column.getSize() / totalSize) * 100}%`
-                : undefined,
-          }}
-        />
-      ))}
+      {columns.map((column) => {
+        const width = isContentSizedColumn(column.id)
+          ? undefined
+          : getColumnWidth(column.getSize(), totalSize)
+
+        return <col key={column.id} style={{ width }} />
+      })}
     </colgroup>
     </colgroup>
   )
   )
 }
 }
+
+function getColumnWidth(columnSize: number, totalSize: number) {
+  if (totalSize <= 0) {
+    return undefined
+  }
+
+  return `${(columnSize / totalSize) * 100}%`
+}

web/default/src/components/data-table/core/data-table-header.tsx

@@ -23,6 +23,7 @@ import {
 } from '@tanstack/react-table'
 } from '@tanstack/react-table'
 import { TableHead, TableHeader, TableRow } from '@/components/ui/table'
 import { TableHead, TableHeader, TableRow } from '@/components/ui/table'
 import { DataTableColumnHeader } from './column-header'
 import { DataTableColumnHeader } from './column-header'
+import { isContentSizedColumn } from './content-sized-columns'
 import type { DataTableColumnClassName } from './types'
 import type { DataTableColumnClassName } from './types'
 
 
 type DataTableHeaderProps<TData> = {
 type DataTableHeaderProps<TData> = {
@@ -49,7 +50,7 @@ export function DataTableHeader<TData>({
               key={header.id}
               key={header.id}
               colSpan={header.colSpan}
               colSpan={header.colSpan}
               className={getColumnClassName?.(header.column.id, 'header')}
               className={getColumnClassName?.(header.column.id, 'header')}
-              style={applyHeaderSize ? { width: header.getSize() } : undefined}
+              style={getHeaderSizeStyle(header, applyHeaderSize)}
             >
             >
               {renderHeaderContent(header)}
               {renderHeaderContent(header)}
             </TableHead>
             </TableHead>
@@ -60,6 +61,17 @@ export function DataTableHeader<TData>({
   )
   )
 }
 }
 
 
+function getHeaderSizeStyle<TData>(
+  header: Header<TData, unknown>,
+  applyHeaderSize: boolean | undefined
+) {
+  if (!applyHeaderSize || isContentSizedColumn(header.column.id)) {
+    return undefined
+  }
+
+  return { width: header.getSize() }
+}
+
 function renderHeaderContent<TData>(header: Header<TData, unknown>) {
 function renderHeaderContent<TData>(header: Header<TData, unknown>) {
   if (header.isPlaceholder) return null
   if (header.isPlaceholder) return null
   const { header: headerDef, meta } = header.column.columnDef
   const { header: headerDef, meta } = header.column.columnDef

web/default/src/components/data-table/core/data-table-view.tsx

-import type { Row, Table as TanstackTable } from '@tanstack/react-table'
 /*
 /*
 Copyright (C) 2023-2026 QuantumNous
 Copyright (C) 2023-2026 QuantumNous
 
 
@@ -18,6 +17,7 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
 For commercial licensing, please contact support@quantumnous.com
 For commercial licensing, please contact support@quantumnous.com
 */
 */
 import * as React from 'react'
 import * as React from 'react'
+import type { Row, Table as TanstackTable } from '@tanstack/react-table'
 
 
 import { Table, TableBody, TableCell, TableRow } from '@/components/ui/table'
 import { Table, TableBody, TableCell, TableRow } from '@/components/ui/table'
 import { cn } from '@/lib/utils'
 import { cn } from '@/lib/utils'
@@ -45,6 +45,7 @@ export type {
   DataTableViewProps,
   DataTableViewProps,
 } from './types'
 } from './types'
 export { DataTableRow } from './data-table-row'
 export { DataTableRow } from './data-table-row'
+export { DataTableRowActionMenu } from './row-action-menu'
 
 
 export function DataTableView<TData>(props: DataTableViewProps<TData>) {
 export function DataTableView<TData>(props: DataTableViewProps<TData>) {
   const rows = props.rows ?? props.table.getRowModel().rows
   const rows = props.rows ?? props.table.getRowModel().rows

web/default/src/components/data-table/core/row-action-menu.tsx

+/*
+Copyright (C) 2023-2026 QuantumNous
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as
+published by the Free Software Foundation, either version 3 of the
+License, or (at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+For commercial licensing, please contact support@quantumnous.com
+*/
+import * as React from 'react'
+import { MoreHorizontal } from 'lucide-react'
+import { Button } from '@/components/ui/button'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu'
+import { cn } from '@/lib/utils'
+
+type DataTableRowActionMenuProps = {
+  children: React.ReactNode
+  ariaLabel: string
+  contentClassName?: string
+  modal?: boolean
+  onOpenChange?: (open: boolean) => void
+}
+
+export function DataTableRowActionMenu(props: DataTableRowActionMenuProps) {
+  return (
+    <DropdownMenu modal={props.modal} onOpenChange={props.onOpenChange}>
+      <DropdownMenuTrigger
+        render={
+          <Button
+            variant='ghost'
+            size='icon'
+            className='data-popup-open:bg-muted'
+            aria-label={props.ariaLabel}
+          />
+        }
+      >
+        <MoreHorizontal aria-hidden='true' />
+      </DropdownMenuTrigger>
+      <DropdownMenuContent
+        align='end'
+        className={cn('w-48', props.contentClassName)}
+      >
+        {props.children}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}

web/default/src/components/data-table/core/table-sizing.ts

@@ -19,11 +19,14 @@ For commercial licensing, please contact support@quantumnous.com
 import type * as React from 'react'
 import type * as React from 'react'
 import type { Table as TanstackTable } from '@tanstack/react-table'
 import type { Table as TanstackTable } from '@tanstack/react-table'
 
 
+import { isContentSizedColumn } from './content-sized-columns'
+
 export function getTableSizeStyle<TData>(
 export function getTableSizeStyle<TData>(
   table: TanstackTable<TData>
   table: TanstackTable<TData>
 ): React.CSSProperties {
 ): React.CSSProperties {
   const width = table
   const width = table
     .getVisibleLeafColumns()
     .getVisibleLeafColumns()
+    .filter((column) => !isContentSizedColumn(column.id))
     .reduce((total, column) => total + column.getSize(), 0)
     .reduce((total, column) => total + column.getSize(), 0)
 
 
   return {
   return {

web/default/src/components/data-table/index.ts

@@ -28,9 +28,11 @@ export {
   StaticDataTable,
   StaticDataTable,
   type StaticDataTableColumn,
   type StaticDataTableColumn,
 } from './static/static-data-table'
 } from './static/static-data-table'
+export { StaticRowActions } from './static/static-row-actions'
 export { staticDataTableClassNames } from './static/static-data-table-classnames'
 export { staticDataTableClassNames } from './static/static-data-table-classnames'
 export {
 export {
   DataTableRow,
   DataTableRow,
+  DataTableRowActionMenu,
   DataTableView,
   DataTableView,
   type DataTableColumnClassName,
   type DataTableColumnClassName,
   type DataTablePinnedColumn,
   type DataTablePinnedColumn,

web/default/src/components/data-table/layout/card-row-content.tsx

@@ -96,7 +96,7 @@ function CompactContent<TData>({ row }: { row: Row<TData> }) {
                     {label}
                     {label}
                   </div>
                   </div>
                 )}
                 )}
-                <div className='min-w-0 overflow-hidden text-xs [&_[data-slot=provider-badge]]:ml-0 [&_[data-slot=status-badge]]:ml-0'>
+                <div className='min-w-0 overflow-hidden text-xs [&_:is([data-slot=badge-cell],[data-slot=provider-badge],[data-slot=status-badge])]:ml-0'>
                   <StatusBadgeTypeContext.Provider value='text'>
                   <StatusBadgeTypeContext.Provider value='text'>
                     {renderCellContent(cell) ?? '-'}
                     {renderCellContent(cell) ?? '-'}
                   </StatusBadgeTypeContext.Provider>
                   </StatusBadgeTypeContext.Provider>
@@ -146,7 +146,7 @@ function FallbackContent<TData>({ row }: { row: Row<TData> }) {
           return (
           return (
             <div
             <div
               key={cell.id}
               key={cell.id}
-              className='flex justify-end overflow-hidden [&_[data-slot=provider-badge]]:ml-0 [&_[data-slot=status-badge]]:ml-0'
+              className='flex justify-end overflow-hidden [&_:is([data-slot=badge-cell],[data-slot=provider-badge],[data-slot=status-badge])]:ml-0'
             >
             >
               <StatusBadgeTypeContext.Provider value='text'>
               <StatusBadgeTypeContext.Provider value='text'>
                 {renderCellContent(cell)}
                 {renderCellContent(cell)}
@@ -163,7 +163,7 @@ function FallbackContent<TData>({ row }: { row: Row<TData> }) {
             <span className='text-muted-foreground shrink-0 text-[10px] font-medium select-none'>
             <span className='text-muted-foreground shrink-0 text-[10px] font-medium select-none'>
               {label}
               {label}
             </span>
             </span>
-            <div className='flex min-w-0 flex-1 items-center justify-end overflow-hidden text-xs [&_[data-slot=provider-badge]]:ml-0 [&_[data-slot=status-badge]]:ml-0'>
+            <div className='flex min-w-0 flex-1 items-center justify-end overflow-hidden text-xs [&_:is([data-slot=badge-cell],[data-slot=provider-badge],[data-slot=status-badge])]:ml-0'>
               <StatusBadgeTypeContext.Provider value='text'>
               <StatusBadgeTypeContext.Provider value='text'>
                 {renderCellContent(cell) ?? '-'}
                 {renderCellContent(cell) ?? '-'}
               </StatusBadgeTypeContext.Provider>
               </StatusBadgeTypeContext.Provider>

web/default/src/components/data-table/layout/data-table-page.tsx

@@ -23,7 +23,7 @@ For commercial licensing, please contact support@quantumnous.com
 */
 */
 import * as React from 'react'
 import * as React from 'react'
 
 
-import { PageFooterPortal } from '@/components/layout'
+import { PageFooterPortal } from '@/components/layout/components/page-footer'
 import { useMediaQuery } from '@/hooks'
 import { useMediaQuery } from '@/hooks'
 import { cn } from '@/lib/utils'
 import { cn } from '@/lib/utils'
 
 

web/default/src/components/data-table/static/static-data-table-classnames.ts

@@ -42,6 +42,6 @@ export const staticDataTableClassNames = {
   mutedCodeCell: 'text-muted-foreground font-mono text-sm',
   mutedCodeCell: 'text-muted-foreground font-mono text-sm',
   topNumericCell: 'py-2 text-right font-mono',
   topNumericCell: 'py-2 text-right font-mono',
   mediumCell: 'font-medium',
   mediumCell: 'font-medium',
-  actionHeaderCell: 'text-right',
-  actionCell: 'text-right',
+  actionHeaderCell: 'w-auto max-w-none text-right',
+  actionCell: 'w-auto max-w-none text-right',
 } as const
 } as const

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

+/*
+Copyright (C) 2023-2026 QuantumNous
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as
+published by the Free Software Foundation, either version 3 of the
+License, or (at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+For commercial licensing, please contact support@quantumnous.com
+*/
+import { Pencil, Trash2 } from 'lucide-react'
+import { Button } from '@/components/ui/button'
+import {
+  DropdownMenuItem,
+  DropdownMenuShortcut,
+} from '@/components/ui/dropdown-menu'
+import { DataTableRowActionMenu } from '../core/row-action-menu'
+
+type StaticRowActionsProps = {
+  editLabel: string
+  deleteLabel: string
+  menuLabel: string
+  onEdit: () => void
+  onDelete: () => void
+  editDisabled?: boolean
+  deleteDisabled?: boolean
+}
+
+export function StaticRowActions(props: StaticRowActionsProps) {
+  return (
+    <div className='flex justify-end gap-1'>
+      <Button
+        variant='ghost'
+        size='icon-sm'
+        onClick={props.onEdit}
+        disabled={props.editDisabled}
+        aria-label={props.editLabel}
+      >
+        <Pencil />
+      </Button>
+      <DataTableRowActionMenu ariaLabel={props.menuLabel}>
+        <DropdownMenuItem
+          onClick={props.onDelete}
+          disabled={props.deleteDisabled}
+          className='text-destructive focus:text-destructive'
+        >
+          {props.deleteLabel}
+          <DropdownMenuShortcut>
+            <Trash2 size={16} />
+          </DropdownMenuShortcut>
+        </DropdownMenuItem>
+      </DataTableRowActionMenu>
+    </div>
+  )
+}

web/default/src/components/truncated-text.tsx

 import { cn } from '@/lib/utils'
 import { cn } from '@/lib/utils'
-import { TruncatedCell } from '@/components/data-table'
+import { TruncatedCell } from '@/components/data-table/core/truncated-cell'
 
 
 interface TruncatedTextProps {
 interface TruncatedTextProps {
   text: string
   text: string

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

@@ -200,8 +200,11 @@ function PriorityCell({ channel }: { channel: Channel }) {
           open={confirmOpen}
           open={confirmOpen}
           onOpenChange={setConfirmOpen}
           onOpenChange={setConfirmOpen}
           title={t('Confirm Batch Update')}
           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={() => {
           handleConfirm={() => {
             if (pendingValue !== null) {
             if (pendingValue !== null) {
               handleUpdateTagField(tag, 'priority', pendingValue, queryClient)
               handleUpdateTagField(tag, 'priority', pendingValue, queryClient)
@@ -255,8 +258,11 @@ function WeightCell({ channel }: { channel: Channel }) {
           open={confirmOpen}
           open={confirmOpen}
           onOpenChange={setConfirmOpen}
           onOpenChange={setConfirmOpen}
           title={t('Confirm Batch Update')}
           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={() => {
           handleConfirm={() => {
             if (pendingValue !== null) {
             if (pendingValue !== null) {
               handleUpdateTagField(tag, 'weight', pendingValue, queryClient)
               handleUpdateTagField(tag, 'weight', pendingValue, queryClient)
@@ -1108,7 +1114,6 @@ export function useChannelsColumns(): ColumnDef<Channel>[] {
 
 
           return <DataTableRowActions row={row} />
           return <DataTableRowActions row={row} />
         },
         },
-        size: 132,
         enableSorting: false,
         enableSorting: false,
         enableHiding: false,
         enableHiding: false,
         meta: { pinned: 'right' as const },
         meta: { pinned: 'right' as const },

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

@@ -226,7 +226,9 @@ export function ChannelsPrimaryButtons() {
         open={showDeleteDialog}
         open={showDeleteDialog}
         onOpenChange={setShowDeleteDialog}
         onOpenChange={setShowDeleteDialog}
         title={t('Delete All Disabled Channels?')}
         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
         destructive
         handleConfirm={() => {
         handleConfirm={() => {
           handleDeleteAllDisabled(queryClient, (_count) => {
           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 { useContext, useState } from 'react'
 import { useQueryClient } from '@tanstack/react-query'
 import { useQueryClient } from '@tanstack/react-query'
-import { type Row } from '@tanstack/react-table'
+import type { Row } from '@tanstack/react-table'
 import {
 import {
   MoreHorizontal,
   MoreHorizontal,
   Boxes,
   Boxes,
@@ -36,6 +36,8 @@ import {
   Loader2,
   Loader2,
 } from 'lucide-react'
 } from 'lucide-react'
 import { useTranslation } from 'react-i18next'
 import { useTranslation } from 'react-i18next'
+
+import { ConfirmDialog } from '@/components/confirm-dialog'
 import { Button } from '@/components/ui/button'
 import { Button } from '@/components/ui/button'
 import {
 import {
   DropdownMenu,
   DropdownMenu,
@@ -50,7 +52,7 @@ import {
   TooltipContent,
   TooltipContent,
   TooltipTrigger,
   TooltipTrigger,
 } from '@/components/ui/tooltip'
 } from '@/components/ui/tooltip'
-import { ConfirmDialog } from '@/components/confirm-dialog'
+
 import { MODEL_FETCHABLE_TYPES } from '../constants'
 import { MODEL_FETCHABLE_TYPES } from '../constants'
 import {
 import {
   channelsQueryKeys,
   channelsQueryKeys,
@@ -96,13 +98,9 @@ export function DataTableRowActions({ row }: DataTableRowActionsProps) {
     e.stopPropagation()
     e.stopPropagation()
     setIsTesting(true)
     setIsTesting(true)
     try {
     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 {
     } finally {
       setIsTesting(false)
       setIsTesting(false)
     }
     }
@@ -145,6 +143,13 @@ 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 (
   return (
     <div className='-ml-1.5 flex items-center gap-1'>
     <div className='-ml-1.5 flex items-center gap-1'>
       <Tooltip>
       <Tooltip>
@@ -153,6 +158,25 @@ export function DataTableRowActions({ row }: DataTableRowActionsProps) {
             <Button
             <Button
               variant='ghost'
               variant='ghost'
               size='icon-sm'
               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={
+            <Button
+              variant='ghost'
+              size='icon-sm'
               onClick={handleDirectTest}
               onClick={handleDirectTest}
               disabled={isTesting}
               disabled={isTesting}
               aria-label={t('Test Connection')}
               aria-label={t('Test Connection')}
@@ -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>
         </TooltipTrigger>
         <TooltipContent>
         <TooltipContent>
           {isEnabled ? t('Disable') : t('Enable')}
           {isEnabled ? t('Disable') : t('Enable')}
@@ -232,14 +250,6 @@ export function DataTableRowActions({ row }: DataTableRowActionsProps) {
           <span className='sr-only'>{t('Open menu')}</span>
           <span className='sr-only'>{t('Open menu')}</span>
         </DropdownMenuTrigger>
         </DropdownMenuTrigger>
         <DropdownMenuContent align='end' className='w-48'>
         <DropdownMenuContent align='end' className='w-48'>
-          {/* Edit */}
-          <DropdownMenuItem onClick={handleEdit}>
-            {t('Edit')}
-            <DropdownMenuShortcut>
-              <Pencil size={16} />
-            </DropdownMenuShortcut>
-          </DropdownMenuItem>
-
           {/* Test Connection */}
           {/* Test Connection */}
           <DropdownMenuItem onClick={handleTest}>
           <DropdownMenuItem onClick={handleTest}>
             {t('Test Connection')}
             {t('Test Connection')}
@@ -343,8 +353,11 @@ export function DataTableRowActions({ row }: DataTableRowActionsProps) {
         open={deleteConfirmOpen}
         open={deleteConfirmOpen}
         onOpenChange={setDeleteConfirmOpen}
         onOpenChange={setDeleteConfirmOpen}
         title={t('Delete Channel')}
         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
         destructive
         handleConfirm={() => {
         handleConfirm={() => {
           handleDeleteChannel(channel.id, queryClient)
           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
 For commercial licensing, please contact support@quantumnous.com
 */
 */
 import { useQueryClient } from '@tanstack/react-query'
 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 { useTranslation } from 'react-i18next'
 import { Button } from '@/components/ui/button'
 import { Button } from '@/components/ui/button'
 import {
 import {
-  DropdownMenu,
-  DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuItem,
   DropdownMenuSeparator,
   DropdownMenuSeparator,
   DropdownMenuShortcut,
   DropdownMenuShortcut,
-  DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu'
 } 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 { handleEnableTagChannels, handleDisableTagChannels } from '../lib'
 import type { Channel } from '../types'
 import type { Channel } from '../types'
 import { useChannels } from './channels-provider'
 import { useChannels } from './channels-provider'
@@ -64,27 +67,24 @@ export function DataTableTagRowActions({ row }: DataTableTagRowActionsProps) {
   }
   }
 
 
   return (
   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 */}
         {/* Batch Edit */}
         <DropdownMenuItem onClick={handleBatchEdit}>
         <DropdownMenuItem onClick={handleBatchEdit}>
           {t('Batch Edit')}
           {t('Batch Edit')}
@@ -110,7 +110,7 @@ export function DataTableTagRowActions({ row }: DataTableTagRowActionsProps) {
             <PowerOff size={16} />
             <PowerOff size={16} />
           </DropdownMenuShortcut>
           </DropdownMenuShortcut>
         </DropdownMenuItem>
         </DropdownMenuItem>
-      </DropdownMenuContent>
-    </DropdownMenu>
+      </DataTableRowActionMenu>
+    </div>
   )
   )
 }
 }

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

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

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

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

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

@@ -186,7 +186,7 @@ export function OllamaModelsDialog({
     setSelected((prev) => {
     setSelected((prev) => {
       const next = new Set(prev)
       const next = new Set(prev)
       filteredModels.forEach((m) => next.add(m.id))
       filteredModels.forEach((m) => next.add(m.id))
-      return Array.from(next)
+      return [...next]
     })
     })
   }
   }
 
 
@@ -201,8 +201,8 @@ export function OllamaModelsDialog({
 
 
     const next =
     const next =
       mode === 'replace'
       mode === 'replace'
-        ? Array.from(new Set(selected))
-        : Array.from(new Set([...existingModels, ...selected]))
+        ? [...new Set(selected)]
+        : [...new Set([...existingModels, ...selected])]
 
 
     try {
     try {
       const res = await updateChannel(currentRow.id, { models: next.join(',') })
       const res = await updateChannel(currentRow.id, { models: next.join(',') })
@@ -587,7 +587,7 @@ export function OllamaModelsDialog({
               {t('Cancel')}
               {t('Cancel')}
             </AlertDialogCancel>
             </AlertDialogCancel>
             <AlertDialogAction
             <AlertDialogAction
-              className='bg-destructive text-destructive-foreground hover:bg-destructive/90'
+              variant='destructive'
               disabled={isDeleting || !deleteTarget}
               disabled={isDeleting || !deleteTarget}
               onClick={() => {
               onClick={() => {
                 if (!deleteTarget) return
                 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'),
       header: () => t('Actions'),
       cell: ({ row }) => <DataTableRowActions row={row} />,
       cell: ({ row }) => <DataTableRowActions row={row} />,
       meta: { pinned: 'right' as const },
       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 {
       } else {
         toast.error(result.message || t(ERROR_MESSAGES.DELETE_FAILED))
         toast.error(result.message || t(ERROR_MESSAGES.DELETE_FAILED))
       }
       }
-    } catch (_error) {
+    } catch {
       toast.error(t(ERROR_MESSAGES.UNEXPECTED))
       toast.error(t(ERROR_MESSAGES.UNEXPECTED))
     } finally {
     } finally {
       setIsDeleting(false)
       setIsDeleting(false)
@@ -79,7 +79,7 @@ export function ApiKeysDeleteDialog() {
           <AlertDialogAction
           <AlertDialogAction
             onClick={handleDelete}
             onClick={handleDelete}
             disabled={isDeleting}
             disabled={isDeleting}
-            className='bg-destructive text-destructive-foreground hover:bg-destructive/90'
+            variant='destructive'
           >
           >
             {isDeleting ? t('Deleting...') : t('Delete')}
             {isDeleting ? t('Deleting...') : t('Delete')}
           </AlertDialogAction>
           </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
 For commercial licensing, please contact support@quantumnous.com
 */
 */
 import { useCallback, useState } from 'react'
 import { useCallback, useState } from 'react'
-import { type Row } from '@tanstack/react-table'
+import type { Row } from '@tanstack/react-table'
 import {
 import {
   Trash2,
   Trash2,
   Edit,
   Edit,
@@ -28,22 +28,19 @@ import {
   Copy,
   Copy,
   Link,
   Link,
   Loader2,
   Loader2,
-  MoreHorizontal as DotsHorizontalIcon,
 } from 'lucide-react'
 } from 'lucide-react'
 import { useTranslation } from 'react-i18next'
 import { useTranslation } from 'react-i18next'
 import { toast } from 'sonner'
 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 { Button } from '@/components/ui/button'
 import {
 import {
-  DropdownMenu,
-  DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuItem,
   DropdownMenuSeparator,
   DropdownMenuSeparator,
   DropdownMenuSub,
   DropdownMenuSub,
   DropdownMenuSubContent,
   DropdownMenuSubContent,
   DropdownMenuSubTrigger,
   DropdownMenuSubTrigger,
   DropdownMenuShortcut,
   DropdownMenuShortcut,
-  DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu'
 } from '@/components/ui/dropdown-menu'
 import {
 import {
   Tooltip,
   Tooltip,
@@ -53,6 +50,8 @@ import {
 import { useChatPresets } from '@/features/chat/hooks/use-chat-presets'
 import { useChatPresets } from '@/features/chat/hooks/use-chat-presets'
 import { resolveChatUrl, type ChatPreset } from '@/features/chat/lib/chat-links'
 import { resolveChatUrl, type ChatPreset } from '@/features/chat/lib/chat-links'
 import { sendToFluent } from '@/features/chat/lib/send-to-fluent'
 import { sendToFluent } from '@/features/chat/lib/send-to-fluent'
+import { copyToClipboard } from '@/lib/copy-to-clipboard'
+
 import { updateApiKeyStatus } from '../api'
 import { updateApiKeyStatus } from '../api'
 import { API_KEY_STATUS, ERROR_MESSAGES, SUCCESS_MESSAGES } from '../constants'
 import { API_KEY_STATUS, ERROR_MESSAGES, SUCCESS_MESSAGES } from '../constants'
 import { apiKeySchema } from '../types'
 import { apiKeySchema } from '../types'
@@ -104,6 +103,7 @@ export function DataTableRowActions<TData>({
   const isRealKeyLoading = Boolean(loadingKeys[apiKey.id])
   const isRealKeyLoading = Boolean(loadingKeys[apiKey.id])
 
 
   const hasChatPresets = chatPresets.length > 0
   const hasChatPresets = chatPresets.length > 0
+  const toggleLabel = isEnabled ? t('Disable') : t('Enable')
 
 
   const handleMenuOpenChange = useCallback(
   const handleMenuOpenChange = useCallback(
     (open: boolean) => {
     (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 (
   return (
     <div className='-ml-1.5 flex items-center gap-1'>
     <div className='-ml-1.5 flex items-center gap-1'>
       <Tooltip>
       <Tooltip>
@@ -199,7 +206,7 @@ export function DataTableRowActions<TData>({
               size='icon-sm'
               size='icon-sm'
               onClick={handleToggleStatus}
               onClick={handleToggleStatus}
               disabled={isTogglingStatus}
               disabled={isTogglingStatus}
-              aria-label={isEnabled ? t('Disable') : t('Enable')}
+              aria-label={toggleLabel}
               className={
               className={
                 isEnabled
                 isEnabled
                   ? 'text-destructive hover:text-destructive'
                   ? '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>
         </TooltipTrigger>
-        <TooltipContent>
-          {isEnabled ? t('Disable') : t('Enable')}
-        </TooltipContent>
+        <TooltipContent>{toggleLabel}</TooltipContent>
       </Tooltip>
       </Tooltip>
 
 
-      <DropdownMenu modal={false} onOpenChange={handleMenuOpenChange}>
-        <DropdownMenuTrigger
+      <Tooltip>
+        <TooltipTrigger
           render={
           render={
             <Button
             <Button
               variant='ghost'
               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>
     </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 { useState } from 'react'
 import { useQueryClient } from '@tanstack/react-query'
 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 { useTranslation } from 'react-i18next'
 import { Button } from '@/components/ui/button'
 import { Button } from '@/components/ui/button'
 import {
 import {
-  DropdownMenu,
-  DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuItem,
-  DropdownMenuSeparator,
   DropdownMenuShortcut,
   DropdownMenuShortcut,
-  DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu'
 } 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 { ConfirmDialog } from '@/components/confirm-dialog'
 import {
 import {
   handleDeleteModel,
   handleDeleteModel,
@@ -61,80 +63,77 @@ export function DataTableRowActions({ row }: DataTableRowActionsProps) {
     handleToggleModelStatus(model.id, model.status, queryClient)
     handleToggleModelStatus(model.id, model.status, queryClient)
   }
   }
 
 
+  const toggleLabel = isEnabled ? t('Disable') : t('Enable')
+
   return (
   return (
-    <div className='-ml-2'>
-      <DropdownMenu>
-        <DropdownMenuTrigger
+    <div className='-ml-1.5 flex items-center gap-1'>
+      <Tooltip>
+        <TooltipTrigger
           render={
           render={
             <Button
             <Button
               variant='ghost'
               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>
-
-          <DropdownMenuSeparator />
-
-          {/* Enable/Disable */}
-          <DropdownMenuItem onClick={handleToggleStatus}>
-            {isEnabled ? (
-              <>
-                {t('Disable')}
-                <DropdownMenuShortcut>
-                  <PowerOff size={16} />
-                </DropdownMenuShortcut>
-              </>
-            ) : (
-              <>
-                {t('Enable')}
-                <DropdownMenuShortcut>
-                  <Power size={16} />
-                </DropdownMenuShortcut>
-              </>
-            )}
-          </DropdownMenuItem>
+          <Pencil />
+        </TooltipTrigger>
+        <TooltipContent>{t('Edit')}</TooltipContent>
+      </Tooltip>
 
 
-          <DropdownMenuSeparator />
-
-          {/* Delete */}
-          <DropdownMenuItem
-            onSelect={(e) => {
-              e.preventDefault()
-              setDeleteConfirmOpen(true)
-            }}
-            className='text-destructive focus:text-destructive'
-          >
-            {t('Delete')}
-            <DropdownMenuShortcut>
-              <Trash2 size={16} />
-            </DropdownMenuShortcut>
-          </DropdownMenuItem>
-        </DropdownMenuContent>
+      <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>
 
 
-        <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>
     </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
 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 { Eye, Info, Pencil, Settings2, Timer, Trash2 } from 'lucide-react'
 import { useTranslation } from 'react-i18next'
 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 { StatusBadge } from '@/components/status-badge'
 import { TableId } from '@/components/table-id'
 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 { getDeploymentStatusConfig } from '../constants'
 import {
 import {
   formatRemainingMinutes,
   formatRemainingMinutes,
@@ -113,8 +121,9 @@ export function useDeploymentsColumns(opts: {
       header: t('Provider'),
       header: t('Provider'),
       cell: ({ row }) => {
       cell: ({ row }) => {
         const provider = row.original.provider
         const provider = row.original.provider
-        if (!provider)
+        if (!provider) {
           return <span className='text-muted-foreground text-xs'>-</span>
           return <span className='text-muted-foreground text-xs'>-</span>
+        }
         return (
         return (
           <StatusBadge
           <StatusBadge
             label={String(provider)}
             label={String(provider)}
@@ -194,8 +203,9 @@ export function useDeploymentsColumns(opts: {
           typeof row.original.hardware_quantity === 'number'
           typeof row.original.hardware_quantity === 'number'
             ? row.original.hardware_quantity
             ? row.original.hardware_quantity
             : null
             : null
-        if (!hardware)
+        if (!hardware) {
           return <span className='text-muted-foreground text-xs'>-</span>
           return <span className='text-muted-foreground text-xs'>-</span>
+        }
         return (
         return (
           <div className='flex max-w-full min-w-0 flex-nowrap items-center gap-2 overflow-hidden'>
           <div className='flex max-w-full min-w-0 flex-nowrap items-center gap-2 overflow-hidden'>
             <StatusBadge
             <StatusBadge
@@ -218,12 +228,12 @@ export function useDeploymentsColumns(opts: {
       header: t('Created'),
       header: t('Created'),
       meta: { mobileHidden: true },
       meta: { mobileHidden: true },
       cell: ({ row }) => {
       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 (
         return (
           <div className='min-w-[140px] font-mono text-sm'>
           <div className='min-w-[140px] font-mono text-sm'>
             {formatTimestampToDate(ts)}
             {formatTimestampToDate(ts)}
@@ -249,56 +259,51 @@ export function useDeploymentsColumns(opts: {
           <div className='-ml-2.5 flex items-center gap-1'>
           <div className='-ml-2.5 flex items-center gap-1'>
             <Button
             <Button
               variant='ghost'
               variant='ghost'
-              size='sm'
+              size='icon-sm'
               onClick={() => opts.onViewLogs(id)}
               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>
             </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>
           </div>
         )
         )
       },
       },
-      size: 180,
       meta: { pinned: 'right' as const },
       meta: { pinned: 'right' as const },
     },
     },
   ]
   ]

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

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

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

@@ -470,7 +470,6 @@ export function useModelsColumns(vendors: Vendor[] = []): ColumnDef<Model>[] {
       cell: ({ row }) => {
       cell: ({ row }) => {
         return <DataTableRowActions row={row} />
         return <DataTableRowActions row={row} />
       },
       },
-      size: 100,
       enableSorting: false,
       enableSorting: false,
       enableHiding: false,
       enableHiding: false,
       meta: { pinned: 'right' as const },
       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 handleRemove = useCallback(async () => {
     const methods = await fetchVerificationMethods()
     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) {
     if (!required) {
       toast.error(
       toast.error(
@@ -205,6 +206,24 @@ export function PasskeyCard({ loading: pageLoading }: PasskeyCardProps) {
       : t('Not used yet')
       : t('Not used yet')
 
 
   const showUnsupportedNotice = !supported && !enabled
   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 (
   return (
     <>
     <>
@@ -234,22 +253,10 @@ export function PasskeyCard({ loading: pageLoading }: PasskeyCardProps) {
                       showDot
                       showDot
                       copyable={false}
                       copyable={false}
                     />
                     />
-                    {status?.backup_eligible !== undefined && (
+                    {backupStatus && (
                       <StatusBadge
                       <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
                         showDot
                         copyable={false}
                         copyable={false}
                       />
                       />
@@ -310,7 +317,7 @@ export function PasskeyCard({ loading: pageLoading }: PasskeyCardProps) {
                         {t('Cancel')}
                         {t('Cancel')}
                       </AlertDialogCancel>
                       </AlertDialogCancel>
                       <AlertDialogAction
                       <AlertDialogAction
-                        className='bg-destructive text-destructive-foreground'
+                        variant='destructive'
                         disabled={removing}
                         disabled={removing}
                         onClick={(event) => {
                         onClick={(event) => {
                           event.preventDefault()
                           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
 For commercial licensing, please contact support@quantumnous.com
 */
 */
-import { type Row } from '@tanstack/react-table'
+import type { Row } from '@tanstack/react-table'
 import {
 import {
   Trash2,
   Trash2,
   Edit,
   Edit,
   Power,
   Power,
   PowerOff,
   PowerOff,
-  MoreHorizontal as DotsHorizontalIcon,
 } from 'lucide-react'
 } from 'lucide-react'
 import { useTranslation } from 'react-i18next'
 import { useTranslation } from 'react-i18next'
 import { toast } from 'sonner'
 import { toast } from 'sonner'
 import { Button } from '@/components/ui/button'
 import { Button } from '@/components/ui/button'
 import {
 import {
-  DropdownMenu,
-  DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuItem,
   DropdownMenuSeparator,
   DropdownMenuSeparator,
   DropdownMenuShortcut,
   DropdownMenuShortcut,
-  DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu'
 } 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 { updateRedemptionStatus } from '../api'
 import { REDEMPTION_STATUS, SUCCESS_MESSAGES } from '../constants'
 import { REDEMPTION_STATUS, SUCCESS_MESSAGES } from '../constants'
 import { isRedemptionExpired } from '../lib'
 import { isRedemptionExpired } from '../lib'
@@ -77,66 +79,61 @@ export function DataTableRowActions<TData>({
   const canToggle = !isUsed && !isExpired
   const canToggle = !isUsed && !isExpired
 
 
   return (
   return (
-    <div className='-ml-2'>
-      <DropdownMenu modal={false}>
-        <DropdownMenuTrigger
+    <div className='-ml-1.5 flex items-center gap-1'>
+      <Tooltip>
+        <TooltipTrigger
           render={
           render={
             <Button
             <Button
               variant='ghost'
               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>
-          </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>
+          <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>
           </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>
     </div>
   )
   )
 }
 }

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

@@ -255,7 +255,6 @@ export function useRedemptionsColumns(): ColumnDef<Redemption>[] {
       header: () => t('Actions'),
       header: () => t('Actions'),
       cell: ({ row }) => <DataTableRowActions row={row} />,
       cell: ({ row }) => <DataTableRowActions row={row} />,
       meta: { pinned: 'right' as const },
       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
           <AlertDialogAction
             onClick={handleDelete}
             onClick={handleDelete}
             disabled={isDeleting}
             disabled={isDeleting}
-            className='bg-destructive text-destructive-foreground hover:bg-destructive/90'
+            variant='destructive'
           >
           >
             {isDeleting ? t('Deleting...') : t('Delete')}
             {isDeleting ? t('Deleting...') : t('Delete')}
           </AlertDialogAction>
           </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
 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 { useTranslation } from 'react-i18next'
 import { Button } from '@/components/ui/button'
 import { Button } from '@/components/ui/button'
 import {
 import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from '@/components/ui/dropdown-menu'
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from '@/components/ui/tooltip'
 import type { PlanRecord } from '../types'
 import type { PlanRecord } from '../types'
 import { useSubscriptions } from './subscriptions-provider'
 import { useSubscriptions } from './subscriptions-provider'
 
 
@@ -36,47 +35,59 @@ interface DataTableRowActionsProps {
 export function DataTableRowActions({ row }: DataTableRowActionsProps) {
 export function DataTableRowActions({ row }: DataTableRowActionsProps) {
   const { t } = useTranslation()
   const { t } = useTranslation()
   const { setOpen, setCurrentRow, complianceConfirmed } = useSubscriptions()
   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 (
   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')}
+            />
+          }
+        >
+          <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'
+              }
+            />
+          }
         >
         >
-          <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>
+          {isEnabled ? <PowerOff /> : <Power />}
+        </TooltipTrigger>
+        <TooltipContent>{toggleLabel}</TooltipContent>
+      </Tooltip>
     </div>
     </div>
   )
   )
 }
 }

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

@@ -196,7 +196,6 @@ export function useSubscriptionsColumns(): ColumnDef<PlanRecord>[] {
         header: () => t('Actions'),
         header: () => t('Actions'),
         cell: ({ row }) => <DataTableRowActions row={row} />,
         cell: ({ row }) => <DataTableRowActions row={row} />,
         meta: { pinned: 'right' as const },
         meta: { pinned: 'right' as const },
-        size: 80,
       },
       },
     ],
     ],
     [t]
     [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
 For commercial licensing, please contact support@quantumnous.com
 */
 */
 import { useState } from 'react'
 import { useState } from 'react'
-import { Pencil, Trash2, Plus } from 'lucide-react'
+import { Plus } from 'lucide-react'
 import { useTranslation } from 'react-i18next'
 import { useTranslation } from 'react-i18next'
 import { Button } from '@/components/ui/button'
 import { Button } from '@/components/ui/button'
 import { ConfirmDialog } from '@/components/confirm-dialog'
 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 { StatusBadge } from '@/components/status-badge'
 import { useDeleteProvider } from '../hooks/use-custom-oauth-mutations'
 import { useDeleteProvider } from '../hooks/use-custom-oauth-mutations'
 import type { CustomOAuthProvider } from '../types'
 import type { CustomOAuthProvider } from '../types'
@@ -118,22 +120,13 @@ export function ProviderTable(props: ProviderTableProps) {
             className: 'text-right',
             className: 'text-right',
             cellClassName: 'text-right',
             cellClassName: 'text-right',
             cell: (provider) => (
             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 * as z from 'zod'
 import { useForm } from 'react-hook-form'
 import { useForm } from 'react-hook-form'
 import { zodResolver } from '@hookform/resolvers/zod'
 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 { useTranslation } from 'react-i18next'
 import { toast } from 'sonner'
 import { toast } from 'sonner'
 import dayjs from '@/lib/dayjs'
 import dayjs from '@/lib/dayjs'
@@ -55,7 +55,8 @@ import {
   SelectValue,
   SelectValue,
 } from '@/components/ui/select'
 } from '@/components/ui/select'
 import { Textarea } from '@/components/ui/textarea'
 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 { DateTimePicker } from '@/components/datetime-picker'
 import { Dialog } from '@/components/dialog'
 import { Dialog } from '@/components/dialog'
 import { StatusBadge } from '@/components/status-badge'
 import { StatusBadge } from '@/components/status-badge'
@@ -419,24 +420,14 @@ export function AnnouncementsSection({
             {
             {
               id: 'actions',
               id: 'actions',
               header: t('Actions'),
               header: t('Actions'),
-              className: 'w-32',
               cell: (announcement) => (
               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>
             <AlertDialogTitle>{t('Are you sure?')}</AlertDialogTitle>
             <AlertDialogDescription>
             <AlertDialogDescription>
               {deleteTarget === 'single'
               {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>
             </AlertDialogDescription>
           </AlertDialogHeader>
           </AlertDialogHeader>
           <AlertDialogFooter>
           <AlertDialogFooter>
             <AlertDialogCancel>{t('Cancel')}</AlertDialogCancel>
             <AlertDialogCancel>{t('Cancel')}</AlertDialogCancel>
-            <AlertDialogAction onClick={confirmDelete}>
+            <AlertDialogAction variant='destructive' onClick={confirmDelete}>
               {t('Delete')}
               {t('Delete')}
             </AlertDialogAction>
             </AlertDialogAction>
           </AlertDialogFooter>
           </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 * as z from 'zod'
 import { useForm } from 'react-hook-form'
 import { useForm } from 'react-hook-form'
 import { zodResolver } from '@hookform/resolvers/zod'
 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 { useTranslation } from 'react-i18next'
 import { toast } from 'sonner'
 import { toast } from 'sonner'
 import { getBgColorClass } from '@/lib/colors'
 import { getBgColorClass } from '@/lib/colors'
@@ -54,7 +54,9 @@ import {
   SelectTrigger,
   SelectTrigger,
   SelectValue,
   SelectValue,
 } from '@/components/ui/select'
 } 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 { Dialog } from '@/components/dialog'
 import { StatusBadge } from '@/components/status-badge'
 import { StatusBadge } from '@/components/status-badge'
 import { SettingsSwitchField } from '../components/settings-form-layout'
 import { SettingsSwitchField } from '../components/settings-form-layout'
@@ -369,24 +371,14 @@ export function ApiInfoSection({ enabled, data }: ApiInfoSectionProps) {
             {
             {
               id: 'actions',
               id: 'actions',
               header: t('Actions'),
               header: t('Actions'),
-              className: 'w-32',
               cell: (apiInfo) => (
               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>
             <AlertDialogTitle>{t('Are you sure?')}</AlertDialogTitle>
             <AlertDialogDescription>
             <AlertDialogDescription>
               {deleteTarget === 'single'
               {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>
             </AlertDialogDescription>
           </AlertDialogHeader>
           </AlertDialogHeader>
           <AlertDialogFooter>
           <AlertDialogFooter>
             <AlertDialogCancel>{t('Cancel')}</AlertDialogCancel>
             <AlertDialogCancel>{t('Cancel')}</AlertDialogCancel>
-            <AlertDialogAction onClick={confirmDelete}>
+            <AlertDialogAction variant='destructive' onClick={confirmDelete}>
               {t('Delete')}
               {t('Delete')}
             </AlertDialogAction>
             </AlertDialogAction>
           </AlertDialogFooter>
           </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
 For commercial licensing, please contact support@quantumnous.com
 */
 */
 import { useState, useMemo } from 'react'
 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 { useTranslation } from 'react-i18next'
 import { Button } from '@/components/ui/button'
 import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
 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 { safeJsonParseWithValidation } from '../utils/json-parser'
 import { isArray } from '../utils/json-validators'
 import { isArray } from '../utils/json-validators'
 import { ChatDialog, type ChatEntryData } from './chat-dialog'
 import { ChatDialog, type ChatEntryData } from './chat-dialog'
@@ -171,22 +172,13 @@ export function ChatSettingsVisualEditor({
             className: 'text-right',
             className: 'text-right',
             cellClassName: 'text-right',
             cellClassName: 'text-right',
             cell: (chat) => (
             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 * as z from 'zod'
 import { useForm } from 'react-hook-form'
 import { useForm } from 'react-hook-form'
 import { zodResolver } from '@hookform/resolvers/zod'
 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 { useTranslation } from 'react-i18next'
 import { toast } from 'sonner'
 import { toast } from 'sonner'
 import {
 import {
@@ -46,7 +46,8 @@ import {
 } from '@/components/ui/form'
 } from '@/components/ui/form'
 import { Input } from '@/components/ui/input'
 import { Input } from '@/components/ui/input'
 import { Textarea } from '@/components/ui/textarea'
 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 { Dialog } from '@/components/dialog'
 import { SettingsSwitchField } from '../components/settings-form-layout'
 import { SettingsSwitchField } from '../components/settings-form-layout'
 import { SettingsSection } from '../components/settings-section'
 import { SettingsSection } from '../components/settings-section'
@@ -302,24 +303,14 @@ export function FAQSection({ enabled, data }: FAQSectionProps) {
             {
             {
               id: 'actions',
               id: 'actions',
               header: t('Actions'),
               header: t('Actions'),
-              className: 'w-32',
               cell: (faq) => (
               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>
             <AlertDialogTitle>{t('Are you sure?')}</AlertDialogTitle>
             <AlertDialogDescription>
             <AlertDialogDescription>
               {deleteTarget === 'single'
               {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>
             </AlertDialogDescription>
           </AlertDialogHeader>
           </AlertDialogHeader>
           <AlertDialogFooter>
           <AlertDialogFooter>
             <AlertDialogCancel>{t('Cancel')}</AlertDialogCancel>
             <AlertDialogCancel>{t('Cancel')}</AlertDialogCancel>
-            <AlertDialogAction onClick={confirmDelete}>
+            <AlertDialogAction variant='destructive' onClick={confirmDelete}>
               {t('Delete')}
               {t('Delete')}
             </AlertDialogAction>
             </AlertDialogAction>
           </AlertDialogFooter>
           </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 * as z from 'zod'
 import { useForm } from 'react-hook-form'
 import { useForm } from 'react-hook-form'
 import { zodResolver } from '@hookform/resolvers/zod'
 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 { useTranslation } from 'react-i18next'
 import { toast } from 'sonner'
 import { toast } from 'sonner'
 import {
 import {
@@ -45,7 +45,8 @@ import {
   FormMessage,
   FormMessage,
 } from '@/components/ui/form'
 } from '@/components/ui/form'
 import { Input } from '@/components/ui/input'
 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 { Dialog } from '@/components/dialog'
 import { SettingsSwitchField } from '../components/settings-form-layout'
 import { SettingsSwitchField } from '../components/settings-form-layout'
 import { SettingsSection } from '../components/settings-section'
 import { SettingsSection } from '../components/settings-section'
@@ -319,24 +320,14 @@ export function UptimeKumaSection({ enabled, data }: UptimeKumaSectionProps) {
             {
             {
               id: 'actions',
               id: 'actions',
               header: t('Actions'),
               header: t('Actions'),
-              className: 'w-32',
               cell: (group) => (
               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>
             <AlertDialogTitle>{t('Are you sure?')}</AlertDialogTitle>
             <AlertDialogDescription>
             <AlertDialogDescription>
               {deleteTarget === 'single'
               {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>
             </AlertDialogDescription>
           </AlertDialogHeader>
           </AlertDialogHeader>
           <AlertDialogFooter>
           <AlertDialogFooter>
             <AlertDialogCancel>{t('Cancel')}</AlertDialogCancel>
             <AlertDialogCancel>{t('Cancel')}</AlertDialogCancel>
-            <AlertDialogAction onClick={confirmDelete}>
+            <AlertDialogAction variant='destructive' onClick={confirmDelete}>
               {t('Delete')}
               {t('Delete')}
             </AlertDialogAction>
             </AlertDialogAction>
           </AlertDialogFooter>
           </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 { Pencil, Plus, Trash2 } from 'lucide-react'
 import { useTranslation } from 'react-i18next'
 import { useTranslation } from 'react-i18next'
 import { Button } from '@/components/ui/button'
 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 { StatusBadge } from '@/components/status-badge'
 import { safeJsonParseWithValidation } from '../utils/json-parser'
 import { safeJsonParseWithValidation } from '../utils/json-parser'
 import { isObjectRecord } from '../utils/json-validators'
 import { isObjectRecord } from '../utils/json-validators'
@@ -52,9 +53,9 @@ export function AmountDiscountVisualEditor({
 
 
     return Object.entries(parsed)
     return Object.entries(parsed)
       .map(([amount, rate]) => ({
       .map(([amount, rate]) => ({
-        amount: parseInt(amount, 10),
+        amount: Number.parseInt(amount, 10),
         discountRate:
         discountRate:
-          typeof rate === 'number' ? rate : parseFloat(String(rate)),
+          typeof rate === 'number' ? rate : Number.parseFloat(String(rate)),
       }))
       }))
       .filter((item) => !isNaN(item.amount) && !isNaN(item.discountRate))
       .filter((item) => !isNaN(item.amount) && !isNaN(item.discountRate))
       .sort((a, b) => a.amount - b.amount)
       .sort((a, b) => a.amount - b.amount)
@@ -180,32 +181,13 @@ export function AmountDiscountVisualEditor({
                 className: 'text-right',
                 className: 'text-right',
                 cellClassName: 'text-right',
                 cellClassName: 'text-right',
                 cell: (discount) => (
                 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 { useTranslation } from 'react-i18next'
 import { Button } from '@/components/ui/button'
 import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
 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 {
 import {
   formatCreemPrice,
   formatCreemPrice,
   formatQuotaShort,
   formatQuotaShort,
@@ -220,32 +221,13 @@ export function CreemProductsVisualEditor({
                 className: 'text-right',
                 className: 'text-right',
                 cellClassName: 'text-right',
                 cellClassName: 'text-right',
                 cell: (product) => (
                 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 { useState, useMemo } from 'react'
 import { Lightbulb, Pencil, Plus, Search, Trash2 } from 'lucide-react'
 import { Lightbulb, Pencil, Plus, Search, Trash2 } from 'lucide-react'
 import { useTranslation } from 'react-i18next'
 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 { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
 import { Input } from '@/components/ui/input'
 import {
 import {
@@ -26,8 +30,7 @@ import {
   PopoverContent,
   PopoverContent,
   PopoverTrigger,
   PopoverTrigger,
 } from '@/components/ui/popover'
 } 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 { safeJsonParseWithValidation } from '../utils/json-parser'
 import { isArray } from '../utils/json-validators'
 import { isArray } from '../utils/json-validators'
 import {
 import {
@@ -362,32 +365,13 @@ export function PaymentMethodsVisualEditor({
                 className: 'text-right',
                 className: 'text-right',
                 cellClassName: 'text-right',
                 cellClassName: 'text-right',
                 cell: (method) => (
                 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 */}
           {/* Mobile card view */}
           <div className='divide-y md:hidden'>
           <div className='divide-y md:hidden'>
-            {filteredMethods.map((method, index) => {
+            {filteredMethods.map((method) => {
               const iconName = getEffectiveIconName(method)
               const iconName = getEffectiveIconName(method)
+              const methodKey = [
+                method.type,
+                method.name,
+                method.icon,
+                method.min_topup,
+                method.color,
+              ]
+                .filter(Boolean)
+                .join('-')
 
 
               return (
               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='mb-3 flex items-start justify-between'>
                     <div className='flex-1'>
                     <div className='flex-1'>
                       <div className='mb-1 font-medium'>{method.name}</div>
                       <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
 For commercial licensing, please contact support@quantumnous.com
 */
 */
 import { type ChangeEvent, useRef, type SetStateAction, useState } from 'react'
 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 { useTranslation } from 'react-i18next'
 import { toast } from 'sonner'
 import { toast } from 'sonner'
 import { Alert, AlertDescription } from '@/components/ui/alert'
 import { Alert, AlertDescription } from '@/components/ui/alert'
@@ -26,7 +26,8 @@ import { Input } from '@/components/ui/input'
 import { Label } from '@/components/ui/label'
 import { Label } from '@/components/ui/label'
 import { Separator } from '@/components/ui/separator'
 import { Separator } from '@/components/ui/separator'
 import { Textarea } from '@/components/ui/textarea'
 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 { Dialog } from '@/components/dialog'
 import { SettingsSwitchField } from '../components/settings-form-layout'
 import { SettingsSwitchField } from '../components/settings-form-layout'
 
 
@@ -364,30 +365,17 @@ export function WaffoSettingsSection({
               className: 'text-right',
               className: 'text-right',
               cellClassName: 'text-right',
               cellClassName: 'text-right',
               cell: (_m, idx) => (
               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 logCleanupProcessed = logCleanupState?.processed ?? 0
   const logCleanupTotal = logCleanupState?.total ?? 0
   const logCleanupTotal = logCleanupState?.total ?? 0
+  const logCleanupTaskId = logCleanupTask?.task_id
 
 
   useEffect(() => {
   useEffect(() => {
-    if (!logCleanupTask || !isActiveLogCleanupTask(logCleanupTask)) return
+    if (!logCleanupTaskId || !logCleanupActive) return
 
 
     let cancelled = false
     let cancelled = false
     const interval = window.setInterval(async () => {
     const interval = window.setInterval(async () => {
       try {
       try {
-        const res = await getSystemTask(logCleanupTask.task_id)
+        const res = await getSystemTask(logCleanupTaskId)
         if (cancelled || !res.success || !res.data) return
         if (cancelled || !res.success || !res.data) return
 
 
         setLogCleanupTask(res.data)
         setLogCleanupTask(res.data)
@@ -253,7 +254,7 @@ export function LogSettingsSection({
       cancelled = true
       cancelled = true
       window.clearInterval(interval)
       window.clearInterval(interval)
     }
     }
-  }, [logCleanupTask?.task_id, logCleanupTask?.status, t])
+  }, [logCleanupActive, logCleanupTaskId, t])
 
 
   const onSubmit = async (values: LogSettingsFormValues) => {
   const onSubmit = async (values: LogSettingsFormValues) => {
     if (values.LogConsumeEnabled === defaultEnabled) return
     if (values.LogConsumeEnabled === defaultEnabled) return
@@ -558,7 +559,10 @@ export function LogSettingsSection({
                     </AlertDialogHeader>
                     </AlertDialogHeader>
                     <AlertDialogFooter>
                     <AlertDialogFooter>
                       <AlertDialogCancel>{t('Cancel')}</AlertDialogCancel>
                       <AlertDialogCancel>{t('Cancel')}</AlertDialogCancel>
-                      <AlertDialogAction onClick={cleanupServerLogFiles}>
+                      <AlertDialogAction
+                        variant='destructive'
+                        onClick={cleanupServerLogFiles}
+                      >
                         {t('Confirm Cleanup')}
                         {t('Confirm Cleanup')}
                       </AlertDialogAction>
                       </AlertDialogAction>
                     </AlertDialogFooter>
                     </AlertDialogFooter>
@@ -598,6 +602,7 @@ export function LogSettingsSection({
               {t('Cancel')}
               {t('Cancel')}
             </AlertDialogCancel>
             </AlertDialogCancel>
             <AlertDialogAction
             <AlertDialogAction
+              variant='destructive'
               onClick={handleCleanLogs}
               onClick={handleCleanLogs}
               disabled={isStartingLogCleanup}
               disabled={isStartingLogCleanup}
             >
             >

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

@@ -553,7 +553,10 @@ export function PerformanceSection(props: Props) {
               </AlertDialogHeader>
               </AlertDialogHeader>
               <AlertDialogFooter>
               <AlertDialogFooter>
                 <AlertDialogCancel>{t('Cancel')}</AlertDialogCancel>
                 <AlertDialogCancel>{t('Cancel')}</AlertDialogCancel>
-                <AlertDialogAction onClick={clearDiskCache}>
+                <AlertDialogAction
+                  variant='destructive'
+                  onClick={clearDiskCache}
+                >
                   {t('Confirm')}
                   {t('Confirm')}
                 </AlertDialogAction>
                 </AlertDialogAction>
               </AlertDialogFooter>
               </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
 For commercial licensing, please contact support@quantumnous.com
 */
 */
 import { useState, useMemo, useEffect, useCallback, memo } from 'react'
 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 { 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 { Button } from '@/components/ui/button'
 import {
 import {
   Card,
   Card,
@@ -35,8 +39,7 @@ import {
 } from '@/components/ui/collapsible'
 } from '@/components/ui/collapsible'
 import { Input } from '@/components/ui/input'
 import { Input } from '@/components/ui/input'
 import { Label } from '@/components/ui/label'
 import { Label } from '@/components/ui/label'
-import { StaticDataTable } from '@/components/data-table'
-import { Dialog } from '@/components/dialog'
+
 import { safeJsonParse } from '../utils/json-parser'
 import { safeJsonParse } from '../utils/json-parser'
 
 
 type GroupRatioVisualEditorProps = {
 type GroupRatioVisualEditorProps = {
@@ -95,11 +98,11 @@ function buildGroupPricingRows(
   })
   })
   const names = new Set([...Object.keys(ratioMap), ...Object.keys(usableMap)])
   const names = new Set([...Object.keys(ratioMap), ...Object.keys(usableMap)])
 
 
-  return Array.from(names).map((name) => ({
+  return [...names].map((name) => ({
     _id: createGroupPricingId(),
     _id: createGroupPricingId(),
     name,
     name,
     ratio: normalizeRatio(ratioMap[name]),
     ratio: normalizeRatio(ratioMap[name]),
-    selectable: Object.prototype.hasOwnProperty.call(usableMap, name),
+    selectable: Object.hasOwn(usableMap, name),
     description: String(usableMap[name] ?? ''),
     description: String(usableMap[name] ?? ''),
   }))
   }))
 }
 }
@@ -246,7 +249,7 @@ export const GroupRatioVisualEditor = memo(function GroupRatioVisualEditor({
       delete map[simpleEditData.name]
       delete map[simpleEditData.name]
     }
     }
 
 
-    map[name] = parseFloat(value)
+    map[name] = Number.parseFloat(value)
 
 
     const field =
     const field =
       simpleDialogType === 'groupRatio' ? 'GroupRatio' : 'TopupGroupRatio'
       simpleDialogType === 'groupRatio' ? 'GroupRatio' : 'TopupGroupRatio'
@@ -441,26 +444,17 @@ export const GroupRatioVisualEditor = memo(function GroupRatioVisualEditor({
                     className: 'text-right',
                     className: 'text-right',
                     cellClassName: 'text-right',
                     cellClassName: 'text-right',
                     cell: (group) => (
                     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',
                                   className: 'text-right',
                                   cellClassName: 'text-right',
                                   cellClassName: 'text-right',
                                   cell: (override) => (
                                   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'>
               <div className='space-y-2'>
                 {autoGroupsList.map((group, index) => (
                 {autoGroupsList.map((group, index) => (
                   <div
                   <div
-                    key={index}
+                    key={group}
                     className='flex items-center gap-2 rounded-md border p-3'
                     className='flex items-center gap-2 rounded-md border p-3'
                   >
                   >
                     <GripVertical className='text-muted-foreground h-4 w-4' />
                     <GripVertical className='text-muted-foreground h-4 w-4' />
@@ -826,7 +811,7 @@ function GroupPricingTable({
       if (!name) continue
       if (!name) continue
       counts.set(name, (counts.get(name) ?? 0) + 1)
       counts.set(name, (counts.get(name) ?? 0) + 1)
     }
     }
-    return Array.from(counts.entries())
+    return [...counts.entries()]
       .filter(([, count]) => count > 1)
       .filter(([, count]) => count > 1)
       .map(([name]) => name)
       .map(([name]) => name)
   }, [rows])
   }, [rows])
@@ -929,7 +914,7 @@ function GroupPricingTable({
               {
               {
                 id: 'actions',
                 id: 'actions',
                 header: t('Actions'),
                 header: t('Actions'),
-                className: 'w-16 text-right',
+                className: 'text-right',
                 cellClassName: 'text-right',
                 cellClassName: 'text-right',
                 cell: (row) => (
                 cell: (row) => (
                   <Button
                   <Button
@@ -1037,7 +1022,7 @@ function SimpleGroupDialog({
             value={value}
             value={value}
             onChange={(e) => {
             onChange={(e) => {
               const val = e.target.value
               const val = e.target.value
-              if (val === '' || !isNaN(parseFloat(val))) {
+              if (val === '' || !isNaN(Number.parseFloat(val))) {
                 setValue(val)
                 setValue(val)
               }
               }
             }}
             }}
@@ -1082,7 +1067,7 @@ function GroupOverrideDialog({
 
 
   const handleSave = () => {
   const handleSave = () => {
     if (!targetGroup.trim() || !ratio.trim()) return
     if (!targetGroup.trim() || !ratio.trim()) return
-    const parsedRatio = parseFloat(ratio)
+    const parsedRatio = Number.parseFloat(ratio)
     if (isNaN(parsedRatio)) return
     if (isNaN(parsedRatio)) return
 
 
     onSave(targetGroup.trim(), parsedRatio, editData?.targetGroup)
     onSave(targetGroup.trim(), parsedRatio, editData?.targetGroup)
@@ -1137,7 +1122,7 @@ function GroupOverrideDialog({
             value={ratio}
             value={ratio}
             onChange={(e) => {
             onChange={(e) => {
               const val = e.target.value
               const val = e.target.value
-              if (val === '' || !isNaN(parseFloat(val))) {
+              if (val === '' || !isNaN(Number.parseFloat(val))) {
                 setRatio(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
 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 { StatusBadge } from '@/components/status-badge'
+import { Checkbox } from '@/components/ui/checkbox'
+
 import {
 import {
   getModeLabel,
   getModeLabel,
   getModeVariant,
   getModeVariant,
@@ -144,22 +144,13 @@ export function buildModelRatioColumns({
       id: 'actions',
       id: 'actions',
       header: () => <div>{t('Actions')}</div>,
       header: () => <div>{t('Actions')}</div>,
       cell: ({ row }) => (
       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,
       enableHiding: false,
     },
     },

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

@@ -683,7 +683,6 @@ const ModelRatioVisualEditorComponent = forwardRef<
                 {
                 {
                   columnId: 'actions',
                   columnId: 'actions',
                   side: 'right',
                   side: 'right',
-                  className: 'w-24 min-w-24',
                 },
                 },
               ]}
               ]}
               colgroup={
               colgroup={
@@ -692,7 +691,7 @@ const ModelRatioVisualEditorComponent = forwardRef<
                   <col className='w-[300px]' />
                   <col className='w-[300px]' />
                   <col className='w-[120px]' />
                   <col className='w-[120px]' />
                   <col className='w-[300px]' />
                   <col className='w-[300px]' />
-                  <col className='w-24' />
+                  <col className='w-auto' />
                 </colgroup>
                 </colgroup>
               }
               }
               renderRow={(row, { getCellClassName }) => (
               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',
               id: 'actions',
               header: t('Actions'),
               header: t('Actions'),
-              className: 'w-[80px] text-right',
+              className: 'text-right',
               cellClassName: 'text-right',
               cellClassName: 'text-right',
               cell: (row) => (
               cell: (row) => (
                 <Button
                 <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
 For commercial licensing, please contact support@quantumnous.com
 */
 */
 import { useState, useMemo } from 'react'
 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 { useTranslation } from 'react-i18next'
 import { Button } from '@/components/ui/button'
 import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
 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 { safeJsonParseWithValidation } from '../utils/json-parser'
 import { isObjectRecord } from '../utils/json-validators'
 import { isObjectRecord } from '../utils/json-validators'
 import { RateLimitDialog, type RateLimitEntryData } from './rate-limit-dialog'
 import { RateLimitDialog, type RateLimitEntryData } from './rate-limit-dialog'
@@ -182,22 +183,13 @@ export function RateLimitVisualEditor({
             className: 'text-right',
             className: 'text-right',
             cellClassName: 'text-right',
             cellClassName: 'text-right',
             cell: (limit) => (
             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
 For commercial licensing, please contact support@quantumnous.com
 */
 */
 import { useState } from 'react'
 import { useState } from 'react'
-import { type Row } from '@tanstack/react-table'
+import type { Row } from '@tanstack/react-table'
 import {
 import {
-  MoreHorizontal,
   Pencil,
   Pencil,
   Trash2,
   Trash2,
   Power,
   Power,
@@ -35,13 +34,16 @@ import { useTranslation } from 'react-i18next'
 import { toast } from 'sonner'
 import { toast } from 'sonner'
 import { Button } from '@/components/ui/button'
 import { Button } from '@/components/ui/button'
 import {
 import {
-  DropdownMenu,
-  DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuItem,
   DropdownMenuSeparator,
   DropdownMenuSeparator,
   DropdownMenuShortcut,
   DropdownMenuShortcut,
-  DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu'
 } 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 { ConfirmDialog } from '@/components/confirm-dialog'
 import { UserSubscriptionsDialog } from '@/features/subscriptions/components/dialogs/user-subscriptions-dialog'
 import { UserSubscriptionsDialog } from '@/features/subscriptions/components/dialogs/user-subscriptions-dialog'
 import { manageUser, resetUserPasskey, resetUserTwoFA } from '../api'
 import { manageUser, resetUserPasskey, resetUserTwoFA } from '../api'
@@ -52,7 +54,7 @@ import {
   isUserDeleted,
   isUserDeleted,
 } from '../constants'
 } from '../constants'
 import { getUserActionMessage } from '../lib'
 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 { UserBindingDialog } from './dialogs/user-binding-dialog'
 import { useUsers } from './users-provider'
 import { useUsers } from './users-provider'
 
 
@@ -90,7 +92,7 @@ export function DataTableRowActions({ row }: DataTableRowActionsProps) {
           result.message || t('Failed to {{action}} user', { action })
           result.message || t('Failed to {{action}} user', { action })
         )
         )
       }
       }
-    } catch (_error) {
+    } catch {
       toast.error(t(ERROR_MESSAGES.UNEXPECTED))
       toast.error(t(ERROR_MESSAGES.UNEXPECTED))
     }
     }
   }
   }
@@ -104,7 +106,7 @@ export function DataTableRowActions({ row }: DataTableRowActionsProps) {
       } else {
       } else {
         toast.error(result.message || t('Failed to reset Passkey'))
         toast.error(result.message || t('Failed to reset Passkey'))
       }
       }
-    } catch (_error) {
+    } catch {
       toast.error(t(ERROR_MESSAGES.UNEXPECTED))
       toast.error(t(ERROR_MESSAGES.UNEXPECTED))
     } finally {
     } finally {
       setResetPasskeyOpen(false)
       setResetPasskeyOpen(false)
@@ -120,7 +122,7 @@ export function DataTableRowActions({ row }: DataTableRowActionsProps) {
       } else {
       } else {
         toast.error(result.message || t('Failed to reset 2FA'))
         toast.error(result.message || t('Failed to reset 2FA'))
       }
       }
-    } catch (_error) {
+    } catch {
       toast.error(t(ERROR_MESSAGES.UNEXPECTED))
       toast.error(t(ERROR_MESSAGES.UNEXPECTED))
     } finally {
     } finally {
       setResetTwoFAOpen(false)
       setResetTwoFAOpen(false)
@@ -136,47 +138,42 @@ export function DataTableRowActions({ row }: DataTableRowActionsProps) {
   }
   }
 
 
   return (
   return (
-    <div className='-ml-2'>
-      <DropdownMenu>
-        <DropdownMenuTrigger
+    <div className='-ml-1.5 flex items-center gap-1'>
+      <Tooltip>
+        <TooltipTrigger
           render={
           render={
             <Button
             <Button
               variant='ghost'
               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>
             <DropdownMenuShortcut>
-              <Pencil size={16} />
+              <Power size={16} />
             </DropdownMenuShortcut>
             </DropdownMenuShortcut>
           </DropdownMenuItem>
           </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 && (
           {isAdmin && !isRoot && (
             <DropdownMenuItem onClick={() => handleManage('demote')}>
             <DropdownMenuItem onClick={() => handleManage('demote')}>
@@ -260,15 +257,17 @@ export function DataTableRowActions({ row }: DataTableRowActionsProps) {
               <Trash2 size={16} />
               <Trash2 size={16} />
             </DropdownMenuShortcut>
             </DropdownMenuShortcut>
           </DropdownMenuItem>
           </DropdownMenuItem>
-        </DropdownMenuContent>
-      </DropdownMenu>
+      </DataTableRowActionMenu>
 
 
       <ConfirmDialog
       <ConfirmDialog
         open={resetPasskeyOpen}
         open={resetPasskeyOpen}
         onOpenChange={setResetPasskeyOpen}
         onOpenChange={setResetPasskeyOpen}
         title={t('Reset Passkey')}
         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}
         handleConfirm={handleResetPasskey}
       />
       />
 
 
@@ -276,8 +275,11 @@ export function DataTableRowActions({ row }: DataTableRowActionsProps) {
         open={resetTwoFAOpen}
         open={resetTwoFAOpen}
         onOpenChange={setResetTwoFAOpen}
         onOpenChange={setResetTwoFAOpen}
         title={t('Reset Two-Factor Authentication')}
         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}
         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 { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useTranslation } from 'react-i18next'
 import { toast } from 'sonner'
 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 { deleteUser } from '../api'
 import { ERROR_MESSAGES } from '../constants'
 import { ERROR_MESSAGES } from '../constants'
 import { getUserActionMessage } from '../lib'
 import { getUserActionMessage } from '../lib'
@@ -52,7 +43,7 @@ export function UsersDeleteDialog() {
       } else {
       } else {
         toast.error(result.message || t(ERROR_MESSAGES.DELETE_FAILED))
         toast.error(result.message || t(ERROR_MESSAGES.DELETE_FAILED))
       }
       }
-    } catch (_error) {
+    } catch {
       toast.error(t(ERROR_MESSAGES.UNEXPECTED))
       toast.error(t(ERROR_MESSAGES.UNEXPECTED))
     } finally {
     } finally {
       setIsDeleting(false)
       setIsDeleting(false)
@@ -60,32 +51,21 @@ export function UsersDeleteDialog() {
   }
   }
 
 
   return (
   return (
-    <AlertDialog
+    <ConfirmDialog
       open={open === 'delete'}
       open={open === 'delete'}
       onOpenChange={(open) => !open && setOpen(null)}
       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}
+    />
   )
   )
 }
 }