feat(webui): surface: add "display as point"

webui/src/components/display/SurfacePoint.svelte

@@ -0,0 +1,59 @@
+<script lang="ts">
+  import type { Address } from "@upnd/upend/types";
+  import UpObject from "./UpObject.svelte";
+  import { useNavigate } from "svelte-navigator";
+  const navigate = useNavigate();
+
+  export let address: Address;
+  let popup = false;
+
+  function visit() {
+    navigate(`/browse/${address}`);
+  }
+</script>
+
+<!-- svelte-ignore a11y-mouse-events-have-key-events -->
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<div
+  class="surface-point"
+  class:popup
+  on:mouseover={() => (popup = true)}
+  on:mouseleave={() => (popup = false)}
+  on:click={visit}
+>
+  {#if popup}
+    <div class="popup-inner">
+      <UpObject {address} />
+    </div>
+  {/if}
+</div>
+
+<style lang="scss">
+  @use "../../styles/colors.scss";
+
+  .surface-point {
+    display: relative;
+
+    width: 0.75rem;
+    height: 0.75rem;
+    border-radius: 25%;
+    background: colors.$red;
+    box-shadow: 0 0 0 1px darken(colors.$red, 20%);
+
+    cursor: pointer;
+    &:hover {
+      background: lighten(colors.$red, 20%);
+    }
+
+    &.popup {
+      z-index: 9999;
+    }
+  }
+
+  .popup-inner {
+    position: relative;
+    top: 1rem;
+    display: inline-block;
+    transform: translateX(-50%);
+  }
+</style>

webui/src/views/Surface.svelte

@@ -7,6 +7,7 @@
   import Spinner from "../components/utils/Spinner.svelte";
   import UpObjectCard from "../components/display/UpObjectCard.svelte";
   import BlobPreview from "../components/display/BlobPreview.svelte";
+  import SurfacePoint from "../components/display/SurfacePoint.svelte";
   import { i18n } from "../i18n";
   import type { IValue } from "@upnd/upend/types";
   import { useNavigate } from "svelte-navigator";
@@ -20,7 +21,7 @@
   export let y: string = urlParams.get("y");
   $: if (x && y) navigate(`/surface?x=${x}&y=${y}`, { replace: true });
 
-  let viewMode = "link";
+  let viewMode = "point";
 
   let currentX = NaN;
   let currentY = NaN;
@@ -169,6 +170,7 @@
     <div class="view-mode-selector">
       {$i18n.t("View as")}
       <select bind:value={viewMode}>
+        <option value="point">{$i18n.t("Point")}</option>
         <option value="link">{$i18n.t("Link")}</option>
         <option value="card">{$i18n.t("Card")}</option>
         <!-- <option value="preview">{$i18n.t("Preview")}</option> -->
@@ -233,6 +235,8 @@
               <UpObjectCard address={point.address} />
             {:else if viewMode == "preview"}
               <BlobPreview address={point.address} />
+            {:else if viewMode == "point"}
+              <SurfacePoint address={point.address} />
             {/if}
           </div>
         </div>