@brftech/filex-core 0.39.1 → 0.41.0

package/src/components/GridView.vue

@@ -1,13 +1,38 @@
 <script setup lang="ts">
 /**
- * GridView — card grid. Thumbnails preferred, fall back to icon.
+ * GridView — card grid.
+ *
+ * gorunum:v1 — the card has an anatomy now, and it is not the same anatomy
+ * for a folder and for a file:
+ *
+ *   folder  186×56   glyph · name over "Folder" · ⋮
+ *   file    186×166  184×108 preview · 56px footer (24px type tile · name
+ *                    over "1.7 MB • Sep 9, 2026" · ⋮)
+ *
+ * A folder has no preview to show and no size or date worth printing, so a
+ * square thumbnail box above its name was 108px of nothing on the most common
+ * row in any listing. The two shapes share one footer row — the folder card
+ * IS that row — so there is a single piece of markup to change when the row
+ * changes.
  */
-import { computed, ref } from 'vue'; /* wiring:c4 */
+import { computed, onBeforeUnmount, ref, watch } from 'vue'; /* wiring:c4 */
 import type { FileNode } from '../types/FileNode';
 import { hasInternalDrag } from '../lib/dragOut';
 import type { LocaleCode } from '../types/ExplorerConfig';
 import { useLocale } from '../composables/useLocale';
-import { fileIconSvg } from '../lib/fileIcons';
+import { encryptedFolderTile, fileIconTile, isEncryptedFolder } from '../lib/fileIcons';
+import {
+  createFilePreviews,
+  drawsAsPage,
+  drawsAsVideo,
+  type FilePreview,
+} from '../lib/filePreview'; /* gorunum:v1-preview */
+import { byFoldersFirst, parentDirOf } from '../lib/listing'; /* gorunum:v1 */
+import {
+  groupByDate,
+  groupingActive,
+} from '../lib/dateGroups'; /* gruplama */
+import { useSortStore, type ListingOrder } from '../lib/sortOrder'; /* gruplama */
 import StarButton from './StarButton.vue';
 import { snippetSegments } from '../lib/snippet'; /* bul:s3 */
 import { applyDragGhost } from '../lib/dragGhost'; /* wiring:c4 */
