[ui] text previews

webui/src/components/display/BlobPreview.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import { useEntity } from "../../lib/entity";
+  import Spinner from "../utils/Spinner.svelte";
   import ModelViewer from "./blobs/ModelViewer.svelte";
   export let address: string;
 
@@ -8,13 +9,29 @@
   $: mimeType = String($entity?.get("FILE_MIME"));
   $: handled =
     Boolean(mimeType) &&
-    ["audio", "video", "image", "model"].some((prefix) =>
+    ["audio", "video", "image", "model", "text"].some((prefix) =>
       mimeType.startsWith(prefix)
     );
+
+  $: textThumbnail = mimeType.startsWith("text")
+    ? (async () => {
+        const response = await fetch(`/api/thumb/${address}`);
+        return await response.text();
+      })()
+    : null;
 </script>
 
 {#if handled}
   <div class="preview">
+    {#if mimeType?.startsWith("text")}
+      <div class="text">
+        {#await textThumbnail}
+          <Spinner />
+        {:then text}
+          {text}
+        {/await}
+      </div>
+    {/if}
     {#if mimeType?.startsWith("audio")}
       <audio controls preload="auto" src="/api/raw/{address}" />
     {/if}
@@ -47,7 +64,8 @@
 
   audio,
   video,
-  img {
+  img,
+  .text {
     width: 100%;
     max-height: 25em;
   }
@@ -55,4 +73,13 @@
   video {
     background: rgba(128, 128, 128, 128);
   }
+
+  .text {
+    background: var(--background);
+    padding: 0.5em;
+    overflow: auto;
+    white-space: pre-wrap;
+    border-radius: 4px;
+    border: 1px solid var(--foreground);
+  }
 </style>