[ui] refactor TextViewer, deduplicate

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

@@ -4,7 +4,7 @@
   import Spinner from "../../utils/Spinner.svelte";
   export let address: string;
 
-  let mode: "preview" | "full" | "markdown" = "markdown";
+  let mode: "preview" | "full" | "markdown" = "preview";
 
   $: textContent = (async () => {
     const response = await fetch(
@@ -19,46 +19,30 @@
       return text;
     }
   })();
+
+  const tabs = [
+    ["image", "preview", "Preview"],
+    ["shape-circle", "full", "Full"],
+    ["edit", "markdown", "Markdown"],
+  ] as [string, typeof mode, string][];
 </script>
 
 <div class="text-preview">
   <header class="text-header">
+    {#each tabs as [icon, targetMode, label]}
       <div
         class="tab"
-      class:active={mode == "preview"}
+        class:active={mode == targetMode}
-      on:click={() => (mode = "preview")}
+        on:click={() => (mode = targetMode)}
       >
         <IconButton
-        name="image"
+          name={icon}
-        active={mode == "preview"}
+          active={mode == targetMode}
-        on:click={() => (mode = "preview")}
+          on:click={() => (mode = targetMode)}
         />
-      <div class="label">Preview</div>
+        <div class="label">{label}</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>
-    <div
-      class="tab"
-      class:active={mode == "markdown"}
-      on:click={() => (mode = "markdown")}
-    >
-      <IconButton
-        name="edit"
-        active={mode == "markdown"}
-        on:click={() => (mode = "markdown")}
-      />
-      <div class="label">Markdown</div>
       </div>
+    {/each}
   </header>
   <div class="text" class:markdown={mode === "markdown"}>
     {#await textContent}