style(webui): contain COVERs in UpObject headers

webui/src/lib/components/BrowseColumn.svelte

@@ -11,7 +11,6 @@
 	export let address: string | undefined = undefined;
 	export let index: number;
 	export let only: boolean;
-	export let background: string | undefined = undefined;
 	export let forceDetail = false;
 	let shifted = false;
 	let key = Math.random();
@@ -64,35 +63,13 @@
 		window.addEventListener('mouseup', onMouseUp);
 	}
 
-	let resultBackground = background;
-	let imageBackground: string | undefined = undefined;
-	$: {
-		if (background?.startsWith('url(')) {
-			imageBackground = background;
-			resultBackground = 'transparent';
-		} else {
-			resultBackground = background;
-			imageBackground = undefined;
-		}
-		resultBackground ||= 'var(--background-lighter)';
-	}
-
 	function reload() {
 		key = Math.random();
 	}
 </script>
 
 <!-- svelte-ignore a11y-no-static-element-interactions -->
-<div
-	class="browse-column"
-	class:detail
-	style="--background: {resultBackground}"
-	class:image-background={Boolean(imageBackground)}
-	on:mousemove={(ev) => (shifted = ev.shiftKey)}
->
-	{#if imageBackground}
-		<div class="background" style="background-image: {imageBackground}" />
-	{/if}
+<div class="browse-column" class:detail on:mousemove={(ev) => (shifted = ev.shiftKey)}>
 	<div class="view" style="--width: {width}px">
 		<header>
 			{#if address}
@@ -165,7 +142,7 @@
 		display: flex;
 		flex-direction: column;
 
-		background: var(--background);
+		background: var(--background-lighter);
 		color: var(--foreground-lighter);
 		border: 1px solid var(--foreground-lightest);
 		border-radius: 0.5em;

webui/src/lib/components/Inspect.svelte

@@ -27,7 +27,6 @@
 	const dispatch = createEventDispatcher<{
 		resolved: string[];
 		close: void;
-		background: string | undefined;
 	}>();
 
 	export let address: string;
@@ -393,19 +392,6 @@
 			);
 		}
 	});
-
-	$: {
-		const cover = $entity?.attr['COVER']?.[0];
-		if (!cover) {
-			dispatch('background', undefined);
-		} else {
-			switch (cover.value.t) {
-				case 'Address':
-					dispatch('background', `url('${api.getRaw(cover.value.c)}')`);
-					break;
-			}
-		}
-	}
 </script>
 
 <div

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

@@ -152,6 +152,22 @@
 			dispatch('change', { type: 'upsert', attribute: ATTR_LABEL, value: ev.detail });
 		}
 	}
+
+	let background: string | undefined;
+	$: background = $entity?.get('COVER')?.toString();
+
+	let resultBackground = background;
+	let imageBackground: string | undefined = undefined;
+	$: {
+		if (background) {
+			imageBackground = `url(${api.getRaw(background)})`;
+			resultBackground = 'transparent';
+		} else {
+			resultBackground = background;
+			imageBackground = undefined;
+		}
+		resultBackground ||= 'var(--background-lighter)';
+	}
 </script>
 
 <div
@@ -160,6 +176,8 @@
 	class:right-active={address == $addresses[$index + 1]}
 	class:selected={select && $selected.includes(address)}
 	class:plain
+	style="--background: {resultBackground}"
+	class:image-background={Boolean(imageBackground)}
 >
 	<div
 		class="address"
@@ -167,6 +185,10 @@
 		class:banner
 		class:show-type={$entityInfo?.t === 'Url' && !addressIds.length}
 	>
+		{#if imageBackground}
+			<div class="image-gradient"></div>
+			<div class="image-background" style="background-image: {imageBackground}"></div>
+		{/if}
 		<HashBadge {address} />
 		<div class="label" class:resolving title={displayLabel}>
 			<Editable
@@ -264,6 +286,7 @@
 	}
 
 	.address {
+		position: relative;
 		flex-grow: 1;
 		min-width: 0;
 
@@ -275,7 +298,7 @@
 		font-family: var(--monospace-font);
 		line-break: anywhere;
 
-		background: var(--background-lighter);
+		background: var(--background);
 		border: 0.1em solid var(--foreground-lighter);
 		border-radius: 0.2em;
 
@@ -336,6 +359,29 @@
 		&.banner .secondary {
 			display: unset;
 		}
+
+		.image-gradient {
+			position: absolute;
+			top: 0;
+			left: 0;
+			right: 0;
+			bottom: 0;
+			background: linear-gradient(90deg, rgba(0, 0, 0, 0.66) 16%, var(--background) 66%);
+			z-index: -1;
+		}
+
+		.image-background {
+			position: absolute;
+			top: 0;
+			left: 0;
+			right: 0;
+			bottom: 0;
+			z-index: -2;
+
+			background-size: cover;
+			background-position: center;
+			filter: brightness(0.8);
+		}
 	}
 
 	.label {