Add text file preview window

build-plugin.sh

@@ -2,7 +2,7 @@
 set -eu
 
 PLUGIN="u-navigator"
-VERSION="2026.06.23.r028"
+VERSION="2026.06.23.r029"
 PKG_DIR="packages"
 WORK_DIR=".plugin-build"
 PKG_NAME="${PLUGIN}-${VERSION}.tgz"

plugin-root/usr/local/emhttp/plugins/u-navigator/api/preview.php

@@ -0,0 +1,39 @@
+<?php
+require_once __DIR__ . '/common.php';
+
+const UNAV_PREVIEW_MAX_BYTES = 1048576;
+
+$resolved = unav_existing_path($_GET['path'] ?? null);
+if (!is_file($resolved['path'])) {
+    unav_error(400, 'Preview target must be a file');
+}
+
+$extension = strtolower(pathinfo($resolved['path'], PATHINFO_EXTENSION));
+$allowed = ['txt', 'log', 'md', 'rd', 'rst', 'yaml', 'yml', 'json', 'xml', 'csv', 'ini', 'cfg', 'conf', 'sh', 'php', 'js', 'css', 'html'];
+if (!in_array($extension, $allowed, true)) {
+    unav_error(415, 'Preview is not available for this file type');
+}
+
+$size = filesize($resolved['path']);
+if ($size === false) {
+    unav_error(500, 'Could not read file size');
+}
+if ($size > UNAV_PREVIEW_MAX_BYTES) {
+    unav_error(413, 'Preview file is larger than 1 MB');
+}
+
+$content = file_get_contents($resolved['path']);
+if ($content === false) {
+    unav_error(500, 'Could not read file');
+}
+if (strpos($content, "\0") !== false) {
+    unav_error(415, 'Preview is not available for binary files');
+}
+
+unav_json([
+    'path' => $resolved['path'],
+    'name' => basename($resolved['path']),
+    'size' => $size,
+    'extension' => $extension,
+    'content' => $content,
+]);

server/public/app.js

@@ -35,6 +35,7 @@ const icons = {
   symlink: 'Link',
   other: 'Item'
 };
+const previewExtensions = new Set(['txt', 'log', 'md', 'rd', 'rst', 'yaml', 'yml', 'json', 'xml', 'csv', 'ini', 'cfg', 'conf', 'sh', 'php', 'js', 'css', 'html']);
 
 document.querySelector('#newExplorerButton').addEventListener('click', () => openExplorer());
 document.querySelector('#newPropertiesButton').addEventListener('click', () => openProperties());
@@ -112,6 +113,40 @@ function openProperties(entry = state.selectedEntry) {
   });
 }
 
