Add text file preview window

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;