From f03523681b1c29aaa88ea318f86b0e325b49f4ca Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tom=C3=A1=C5=A1=20Ml=C3=A1dek?= <t@mldk.cz>
Date: Sun, 12 Nov 2023 18:03:41 +0100
Subject: [PATCH] feat(webui): surface: add "display as point"

---
 .../components/display/SurfacePoint.svelte    | 59 +++++++++++++++++++
 webui/src/views/Surface.svelte                |  6 +-
 2 files changed, 64 insertions(+), 1 deletion(-)
 create mode 100644 webui/src/components/display/SurfacePoint.svelte

diff --git a/webui/src/components/display/SurfacePoint.svelte b/webui/src/components/display/SurfacePoint.svelte
new file mode 100644
index 0000000..6d03206
--- /dev/null
+++ b/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>
diff --git a/webui/src/views/Surface.svelte b/webui/src/views/Surface.svelte
index 7896d55..c559868 100644
--- a/webui/src/views/Surface.svelte
+++ b/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>