@@ -49,17 +74,39 @@ const props = defineProps<{
   authHeaders?: () => Record<string, string> | Promise<Record<string, string>>;
   authCredentials?: RequestCredentials;
   /**
-   * surucu:d1 — draw "Folders" and "Files" as labelled sections
-   * (`uiProfile: 'drive'`). Absent/false renders the flat grid unchanged, down
-   * to the DOM: the two headings are the only extra nodes, and without this
-   * prop none are emitted.
+   * surucu:d1 — draw "Folders" and "Files" as labelled sections.
    *
-   * The rows are re-ordered HERE (directories first, stable within each group)
-   * rather than trusted to arrive that way — the listing endpoint promises no
-   * grouping, and a "Folders" heading with a spreadsheet under it is worse
-   * than no heading at all.
+   * ⚠ It used to arrive with `uiProfile: 'drive'`; the explorer now passes it
+   * unconditionally, because the sections are part of the shell rather than of
+   * a profile. The prop stays for an embedder mounting this view directly:
+   * absent/false renders the grid without them, down to the DOM — the two
+   * headings are the only extra nodes, and without this prop none are emitted.
+   *
+   * ⚠ The prop gates the HEADINGS, not the order. Folders come before files
+   * in every profile (see `ordered`) — a heading only names a group that is
+   * there either way.
    */
   sections?: boolean;
+  /**
+   * gruplama — where these rows got their order, exactly as `ListView` takes
+   * it (`lib/sortOrder.ListingOrder`).
+   *
+   * ⚠ It changes nothing about the ORDER here — the pane hands this view rows
+   * that are already sorted, and `compareInOrder('relevance')` is
+   * byte-for-byte the folders-first pass below. It is read for one thing: a
+   * date heading over a RANKED answer would be a claim about an order the
+   * rows are not in. Omitted = an ordinary folder listing.
+   */
+  order?: ListingOrder;
+  /**
+   * gorunum:v1-preview — we are inside an E2E-encrypted folder.
+   *
+   * Every body on the wire in there is ciphertext, so reading a file's first
+   * kilobytes to draw its first lines would spend a request to learn that the
+   * bytes do not decode. The text preview stays off; the cards keep their
+   * type tiles. Absent/false = the ordinary case.
+   */
+  e2eActive?: boolean;
 }>();
 
 const emit = defineEmits<{
@@ -69,26 +116,83 @@ const emit = defineEmits<{
   (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;
+  /** gorunum:v1 — the order this view renders, so the parent's shift-range
+   *  arithmetic runs over what the user sees rather than over the backend's
+   *  answer. See the same emit in ListView. */
+  (e: 'display-order', nodes: FileNode[]): void;
 }>();
 
-/* surucu:d1 — grouped order + the two headings. `sort` is stable, so within
- * folders and within files the listing's own order survives untouched. */
-const ordered = computed<FileNode[]>(() =>
-  props.sections
-    ? [...props.files].sort((a, b) => (a.type === 'dir' ? 0 : 1) - (b.type === 'dir' ? 0 : 1))
-    : props.files,
+/**
+ * gorunum:v1 — folders first, always, and by the SHARED comparator
+ * (`lib/listing.byFoldersFirst`) the list view uses as its own primary key.
+ * Two sorts, one rule: a second private copy of "dirs are 0, files are 1" is
+ * how the grid and the list end up disagreeing (filex lesson #67).
+ *
+ * `Array.prototype.sort` is stable, and this comparator returns 0 for any two
+ * nodes of the same kind, so whatever order the parent sends survives
+ * untouched INSIDE each group. The day a sort control reaches the grid,
+ * descending will mean folders descending and then files descending, without
+ * this line being touched.
+ *
+ * Display order only. Selection is keyed by path and the explorer's shift-range
+ * still walks its own list, so nothing here moves an index the parent holds.
+ */
+const { t, formatSize, nodeDisplayName, formatDate, formatMonthYear, zonedYearMonth, toDate } =
+  useLocale(() => props.locale);
+
+const ordered = computed<FileNode[]>(() => [...props.files].sort(byFoldersFirst));
+watch(
+  ordered,
+  (list) => emit('display-order', list),
+  { immediate: true },
 );
+
 const firstDirPath = computed(() => ordered.value.find((f) => f.type === 'dir')?.path ?? null);
 const firstFilePath = computed(() => ordered.value.find((f) => f.type !== 'dir')?.path ?? null);
 
+/* gruplama — the same sort this pane's list view reads, by injection, so the
+ * two cannot disagree about whether a date heading is honest right now. */
+const sort = useSortStore();
+
+/**
+ * gruplama — THE DATE HEADINGS, from `lib/dateGroups`, which is also where the
+ * list gets them. Not a grid variant of the ladder: a rung added there has to
+ * appear here on the same day or the two views name the same day differently.
+ */
+const grouped = computed(() =>
+  groupByDate(ordered.value, {
+    active: groupingActive(sort.key.value, props.order),
+    dateOf: (n) => toDate(n.last_modified),
+    /* Folders keep their own run at the top — the same rule the list follows,
+     * and the reason "folders before files" survives a date sort. Here the run
+     * is the one that already had a name. */
+    aside: (n) =>
+      n.type === 'dir'
+        ? { id: 'dirs', label: props.sections ? t('drive.section.folders') : null }
+        : null,
+    labels: { t, formatMonthYear, zonedYearMonth },
+  }),
+);
+
+/**
+ * ⚠⚠ TWO HEADING SYSTEMS DO NOT STACK. While the rows are in date order the
+ * "Files" label is replaced by the date headings rather than sitting above
+ * them: the date headings ARE the files' headings, and "Files" followed
+ * immediately by "Today" names one group twice and tells the reader nothing
+ * the second time. "Folders" stays, because the folders are still one run and
+ * no date can name it.
+ *
+ * Off that order (any other sort key, or a ranked search answer) the grid
+ * keeps exactly the Folders / Files sections it has always drawn.
+ */
 function headingBefore(n: FileNode): string | null {
+  if (grouped.value.active) return grouped.value.headingBefore(n);
   if (!props.sections) return null;
   if (n.path === firstDirPath.value) return t('drive.section.folders');
   if (n.path === firstFilePath.value) return t('drive.section.files');
   return null;
 }
 
-const { t, formatSize, nodeDisplayName } = useLocale(() => props.locale);
 
 // Prefer the authenticated resolver when the host wired one; otherwise fall
 // back to the raw URL (legacy same-origin behavior).
@@ -96,6 +200,61 @@ function thumbOf(n: FileNode): string | null {
   return props.thumbSrc ? props.thumbSrc(n) : (n.thumb_url ?? null);
 }
 
+/* ==================================================================
+ * gorunum:v1-preview — the card shows the file's own first lines.
+ *
+ * ⚠ The brief for this slice said these files "have no thumbnail". Measured
+ * on the local backend, they do: `internal/thumb/generic.go` renders a card
+ * tinted from a hash of the extension with the letters "TS"/"CSV"/"ZIP" drawn
+ * in it, and the listing hands out a `thumb_url` for it (app.ts → a 1,745-byte
+ * JPEG). So the choice is not "preview or nothing", it is "the file's first
+ * lines, or a coloured rectangle repeating the extension the footer tile and
+ * the Type column both already say".
+ *
+ * Hence the order below: for a node we can read as TEXT the `<img>` is not
+ * rendered at all — which also means `thumbOf()` is never called for it and
+ * `useThumbs` never fetches that generic JPEG, so this costs the same one
+ * request it replaces. Every other node is untouched: images, video, audio
+ * and PDFs keep their real, content-derived thumbnails.
+ *
+ * While the read is in flight (and if it fails, or the bytes turn out not to
+ * be text) the card shows the type tile on `--fe-bg-elev` — the spec's stated
+ * fallback, and no flash of a placeholder we are about to replace.
+ * ================================================================== */
+const previews = createFilePreviews({
+  // Read once: the explorer's `config.apiBase` is fixed for the life of a
+  // mounted panel, and `enabled` has to be answerable at construction.
+  apiBase: props.apiBase,
+  // Wrapped rather than passed, so a parent that re-creates its arrow on each
+  // render is still called through the CURRENT prop. ⚠ The builder is async;
+  // `createFilePreviews` awaits it (see the note there — a Promise spread into
+  // a headers object sends no Authorization and 401s in silence).
+  authHeaders: props.authHeaders ? () => props.authHeaders!() : undefined,
+  credentials: props.authCredentials,
+  disabled: () => props.e2eActive === true,
+});
+onBeforeUnmount(() => previews.dispose());
+
+/** Non-null only for a node whose bytes we can read as text. */
+function previewKind(n: FileNode) {
+  return previews.kindFor(n);
+}
+
+/** At most one element, so the template gets a typed local without a
+ *  non-null assertion repeated at every nested loop. */
+function previewFor(n: FileNode): FilePreview[] {
+  const p = previews.get(n);
+  return p ? [p] : [];
+}
+
+/** Template-ref sink: the preview box itself is what the IntersectionObserver
+ *  watches, so nothing is fetched for a card that never comes into view.
+ *  ⚠ `unknown` because a Vue template `:ref` hands back an Element, a
+ *  component instance or null depending on what it is put on. */
+function bindPreview(el: unknown, n: FileNode) {
+  previews.bind(el instanceof Element ? el : null, n);
+}
+
 /** A card carries a star when the host wired the API and the node is a file
  *  with a server id — the same rule the list row uses. */
 function canStar(n: FileNode): boolean {
@@ -121,6 +280,17 @@ function onCtx(n: FileNode, ev: MouseEvent) {
   emit('context-card', n, ev);
 }
 
+/**
+ * gorunum:v1 — the ⋮ button. It calls the RIGHT-CLICK handler with the same
+ * node and the same event, so the menu it opens is the context menu, built by
+ * the explorer's one `selectionActionList`. There is deliberately no action
+ * list here: a second one drifts from the first the week after it is written
+ * (filex lesson #67).
+ */
+function onMenuButton(n: FileNode, ev: MouseEvent) {
+  onCtx(n, ev);
+}
+
 function onItemDragStart(n: FileNode, ev: DragEvent) {
   /* wiring:c4 — custom ghost (name + multi-select count badge), visual only. */
   applyDragGhost(
@@ -178,15 +348,27 @@ function cancelPress() {
   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);
+/**
+ * The card's second line. A file prints "1.7 MB • Sep 9, 2026"; a folder
+ * prints what it is, because its size is 0 and its date is the date something
+ * inside it changed.
+ *
+ * Same epoch normalization the list and the gallery use (the backend has sent
+ * both seconds and milliseconds), and the same locale the rest of the card is
+ * drawn in — `toLocaleDateString` with the explorer's own tag, not the
+ * browser's, so a Turkish panel says "9 Eyl 2026" whatever the OS is set to.
+ */
+function displayDate(ms: number | undefined): string {
+  return formatDate(ms);
+}
+
+function captionFor(n: FileNode): string {
+  if (n.type === 'dir') return t('node.folder');
+  const when = displayDate(n.last_modified);
+  const size = formatSize(n.size);
+  return when ? `${size} • ${when}` : size;
 }
 
-// Special rows keep their emoji (trash/storage are not file-TYPE icons);
-// everything else renders the SVG icon set from lib/fileIcons.
 function keepGlyph(b: 'kept' | 'syncing' | 'cloud' | 'partial'): string {
   if (b === 'kept') return '\u2713';
   if (b === 'syncing') return '\u27f3';
@@ -194,13 +376,6 @@ function keepGlyph(b: 'kept' | 'syncing' | 'cloud' | 'partial'): string {
   return '\u2601';
 }
 
-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 — encrypted-folder badge */
-  return null;
-}
-
 /* bul:s3 — search-result enrichment, same presence-gating as ListView:
  * only search hits carry `snippet`, so normal listings render nothing. */
 function cardSnippet(n: FileNode): string {
@@ -236,6 +411,8 @@ function snippetTitle(snippet: string): string {
     <div
       class="fe-grid__card"
       :class="{
+        'fe-grid__card--folder': n.type === 'dir' /* gorunum:v1 */,
+        'fe-grid__card--file': n.type !== 'dir' /* gorunum:v1 */,
         'is-selected': isSelected(n),
         'is-dir': n.type === 'dir',
         'is-trash': n.trashed,
@@ -259,7 +436,49 @@ function snippetTitle(snippet: string): string {
       @touchend="cancelPress"
       @touchmove="cancelPress"
     >
-      <div class="fe-grid__thumb">
+      <!-- gorunum:v1 — the preview, files only: 184×108. A thumbnail when
+           there is one, otherwise the type tile centred on --fe-bg-elev.
+           gorunum:v1-preview — and, for a file we can read as text, its own
+           first lines instead (see the block comment in the script). -->
+      <div v-if="n.type !== 'dir'" class="fe-grid__thumb" :ref="(el) => bindPreview(el, n)">
+        <!-- gorunum:v1-preview — text-readable kinds never reach the <img>
+             branch, so no generic placeholder thumbnail is fetched for them. -->
+        <template v-if="previewKind(n)">
+          <!-- ⚠ Interpolated, never v-html: this is somebody's file content. -->
+          <div
+            v-for="p in previewFor(n)"
+            :key="'fprev'"
+            class="fe-fprev"
+            :class="'fe-fprev--' + p.kind"
+            :style="p.kind === 'table' ? { '--fprev-cols': String(p.cols) } : undefined"
+            aria-hidden="true"
+          >
+            <!-- One grid, cells emitted flat: <template> makes no DOM, so a
+                 short row's padding cells keep every column aligned. -->
+            <template v-if="p.kind === 'table'">
+              <template v-for="(row, ri) in p.rows" :key="ri">
+                <span
+                  v-for="(cell, ci) in row"
+                  :key="ci"
+                  class="fe-fprev__cell"
+                  :class="{ 'is-head': ri === 0 }"
+                >{{ cell }}</span>
+              </template>
+            </template>
+            <template v-else>
+              <div v-for="(ln, li) in p.lines" :key="li" class="fe-fprev__line"><span
+                v-if="ln.tint"
+                class="fe-fprev__tint"
+              >{{ ln.indent }}{{ ln.tint }}</span>{{ ln.text }}</div>
+            </template>
+          </div>
+          <!-- eslint-disable-next-line vue/no-v-html — static markup from lib/fileIcons -->
+          <span
+            v-if="previewFor(n).length === 0"
+            class="fe-grid__icon fe-grid__icon--svg"
+            v-html="fileIconTile(n)"
+          ></span>
+        </template>
         <!--
           draggable="false" — HTML5 image drag dataTransfer adds 'Files'
           MIME, which trips the parent's upload handler; without this
@@ -267,20 +486,41 @@ function snippetTitle(snippet: string): string {
           Parent card stays draggable=true so internal move works.
         -->
         <img
-          v-if="thumbOf(n)"
+          v-else-if="thumbOf(n)"
           :src="thumbOf(n)!"
           :alt="n.basename"
+          :class="{ 'fe-thumb--page': drawsAsPage(n) /* gorunum:v1-preview — crop a page from its TOP */ }"
           loading="lazy"
           draggable="false"
         />
-        <span v-else-if="specialEmojiFor(n)" class="fe-grid__icon">{{ specialEmojiFor(n) }}</span>
+        <!-- ikon:emoji — an encrypted folder is still a FOLDER, so it keeps the
+             folder's own shape and colour with the padlock cut out of it; the
+             🔒 it replaces said "locked" and nothing else. One definition,
+             in lib/fileIcons, for all three views. -->
+        <!-- eslint-disable-next-line vue/no-v-html — static markup from lib/fileIcons -->
+        <span
+          v-else-if="isEncryptedFolder(n)"
+          class="fe-grid__icon fe-grid__icon--svg"
+          role="img"
+          :aria-label="t('e2e.badge')"
+          v-html="encryptedFolderTile()"
+        ></span>
         <!-- eslint-disable-next-line vue/no-v-html — static markup from lib/fileIcons -->
-        <span v-else class="fe-grid__icon fe-grid__icon--svg" v-html="fileIconSvg(n)"></span>
+        <span v-else class="fe-grid__icon fe-grid__icon--svg" v-html="fileIconTile(n)"></span>
         <!-- Star, ON the tile. A hover-only affordance would be invisible to
              the person looking for what they starred, so the chip is always
              painted once the file IS starred and only appears on hover/focus
              otherwise (see .fe-grid__star in styles/base.css). @click.stop so
              starring never doubles as a card selection. -->
+        <!-- gorunum:v1-preview — a frame lifted out of a video is, on a card,
+             indistinguishable from a photograph. The badge is the difference,
+             and it is drawn only over a real frame: a video that fell back to
+             its type tile already says what it is. -->
+        <span
+          v-if="!previewKind(n) && thumbOf(n) && drawsAsVideo(n)"
+          class="fe-thumb__play"
+          aria-hidden="true"
+        ></span>
         <div v-if="canStar(n)" class="fe-grid__star" @click.stop @dblclick.stop>
           <StarButton
             :starred="!!starredIds?.has(n.id!)"
@@ -295,30 +535,54 @@ function snippetTitle(snippet: string): string {
           />
         </div>
       </div>
-      <div class="fe-grid__label" :title="n.basename">
-        {{ nodeDisplayName(n) }}
+
+      <!-- gorunum:v1 — the row both cards share: tile · name over caption · ⋮.
+           On a file it is the 56px footer under the preview; on a folder it is
+           the whole 56px card. -->
+      <div class="fe-grid__foot">
+        <!-- eslint-disable-next-line vue/no-v-html — static markup from lib/fileIcons -->
         <span
-          v-if="keepBadgeFor && keepBadgeFor(n)"
-          :class="['fe-keepbadge', 'fe-keepbadge--' + keepBadgeFor(n)]"
-          :title="t('keep.badge_' + keepBadgeFor(n))"
+          v-if="isEncryptedFolder(n)"
+          class="fe-grid__tile fe-grid__tile--svg"
           role="img"
-          :aria-label="t('keep.badge_' + keepBadgeFor(n))"
-        >{{ keepGlyph(keepBadgeFor(n)!) }}</span>
-      </div>
-      <div
-        v-if="showParentPath"
-        class="fe-grid__parent"
-        :title="parentDir(n.path)"
-      >{{ parentDir(n.path) || '—' }}</div>
-      <div class="fe-grid__meta">
-        {{ formatSize(n.size) }}
-      </div>
-      <!-- bul:s3 — content snippet («» → <mark> via TEXT segments, no innerHTML) -->
-      <div v-if="cardSnippet(n)" class="fe-grid__snippet" :title="snippetTitle(cardSnippet(n))">
-        <template v-for="(seg, si) in snippetSegments(cardSnippet(n))" :key="si">
-          <mark v-if="seg.match" class="fe-grid__mark">{{ seg.text }}</mark>
-          <template v-else>{{ seg.text }}</template>
-        </template>
+          :aria-label="t('e2e.badge')"
+          v-html="encryptedFolderTile()"
+        ></span>
+        <!-- eslint-disable-next-line vue/no-v-html — static markup from lib/fileIcons -->
+        <span v-else class="fe-grid__tile fe-grid__tile--svg" v-html="fileIconTile(n)"></span>
+        <div class="fe-grid__main">
+          <div class="fe-grid__label" :title="n.basename">
+            {{ nodeDisplayName(n) }}
+            <span
+              v-if="keepBadgeFor && keepBadgeFor(n)"
+              :class="['fe-keepbadge', 'fe-keepbadge--' + keepBadgeFor(n)]"
+              :title="t('keep.badge_' + keepBadgeFor(n))"
+              role="img"
+              :aria-label="t('keep.badge_' + keepBadgeFor(n))"
+            >{{ keepGlyph(keepBadgeFor(n)!) }}</span>
+          </div>
+          <div class="fe-grid__meta">{{ captionFor(n) }}</div>
+          <div
+            v-if="showParentPath"
+            class="fe-grid__parent"
+            :title="parentDirOf(n.path)"
+          >{{ parentDirOf(n.path) || '—' }}</div>
+          <!-- bul:s3 — content snippet («» → <mark> via TEXT segments, no innerHTML) -->
+          <div v-if="cardSnippet(n)" class="fe-grid__snippet" :title="snippetTitle(cardSnippet(n))">
+            <template v-for="(seg, si) in snippetSegments(cardSnippet(n))" :key="si">
+              <mark v-if="seg.match" class="fe-grid__mark">{{ seg.text }}</mark>
+              <template v-else>{{ seg.text }}</template>
+            </template>
+          </div>
+        </div>
+        <button
+          type="button"
+          class="fe-grid__menu"
+          :aria-label="t('toolbar.more')"
+          :title="t('toolbar.more')"
+          @click.stop="onMenuButton(n, $event)"
+          @dblclick.stop
+        >⋮</button>
       </div>
     </div>
     </template>