@brftech/filex-core 0.42.2 → 0.43.0

package/src/components/TokensPanel.vue

@@ -30,7 +30,8 @@ import type { ExplorerConfig, LocaleCode } from '../types/ExplorerConfig';
 import type { ApiToken } from '../types/Tokens';
 import { useLocale } from '../composables/useLocale';
 import { useTokens } from '../composables/useTokens';
-import { useScrolledX } from '../composables/useScrolledX';
+import DataTable, { type DataColumn } from './DataTable.vue';
+import type { ContextAction } from './ContextMenu.vue';
 import { resolveLocale } from '../locales/resolve';
 
 const props = defineProps<{
@@ -62,7 +63,6 @@ const emit = defineEmits<{
 
 const locale = computed<LocaleCode>(() => resolveLocale(props.config.locale));
 const { t, formatDate } = useLocale(locale);
-const { scrolledX, onScroll } = useScrolledX();
 
 const { tokens, loading, error, canMint, revealed, load, create, remove, dismiss } = useTokens(
   props.config,
@@ -91,6 +91,14 @@ const scopeState = ref<Record<string, boolean>>({
 const rootPath = ref('');
 const expiresInDays = ref<number | null>(null);
 
+/**
+ * ⚠⚠ Nothing ticked is not a request (owner's decision, v0.43.0): no door
+ * mints a token without an explicit list, and this form used to paper over
+ * an empty one with `|| 'read'` — a silent default, the very thing the rule
+ * removes. The button waits for a tick and says why.
+ */
+const noScope = computed(() => !FULL_SCOPES.some((s) => scopeState.value[s]));
+
 function buildScopes(): string {
   const parts = FULL_SCOPES.filter((s) => scopeState.value[s]) as string[];
   const root = rootPath.value.trim();
@@ -133,9 +141,8 @@ async function mint(): Promise<void> {
   copied.value = false;
   try {
     if (props.full) {
-      // At least one verb, or the token can do nothing and the server's
-      // refusal would be about the wrong thing.
-      const scopes = buildScopes() || 'read';
+      if (noScope.value) return;
+      const scopes = buildScopes();
       await create({
         label: label.value.trim() || defaultLabel(),
         scopes,
@@ -162,6 +169,50 @@ async function mint(): Promise<void> {
   }
 }
 
+/** The list's columns — the product's one table (DataTable). */
+const columns = computed<DataColumn<ApiToken>[]>(() => [
+  {
+    id: 'label',
+    label: t('conn.tokens.col.label'),
+    sortable: true,
+    width: 200,
+    format: (row) => row.label || '—',
+  },
+  { id: 'scopes', label: t('conn.tokens.col.scopes'), sortable: true, width: 200 },
+  {
+    id: 'used',
+    label: t('conn.tokens.col.used'),
+    sortable: true,
+    sortDir: 'desc',
+    width: 140,
+    format: usedLabel,
+    sortValue: (row) => (row.last_used_at ? new Date(row.last_used_at).getTime() : null),
+  },
+]);
+
+/** The row's one verb, behind its one `Actions` control. ⚠ It keeps the
+ *  two-step confirmation it had as a loose button: the first pick arms it and
+ *  the label becomes "Confirm", the second pick revokes the token — which
+ *  also ends any session already open on it. */
+function rowActions(row: ApiToken): ContextAction[] {
+  return [
+    {
+      key: 'revoke',
+      label: confirming.value === row.id ? t('conn.tokens.confirm') : t('conn.tokens.revoke'),
+      icon: 'delete',
+      danger: true,
+      /* The whole control used to be `:disabled="busy"`; the table draws the
+         control, so the verb carries it — RowActions greys a button with
+         nothing usable behind it. */
+      disabled: busy.value,
+    },
+  ];
+}
+
+function onRowAction(key: string, row: ApiToken) {
+  if (key === 'revoke') void revoke(row);
+}
+
 async function revoke(row: ApiToken): Promise<void> {
   if (confirming.value !== row.id) {
     confirming.value = row.id;
@@ -241,6 +292,9 @@ function usedLabel(row: ApiToken): string {
           <input v-model="scopeState[s]" type="checkbox" :data-testid="`token-scope-${s}`" />
           <span>{{ s }}</span>
         </label>
+        <p v-if="noScope" class="fe-s3keys__hint fe-tokform__required" role="alert" data-testid="token-scopes-required">
+          {{ t('conn.tokens.scopesRequired') }}
+        </p>
       </fieldset>
 
       <label class="fe-tokform__field">
@@ -265,7 +319,7 @@ function usedLabel(row: ApiToken): string {
             data-testid="token-expiry"
           />
         </label>
-        <button class="fe-s3keys__btn" :disabled="busy" data-testid="token-mint" @click="mint">
+        <button class="fe-s3keys__btn" :disabled="busy || noScope" data-testid="token-mint" @click="mint">
           {{ t('conn.tokens.mint') }}
         </button>
       </div>
@@ -289,32 +343,29 @@ function usedLabel(row: ApiToken): string {
       </button>
     </div>
 
+    <!-- ⚠ THE table (DataTable — the explorer's own), not a table of its own.
+         This panel is reachable from the admin panel's Connections menu and
+         from the explorer, so its list resizes, sorts, hides and moves columns
+         and remembers that on the account (`conn.tokens`), like every other
+         table. The raised ground is the panel's own (`.fe-s3keys` sets
+         `--tbl-bg` once). -->
     <p v-if="loading" class="fe-s3keys__muted">…</p>
-    <div v-else-if="tokens.length" class="fe-s3keys__scroll" :class="{ 'is-scrolled-x': scrolledX }" @scroll.passive="onScroll">
-      <table class="fe-s3keys__table">
-        <thead>
-          <tr>
-            <th>{{ t('conn.tokens.col.label') }}</th>
-            <th>{{ t('conn.tokens.col.scopes') }}</th>
-            <th>{{ t('conn.tokens.col.used') }}</th>
-            <th></th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr v-for="row in tokens" :key="row.id">
-            <td>{{ row.label || '—' }}</td>
-            <td><code>{{ row.scopes }}</code></td>
-            <td>{{ usedLabel(row) }}</td>
-            <td class="fe-s3keys__actions">
-              <button class="fe-s3keys__link is-danger" :disabled="busy" @click="revoke(row)">
-                {{ confirming === row.id ? t('conn.tokens.confirm') : t('conn.tokens.revoke') }}
-              </button>
-            </td>
-          </tr>
-        </tbody>
-      </table>
-    </div>
-    <p v-else-if="canMint" class="fe-s3keys__muted">{{ t('conn.tokens.empty') }}</p>
+    <DataTable
+      v-else
+      table-id="conn.tokens"
+      :columns="columns"
+      :rows="tokens"
+      row-key="id"
+      :locale="locale"
+      :empty="t('conn.tokens.empty')"
+      :row-actions="rowActions"
+      :row-actions-test-id="(row: ApiToken) => `api-token-actions-${row.id}`"
+      @row-action="(key: string, row: ApiToken) => onRowAction(key, row)"
+    >
+      <template #cell-scopes="{ row }">
+        <code class="tbl-mono">{{ row.scopes }}</code>
+      </template>
+    </DataTable>
 
     <!-- ⚠ Said next to the button rather than in a document nobody opens: a
          revoked token stops a session that is already open, not only the next

package/src/components/Toolbar.vue

@@ -20,6 +20,7 @@ import ContextMenu, { type ContextAction } from './ContextMenu.vue';
  * `.fe-subhead__actions`), so the header and the crumb row can no longer end
  * up offering different view modes — which is what two mount points cost. */
 import { useLocale } from '../composables/useLocale';
+import { inlineEndX } from '../lib/direction';
 import { actionIconSvg } from '../lib/actionIcons';
 import { eventMatchesShortcut, menuShortcutHint, shortcutHint } from '../composables/useKeyboardShortcuts';
 
@@ -253,7 +254,7 @@ function toggleDensity() {
   emit('update:density', density.value);
 }
 
-const { t } = useLocale(() => props.locale);
+const { t, dir } = useLocale(() => props.locale);
 
 const searchEl = ref<HTMLInputElement | null>(null);
 const localSearch = ref(props.searchQuery);
@@ -333,11 +334,30 @@ const hasSelection = computed(() => mode.value !== 'none');
 const barSplit = computed(() => {
   const icons: ContextAction[] = [];
   const rest: ContextAction[] = [];
-  for (const a of toolbarItems.value) {
+  /* ⚠ Walks the parent's list WITH its dividers, not `toolbarItems`. The "⋯"
+   * is a dropdown drawn by the same ContextMenu as the right click, and the
+   * dividers are what group it: the owner asked for a line between every
+   * app's actions (lib/pluginMenu → one `sep-plugin:*` per app), and a "⋯"
+   * built from the divider-free list ran Open, Rename, Tags and two apps'
+   * verbs together as one undivided column while the right click beside it
+   * drew the lines. An icon never takes a divider; ContextMenu collapses the
+   * ones that end up leading, trailing or doubled once the icons are pulled
+   * out. `restCount` is the number of REAL entries — a "⋯" whose menu is
+   * nothing but dividers would open an empty box. */
+  let restCount = 0;
+  for (const a of props.actions) {
+    if (a.hidden) continue;
+    if (a.divider) {
+      rest.push(a);
+      continue;
+    }
     if (BAR_ICON_KEYS.has(a.key) && iconFor(a)) icons.push(a);
-    else rest.push(a);
+    else {
+      rest.push(a);
+      restCount++;
+    }
   }
-  return { icons, rest };
+  return { icons, rest: restCount ? rest : [], restCount };
 });
 
 /* ── folding (kept from ui-fix, moved onto the bar) ───────────────────
@@ -412,7 +432,9 @@ watch(
 
 function openBarMore() {
   const r = selMoreBtnEl.value?.getBoundingClientRect();
-  selMoreRef.value?.show({ clientX: r ? r.right : 0, clientY: r ? r.bottom + 4 : 0 } as MouseEvent, []);
+  // ⚠ RTL: from the button's END edge (its left in RTL) — ContextMenu flips it
+  // back under the button from there, in either direction.
+  selMoreRef.value?.show({ clientX: r ? inlineEndX(r, dir.value) : 0, clientY: r ? r.bottom + 4 : 0 } as MouseEvent, []);
 }
 
 /* ── where the bar lands ──────────────────────────────────────────────── */
@@ -894,7 +916,7 @@ const menuActions = computed<ContextAction[]>(() => {
 
 function openMore() {
   const r = moreBtnEl.value?.getBoundingClientRect();
-  moreRef.value?.show({ clientX: r ? r.right : 0, clientY: r ? r.bottom + 4 : 0 }, []);
+  moreRef.value?.show({ clientX: r ? inlineEndX(r, dir.value) : 0, clientY: r ? r.bottom + 4 : 0 }, []); // ⚠ RTL: END edge, see openBarMore
 }
 
 function onMoreSelect(a: ContextAction) {

package/src/components/plugin/PluginConfirmModal.vue

@@ -0,0 +1,54 @@
+<script setup lang="ts">
+/**
+ * PluginConfirmModal — the question an action's manifest `confirm` text asks
+ * before the job is queued. The same small dialog every surface uses
+ * (`modals/Modal`), so a plugin's confirmation looks like the trash's.
+ */
+import type { LocaleCode, ThemeMode } from '../../types/ExplorerConfig';
+import { useLocale } from '../../composables/useLocale';
+import Modal from '../../modals/Modal.vue';
+
+const props = defineProps<{
+  open: boolean;
+  locale: LocaleCode;
+  theme?: ThemeMode;
+  /** The action's label — the dialog's title. */
+  title: string;
+  /** The manifest's `confirm` text in the viewer's language. */
+  message: string;
+  danger?: boolean;
+}>();
+
+const emit = defineEmits<{
+  (e: 'close'): void;
+  (e: 'confirm'): void;
+}>();
+
+const { t } = useLocale(() => props.locale);
+</script>
+
+<template>
+  <Modal
+    :open="open"
+    :title="title || t('plugin.confirm.title')"
+    size="sm"
+    :theme="theme"
+    @close="emit('close')"
+  >
+    <p data-testid="plugin-confirm-message">{{ message }}</p>
+    <template #actions>
+      <button type="button" class="fe-btn" @click="emit('close')">
+        {{ t('plugin.confirm.cancel') }}
+      </button>
+      <button
+        type="button"
+        class="fe-btn"
+        :class="danger ? 'fe-btn--danger' : 'fe-btn--primary'"
+        data-testid="plugin-confirm-run"
+        @click="emit('confirm')"
+      >
+        {{ t('plugin.confirm.run') }}
+      </button>
+    </template>
+  </Modal>
+</template>

package/src/components/plugin/PluginInspectorSection.vue

@@ -0,0 +1,149 @@
+<script setup lang="ts">
+/**
+ * PluginInspectorSection — one `inspector` view of an app plugin, as a
+ * collapsible section of the details panel.
+ *
+ * Closed, it is a heading and nothing else: no request is made until the
+ * person opens it (a panel that loaded every plugin's view for every click
+ * would make N calls per selection). Opened, it asks
+ * `GET …/views/{plugin}/{view}?path=` once for the selected item and draws
+ * the surface inline; the footer buttons post events through the same
+ * conversation the modal holds (`usePluginSurface`), and a `{op}` answer
+ * goes up for the host to register in the tray, exactly as M1's modal does.
+ * A new selection resets the section to closed-and-unloaded.
+ */
+import { computed, ref, watch } from 'vue';
+import type { LocaleCode, ThemeMode } from '../../types/ExplorerConfig';
+import type { FileApi } from '../../composables/useFileApi';
+import type { PluginViewRow, SurfaceOpenRequest } from '../../types/Plugins';
+import { useLocale } from '../../composables/useLocale';
+import { usePluginSurface } from '../../composables/usePluginSurface';
+import { labelOf } from '../../lib/pluginLabel';
+import SurfaceConversation from './SurfaceConversation.vue';
+import SurfaceFooterButtons from './SurfaceFooterButtons.vue';
+
+const props = defineProps<{
+  api: FileApi;
+  view: PluginViewRow;
+  /** Adapter-qualified path of the selected item. */
+  path: string;
+  locale: LocaleCode;
+  theme?: ThemeMode;
+  storages?: string[];
+}>();
+
+const emit = defineEmits<{
+  (e: 'op', op: Record<string, unknown>): void;
+  (e: 'toast', message: string): void;
+  /** v3 §3.0 — the answer says "go to this file"; the explorer navigates. */
+  (e: 'open', req: SurfaceOpenRequest): void;
+}>();
+
+const { t } = useLocale(() => props.locale);
+
+const expanded = ref(false);
+const loading = ref(false);
+const loadError = ref('');
+
+const conv = usePluginSurface(
+  {
+    api: props.api,
+    plugin: props.view.plugin,
+    view: props.view.id,
+    path: () => props.path,
+    locale: () => props.locale,
+    errorText: () => t('plugin.view.error'),
+  },
+  {
+    onOp: (op) => emit('op', op),
+    onOpen: (req) => emit('open', req),
+    // The conversation ended (a job was queued, or the plugin said `done`):
+    // what the section shows next is the view's fresh state.
+    onDone: () => void load(),
+    onToast: (m) => emit('toast', m),
+  },
+);
+
+const label = computed(() => labelOf(props.view.label, props.locale) || props.view.id);
+const sectionId = computed(() => `fe-plugin-insp-${props.view.plugin}-${props.view.id}`);
+
+async function load() {
+  loading.value = true;
+  loadError.value = '';
+  try {
+    const res = await props.api.pluginView(props.view.plugin, props.view.id, props.path);
+    conv.setSurface(res?.surface ?? null);
+    if (!res?.surface) loadError.value = t('plugin.view.error');
+  } catch (e) {
+    conv.setSurface(null);
+    // ⚠ An app's own error text never met the catalogue: isolate its
+    //   machine runs for the reader's direction (lib/direction).
+    loadError.value = t.foreign?.(String((e as Error)?.message ?? e)) || t('plugin.view.error');
+  } finally {
+    loading.value = false;
+  }
+}
+
+function toggle() {
+  expanded.value = !expanded.value;
+  if (expanded.value && !conv.current.value && !loading.value) void load();
+}
+
+watch(
+  () => props.path,
+  () => {
+    expanded.value = false;
+    loadError.value = '';
+    conv.setSurface(null);
+  },
+);
+</script>
+
+<template>
+  <section class="fe-inspector__section fe-pinsp" :data-testid="`inspector-plugin-${view.plugin}-${view.id}`">
+    <h3 class="fe-inspector__heading fe-pinsp__heading">
+      <button
+        type="button"
+        class="fe-pinsp__toggle"
+        :aria-expanded="expanded"
+        :aria-controls="sectionId"
+        :data-testid="`inspector-plugin-toggle-${view.plugin}-${view.id}`"
+        @click="toggle"
+      >
+        <svg
+          class="fe-ficon fe-pinsp__chev"
+          :class="{ 'is-open': expanded }"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          aria-hidden="true"
+          focusable="false"
+        >
+          <path d="M9 5l7 7-7 7" />
+        </svg>
+        <span>{{ label }}</span>
+      </button>
+    </h3>
+    <div v-if="expanded" :id="sectionId" class="fe-pinsp__body">
+      <p v-if="loading" class="fe-inspector__empty">{{ t('plugin.view.loading') }}</p>
+      <p v-else-if="loadError" class="fe-surface__error" role="alert">{{ loadError }}</p>
+      <template v-else-if="conv.current.value">
+        <SurfaceConversation
+          :conv="conv"
+          :locale="locale"
+          :theme="theme"
+          :api="api"
+          :plugin="view.plugin"
+          :storages="storages"
+          :start-at="path"
+        />
+        <div v-if="conv.footer.value.length" class="fe-pinsp__actions">
+          <SurfaceFooterButtons :conv="conv" :locale="locale" testid-prefix="inspector-plugin" small />
+        </div>
+      </template>
+    </div>
+  </section>
+</template>