@brftech/filex-core 0.39.1 → 0.41.0

package/src/components/NFSExportsPanel.vue

@@ -30,7 +30,7 @@ const emit = defineEmits<{
 }>();
 
 const locale = computed<LocaleCode>(() => resolveLocale(props.config.locale));
-const { t } = useLocale(locale);
+const { t, formatDate } = useLocale(locale);
 
 const {
   exports,
@@ -156,10 +156,13 @@ async function copyLine() {
   copyTimer = setTimeout(() => (copied.value = false), 1600);
 }
 
+/* zaman:z1 — one date formatter for the package. This was a bare
+ * `toLocaleDateString()`: the browser's locale and the browser's zone, so a
+ * key minted at 23:30 in Istanbul was dated a day early for a viewer reading
+ * UTC and came out in the wrong language besides. */
 function shortDate(v?: string | null): string {
-  if (!v) return '';
-  const d = new Date(v);
-  return Number.isNaN(d.getTime()) ? '' : d.toLocaleDateString();
+  const ms = new Date(v ?? '').getTime();
+  return Number.isNaN(ms) ? '' : formatDate(ms);
 }
 
 function scopeOf(e: NFSExport): string {

package/src/components/OnboardingTour.vue

@@ -46,59 +46,107 @@ const hintCombos = computed(() => ({
 
 // ------------------------------------------------------------------
 // Step definitions. `target` returns the element to spotlight (null =
-// centered card, e.g. the closing shortcuts step). Buttons without a
-// stable class are found via their localized title attribute — the
-// toolbar gives every icon-only button a title from the same catalogue.
+// centered card, e.g. the closing shortcuts step).
+//
+// gorunum:v3-shell — every target below is a `data-testid` or a class the
+// shell owns, resolved from the live DOM. It used to find two of its
+// buttons by matching their localized `title` attribute, which quietly
+// stopped working the moment those verbs moved into a menu: `byTitle(r,
+// t('toolbar.upload'))` matched nothing at 1440px, so the upload step was
+// dropped from the walk and nobody could see that it had been. A step that
+// disappears is indistinguishable from a step that was never written.
+//
+// ⚠ Two steps point at a control the narrow shell draws DIFFERENTLY — the
+// panel (a column at 1440px, a closed drawer behind `toolbar-nav` at
+// 390px) and the create button ("+ New" and its menu, versus the upload
+// FAB). They say a different sentence there, and the sentence is chosen
+// from THE ELEMENT THAT ACTUALLY RESOLVED, never from a width: one branch,
+// no media query to keep in sync with the stylesheet.
 // ------------------------------------------------------------------
 
-function byTitle(root: HTMLElement, label: string): HTMLElement | null {
-  const nodes = root.querySelectorAll<HTMLElement>('button[title]');
-  for (const el of Array.from(nodes)) {
-    if (el.getAttribute('title') === label) return el;
-  }
-  return null;
-}
-
 interface TourStep {
   id: string;
   titleKey: string;
-  descKey: string;
+  /** A key, or a key chosen from whichever element resolved (see above). */
+  descKey: string | ((el: HTMLElement | null) => string);
   target: (root: HTMLElement) => HTMLElement | null;
 }
 
 const STEPS: TourStep[] = [
   {
+    // The navigation panel: the standard views, then STORAGES, then
+    // CONNECTIONS. At 390px it is a drawer that starts closed, so there is
+    // nothing to spotlight and the button that opens it is the target.
     id: 'nav',
     titleKey: 'tour.step.nav.title',
-    descKey: 'tour.step.nav.desc',
-    target: (r) => r.querySelector<HTMLElement>('.fe-breadcrumb'),
+    descKey: (el) =>
+      el?.dataset.testid === 'sidenav' ? 'tour.step.nav.desc' : 'tour.step.nav.desc_closed',
+    target: (r) =>
+      r.querySelector<HTMLElement>('[data-testid="sidenav"]') ||
+      r.querySelector<HTMLElement>('[data-testid="toolbar-nav"]'),
   },
   {
-    id: 'upload',
-    titleKey: 'tour.step.upload.title',
-    descKey: 'tour.step.upload.desc',
+    // "+ New" — the menu that replaced the Upload / New folder pair. The
+    // narrow shell has no panel on screen and draws the upload FAB instead,
+    // which does ONE of the three things the menu offers, so it gets a
+    // sentence that promises only that one.
+    id: 'new',
+    titleKey: 'tour.step.new.title',
+    descKey: (el) =>
+      el?.dataset.testid === 'sidenav-new' ? 'tour.step.new.desc' : 'tour.step.new.desc_fab',
     target: (r) =>
-      byTitle(r, t('toolbar.upload')) || r.querySelector<HTMLElement>('.fe-fab'),
+      r.querySelector<HTMLElement>('[data-testid="sidenav-new"]') ||
+      r.querySelector<HTMLElement>('.fe-fab'),
   },
   {
+    // ⚠ The FIELD, not `.fe-search__input`. The wide header's input carries
+    // both class names and the narrow one carries only `fe-drivesearch__input`
+    // — so the old selector resolved at 1440px and matched nothing at 390px,
+    // where the field is the widest thing on the row. The testid is on the
+    // wrapper in both layouts, and spotlighting the wrapper also takes in the
+    // advanced-search and palette buttons the copy now names.
     id: 'search',
     titleKey: 'tour.step.search.title',
     descKey: 'tour.step.search.desc',
-    target: (r) =>
-      r.querySelector<HTMLElement>('.fe-search__input') ||
-      r.querySelector<HTMLElement>('.fe-toolbar__search-toggle'),
+    target: (r) => r.querySelector<HTMLElement>('[data-testid="drive-search"]'),
+  },
+  {
+    // The breadcrumb — this was the old first step's target while its title
+    // said "Storages & folders", which is the panel. Now it has its own step
+    // and its own title. Absent on Home, which has no address; the step drops
+    // itself there rather than pointing at the heading that takes its place.
+    id: 'crumb',
+    titleKey: 'tour.step.crumb.title',
+    descKey: 'tour.step.crumb.desc',
+    target: (r) => r.querySelector<HTMLElement>('.fe-breadcrumb'),
+  },
+  {
+    // The filter row. Unconditional in the shell now, but only drawn where
+    // there is a listing to filter — not at the multi-storage virtual root,
+    // which is where a first run usually starts, so this step is often the
+    // one that drops itself.
+    id: 'filters',
+    titleKey: 'tour.step.filters.title',
+    descKey: 'tour.step.filters.desc',
+    target: (r) => r.querySelector<HTMLElement>('[data-testid="filterbar"]'),
   },
   {
     id: 'view',
     titleKey: 'tour.step.view.title',
     descKey: 'tour.step.view.desc',
+    // Still `.fe-toolbar__view`: ViewSwitcher kept its class when it moved
+    // from the header to the breadcrumb row.
     target: (r) => r.querySelector<HTMLElement>('.fe-toolbar__view'),
   },
   {
-    id: 'share',
-    titleKey: 'tour.step.share.title',
-    descKey: 'tour.step.share.desc',
-    target: (r) => r.querySelector<HTMLElement>('.fe__body'),
+    // Sharing used to spotlight `.fe__body` — the whole listing, which is to
+    // say nothing in particular — while talking about a context menu. The
+    // details panel is where a share link is actually minted, so the step
+    // points at the control that opens it and names the context menu too.
+    id: 'details',
+    titleKey: 'tour.step.details.title',
+    descKey: 'tour.step.details.desc',
+    target: (r) => r.querySelector<HTMLElement>('[data-testid="subhead-inspector"]'),
   },
   {
     id: 'help',
@@ -143,6 +191,24 @@ interface Rect {
 const spot = ref<Rect | null>(null);
 const cardStyle = ref<Record<string, string>>({});
 const cardEl = ref<HTMLElement | null>(null);
+/**
+ * The element the CURRENT step resolved to, kept so a step whose control
+ * differs by width can pick its sentence from what is really there.
+ *
+ * Written at the top of `place()`, which runs before the card re-renders
+ * (the `stepIdx` watcher flushes 'pre') and again on every resize — so the
+ * copy follows the spotlight instead of lagging a step behind it. Assigning
+ * the same element twice is not a change, so a scroll storm costs nothing.
+ */
+const targetEl = ref<HTMLElement | null>(null);
+
+/** The step's sentence, with the shortcut names filled in. */
+const stepDesc = computed(() => {
+  const s = step.value;
+  if (!s) return '';
+  const key = typeof s.descKey === 'function' ? s.descKey(targetEl.value) : s.descKey;
+  return t(key, hintCombos.value);
+});
 
 const PAD = 6; // spotlight breathing room around the target
 const GAP = 12; // gap between spotlight and the card
@@ -152,6 +218,7 @@ async function place() {
   const r = props.root;
   if (!s) return;
   const el = r ? s.target(r) : null;
+  targetEl.value = el;
   if (!el) {
     spot.value = null; // centered card
     cardStyle.value = {};
@@ -169,17 +236,50 @@ async function place() {
     width: rect.width + PAD * 2,
     height: rect.height + PAD * 2,
   };
-  // Card: below the spotlight when there's room, above otherwise;
-  // clamped into the viewport horizontally.
+  // Card: below the spotlight, then above, then beside it.
+  //
+  // gorunum:v3-shell — the SIDE branches are why this is four cases and not
+  // two. The navigation panel is a full-height column, so neither "below" nor
+  // "above" fits and the old code clamped the card to the top of the viewport
+  // — which put it flat on top of the panel, hiding the very rows ("Home, My
+  // files, Shared with me…") the step was reading out. A coach mark that
+  // covers its own subject is worse than no coach mark: it looks like the
+  // product drew a dialog in the wrong place.
   await nextTick();
   const vw = window.innerWidth;
   const vh = window.innerHeight;
   const cw = Math.min(340, vw - 24);
   const ch = cardEl.value?.offsetHeight ?? 160;
-  let top = rect.bottom + PAD + GAP;
-  if (top + ch > vh - 12) top = Math.max(12, rect.top - PAD - GAP - ch);
-  let left = rect.left + rect.width / 2 - cw / 2;
-  left = Math.min(Math.max(12, left), vw - cw - 12);
+  const sTop = rect.top - PAD;
+  const sBottom = rect.bottom + PAD;
+  const sLeft = rect.left - PAD;
+  const sRight = rect.right + PAD;
+  // Centred on the target along the other axis, then clamped into view.
+  const clampX = (x: number) => Math.min(Math.max(12, x), Math.max(12, vw - cw - 12));
+  const clampY = (y: number) => Math.min(Math.max(12, y), Math.max(12, vh - ch - 12));
+  const midX = clampX(rect.left + rect.width / 2 - cw / 2);
+  const midY = clampY(rect.top + rect.height / 2 - ch / 2);
+
+  let top: number;
+  let left: number;
+  if (sBottom + GAP + ch <= vh - 12) {
+    top = sBottom + GAP;
+    left = midX;
+  } else if (sTop - GAP - ch >= 12) {
+    top = sTop - GAP - ch;
+    left = midX;
+  } else if (sRight + GAP + cw <= vw - 12) {
+    left = sRight + GAP;
+    top = midY;
+  } else if (sLeft - GAP - cw >= 12) {
+    left = sLeft - GAP - cw;
+    top = midY;
+  } else {
+    // Nothing fits — a target that fills the viewport. Clamp, and accept the
+    // overlap rather than drawing the card off screen.
+    top = clampY(sBottom + GAP);
+    left = midX;
+  }
   cardStyle.value = {
     top: `${Math.round(top)}px`,
     left: `${Math.round(left)}px`,
@@ -187,8 +287,30 @@ async function place() {
   };
 }
 
+let placeRaf = 0;
+/**
+ * Re-place after a resize or a scroll — but on the NEXT frame, never inline.
+ *
+ * ⚠ The explorer decides it is narrow from a ResizeObserver on its own root
+ * (FileExplorer.vue, `isNarrow`), and ResizeObserver callbacks run AFTER the
+ * frame's rAF callbacks — so neither this `window` listener nor a single rAF
+ * has seen the new layout yet. Measured: shrinking 1440 → 390 with the tour
+ * open left the spotlight on the navigation panel (the element was still in
+ * the DOM when this handler asked for it) both inline and after one frame;
+ * only a SECOND resize moved it onto the top bar's button. Two frames plus a
+ * tick puts this after the observer has fired and Vue has patched, so the
+ * first resize gets the right answer — and the step's sentence, which is
+ * chosen from that same element, changes with it.
+ */
 function onViewportChange() {
-  if (props.open) void place();
+  if (!props.open) return;
+  if (placeRaf) cancelAnimationFrame(placeRaf);
+  placeRaf = requestAnimationFrame(() => {
+    placeRaf = requestAnimationFrame(() => {
+      placeRaf = 0;
+      void nextTick().then(place);
+    });
+  });
 }
 
 // ------------------------------------------------------------------
@@ -250,6 +372,7 @@ onMounted(() => {
 onBeforeUnmount(() => {
   window.removeEventListener('resize', onViewportChange);
   window.removeEventListener('scroll', onViewportChange, true);
+  if (placeRaf) cancelAnimationFrame(placeRaf);
 });
 
 // Theme cascade outside `.fe` — same pattern as ContextMenu.
@@ -309,7 +432,7 @@ const themeClass = computed(() => `fe-ctx-backdrop--theme-${props.theme || 'auto
             {{ t('tour.progress', { n: stepIdx + 1, m: total }) }}
           </p>
           <h3 class="fe-tour__title">{{ t(step.titleKey) }}</h3>
-          <p class="fe-tour__desc">{{ t(step.descKey, hintCombos) }}</p>
+          <p class="fe-tour__desc">{{ stepDesc }}</p>
           <div class="fe-tour__dots" aria-hidden="true">
             <span
               v-for="(s, i) in activeSteps"

package/src/components/QuickLook.vue

@@ -6,11 +6,15 @@
  * mode), so every viewer the modal knows (image/video/pdf/office/code/
  * 3D/archive/…) works in quick-look for free. What this layer adds:
  *
- *   - Space closes again (macOS Quick Look convention)
+ *   - the quick-look key closes the peek again (Space by default — macOS
+ *     Quick Look convention), and the open key promotes it into the full
+ *     open flow (Enter by default, emit 'open-full'). Both come from the
+ *     shortcut registry rather than from a comparison against the default
+ *     key, so a remap reaches the overlay too
  *   - ← ↑ / → ↓ ask the host to move the selection; the host keeps the
- *     `file` prop in sync so the preview follows the selection
- *   - Enter promotes the peek into the full open flow (emit 'open-full')
- *   - a small floating hint bar with the key legend
+ *     `file` prop in sync so the preview follows the selection. These are
+ *     the peek's own arrows, not registry actions
+ *   - a small floating hint bar naming those keys, read from the registry
  *
  * Keys are handled in window CAPTURE phase with stopPropagation so the
  * global shortcut registry never double-handles them; events that
@@ -39,14 +43,31 @@ const props = defineProps<{
   pdfWorkerUrl?: string | null;
   viewerBaseUrl?: string | null;
   theme?: 'light' | 'dark' | 'auto';
+  /* === gorunum:v1-viewer — passed straight through to PreviewModal ===
+   * The peek knows nothing about the listing either; the host that answers
+   * `nav` is the one that can say "1 of 9". */
+  /** 1-based position of `file` in the host's file list. */
+  index?: number;
+  /** How many files that list holds. */
+  total?: number;
+  /** API origin for the star toggle. */
+  apiBase?: string;
+  /** Draw the share action (the host must listen to `@share`). */
+  shareEnabled?: boolean;
 }>();
 
 const emit = defineEmits<{
   (e: 'close'): void;
-  /** Arrow navigation: -1 = previous file, +1 = next file. */
+  /** Arrow navigation: -1 = previous file, +1 = next file. Now raised by the
+   *  overlay's edge chevrons as well as by the arrow keys — ONE contract, two
+   *  triggers, because a second navigation path would drift from this one. */
   (e: 'nav', delta: number): void;
   /** Enter — close the peek and open the file for real. */
   (e: 'open-full'): void;
+  /** The viewer's share action (only reachable when `shareEnabled`). */
+  (e: 'share'): void;
+  /** The viewer's star toggle succeeded. */
+  (e: 'starred', value: boolean): void;
 }>();
 
 const { t } = useLocale(() => props.locale);
@@ -152,7 +173,15 @@ onBeforeUnmount(() => window.removeEventListener('keydown', onKeydown, true));
     :drawio-url="drawioUrl"
     :pdf-worker-url="pdfWorkerUrl"
     :viewer-base-url="viewerBaseUrl"
+    :index="index"
+    :total="total"
+    :api-base="apiBase"
+    :share-enabled="shareEnabled"
+    :nav-enabled="true"
     @close="emit('close')"
+    @nav="(d: number) => emit('nav', d)"
+    @share="emit('share')"
+    @starred="(v: boolean) => emit('starred', v)"
   />
   <!--
     Teleported under <body> for the same reason as ContextMenu and

package/src/components/RecentlyOpened.vue

@@ -4,6 +4,7 @@
  * files. Backed by `GET /api/files/manager/recent?limit=20`.
  */
 import { ref, onMounted, watch } from 'vue';
+import { actionIconSvg } from '../lib/actionIcons'; /* ikon:emoji */
 
 interface RecentNode {
   id: number;
@@ -83,8 +84,19 @@ watch(() => props.refreshKey, load);
   <div class="filex-recent">
     <header>
       <h3>Recently opened</h3>
-      <button class="filex-recent-refresh" type="button" @click="load" :disabled="loading">
-        ↻
+      <button
+        class="filex-recent-refresh"
+        type="button"
+        title="Refresh"
+        aria-label="Refresh"
+        @click="load"
+        :disabled="loading"
+      >
+        <!-- ikon:emoji — ↻ was a bare arrow glyph with no label at all, so
+             the only thing naming this button was its shape. Same mark as the
+             toolbar's Refresh now, and it says what it is. -->
+        <!-- eslint-disable-next-line vue/no-v-html — static markup from lib/actionIcons -->
+        <span aria-hidden="true" v-html="actionIconSvg('refresh')"></span>
       </button>
     </header>
 
@@ -130,6 +142,9 @@ watch(() => props.refreshKey, load);
   color: var(--fe-text, var(--filex-text, #111827));
 }
 .filex-recent-refresh {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
   background: transparent;
   border: none;
   color: var(--fe-text-muted, var(--filex-text-muted, #9ca3af));

package/src/components/S3KeysPanel.vue

@@ -36,7 +36,7 @@ const emit = defineEmits<{
 }>();
 
 const locale = computed<LocaleCode>(() => resolveLocale(props.config.locale));
-const { t } = useLocale(locale);
+const { t, formatDate } = useLocale(locale);
 
 const {
   keys,
@@ -150,10 +150,13 @@ async function copy(text: string, id: string) {
   copyTimer = setTimeout(() => (copied.value = null), 1600);
 }
 
+/* zaman:z1 — one date formatter for the package. This was a bare
+ * `toLocaleDateString()`: the browser's locale and the browser's zone, so a
+ * key minted at 23:30 in Istanbul was dated a day early for a viewer reading
+ * UTC and came out in the wrong language besides. */
 function shortDate(v?: string | null): string {
-  if (!v) return '';
-  const d = new Date(v);
-  return Number.isNaN(d.getTime()) ? '' : d.toLocaleDateString();
+  const ms = new Date(v ?? '').getTime();
+  return Number.isNaN(ms) ? '' : formatDate(ms);
 }
 
 /** What a key is limited to, in one line. */

package/src/components/SSHKeysPanel.vue

@@ -49,7 +49,7 @@ const emit = defineEmits<{
 }>();
 
 const locale = computed<LocaleCode>(() => resolveLocale(props.config.locale));
-const { t } = useLocale(locale);
+const { t, formatDate } = useLocale(locale);
 
 const { keys, connection, loading, error, canAdd, hasUsableKey, load, add, setDisabled, remove } =
   useSSHKeys(props.config);
@@ -119,10 +119,13 @@ async function drop(k: SSHPublicKey) {
   }
 }
 
+/* zaman:z1 — one date formatter for the package. This was a bare
+ * `toLocaleDateString()`: the browser's locale and the browser's zone, so a
+ * key minted at 23:30 in Istanbul was dated a day early for a viewer reading
+ * UTC and came out in the wrong language besides. */
 function shortDate(v?: string | null): string {
-  if (!v) return '';
-  const d = new Date(v);
-  return Number.isNaN(d.getTime()) ? '' : d.toLocaleDateString();
+  const ms = new Date(v ?? '').getTime();
+  return Number.isNaN(ms) ? '' : formatDate(ms);
 }
 
 /** Shown the way OpenSSH prints it, so it can be compared with `ssh-keygen -lf`. */

package/src/components/ShortcutSettings.vue

@@ -20,10 +20,12 @@
 import { computed, onBeforeUnmount, ref, watch } from 'vue';
 import type { LocaleCode } from '../types/ExplorerConfig';
 import { useLocale } from '../composables/useLocale';
+import { actionIconSvg } from '../lib/actionIcons'; /* ikon:emoji */
 import {
   comboFromEvent,
   effectiveCombo,
   findShortcutConflict,
+  isReservedCombo,
   resetAllShortcuts,
   resetShortcut,
   setShortcutOverride,
@@ -66,6 +68,8 @@ const anyOverridden = computed(() => list.value.some((s) => s.overridden));
 
 const capturingId = ref<string | null>(null);
 const conflict = ref<{ id: string; combo: string; conflictId: string; fixed: boolean } | null>(null);
+/* tus:t1 — the user pressed something the browser keeps for itself. */
+const reserved = ref<{ id: string; combo: string } | null>(null);
 
 function labelOf(id: string): string {
   const def = SHORTCUT_ACTIONS.find((a) => a.id === id);
@@ -74,6 +78,7 @@ function labelOf(id: string): string {
 
 function beginCapture(id: string) {
   conflict.value = null;
+  reserved.value = null;
   capturingId.value = id;
 }
 
@@ -84,6 +89,13 @@ function cancelCapture() {
 function attemptAssign(id: string, combo: string) {
   capturingId.value = null;
   if (combo === effectiveCombo(id)) return; // unchanged
+  /* tus:t1 — a combo the browser takes before the page sees it would be a key
+   * that does nothing where the user is standing. Refuse it and say why,
+   * rather than storing a binding that never fires. */
+  if (isReservedCombo(combo)) {
+    reserved.value = { id, combo };
+    return;
+  }
   const clash = findShortcutConflict(combo, id);
   if (clash) {
     conflict.value = { id, combo, conflictId: clash.id, fixed: clash.fixed };
@@ -104,13 +116,19 @@ function dismissConflict() {
   conflict.value = null;
 }
 
+function dismissReserved() {
+  reserved.value = null;
+}
+
 function onReset(id: string) {
   conflict.value = null;
+  reserved.value = null;
   resetShortcut(id);
 }
 
 function onResetAll() {
   conflict.value = null;
+  reserved.value = null;
   capturingId.value = null;
   resetAllShortcuts();
 }
@@ -145,6 +163,7 @@ watch(
       window.removeEventListener('keydown', onWindowKeydown, true);
       capturingId.value = null;
       conflict.value = null;
+      reserved.value = null;
     }
   },
 );
@@ -171,7 +190,9 @@ function onClose() {
           :disabled="!anyOverridden"
           @click="onResetAll"
         >
-          ↺ {{ t('shortcuts.settings.reset_all') }}
+          <!-- eslint-disable-next-line vue/no-v-html — static markup from lib/actionIcons -->
+          <span class="fe-icon" aria-hidden="true" v-html="actionIconSvg('restore')"></span>
+          {{ t('shortcuts.settings.reset_all') }}
         </button>
       </div>
 
@@ -201,6 +222,14 @@ function onClose() {
                 </span>
                 <template v-for="(combo, i) in s.keys" v-else :key="combo">
                   <kbd class="fe-kbd">{{ combo }}</kbd>
+                  <!-- tus:t1 — this combo never reaches a browser tab. Say so
+                       on the row rather than letting the user discover it by
+                       pressing the key and watching nothing happen. -->
+                  <span
+                    v-if="isReservedCombo(combo)"
+                    class="fe-shortset__reserved"
+                    :title="t('shortcuts.settings.reserved_title')"
+                  >{{ t('shortcuts.settings.reserved_badge') }}</span>
                   <span v-if="i < s.keys.length - 1" class="fe-shortcuts__or" aria-hidden="true">/</span>
                 </template>
               </template>
@@ -231,7 +260,8 @@ function onClose() {
                   :aria-label="t('shortcuts.settings.reset')"
                   @click="onReset(s.id)"
                 >
-                  ↺
+                  <!-- eslint-disable-next-line vue/no-v-html — static markup from lib/actionIcons -->
+                  <span class="fe-icon" aria-hidden="true" v-html="actionIconSvg('restore')"></span>
                 </button>
               </template>
               <span v-else class="fe-shortset__fixed">{{ t('shortcuts.settings.fixed') }}</span>
@@ -260,6 +290,17 @@ function onClose() {
               </button>
             </span>
           </div>
+          <div v-if="reserved && reserved.id === s.id" class="fe-shortset__conflict" role="alert">
+            <span class="fe-shortset__conflict-msg">
+              <kbd class="fe-kbd">{{ reserved.combo }}</kbd>
+              {{ t('shortcuts.settings.reserved') }}
+            </span>
+            <span class="fe-shortset__conflict-actions">
+              <button type="button" class="fe-btn fe-shortset__btn" @click="dismissReserved">
+                {{ t('shortcuts.settings.conflict_cancel') }}
+              </button>
+            </span>
+          </div>
         </div>
       </section>
     </div>

package/src/components/ShortcutsHelp.vue

@@ -11,6 +11,7 @@
 import { computed } from 'vue';
 import type { LocaleCode } from '../types/ExplorerConfig';
 import { useLocale } from '../composables/useLocale';
+import { actionIconSvg } from '../lib/actionIcons'; /* ikon:emoji */
 import { useShortcutList, type ShortcutView } from '../composables/useKeyboardShortcuts';
 import Modal from '../modals/Modal.vue';
 
@@ -72,7 +73,9 @@ const groups = computed(() => {
     </div>
     <template #actions>
       <button type="button" class="fe-btn fe-btn--primary" @click="emit('customize')">
-        ⌨ {{ t('shortcuts.customize') }}
+        <!-- eslint-disable-next-line vue/no-v-html — static markup from lib/actionIcons -->
+        <span class="fe-icon" aria-hidden="true" v-html="actionIconSvg('shortcut-settings')"></span>
+        {{ t('shortcuts.customize') }}
       </button>
       <button type="button" class="fe-btn" @click="emit('close')">{{ t('viewer.close') }}</button>
     </template>