@brftech/filex-core 0.5.0 → 0.7.0

package/src/components/CommandPalette.vue

@@ -39,6 +39,8 @@ const props = defineProps<{
   canGoUp?: boolean;
   /* bul:s3 — global search callback; absent = older host, group hidden. */
   globalSearch?: (q: string) => Promise<GlobalSearchHit[]>;
+  /* wiring:d1 — false hides the split command (narrow embeds). */
+  splitEnabled?: boolean;
 }>();
 
 const emit = defineEmits<{
@@ -57,6 +59,9 @@ const emit = defineEmits<{
   (e: 'open-theme'): void;
   (e: 'open-shortcut-settings'): void;
   (e: 'start-tour'): void;
+  /* wiring:d1 — tab / split commands */
+  (e: 'tab-new'): void;
+  (e: 'split-toggle'): void;
 }>();
 
 const { t, nodeDisplayName } = useLocale(() => props.locale);
@@ -126,7 +131,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' ? '▦' : '☰', enabled: true },
+    { 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: '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 },
@@ -134,6 +139,9 @@ 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 */
+    { command: 'tab-new', label: t('cmd.tab_new'), icon: '⧉', enabled: true },
+    { command: 'split-toggle', label: t('cmd.split_toggle'), icon: '◫', enabled: props.splitEnabled !== false },
   ];
   return defs
     .filter((d) => d.enabled && matchScore(d.label, q) >= 0)
@@ -322,6 +330,9 @@ function choose(item?: PaletteItem) {
       case 'open-theme': emit('open-theme'); break;
       case 'open-shortcut-settings': emit('open-shortcut-settings'); break;
       case 'start-tour': emit('start-tour'); break;
+      /* wiring:d1 */
+      case 'tab-new': emit('tab-new'); break;
+      case 'split-toggle': emit('split-toggle'); break;
     }
   }
 }

package/src/components/EncryptedFolderModal.vue

@@ -0,0 +1,125 @@
+<script setup lang="ts">
+/**
+ * EncryptedFolderModal — create an E2E-encrypted folder (wiring:e2).
+ *
+ * Collects folder name + password ×2 and an explicit "I understand there
+ * is NO recovery" acknowledgement. The parent (FileExplorer) performs the
+ * actual newfolder + marker-upload dance; this modal never touches the
+ * network and never stores the password anywhere.
+ *
+ * Crypto scheme + threat model: docs/E2E-ENCRYPTION.md.
+ */
+import { ref, watch } from 'vue';
+import type { LocaleCode } from '../types/ExplorerConfig';
+import { useLocale } from '../composables/useLocale';
+import { E2E_MIN_PASSWORD_LEN } from '../lib/e2ecrypto';
+import Modal from '../modals/Modal.vue';
+
+const props = defineProps<{
+  open: boolean;
+  locale: LocaleCode;
+  /** True while the parent is creating the folder + uploading the marker. */
+  busy?: boolean;
+}>();
+
+const emit = defineEmits<{
+  (e: 'close'): void;
+  (e: 'submit', payload: { name: string; password: string }): void;
+}>();
+
+const { t } = useLocale(() => props.locale);
+const name = ref('');
+const password = ref('');
+const password2 = ref('');
+const ack = ref(false);
+const err = ref<string | null>(null);
+
+watch(
+  () => props.open,
+  (v) => {
+    if (v) {
+      name.value = '';
+      password.value = '';
+      password2.value = '';
+      ack.value = false;
+      err.value = null;
+    }
+  },
+);
+
+function submit() {
+  if (props.busy) return;
+  const clean = name.value.trim();
+  if (!clean) {
+    err.value = t('modal.newfolder.placeholder');
+    return;
+  }
+  if (/[\\/]/.test(clean) || clean === '.' || clean === '..' || clean.startsWith('.filex')) {
+    err.value = t('e2e.create.bad_name');
+    return;
+  }
+  if (password.value.length < E2E_MIN_PASSWORD_LEN) {
+    err.value = t('e2e.create.pw_short');
+    return;
+  }
+  if (password.value !== password2.value) {
+    err.value = t('e2e.create.pw_mismatch');
+    return;
+  }
+  if (!ack.value) {
+    err.value = t('e2e.create.ack_required');
+    return;
+  }
+  err.value = null;
+  emit('submit', { name: clean, password: password.value });
+}
+</script>
+
+<template>
+  <Modal :open="open" :title="t('e2e.create.title')" size="sm" @close="emit('close')">
+    <form class="fe-e2e-form" @submit.prevent="submit">
+      <input
+        v-model="name"
+        type="text"
+        class="fe-input"
+        :placeholder="t('modal.newfolder.placeholder')"
+        autocomplete="off"
+        :disabled="busy"
+      />
+      <input
+        v-model="password"
+        type="password"
+        class="fe-input"
+        :placeholder="t('e2e.create.pw_placeholder')"
+        autocomplete="new-password"
+        :disabled="busy"
+      />
+      <input
+        v-model="password2"
+        type="password"
+        class="fe-input"
+        :placeholder="t('e2e.create.pw2_placeholder')"
+        autocomplete="new-password"
+        :disabled="busy"
+        @keydown.enter.prevent="submit"
+      />
+      <div class="fe-e2e-warn" role="alert">
+        <strong>{{ t('e2e.create.warn_title') }}</strong>
+        <p>{{ t('e2e.create.warn_body') }}</p>
+      </div>
+      <label class="fe-e2e-ack">
+        <input v-model="ack" type="checkbox" :disabled="busy" />
+        <span>{{ t('e2e.create.ack') }}</span>
+      </label>
+      <p v-if="err" class="fe-form__error">{{ err }}</p>
+    </form>
+    <template #actions>
+      <button type="button" class="fe-btn" :disabled="busy" @click="emit('close')">
+        {{ t('modal.newfolder.cancel') }}
+      </button>
+      <button type="button" class="fe-btn fe-btn--primary" :disabled="busy" @click="submit">
+        {{ busy ? t('e2e.create.busy') : t('e2e.create.create') }}
+      </button>
+    </template>
+  </Modal>
+</template>

