@brftech/filex-core 0.1.56

package/src/components/ListView.vue

@@ -0,0 +1,212 @@
+<script setup lang="ts">
+/**
+ * ListView — tabular layout (name / size / modified).
+ *
+ * Selection + context menu + double-click open are caller-owned — we
+ * just emit the events and let FileExplorer.vue handle them uniformly
+ * across List and Grid.
+ */
+import { computed } from 'vue';
+import type { FileNode } from '../types/FileNode';
+import type { LocaleCode } from '../types/ExplorerConfig';
+import { useLocale } from '../composables/useLocale';
+import StarButton from './StarButton.vue';
+
+const props = defineProps<{
+  files: FileNode[];
+  selected: Set<string>;
+  /** Paths that were cut → dim them so the user sees the pending move. */
+  clipped?: Set<string>;
+  /**
+   * Show each row's parent directory under the basename. Caller flips
+   * this on while a search filter is active so the user can tell
+   * `invoice.pdf` (in 2024/) apart from `invoice.pdf` (in 2025/) when
+   * both match the same query.
+   */
+  showParentPath?: boolean;
+  locale: LocaleCode;
+  loading?: boolean;
+  /** Set of node IDs flagged starred by the user — render an inline
+   *  filled star indicator and let the user toggle it from the row. */
+  starredIds?: Set<number>;
+  /** Backend base URL + auth header builder forwarded to StarButton
+   *  so it can POST /api/files/manager/star on click. Optional —
+   *  embedders without auth wire-up pass nothing and the star column
+   *  hides itself. */
+  apiBase?: string;
+  authHeaders?: () => Record<string, string> | Promise<Record<string, string>>;
+}>();
+
+const emit = defineEmits<{
+  (e: 'click-row', node: FileNode, mod: { ctrl: boolean; shift: boolean }): void;
+  (e: 'dbl-row', node: FileNode): void;
+  (e: 'context-row', node: FileNode, ev: MouseEvent): void;
+  (e: 'item-drag-start', node: FileNode, ev: DragEvent): void;
+  (e: 'item-drop-into', target: FileNode, ev: DragEvent): void;
+  (e: 'star-change', node: FileNode, value: boolean): void;
+}>();
+
+const { t, formatSize, nodeDisplayName } = useLocale(() => props.locale);
+
+function isSelected(n: FileNode): boolean {
+  return props.selected.has(n.path);
+}
+
+function onRowClick(n: FileNode, ev: MouseEvent) {
+  emit('click-row', n, { ctrl: ev.ctrlKey || ev.metaKey, shift: ev.shiftKey });
+}
+
+function onRowDbl(n: FileNode) {
+  emit('dbl-row', n);
+}
+
+function onRowCtx(n: FileNode, ev: MouseEvent) {
+  // Stop bubbling so the root `@contextmenu` handler doesn't fire and
+  // clear the selection we just set.
+  ev.preventDefault();
+  ev.stopPropagation();
+  emit('context-row', n, ev);
+}
+
+function onItemDragStart(n: FileNode, ev: DragEvent) {
+  emit('item-drag-start', n, ev);
+}
+
+function onItemDragOver(n: FileNode, ev: DragEvent) {
+  if (n.type !== 'dir') return;
+  if (!ev.dataTransfer?.types.includes('application/x-brf-files')) return;
+  ev.preventDefault();
+  ev.stopPropagation();
+  if (ev.dataTransfer) ev.dataTransfer.dropEffect = 'move';
+}
+
+function onItemDrop(n: FileNode, ev: DragEvent) {
+  if (n.type !== 'dir') return;
+  if (!ev.dataTransfer?.types.includes('application/x-brf-files')) return;
+  ev.preventDefault();
+  ev.stopPropagation();
+  emit('item-drop-into', n, ev);
+}
+
+let pressTimer: ReturnType<typeof setTimeout> | undefined;
+let pressTarget: FileNode | null = null;
+
+function onTouchStart(n: FileNode, ev: TouchEvent) {
+  pressTarget = n;
+  if (pressTimer) clearTimeout(pressTimer);
+  pressTimer = setTimeout(() => {
+    if (pressTarget) {
+      const t0 = ev.touches[0];
+      emit('context-row', pressTarget, {
+        clientX: t0.clientX,
+        clientY: t0.clientY,
+        preventDefault: () => {},
+      } as unknown as MouseEvent);
+    }
+  }, 500);
+}
+
+function cancelPress() {
+  if (pressTimer) clearTimeout(pressTimer);
+  pressTarget = null;
+}
+
+function iconFor(n: FileNode): string {
+  if (n.mime_type === 'inode/storage') return '💾';
+  if (n.type === 'dir') return '📁';
+  const e = (n.extension || '').toLowerCase();
+  if (['jpg', 'jpeg', 'png', 'webp', 'gif', 'bmp', 'avif', 'heic', 'svg'].includes(e)) return '🖼';
+  if (['mp4', 'webm', 'mov', 'mkv', 'avi', 'ogv', 'm4v'].includes(e)) return '🎞';
+  if (['mp3', 'wav', 'flac', 'ogg', 'm4a', 'aac', 'opus'].includes(e)) return '🎵';
+  if (e === 'pdf') return '📕';
+  if (['doc', 'docx', 'odt', 'rtf'].includes(e)) return '📄';
+  if (['xls', 'xlsx', 'ods', 'csv'].includes(e)) return '📊';
+  if (['ppt', 'pptx', 'odp'].includes(e)) return '📽';
+  if (['zip', 'tar', 'gz', 'bz2', '7z', 'rar'].includes(e)) return '🗜';
+  if (['txt', 'md', 'log', 'json', 'yml', 'yaml', 'xml'].includes(e)) return '📝';
+  return '📎';
+}
+
+function displayDate(ms: number | undefined): string {
+  if (!ms) return '—';
+  const d = new Date(ms * (ms < 1e12 ? 1000 : 1));
+  return d.toLocaleString();
+}
+
+function parentDir(path: string): string {
+  const stripped = path.replace(/^[a-z][a-z0-9+.-]*:\/\//i, '');
+  const idx = stripped.lastIndexOf('/');
+  if (idx === -1) return '';
+  return stripped.slice(0, idx);
+}
+
+const rows = computed(() => props.files);
+</script>
+
+<template>
+  <div class="fe-list" :class="{ 'is-loading': loading, 'has-star-col': !!apiBase || apiBase === '' }">
+    <div class="fe-list__head" role="row">
+      <div class="fe-list__col fe-list__col--star" role="columnheader" aria-label="Star"></div>
+      <div class="fe-list__col fe-list__col--name" role="columnheader">{{ t('col.name') }}</div>
+      <div class="fe-list__col fe-list__col--size" role="columnheader">{{ t('col.size') }}</div>
+      <div class="fe-list__col fe-list__col--mod" role="columnheader">{{ t('col.modified') }}</div>
+    </div>
+    <div class="fe-list__body" role="rowgroup">
+      <div
+        v-for="n in rows"
+        :key="n.path"
+        class="fe-list__row"
+        :class="{
+          'is-selected': isSelected(n),
+          'is-dir': n.type === 'dir',
+          'is-trash': n.trashed,
+          'is-clipped': clipped?.has(n.path),
+        }"
+        role="row"
+        tabindex="0"
+        draggable="true"
+        @click="onRowClick(n, $event)"
+        @dblclick="onRowDbl(n)"
+        @contextmenu="onRowCtx(n, $event)"
+        @dragstart="onItemDragStart(n, $event)"
+        @dragover="onItemDragOver(n, $event)"
+        @drop="onItemDrop(n, $event)"
+        @touchstart.passive="onTouchStart(n, $event)"
+        @touchend="cancelPress"
+        @touchmove="cancelPress"
+      >
+        <div class="fe-list__col fe-list__col--star" @click.stop>
+          <StarButton
+            v-if="typeof n.id === 'number' && n.type === 'file'"
+            :starred="!!starredIds?.has(n.id)"
+            :node-id="n.id"
+            :api-base="apiBase"
+            :auth-headers="authHeaders"
+            compact
+            @change="(val: boolean) => emit('star-change', n, val)"
+          />
+        </div>
+        <div class="fe-list__col fe-list__col--name">
+          <span class="fe-list__icon" aria-hidden="true">{{ iconFor(n) }}</span>
+          <div class="fe-list__name-wrap">
+            <span class="fe-list__name" :title="n.basename">{{ nodeDisplayName(n) }}</span>
+            <span
+              v-if="showParentPath"
+              class="fe-list__parent"
+              :title="parentDir(n.path)"
+            >{{ parentDir(n.path) || '—' }}</span>
+          </div>
+        </div>
+        <div class="fe-list__col fe-list__col--size">
+          {{ n.type === 'dir' ? '—' : formatSize(n.size) }}
+        </div>
+        <div class="fe-list__col fe-list__col--mod">
+          {{ displayDate(n.last_modified) }}
+        </div>
+      </div>
+      <div v-if="!loading && rows.length === 0" class="fe-list__empty">
+        {{ t('empty.folder') }}
+      </div>
+    </div>
+  </div>
+</template>

