npm - @brftech/filex-core - Versions diffs - 0.2.0 → 0.4.0 - Mend

@brftech/filex-core 0.2.0 → 0.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (37) hide show

package/src/components/Toolbar.vue CHANGED Viewed

@@ -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,21 @@ 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;
+  /* koru:k1 — inspector (details panel) toggle state, for the pressed style. */
+  inspectorOpen?: boolean;
 }>();
 const emit = defineEmits<{
@@ -70,6 +85,7 @@ const emit = defineEmits<{
   (e: 'action', key: string): void;
   (e: 'open-recents'): void;
   (e: 'update:density', v: Density): void;
+  (e: 'toggle-inspector'): void /* koru:k1 */;
 }>();
 // Density toggle — the toolbar owns the persisted preference; the parent
@@ -114,7 +130,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 +153,125 @@ 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: '☰' },
+  );
+  /* koru:k1 — inspector toggle also reachable from the narrow overflow menu */
+  list.push({ key: 'inspector', label: t('toolbar.inspector'), 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;
+    case 'inspector' /* koru:k1 */:
+      emit('toggle-inspector');
+      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"
@@ -256,6 +392,32 @@ function fire(key: string) {
       </svg>
     </button>
+    <!-- koru:k1 — inspector (details panel) toggle -->
+    <button
+      type="button"
+      class="fe-btn fe-btn--icon-only fe-toolbar__inspector"
+      :class="{ 'is-active': inspectorOpen }"
+      :aria-pressed="!!inspectorOpen"
+      :title="t('toolbar.inspector')"
+      :aria-label="t('toolbar.inspector')"
+      @click="emit('toggle-inspector')"
+    >
+      <svg
+        class="fe-ficon"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="1.8"
+        stroke-linecap="round"
+        aria-hidden="true"
+        focusable="false"
+      >
+        <circle cx="12" cy="12" r="9" />
+        <path d="M12 11v5" />
+        <circle cx="12" cy="7.6" r="1" fill="currentColor" stroke="none" />
+      </svg>
+    </button>
     <div class="fe-toolbar__view" role="tablist" aria-label="View">
       <button
         type="button"
@@ -280,5 +442,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/composables/useFileApi.ts CHANGED Viewed

@@ -89,6 +89,19 @@ export interface UserSuggestion {
   display_name: string;
   role: string;
 }
+/* === koru:k1 — version history (inspector panel) === */
+/** Mirrors backend `model.NodeVersion` (GET /api/files/versions?node_id=…). */
+export interface NodeVersion {
+  id: number;
+  node_id: number;
+  version_n: number;
+  storage_key?: string;
+  size: number;
+  etag?: string;
+  created_at: string;
+}
 export interface UserSearchResponse {
   users: UserSuggestion[];
 }
@@ -686,6 +699,48 @@ export function useFileApi(config: ExplorerConfig) {
     });
   }
+  /* === koru:k1 — version history (inspector panel) ===
+   * Derived from the manager endpoint by swapping `/manager` for `/versions`
+   * (same trick permissionsUrl/globalSearch use) so embedded proxies that
+   * forward the whole /api/files/* subtree keep working.
+   *   GET  /api/files/versions?node_id=N       → {versions, node_id}
+   *   POST /api/files/versions/restore         → {node_id, version_id, snapshot_current}
+   *   POST /api/files/versions/snapshot        → {node_id}   (may not exist on older backends)
+   */
+  function versionsUrl(sub = ''): string {
+    const base = endpoints.manager.replace(/\/manager(\?.*)?$/, '/versions');
+    return base + sub;
+  }
+  async function listVersions(nodeId: number): Promise<NodeVersion[]> {
+    const data = await jsonFetch<{ versions?: NodeVersion[] | null }>(
+      versionsUrl() + '?node_id=' + encodeURIComponent(String(nodeId)),
+    );
+    return Array.isArray(data?.versions) ? data.versions : [];
+  }
+  async function restoreVersion(
+    nodeId: number,
+    versionId: number,
+    snapshotCurrent = true,
+  ): Promise<void> {
+    await jsonFetch(versionsUrl('/restore'), {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({
+        node_id: nodeId,
+        version_id: versionId,
+        snapshot_current: snapshotCurrent,
+      }),
+    });
+  }
+  async function snapshotVersion(nodeId: number): Promise<void> {
+    await jsonFetch(versionsUrl('/snapshot'), {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ node_id: nodeId }),
+    });
+  }
+  /* === /koru:k1 === */
   // Mint a short-lived WebSocket auth ticket for the realtime layer. Derived
   // from the manager URL (so it flows through the same host proxy) and uses the
   // same auth/creds as every other call. Returns null on any failure (a backend
