@brftech/filex-core 0.42.1 → 0.43.0

package/src/components/RecentlyOpened.vue

@@ -5,6 +5,7 @@
  */
 import { ref, onMounted, watch } from 'vue';
 import { actionIconSvg } from '../lib/actionIcons'; /* ikon:emoji */
+import { localeTag, useLocale } from '../composables/useLocale';
 
 interface RecentNode {
   id: number;
@@ -13,6 +14,10 @@ interface RecentNode {
   name: string;
   mime?: string;
   last_opened?: string;
+  /** The raw row carries more (`storage`, `perm`, `read_only`, `type`,
+   *  the mtimes…) — the explorer turns it into a FileNode for the context
+   *  menu with the same converter Recent / Starred / a tag view use. */
+  [k: string]: unknown;
 }
 
 const props = defineProps<{
@@ -26,10 +31,23 @@ const props = defineProps<{
   limit?: number;
   /** Optional refresh trigger — incrementing this re-fetches. */
   refreshKey?: number | string;
+  /**
+   * The explorer's language. ⚠ This tray printed English whatever the
+   * explorer spoke ("Recently opened", "5m ago") — strings no language pack
+   * could reach. Absent = English.
+   */
+  locale?: string;
 }>();
 
+const { t } = useLocale(() => props.locale ?? 'en');
+
 const emit = defineEmits<{
   (e: 'open', node: RecentNode): void;
+  /** Right-click on a row. The tray does not build a menu of its own — the
+   *  explorer opens the ONE menu every listing row gets (owner: "CONTEXT
+   *  MENÜ HER YERDE AYNI OLMALI"), so a file here offers exactly what the
+   *  same file offers in its folder. */
+  (e: 'context', node: RecentNode, ev: MouseEvent): void;
   (e: 'error', message: string): void;
 }>();
 
@@ -67,13 +85,20 @@ async function load() {
 
 function fmtTime(s?: string): string {
   if (!s) return '';
-  const t = new Date(s).getTime();
-  if (Number.isNaN(t)) return '';
-  const diff = Date.now() - t;
-  if (diff < 60_000) return 'just now';
-  if (diff < 3_600_000) return `${Math.floor(diff / 60_000)}m ago`;
-  if (diff < 86_400_000) return `${Math.floor(diff / 3_600_000)}h ago`;
-  return `${Math.floor(diff / 86_400_000)}d ago`;
+  const ms = new Date(s).getTime();
+  if (Number.isNaN(ms)) return '';
+  const diff = Date.now() - ms;
+  // `Intl` says "5 minutes ago" in the viewer's language — every language,
+  // a pack's included — with no string in any catalogue.
+  try {
+    const rtf = new Intl.RelativeTimeFormat(localeTag(props.locale), { numeric: 'auto', style: 'short' });
+    if (diff < 60_000) return rtf.format(0, 'second');
+    if (diff < 3_600_000) return rtf.format(-Math.floor(diff / 60_000), 'minute');
+    if (diff < 86_400_000) return rtf.format(-Math.floor(diff / 3_600_000), 'hour');
+    return rtf.format(-Math.floor(diff / 86_400_000), 'day');
+  } catch {
+    return new Date(ms).toISOString().slice(0, 16).replace('T', ' ');
+  }
 }
 
 onMounted(load);
@@ -83,12 +108,12 @@ watch(() => props.refreshKey, load);
 <template>
   <div class="filex-recent">
     <header>
-      <h3>Recently opened</h3>
+      <h3>{{ t('recents.title') }}</h3>
       <button
         class="filex-recent-refresh"
         type="button"
-        title="Refresh"
-        aria-label="Refresh"
+        :title="t('recents.refresh')"
+        :aria-label="t('recents.refresh')"
         @click="load"
         :disabled="loading"
       >
@@ -101,15 +126,20 @@ watch(() => props.refreshKey, load);
     </header>
 
     <ul v-if="items.length">
-      <li v-for="n in items" :key="n.id">
-        <button type="button" @click="emit('open', n)" class="filex-recent-item">
-          <span class="filex-recent-name">{{ n.name }}</span>
+      <li v-for="n in items" :key="n.id" data-testid="recent-tray-item" :data-fe-path="n.path">
+        <button
+          type="button"
+          class="filex-recent-item"
+          @click="emit('open', n)"
+          @contextmenu.prevent="emit('context', n, $event)"
+        >
+          <span class="filex-recent-name"><bdi>{{ n.name }}</bdi></span>
           <span class="filex-recent-meta">{{ fmtTime(n.last_opened) }}</span>
         </button>
       </li>
     </ul>
-    <p v-else-if="!loading" class="filex-recent-empty">Nothing here yet.</p>
-    <p v-else class="filex-recent-empty">Loading…</p>
+    <p v-else-if="!loading" class="filex-recent-empty">{{ t('recents.empty') }}</p>
+    <p v-else class="filex-recent-empty">{{ t('recents.loading') }}</p>
   </div>
 </template>
 
@@ -167,7 +197,7 @@ watch(() => props.refreshKey, load);
   padding: 6px 8px;
   cursor: pointer;
   border-radius: 4px;
-  text-align: left;
+  text-align: start;
 }
 .filex-recent-item:hover {
   background: var(--fe-bg-hover, var(--filex-bg-soft, #f3f4f6));
@@ -181,7 +211,7 @@ watch(() => props.refreshKey, load);
 .filex-recent-meta {
   color: var(--fe-text-muted, var(--filex-text-muted, #9ca3af));
   font-size: 11px;
-  margin-left: 8px;
+  margin-inline-start: 8px;
   flex-shrink: 0;
 }
 .filex-recent-empty {

package/src/components/RecoveryKeyModal.vue

@@ -97,7 +97,7 @@ function done() {
         {{ variant === 'upgraded' ? t('e2e.recovery.lead_upgraded') : t('e2e.recovery.lead') }}
       </p>
 
-      <output class="fe-e2e-rk__key" aria-label="recovery key">{{ recoveryKey }}</output>
+      <output class="fe-e2e-rk__key" :aria-label="t('e2e.recovery_key_aria')">{{ recoveryKey }}</output>
 
       <div class="fe-e2e-rk__actions">
         <button type="button" class="fe-btn" @click="copy">

package/src/components/RowActions.vue

@@ -0,0 +1,134 @@
+<script setup lang="ts">
+/**
+ * ONE control at the end of a row, and the row's actions behind it.
+ *
+ * The owner, 2026-09-20: "adminde aksiyonlar karma karışık; onlarda da aynı
+ * explore'da olduğu gibi en dibe sabitli tek buton olmalı. Adminde 'Aksiyon'
+ * diye yazmalı, explore'da ⋮ var, adminde aksiyon yazacak."
+ *
+ * What it replaces: a row that ended in two or three unlabelled icon buttons —
+ * a pencil, a key, a bin — in a column that had to be 180-260px wide to hold
+ * them, differently ordered in every table, and the first thing to fall off
+ * the right-hand edge on a narrow window. Users had three unnamed buttons;
+ * Webhooks had `test / pencil / bin`, Users `pencil / key / bin`, Shares
+ * `link / ban / bin`, and no two agreed on what a ghost button meant.
+ *
+ * ⚠⚠ THE SAME MENU THE EXPLORER OPENS. This wraps `ContextMenu` — the one the
+ * file list's ⋮ opens — rather than building a second popover, for the reason
+ * filex lesson #67 records: a menu assembled beside the real one drifts from
+ * it the first time an action is added. The only difference between the two
+ * surfaces is the handle: the explorer's is the ⋮ glyph, the admin panel's is
+ * a LABELLED button reading "Actions" / "Aksiyon", because an admin row's
+ * verbs (revoke a token, reset a password, purge a version) are not guessable
+ * from a glyph the way "open / rename / delete" are.
+ *
+ * ⚠ NOTHING MAY BE LOST IN THE MOVE. Every loose button a row used to draw
+ * becomes one entry here, disabled entries included: a verb that is currently
+ * impossible stays visible and greyed with its reason in `title`, because a
+ * hidden verb reads as a missing feature (the same rule ContextMenu already
+ * states for the explorer). Destructive verbs keep `danger: true`, which is
+ * what paints them apart inside the menu, and keep whatever confirmation
+ * dialog the page already put behind them — this control does not confirm
+ * anything itself, it only says which verb was chosen.
+ *
+ * ⚠ `shortcutId: ''` on every entry. `ContextMenu` prints the keyboard hint
+ * the shortcut registry holds for an action key, and that registry is the
+ * EXPLORER's: a row offering "Delete" in the admin panel would otherwise
+ * advertise the file manager's Del binding, which does nothing on that page.
+ * An entry that genuinely has an admin shortcut can still name one.
+ */
+import { computed, ref } from 'vue';
+import ContextMenu, { type ContextAction } from './ContextMenu.vue';
+import type { LocaleCode, ThemeMode } from '../types/ExplorerConfig';
+import { useLocale } from '../composables/useLocale';
+import { inlineStartX } from '../lib/direction';
+
+const props = withDefaults(
+  defineProps<{
+    /** The row's verbs, in the order they should be offered. */
+    actions: ContextAction[];
+    locale?: LocaleCode;
+    /** Overrides the built-in "Actions" / "Aksiyon" label. */
+    label?: string;
+    /** The whole control is off (a row being saved, a read-only demo). */
+    disabled?: boolean;
+    theme?: ThemeMode;
+    /** A test hook, so a spec can address one row's control without guessing. */
+    testid?: string;
+  }>(),
+  { locale: 'en' as LocaleCode },
+);
+
+const emit = defineEmits<{
+  (e: 'select', key: string, action: ContextAction): void;
+}>();
+
+const { t, dir } = useLocale(() => props.locale);
+
+const menu = ref<{ show: (ev: { clientX: number; clientY: number }, nodes: []) => void } | null>(
+  null,
+);
+
+const text = computed(() => props.label || t('row.actions'));
+
+/**
+ * ⚠ Every entry gets an address. The menu teleports to <body>, so an entry
+ * cannot be reached through the component that opened it, and the verbs that
+ * used to be loose buttons each had a `data-testid` of their own — losing
+ * those would have made the move untestable and quietly un-automatable. An
+ * entry's own `testid` wins; otherwise it is this control's testid plus the
+ * action key, so `user-actions-3` yields `user-actions-3-delete`.
+ */
+const items = computed<ContextAction[]>(() =>
+  props.actions
+    .filter((a) => !a.hidden)
+    .map((a) => ({
+      ...a,
+      shortcutId: a.shortcutId ?? '',
+      testid: a.testid ?? (props.testid ? `${props.testid}-${a.key}` : undefined),
+    })),
+);
+
+/** A control with nothing behind it is not a control. A row whose every verb
+ *  is conditional (Queue: retry only when failed, cancel only when pending)
+ *  can legitimately have none, and then the button is disabled rather than
+ *  absent, so the column does not go ragged from row to row. */
+const usable = computed(() => items.value.some((a) => !a.divider && !a.disabled));
+
+function open(ev: MouseEvent) {
+  // Anchored to the BUTTON's own corner, exactly as the explorer's ⋮ is
+  // (ListView `onRowMenu`): the menu drops from the control the person
+  // clicked, and ContextMenu flips it left/up itself when the viewport edge
+  // is close — which, for a control pinned to the right edge, is always.
+  const box = (ev.currentTarget as HTMLElement | null)?.getBoundingClientRect();
+  menu.value?.show(
+    // ⚠ RTL: the START corner (right in RTL), as ListView `onRowMenu` does.
+    { clientX: box ? inlineStartX(box, dir.value) : ev.clientX, clientY: box ? box.bottom : ev.clientY },
+    [],
+  );
+}
+
+function pick(a: ContextAction) {
+  emit('select', a.key, a);
+}
+</script>
+
+<template>
+  <!-- ⚠ `click.stop`: the shared table emits `row-click` from the cell, and a
+       row that navigates would otherwise fire it under the menu. -->
+  <div class="tbl-rowactions" @click.stop>
+    <button
+      type="button"
+      class="tbl-rowactions__btn"
+      :disabled="disabled || !usable"
+      :data-testid="testid"
+      data-fe-control
+      aria-haspopup="menu"
+      @click.stop="open"
+    >
+      <span>{{ text }}</span>
+      <span class="tbl-rowactions__caret" aria-hidden="true">▾</span>
+    </button>
+    <ContextMenu ref="menu" :locale="locale" :theme="theme" :actions="items" @select="pick" />
+  </div>
+</template>

package/src/components/S3KeysPanel.vue

@@ -22,6 +22,8 @@ import type { ExplorerConfig, LocaleCode } from '../types/ExplorerConfig';
 import type { S3AccessKey } from '../types/S3Keys';
 import { useLocale } from '../composables/useLocale';
 import { useS3Keys } from '../composables/useS3Keys';
+import DataTable, { type DataColumn } from './DataTable.vue';
+import type { ContextAction } from './ContextMenu.vue';
 import { resolveLocale } from '../locales/resolve';
 
 const props = defineProps<{
@@ -43,6 +45,7 @@ const {
   connection,
   loading,
   error,
+  errorHint,
   canMint,
   revealed,
   guideKey,
@@ -95,6 +98,70 @@ async function mint() {
   }
 }
 
+/**
+ * The row's verbs. They used to be two loose text buttons in the last cell;
+ * they are now the entries behind the row's one `Actions` control
+ * (RowActions → ContextMenu, the menu the explorer's ⋮ opens).
+ *
+ * ⚠ `revoke` keeps its two-step confirmation exactly as it was: the first
+ * pick arms it and the label becomes "Confirm", the second pick revokes.
+ * Nothing about a credential's destruction got easier in the move.
+ */
+function rowActions(k: S3AccessKey): ContextAction[] {
+  /* The whole control used to be `:disabled="busy"`; the table draws the
+     control now, so each verb carries it and RowActions greys a button with
+     nothing usable behind it. */
+  return [
+    {
+      key: 'toggle',
+      label: k.disabled_at ? t('conn.s3keys.enable') : t('conn.s3keys.disable'),
+      icon: k.disabled_at ? 'check' : 'lock',
+      disabled: busy.value,
+    },
+    {
+      key: 'revoke',
+      label: confirmRevoke.value === k.id ? t('conn.s3keys.confirm') : t('conn.s3keys.revoke'),
+      icon: 'delete',
+      danger: true,
+      disabled: busy.value,
+    },
+  ];
+}
+
+/** The list's columns — the product's one table (DataTable). */
+const columns = computed<DataColumn<S3AccessKey>[]>(() => [
+  {
+    id: 'label',
+    label: t('conn.s3keys.col.label'),
+    sortable: true,
+    width: 180,
+    format: (k) => k.label || t('conn.s3keys.noLabel'),
+  },
+  {
+    id: 'key',
+    label: t('conn.s3keys.col.key'),
+    sortable: true,
+    width: 200,
+    sortValue: (k) => k.access_key_id,
+    title: (k) => k.access_key_id,
+  },
+  { id: 'scope', label: t('conn.s3keys.col.scope'), sortable: true, width: 160, format: scopeOf },
+  {
+    id: 'lastUsed',
+    label: t('conn.s3keys.col.lastUsed'),
+    sortable: true,
+    sortDir: 'desc',
+    width: 140,
+    format: (k) => (k.last_used_at ? shortDate(k.last_used_at) : t('conn.s3keys.neverUsed')),
+    sortValue: (k) => (k.last_used_at ? new Date(k.last_used_at).getTime() : null),
+  },
+]);
+
+function onRowAction(key: string, k: S3AccessKey) {
+  if (key === 'toggle') void toggle(k);
+  else if (key === 'revoke') void revoke(k);
+}
+
 async function toggle(k: S3AccessKey) {
   busy.value = true;
   try {
@@ -181,6 +248,8 @@ function scopeOf(k: S3AccessKey): string {
 
     <p v-if="canMint === false" class="fe-s3keys__muted">{{ t('conn.s3keys.cannotMint') }}</p>
     <p v-if="error" class="fe-s3keys__warn">{{ error }}</p>
+    <!-- The fix, for an administrator the server chose to tell (admin_hint). -->
+    <p v-if="error && errorHint" class="fe-s3keys__hint" data-testid="s3keys-admin-hint">{{ errorHint }}</p>
 
     <!-- ── mint ─────────────────────────────────────────────────── -->
     <div v-if="canMint" class="fe-s3keys__form">
@@ -230,35 +299,28 @@ function scopeOf(k: S3AccessKey): string {
     </div>
 
     <!-- ── the keys ─────────────────────────────────────────────── -->
+    <!-- ⚠ THE table (DataTable — the explorer's own), not a table of its own:
+         reachable from the admin panel's Connections menu and from the
+         explorer, so it resizes, sorts, hides and moves columns and remembers
+         that on the account (`conn.s3keys`), like every other table. -->
     <p v-if="loading" class="fe-s3keys__muted">…</p>
-    <table v-else-if="keys.length" class="fe-s3keys__table">
-      <thead>
-        <tr>
-          <th>{{ t('conn.s3keys.col.label') }}</th>
-          <th>{{ t('conn.s3keys.col.key') }}</th>
-          <th>{{ t('conn.s3keys.col.scope') }}</th>
-          <th>{{ t('conn.s3keys.col.lastUsed') }}</th>
-          <th></th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr v-for="k in keys" :key="k.id" :class="{ 'is-off': !!k.disabled_at }">
-          <td>{{ k.label || t('conn.s3keys.noLabel') }}</td>
-          <td><code>{{ k.access_key_id }}</code></td>
-          <td>{{ scopeOf(k) }}</td>
-          <td>{{ k.last_used_at ? shortDate(k.last_used_at) : t('conn.s3keys.neverUsed') }}</td>
-          <td class="fe-s3keys__actions">
-            <button class="fe-s3keys__link" :disabled="busy" @click="toggle(k)">
-              {{ k.disabled_at ? t('conn.s3keys.enable') : t('conn.s3keys.disable') }}
-            </button>
-            <button class="fe-s3keys__link is-danger" :disabled="busy" @click="revoke(k)">
-              {{ confirmRevoke === k.id ? t('conn.s3keys.confirm') : t('conn.s3keys.revoke') }}
-            </button>
-          </td>
-        </tr>
-      </tbody>
-    </table>
-    <p v-else-if="canMint" class="fe-s3keys__muted">{{ t('conn.s3keys.empty') }}</p>
+    <DataTable
+      v-else
+      table-id="conn.s3keys"
+      :columns="columns"
+      :rows="keys"
+      row-key="id"
+      :locale="locale"
+      :empty="t('conn.s3keys.empty')"
+      :row-class="(k: S3AccessKey) => (k.disabled_at ? 'is-muted' : undefined)"
+      :row-actions="rowActions"
+      :row-actions-test-id="(k: S3AccessKey) => `s3-key-actions-${k.id}`"
+      @row-action="(key: string, k: S3AccessKey) => onRowAction(key, k)"
+    >
+      <template #cell-key="{ row }">
+        <code class="tbl-mono">{{ row.access_key_id }}</code>
+      </template>
+    </DataTable>
   </section>
 </template>
 
@@ -351,8 +413,7 @@ function scopeOf(k: S3AccessKey): string {
   color: var(--fe-text-muted);
 }
 .fe-s3keys__copy,
-.fe-s3keys__dismiss,
-.fe-s3keys__link {
+.fe-s3keys__dismiss {
   background: none;
   border: none;
   padding: 0 4px;
@@ -360,33 +421,14 @@ function scopeOf(k: S3AccessKey): string {
   font-size: 12px;
   cursor: pointer;
 }
-.fe-s3keys__link.is-danger {
-  color: var(--fe-danger);
-}
 .fe-s3keys__dismiss {
   align-self: flex-start;
 }
-.fe-s3keys__table {
-  width: 100%;
-  border-collapse: collapse;
-  font-size: 12px;
-}
-.fe-s3keys__table th {
-  text-align: left;
-  font-weight: 500;
-  color: var(--fe-text-muted);
-  padding: 4px 6px;
-}
-.fe-s3keys__table td {
-  padding: 5px 6px;
-  border-top: 1px solid var(--fe-border);
-  overflow-wrap: anywhere;
-}
-.fe-s3keys__table tr.is-off {
-  opacity: 0.55;
-}
-.fe-s3keys__actions {
-  white-space: nowrap;
-  text-align: right;
-}
+/* ⚠ The key table's own look USED to be written here — 12px type, 4-6px
+   padding, `--fe-border` instead of `--fe-border-soft`, its own disabled-row
+   opacity and its own right-aligned actions cell. All of it is deleted rather
+   than tuned: the panel now draws `.tbl`, and the one place that says what an
+   admin table looks like is packages/core/src/styles/base.css ("THE ADMIN
+   TABLE"). Four panels shared this block, so four tables drifted together;
+   sharing the real stylesheet is what stops the next drift. */
 </style>

package/src/components/SSHKeysPanel.vue

@@ -18,6 +18,8 @@ import type { ExplorerConfig, LocaleCode } from '../types/ExplorerConfig';
 import type { FTPSFacts, SSHPublicKey } from '../types/SSHKeys';
 import { useLocale } from '../composables/useLocale';
 import { useSSHKeys } from '../composables/useSSHKeys';
+import DataTable, { type DataColumn } from './DataTable.vue';
+import type { ContextAction } from './ContextMenu.vue';
 import { resolveLocale } from '../locales/resolve';
 
 const props = defineProps<{
@@ -94,6 +96,62 @@ async function submit() {
   }
 }
 
+/** The row's verbs, behind its one `Actions` control. ⚠ `remove` keeps the
+ *  two-step confirmation it had as a loose button: the first pick arms it and
+ *  the label becomes "Confirm", the second pick deletes the key. */
+function rowActions(k: SSHPublicKey): ContextAction[] {
+  /* The whole control used to be `:disabled="busy"`; the table draws the
+     control now, so each verb carries it. */
+  return [
+    {
+      key: 'toggle',
+      label: k.disabled_at ? t('conn.sshkeys.enable') : t('conn.sshkeys.disable'),
+      icon: k.disabled_at ? 'check' : 'lock',
+      disabled: busy.value,
+    },
+    {
+      key: 'remove',
+      label: confirmRemove.value === k.id ? t('conn.sshkeys.confirm') : t('conn.sshkeys.remove'),
+      icon: 'delete',
+      danger: true,
+      disabled: busy.value,
+    },
+  ];
+}
+
+/** The list's columns — the product's one table (DataTable). */
+const columns = computed<DataColumn<SSHPublicKey>[]>(() => [
+  {
+    id: 'name',
+    label: t('conn.sshkeys.col.name'),
+    sortable: true,
+    width: 180,
+    format: (k) => k.name || t('conn.sshkeys.noName'),
+  },
+  {
+    id: 'fingerprint',
+    label: t('conn.sshkeys.col.fingerprint'),
+    sortable: true,
+    width: 240,
+    sortValue: (k) => fingerprintOf(k),
+    title: (k) => fingerprintOf(k),
+  },
+  {
+    id: 'lastUsed',
+    label: t('conn.sshkeys.col.lastUsed'),
+    sortable: true,
+    sortDir: 'desc',
+    width: 140,
+    format: (k) => (k.last_used_at ? shortDate(k.last_used_at) : t('conn.sshkeys.neverUsed')),
+    sortValue: (k) => (k.last_used_at ? new Date(k.last_used_at).getTime() : null),
+  },
+]);
+
+function onRowAction(key: string, k: SSHPublicKey) {
+  if (key === 'toggle') void toggle(k);
+  else if (key === 'remove') void drop(k);
+}
+
 async function toggle(k: SSHPublicKey) {
   busy.value = true;
   try {
@@ -170,33 +228,28 @@ function fingerprintOf(k: SSHPublicKey): string {
       <p class="fe-s3keys__hint">{{ t('conn.sshkeys.noCopyId') }}</p>
     </div>
 
+    <!-- ⚠ THE table (DataTable — the explorer's own), not a table of its own:
+         reachable from the admin panel's Connections menu and from the
+         explorer, so it resizes, sorts, hides and moves columns and remembers
+         that on the account (`conn.sshkeys`), like every other table. -->
     <p v-if="loading" class="fe-s3keys__muted">…</p>
-    <table v-else-if="keys.length" class="fe-s3keys__table">
-      <thead>
-        <tr>
-          <th>{{ t('conn.sshkeys.col.name') }}</th>
-          <th>{{ t('conn.sshkeys.col.fingerprint') }}</th>
-          <th>{{ t('conn.sshkeys.col.lastUsed') }}</th>
-          <th></th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr v-for="k in keys" :key="k.id" :class="{ 'is-off': !!k.disabled_at }">
-          <td>{{ k.name || t('conn.sshkeys.noName') }}</td>
-          <td><code>{{ fingerprintOf(k) }}</code></td>
-          <td>{{ k.last_used_at ? shortDate(k.last_used_at) : t('conn.sshkeys.neverUsed') }}</td>
-          <td class="fe-s3keys__actions">
-            <button class="fe-s3keys__link" :disabled="busy" @click="toggle(k)">
-              {{ k.disabled_at ? t('conn.sshkeys.enable') : t('conn.sshkeys.disable') }}
-            </button>
-            <button class="fe-s3keys__link is-danger" :disabled="busy" @click="drop(k)">
-              {{ confirmRemove === k.id ? t('conn.sshkeys.confirm') : t('conn.sshkeys.remove') }}
-            </button>
-          </td>
-        </tr>
-      </tbody>
-    </table>
-    <p v-else-if="canAdd" class="fe-s3keys__muted">{{ t('conn.sshkeys.empty') }}</p>
+    <DataTable
+      v-else
+      table-id="conn.sshkeys"
+      :columns="columns"
+      :rows="keys"
+      row-key="id"
+      :locale="locale"
+      :empty="t('conn.sshkeys.empty')"
+      :row-class="(k: SSHPublicKey) => (k.disabled_at ? 'is-muted' : undefined)"
+      :row-actions="rowActions"
+      :row-actions-test-id="(k: SSHPublicKey) => `ssh-key-actions-${k.id}`"
+      @row-action="(key: string, k: SSHPublicKey) => onRowAction(key, k)"
+    >
+      <template #cell-fingerprint="{ row }">
+        <code class="tbl-mono">{{ fingerprintOf(row) }}</code>
+      </template>
+    </DataTable>
   </section>
 </template>