feat(webui): display `COVER` image as the column background

webui/src/lib/components/BrowseColumn.svelte

@@ -11,7 +11,7 @@
 	export let address: string | undefined = undefined;
 	export let index: number;
 	export let only: boolean;
-	export let background = 'var(--background-lighter)';
+	export let background: string | undefined = undefined;
 	export let forceDetail = false;
 	let shifted = false;
 	let key = Math.random();
@@ -64,6 +64,19 @@
 		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();
 	}
@@ -73,9 +86,13 @@
 <div
 	class="browse-column"
 	class:detail
-	style="--background-color: {background}"
+	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="view" style="--width: {width}px">
 		<header>
 			{#if address}
@@ -120,7 +137,11 @@
 </div>
 
 <style lang="scss">
+	@use 'sass:color';
+	@use '../styles/colors.scss';
+
 	.browse-column {
+		position: relative;
 		display: flex;
 	}
 
@@ -144,12 +165,14 @@
 		display: flex;
 		flex-direction: column;
 
-		background: var(--background-color);
+		background: var(--background);
 		color: var(--foreground-lighter);
 		border: 1px solid var(--foreground-lightest);
 		border-radius: 0.5em;
 		padding: 1rem;
 
+		z-index: 1;
+
 		// transition: min-width 0.2s, max-width 0.2s;
 		// TODO - container has nowhere to scroll, breaking `detail` scroll
 
@@ -165,6 +188,25 @@
 		}
 	}
 
+	.browse-column.image-background {
+		--foreground: var(--foreground-lighter);
+		--background-lighter: rgba(255, 255, 255, 0.08);
+		--color-active: #{color.scale(colors.$orange, $alpha: -75%)};
+	}
+
+	.background {
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: calc(100% - 0.5rem);
+		height: 100%;
+		border-radius: 0.5em;
+		background-size: cover;
+		background-position: center;
+		filter: blur(0.5rem) brightness(0.3) contrast(1.1);
+		z-index: 0;
+	}
+
 	.resizeHandle {
 		cursor: ew-resize;
 		height: 100%;

webui/src/lib/components/Inspect.svelte

@@ -22,10 +22,13 @@
 	import { debug } from 'debug';
 	import { Any } from '@upnd/upend/query';
 	import { isDefined } from '$lib/util/werk';
-
 	const dbg = debug('kestrel:Inspect');
 
-	const dispatch = createEventDispatcher();
+	const dispatch = createEventDispatcher<{
+		resolved: string[];
+		close: void;
+		background: string | undefined;
+	}>();
 
 	export let address: string;
 	export let detail: boolean;
@@ -147,14 +150,15 @@
 				'NOTE',
 				'LAST_VISITED',
 				'NUM_VISITED',
-				'LAST_ATTRIBUTE_WIDGET'
+				'LAST_ATTRIBUTE_WIDGET',
+				'COVER'
 			].includes(entry.attribute)
 	);
 
 	$: currentUntypedProperties = filteredUntypedProperties;
 
 	$: filteredUntypedLinks = untypedLinks.filter(
-		(entry) => ![ATTR_IN, ATTR_OF].includes(entry.attribute)
+		(entry) => ![ATTR_IN, ATTR_OF, 'COVER'].includes(entry.attribute)
 	);
 
 	$: currentUntypedLinks = filteredUntypedLinks;
@@ -389,6 +393,19 @@
 			);
 		}
 	});
+
+	$: {
+		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

@@ -248,12 +248,12 @@
 		border-radius: 4px;
 
 		&.left-active {
-			background: linear-gradient(90deg, colors.$orange 0%, transparent 100%);
+			background: linear-gradient(90deg, var(--color-active) 0%, transparent 100%);
 			padding: 2px 0 2px 2px;
 		}
 
 		&.right-active {
-			background: linear-gradient(90deg, transparent 0%, colors.$orange 100%);
+			background: linear-gradient(90deg, transparent 0%, var(--color-active) 100%);
 			padding: 2px 2px 2px 0;
 		}
 

webui/src/lib/styles/colors-app.scss

@@ -10,6 +10,7 @@
 	--background-lightest: #{color.adjust($rebase02, $lightness: 1.5%)};
 	--primary: #{colors.$blue};
 	--primary-lighter: #{color.adjust(colors.$blue, $lightness: 25%)};
+  --color-active: #{colors.$orange};
 
 	background-color: $rebase03;
 	color: $rebase0;

webui/src/routes/browse/[addresses]/+page.svelte

@@ -15,6 +15,7 @@
 	let root: HTMLDivElement;
 	let identities: string[] = [];
 	$: addresses = $page.params.addresses.split(',');
+	let backgrounds: Record<string, string | undefined> = {};
 
 	function add(value: SelectorValue) {
 		if (value.t !== 'Address') return;
@@ -147,13 +148,20 @@
 					{address}
 					{index}
 					{only}
+					background={backgrounds[address]}
 					on:close={() => close(index)}
 					on:resolved={(ev) => onIdentified(index, ev)}
 					on:detail={(ev) => onDetailChanged(index, ev)}
 					on:combine={() => addCombine(address)}
 					let:detail
 				>
-					<Inspect {address} {detail} on:resolved on:close />
+					<Inspect
+						{address}
+						{detail}
+						on:resolved
+						on:close
+						on:background={(ev) => (backgrounds[address] = ev.detail)}
+					/>
 				</BrowseColumn>
 			{/if}
 		</div>