From e06d2bccfe77d62ee92a7bea752f37fb7c95a548 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tom=C3=A1=C5=A1=20Ml=C3=A1dek?= <t@mldk.cz>
Date: Fri, 12 Apr 2024 15:40:41 +0200
Subject: [PATCH] style(webui): add icons to Inspect sections

---
 webui/src/lib/components/EntitySetEditor.svelte   |  7 ++++++-
 webui/src/lib/components/EntryView.svelte         |  4 ++--
 webui/src/lib/components/Inspect.svelte           | 12 +++++++++++-
 webui/src/lib/components/InspectGroups.svelte     |  1 +
 webui/src/lib/components/InspectTypeEditor.svelte |  2 +-
 webui/src/lib/components/utils/NotesEditor.svelte |  3 ++-
 6 files changed, 23 insertions(+), 6 deletions(-)

diff --git a/webui/src/lib/components/EntitySetEditor.svelte b/webui/src/lib/components/EntitySetEditor.svelte
index 5d183ec..0016bbd 100644
--- a/webui/src/lib/components/EntitySetEditor.svelte
+++ b/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">
diff --git a/webui/src/lib/components/EntryView.svelte b/webui/src/lib/components/EntryView.svelte
index 523a578..35f4843 100644
--- a/webui/src/lib/components/EntryView.svelte
+++ b/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 || ''}
diff --git a/webui/src/lib/components/Inspect.svelte b/webui/src/lib/components/Inspect.svelte
index 99069b8..a54b1cb 100644
--- a/webui/src/lib/components/Inspect.svelte
+++ b/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}
diff --git a/webui/src/lib/components/InspectGroups.svelte b/webui/src/lib/components/InspectGroups.svelte
index 8d6b11b..cdb2830 100644
--- a/webui/src/lib/components/InspectGroups.svelte
+++ b/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)}
diff --git a/webui/src/lib/components/InspectTypeEditor.svelte b/webui/src/lib/components/InspectTypeEditor.svelte
index b6b116f..9faa3d5 100644
--- a/webui/src/lib/components/InspectTypeEditor.svelte
+++ b/webui/src/lib/components/InspectTypeEditor.svelte
@@ -101,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
diff --git a/webui/src/lib/components/utils/NotesEditor.svelte b/webui/src/lib/components/utils/NotesEditor.svelte
index 967d26a..dec0588 100644
--- a/webui/src/lib/components/utils/NotesEditor.svelte
+++ b/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}