@@ -731,6 +786,10 @@ export function useFileApi(config: ExplorerConfig) {
     archiveList,
     archiveExtract,
     archiveAdd,
+    // Version history (koru:k1 inspector)
+    listVersions,
+    restoreVersion,
+    snapshotVersion,
     // Permissions (RBAC panel)
     listPermissions,
     resolveEmail,

package/src/composables/useKeyboardShortcuts.ts CHANGED Viewed

@@ -22,6 +22,7 @@ export interface ShortcutHandlers {
   onPathJump?: () => void; // Cmd+K / Ctrl+K
   onGoUp?: () => void; // Alt+Up / Backspace (when nothing selected)
   onShowHelp?: () => void; // ? (Shift+/ on most layouts)
+  onToggleInspector?: () => void; // i (koru:k1 details panel)
   hasSelection?: () => boolean; // disambiguates Backspace
 }
@@ -45,6 +46,7 @@ export const SHORTCUTS: ShortcutDef[] = [
   { keys: ['Alt+↑', 'Backspace'], labelKey: 'shortcuts.go_up', groupKey: 'shortcuts.group.nav' },
   { keys: ['Enter'], labelKey: 'shortcuts.open', groupKey: 'shortcuts.group.nav' },
   { keys: ['Esc'], labelKey: 'shortcuts.close', groupKey: 'shortcuts.group.nav' },
+  { keys: ['I'], labelKey: 'shortcuts.inspector', groupKey: 'shortcuts.group.nav' } /* koru:k1 */,
   { keys: ['?'], labelKey: 'shortcuts.help', groupKey: 'shortcuts.group.nav' },
   // Selection
   { keys: ['Ctrl+A'], labelKey: 'shortcuts.select_all', groupKey: 'shortcuts.group.selection' },
@@ -160,6 +162,15 @@ export function useKeyboardShortcuts(rootEl: Ref<HTMLElement | null>, handlers:
           handlers.onDuplicate();
         }
         break;
+      /* koru:k1 — plain `i` toggles the inspector (details) panel. Ctrl+I /
+         Alt+I stay untouched so browser/OS combos keep working. */
+      case 'i':
+      case 'I':
+        if (!ctrl && !e.altKey && handlers.onToggleInspector) {
+          e.preventDefault();
+          handlers.onToggleInspector();
+        }
+        break;
       case 'k':
       case 'K':
         if (ctrl && handlers.onPathJump) {

package/src/locales/en.ts CHANGED Viewed

@@ -195,4 +195,49 @@ 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',
+  /* === koru:k1 === */
+  'toolbar.inspector': 'Details',
+  'ctx.details': 'Details',
+  'shortcuts.inspector': 'Toggle details panel',
+  'inspector.title': 'Details',
+  'inspector.close': 'Close',
+  'inspector.section.general': 'General',
+  'inspector.section.versions': 'Versions',
+  'inspector.section.permissions': 'Permissions',
+  'inspector.section.shares': 'Shares',
+  'inspector.path': 'Path',
+  'inspector.size': 'Size',
+  'inspector.modified': 'Modified',
+  'inspector.mime': 'MIME type',
+  'inspector.etag': 'ETag',
+  'inspector.copy': 'Copy',
+  'inspector.copied': 'Copied',
+  'inspector.error': 'Could not load',
+  'inspector.items_summary': '{n} items, {size} total',
+  'inspector.folder_items': '{n} items',
+  'inspector.versions.empty': 'No version history',
+  'inspector.versions.v': 'Version {n}',
+  'inspector.versions.restore': 'Restore',
+  'inspector.versions.restore_confirm': 'Restore this version?',
+  'inspector.versions.snapshot_current': 'Snapshot the current state first',
+  'inspector.versions.confirm': 'Confirm',
+  'inspector.versions.cancel': 'Cancel',
+  'inspector.versions.take_snapshot': 'Snapshot current state',
+  'inspector.versions.restored': 'Version restored',
+  'inspector.versions.snapshotted': 'Snapshot taken',
+  'inspector.versions.unsupported': 'The server does not support this operation',
+  'inspector.perm.none': 'No access',
+  'inspector.perm.viewer': 'Viewer',
+  'inspector.perm.editor': 'Editor',
+  'inspector.perm.owner': 'Owner',
+  'inspector.perm.manage': 'Manage permissions',
+  'inspector.shares.empty': 'No share links',
+  'inspector.shares.copy': 'Copy link',
 };

package/src/locales/tr.ts CHANGED Viewed

@@ -195,4 +195,49 @@ 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',
+  /* === koru:k1 === */
+  'toolbar.inspector': 'Ayrıntılar',
+  'ctx.details': 'Ayrıntılar',
+  'shortcuts.inspector': 'Ayrıntılar panelini aç/kapat',
+  'inspector.title': 'Ayrıntılar',
+  'inspector.close': 'Kapat',
+  'inspector.section.general': 'Genel',
+  'inspector.section.versions': 'Sürümler',
+  'inspector.section.permissions': 'İzinler',
+  'inspector.section.shares': 'Paylaşımlar',
+  'inspector.path': 'Yol',
+  'inspector.size': 'Boyut',
+  'inspector.modified': 'Değiştirilme',
+  'inspector.mime': 'MIME türü',
+  'inspector.etag': 'ETag',
+  'inspector.copy': 'Kopyala',
+  'inspector.copied': 'Kopyalandı',
+  'inspector.error': 'Yüklenemedi',
+  'inspector.items_summary': '{n} öğe, toplam {size}',
+  'inspector.folder_items': '{n} öğe',
+  'inspector.versions.empty': 'Sürüm geçmişi yok',
+  'inspector.versions.v': 'Sürüm {n}',
+  'inspector.versions.restore': 'Geri yükle',
+  'inspector.versions.restore_confirm': 'Bu sürüm geri yüklensin mi?',
+  'inspector.versions.snapshot_current': 'Önce şimdiki halin sürümünü al',
+  'inspector.versions.confirm': 'Onayla',
+  'inspector.versions.cancel': 'Vazgeç',
+  'inspector.versions.take_snapshot': 'Şimdiki halin sürümünü al',
+  'inspector.versions.restored': 'Sürüm geri yüklendi',
+  'inspector.versions.snapshotted': 'Sürüm alındı',
+  'inspector.versions.unsupported': 'Sunucu bu işlemi desteklemiyor',
+  'inspector.perm.none': 'Erişim yok',
+  'inspector.perm.viewer': 'Görüntüleyen',
+  'inspector.perm.editor': 'Düzenleyen',
+  'inspector.perm.owner': 'Sahip',
+  'inspector.perm.manage': 'İzinleri yönet',
+  'inspector.shares.empty': 'Paylaşım linki yok',
+  'inspector.shares.copy': 'Linki kopyala',
 };