package/src/components/GalleryView.vue

@@ -0,0 +1,215 @@
+<script setup lang="ts">
+// (unscoped styles by design — see base.css wiring:d2 block; SFC scoped
+// styles are banned for webcomponent data-v hash mismatch reasons.)
+/**
+ * GalleryView — wiring:d2. Third view mode: large-thumbnail gallery for
+ * visual browsing (photos/videos). Derived from GridView (same props/emits,
+ * same listbox a11y, same selection/drag/touch contract) but renders big
+ * square tiles: thumbnail (or SVG file-type icon fallback) with the name
+ * below and size+date revealed on hover/focus. GridView itself is untouched.
+ */
+import { ref } from 'vue';
+import type { FileNode } from '../types/FileNode';
+import type { LocaleCode } from '../types/ExplorerConfig';
+import { useLocale } from '../composables/useLocale';
+import { fileIconSvg } from '../lib/fileIcons';
+import { applyDragGhost } from '../lib/dragGhost';
+
+const props = defineProps<{
+  files: FileNode[];
+  selected: Set<string>;
+  clipped?: Set<string>;
+  showParentPath?: boolean;
+  locale: LocaleCode;
+  loading?: boolean;
+  /** Authenticated thumb resolver (useThumbs.src) — same contract as
+   *  GridView: raw `thumb_url` is root-relative and unauthenticated, so
+   *  embedded hosts NEED this. null = icon fallback. */
+  thumbSrc?: (n: FileNode) => string | null;
+}>();
+
+const emit = defineEmits<{
+  (e: 'click-card', node: FileNode, mod: { ctrl: boolean; shift: boolean }): void;
+  (e: 'dbl-card', node: FileNode): void;
+  (e: 'context-card', node: FileNode, ev: MouseEvent): void;
+  (e: 'item-drag-start', node: FileNode, ev: DragEvent): void;
+  (e: 'item-drop-into', target: FileNode, ev: DragEvent): void;
+}>();
+
+const { t, formatSize, nodeDisplayName } = useLocale(() => props.locale);
+
+function thumbOf(n: FileNode): string | null {
+  return props.thumbSrc ? props.thumbSrc(n) : (n.thumb_url ?? null);
+}
+
+function isSelected(n: FileNode): boolean {
+  return props.selected.has(n.path);
+}
+
+function onClick(n: FileNode, ev: MouseEvent) {
+  emit('click-card', n, { ctrl: ev.ctrlKey || ev.metaKey, shift: ev.shiftKey });
+}
+
+function onDbl(n: FileNode) {
+  emit('dbl-card', n);
+}
+
+function onCtx(n: FileNode, ev: MouseEvent) {
+  ev.preventDefault();
+  ev.stopPropagation();
+  emit('context-card', n, ev);
+}
+
+function onItemDragStart(n: FileNode, ev: DragEvent) {
+  applyDragGhost(
+    ev,
+    nodeDisplayName(n),
+    props.selected.has(n.path) ? props.selected.size : 1,
+  );
+  emit('item-drag-start', n, ev);
+}
+
+// Drop-target highlight — mirrors GridView (visual layer only).
+const dropTargetPath = ref<string | null>(null);
+
+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';
+  dropTargetPath.value = n.path;
+}
+
+function onItemDragLeave(n: FileNode) {
+  if (dropTargetPath.value === n.path) dropTargetPath.value = null;
+}
+
+function onItemDrop(n: FileNode, ev: DragEvent) {
+  dropTargetPath.value = null;
+  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);
+}
+
+// Long-press → context menu, same as GridView (touch parity).
+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-card', pressTarget, {
+        clientX: t0.clientX,
+        clientY: t0.clientY,
+        preventDefault: () => {},
+      } as unknown as MouseEvent);
+    }
+  }, 500);
+}
+function cancelPress() {
+  if (pressTimer) clearTimeout(pressTimer);
+  pressTarget = null;
+}
+
+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);
+}
+
+// Special rows keep their emoji (trash/storage are not file-TYPE icons).
+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 */
+  return null;
+}
+
+function displayDate(ms: number | undefined): string {
+  if (!ms) return '';
+  const d = new Date(ms * (ms < 1e12 ? 1000 : 1));
+  return d.toLocaleString();
+}
+
+// Hover meta line: size for files, entry count (when known) for dirs.
+function metaFor(n: FileNode): string {
+  const date = displayDate(n.last_modified);
+  const size = n.type === 'dir' ? '' : formatSize(n.size);
+  return [size, date].filter((s) => !!s).join(' · ');
+}
+</script>
+
+<template>
+  <div
+    class="fe-gal"
+    :class="{ 'is-loading': loading }"
+    role="listbox"
+    aria-multiselectable="true"
+    :aria-label="t('gallery.aria')"
+    :aria-busy="loading ? 'true' : undefined"
+  >
+    <div
+      v-for="n in files"
+      :key="n.path"
+      class="fe-gal__card"
+      :class="{
+        'is-selected': isSelected(n),
+        'is-dir': n.type === 'dir',
+        'is-trash': n.trashed,
+        'is-clipped': clipped?.has(n.path),
+        'is-droptarget': dropTargetPath === n.path,
+      }"
+      tabindex="0"
+      role="option"
+      :aria-selected="isSelected(n) ? 'true' : 'false'"
+      :aria-label="nodeDisplayName(n)"
+      draggable="true"
+      @click="onClick(n, $event)"
+      @dblclick="onDbl(n)"
+      @contextmenu="onCtx(n, $event)"
+      @dragstart="onItemDragStart(n, $event)"
+      @dragover="onItemDragOver(n, $event)"
+      @dragleave="onItemDragLeave(n)"
+      @drop="onItemDrop(n, $event)"
+      @touchstart.passive="onTouchStart(n, $event)"
+      @touchend="cancelPress"
+      @touchmove="cancelPress"
+    >
+      <div class="fe-gal__thumb">
+        <!-- draggable="false" for the same reason as GridView: HTML5 image
+             drag adds a 'Files' MIME to dataTransfer, which would trip the
+             parent's upload handler on internal drags. -->
+        <img
+          v-if="thumbOf(n)"
+          :src="thumbOf(n)!"
+          :alt="n.basename"
+          loading="lazy"
+          draggable="false"
+        />
+        <span v-else-if="specialEmojiFor(n)" class="fe-gal__icon">{{ specialEmojiFor(n) }}</span>
+        <!-- eslint-disable-next-line vue/no-v-html — static markup from lib/fileIcons -->
+        <span v-else class="fe-gal__icon fe-gal__icon--svg" v-html="fileIconSvg(n)"></span>
+        <div class="fe-gal__meta" aria-hidden="true">
+          <span v-if="metaFor(n)" class="fe-gal__meta-line">{{ metaFor(n) }}</span>
+          <span
+            v-if="showParentPath && parentDir(n.path)"
+            class="fe-gal__meta-line fe-gal__meta-line--path"
+            :title="parentDir(n.path)"
+          >{{ parentDir(n.path) }}</span>
+        </div>
+      </div>
+      <div class="fe-gal__label" :title="n.basename">
+        {{ nodeDisplayName(n) }}
+      </div>
+    </div>
+    <div v-if="!loading && files.length === 0" class="fe-gal__empty">
+      {{ t('empty.folder') }}
+    </div>
+  </div>
+</template>

