Add relationship enrichment display to backend UI

packages/builder/src/components/backend/DataTable/cells/RelationshipCell.svelte

@@ -3,24 +3,43 @@
   export let row
   export let selectRelationship
 
-  $: count =
+  $: items = row?.[columnName] || []
-    row && columnName && Array.isArray(row[columnName])
-      ? row[columnName].length
-      : 0
 </script>
 
-<div class:link={count} on:click={() => selectRelationship(row, columnName)}>
+<div
-  {count}
+  class="container"
-  related row(s)
+  class:link={!!items.length}
+  on:click={() => selectRelationship(row, columnName)}>
+  {#each items as item}
+    <div class="item">{item}</div>
+  {/each}
 </div>
 
 <style>
-  .link {
+  .container {
-    text-decoration: underline;
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+    gap: var(--spacing-xs);
   }
 
   .link:hover {
     color: var(--grey-6);
     cursor: pointer;
   }
+  .link:hover .item {
+    color: var(--ink);
+    border-color: var(--ink);
+  }
+
+  .item {
+    font-size: var(--font-size-xs);
+    padding: var(--spacing-xs) var(--spacing-s);
+    border: 1px solid var(--grey-5);
+    color: var(--grey-7);
+    line-height: normal;
+    border-radius: 4px;
+    text-decoration: none;
+  }
 </style>

packages/standard-components/src/grid/Relationship/RelationshipCount.svelte

@@ -24,8 +24,8 @@
   .item {
     font-size: var(--font-size-xs);
     padding: var(--spacing-xs) var(--spacing-s);
-    border: 1px solid #888;
+    border: 1px solid var(--grey-5);
-    color: #666;
+    color: var(--grey-7);
     line-height: normal;
     border-radius: 4px;
   }