From f0c7b31c9ebe94c6c26cb0667c7918a7945c8485 Mon Sep 17 00:00:00 2001
From: mirivlad <mirvtop@yandex.ru>
Date: Mon, 29 Jun 2026 03:16:16 +0800
Subject: [PATCH] feat: render inline image previews

---
 plugins/file-preview/frontend/src/index.js | 27 ++++++++++++++++++++++
 plugins/file-preview/plugin.json           |  2 +-
 scripts/smoke-file-preview-plugin.js       | 11 +++++++++
 3 files changed, 39 insertions(+), 1 deletion(-)

diff --git a/plugins/file-preview/frontend/src/index.js b/plugins/file-preview/frontend/src/index.js
index 23817e5..7110ec6 100644
--- a/plugins/file-preview/frontend/src/index.js
+++ b/plugins/file-preview/frontend/src/index.js
@@ -25,6 +25,8 @@
     '.fp-btn{font-size:.75rem;padding:.28rem .58rem;border:1px solid #333;border-radius:4px;background:#1a1a2e;color:#ccc;cursor:pointer}',
     '.fp-btn:hover{background:#2a2a4e;border-color:#4ecca3;color:#4ecca3}',
     '.fp-body{flex:1;min-height:0;overflow:auto;padding:1rem 1.2rem}',
+    '.fp-image-wrap{display:flex;align-items:center;justify-content:center;min-height:220px;margin:0 0 1rem;padding:1rem;background:#090914;border:1px solid #16213e;border-radius:6px}',
+    '.fp-image{display:block;max-width:100%;max-height:62vh;object-fit:contain}',
     '.fp-meta{display:grid;grid-template-columns:max-content 1fr;gap:.45rem .8rem;max-width:760px;font-size:.86rem}',
     '.fp-meta dt{color:#8b8ba8}.fp-meta dd{margin:0;color:#e0e0e0;word-break:break-word}',
     '.fp-kind{margin:0 0 1rem;color:#f0f0ff;font-size:1.1rem}',
@@ -66,6 +68,26 @@
     return (size / (1024 * 1024)).toFixed(1) + ' MB';
   }
 
+  function imageMime(ext, hint) {
+    if (hint && String(hint).indexOf('image/') === 0) return String(hint);
+    if (ext === 'jpg') return 'image/jpeg';
+    if (ext === 'svg') return 'image/svg+xml';
+    if (IMAGE_EXTS.indexOf(ext) !== -1) return 'image/' + ext;
+    return 'application/octet-stream';
+  }
+
+  function renderImage(body, path, meta, ext, bytes) {
+    var src = 'data:' + imageMime(ext, bytes && bytes.mimeHint || meta && meta.mimeHint) + ';base64,' + (bytes && bytes.dataBase64 || '');
+    var img = el('img', {
+      className: 'fp-image',
+      src: src,
+      alt: path,
+      'data-preview-image': 'true'
+    });
+    var wrap = el('div', { className: 'fp-image-wrap' }, [img]);
+    body.appendChild(wrap);
+  }
+
   function renderMeta(body, path, meta, ext) {
     body.className = 'fp-body';
     body.innerHTML = '';
@@ -111,6 +133,11 @@
 
       api.files.metadata(path).then(function (meta) {
         renderMeta(body, path, meta || {}, ext);
+        if (IMAGE_EXTS.indexOf(ext) === -1 || !api.files.readBytes) return null;
+        return api.files.readBytes(path).then(function (bytes) {
+          if (bytes && bytes.dataBase64) renderImage(body, path, meta || {}, ext, bytes);
+          return null;
+        });
       }).catch(function (err) {
         body.className = 'fp-error';
         body.textContent = 'Preview error: ' + (err && err.message ? err.message : String(err));
diff --git a/plugins/file-preview/plugin.json b/plugins/file-preview/plugin.json
index 61e8cc7..2a4bb84 100644
--- a/plugins/file-preview/plugin.json
+++ b/plugins/file-preview/plugin.json
@@ -4,7 +4,7 @@
   "name": "File Preview",
   "version": "0.1.0",
   "apiVersion": "0.1.0",
-  "description": "Read-only image metadata preview provider for vault files.",
+  "description": "Read-only inline image preview provider for vault files.",
   "source": "official",
   "icon": "eye",
   "provides": [
diff --git a/scripts/smoke-file-preview-plugin.js b/scripts/smoke-file-preview-plugin.js
index 7802b9b..afe8d47 100755
--- a/scripts/smoke-file-preview-plugin.js
+++ b/scripts/smoke-file-preview-plugin.js
@@ -123,17 +123,28 @@ async function flush() {
 
   const imageContainer = new FakeNode('div');
   const opened = [];
+  const byteReads = [];
   component.mount(imageContainer, {
     request: { path: 'Images/logo.png', extension: '.png', mode: 'view' },
   }, {
     files: {
       metadata: async () => ({ type: 'file', size: 2048, isText: false, modifiedAt: '2026-06-27T00:00:00Z' }),
+      readBytes: async (relativePath) => {
+        byteReads.push(relativePath);
+        return { relativePath, size: 4, mimeHint: 'image/png', dataBase64: 'iVBORw==' };
+      },
       readText: async () => { throw new Error('file preview should not read text content'); },
       openExternal: async (relativePath) => { opened.push(relativePath); },
     },
   });
   await flush();
   if (!imageContainer.textContent.includes('Image Preview')) throw new Error('image preview metadata was not rendered');
+  if (byteReads[0] !== 'Images/logo.png') throw new Error(`expected readBytes path Images/logo.png, got ${byteReads[0] || '<none>'}`);
+  const previewImage = walk(imageContainer, (node) => node.tagName === 'IMG' && node.getAttribute('data-preview-image') === 'true');
+  if (!previewImage) throw new Error('preview image not rendered');
+  if (previewImage.getAttribute('src') !== 'data:image/png;base64,iVBORw==') {
+    throw new Error(`unexpected preview image src: ${previewImage.getAttribute('src') || '<none>'}`);
+  }
   const openButton = walk(imageContainer, (node) => node.getAttribute && node.getAttribute('data-action') === 'open-external');
   if (!openButton) throw new Error('open external button not found');
   openButton.click();