package/src/components/GridView.vue

@@ -126,6 +126,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 */
   return null;
 }
 
@@ -171,6 +172,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 */"
       draggable="true"
       @click="onClick(n, $event)"
       @dblclick="onDbl(n)"

package/src/components/InspectorPanel.vue

@@ -244,6 +244,114 @@ watch(
   () => void refresh(),
   { immediate: true },
 );
+
+/* === calisma:d3 — Yorumlar (node comments) ===
+ * Flat chronological thread per node (files AND folders — every backend
+ * row carries an id). Loaded through its own watcher + seq guard so the
+ * existing refresh() stays untouched. Add/delete are NOT optimistic: the
+ * list re-fetches after each successful API round-trip. The section hides
+ * silently when the backend gates (401/403) or lacks (404) the endpoint.
+ */
+import type { NodeComment } from '../composables/useFileApi';
+
+const commentsState = ref<SectionState>('hidden');
+const comments = ref<NodeComment[]>([]);
+const commentDraft = ref('');
+const commentBusy = ref(false);
+const commentNodeId = computed<number | null>(() =>
+  typeof single.value?.id === 'number' ? (single.value.id as number) : null,
+);
+let commentSeq = 0;
+
+async function loadComments(): Promise<void> {
+  const seq = ++commentSeq;
+  const id = commentNodeId.value;
+  if (id == null) {
+    commentsState.value = 'hidden';
+    comments.value = [];
+    return;
+  }
+  commentsState.value = comments.value.length > 0 ? 'ok' : 'loading';
+  try {
+    const list = await props.api.listComments(id);
+    if (seq !== commentSeq) return;
+    comments.value = list;
+    commentsState.value = 'ok';
+  } catch (err) {
+    if (seq !== commentSeq) return;
+    comments.value = [];
+    const status = (err as { status?: number }).status;
+    commentsState.value =
+      status === 401 || status === 403 || status === 404 ? 'hidden' : 'error';
+  }
+}
+
+async function sendComment(): Promise<void> {
+  const id = commentNodeId.value;
+  const body = commentDraft.value.trim();
+  if (id == null || body === '' || commentBusy.value) return;
+  commentBusy.value = true;
+  try {
+    await props.api.addComment(id, body);
+    commentDraft.value = '';
+    await loadComments();
+  } catch (err) {
+    emit('toast', (err as Error).message);
+  } finally {
+    commentBusy.value = false;
+  }
+}
+
+async function removeComment(c: NodeComment): Promise<void> {
+  if (commentBusy.value) return;
+  commentBusy.value = true;
+  try {
+    await props.api.deleteComment(c.id);
+    await loadComments();
+  } catch (err) {
+    emit('toast', (err as Error).message);
+  } finally {
+    commentBusy.value = false;
+  }
+}
+
+/** Relative "3 minutes ago" stamp via Intl (locale-aware, no i18n keys). */
+function relativeTime(iso: string): string {
+  const ms = Date.parse(iso);
+  if (Number.isNaN(ms)) return iso;
+  const diffS = Math.round((ms - Date.now()) / 1000);
+  const abs = Math.abs(diffS);
+  const units: Array<[Intl.RelativeTimeFormatUnit, number]> = [
+    ['year', 31536000],
+    ['month', 2592000],
+    ['day', 86400],
+    ['hour', 3600],
+    ['minute', 60],
+  ];
+  try {
+    const rtf = new Intl.RelativeTimeFormat(
+      props.locale === 'en' ? 'en' : 'tr',
+      { numeric: 'auto' },
+    );
+    for (const [unit, secs] of units) {
+      if (abs >= secs) return rtf.format(Math.trunc(diffS / secs), unit);
+    }
+    return rtf.format(diffS, 'second');
+  } catch {
+    return formatDateStr(iso);
+  }
+}
+
+watch(
+  () => commentNodeId.value,
+  () => {
+    comments.value = [];
+    commentDraft.value = '';
+    void loadComments();
+  },
+  { immediate: true },
+);
+/* === /calisma:d3 === */
 </script>
 
 <template>
