wip: multiple modes of display for surface

webui/src/styles/main.scss

@@ -20,6 +20,15 @@ main {
   flex-grow: 1;
 }
 
+select {
+  background: var(--background-lighter);
+  color: var(--foreground);
+  font-family: var(--default-font);
+
+  border: 1px solid var(--foreground-lighter);
+  border-radius: 4px;
+}
+
 .spinner {
   font-size: 2em;
 }

webui/src/views/Surface.svelte

@@ -6,6 +6,9 @@
   import { onMount } from "svelte";
   import type { ZoomTransform } from "d3";
   import Spinner from "../components/utils/Spinner.svelte";
+  import UpObjectCard from "../components/display/UpObjectCard.svelte";
+  import BlobPreview from "../components/display/BlobPreview.svelte";
+  import { i18n } from "../i18n";
 
   const urlSearch = window.location.href.substring(
     window.location.href.indexOf("?")
@@ -14,6 +17,7 @@
 
   let x: string = urlParams.get("x");
   let y: string = urlParams.get("y");
+  let viewMode = "link";
 
   let loaded = false;
   let viewHeight = 0;
@@ -117,6 +121,14 @@
     <div class="axis-selector">
       Y: <Selector type="attribute" bind:attribute={y} />
     </div>
+    <div class="view-mode-selector">
+      {$i18n.t("View as")}
+      <select bind:value={viewMode}>
+        <option value="link">{$i18n.t("Link")}</option>
+        <option value="card">{$i18n.t("Card")}</option>
+        <!-- <option value="preview">{$i18n.t("Preview")}</option> -->
+      </select>
+    </div>
   </div>
   <div
     class="view"
@@ -136,7 +148,13 @@
           style="left: {point.x}px; top: {viewHeight - point.y}px"
         >
           <div class="inner">
-            <UpObject point link address={point.address} />
+            {#if viewMode == "link"}
+              <UpObject point link address={point.address} />
+            {:else if viewMode == "card"}
+              <UpObjectCard address={point.address} />
+            {:else if viewMode == "preview"}
+              <BlobPreview address={point.address} />
+            {/if}
           </div>
         </div>
       {/each}