@brftech/filex-core 0.5.0 → 0.6.0

package/src/components/GalleryView.vue

@@ -0,0 +1,214 @@
+<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 '💾';
+  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

@@ -171,6 +171,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

@@ -361,6 +361,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)"