@brftech/filex-core 0.2.0 → 0.3.0

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/Toolbar.vue

@@ -11,10 +11,10 @@
  * Presentational only — all logic (rename, share, …) lives in
  * FileExplorer.vue, which listens for `action` emits.
  */
-import { computed, onMounted, ref, watch } from 'vue';
+import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue';
 import type { ViewMode } from '../types/FileNode';
-import type { LocaleCode } from '../types/ExplorerConfig';
-import type { ContextAction } from './ContextMenu.vue';
+import type { LocaleCode, ThemeMode } from '../types/ExplorerConfig';
+import ContextMenu, { type ContextAction } from './ContextMenu.vue';
 import { useLocale } from '../composables/useLocale';
 
 export type SelectionMode = 'none' | 'single-file' | 'single-dir' | 'multi';
@@ -58,6 +58,19 @@ const props = defineProps<{
    */
   canWrite?: boolean;
   locale: LocaleCode;
+  /**
+   * bag:b4 — narrow/embed mini mode. When true the toolbar collapses to
+   * [↑?] [🔍] [⬆] [⋯]: secondary actions (New Folder, Refresh, density,
+   * view switcher, selection actions, Paste) move into the "⋯" overflow
+   * menu and search expands from an icon to a full-width input. When
+   * absent/false the classic wide layout renders unchanged.
+   */
+  narrow?: boolean;
+  /**
+   * bag:b4 — resolved theme, forwarded to the teleported overflow menu
+   * (which loses the `.fe` variable scope under <body>).
+   */
+  theme?: ThemeMode;
 }>();
 
 const emit = defineEmits<{
@@ -114,7 +127,12 @@ function onSearchInput(ev: Event) {
   debounce = setTimeout(() => emit('update:searchQuery', v), 200);
 }
 
-function focusSearch() {
+async function focusSearch() {
+  /* bag:b4 — in narrow mode the input is collapsed behind the icon. */
+  if (props.narrow && !searchOpen.value) {
+    searchOpen.value = true;
+    await nextTick();
+  }
   searchEl.value?.focus();
   searchEl.value?.select();
 }
@@ -132,10 +150,120 @@ const toolbarItems = computed(() => props.actions.filter((a) => !a.divider && !a
 function fire(key: string) {
   emit('action', key);
 }
+
+/* === bag:b4 — narrow-mode state: expandable search + "⋯" overflow menu === */
+
+const searchOpen = ref(false);
+// Leaving narrow mode discards the transient expanded-search state so the
+// wide layout always comes back exactly as it was.
+watch(
+  () => props.narrow,
+  (n) => {
+    if (!n) searchOpen.value = false;
+  },
+);
+
+async function openSearch() {
+  searchOpen.value = true;
+  await nextTick();
+  searchEl.value?.focus();
+}
+function closeSearch() {
+  // Keep the query (it still filters the listing); the icon shows an
+  // active state while a query is set.
+  searchOpen.value = false;
+}
+
+// Coarse-pointer detection — the overflow menu renders as a bottom sheet on
+// touch devices, matching the file context menu.
+const coarse = ref(false);
+let coarseMq: MediaQueryList | undefined;
+function syncCoarse(e?: MediaQueryListEvent | MediaQueryList) {
+  coarse.value = !!(e && 'matches' in e && e.matches);
+}
+onMounted(() => {
+  if (typeof window === 'undefined' || !window.matchMedia) return;
+  coarseMq = window.matchMedia('(pointer: coarse)');
+  syncCoarse(coarseMq);
+  coarseMq.addEventListener?.('change', syncCoarse);
+});
+onBeforeUnmount(() => {
+  coarseMq?.removeEventListener?.('change', syncCoarse);
+});
+
+const moreBtnEl = ref<HTMLElement | null>(null);
+const moreRef = ref<InstanceType<typeof ContextMenu> | null>(null);
+
+// Everything the wide toolbar renders as standalone buttons, folded into one
+// action list: folder-level writes (New Folder / Paste), the shared
+// selection actions, then the view utilities (Refresh / density / view mode).
+const moreActions = computed<ContextAction[]>(() => {
+  const list: ContextAction[] = [];
+  const writable =
+    !props.trashActive && !props.atVirtualRoot && props.canWrite !== false;
+  if (mode.value === 'none' && writable) {
+    list.push({ key: 'new-folder', label: t('toolbar.new_folder'), icon: '📁' });
+    if (props.pasteEnabled) list.push({ key: 'paste', label: t('ctx.paste'), icon: '📋' });
+  }
+  list.push(...toolbarItems.value);
+  if (list.length) list.push({ divider: true, key: 'bag-sep', label: '' });
+  list.push({ key: 'refresh', label: t('toolbar.refresh'), icon: '↻' });
+  list.push({
+    key: 'density',
+    label:
+      density.value === 'compact'
+        ? t('toolbar.density.comfortable')
+        : 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: '☰' },
+  );
+  return list;
+});
+
+function openMore() {
+  const r = moreBtnEl.value?.getBoundingClientRect();
+  moreRef.value?.show({ clientX: r ? r.right : 0, clientY: r ? r.bottom + 4 : 0 }, []);
+}
+
+function onMoreSelect(a: ContextAction) {
+  switch (a.key) {
+    case 'new-folder':
+      emit('new-folder');
+      break;
+    case 'refresh':
+      emit('refresh');
+      break;
+    case 'density':
+      toggleDensity();
+      break;
+    case 'view-list':
+      emit('update:viewMode', 'list');
+      break;
+    case 'view-grid':
+      emit('update:viewMode', 'grid');
+      break;
+    default:
+      fire(a.key);
+  }
+}
+
+/* === /bag:b4 === */
 </script>
 
 <template>
-  <div class="fe-toolbar">
+  <div
+    class="fe-toolbar"
+    :class="{
+      'fe-toolbar--narrow': narrow /* bag:b4 */,
+      'fe-toolbar--searching': narrow && searchOpen /* bag:b4 */,
+    }"
+  >
+    <!-- bag:b4 — wide layout, untouched; renders exactly as before when not narrow -->
+    <template v-if="!narrow">
     <div class="fe-toolbar__primary">
       <button
         v-if="canGoUp"
@@ -280,5 +408,88 @@ function fire(key: string) {
         <span class="fe-icon">▦</span>
       </button>
     </div>
+    </template>
+
+    <!-- bag:b4 — narrow layout: [↑?] ... [🔍] [⬆] [⋯], search expands full-width -->
+    <template v-else>
+      <template v-if="searchOpen">
+        <div class="fe-search fe-search--full">
+          <input
+            ref="searchEl"
+            type="search"
+            class="fe-search__input"
+            :placeholder="t('toolbar.search.placeholder')"
+            :value="localSearch"
+            :aria-label="t('toolbar.search')"
+            @input="onSearchInput"
+            @keydown.esc.stop.prevent="closeSearch"
+          />
+        </div>
+        <button
+          type="button"
+          class="fe-btn fe-btn--icon-only"
+          :title="t('toolbar.search.close')"
+          :aria-label="t('toolbar.search.close')"
+          @click="closeSearch"
+        >
+          <span class="fe-icon">✕</span>
+        </button>
+      </template>
+      <template v-else>
+        <button
+          v-if="canGoUp"
+          type="button"
+          class="fe-btn fe-btn--icon-only"
+          :title="t('toolbar.go_up')"
+          :aria-label="t('toolbar.go_up')"
+          @click="emit('go-up')"
+        >
+          <span class="fe-icon">↑</span>
+        </button>
+
+        <div class="fe-toolbar__spacer" />
+
+        <button
+          type="button"
+          class="fe-btn fe-btn--icon-only fe-toolbar__search-toggle"
+          :class="{ 'is-active': !!localSearch }"
+          :title="t('toolbar.search')"
+          :aria-label="t('toolbar.search')"
+          @click="openSearch"
+        >
+          <span class="fe-icon">🔍</span>
+        </button>
+        <button
+          v-if="!atVirtualRoot && canWrite !== false"
+          type="button"
+          class="fe-btn fe-btn--icon-only"
+          :title="t('toolbar.upload')"
+          :aria-label="t('toolbar.upload')"
+          @click="emit('upload')"
+        >
+          <span class="fe-icon">⬆</span>
+        </button>
+        <button
+          ref="moreBtnEl"
+          type="button"
+          class="fe-btn fe-btn--icon-only fe-toolbar__more"
+          :title="t('toolbar.more')"
+          :aria-label="t('toolbar.more')"
+          aria-haspopup="menu"
+          @click="openMore"
+        >
+          <span class="fe-icon">⋯</span>
+        </button>
+      </template>
+
+      <ContextMenu
+        ref="moreRef"
+        :locale="locale"
+        :theme="theme || 'auto'"
+        :sheet="coarse"
+        :actions="moreActions"
+        @select="onMoreSelect"
+      />
+    </template>
   </div>
 </template>

package/src/locales/en.ts

@@ -195,4 +195,10 @@ export const en: Record<string, string> = {
   'palette.save': 'Save search',
   'palette.saved.delete': 'Delete saved search',
   'search.in_content': 'In content',
+
+  /* === bag:b4 === */
+  'toolbar.more': 'More actions',
+  'toolbar.search.close': 'Close search',
+  'sheet.menu': 'Actions',
+  'sheet.close': 'Close',
 };

package/src/locales/tr.ts

@@ -195,4 +195,10 @@ export const tr: Record<string, string> = {
   'palette.save': 'Aramayı kaydet',
   'palette.saved.delete': 'Kayıtlı aramayı sil',
   'search.in_content': 'İçerikte',
+
+  /* === bag:b4 === */
+  'toolbar.more': 'Diğer işlemler',
+  'toolbar.search.close': 'Aramayı kapat',
+  'sheet.menu': 'İşlemler',
+  'sheet.close': 'Kapat',
 };

package/src/styles/base.css

@@ -1931,3 +1931,140 @@ filex-explorer {
 .fe-list__snippet {
   max-width: 100%;
 }
+
+/* === bag:b4 — narrow/embed mini mode === */
+/* Everything below is scoped to `.fe--narrow`, `.fe-toolbar--narrow`,
+ * `.fe-fab` or `.fe-sheet` — none of which exist in the wide desktop
+ * layout, so the classic look is untouched when the mode is off. */
+
+/* Narrow toolbar: a single non-wrapping row of icon buttons. */
+.fe-toolbar--narrow {
+  flex-wrap: nowrap;
+  gap: 6px;
+}
+.fe-toolbar--narrow .fe-btn.is-active {
+  background: var(--fe-bg-selected);
+}
+/* Expanded search: the input takes the whole row. */
+.fe-toolbar--narrow .fe-search--full {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+.fe-toolbar--narrow .fe-search--full .fe-search__input {
+  width: 100%;
+  min-width: 0;
+}
+
+/* Upload FAB — bottom-right corner of the explorer (narrow mode only). */
+.fe-fab {
+  position: absolute;
+  right: 16px;
+  bottom: 16px;
+  width: 56px;
+  height: 56px;
+  border: 0;
+  border-radius: 50%;
+  background: var(--fe-primary);
+  color: var(--fe-text-on-primary);
+  font-size: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: var(--fe-shadow);
+  cursor: pointer;
+  z-index: 45;
+  transition: background 0.15s, transform 0.15s;
+}
+.fe-fab:hover {
+  background: var(--fe-primary-hover);
+}
+.fe-fab:active {
+  transform: scale(0.94);
+}
+.fe-fab:focus-visible {
+  outline: 2px solid var(--fe-primary);
+  outline-offset: 3px;
+}
+/* Keep the corner trays clear of the FAB while narrow. */
+.fe--narrow .fe-upload,
+.fe--narrow .fe-ops {
+  bottom: 84px;
+}
+
+/* Bottom sheet (ContextMenu sheet variant, coarse-pointer devices). */
+.fe-ctx-backdrop--sheet {
+  background: rgba(13, 19, 27, 0.42);
+}
+.fe-sheet {
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  max-height: 70vh;
+  display: flex;
+  flex-direction: column;
+  background: var(--fe-bg);
+  color: var(--fe-text);
+  border: 1px solid var(--fe-border);
+  border-bottom: 0;
+  border-top-left-radius: var(--fe-radius-lg);
+  border-top-right-radius: var(--fe-radius-lg);
+  box-shadow: 0 -10px 32px rgba(15, 23, 42, 0.28);
+  padding: 0 8px calc(8px + env(safe-area-inset-bottom, 0px));
+  outline: none;
+  z-index: 90;
+}
+.fe-sheet__handle {
+  flex: 0 0 auto;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 12px 0 8px;
+  cursor: grab;
+  touch-action: none;
+}
+.fe-sheet__handle::before {
+  content: '';
+  width: 40px;
+  height: 4px;
+  border-radius: 99px;
+  background: var(--fe-border-strong);
+}
+.fe-sheet__items {
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  -webkit-overflow-scrolling: touch;
+}
+/* Big touch targets (≥44px) on sheet entries. */
+.fe-sheet__item {
+  min-height: 44px;
+  padding: 10px 14px;
+  font-size: 15px;
+  gap: 12px;
+}
+/* Sheet transitions: backdrop fades, panel slides up from the bottom. */
+.fe-sheet-enter-active,
+.fe-sheet-leave-active {
+  transition: opacity 0.18s ease;
+}
+.fe-sheet-enter-active .fe-sheet,
+.fe-sheet-leave-active .fe-sheet {
+  transition: transform 0.22s ease;
+}
+.fe-sheet-enter-from,
+.fe-sheet-leave-to {
+  opacity: 0;
+}
+.fe-sheet-enter-from .fe-sheet,
+.fe-sheet-leave-to .fe-sheet {
+  transform: translateY(100%);
+}
+@media (prefers-reduced-motion: reduce) {
+  .fe-sheet-enter-active,
+  .fe-sheet-leave-active,
+  .fe-sheet-enter-active .fe-sheet,
+  .fe-sheet-leave-active .fe-sheet,
+  .fe-fab {
+    transition: none;
+  }
+}