package/src/components/PendingOpsTray.vue

@@ -0,0 +1,91 @@
+<script setup lang="ts">
+/**
+ * PendingOpsTray — bottom-left toast list for queued copy/move/delete.
+ *
+ * Sits next to UploadProgress visually (offset to its left when both
+ * are open). Each row shows op type + a progress bar driven by
+ * `progress_done / progress_total`. Terminal rows linger for a moment
+ * (RETAIN_MS in usePendingOps) so the final state is visible before
+ * they fade out.
+ */
+import { computed } from 'vue';
+import type { LocaleCode } from '../types/ExplorerConfig';
+import type { PendingOp } from '../composables/usePendingOps';
+import { useLocale } from '../composables/useLocale';
+
+const props = defineProps<{
+  ops: PendingOp[];
+  locale: LocaleCode;
+}>();
+
+const emit = defineEmits<{
+  (e: 'dismiss', id: number): void;
+}>();
+
+const { t } = useLocale(() => props.locale);
+
+const sorted = computed(() => [...props.ops].sort((a, b) => b.id - a.id));
+
+function percent(op: PendingOp): number {
+  if (op.status === 'done') return 100;
+  if (op.progress_total <= 0) return 0;
+  return Math.min(100, Math.round((op.progress_done / op.progress_total) * 100));
+}
+
+function statusClass(op: PendingOp): string {
+  if (op.status === 'done') return 'is-done';
+  if (op.status === 'error') return 'is-error';
+  return '';
+}
+
+function summary(op: PendingOp): string {
+  const verb =
+    op.op_type === 'copy'
+      ? t('ops.copy')
+      : op.op_type === 'move'
+        ? t('ops.move')
+        : t('ops.delete');
+  if (op.status === 'pending') return `${verb} (${t('ops.queued')})`;
+  if (op.status === 'running') return `${verb} ${op.progress_done}/${op.progress_total}`;
+  if (op.status === 'done') return `${verb} ${t('ops.done')} (${op.progress_total})`;
+  if (op.status === 'error') return `${verb} ${t('ops.error')}`;
+  return verb;
+}
+</script>
+
+<template>
+  <transition-group
+    v-if="sorted.length > 0"
+    name="fe-ops-slide"
+    tag="div"
+    class="fe-ops"
+    role="status"
+    aria-live="polite"
+  >
+    <div
+      v-for="op in sorted"
+      :key="op.id"
+      class="fe-ops__item"
+      :class="statusClass(op)"
+    >
+      <div class="fe-ops__row">
+        <span class="fe-ops__title" :title="op.target_path || op.source_dir || ''">
+          {{ summary(op) }}
+        </span>
+        <button
+          v-if="op.status === 'done' || op.status === 'error'"
+          type="button"
+          class="fe-ops__dismiss"
+          aria-label="Dismiss"
+          @click="emit('dismiss', op.id)"
+        >×</button>
+      </div>
+      <div class="fe-ops__bar">
+        <div class="fe-ops__bar-fill" :style="{ width: percent(op) + '%' }" />
+      </div>
+      <div v-if="op.status === 'error' && op.error_message" class="fe-ops__error">
+        {{ op.error_message }}
+      </div>
+    </div>
+  </transition-group>
+</template>

