feat: group preview

webui/src/components/display/BlobPreview.svelte

@@ -6,9 +6,11 @@
   import VideoViewer from "./blobs/VideoViewer.svelte";
   import HashBadge from "./HashBadge.svelte";
   import { API_URL } from "../../lib/api";
-  import { includes } from "lodash";
+  import { GROUP_TYPE_ADDR } from "upend/constants";
+  import AddModal from "../AddModal.svelte";
 
   export let address: string;
+  export let recurse = true;
 
   $: ({ entity, entityInfo } = useEntity(address));
 
@@ -29,15 +31,33 @@
   $: web = $entityInfo?.t == "Url";
   $: fragment = Boolean($entity?.get("ANNOTATES"));
 
+  $: group = $entity?.get("IS") == GROUP_TYPE_ADDR;
+
   $: handled =
-    audio || video || image || text || pdf || model || web || fragment;
+    audio ||
+    video ||
+    image ||
+    text ||
+    pdf ||
+    model ||
+    web ||
+    fragment ||
+    (group && recurse);
 
   let imageLoaded = null;
 </script>
 
 {#if handled}
   <div class="preview">
-    {#if model}
+    {#if group}
+      <ul class="group">
+        {#each $entity.attr["HAS"].slice(0, 4) as child}
+          <li>
+            <svelte:self address={child.value.c} recurse={false} />
+          </li>
+        {/each}
+      </ul>
+    {:else if model}
       <ModelViewer lookonly src="{API_URL}/raw/{address}" />
     {:else if web}
       {#if imageLoaded != address}
@@ -83,7 +103,7 @@
     justify-content: center;
     align-items: center;
     flex-direction: column;
-    max-height: 25em;
+    max-height: max(25em, 100%);
   }
 
   .image {
@@ -105,4 +125,22 @@
     opacity: 0.25;
     text-align: center;
   }
+
+  .group {
+    padding: 0;
+
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    min-height: 0;
+    border: 1px solid var(--foreground);
+    border-radius: 4px;
+
+    li {
+      list-style: none;
+      min-height: 0;
+      display: flex;
+      flex-direction: column;
+      justify-content: flex-end;
+    }
+  }
 </style>