refactor(webui): switch to SvelteKit | fix nested blob preview

webui/src/lib/components/display/BlobPreview.svelte

@@ -20,16 +20,15 @@
 	$: types = $entity && $entityInfo && getTypes($entity, $entityInfo);
 
 	$: handled =
-		types &&
-		(!$entity ||
-			types?.audio ||
-			types?.video ||
-			types?.image ||
-			types?.text ||
-			types?.model ||
-			types?.web ||
-			types?.fragment ||
-			(types?.group && recurse > 0));
+		!$entity ||
+		!$entityInfo ||
+		types?.audio ||
+		types?.video ||
+		types?.image ||
+		types?.model ||
+		types?.web ||
+		types?.fragment ||
+		(types?.group && recurse > 0);
 
 	$: dispatch('handled', handled);
 
@@ -39,24 +38,21 @@
 	let failedChildren: string[] = [];
 	let loadedChildren: string[] = [];
 	$: groupChildren =
-		$entity?.backlinks
-			.filter((e) => e.attribute === ATTR_IN)
-			.map((e) => String(e.entity))
-			.filter(
-				(addr) =>
-					!failedChildren
-						.slice(0, $entity?.backlinks.filter((e) => e.attribute === ATTR_IN).length || 0 - 4)
-						.includes(addr)
+		$entity?.backlinks.filter((e) => e.attribute === ATTR_IN).map((e) => String(e.entity)) || [];
+	$: showGroupChildren =
+		groupChildren
+			?.filter(
+				(addr) => !failedChildren.slice(0, Math.max(groupChildren.length - 4, 0)).includes(addr)
 			)
 			.slice(0, 4) || [];
 
-	$: if (groupChildren.length)
-		loaded = groupChildren.every(
-			(addr) => loadedChildren.includes(addr) || failedChildren.includes(addr)
-		);
+	$: if (types?.group)
+		loaded =
+			loadedChildren.length >= Math.min(4, groupChildren.length) ||
+			loadedChildren.length + failedChildren.length === groupChildren.length;
 </script>
 
-<div class="preview">
+<div class="preview" title={$entity?.identify().join('/')}>
 	{#if handled}
 		<div class="inner">
 			{#if !loaded}
@@ -64,7 +60,7 @@
 			{/if}
 			{#if types?.group}
 				<ul class="group">
-					{#each groupChildren as address (address)}
+					{#each showGroupChildren as address (address)}
 						<li>
 							<svelte:self
 								{address}
@@ -133,6 +129,7 @@
 		flex-direction: column;
 
 		.inner {
+			position: relative;
 			display: flex;
 			min-height: 0;
 			flex-grow: 1;