add upobjectcard

ui/src/components/display/UpObjectCard.svelte

@@ -0,0 +1,98 @@
+<script lang="ts">
+  import { createEventDispatcher } from "svelte";
+  import { BLOB_TYPE_ADDR } from "upend/constants";
+  import HashBadge from "./HashBadge.svelte";
+  import Ellipsis from "../utils/Ellipsis.svelte";
+  import UpLink from "./UpLink.svelte";
+  import { useEntity } from "../../lib/entity";
+  import { readable } from "svelte/store";
+  import { notify, UpNotification } from "../../notifications";
+  import { Link } from "svelte-navigator";
+  const dispatch = createEventDispatcher();
+
+  export let address: string;
+  export let labels: string[] = [];
+
+  let resolving = true;
+
+  $: ({ entity } = useEntity(address));
+  $: resolving = !Boolean($entity);
+
+  // Identification
+  let inferredIds: string[] = [];
+  $: inferredIds = $entity?.identify() || [];
+
+  $: displayLabel =
+    Array.from(new Set(inferredIds.concat(labels))).join(" | ") || address;
+
+  $: dispatch("resolved", inferredIds);
+</script>
+
+<div class="upcard" class:identified={Boolean(inferredIds)}>
+  <Link class="main" to="/browse/{address}">
+    <div class="visual">
+      <HashBadge {address} />
+    </div>
+    <div class="label" class:resolving title={displayLabel}>
+      <h2>
+        <Ellipsis value={displayLabel} />
+      </h2>
+      {#if $entity?.get("NOTE")}
+        <p class="note">
+          {$entity.get("NOTE")}
+        </p>
+      {/if}
+    </div>
+  </Link>
+</div>
+
+<style scoped lang="scss">
+  .upcard {
+    background: var(--background-emph);
+
+    border: 0.12em solid var(--foreground);
+    border-radius: 0.2em;
+    padding: 0.5em;
+
+    font-family: var(--monospace-font);
+    line-break: anywhere;
+
+    &.identified {
+      font-family: var(--default-font);
+      font-size: 0.95em;
+      line-break: auto;
+    }
+
+    :global(.main) {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+
+      text-decoration: none;
+    }
+  }
+
+  .label {
+    text-align: center;
+    margin-top: 0.5em;
+
+    h2 {
+      font-size: unset;
+      margin: 0.25em;
+    }
+
+    .note {
+      margin: 0;
+      font-size: .66em;
+    }
+  }
+
+  .visual {
+    display: contents;
+    font-size: 3em;
+  }
+
+  .resolving {
+    opacity: 0.7;
+  }
+</style>

ui/src/views/Home.svelte

@@ -4,6 +4,7 @@
   import { Link } from "svelte-navigator";
   import { UpListing } from "upend";
   import type { IFile, ListingResult, VaultInfo } from "upend/types";
+import UpObjectCard from "../components/display/UpObjectCard.svelte";
 
   let infoData: VaultInfo | undefined;
 
@@ -43,18 +44,8 @@
     {:then data}
       <ul>
         {#each data as root}
-          <li>
-            <sl-card class="root">
-              <Link class="root-link" to="/browse/{root.address}">
-                <h1>{root.identify()}</h1>
-                {#if root.get("NOTE")}
-                  <p>{root.get("NOTE")}</p>
-                {/if}
-              </Link>
-              <div slot="footer">
-                {root.attr["HAS"]?.length || 0} children
-              </div>
-            </sl-card>
+          <li class="root">
+            <UpObjectCard address={root.address} />
           </li>
         {:else}
           <li>No roots :(</li>
@@ -114,12 +105,7 @@
     }
 
     .root {
-      width: 100%;
-      text-align: center;
-    }
-
-    :global(.root-link) {
-      text-decoration: none;
+      font-size: 24px;
     }
   }
 </style>