@@ -450,6 +558,68 @@ watch(
           </li>
         </ul>
       </section>
+
+      <!-- ══ calisma:d3 — Yorumlar ══ -->
+      <section
+        v-if="commentsState === 'ok' || commentsState === 'error'"
+        class="fe-inspector__section"
+      >
+        <h3 class="fe-inspector__heading">
+          {{ t('inspector.section.comments') }}
+          <span
+            v-if="comments.length > 0"
+            class="fe-inspector__countbadge"
+          >{{ comments.length }}</span>
+        </h3>
+
+        <p v-if="commentsState === 'error'" class="fe-inspector__empty">
+          {{ t('inspector.error') }}
+        </p>
+        <template v-else>
+          <p v-if="comments.length === 0" class="fe-inspector__empty">
+            {{ t('inspector.comments.empty') }}
+          </p>
+          <ul v-else class="fe-inspector__comments">
+            <li v-for="c in comments" :key="c.id" class="fe-inspector__comment">
+              <div class="fe-inspector__comment-top">
+                <span class="fe-inspector__comment-author" :title="c.author_name">
+                  {{ c.author_name || '—' }}
+                </span>
+                <span class="fe-inspector__comment-time" :title="formatDateStr(c.created_at)">
+                  {{ relativeTime(c.created_at) }}
+                </span>
+                <button
+                  v-if="c.can_delete"
+                  type="button"
+                  class="fe-inspector__comment-del"
+                  :disabled="commentBusy"
+                  :title="t('inspector.comments.delete')"
+                  :aria-label="t('inspector.comments.delete')"
+                  @click="removeComment(c)"
+                >×</button>
+              </div>
+              <p class="fe-inspector__comment-body">{{ c.body }}</p>
+            </li>
+          </ul>
+          <form class="fe-inspector__comment-form" @submit.prevent="sendComment">
+            <input
+              v-model="commentDraft"
+              type="text"
+              class="fe-inspector__comment-input"
+              maxlength="5000"
+              :placeholder="t('inspector.comments.placeholder')"
+              :aria-label="t('inspector.comments.placeholder')"
+              :disabled="commentBusy"
+            />
+            <button
+              type="submit"
+              class="fe-btn fe-btn--primary fe-btn--sm"
+              :disabled="commentBusy || commentDraft.trim() === ''"
+            >{{ t('inspector.comments.send') }}</button>
+          </form>
+        </template>
+      </section>
+      <!-- ══ /calisma:d3 ══ -->
     </div>
   </aside>
 </template>

package/src/components/ListView.vue

@@ -139,6 +139,7 @@ function cancelPress() {
 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 */
   return null;
 }
 
@@ -361,6 +362,7 @@ const segments = computed<Segment[]>(() => {
         tabindex="0"
         :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 */"
         draggable="true"
         @click="onRowClick(n, $event)"
         @dblclick="onRowDbl(n)"