package/src/components/RecentlyOpened.vue

@@ -0,0 +1,155 @@
+<script setup lang="ts">
+/**
+ * RecentlyOpened — drop-down/sidebar tray of the user's recently-opened
+ * files. Backed by `GET /api/files/manager/recent?limit=20`.
+ */
+import { ref, onMounted, watch } from 'vue';
+
+interface RecentNode {
+  id: number;
+  storage_id: number;
+  path: string;
+  name: string;
+  mime?: string;
+  last_opened?: string;
+}
+
+const props = defineProps<{
+  apiBase?: string;
+  authHeaders?: () => Record<string, string> | Promise<Record<string, string>>;
+  limit?: number;
+  /** Optional refresh trigger — incrementing this re-fetches. */
+  refreshKey?: number | string;
+}>();
+
+const emit = defineEmits<{
+  (e: 'open', node: RecentNode): void;
+  (e: 'error', message: string): void;
+}>();
+
+const items = ref<RecentNode[]>([]);
+const loading = ref(false);
+
+async function load() {
+  loading.value = true;
+  try {
+    const headers = await (props.authHeaders ?? (() => ({})))();
+    const base = props.apiBase ?? '';
+    const limit = props.limit ?? 20;
+    const res = await fetch(`${base}/api/files/manager/recent?limit=${limit}`, {
+      headers,
+      credentials: 'include',
+    });
+    if (res.ok) {
+      const body = await res.json();
+      items.value = Array.isArray(body.entries) ? body.entries : (Array.isArray(body) ? body : []);
+    }
+  } catch (err) {
+    emit('error', err instanceof Error ? err.message : String(err));
+  } finally {
+    loading.value = false;
+  }
+}
+
+function fmtTime(s?: string): string {
+  if (!s) return '';
+  const t = new Date(s).getTime();
+  if (Number.isNaN(t)) return '';
+  const diff = Date.now() - t;
+  if (diff < 60_000) return 'just now';
+  if (diff < 3_600_000) return `${Math.floor(diff / 60_000)}m ago`;
+  if (diff < 86_400_000) return `${Math.floor(diff / 3_600_000)}h ago`;
+  return `${Math.floor(diff / 86_400_000)}d ago`;
+}
+
+onMounted(load);
+watch(() => props.refreshKey, load);
+</script>
+
+<template>
+  <div class="filex-recent">
+    <header>
+      <h3>Recently opened</h3>
+      <button class="filex-recent-refresh" type="button" @click="load" :disabled="loading">
+        ↻
+      </button>
+    </header>
+
+    <ul v-if="items.length">
+      <li v-for="n in items" :key="n.id">
+        <button type="button" @click="emit('open', n)" class="filex-recent-item">
+          <span class="filex-recent-name">{{ n.name }}</span>
+          <span class="filex-recent-meta">{{ fmtTime(n.last_opened) }}</span>
+        </button>
+      </li>
+    </ul>
+    <p v-else-if="!loading" class="filex-recent-empty">Nothing here yet.</p>
+    <p v-else class="filex-recent-empty">Loading…</p>
+  </div>
+</template>
+
+<style scoped>
+.filex-recent {
+  background: var(--fe-bg-elev, var(--filex-bg-card, #ffffff));
+  border: 1px solid var(--fe-border, var(--filex-border, #e5e7eb));
+  border-radius: 8px;
+  padding: 12px;
+  font-size: 13px;
+}
+.filex-recent header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 8px;
+}
+.filex-recent h3 {
+  margin: 0;
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--fe-text, var(--filex-text, #111827));
+}
+.filex-recent-refresh {
+  background: transparent;
+  border: none;
+  color: var(--fe-text-muted, var(--filex-text-muted, #9ca3af));
+  cursor: pointer;
+  font-size: 14px;
+  padding: 2px 6px;
+}
+.filex-recent ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+.filex-recent-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  background: transparent;
+  border: none;
+  padding: 6px 8px;
+  cursor: pointer;
+  border-radius: 4px;
+  text-align: left;
+}
+.filex-recent-item:hover {
+  background: var(--fe-bg-hover, var(--filex-bg-soft, #f3f4f6));
+}
+.filex-recent-name {
+  color: var(--fe-text, var(--filex-text, #111827));
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.filex-recent-meta {
+  color: var(--fe-text-muted, var(--filex-text-muted, #9ca3af));
+  font-size: 11px;
+  margin-left: 8px;
+  flex-shrink: 0;
+}
+.filex-recent-empty {
+  color: var(--fe-text-muted, var(--filex-text-muted, #9ca3af));
+  margin: 4px 0 0;
+}
+</style>

package/src/components/StarButton.vue

@@ -0,0 +1,101 @@
+<script setup lang="ts">
+/**
+ * StarButton — toggleable star indicator for a node.
+ *
+ * Backed by the `node_meta key="starred"` server-side row (see
+ * `POST /api/files/manager/star`). Optimistic update — flips the local
+ * state immediately and rolls back on API error.
+ */
+import { ref, watch } from 'vue';
+
+const props = defineProps<{
+  starred: boolean;
+  nodeId: number;
+  apiBase?: string;
+  /** Auth header builder injected by the parent file explorer. */
+  authHeaders?: () => Record<string, string> | Promise<Record<string, string>>;
+  /** Compact mode for grid view (no label, just the icon). */
+  compact?: boolean;
+}>();
+
+const emit = defineEmits<{
+  (e: 'change', value: boolean): void;
+  (e: 'error', message: string): void;
+}>();
+
+const local = ref(props.starred);
+watch(() => props.starred, (v) => { local.value = v; });
+
+async function toggle() {
+  const next = !local.value;
+  local.value = next; // optimistic
+  try {
+    const headers = {
+      'Content-Type': 'application/json',
+      ...(await (props.authHeaders ?? (() => ({})))()),
+    };
+    const base = props.apiBase ?? '';
+    const res = await fetch(`${base}/api/files/manager/star`, {
+      method: 'POST',
+      headers,
+      credentials: 'include',
+      body: JSON.stringify({ node_id: props.nodeId, starred: next }),
+    });
+    if (!res.ok) throw new Error(`star toggle failed: ${res.status}`);
+    emit('change', next);
+  } catch (err) {
+    local.value = !next; // rollback
+    emit('error', err instanceof Error ? err.message : String(err));
+  }
+}
+</script>
+
+<template>
+  <button
+    type="button"
+    class="filex-star-btn"
+    :class="{ 'is-starred': local, 'is-compact': compact }"
+    :aria-pressed="local"
+    :title="local ? 'Unstar' : 'Star'"
+    @click.stop="toggle"
+  >
+    <svg viewBox="0 0 24 24" width="16" height="16" aria-hidden="true">
+      <path
+        :fill="local ? 'currentColor' : 'none'"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linejoin="round"
+        d="M12 2.5l3.09 6.26 6.91 1-5 4.87 1.18 6.87L12 18.27l-6.18 3.23L7 14.63 2 9.76l6.91-1z"
+      />
+    </svg>
+    <span v-if="!compact" class="filex-star-label">{{ local ? 'Starred' : 'Star' }}</span>
+  </button>
+</template>
+
+<style scoped>
+.filex-star-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  background: transparent;
+  border: 1px solid transparent;
+  border-radius: 6px;
+  padding: 4px 8px;
+  color: var(--filex-text-muted, #9ca3af);
+  cursor: pointer;
+  transition: color 120ms, background 120ms;
+}
+.filex-star-btn:hover {
+  color: var(--filex-accent-amber, #f59e0b);
+  background: var(--filex-bg-soft, rgba(0, 0, 0, 0.04));
+}
+.filex-star-btn.is-starred {
+  color: var(--filex-accent-amber, #f59e0b);
+}
+.filex-star-btn.is-compact {
+  padding: 4px;
+}
+.filex-star-label {
+  font-size: 13px;
+}
+</style>