@brftech/filex-core 0.1.84 → 0.3.0

package/src/FileExplorer.vue

@@ -24,7 +24,7 @@ import type {
   Capabilities,
 } from './types/FileNode';
 import { isExternalUsable } from './types/FileNode';
-import { useFileApi } from './composables/useFileApi';
+import { useFileApi, type GlobalSearchHit } from './composables/useFileApi';
 import { useUploadChunked, type UploadJob } from './composables/useUploadChunked';
 import { useSelection } from './composables/useSelection';
 import { useKeyboardShortcuts } from './composables/useKeyboardShortcuts';
@@ -443,6 +443,40 @@ const ctxRef = ref<InstanceType<typeof ContextMenu> | null>(null);
 const rootEl = ref<HTMLElement | null>(null);
 const toolbarRef = ref<InstanceType<typeof Toolbar> | null>(null);
 
+/* bag:b4 — narrow/embed mini mode.
+ * isNarrow: container width < 560px (ResizeObserver on the .fe root, so it
+ * tracks the EMBED container, not the viewport) → root gets `fe--narrow`,
+ * the toolbar collapses and the upload FAB appears.
+ * isCoarse: touch-first device → context menus render as a bottom sheet. */
+const isNarrow = ref(false);
+const isCoarse = ref(false);
+let narrowRO: ResizeObserver | undefined;
+let coarseMq: MediaQueryList | undefined;
+function syncCoarsePointer(e?: MediaQueryListEvent | MediaQueryList) {
+  isCoarse.value = !!(e && 'matches' in e && e.matches);
+}
+onMounted(() => {
+  if (typeof ResizeObserver !== 'undefined' && rootEl.value) {
+    narrowRO = new ResizeObserver((entries) => {
+      const w = entries[0]?.contentRect?.width ?? rootEl.value?.clientWidth ?? 0;
+      isNarrow.value = w > 0 && w < 560;
+    });
+    narrowRO.observe(rootEl.value);
+  }
+  if (typeof window !== 'undefined' && window.matchMedia) {
+    coarseMq = window.matchMedia('(pointer: coarse)');
+    syncCoarsePointer(coarseMq);
+    coarseMq.addEventListener?.('change', syncCoarsePointer);
+  }
+});
+onBeforeUnmount(() => {
+  narrowRO?.disconnect();
+  narrowRO = undefined;
+  coarseMq?.removeEventListener?.('change', syncCoarsePointer);
+  coarseMq = undefined;
+});
+/* /bag:b4 */
+
 // Toast (tiny, no lib). Evolved into a snackbar: plain messages keep the old
 // 2.5s auto-hide; messages carrying an action ("Geri Al") stay 8s and can be
 // dismissed by click or Esc.
@@ -924,6 +958,50 @@ const showPalette = ref(false);
 const showShortcutsHelp = ref(false);
 /* /cila:c wiring */
 
