From 4c98d143527b388a1211d7e4fe747355b20c6680 Mon Sep 17 00:00:00 2001
From: Philipp <schlottmann@digital-droplets.de>
Date: Thu, 21 May 2026 09:20:10 +0200
Subject: [PATCH] added frontent viewer for snapshot

---
 .../src/components/SnapshotFilesPanel.jsx     | 74 +++++++++++++++++++
 1 file changed, 74 insertions(+)
 create mode 100644 frontend/src/components/SnapshotFilesPanel.jsx

diff --git a/frontend/src/components/SnapshotFilesPanel.jsx b/frontend/src/components/SnapshotFilesPanel.jsx
new file mode 100644
index 0000000..660b5eb
--- /dev/null
+++ b/frontend/src/components/SnapshotFilesPanel.jsx
@@ -0,0 +1,74 @@
+import { File, Folder } from 'lucide-react';
+
+export function SnapshotFilesPanel({ files, loading, onClose, snapshot }) {
+  if (!snapshot) return null;
+
+  return (
+    <section className="overflow-hidden rounded-md border border-zinc-800 bg-zinc-900/70">
+      <div className="flex items-center justify-between gap-3 border-b border-zinc-800 px-4 py-3">
+        <div>
+          <h2 className="text-sm font-semibold">Snapshot Contents</h2>
+          <p className="mt-1 font-mono text-xs text-zinc-500">{snapshot.id.slice(0, 8)}</p>
+        </div>
+        <button
+          className="h-8 rounded-md border border-zinc-700 px-2.5 text-xs text-zinc-100 hover:border-zinc-500"
+          onClick={onClose}
+          type="button"
+        >
+          Close
+        </button>
+      </div>
+      <div className="overflow-x-auto">
+        <table className="w-full min-w-[680px] text-left text-sm">
+          <thead className="border-b border-zinc-800 text-xs uppercase tracking-wide text-zinc-500">
+            <tr>
+              <th className="px-4 py-3 font-medium">Path</th>
+              <th className="px-4 py-3 font-medium">Type</th>
+              <th className="px-4 py-3 font-medium">Size</th>
+              <th className="px-4 py-3 font-medium">Modified</th>
+            </tr>
+          </thead>
+          <tbody className="divide-y divide-zinc-800">
+            {files.map((entry) => (
+              <tr key={`${entry.type}:${entry.path}`}>
+                <td className="px-4 py-3">
+                  <span className="inline-flex items-center gap-2 font-mono text-zinc-100">
+                    {entry.type === 'dir' ? <Folder className="h-4 w-4 text-cyan-300" /> : <File className="h-4 w-4 text-zinc-400" />}
+                    {entry.path}
+                  </span>
+                </td>
+                <td className="px-4 py-3 text-zinc-300">{entry.type}</td>
+                <td className="px-4 py-3 text-zinc-300">{entry.type === 'dir' ? '-' : formatBytes(entry.size)}</td>
+                <td className="px-4 py-3 text-zinc-300">{formatTime(entry.mtime)}</td>
+              </tr>
+            ))}
+            {!files.length ? (
+              <tr>
+                <td className="px-4 py-8 text-center text-zinc-500" colSpan="4">
+                  {loading ? 'Loading snapshot contents...' : 'No files found.'}
+                </td>
+              </tr>
+            ) : null}
+          </tbody>
+        </table>
+      </div>
+    </section>
+  );
+}
+
+function formatBytes(value) {
+  if (!value) return '0 B';
+  const units = ['B', 'KiB', 'MiB', 'GiB', 'TiB'];
+  let size = Number(value);
+  let unitIndex = 0;
+  while (size >= 1024 && unitIndex < units.length - 1) {
+    size /= 1024;
+    unitIndex += 1;
+  }
+  return `${size.toFixed(unitIndex === 0 ? 0 : 1)} ${units[unitIndex]}`;
+}
+
+function formatTime(value) {
+  if (!value) return '-';
+  return new Intl.DateTimeFormat(undefined, { dateStyle: 'medium', timeStyle: 'medium' }).format(new Date(value));
+}