[ui] add nav indicators

ui/src/components/widgets/Table.svelte

@@ -4,10 +4,12 @@
   import type { OrderedListing } from "upend/types";
   import Marquee from "../Marquee.svelte";
   import Address from "../Address.svelte";
-  import { createEventDispatcher } from "svelte";
+  import { createEventDispatcher, getContext } from "svelte";
   import type { AttributeChange } from "../../types/base";
-
+  import { useParams } from "svelte-navigator";
+  import type { Writable } from "svelte/store";
   const dispatch = createEventDispatcher();
+  const params = useParams();
 
   export let columns = "attribute, value";
   export let header = true;
@@ -99,6 +101,10 @@
       }
     });
 
+  // Navigation highlights
+  const { index } = getContext("browse") as { index: Writable<number> };
+  $: addresses = $params.addresses.split(",");
+
   // Formatting & Display
   const ATTRIBUTE_LABELS: { [key: string]: string } = {
     FILE_MIME: "MIME type",
@@ -160,7 +166,12 @@
   {/if}
 
   {#each sortedAttributes as [id, entry] (id)}
-    <tr>
+    <tr
+      class:left-active={entry.entity == addresses[$index - 1] ||
+        entry.value.c == addresses[$index - 1]}
+      class:right-active={entry.value.c == addresses[$index + 1] ||
+        entry.entity == addresses[$index + 1]}
+    >
       {#if editable}
         <td class="attr-action">
           <sl-icon-button name="x-circle" on:click={removeEntry(id)} />
@@ -263,6 +274,36 @@
     width: 100%;
     table-layout: fixed;
 
+    tr {
+      &.left-active {
+        background: linear-gradient(
+          90deg,
+          rgba(255, 166, 0, 1) 0%,
+          rgba(0, 0, 0, 0) 50%
+        );
+      }
+
+      &.right-active {
+        background: linear-gradient(
+          90deg,
+          rgba(255, 166, 0, 0) 50%,
+          rgba(255, 166, 0, 1) 100%
+        );
+      }
+
+      &.left-active.right-active {
+        background: linear-gradient(
+          90deg,
+          rgba(255, 166, 0, 1) 0%,
+          rgba(255, 166, 0, 0) 25%,
+          rgba(255, 166, 0, 0) 75%,
+          rgba(255, 166, 0, 1) 100%
+        );
+      }
+
+      border-radius: 4px;
+    }
+
     th {
       text-align: left;
     }
@@ -273,6 +314,8 @@
       line-height: 1em;
       line-break: anywhere;
 
+      border: transparent;
+
       &.attr-action {
         max-width: 1em;
       }