[ui] preview / full text view

webui/src/components/display/BlobPreview.svelte

@@ -1,7 +1,9 @@
 <script lang="ts">
   import { useEntity } from "../../lib/entity";
+  import IconButton from "../utils/IconButton.svelte";
   import Spinner from "../utils/Spinner.svelte";
   import ModelViewer from "./blobs/ModelViewer.svelte";
+  import TextViewer from "./blobs/TextViewer.svelte";
   export let address: string;
 
   $: ({ entity } = useEntity(address));
@@ -12,24 +14,13 @@
     ["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}
+        <TextViewer {address} />
       </div>
     {/if}
     {#if mimeType?.startsWith("audio")}
@@ -70,16 +61,12 @@
     max-height: 25em;
   }
 
+  .text {
+    display: flex;
+    margin-bottom: 1rem;
+  }
+
   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>

webui/src/components/display/blobs/TextViewer.svelte

@@ -0,0 +1,95 @@
+<script lang="ts">
+  import IconButton from "../../utils/IconButton.svelte";
+
+  import Spinner from "../../utils/Spinner.svelte";
+  export let address: string;
+
+  let mode: "preview" | "full" = "preview";
+
+  $: textContent = (async () => {
+    const response = await fetch(
+      `/api/${mode == "preview" ? "thumb" : "raw"}/${address}`
+    );
+    return await response.text();
+  })();
+</script>
+
+<div class="text-preview">
+  <header class="text-header">
+    <div
+      class="tab"
+      class:active={mode == "preview"}
+      on:click={() => (mode = "preview")}
+    >
+      <IconButton
+        name="image"
+        active={mode == "preview"}
+        on:click={() => (mode = "preview")}
+      />
+      <div class="label">Preview</div>
+    </div>
+    <div
+      class="tab"
+      class:active={mode == "full"}
+      on:click={() => (mode = "full")}
+    >
+      <IconButton
+        name="shape-circle"
+        active={mode == "full"}
+        on:click={() => (mode = "full")}
+      />
+      <div class="label">Full</div>
+    </div>
+  </header>
+  <div class="text">
+    {#await textContent}
+      <Spinner />
+    {:then text}
+      {text}
+    {/await}
+  </div>
+</div>
+
+<style lang="scss">
+  .text-preview {
+    flex: 1;
+  }
+
+  .text {
+    background: var(--background);
+    padding: 0.5em;
+    overflow: auto;
+    white-space: pre-wrap;
+    border-radius: 4px;
+    border: 1px solid var(--foreground);
+    height: 100%;
+    box-sizing: border-box;
+  }
+
+  header {
+    display: flex;
+    justify-content: flex-end;
+
+    .tab {
+      display: flex;
+
+      cursor: pointer;
+
+      border: 1px solid var(--foreground);
+      border-bottom: 0;
+      border-top-left-radius: 4px;
+      border-top-right-radius: 4px;
+
+      padding: 0.15em;
+      margin: 0 0.1em;
+
+      &.active {
+        background: var(--background);
+      }
+
+      .label {
+        margin-right: 0.5em;
+      }
+    }
+  }
+</style>