@brftech/filex-core 0.4.2 → 0.6.0

package/src/components/ShortcutsHelp.vue

@@ -2,14 +2,16 @@
 /**
  * ShortcutsHelp — "?" cheat-sheet modal.
  *
- * Renders the SHORTCUTS table exported by useKeyboardShortcuts (single
- * source of truth) grouped by section. Modal.vue supplies Esc handling,
- * backdrop, focus and the close button.
+ * wiring:c2 — renders the live shortcut registry (useShortcutList) so
+ * user remaps show up here too, grouped by section. Unbound actions are
+ * listed with an "unassigned" chip. The footer carries a "Customize"
+ * button that asks the host to open ShortcutSettings. Modal.vue
+ * supplies Esc handling, backdrop, focus and the close button.
  */
 import { computed } from 'vue';
 import type { LocaleCode } from '../types/ExplorerConfig';
 import { useLocale } from '../composables/useLocale';
-import { SHORTCUTS, type ShortcutDef } from '../composables/useKeyboardShortcuts';
+import { useShortcutList, type ShortcutView } from '../composables/useKeyboardShortcuts';
 import Modal from '../modals/Modal.vue';
 
 const props = defineProps<{
@@ -19,14 +21,17 @@ const props = defineProps<{
 
 const emit = defineEmits<{
   (e: 'close'): void;
+  (e: 'customize'): void;
 }>();
 
 const { t } = useLocale(() => props.locale);
 
+const list = useShortcutList();
+
 const groups = computed(() => {
   const order: string[] = [];
-  const map = new Map<string, ShortcutDef[]>();
-  for (const s of SHORTCUTS) {
+  const map = new Map<string, ShortcutView[]>();
+  for (const s of list.value) {
     if (!map.has(s.groupKey)) {
       map.set(s.groupKey, []);
       order.push(s.groupKey);
@@ -43,17 +48,33 @@ const groups = computed(() => {
       <section v-for="g in groups" :key="g.key" class="fe-shortcuts__group">
         <h3 class="fe-shortcuts__heading">{{ t(g.key) }}</h3>
         <div class="fe-shortcuts__table">
-          <div v-for="s in g.items" :key="s.labelKey" class="fe-shortcuts__row">
+          <div v-for="s in g.items" :key="s.id" class="fe-shortcuts__row">
             <span class="fe-shortcuts__keys">
-              <template v-for="(combo, i) in s.keys" :key="combo">
+              <template v-if="s.keys.length === 0">
+                <span class="fe-shortcuts__unbound">{{ t('shortcuts.settings.unbound') }}</span>
+              </template>
+              <template v-for="(combo, i) in s.keys" v-else :key="combo">
                 <kbd class="fe-kbd">{{ combo }}</kbd>
                 <span v-if="i < s.keys.length - 1" class="fe-shortcuts__or" aria-hidden="true">/</span>
               </template>
             </span>
-            <span class="fe-shortcuts__desc">{{ t(s.labelKey) }}</span>
+            <span class="fe-shortcuts__desc">
+              {{ t(s.labelKey) }}
+              <span
+                v-if="s.overridden"
+                class="fe-shortcuts__custom"
+                :title="t('shortcuts.settings.customized')"
+              >●</span>
+            </span>
           </div>
         </div>
       </section>
     </div>
+    <template #actions>
+      <button type="button" class="fe-btn fe-btn--primary" @click="emit('customize')">
+        ⌨ {{ t('shortcuts.customize') }}
+      </button>
+      <button type="button" class="fe-btn" @click="emit('close')">{{ t('viewer.close') }}</button>
+    </template>
   </Modal>
 </template>

package/src/components/TabBar.vue

@@ -0,0 +1,174 @@
+<script setup lang="ts">
+/**
+ * TabBar — wiring:d1 sekme şeridi.
+ *
+ * Thin strip that sits ABOVE the toolbar. The host renders it only when
+ * 2+ tabs exist (embed pixel-parity: a single tab shows nothing at all).
+ * Purely presentational: every mutation is an emit; useTabs owns state.
+ *
+ * Interactions:
+ *   click tab      → select
+ *   × / middle-tık → close
+ *   +              → new tab (clone of the current location)
+ *   drag           → reorder (HTML5 DnD; live-swap while dragging)
+ *   ⫿ (split)      → toggle the active tab's secondary pane
+ *
+ * UNSCOPED styles (`fe-tabs*` in base.css) — the webcomponent build
+ * cannot carry scoped data-v hashes (v0.5.0 discovery).
+ */
+import { ref } from 'vue';
+import type { LocaleCode } from '../types/ExplorerConfig';
+import { useLocale } from '../composables/useLocale';
+
+export interface TabItem {
+  id: string;
+  label: string;
+  /** true → the tab carries a split pane (small accent dot). */
+  split: boolean;
+}
+
+const props = defineProps<{
+  tabs: TabItem[];
+  activeId: string;
+  locale: LocaleCode;
+  /** false → the split toggle is hidden (narrow embeds). */
+  splitEnabled?: boolean;
+  /** true → the split toggle renders pressed (active tab has a pane). */
+  splitActive?: boolean;
+}>();
+
+const emit = defineEmits<{
+  (e: 'select', id: string): void;
+  (e: 'close', id: string): void;
+  (e: 'new'): void;
+  (e: 'reorder', from: number, to: number): void;
+  (e: 'toggle-split'): void;
+}>();
+
+const { t } = useLocale(() => props.locale);
+
+// ---- drag-sort (HTML5 DnD, live swap) ------------------------------
+const dragIndex = ref<number | null>(null);
+const overIndex = ref<number | null>(null);
+
+function onDragStart(i: number, ev: DragEvent) {
+  dragIndex.value = i;
+  if (ev.dataTransfer) {
+    ev.dataTransfer.effectAllowed = 'move';
+    // Firefox requires SOME payload for a drag to start. Deliberately not
+    // the internal file-DnD MIME, so the explorer's drop surfaces ignore it.
+    ev.dataTransfer.setData('text/plain', props.tabs[i]?.id ?? '');
+  }
+}
+
+function onDragOver(i: number, ev: DragEvent) {
+  if (dragIndex.value === null) return;
+  ev.preventDefault();
+  ev.stopPropagation();
+  if (ev.dataTransfer) ev.dataTransfer.dropEffect = 'move';
+  overIndex.value = i;
+}
+
+function onDragLeave(i: number) {
+  if (overIndex.value === i) overIndex.value = null;
+}
+
+function onDrop(i: number, ev: DragEvent) {
+  if (dragIndex.value === null) return;
+  ev.preventDefault();
+  ev.stopPropagation();
+  if (dragIndex.value !== i) emit('reorder', dragIndex.value, i);
+  dragIndex.value = null;
+  overIndex.value = null;
+}
+
+function onDragEnd() {
+  dragIndex.value = null;
+  overIndex.value = null;
+}
+
+// Middle-click closes a tab (browser convention). The mousedown guard
+// cancels Chromium's autoscroll on the scrollable strip — without it the
+// auxclick event is never generated.
+function onTabMiddleDown(ev: MouseEvent) {
+  if (ev.button === 1) ev.preventDefault();
+}
+function onAux(id: string, ev: MouseEvent) {
+  if (ev.button !== 1) return;
+  ev.preventDefault();
+  ev.stopPropagation();
+  emit('close', id);
+}
+</script>
+
+<template>
+  <div class="fe-tabs" role="tablist" :aria-label="t('tabs.strip')">
+    <div class="fe-tabs__scroll">
+      <div
+        v-for="(tab, i) in tabs"
+        :key="tab.id"
+        class="fe-tabs__tab"
+        :class="{
+          'is-active': tab.id === activeId,
+          'is-dragover': overIndex === i && dragIndex !== null && dragIndex !== i,
+        }"
+        role="tab"
+        :aria-selected="tab.id === activeId ? 'true' : 'false'"
+        tabindex="0"
+        draggable="true"
+        :title="tab.label"
+        @click="emit('select', tab.id)"
+        @keydown.enter.prevent="emit('select', tab.id)"
+        @mousedown="onTabMiddleDown($event)"
+        @auxclick="onAux(tab.id, $event)"
+        @dragstart="onDragStart(i, $event)"
+        @dragover="onDragOver(i, $event)"
+        @dragleave="onDragLeave(i)"
+        @drop="onDrop(i, $event)"
+        @dragend="onDragEnd"
+      >
+        <span v-if="tab.split" class="fe-tabs__splitdot" aria-hidden="true"></span>
+        <span class="fe-tabs__label">{{ tab.label }}</span>
+        <button
+          type="button"
+          class="fe-tabs__close"
+          :aria-label="t('tabs.close')"
+          :title="t('tabs.close')"
+          @click.stop="emit('close', tab.id)"
+        >×</button>
+      </div>
+      <button
+        type="button"
+        class="fe-tabs__new"
+        :aria-label="t('tabs.new')"
+        :title="t('tabs.new')"
+        @click="emit('new')"
+      >+</button>
+    </div>
+    <button
+      v-if="splitEnabled !== false"
+      type="button"
+      class="fe-tabs__split"
+      :class="{ 'is-active': splitActive }"
+      :aria-label="splitActive ? t('tabs.split_off') : t('tabs.split')"
+      :title="splitActive ? t('tabs.split_off') : t('tabs.split')"
+      :aria-pressed="splitActive ? 'true' : 'false'"
+      @click="emit('toggle-split')"
+    >
+      <svg
+        class="fe-ficon"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="1.8"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        aria-hidden="true"
+        focusable="false"
+      >
+        <rect x="3" y="4" width="18" height="16" rx="2" />
+        <path d="M12 4v16" />
+      </svg>
+    </button>
+  </div>
+</template>

package/src/components/ThemeGallery.vue

@@ -0,0 +1,253 @@
+<script setup lang="ts">
+/**
+ * ThemeGallery — wiring:c1 theme picker modal.
+ *
+ * A grid of theme cards, each rendering a mini live preview (surface +
+ * toolbar chips + sample rows) painted with that theme's tokens for the
+ * CURRENTLY resolved light/dark mode — so the card shows exactly what
+ * you'd get. Click applies instantly (live preview behind the modal) and
+ * persists; the selected card carries a ✓. "Varsayılana dön" resets.
+ *
+ * Presentational only — selection state + persistence live in
+ * lib/themes.ts (shared across instances); the parent forwards `select`.
+ */
+import type { LocaleCode, ThemeMode } from '../types/ExplorerConfig';
+import { useLocale } from '../composables/useLocale';
+import { THEMES, DEFAULT_THEME_ID, type ThemeDef } from '../lib/themes';
+import Modal from '../modals/Modal.vue';
+
+const props = defineProps<{
+  open: boolean;
+  locale: LocaleCode;
+  /** Host mode (forwarded to Modal so the backdrop themes correctly). */
+  theme?: ThemeMode;
+  /** Resolved mode — decides which variant the preview cards paint. */
+  dark: boolean;
+  /** Currently selected theme id. */
+  current: string;
+}>();
+
+const emit = defineEmits<{
+  (e: 'close'): void;
+  (e: 'select', id: string): void;
+}>();
+
+const { t } = useLocale(() => props.locale);
+
+/** Inline variables for one card — a self-contained mini `--fe-*` scope,
+ *  so the preview markup can use the exact same tokens the real UI uses. */
+function cardVars(th: ThemeDef): Record<string, string> {
+  return props.dark ? th.dark : th.light;
+}
+
+const DEFAULT_ID = DEFAULT_THEME_ID;
+</script>
+
+<template>
+  <Modal :open="open" :title="t('theme.title')" size="lg" :theme="theme" @close="emit('close')">
+    <p class="fe-themes__hint">{{ t('theme.hint') }}</p>
+    <div class="fe-themes" role="listbox" :aria-label="t('theme.title')">
+      <button
+        v-for="th in THEMES"
+        :key="th.id"
+        type="button"
+        class="fe-themecard"
+        :class="{ 'is-selected': th.id === current }"
+        role="option"
+        :aria-selected="th.id === current"
+        :style="cardVars(th)"
+        @click="emit('select', th.id)"
+      >
+        <span class="fe-themecard__preview" aria-hidden="true">
+          <span class="fe-themecard__topbar">
+            <span class="fe-themecard__chip fe-themecard__chip--primary"></span>
+            <span class="fe-themecard__chip"></span>
+            <span class="fe-themecard__chip fe-themecard__chip--ghost"></span>
+          </span>
+          <span class="fe-themecard__row">
+            <span class="fe-themecard__dot"></span>
+            <span class="fe-themecard__line" style="width: 62%"></span>
+          </span>
+          <span class="fe-themecard__row fe-themecard__row--selected">
+            <span class="fe-themecard__dot fe-themecard__dot--primary"></span>
+            <span class="fe-themecard__line" style="width: 44%"></span>
+          </span>
+          <span class="fe-themecard__row">
+            <span class="fe-themecard__dot fe-themecard__dot--muted"></span>
+            <span class="fe-themecard__line fe-themecard__line--muted" style="width: 74%"></span>
+          </span>
+        </span>
+        <span class="fe-themecard__name">
+          {{ t(th.nameKey) }}
+          <span v-if="th.id === current" class="fe-themecard__check" :title="t('theme.selected')">✓</span>
+        </span>
+      </button>
+    </div>
+    <template #actions>
+      <button
+        type="button"
+        class="fe-btn"
+        :disabled="current === DEFAULT_ID"
+        @click="emit('select', DEFAULT_ID)"
+      >
+        {{ t('theme.reset') }}
+      </button>
+      <button type="button" class="fe-btn fe-btn--primary" @click="emit('close')">
+        {{ t('theme.close') }}
+      </button>
+    </template>
+  </Modal>
+</template>
+
+<!-- Deliberately NOT scoped: the webcomponent injects the CORE package's
+     built style.css, whose data-v scope ids don't match the ids the
+     webcomponent's own compile assigns (verified: fe-themecard got
+     data-v-99a95ed7 in core vs data-v-5d4cc1fd in the wc bundle) — scoped
+     rules would silently not apply in embeds. Class names are fe-*
+     namespaced, so global is collision-safe (same approach as base.css). -->
+<style>
+.fe-themes__hint {
+  margin: 0 0 12px;
+  font-size: 12.5px;
+  color: var(--fe-text-muted);
+}
+
+.fe-themes {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+  gap: 12px;
+}
+
+/* Each card is its own mini token scope (inline --fe-* vars from the theme
+   definition), so every color below refers to the CARD's theme — not the
+   active page theme. */
+.fe-themecard {
+  display: flex;
+  flex-direction: column;
+  padding: 0;
+  border: 2px solid var(--fe-border-strong);
+  border-radius: var(--fe-radius, 8px);
+  background: var(--fe-bg);
+  cursor: pointer;
+  overflow: hidden;
+  text-align: left;
+  transition: transform 0.12s ease, box-shadow 0.12s ease;
+  font: inherit;
+}
+
+.fe-themecard:hover {
+  transform: translateY(-2px);
+  box-shadow: var(--fe-shadow-sm, 0 2px 6px rgba(15, 23, 42, 0.08));
+}
+
+.fe-themecard:focus-visible {
+  outline: 2px solid var(--fe-primary);
+  outline-offset: 2px;
+}
+
+.fe-themecard.is-selected {
+  border-color: var(--fe-primary);
+  box-shadow: 0 0 0 2px var(--fe-primary);
+}
+
+.fe-themecard__preview {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 10px;
+  background: var(--fe-bg);
+  border-bottom: 1px solid var(--fe-border);
+  min-height: 84px;
+}
+
+.fe-themecard__topbar {
+  display: flex;
+  gap: 4px;
+  margin-bottom: 2px;
+}
+
+.fe-themecard__chip {
+  height: 8px;
+  width: 22px;
+  border-radius: 4px;
+  background: var(--fe-bg-hover);
+  border: 1px solid var(--fe-border);
+}
+
+.fe-themecard__chip--primary {
+  background: var(--fe-primary);
+  border-color: var(--fe-primary);
+}
+
+.fe-themecard__chip--ghost {
+  background: var(--fe-bg-elev);
+}
+
+.fe-themecard__row {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 3px 4px;
+  border-radius: 4px;
+}
+
+.fe-themecard__row--selected {
+  background: var(--fe-bg-selected);
+}
+
+.fe-themecard__dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--fe-text);
+  opacity: 0.75;
+  flex: none;
+}
+
+.fe-themecard__dot--primary {
+  background: var(--fe-primary);
+  opacity: 1;
+}
+
+.fe-themecard__dot--muted {
+  background: var(--fe-text-muted);
+}
+
+.fe-themecard__line {
+  height: 6px;
+  border-radius: 3px;
+  background: var(--fe-text);
+  opacity: 0.55;
+}
+
+.fe-themecard__line--muted {
+  background: var(--fe-text-muted);
+}
+
+.fe-themecard__name {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  padding: 8px 10px;
+  font-size: 12.5px;
+  font-weight: 600;
+  color: var(--fe-text);
+  background: var(--fe-bg-elev);
+  font-family: var(--fe-font, inherit);
+}
+
+.fe-themecard__check {
+  flex: none;
+  width: 18px;
+  height: 18px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  background: var(--fe-primary);
+  color: var(--fe-text-on-primary);
+  font-size: 11px;
+  line-height: 1;
+}
+</style>

package/src/components/Toolbar.vue

@@ -86,6 +86,8 @@ const emit = defineEmits<{
   (e: 'open-recents'): void;
   (e: 'update:density', v: Density): void;
   (e: 'toggle-inspector'): void /* koru:k1 */;
+  (e: 'open-theme'): void /* wiring:c1 — tema galerisi */;
+  (e: 'open-shortcut-settings'): void /* wiring:c2 */;
 }>();
 
 // Density toggle — the toolbar owns the persisted preference; the parent
@@ -219,13 +221,18 @@ const moreActions = computed<ContextAction[]>(() => {
         : t('toolbar.density.compact'),
     icon: '⇅',
   });
-  list.push(
-    props.viewMode === 'list'
-      ? { key: 'view-grid', label: t('toolbar.view.grid'), icon: '▦' }
-      : { key: 'view-list', label: t('toolbar.view.list'), icon: '☰' },
-  );
+  /* wiring:d2 — dar mod ⋯ menüsü: aktif olmayan İKİ görünüm de listelenir
+     (list/grid/gallery); eski tekli toggle üç modda eksik kalıyordu. */
+  if (props.viewMode !== 'list') list.push({ key: 'view-list', label: t('toolbar.view.list'), icon: '☰' });
+  if (props.viewMode !== 'grid') list.push({ key: 'view-grid', label: t('toolbar.view.grid'), icon: '▦' });
+  if (props.viewMode !== 'gallery') list.push({ key: 'view-gallery', label: t('toolbar.view.gallery'), icon: '▣' });
+  /* /wiring:d2 */
   /* koru:k1 — inspector toggle also reachable from the narrow overflow menu */
   list.push({ key: 'inspector', label: t('toolbar.inspector'), icon: 'ℹ' });
+  /* wiring:c1 — tema galerisi de dar modda ⋯ menüsünden açılır */
+  list.push({ key: 'theme', label: t('theme.menu'), icon: '🎨' });
+  list.push({ key: 'shortcut-settings', label: t('shortcuts.settings.menu'), icon: '⌨' }) /* wiring:c2 */;
+  list.push({ key: 'tour', label: t('tour.restart'), icon: '🎓' }); /* wiring:c4 */
   return list;
 });
 
@@ -251,9 +258,21 @@ function onMoreSelect(a: ContextAction) {
     case 'view-grid':
       emit('update:viewMode', 'grid');
       break;
+    case 'view-gallery' /* wiring:d2 */:
+      emit('update:viewMode', 'gallery');
+      break;
     case 'inspector' /* koru:k1 */:
       emit('toggle-inspector');
       break;
+    case 'theme' /* wiring:c1 */:
+      emit('open-theme');
+      break;
+    case 'shortcut-settings' /* wiring:c2 */:
+      emit('open-shortcut-settings');
+      break;
+    case 'tour' /* wiring:c4 — bubbles to the FileExplorer root listener */:
+      moreBtnEl.value?.dispatchEvent(new CustomEvent('fe:tour-restart', { bubbles: true }));
+      break;
     default:
       fire(a.key);
   }
@@ -331,7 +350,7 @@ function onMoreSelect(a: ContextAction) {
           class="fe-search__input"
           :placeholder="t('toolbar.search.placeholder')"
           :value="localSearch"
-          aria-label="Search"
+          :aria-label="t('toolbar.search') /* wiring:c4 — was hardcoded EN */"
           @input="onSearchInput"
         />
       </div>
@@ -340,17 +359,19 @@ function onMoreSelect(a: ContextAction) {
         type="button"
         class="fe-btn fe-btn--icon-only"
         :title="t('toolbar.upload')"
+        :aria-label="t('toolbar.upload') /* wiring:c4 */"
         @click="emit('upload')"
       >
-        <span class="fe-icon">⬆</span>
+        <span class="fe-icon" aria-hidden="true">⬆</span>
       </button>
       <button
         type="button"
         class="fe-btn fe-btn--icon-only"
         :title="t('toolbar.refresh')"
+        :aria-label="t('toolbar.refresh') /* wiring:c4 */"
         @click="emit('refresh')"
       >
-        <span class="fe-icon">↻</span>
+        <span class="fe-icon" aria-hidden="true">↻</span>
       </button>
     </div>
 
@@ -418,7 +439,34 @@ function onMoreSelect(a: ContextAction) {
       </svg>
     </button>
 
-    <div class="fe-toolbar__view" role="tablist" aria-label="View">
+    <!-- wiring:c1 — tema galerisi (palet ikonu) -->
+    <button
+      type="button"
+      class="fe-btn fe-btn--icon-only fe-toolbar__theme"
+      :title="t('theme.menu')"
+      :aria-label="t('theme.menu')"
+      @click="emit('open-theme')"
+    >
+      <svg
+        class="fe-ficon"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="1.8"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        aria-hidden="true"
+        focusable="false"
+      >
+        <path d="M12 3a9 9 0 1 0 0 18h1.4a2.1 2.1 0 0 0 1.5-3.6 2.1 2.1 0 0 1 1.5-3.6H19a2 2 0 0 0 2-2A9 9 0 0 0 12 3z" />
+        <circle cx="7.8" cy="10.2" r="1.15" fill="currentColor" stroke="none" />
+        <circle cx="11.6" cy="7.2" r="1.15" fill="currentColor" stroke="none" />
+        <circle cx="16" cy="8.6" r="1.15" fill="currentColor" stroke="none" />
+      </svg>
+    </button>
+    <!-- /wiring:c1 -->
+
+    <div class="fe-toolbar__view" role="tablist" :aria-label="t('toolbar.view_label') /* wiring:c4 — was hardcoded EN */">
       <button
         type="button"
         class="fe-btn fe-btn--icon-only"
@@ -426,9 +474,10 @@ function onMoreSelect(a: ContextAction) {
         role="tab"
         :aria-selected="viewMode === 'list'"
         :title="t('toolbar.view.list')"
+        :aria-label="t('toolbar.view.list') /* wiring:c4 */"
         @click="emit('update:viewMode', 'list')"
       >
-        <span class="fe-icon">☰</span>
+        <span class="fe-icon" aria-hidden="true">☰</span>
       </button>
       <button
         type="button"
@@ -437,10 +486,25 @@ function onMoreSelect(a: ContextAction) {
         role="tab"
         :aria-selected="viewMode === 'grid'"
         :title="t('toolbar.view.grid')"
+        :aria-label="t('toolbar.view.grid') /* wiring:c4 */"
         @click="emit('update:viewMode', 'grid')"
       >
-        <span class="fe-icon">▦</span>
+        <span class="fe-icon" aria-hidden="true">▦</span>
+      </button>
+      <!-- wiring:d2 — üçüncü görünüm: galeri -->
+      <button
+        type="button"
+        class="fe-btn fe-btn--icon-only"
+        :class="{ 'is-active': viewMode === 'gallery' }"
+        role="tab"
+        :aria-selected="viewMode === 'gallery'"
+        :title="t('toolbar.view.gallery')"
+        :aria-label="t('toolbar.view.gallery')"
+        @click="emit('update:viewMode', 'gallery')"
+      >
+        <span class="fe-icon" aria-hidden="true">▣</span>
       </button>
+      <!-- /wiring:d2 -->
     </div>
     </template>