feat: show URL types in non-banner upobjects

webui/src/components/display/UpObject.svelte

@@ -5,7 +5,7 @@
   import Ellipsis from "../utils/Ellipsis.svelte";
   import UpLink from "./UpLink.svelte";
   import Icon from "../utils/Icon.svelte";
-  import { readable, type Readable } from "svelte/store";
+  import { readable, writable, type Readable } from "svelte/store";
   import { notify, UpNotification } from "../../notifications";
   import IconButton from "../utils/IconButton.svelte";
   import { vaultInfo } from "../../util/info";
@@ -25,8 +25,14 @@
   export let resolve = !(labels || []).length || banner;
 
   let entity: Readable<UpObject> = readable(undefined);
-  let entityInfo: Readable<EntityInfo> = readable(undefined);
+  let entityInfo: Readable<EntityInfo> = writable(undefined);
   $: if (resolve) ({ entity, entityInfo } = useEntity(address));
+  $: if (!resolve)
+    entityInfo = readable(undefined, (set) => {
+      api.addressToComponents(address).then((info) => {
+        set(info);
+      });
+    });
 
   // isFile
   $: isFile = $entityInfo?.t == "Hash";
@@ -122,6 +128,7 @@
     class="address"
     class:identified={inferredIds.length || addressIds.length || labels?.length}
     class:banner
+    class:show-type={$entityInfo?.t === "Url" && !addressIds.length}
   >
     <HashBadge {address} />
     <div class="separator" />
@@ -135,14 +142,12 @@
       {:else}
         <Ellipsis value={displayLabel} />
       {/if}
-      {#if banner}
-        <div class="type">
-          {$entityInfo?.t}
-          {#if $entityInfo?.t === "Url" || $entityInfo?.t === "Attribute"}
-            &mdash; {$entityInfo.c}
-          {/if}
-        </div>
-      {/if}
+      <div class="type">
+        {$entityInfo?.t}
+        {#if $entityInfo?.t === "Url" || $entityInfo?.t === "Attribute"}
+          &mdash; {$entityInfo.c}
+        {/if}
+      </div>
     </div>
     {#if banner && isFile}
       <div class="icon">
@@ -209,9 +214,26 @@
       line-break: auto;
     }
 
+    .label {
+      display: flex;
+      align-items: baseline;
+      gap: 0.25em;
+    }
+
+    &.banner .label {
+      flex-direction: column;
+      gap: 0.1em;
+    }
+
     .type {
       font-size: 0.66em;
       opacity: 0.7;
+      display: none;
+    }
+
+    &.show-type .type,
+    &.banner .type {
+      display: unset;
     }
   }