refactor: Gallery thumbnail is now UpObjectCard

also fix BlobPreview layout overflow

webui/src/components/display/BlobPreview.svelte

@@ -126,6 +126,8 @@
 
     flex-grow: 1;
     min-height: 2em;
+    display: flex;
+    flex-direction: column;
   }
 
   .hashbadge {

webui/src/components/display/UpObjectCard.svelte

@@ -1,105 +1,59 @@
 <script lang="ts">
   import { createEventDispatcher } from "svelte";
   import HashBadge from "./HashBadge.svelte";
-  import Ellipsis from "../utils/Ellipsis.svelte";
-  import { useEntity } from "../../lib/entity";
-  import { Link } from "svelte-navigator";
-  const dispatch = createEventDispatcher();
+  import UpLink from "./UpLink.svelte";
+  import BlobPreview from "./BlobPreview.svelte";
+  import UpObject from "./UpObject.svelte";
 
   export let address: string;
-  export let labels: string[] = [];
-
-  let resolving = true;
-
-  $: ({ entity } = useEntity(address));
-  $: resolving = !$entity;
-
-  // Identification
-  let inferredIds: string[] = [];
-  $: inferredIds = $entity?.identify() || [];
-
-  $: displayLabel =
-    Array.from(new Set(inferredIds.concat(labels))).join(" | ") || address;
-
-  $: dispatch("resolved", inferredIds);
+  export let labels: string[] | undefined = undefined;
+  export let thumbnail = true;
+  export let banner = true;
 </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>
+<div class="upobjectcard">
+  <UpLink to={{ entity: address }} passthrough>
+    <div class="inner">
+      {#if thumbnail}
+        <BlobPreview {address} />
+      {:else}
+        <div class="badge">
+          <HashBadge {address} />
+        </div>
       {/if}
+      <div class="label">
+        <UpObject {address} {labels} {banner} on:resolved />
+      </div>
     </div>
-  </Link>
+  </UpLink>
 </div>
 
 <style scoped lang="scss">
-  .upcard {
-    background: var(--background-lighter);
+  .upobjectcard {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+    overflow: hidden;
 
-    border: 0.12em solid var(--foreground);
-    border-radius: 0.2em;
+    .inner {
+      border: 1px solid var(--foreground-lighter);
+      border-radius: 4px;
+      padding: 0.25rem;
+      max-height: 420px;
+      min-height: 0;
 
-    font-family: var(--monospace-font);
-    line-break: anywhere;
-
-    width: var(--width);
-    height: var(--height);
-
-    &.identified {
-      font-family: var(--default-font);
-      font-size: 0.95em;
-      line-break: auto;
-    }
-
-    :global(.main) {
-      text-decoration: none;
-      
-      height: 100%;
       display: flex;
       flex-direction: column;
-      align-items: center;
-      justify-content: center;
-
-      margin: .5em;
-    }
-
-    :global(.main > *){
-      min-width: 0;
-      max-width: 100%;
     }
   }
 
   .label {
-    text-align: center;
-    margin-top: 0.5em;
-
-    h2 {
-      font-size: unset;
-      margin: 0.25em;
-    }
-
-    .note {
-      margin: 0;
-      font-size: 0.66em;
-    }
+    margin-top: 0.25rem;
   }
 
-  .visual {
-    display: contents;
-    font-size: 3em;
-  }
-
-  .resolving {
-    opacity: 0.7;
+  .badge {
+    font-size: 3rem;
+    display: flex;
+    justify-content: center;
   }
 </style>

webui/src/components/widgets/Gallery.svelte

@@ -3,9 +3,8 @@
   import type { UpListing } from "upend";
   import type { Address } from "upend/types";
   import { query } from "../../lib/entity";
-  import BlobPreview from "../display/BlobPreview.svelte";
-  import UpLink from "../display/UpLink.svelte";
   import UpObject from "../display/UpObject.svelte";
+  import UpObjectCard from "../display/UpObjectCard.svelte";
 
   export let entities: Address[];
   export let thumbnails = true;
@@ -99,36 +98,29 @@
   <div class="items">
     {#each sortedEntities as entity (entity)}
       {#if thumbnails}
-        <div class="thumbnail">
-          <UpLink to={{ entity }} passthrough>
-            <BlobPreview address={entity} />
-            <div class="label">
-              <UpObject
-                address={entity}
-                labels={sortKeys[entity]}
-                on:resolved={(event) => {
-                  addSortKeys(entity, event.detail);
-                }}
-              />
-            </div>
-          </UpLink>
-        </div>
+        <UpObjectCard
+          address={entity}
+          labels={sortKeys[entity]}
+          banner={false}
+          on:resolved={(event) => {
+            addSortKeys(entity, event.detail);
+          }}
+        />
       {:else}
-        <UpObject link address={entity} labels={sortKeys[entity]} />
+        <UpObject
+          link
+          address={entity}
+          labels={sortKeys[entity]}
+          on:resolved={(event) => {
+            addSortKeys(entity, event.detail);
+          }}
+        />
       {/if}
     {/each}
   </div>
 </div>
 
 <style lang="scss">
-  .thumbnail {
-    border: 1px solid var(--foreground-lighter);
-    border-radius: 4px;
-    padding: 0.25em;
-    max-height: 420px;
-    overflow: hidden;
-  }
-
   .items {
     gap: 4px;
   }
@@ -140,10 +132,6 @@
   :global(.gallery.style-grid .items) {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
-
-    .thumbnail {
-      height: 256px;
-    }
   }
 
   :global(.gallery.style-flex .items) {
@@ -157,10 +145,4 @@
     flex-direction: column;
     align-items: stretch;
   }
-
-  .thumbnail {
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-end;
-  }
 </style>