feat, style: switch up groups display, add types, add highlight

webui/src/components/AttributeView.svelte

@@ -16,6 +16,7 @@
   export let editable = false;
   export let reverse = false;
   export let initialWidget: string | undefined = undefined;
+  export let highlighted = false;
 
   let currentWidget: string | undefined;
 
@@ -61,7 +62,7 @@
   }
 </script>
 
-<section class="attribute-view labelborder">
+<section class="attribute-view labelborder" class:highlighted>
   <header>
     <h3>
       {#if !title && type?.address}
@@ -122,6 +123,14 @@
 <style scoped lang="scss">
   @use "./util";
 
+  section h3 {
+    transition: text-shadow 0.2s;
+  }
+
+  section.highlighted h3 {
+    text-shadow: #cb4b16 0 0 0.5em;
+  }
+
   .icon {
     display: inline-block;
     font-size: 1.25em;

webui/src/components/Inspect.svelte

@@ -33,6 +33,7 @@
   export let detail: boolean;
   export let editable = false;
   let showAsEntries = false;
+  let highlightedType: string | undefined;
 
   let blobHandled = false;
 
@@ -246,12 +247,33 @@
   {#if !showAsEntries}
     <div class="main-content">
       <div class="detail-col">
-        {#if groups?.length || editable}
-          <section class="groups labelborder">
-            <header><h3>{$i18n.t("Groups")}</h3></header>
+        <div class="blob-viewer">
+          <BlobViewer
+            {address}
+            {editable}
+            {detail}
+            on:handled={(ev) => (blobHandled = ev.detail)}
+          />
+        </div>
+        <NotesEditor {address} {editable} on:change={onChange} />
+        {#if !$error}
+          <section class="tags labelborder">
+            <header><h3>{$i18n.t("Tags")}</h3></header>
             <div class="content">
+              {#each Object.values(allTypes) as type}
+                <div
+                  class="tag type"
+                  on:mouseenter={() => (highlightedType = type.address)}
+                  on:mouseleave={() => (highlightedType = undefined)}
+                >
+                  <UpObject address={type.address} link />
+                  {#if editable}
+                    <IconButton name="x-circle" />
+                  {/if}
+                </div>
+              {/each}
               {#each groups as [entryAddress, address]}
-                <div class="group">
+                <div class="tag group">
                   <UpObject {address} link />
                   {#if editable}
                     <IconButton
@@ -274,17 +296,6 @@
               {/if}
             </div>
           </section>
-        {/if}
-        <div class="blob-viewer">
-          <BlobViewer
-            {address}
-            {editable}
-            {detail}
-            on:handled={(ev) => (blobHandled = ev.detail)}
-          />
-        </div>
-        <NotesEditor {address} {editable} on:change={onChange} />
-        {#if !$error}
           {#if Boolean($allTypeEntries)}
             <div class="attributes">
               {#each Object.entries(typedAttributes) as [typeAddr, entries] (typeAddr)}
@@ -295,6 +306,7 @@
                   on:change={onChange}
                   initialWidget={String($entity.get("LAST_ATTRIBUTE_WIDGET"))}
                   on:widgetSwitched={onAttributeWidgetSwitch}
+                  highlighted={highlightedType == typeAddr}
                 />
               {/each}
 
@@ -362,12 +374,16 @@
       <EntryList
         {editable}
         entries={$entity.attributes}
-        columns={detail ? "timestamp, provenance, attribute, value" : "attribute, value"}
+        columns={detail
+          ? "timestamp, provenance, attribute, value"
+          : "attribute, value"}
       />
       <h2>{$i18n.t("Backlinks")}</h2>
       <EntryList
         entries={$entity.backlinks}
-        columns={detail ? "timestamp, provenance, entity, attribute" : "entity, attribute"}
+        columns={detail
+          ? "timestamp, provenance, entity, attribute"
+          : "entity, attribute"}
       />
     </div>
   {/if}
@@ -397,7 +413,7 @@
     min-height: 0;
   }
 
-  .groups {
+  .tags {
     margin: 0.25rem 0;
     .content {
       display: flex;
@@ -406,7 +422,7 @@
       align-items: center;
     }
 
-    .group {
+    .tag {
       display: inline-flex;
       align-items: center;
     }