+/* bul:s3 — palette "everywhere" search + open-hit navigation */
+
+// Debounce/min-chars live in the palette; this is just the API call.
+function paletteGlobalSearch(q: string): Promise<GlobalSearchHit[]> {
+  return api.globalSearch(q, { limit: 8, scope: 'all' });
+}
+
+/**
+ * Open a global-search hit: navigate to the file's folder, then select +
+ * preview it through the existing openNode mechanics. Hits come back as raw
+ * node rows (in-storage relative `path`, numeric `storage_id`), so the
+ * storage segment for multi-storage mode is resolved best-effort: an
+ * explicit name on the hit (future backends) > the only configured storage
+ * > the storage currently open. A wrong guess lands on the existing
+ * "folder not found" state, which is already a graceful dead-end.
+ */
+async function openSearchHit(hit: GlobalSearchHit) {
+  const rel = String(hit.path ?? '').replace(/^\/+|\/+$/g, '');
+  if (!rel) return;
+  const isDir = hit.type === 'dir';
+  const slash = rel.lastIndexOf('/');
+  const targetRel = isDir ? rel : slash === -1 ? '' : rel.slice(0, slash);
+  let target = targetRel;
+  if (multiStorageRoot.value) {
+    const configured = props.config.storages ?? [];
+    const storageName =
+      (typeof hit.storage === 'string' && hit.storage) ||
+      (typeof hit.storage_name === 'string' && hit.storage_name) ||
+      (configured.length === 1 ? configured[0].name : '') ||
+      adapter.value;
+    if (!storageName) return;
+    target = targetRel ? `${storageName}/${targetRel}` : storageName;
+  }
+  await load(target);
+  if (isDir) return;
+  const name = String(hit.name ?? rel.slice(slash + 1));
+  const node = files.value.find((f) => f.type === 'file' && f.basename === name);
+  if (node) {
+    selection.click(node.path);
+    openNode(node);
+  }
+}
+/* /bul:s3 */
+
 useKeyboardShortcuts(rootEl, {
   onDelete: () => {
     if (!selection.isEmpty.value) showDelete.value = true;
@@ -1920,6 +1998,7 @@ function buildAuthHeaders(extra: Record<string, string> = {}) {
       'fe--theme-dark': config.theme === 'dark',
       'fe--is-dragover': dragOver,
       'fe--density-compact': density === 'compact' /* cila:a density */,
+      'fe--narrow': isNarrow /* bag:b4 */,
     }"
     tabindex="-1"
     @dragenter="onDragEnter"
@@ -1941,6 +2020,8 @@ function buildAuthHeaders(extra: Record<string, string> = {}) {
       :at-virtual-root="atVirtualRoot"
       :can-write="canWriteHere"
       :locale="locale"
+      :narrow="isNarrow /* bag:b4 */"
+      :theme="config.theme || 'auto' /* bag:b4 */"
       @update:view-mode="viewMode = $event"
       @update:search-query="searchQuery = $event"
       @update:density="density = $event"
@@ -2186,10 +2267,35 @@ function buildAuthHeaders(extra: Record<string, string> = {}) {
       @dismiss="(id) => pendingOps.dismiss(id)"
     />
 
+    <!-- bag:b4 — narrow-mode upload FAB (hidden in trash / read-only /
+         virtual root; PendingOpsTray+UploadProgress shift up via CSS). -->
+    <button
+      v-if="isNarrow && emptyCanUpload"
+      type="button"
+      class="fe-fab"
+      :title="t('toolbar.upload')"
+      :aria-label="t('toolbar.upload')"
+      @click="triggerUpload"
+    >
+      <svg
+        class="fe-ficon"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2.2"
+        stroke-linecap="round"
+        aria-hidden="true"
+        focusable="false"
+      >
+        <path d="M12 5v14M5 12h14" />
+      </svg>
+    </button>
+
     <ContextMenu
       ref="ctxRef"
       :locale="locale"
       :theme="config.theme || 'auto'"
+      :sheet="isCoarse /* bag:b4 */"
       :actions="contextActions"
       @select="onContextAction"
     />
@@ -2326,7 +2432,9 @@ function buildAuthHeaders(extra: Record<string, string> = {}) {
       :view-mode="viewMode"
       :can-write="canWriteHere && !atVirtualRoot && !trashActive"
       :can-go-up="canGoUp"
+      :global-search="paletteGlobalSearch"
       @close="showPalette = false"
+      @open-hit="openSearchHit"
       @open-node="openNode"
       @navigate="(p: string) => load(p)"
       @new-folder="showNewFolder = true"

package/src/components/CommandPalette.vue

@@ -12,10 +12,20 @@
  * Keyboard: ↑/↓ move, Enter selects, Esc closes; the listener sits on the
  * document in CAPTURE phase so it wins over useKeyboardShortcuts' window
  * handler (otherwise Enter would also fire the explorer's own onOpen).
+ *
+ * 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
+ *      rendered as pure text nodes (no innerHTML).
+ *   5. Saved searches — localStorage-backed (`filex.saved-searches`, max 10);
+ *      "save current query" command + per-row delete.
  */
 import { computed, nextTick, onBeforeUnmount, ref, watch } from 'vue';
 import type { LocaleCode } from '../types/ExplorerConfig';
 import type { FileNode, ViewMode } from '../types/FileNode';
+import type { GlobalSearchHit } from '../composables/useFileApi';
+import { matchedInContent, snippetSegments } from '../lib/snippet';
 import { useLocale } from '../composables/useLocale';
 
 const props = defineProps<{
@@ -27,6 +37,8 @@ const props = defineProps<{
   canWrite?: boolean;
   /** Gates the "up one level" command. */
   canGoUp?: boolean;
+  /* bul:s3 — global search callback; absent = older host, group hidden. */
+  globalSearch?: (q: string) => Promise<GlobalSearchHit[]>;
 }>();
 
 const emit = defineEmits<{
@@ -39,6 +51,8 @@ const emit = defineEmits<{
   (e: 'open-trash'): void;
   (e: 'refresh'): void;
   (e: 'go-up'): void;
+  /* bul:s3 — an "everywhere" hit was chosen. */
+  (e: 'open-hit', hit: GlobalSearchHit): void;
 }>();
 
 const { t, nodeDisplayName } = useLocale(() => props.locale);
@@ -51,7 +65,15 @@ const listEl = ref<HTMLElement | null>(null);
 type PaletteItem =
   | { kind: 'goto'; id: string; label: string; icon: string; path: string }
   | { kind: 'file'; id: string; label: string; icon: string; node: FileNode }
-  | { kind: 'command'; id: string; label: string; icon: string; command: string };
+  | { kind: 'command'; id: string; label: string; icon: string; command: string }
+  /* bul:s3 — everywhere hit / saved search / save-current-query. */
+  | { kind: 'hit'; id: string; label: string; icon: string; hit: GlobalSearchHit; crumb: string; inContent: boolean; snippet: string }
+  | { kind: 'saved'; id: string; label: string; icon: string; query: string }
+  | { kind: 'save'; id: string; label: string; icon: string; query: string };
+
+/* bul:s3 — narrowed aliases so the template doesn't need kind-guards. */
+type HitItem = Extract<PaletteItem, { kind: 'hit' }>;
+type SavedGroupItem = Extract<PaletteItem, { kind: 'saved' | 'save' }>;
 
 /**
  * Scored includes: -1 = no match; otherwise earlier + prefix matches rank
@@ -110,16 +132,141 @@ const commandItems = computed<PaletteItem[]>(() => {
     .map((d) => ({ kind: 'command' as const, id: `cmd:${d.command}`, label: d.label, icon: d.icon, command: d.command }));
 });
 
+/* === bul:s3 — "everywhere" global search ================================ */
+
+const EVERYWHERE_MIN_CHARS = 3;
+const EVERYWHERE_LIMIT = 8;
+const EVERYWHERE_DEBOUNCE_MS = 250;
+
+const everywhere = ref<GlobalSearchHit[]>([]);
+const everywhereLoading = ref(false);
+let everywhereTimer: ReturnType<typeof setTimeout> | undefined;
+let everywhereSeq = 0;
+
+function scheduleEverywhere(q: string) {
+  if (everywhereTimer) clearTimeout(everywhereTimer);
+  const fn = props.globalSearch;
+  if (!fn || q.length < EVERYWHERE_MIN_CHARS) {
+    everywhere.value = [];
+    everywhereLoading.value = false;
+    return;
+  }
+  everywhereLoading.value = true;
+  everywhereTimer = setTimeout(async () => {
+    const seq = ++everywhereSeq;
+    try {
+      const hits = await fn(q);
+      if (seq !== everywhereSeq) return; // stale response — a newer query won
+      everywhere.value = Array.isArray(hits) ? hits.slice(0, EVERYWHERE_LIMIT) : [];
+    } catch {
+      if (seq === everywhereSeq) everywhere.value = [];
+    } finally {
+      if (seq === everywhereSeq) everywhereLoading.value = false;
+    }
+  }, EVERYWHERE_DEBOUNCE_MS);
+}
+
+/** Parent-path crumb for a hit row (storage label when the hit carries one). */
+function hitCrumb(h: GlobalSearchHit): string {
+  const rel = String(h.path ?? '').replace(/^\/+|\/+$/g, '');
+  const slash = rel.lastIndexOf('/');
+  const parent = slash === -1 ? '' : rel.slice(0, slash);
+  const storage =
+    (typeof h.storage === 'string' && h.storage) ||
+    (typeof h.storage_name === 'string' && h.storage_name) ||
+    '';
+  if (storage && parent) return `${storage}/${parent}`;
+  if (storage) return storage;
+  return parent || '/';
+}
+
+const hitItems = computed<HitItem[]>(() =>
+  everywhere.value.map((h) => ({
+    kind: 'hit' as const,
+    id: `hit:${h.storage_id ?? ''}:${h.path ?? ''}:${h.id ?? ''}`,
+    label: String(h.name ?? h.path ?? ''),
+    icon: h.type === 'dir' ? '📁' : '📄',
+    hit: h,
+    crumb: hitCrumb(h),
+    inContent: matchedInContent(h.matched),
+    snippet: typeof h.snippet === 'string' ? h.snippet : '',
+  })),
+);
+
+/* === bul:s3 — saved searches (localStorage) ============================= */
+
+const SAVED_LS_KEY = 'filex.saved-searches';
+const SAVED_MAX = 10;
+
+const savedSearches = ref<string[]>([]);
+
+function readSavedSearches(): string[] {
+  try {
+    const raw = localStorage.getItem(SAVED_LS_KEY);
+    if (!raw) return [];
+    const parsed: unknown = JSON.parse(raw);
+    if (!Array.isArray(parsed)) return [];
+    return parsed.filter((x): x is string => typeof x === 'string' && x.trim() !== '').slice(0, SAVED_MAX);
+  } catch {
+    return [];
+  }
+}
+
+function writeSavedSearches(list: string[]) {
+  savedSearches.value = list.slice(0, SAVED_MAX);
+  try {
+    localStorage.setItem(SAVED_LS_KEY, JSON.stringify(savedSearches.value));
+  } catch {
+    /* private mode / quota — the in-memory list still works this session */
+  }
+}
+
+function saveSearch(q: string) {
+  const clean = q.trim();
+  if (!clean) return;
+  const list = savedSearches.value.filter((s) => s !== clean);
+  list.unshift(clean); // newest first; cap enforced by writeSavedSearches
+  writeSavedSearches(list);
+}
+
+function removeSavedSearch(q: string) {
+  writeSavedSearches(savedSearches.value.filter((s) => s !== q));
+  if (active.value >= flat.value.length) active.value = Math.max(0, flat.value.length - 1);
+}
+
+const savedItems = computed<SavedGroupItem[]>(() => {
+  const q = query.value.trim();
+  const out: SavedGroupItem[] = [];
+  // "Save this query" command — only when there IS a query and it isn't saved yet.
+  if (q && !savedSearches.value.includes(q)) {
+    out.push({ kind: 'save', id: `save:${q}`, label: `${t('palette.save')}: ${q}`, icon: '💾', query: q });
+  }
+  const scored = savedSearches.value
+    .map((s) => ({ s, sc: matchScore(s, q) }))
+    .filter((r) => r.sc >= 0 || !q);
+  for (const r of scored) {
+    out.push({ kind: 'saved', id: `saved:${r.s}`, label: r.s, icon: '🔖', query: r.s });
+  }
+  return out;
+});
+
+/* ======================================================================== */
+
 const flat = computed<PaletteItem[]>(() => [
   ...gotoItems.value,
   ...fileItems.value,
+  ...hitItems.value,
+  ...savedItems.value,
   ...commandItems.value,
 ]);
 const fileOffset = computed(() => gotoItems.value.length);
-const cmdOffset = computed(() => gotoItems.value.length + fileItems.value.length);
+const hitOffset = computed(() => fileOffset.value + fileItems.value.length);
+const savedOffset = computed(() => hitOffset.value + hitItems.value.length);
+const cmdOffset = computed(() => savedOffset.value + savedItems.value.length);
 
-watch(query, () => {
+watch(query, (q) => {
   active.value = 0;
+  scheduleEverywhere(q.trim()); /* bul:s3 */
 });
 
 function move(delta: number) {
@@ -134,7 +281,23 @@ function move(delta: number) {
 function choose(item?: PaletteItem) {
   const it = item ?? flat.value[active.value];
   if (!it) return;
+  /* bul:s3 — saved-search rows keep the palette OPEN: picking one re-runs
+   * the palette with that query; saving just persists it. */
+  if (it.kind === 'saved') {
+    query.value = it.query;
+    void nextTick(() => inputEl.value?.focus());
+    return;
+  }
+  if (it.kind === 'save') {
+    saveSearch(it.query);
+    void nextTick(() => inputEl.value?.focus());
+    return;
+  }
   emit('close');
+  if (it.kind === 'hit') {
+    emit('open-hit', it.hit);
+    return;
+  }
   if (it.kind === 'file') {
     emit('open-node', it.node);
   } else if (it.kind === 'goto') {
@@ -183,15 +346,23 @@ watch(
     if (v) {
       query.value = '';
       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());
     } else {
+      if (everywhereTimer) clearTimeout(everywhereTimer); /* bul:s3 */
       document.removeEventListener('keydown', onDocKeydown, true);
     }
   },
 );
 
-onBeforeUnmount(() => document.removeEventListener('keydown', onDocKeydown, true));
+onBeforeUnmount(() => {
+  if (everywhereTimer) clearTimeout(everywhereTimer); /* bul:s3 */
+  document.removeEventListener('keydown', onDocKeydown, true);
+});
 </script>
 
 <template>
@@ -269,6 +440,69 @@ onBeforeUnmount(() => document.removeEventListener('keydown', onDocKeydown, true
             </button>
           </template>
 
+          <!-- bul:s3 — "Everywhere" global-search hits -->
+          <template v-if="hitItems.length || everywhereLoading">
+            <div class="fe-cmdp__group">{{ t('palette.everywhere') }}</div>
+            <div v-if="everywhereLoading && !hitItems.length" class="fe-cmdp__loading">
+              {{ t('palette.searching') }}
+            </div>
+            <button
+              v-for="(it, i) in hitItems"
+              :key="it.id"
+              type="button"
+              class="fe-cmdp__item fe-cmdp__item--hit"
+              :class="{ 'is-active': hitOffset + i === active }"
+              role="option"
+              :aria-selected="hitOffset + i === active"
+              @mouseenter="active = hitOffset + i"
+              @click="choose(it)"
+            >
+              <span class="fe-cmdp__icon" aria-hidden="true">{{ it.icon }}</span>
+              <span class="fe-cmdp__hitbody">
+                <span class="fe-cmdp__hitline">
+                  <span class="fe-cmdp__label">{{ it.label }}</span>
+                  <span v-if="it.inContent" class="fe-cmdp__badge">{{ t('search.in_content') }}</span>
+                </span>
+                <span v-if="it.crumb" class="fe-cmdp__crumb" :title="it.crumb">{{ it.crumb }}</span>
+                <!-- Snippet: «»-highlights become <mark> via TEXT segments — never innerHTML. -->
+                <span v-if="it.snippet" class="fe-cmdp__snippet">
+                  <template v-for="(seg, si) in snippetSegments(it.snippet)" :key="si">
+                    <mark v-if="seg.match" class="fe-cmdp__mark">{{ seg.text }}</mark>
+                    <template v-else>{{ seg.text }}</template>
+                  </template>
+                </span>
+              </span>
+            </button>
+          </template>
+
+          <!-- bul:s3 — saved searches -->
+          <template v-if="savedItems.length">
+            <div class="fe-cmdp__group">{{ t('palette.saved') }}</div>
+            <div
+              v-for="(it, i) in savedItems"
+              :key="it.id"
+              class="fe-cmdp__item fe-cmdp__item--saved"
+              :class="{ 'is-active': savedOffset + i === active }"
+              role="option"
+              :aria-selected="savedOffset + i === active"
+              tabindex="-1"
+              @mouseenter="active = savedOffset + i"
+              @click="choose(it)"
+              @keydown.enter.prevent="choose(it)"
+            >
+              <span class="fe-cmdp__icon" aria-hidden="true">{{ it.icon }}</span>
+              <span class="fe-cmdp__label">{{ it.label }}</span>
+              <button
+                v-if="it.kind === 'saved'"
+                type="button"
+                class="fe-cmdp__del"
+                :title="t('palette.saved.delete')"
+                :aria-label="t('palette.saved.delete')"
+                @click.stop="removeSavedSearch(it.query)"
+              >🗑</button>
+            </div>
+          </template>
+
           <template v-if="commandItems.length">
             <div class="fe-cmdp__group">{{ t('palette.commands') }}</div>
             <button
@@ -287,7 +521,7 @@ onBeforeUnmount(() => document.removeEventListener('keydown', onDocKeydown, true
             </button>
           </template>
 
-          <div v-if="flat.length === 0" class="fe-cmdp__empty">
+          <div v-if="flat.length === 0 && !everywhereLoading" class="fe-cmdp__empty">
             {{ t('palette.empty') }}
           </div>
         </div>

package/src/components/ContextMenu.vue

@@ -31,13 +31,22 @@ const props = defineProps<{
    * explorer tree.
    */
   theme?: ThemeMode;
+  /**
+   * bag:b4 — bottom-sheet presentation for coarse-pointer (touch)
+   * contexts. When true the menu renders as a full-width sheet sliding
+   * up from the bottom edge (grab handle, ≥44px touch targets; closed
+   * by overlay tap, dragging the handle down, or Esc). The position
+   * passed to show() is ignored. When absent/false the classic anchored
+   * menu renders — desktop right-click behavior is untouched.
+   */
+  sheet?: boolean;
 }>();
 
 const emit = defineEmits<{
   (e: 'select', action: ContextAction, target: FileNode[]): void;
 }>();
 
-void useLocale(() => props.locale); // eager-instantiate t/lookup so future templates can reuse
+const { t } = useLocale(() => props.locale); // bag:b4 — sheet aria labels need t()
 
 const open = ref(false);
 const x = ref(0);
@@ -54,6 +63,12 @@ async function show(ev: { clientX: number; clientY: number }, nodes: FileNode[])
   // bottom/right edge doesn't push the menu off-screen (it opens down-right
   // from the cursor by default).
   await nextTick();
+  if (props.sheet) {
+    // bag:b4 — sheet mode: no anchoring; focus the panel so Esc closes it
+    // without requiring a prior click inside.
+    sheetEl.value?.focus();
+    return;
+  }
   clampToViewport();
 }
 
@@ -74,7 +89,48 @@ function clampToViewport() {
 
 function hide() {
   open.value = false;
+  /* bag:b4 — reset any in-flight sheet drag so reopening starts clean. */
+  sheetDragging.value = false;
+  sheetDragY.value = 0;
+}
+
+/* bag:b4 — sheet drag-to-dismiss. Bound to the grab handle only, so the
+ * scrollable item list keeps its native touch scrolling. Dragging past the
+ * threshold closes; anything less snaps back. */
+const sheetEl = ref<HTMLElement | null>(null);
+const sheetDragging = ref(false);
+const sheetDragY = ref(0);
+let sheetDragStart = 0;
+
+function onSheetDragStart(e: TouchEvent) {
+  const t0 = e.touches[0];
+  if (!t0) return;
+  sheetDragging.value = true;
+  sheetDragStart = t0.clientY;
+  sheetDragY.value = 0;
+}
+function onSheetDragMove(e: TouchEvent) {
+  if (!sheetDragging.value) return;
+  const t0 = e.touches[0];
+  if (!t0) return;
+  sheetDragY.value = Math.max(0, t0.clientY - sheetDragStart);
 }
+function onSheetDragEnd() {
+  if (!sheetDragging.value) return;
+  const shouldClose = sheetDragY.value > 72;
+  sheetDragging.value = false;
+  if (shouldClose) {
+    hide();
+  } else {
+    sheetDragY.value = 0;
+  }
+}
+const sheetStyle = computed(() =>
+  sheetDragY.value > 0
+    ? { transform: `translateY(${sheetDragY.value}px)`, transition: 'none' }
+    : undefined,
+);
+/* /bag:b4 */
 
 function pick(a: ContextAction) {
   if (a.disabled) return;
@@ -113,17 +169,59 @@ defineExpose({ show, hide });
 
 <template>
   <Teleport to="body">
-    <transition name="fe-ctx">
+    <transition :name="sheet ? 'fe-sheet' : 'fe-ctx'">
       <div
         v-if="open"
         class="fe-ctx-backdrop"
-        :class="themeClass"
+        :class="[themeClass, { 'fe-ctx-backdrop--sheet': sheet }]"
         :data-prefers-dark="prefersDark ? '1' : '0'"
         @click="hide"
         @contextmenu.prevent="hide"
         @keydown="onKey"
       >
+        <!-- bag:b4 — bottom-sheet variant (coarse pointer / touch) -->
+        <div
+          v-if="sheet"
+          ref="sheetEl"
+          class="fe-sheet"
+          role="menu"
+          :aria-label="t('sheet.menu')"
+          tabindex="-1"
+          :style="sheetStyle"
+          @click.stop
+        >
+          <div
+            class="fe-sheet__handle"
+            role="button"
+            tabindex="0"
+            :aria-label="t('sheet.close')"
+            @click="hide"
+            @keydown.enter.prevent="hide"
+            @touchstart.passive="onSheetDragStart"
+            @touchmove.passive="onSheetDragMove"
+            @touchend="onSheetDragEnd"
+            @touchcancel="onSheetDragEnd"
+          />
+          <div class="fe-sheet__items">
+            <template v-for="(a, i) in visibleActions" :key="a.key || i">
+              <div v-if="a.divider" class="fe-ctx__sep" />
+              <button
+                v-else
+                type="button"
+                class="fe-ctx__item fe-sheet__item"
+                :class="{ 'is-danger': a.danger, 'is-disabled': a.disabled }"
+                :disabled="a.disabled"
+                role="menuitem"
+                @click="pick(a)"
+              >
+                <span v-if="a.icon" class="fe-ctx__icon" aria-hidden="true">{{ a.icon }}</span>
+                <span class="fe-ctx__label">{{ a.label }}</span>
+              </button>
+            </template>
+          </div>
+        </div>
         <div
+          v-else
           ref="menuEl"
           class="fe-ctx"
           role="menu"

package/src/components/ListView.vue

@@ -11,6 +11,7 @@ import type { FileNode } from '../types/FileNode';
 import type { LocaleCode } from '../types/ExplorerConfig';
 import { useLocale } from '../composables/useLocale';
 import { fileIconSvg } from '../lib/fileIcons';
+import { matchedInContent, snippetSegments } from '../lib/snippet'; /* bul:s3 */
 import StarButton from './StarButton.vue';
 
 const props = defineProps<{
@@ -137,6 +138,19 @@ function parentDir(path: string): string {
   return stripped.slice(0, idx);
 }
 
+/* bul:s3 — search-result enrichment. The v0.2 backend inlines `snippet`
+ * (plain text, «» highlights) + `matched` on search hits; regular listings
+ * never carry them, so presence-gating keeps normal rows untouched and an
+ * older backend simply renders nothing extra. */
+function rowSnippet(n: FileNode): string {
+  const s = (n as Record<string, unknown>).snippet;
+  return typeof s === 'string' ? s : '';
+}
+
+function rowInContent(n: FileNode): boolean {
+  return matchedInContent((n as Record<string, unknown>).matched);
+}
+
 // ------------------------------------------------------------------
 // Column sorting — local to the list view. Default (null) keeps the
 // backend order, i.e. exactly the pre-existing behavior.
@@ -342,12 +356,23 @@ const segments = computed<Segment[]>(() => {
           <!-- eslint-disable-next-line vue/no-v-html — static markup from lib/fileIcons -->
           <span v-else class="fe-list__icon fe-list__icon--svg" aria-hidden="true" v-html="fileIconSvg(n)"></span>
           <div class="fe-list__name-wrap">
-            <span class="fe-list__name" :title="n.basename">{{ nodeDisplayName(n) }}</span>
+            <span class="fe-list__name" :title="n.basename">
+              {{ nodeDisplayName(n) }}
+              <!-- bul:s3 — content-match badge -->
+              <span v-if="rowInContent(n)" class="fe-list__badge">{{ t('search.in_content') }}</span>
+            </span>
             <span
               v-if="showParentPath"
               class="fe-list__parent"
               :title="parentDir(n.path)"
             >{{ parentDir(n.path) || '—' }}</span>
+            <!-- bul:s3 — content snippet («» → <mark> via TEXT segments, no innerHTML) -->
+            <span v-if="rowSnippet(n)" class="fe-list__snippet">
+              <template v-for="(seg, si) in snippetSegments(rowSnippet(n))" :key="si">
+                <mark v-if="seg.match" class="fe-list__mark">{{ seg.text }}</mark>
+                <template v-else>{{ seg.text }}</template>
+              </template>
+            </span>
           </div>
         </div>
         <div class="fe-list__col fe-list__col--size">