@brftech/filex-core 0.31.0 → 0.33.0

package/src/components/CommandPalette.vue

@@ -16,7 +16,7 @@
  * bul:s3 additions:
  *   4. "Everywhere" group — ≥3-char queries also hit the global files-search
  *      endpoint (debounced 250ms, max 8 rows) via the `globalSearch` prop.
- *      Content matches get an "İçerikte" badge + a «»-highlighted snippet
+ *      Content matches get an "In content" badge + a «»-highlighted snippet
  *      rendered as pure text nodes (no innerHTML).
  *   5. Saved searches — localStorage-backed (`filex.saved-searches`, max 10);
  *      "save current query" command + per-row delete.
@@ -41,6 +41,15 @@ const props = defineProps<{
   globalSearch?: (q: string) => Promise<GlobalSearchHit[]>;
   /* wiring:d1 — false hides the split command (narrow embeds). */
   splitEnabled?: boolean;
+  /**
+   * surucu:d1 — the query this palette opens WITH.
+   *
+   * The drive shell's header field searches the folder you are in; ⌘K from
+   * inside it opens this palette carrying the same words, so "not in this
+   * folder — try everywhere" costs no retyping. Empty (the default) is the
+   * behaviour every other caller has had: a blank palette.
+   */
+  initialQuery?: string;
 }>();
 
 const emit = defineEmits<{
@@ -131,7 +140,7 @@ const commandItems = computed<PaletteItem[]>(() => {
   const defs: Array<{ command: string; label: string; icon: string; enabled: boolean }> = [
     { command: 'new-folder', label: t('toolbar.new_folder'), icon: '📁', enabled: props.canWrite !== false },
     { command: 'upload', label: t('toolbar.upload'), icon: '⬆', enabled: props.canWrite !== false },
-    { command: 'toggle-view', label: t('cmd.view_toggle'), icon: props.viewMode === 'list' ? '▦' : props.viewMode === 'grid' ? '▣' : '☰', enabled: true /* wiring:d2 — sıradaki mod ikonu (list→grid→galeri→list) */ },
+    { command: 'toggle-view', label: t('cmd.view_toggle'), icon: props.viewMode === 'list' ? '▦' : props.viewMode === 'grid' ? '▣' : '☰', enabled: true /* wiring:d2 — icon of the NEXT mode (list→grid→gallery→list) */ },
     { command: 'open-trash', label: t('cmd.trash'), icon: '🗑', enabled: true },
     { command: 'refresh', label: t('toolbar.refresh'), icon: '⟳', enabled: true },
     { command: 'go-up', label: t('toolbar.go_up'), icon: '↑', enabled: props.canGoUp !== false },
@@ -139,7 +148,7 @@ const commandItems = computed<PaletteItem[]>(() => {
     { command: 'open-theme', label: t('theme.menu'), icon: '🎨', enabled: true },
     { command: 'open-shortcut-settings', label: t('shortcuts.settings.menu'), icon: '⌨', enabled: true },
     { command: 'start-tour', label: t('tour.restart'), icon: '🎓', enabled: true },
-    /* wiring:d1 — sekme + split */
+    /* wiring:d1 — tabs + split */
     { command: 'tab-new', label: t('cmd.tab_new'), icon: '⧉', enabled: true },
     { command: 'split-toggle', label: t('cmd.split_toggle'), icon: '◫', enabled: props.splitEnabled !== false },
   ];
@@ -367,14 +376,21 @@ watch(
   () => props.open,
   (v) => {
     if (v) {
-      query.value = '';
+      // ⚠ Read at OPEN, not watched: a seed that kept overwriting the field
+      // would undo every keystroke of whoever is typing here now.
+      query.value = props.initialQuery ?? '';
       active.value = 0;
       /* bul:s3 — fresh session state for the new groups. */
       everywhere.value = [];
       everywhereLoading.value = false;
       savedSearches.value = readSavedSearches();
       document.addEventListener('keydown', onDocKeydown, true);
-      void nextTick(() => inputEl.value?.focus());
+      void nextTick(() => {
+        inputEl.value?.focus();
+        // Selected, not appended to: the seed is a starting point, and the
+        // next keystroke should be able to replace it outright.
+        inputEl.value?.select();
+      });
     } else {
       if (everywhereTimer) clearTimeout(everywhereTimer); /* bul:s3 */
       document.removeEventListener('keydown', onDocKeydown, true);

package/src/components/ConnectionsPanel.vue

@@ -40,6 +40,7 @@ import S3KeysPanel from './S3KeysPanel.vue';
 import SSHKeysPanel from './SSHKeysPanel.vue';
 import NFSExportsPanel from './NFSExportsPanel.vue';
 import TokensPanel from './TokensPanel.vue';
+import { resolveLocale } from '../locales/resolve';
 
 const props = defineProps<{
   config: ExplorerConfig;
@@ -56,7 +57,7 @@ const emit = defineEmits<{
   (e: 'error', err: { message: string }): void;
 }>();
 
-const locale = computed<LocaleCode>(() => props.config.locale ?? 'tr');
+const locale = computed<LocaleCode>(() => resolveLocale(props.config.locale));
 const { t } = useLocale(locale);
 
 // Destructured on purpose: Vue only auto-unwraps refs that are top-level in

package/src/components/E2eRecoveryUnlockModal.vue

@@ -19,6 +19,7 @@ import { computed, ref, watch } from 'vue';
 import type { LocaleCode } from '../types/ExplorerConfig';
 import { useLocale } from '../composables/useLocale';
 import { parseRecoveryKey } from '../lib/e2ecrypto';
+import type { EscrowAvailability } from '../lib/e2ecrypto';
 import Modal from '../modals/Modal.vue';
 
 const props = defineProps<{
@@ -26,9 +27,15 @@ const props = defineProps<{
   locale: LocaleCode;
   /** The folder has a user recovery key slot (v2 markers created since 0.31). */
   hasRecovery: boolean;
-  /** The folder has an escrow slot AND this installation has escrow enabled. */
-  hasEscrow: boolean;
-  /** Short id of the escrow key the folder was sealed to. */
+  /**
+   * Whether the escrow door applies to THIS folder — see escrowAvailability.
+   * 'predates' and 'other-key' are not "no escrow tab"; they are two
+   * different facts the dialog has to state, because an admin who knows the
+   * installation has escrow reads a missing tab as a bug and tries the key
+   * anyway.
+   */
+  escrowState: EscrowAvailability;
+  /** Short id of the escrow key THIS FOLDER was sealed to, when it has one. */
   escrowKid?: string | null;
   busy?: boolean;
   /** Set by the parent after a failed attempt. */
@@ -41,6 +48,16 @@ const emit = defineEmits<{
 }>();
 
 const { t } = useLocale(() => props.locale);
+/** The escrow tab is offered only when the key can actually open this
+ *  folder. Every other state is explained in words instead. */
+const hasEscrow = computed(() => props.escrowState === 'available');
+/** The installation has an escrow key that does NOT apply here. Saying so
+ *  is the whole point: silence reads as "not enabled". */
+const escrowUnavailableReason = computed(() => {
+  if (props.escrowState === 'predates') return t('e2e.recover.escrow_predates');
+  if (props.escrowState === 'other-key') return t('e2e.recover.escrow_other_key');
+  return null;
+});
 const mode = ref<'recovery' | 'escrow'>('recovery');
 const recoveryValue = ref('');
 const escrowValue = ref('');
@@ -60,7 +77,7 @@ watch(
 
 /** A folder with neither slot is a pre-0.31 folder: the password is the
  *  only way in, and saying so is more useful than an empty dialog. */
-const nothingAvailable = computed(() => !props.hasRecovery && !props.hasEscrow);
+const nothingAvailable = computed(() => !props.hasRecovery && !hasEscrow.value);
 
 const shownError = computed(() => localErr.value || props.error || null);
 
@@ -149,6 +166,14 @@ function submit() {
         </form>
       </template>
 
+      <!-- ⚠ Shown whenever the installation has an escrow key that cannot
+           open THIS folder. A folder created before escrow was adopted must
+           not merely lack a tab; it must say why, or the absence reads as a
+           bug and the operator burns an afternoon on it. -->
+      <p v-if="escrowUnavailableReason" class="fe-e2e-recover__note">
+        {{ escrowUnavailableReason }}
+      </p>
+
       <p v-if="shownError" class="fe-form__error">{{ shownError }}</p>
     </div>
     <template #actions>

package/src/components/FilterBar.vue

@@ -0,0 +1,244 @@
+<script setup lang="ts">
+/**
+ * FilterBar — surucu:d1, the chip row under the breadcrumb in the `drive`
+ * profile.
+ *
+ * Three chips: Type · Modified · Size. Each opens a small single-choice
+ * popover; a chip with a choice made carries that choice as its label, so the
+ * row says what is being filtered without opening anything.
+ *
+ * ⚠ THREE, not the four the mockup draws. There is no **People** chip because
+ * there is nothing behind one: a listing row carries no owner
+ * (`projectFileNodes` emits id/path/basename/type/extension/size/mime_type/
+ * storage/etag/perm/thumb_url/last_modified and nothing else), `nodes.owner_id`
+ * is quota bookkeeping that is nil for everything a sync discovered, and the
+ * listing endpoint reads no owner parameter. A People chip would be a control
+ * that opens, offers names, and changes nothing — see docs and the report on
+ * this branch; the advanced-search round owns that question.
+ *
+ * ⚠ Popovers are TELEPORTED to <body>, like ContextMenu, and positioned
+ * `fixed`. An absolutely-positioned panel inside the explorer is clipped by
+ * `.fe__body`'s own scroll container, which is how a menu ends up half visible
+ * with its own scrollbar.
+ *
+ * ⚠ No `<style>` block. Package CSS lives in `styles/base.css` — a scoped block
+ * compiles to `.cls[data-v-HASH]` and the hash does not match in the
+ * web-component build, so the rules silently stop applying in every embed.
+ */
+import { computed, nextTick, onBeforeUnmount, onMounted, ref } from 'vue';
+import { useLocale } from '../composables/useLocale';
+import type { LocaleCode, ThemeMode } from '../types/ExplorerConfig';
+import type { DriveFilters, ModifiedFilter, SizeFilter, TypeFilter } from '../lib/fileFilters';
+import { activeFilterCount } from '../lib/fileFilters';
+
+const props = defineProps<{
+  value: DriveFilters;
+  locale: LocaleCode;
+  /** Resolved theme — the teleported popover leaves the `.fe` variable scope. */
+  theme?: ThemeMode;
+  /** Rows currently shown / rows the folder holds, for the count chip. */
+  shown?: number;
+  total?: number;
+}>();
+
+const emit = defineEmits<{ (e: 'update:value', v: DriveFilters): void }>();
+
+const { t } = useLocale(() => props.locale);
+
+type Group = 'type' | 'modified' | 'size';
+
+const TYPE_OPTIONS: TypeFilter[] = [
+  'any', 'folder', 'document', 'spreadsheet', 'presentation', 'pdf',
+  'image', 'video', 'audio', 'archive', 'code',
+];
+const MODIFIED_OPTIONS: ModifiedFilter[] = ['any', 'today', '7d', '30d', 'year'];
+const SIZE_OPTIONS: SizeFilter[] = ['any', 'lt1', '1to10', '10to100', 'gt100'];
+
+function optionsFor(g: Group): string[] {
+  if (g === 'type') return TYPE_OPTIONS;
+  if (g === 'modified') return MODIFIED_OPTIONS;
+  return SIZE_OPTIONS;
+}
+
+function optionLabel(g: Group, v: string): string {
+  return t(`filter.${g}.${v}`);
+}
+
+/** The chip's own label: the group name until a choice is made, then the
+ *  choice — a row of three identical words tells the reader nothing. */
+function chipLabel(g: Group): string {
+  const v = props.value[g];
+  return v === 'any' ? t(`filter.${g}`) : optionLabel(g, v);
+}
+
+const activeCount = computed(() => activeFilterCount(props.value));
+
+// ── the popover ──────────────────────────────────────────────────────
+const openGroup = ref<Group | null>(null);
+const pos = ref({ x: 0, y: 0 });
+const panelEl = ref<HTMLElement | null>(null);
+const chipEls = ref<Record<string, HTMLElement | null>>({});
+
+function setChipEl(g: Group, el: unknown) {
+  chipEls.value[g] = (el as HTMLElement | null) ?? null;
+}
+
+// The open popover's data, precomputed. Reading `value[openGroup]` straight
+// from the template would lean on template narrowing across a Teleport, and
+// `vue-tsc --noEmit` is part of this package's build.
+const popOptions = computed<string[]>(() => (openGroup.value ? optionsFor(openGroup.value) : []));
+const popTitle = computed(() => (openGroup.value ? t(`filter.${openGroup.value}`) : ''));
+function popChecked(opt: string): boolean {
+  return !!openGroup.value && props.value[openGroup.value] === opt;
+}
+function popLabel(opt: string): string {
+  return openGroup.value ? optionLabel(openGroup.value, opt) : opt;
+}
+function popPick(opt: string): void {
+  if (openGroup.value) pick(openGroup.value, opt);
+}
+
+async function toggle(g: Group) {
+  if (openGroup.value === g) {
+    close();
+    return;
+  }
+  const r = chipEls.value[g]?.getBoundingClientRect();
+  pos.value = { x: r ? r.left : 8, y: r ? r.bottom + 6 : 8 };
+  openGroup.value = g;
+  await nextTick();
+  // Keep it on screen: a chip near the right edge would otherwise open a panel
+  // that runs off it, and the row is right beside the info panel.
+  const panel = panelEl.value;
+  if (panel) {
+    const box = panel.getBoundingClientRect();
+    if (box.right > window.innerWidth - 8) {
+      pos.value = { ...pos.value, x: Math.max(8, window.innerWidth - 8 - box.width) };
+    }
+    if (box.bottom > window.innerHeight - 8) {
+      const r2 = chipEls.value[g]?.getBoundingClientRect();
+      pos.value = { ...pos.value, y: Math.max(8, (r2 ? r2.top : 0) - box.height - 6) };
+    }
+    panel.querySelector<HTMLElement>('[data-checked="true"]')?.focus();
+  }
+}
+
+function close(restoreFocus = false) {
+  const g = openGroup.value;
+  openGroup.value = null;
+  if (restoreFocus && g) chipEls.value[g]?.focus();
+}
+
+function pick(g: Group, v: string) {
+  emit('update:value', { ...props.value, [g]: v } as DriveFilters);
+  close(true);
+}
+
+function clearAll() {
+  emit('update:value', { type: 'any', modified: 'any', size: 'any' });
+}
+
+function onDocPointer(ev: PointerEvent) {
+  if (!openGroup.value) return;
+  const el = ev.target as Node;
+  if (panelEl.value?.contains(el)) return;
+  if (Object.values(chipEls.value).some((c) => c?.contains(el))) return;
+  close();
+}
+
+function onKey(ev: KeyboardEvent) {
+  if (ev.key === 'Escape' && openGroup.value) {
+    ev.stopPropagation();
+    close(true);
+  }
+}
+
+onMounted(() => {
+  document.addEventListener('pointerdown', onDocPointer, true);
+  document.addEventListener('keydown', onKey, true);
+});
+onBeforeUnmount(() => {
+  document.removeEventListener('pointerdown', onDocPointer, true);
+  document.removeEventListener('keydown', onKey, true);
+});
+</script>
+
+<template>
+  <div class="fe-filterbar" role="group" :aria-label="t('filter.aria')" data-testid="filterbar">
+    <button
+      v-for="g in (['type', 'modified', 'size'] as Group[])"
+      :key="g"
+      :ref="(el) => setChipEl(g, el)"
+      type="button"
+      class="fe-filterbar__chip"
+      :class="{ 'is-set': value[g] !== 'any', 'is-open': openGroup === g }"
+      :aria-expanded="openGroup === g"
+      aria-haspopup="listbox"
+      :data-testid="`filter-${g}`"
+      @click="toggle(g)"
+    >
+      <span class="fe-filterbar__label">{{ chipLabel(g) }}</span>
+      <svg
+        class="fe-ficon fe-filterbar__caret"
+        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="M7 10l5 5 5-5" />
+      </svg>
+    </button>
+
+    <button
+      v-if="activeCount > 0"
+      type="button"
+      class="fe-filterbar__clear"
+      data-testid="filter-clear"
+      @click="clearAll"
+    >
+      {{ t('filter.clear') }}
+    </button>
+
+    <span
+      v-if="activeCount > 0 && typeof shown === 'number' && typeof total === 'number'"
+      class="fe-filterbar__count"
+      role="status"
+      data-testid="filter-count"
+      >{{ t('filter.count', { shown: String(shown), total: String(total) }) }}</span
+    >
+
+    <Teleport to="body">
+      <div
+        v-if="openGroup"
+        ref="panelEl"
+        class="fe-filterpop"
+        :class="{
+          'fe--theme-light': theme === 'light',
+          'fe--theme-dark': theme === 'dark',
+        }"
+        role="listbox"
+        :aria-label="popTitle"
+        :style="{ left: pos.x + 'px', top: pos.y + 'px' }"
+      >
+        <button
+          v-for="opt in popOptions"
+          :key="opt"
+          type="button"
+          class="fe-filterpop__item"
+          role="option"
+          :aria-selected="popChecked(opt)"
+          :data-checked="popChecked(opt) ? 'true' : 'false'"
+          :data-testid="`filter-opt-${opt}`"
+          @click="popPick(opt)"
+        >
+          <span class="fe-filterpop__tick" aria-hidden="true">{{ popChecked(opt) ? '✓' : '' }}</span>
+          <span>{{ popLabel(opt) }}</span>
+        </button>
+      </div>
+    </Teleport>
+  </div>
+</template>

package/src/components/GalleryView.vue

@@ -38,6 +38,15 @@ const props = defineProps<{
    * own screenshots show — had a view they could not fill.
    */
   starredIds?: Set<number>;
+  /**
+   * Offer the star affordance at all. Follows the Starred view: when the panel
+   * leaves that view out — a shared app token has no single person behind it,
+   * so "your starred files" is one list shown to strangers — offering to star
+   * something is offering to write into that same shared list. Owner's call,
+   * 2026-09-05, verbatim (translated from Turkish): "if the starred place is
+   * not visible, then star/unstar should not be visible either".
+   */
+  starEnabled?: boolean;
   apiBase?: string;
   authHeaders?: () => Record<string, string> | Promise<Record<string, string>>;
   authCredentials?: RequestCredentials;
@@ -61,6 +70,7 @@ function thumbOf(n: FileNode): string | null {
 /** A card carries a star when the host wired the API and the node is a file
  *  with a server id — the same rule the list row uses. */
 function canStar(n: FileNode): boolean {
+  if (props.starEnabled === false) return false;
   return props.apiBase !== undefined && typeof n.id === 'number' && n.type === 'file';
 }
 
@@ -149,7 +159,7 @@ function parentDir(path: string): string {
 function specialEmojiFor(n: FileNode): string | null {
   if (n.basename === '.trash') return '🗑';
   if (n.mime_type === 'inode/storage') return '💾';
-  if (n.type === 'dir' && n.e2e === true) return '🔒'; /* wiring:e2 — şifreli klasör rozeti */
+  if (n.type === 'dir' && n.e2e === true) return '🔒'; /* wiring:e2 — encrypted-folder badge */
   return null;
 }
 
@@ -191,6 +201,7 @@ function metaFor(n: FileNode): string {
       role="option"
       :aria-selected="isSelected(n) ? 'true' : 'false'"
       :aria-label="nodeDisplayName(n)"
+      :data-fe-path="n.path /* wiring:d1 - middle-click new-tab delegation */"
       draggable="true"
       @click="onClick(n, $event)"
       @dblclick="onDbl(n)"

package/src/components/GridView.vue

@@ -2,7 +2,7 @@
 /**
  * GridView — card grid. Thumbnails preferred, fall back to icon.
  */
-import { ref } from 'vue'; /* wiring:c4 */
+import { computed, ref } from 'vue'; /* wiring:c4 */
 import type { FileNode } from '../types/FileNode';
 import { hasInternalDrag } from '../lib/dragOut';
 import type { LocaleCode } from '../types/ExplorerConfig';
@@ -36,9 +36,30 @@ const props = defineProps<{
    * own screenshots show — had a view they could not fill.
    */
   starredIds?: Set<number>;
+  /**
+   * Offer the star affordance at all. Follows the Starred view: when the panel
+   * leaves that view out — a shared app token has no single person behind it,
+   * so "your starred files" is one list shown to strangers — offering to star
+   * something is offering to write into that same shared list. Owner's call,
+   * 2026-09-05, verbatim (translated from Turkish): "if the starred place is
+   * not visible, then star/unstar should not be visible either".
+   */
+  starEnabled?: boolean;
   apiBase?: string;
   authHeaders?: () => Record<string, string> | Promise<Record<string, string>>;
   authCredentials?: RequestCredentials;
+  /**
+   * surucu:d1 — draw "Folders" and "Files" as labelled sections
+   * (`uiProfile: 'drive'`). Absent/false renders the flat grid unchanged, down
+   * to the DOM: the two headings are the only extra nodes, and without this
+   * prop none are emitted.
+   *
+   * The rows are re-ordered HERE (directories first, stable within each group)
+   * rather than trusted to arrive that way — the listing endpoint promises no
+   * grouping, and a "Folders" heading with a spreadsheet under it is worse
+   * than no heading at all.
+   */
+  sections?: boolean;
 }>();
 
 const emit = defineEmits<{
@@ -50,6 +71,23 @@ const emit = defineEmits<{
   (e: 'star-change', node: FileNode, value: boolean): void;
 }>();
 
+/* surucu:d1 — grouped order + the two headings. `sort` is stable, so within
+ * folders and within files the listing's own order survives untouched. */
+const ordered = computed<FileNode[]>(() =>
+  props.sections
+    ? [...props.files].sort((a, b) => (a.type === 'dir' ? 0 : 1) - (b.type === 'dir' ? 0 : 1))
+    : props.files,
+);
+const firstDirPath = computed(() => ordered.value.find((f) => f.type === 'dir')?.path ?? null);
+const firstFilePath = computed(() => ordered.value.find((f) => f.type !== 'dir')?.path ?? null);
+
+function headingBefore(n: FileNode): string | null {
+  if (!props.sections) return null;
+  if (n.path === firstDirPath.value) return t('drive.section.folders');
+  if (n.path === firstFilePath.value) return t('drive.section.files');
+  return null;
+}
+
 const { t, formatSize, nodeDisplayName } = useLocale(() => props.locale);
 
 // Prefer the authenticated resolver when the host wired one; otherwise fall
@@ -61,6 +99,7 @@ function thumbOf(n: FileNode): string | null {
 /** A card carries a star when the host wired the API and the node is a file
  *  with a server id — the same rule the list row uses. */
 function canStar(n: FileNode): boolean {
+  if (props.starEnabled === false) return false;
   return props.apiBase !== undefined && typeof n.id === 'number' && n.type === 'file';
 }
 
@@ -158,7 +197,7 @@ function keepGlyph(b: 'kept' | 'syncing' | 'cloud' | 'partial'): string {
 function specialEmojiFor(n: FileNode): string | null {
   if (n.basename === '.trash') return '🗑';
   if (n.mime_type === 'inode/storage') return '💾';
-  if (n.type === 'dir' && n.e2e === true) return '🔒'; /* wiring:e2 — şifreli klasör rozeti */
+  if (n.type === 'dir' && n.e2e === true) return '🔒'; /* wiring:e2 — encrypted-folder badge */
   return null;
 }
 
@@ -189,9 +228,12 @@ function snippetTitle(snippet: string): string {
     :aria-label="t('grid.aria')"
     :aria-busy="loading ? 'true' : undefined"
   >
+    <template v-for="n in ordered" :key="n.path">
+    <!-- surucu:d1 — the section label: a grid item spanning every column. The
+         cards keep `role="option"`; the heading is aria-hidden, and the group
+         it names is already in each card's own label. -->
+    <p v-if="headingBefore(n)" class="fe-grid__heading" aria-hidden="true">{{ headingBefore(n) }}</p>
     <div
-      v-for="n in files"
-      :key="n.path"
       class="fe-grid__card"
       :class="{
         'is-selected': isSelected(n),
@@ -204,7 +246,7 @@ function snippetTitle(snippet: string): string {
       role="option"
       :aria-selected="isSelected(n) ? 'true' : 'false'"
       :aria-label="nodeDisplayName(n) /* wiring:c4 */"
-      :data-fe-path="n.path /* wiring:d1 — orta-tık yeni sekme delegasyonu */"
+      :data-fe-path="n.path /* wiring:d1 — middle-click open-in-new-tab delegation */"
       draggable="true"
       @click="onClick(n, $event)"
       @dblclick="onDbl(n)"
@@ -279,6 +321,7 @@ function snippetTitle(snippet: string): string {
         </template>
       </div>
     </div>
+    </template>
     <div v-if="!loading && files.length === 0" class="fe-grid__empty">
       {{ t('empty.folder') }}
     </div>