style(webui): add icons to Inspect sections

webui/src/lib/components/EntitySetEditor.svelte

@@ -6,6 +6,7 @@
 	import LabelBorder from './utils/LabelBorder.svelte';
 	import { createEventDispatcher } from 'svelte';
 	import { type Address } from '@upnd/upend/types';
+	import Icon from '$lib/components/utils/Icon.svelte';
 	const dispatch = createEventDispatcher<{
 		highlighted: string | undefined;
 		add: Address;
@@ -16,6 +17,7 @@
 	export let hide = false;
 
 	export let header = '';
+	export let icon: string | null = null;
 	export let confirmRemoveMessage: string | null = $i18n.t('Are you sure you want to remove this?');
 	export let emptyMessage = $i18n.t('Nothing to show.');
 
@@ -39,7 +41,10 @@
 </script>
 
 <LabelBorder {hide}>
-	<span slot="header">{header}</span>
+	<span slot="header"
+		>{#if icon}<Icon plain name={icon} />
+		{/if}{header}</span
+	>
 
 	{#if adding}
 		<div class="selector">

webui/src/lib/components/EntryView.svelte

@@ -90,14 +90,14 @@
 			{#if group}
 				{#if icon}
 					<div class="icon">
-						<Icon name={icon} />
+						<Icon plain name={icon} />
 					</div>
 				{/if}
 				<UpObject link address={group} labels={title ? [title] : undefined} />
 			{:else}
 				{#if icon}
 					<div class="icon">
-						<Icon name={icon} />
+						<Icon plain name={icon} />
 					</div>
 				{/if}
 				{title || ''}

webui/src/lib/components/Inspect.svelte

@@ -22,6 +22,7 @@
 	import { debug } from 'debug';
 	import { Any } from '@upnd/upend/query';
 	import { isDefined } from '$lib/util/werk';
+	import Icon from '$lib/components/utils/Icon.svelte';
 	const dbg = debug('kestrel:Inspect');
 
 	const dispatch = createEventDispatcher<{
@@ -443,6 +444,7 @@
 						{#if currentUntypedProperties.length > 0}
 							<EntryView
 								title={$i18n.t('Other Properties') || ''}
+								icon="shape-triangle"
 								widgets={attributeWidgets}
 								entries={currentUntypedProperties}
 								on:change={onChange}
@@ -453,6 +455,7 @@
 						{#if currentUntypedLinks.length > 0}
 							<EntryView
 								title={$i18n.t('Links') || ''}
+								icon="right-arrow-circle"
 								widgets={linkWidgets}
 								entries={currentUntypedLinks}
 								on:change={onChange}
@@ -463,6 +466,7 @@
 						{#if !correctlyTagged || !incorrectlyTagged}
 							<EntryView
 								title={`${$i18n.t('Members')}`}
+								icon="link"
 								widgets={taggedWidgets}
 								entries={tagged}
 								on:change={onChange}
@@ -471,6 +475,7 @@
 						{:else}
 							<EntryView
 								title={`${$i18n.t('Typed Members')} (${correctlyTagged.length})`}
+								icon="link"
 								widgets={taggedWidgets}
 								entries={tagged.filter((e) => correctlyTagged?.includes(e.entity))}
 								on:change={onChange}
@@ -478,6 +483,7 @@
 							/>
 							<EntryView
 								title={`${$i18n.t('Untyped members')} (${incorrectlyTagged.length})`}
+								icon="unlink"
 								widgets={taggedWidgets}
 								entries={tagged.filter((e) => incorrectlyTagged?.includes(e.entity))}
 								on:change={onChange}
@@ -488,6 +494,7 @@
 						{#if currentBacklinks.length > 0}
 							<EntryView
 								title={`${$i18n.t('Referred to')} (${currentBacklinks.length})`}
+								icon="left-arrow-circle"
 								entries={currentBacklinks}
 								on:change={onChange}
 								{address}
@@ -496,7 +503,10 @@
 
 						{#if $entityInfo?.t === 'Attribute'}
 							<LabelBorder>
-								<span slot="header">{$i18n.t('Used')} ({attributesUsed.length})</span>
+								<span slot="header">
+									<Icon plain name="color" />
+									{$i18n.t('Used')} ({attributesUsed.length})
+								</span>
 								<EntryList columns="entity,value" entries={attributesUsed} orderByValue />
 							</LabelBorder>
 						{/if}

webui/src/lib/components/InspectGroups.svelte

@@ -39,6 +39,7 @@
 <EntitySetEditor
 	entities={Object.keys(groups)}
 	header={$i18n.t('Groups') || ''}
+	icon="link-alt"
 	hide={Object.keys(groups).length === 0}
 	on:add={(e) => addGroup(e.detail)}
 	on:remove={(e) => removeGroup(e.detail)}

webui/src/lib/components/InspectTypeEditor.svelte

@@ -10,6 +10,8 @@
 	import { ATTR_OF } from '@upnd/upend/constants';
 	import { createEventDispatcher } from 'svelte';
 	import LabelBorder from './utils/LabelBorder.svelte';
+	import Icon from '$lib/components/utils/Icon.svelte';
+
 	const dispatch = createEventDispatcher();
 
 	export let entity: Readable<UpObject | undefined>;
@@ -21,6 +23,7 @@
 
 	let types: Array<{ address: string; entry: UpEntry; required: UpEntry | undefined }> = [];
 	$: updateTypes($entity?.attr[`~${ATTR_OF}`] || []);
+
 	async function updateTypes(entries: UpEntry[]) {
 		types = [];
 		const query = await api.query(
@@ -98,7 +101,7 @@
 
 {#if types.length || $entity?.attr['~IN']?.length}
 	<LabelBorder hide={types.length === 0}>
-		<span slot="header">{$i18n.t('Type Attributes')}</span>
+		<span slot="header"><Icon plain name="list-check" /> {$i18n.t('Type Attributes')}</span>
 		{#if adding}
 			<div class="selector">
 				<Selector
@@ -122,7 +125,11 @@
 						class:required={type.required}
 						on:click={() => setRequired(type.entry, !type.required)}
 					>
-						{type.required ? $i18n.t('Required') : $i18n.t('Optional')}
+						{#if type.required}
+							<Icon plain name="lock" /> {$i18n.t('Required')}
+						{:else}
+							<Icon plain name="lock-open" /> {$i18n.t('Optional')}
+						{/if}
 					</button>
 					<div class="controls">
 						<IconButton name="x-circle" on:click={() => remove(type.entry)} />

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

@@ -352,6 +352,7 @@
 
 		&:not(.banner) .key {
 			display: inline-block;
+			margin-left: 0.5em;
 		}
 
 		&.show-type .secondary,

webui/src/lib/components/utils/NotesEditor.svelte

@@ -6,6 +6,7 @@
 	import LabelBorder from './LabelBorder.svelte';
 	import { i18n } from '$lib/i18n';
 	import { format } from 'date-fns';
+	import Icon from '$lib/components/utils/Icon.svelte';
 	const dispatch = createEventDispatcher<{ change: WidgetChange }>();
 
 	export let address: string;
@@ -34,7 +35,7 @@
 </script>
 
 <LabelBorder hide={!notes?.length}>
-	<span slot="header">Notes</span>
+	<span slot="header"><Icon plain name="note" /> {$i18n.t('Notes')}</span>
 	<div class="notes" contenteditable on:input={onInput} bind:this={contentEl}>
 		{#each (notes || '\n').split('\n') as line, idx}
 			{#if idx > 0}<br />{/if}