Initial commit

frontend/src/components/TextViewer.svelte

@@ -0,0 +1,46 @@
+<script>
+  let { src } = $props()
+  let text = $state('')
+  let loading = $state(true)
+
+  $effect(() => {
+    fetch(src)
+      .then(r => r.text())
+      .then(t => {
+        text = t
+        loading = false
+      })
+      .catch(() => {
+        text = 'Failed to load text content.'
+        loading = false
+      })
+  })
+</script>
+
+<div class="text-viewer">
+  {#if loading}
+    <p>Loading text...</p>
+  {:else}
+    <pre>{text}</pre>
+  {/if}
+</div>
+
+<style>
+  .text-viewer {
+    max-width: 900px;
+    margin: 24px auto;
+    padding: 24px;
+    background: var(--retro-panel);
+    border: 3px solid var(--retro-border);
+    box-shadow: 6px 6px 0px var(--retro-shadow);
+  }
+  pre {
+    white-space: pre-wrap;
+    word-break: break-word;
+    font-family: 'VT323', monospace;
+    font-size: 1.1rem;
+    line-height: 1.5;
+    max-height: 80vh;
+    overflow-y: auto;
+  }
+</style>