feat: on group preview, prefer objects with previews

webui/src/components/display/BlobPreview.svelte

@@ -7,7 +7,8 @@
   import HashBadge from "./HashBadge.svelte";
   import { API_URL } from "../../lib/api";
   import { GROUP_TYPE_ADDR } from "upend/constants";
-  import AddModal from "../AddModal.svelte";
+  import { createEventDispatcher } from "svelte";
+  const dispatch = createEventDispatcher();
 
   export let address: string;
   export let recurse = 3;
@@ -24,7 +25,6 @@
     $entity?.identify().some((l) => l.endsWith(".avi"));
   $: image = mimeType.startsWith("image");
   $: text = mimeType.startsWith("text");
-  $: pdf = mimeType.startsWith("application/pdf");
   $: model =
     mimeType?.startsWith("model") ||
     $entity?.identify().some((l) => l.endsWith(".stl"));
@@ -34,16 +34,29 @@
   $: group = $entity?.get("IS") == GROUP_TYPE_ADDR;
 
   $: handled =
+    !$entity ||
     audio ||
     video ||
     image ||
     text ||
-    pdf ||
     model ||
     web ||
     fragment ||
     (group && recurse > 0);
 
+  $: dispatch("handled", handled);
+
+  let failedChildren: string[] = [];
+  $: groupChildren = ($entity?.attr["HAS"] || [])
+    .map((e) => String(e.value.c))
+    .filter(
+      (addr) =>
+        !failedChildren
+          .slice(0, ($entity?.attr["HAS"] || []).length - 4)
+          .includes(addr)
+    )
+    .slice(0, 4);
+
   let imageLoaded = null;
 </script>
 
@@ -51,9 +64,15 @@
   <div class="preview">
     {#if group}
       <ul class="group">
-        {#each $entity.attr["HAS"].slice(0, 4) as child}
+        {#each groupChildren as address (address)}
           <li>
-            <svelte:self address={child.value.c} recurse={recurse - 1} />
+            <svelte:self
+              {address}
+              recurse={recurse - 1}
+              on:handled={(ev) => {
+                if (!ev.detail) failedChildren = [...failedChildren, address];
+              }}
+            />
           </li>
         {/each}
       </ul>
@@ -104,7 +123,7 @@
     align-items: center;
     flex-direction: column;
     max-height: 100%;
-    
+
     flex-grow: 1;
     min-height: 0;
   }

webui/src/components/widgets/Gallery.svelte

@@ -121,6 +121,7 @@
     border-radius: 4px;
     padding: 0.25em;
     max-height: 420px;
+    overflow: hidden;
   }
 
   .items {