+function openPreview(entry) {
+  if (!entry || !isPreviewable(entry)) {
+    showError(new Error('Für diesen Dateityp ist keine Vorschau verfügbar.'));
+    return null;
+  }
+
+  const existing = state.windows.find((item) => item.kind === 'preview');
+  if (existing) {
+    existing.data.entry = entry;
+    existing.data.content = '';
+    existing.data.loading = true;
+    existing.data.error = null;
+    focusWindow(existing);
+    render();
+    loadPreview(existing, entry);
+    return existing;
+  }
+
+  const win = createWindow('Vorschau', 'preview', {
+    width: 620,
+    height: 460,
+    x: 190,
+    y: 110,
+    data: {
+      entry,
+      content: '',
+      loading: true,
+      error: null
+    }
+  });
+  loadPreview(win, entry);
+  return win;
+}
+
 function openQueue() {
   showTransferPanel();
   return null;
@@ -187,6 +222,7 @@ function renderWindow(win) {
   body.className = 'window-body';
   if (win.kind === 'explorer') renderExplorer(body, win);
   if (win.kind === 'properties') renderProperties(body);
+  if (win.kind === 'preview') renderPreview(body, win);
   body.addEventListener('scroll', () => {
     if (win.data.lockScroll) {
       body.scrollTop = win.data.lockScrollTop || 0;
@@ -289,6 +325,8 @@ function renderExplorer(body, win) {
       if (shouldSuppressItemActivation()) return;
       if (entry.type === 'directory') {
         loadExplorer(win, entry.path);
+      } else if (isPreviewable(entry)) {
+        openPreview(entry);
       }
     });
     row.addEventListener('contextmenu', (event) => {
@@ -368,6 +406,45 @@ function renderProperties(body) {
   }
 }
 
+function renderPreview(body, win) {
+  const data = win.data;
+  body.classList.add('preview-body');
+  if (data.loading) {
+    body.innerHTML = '<p class="muted">Lade Vorschau...</p>';
+    return;
+  }
+  if (data.error) {
+    body.innerHTML = `<p class="muted">${escapeHtml(data.error)}</p>`;
+    return;
+  }
+  const entry = data.entry;
+  body.innerHTML = `
+    <div class="preview-meta">
+      <strong>${escapeHtml(entry?.name || data.name || 'Vorschau')}</strong>
+      <span>${escapeHtml(formatBytes(data.size || entry?.size || 0))}</span>
+    </div>
+    <pre class="preview-text">${escapeHtml(data.content || '')}</pre>
+  `;
+}
+
+async function loadPreview(win, entry) {
+  win.data.loading = true;
+  win.data.error = null;
+  render();
+  try {
+    const result = await api(apiUrl(`preview.php?path=${encodeURIComponent(entry.path)}`));
+    win.data.entry = entry;
+    win.data.name = result.name;
+    win.data.size = result.size;
+    win.data.content = result.content;
+  } catch (error) {
+    win.data.error = error.message;
+  } finally {
+    win.data.loading = false;
+    render();
+  }
+}
+
 function renderQueue(body) {
   body.innerHTML = queueMarkup();
   bindQueueActions(body);
@@ -797,6 +874,8 @@ function renderContextMenu() {
   if (entry) {
     if (entry.type === 'directory') {
       actions.push(['Öffnen', () => loadExplorer(win, entry.path)]);
+    } else if (isPreviewable(entry)) {
+      actions.push(['Vorschau', () => openPreview(entry)]);
     }
     actions.push(['Eigenschaften', () => showPropertiesForEntry(win, entry)]);
     if (!isReadOnly()) {
@@ -1258,6 +1337,9 @@ function windowTitle(win) {
   if (win.kind === 'explorer') {
     return `Explorer · ${win.data.path || ''}`;
   }
+  if (win.kind === 'preview') {
+    return `Vorschau · ${win.data.entry?.name || ''}`;
+  }
   return win.title;
 }
 
@@ -1273,6 +1355,16 @@ function dirname(value) {
   return `/${parts.slice(0, -1).join('/')}`;
 }
 
+function extensionOf(name) {
+  const value = String(name || '');
+  const index = value.lastIndexOf('.');
+  return index >= 0 ? value.slice(index + 1).toLowerCase() : '';
+}
+
+function isPreviewable(entry) {
+  return entry?.type === 'file' && previewExtensions.has(extensionOf(entry.name || entry.path));
+}
+
 function joinPath(parent, name) {
   return `${String(parent || '').replace(/\/+$/, '')}/${String(name || '').replace(/^\/+/, '')}`;
 }

server/public/styles.css

@@ -694,6 +694,43 @@
   overflow-wrap: anywhere;
 }
 
+.u-nav .preview-body {
+  display: grid;
+  gap: 10px;
+  grid-template-rows: auto minmax(0, 1fr);
+}
+
+.u-nav .preview-meta {
+  align-items: center;
+  border-bottom: 1px solid var(--line);
+  color: var(--muted);
+  display: flex;
+  gap: 10px;
+  justify-content: space-between;
+  padding-bottom: 8px;
+}
+
+.u-nav .preview-meta strong {
+  color: var(--text);
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.u-nav .preview-text {
+  background: var(--surface-2);
+  border: 1px solid var(--line);
+  border-radius: 6px;
+  color: var(--text);
+  font: 13px/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  margin: 0;
+  min-height: 0;
+  overflow: auto;
+  padding: 10px;
+  white-space: pre;
+}
+
 @media (max-width: 720px) {
   .u-nav .topbar {
     align-items: flex-start;

u-navigator.plg

@@ -1,7 +1,7 @@
 <!DOCTYPE PLUGIN [
 <!ENTITY name "u-navigator">
 <!ENTITY author "Michael Roll">
-<!ENTITY version "2026.06.23.r028">
+<!ENTITY version "2026.06.23.r029">
 <!ENTITY package "&name;-&version;.tgz">
 <!ENTITY pluginURL "https://git.casaderoll.de/michael/Unraid-Navigator/raw/branch/main/u-navigator.plg">
 <!ENTITY support "https://git.casaderoll.de/michael/Unraid-Navigator">
@@ -24,7 +24,7 @@
 
 <FILE Name="/boot/config/plugins/&name;/&package;">
 <URL>https://git.casaderoll.de/michael/Unraid-Navigator/raw/branch/main/packages/&package;</URL>
-<MD5>b74c325d1c332768da07a6ab11de7a03</MD5>
+<MD5>2c27aa33b2a3be760a518625a0762cac</MD5>
 </FILE>
 
 <FILE Run="/bin/bash">