Improve sort button, remove header more icons unless hovered and highlight sorted column

packages/frontend-core/src/components/sheet/cells/HeaderCell.svelte

@@ -105,6 +105,15 @@
     <div class="name">
       {column.name}
     </div>
+    {#if sortedBy}
+      <div class="sort-indicator">
+        <Icon
+          size="S"
+          name={$sort.order === "descending" ? "ChevronDown" : "ChevronUp"}
+          color="var(--spectrum-global-color-gray-600)"
+        />
+      </div>
+    {/if}
     <div
       class="more"
       on:mousedown|stopPropagation
@@ -151,6 +160,9 @@
     padding: 0 var(--cell-padding);
     gap: calc(2 * var(--cell-spacing));
   }
+  .header-cell.sorted :global(.cell) {
+    background: var(--spectrum-global-color-gray-200);
+  }
 
   .name {
     flex: 1 1 auto;
@@ -161,13 +173,23 @@
   }
 
   .more {
+    display: none;
     padding: 4px;
     margin: 0 -4px;
   }
+  .header-cell.open .more,
+  .header-cell:hover .more {
+    display: block;
+  }
   .more:hover {
     cursor: pointer;
   }
   .more:hover :global(.spectrum-Icon) {
     color: var(--spectrum-global-color-gray-800) !important;
   }
+
+  .header-cell.open .sort-indicator,
+  .header-cell:hover .sort-indicator {
+    display: none;
+  }
 </style>

packages/frontend-core/src/components/sheet/cells/RelationshipCell.svelte

@@ -1,10 +1,60 @@
 <script>
   import { getColor } from "../utils"
+  import { onMount } from "svelte"
 
   export let value
+  export let api
+  export let readonly
+  export let selected
+
+  let isOpen = false
+  let searchResults
+
+  $: editable = selected && !readonly
+  $: {
+    if (!selected) {
+      close()
+    }
+  }
+  $: orderedResults = orderResults(searchResults, value)
+
+  const orderResults = () => {
+    let results = []
+    if (value?.length) {
+      results = results.concat(value)
+    }
+    if (searchResults?.length) {
+      results = results.concat(
+        searchResults.filter(result => {
+          return !value.some(x => x._id === result._id)
+        })
+      )
+    }
+    return results
+  }
+
+  const open = () => {
+    isOpen = true
+  }
+
+  const close = () => {
+    isOpen = false
+  }
+
+  const onKeyDown = () => {
+    return isOpen
+  }
+
+  onMount(() => {
+    api = {
+      focus: open,
+      blur: close,
+      onKeyDown,
+    }
+  })
 </script>
 
-<div class="container">
+<div class="container" on:click={editable ? open : null} class:editable>
   {#each value || [] as relationship, idx}
     {#if relationship.primaryDisplay}
       <div class="badge" style="--color: {getColor(idx)}">
@@ -14,8 +64,19 @@
   {/each}
 </div>
 
+{#if isOpen}
+  <div class="dropdown">
+    {#each orderedResults as result, idx}
+      <div class="badge" style="--color: {getColor(idx)}">
+        {result.primaryDisplay}
+      </div>
+    {/each}
+  </div>
+{/if}
+
 <style>
   .container {
+    align-self: stretch;
     display: flex;
     flex-direction: row;
     align-items: center;
@@ -25,6 +86,9 @@
     gap: var(--cell-spacing);
     overflow: hidden;
   }
+  .container.editable:hover {
+    cursor: pointer;
+  }
   .badge {
     flex: 0 0 auto;
     padding: 2px var(--cell-padding);
@@ -32,4 +96,19 @@
     border-radius: var(--cell-padding);
     user-select: none;
   }
+  .dropdown {
+    position: absolute;
+    top: -1px;
+    left: -1px;
+    width: calc(100% + 2px);
+    height: 300px;
+    background: var(--cell-background);
+    border: var(--cell-border);
+    box-shadow: 0 0 8px 4px rgba(0, 0, 0, 0.15);
+    padding: var(--cell-padding);
+    display: flex;
+    flex-direction: column;
+    gap: var(--cell-spacing);
+    align-items: flex-start;
+  }
 </style>

packages/frontend-core/src/components/sheet/controls/SortButton.svelte

@@ -81,6 +81,7 @@
       options={columnOptions}
       autoWidth
       on:change={updateSortColumn}
+      label="Column"
     />
     <Select
       placeholder={null}
@@ -88,15 +89,19 @@
       options={orderOptions}
       autoWidth
       on:change={updateSortOrder}
+      label="Order"
     />
   </div>
 </Popover>
 
 <style>
   .content {
-    padding: 12px 12px;
+    padding: 6px 12px 12px 12px;
     display: flex;
     align-items: center;
     gap: 8px;
   }
+  .content :global(.spectrum-Picker) {
+    width: 140px;
+  }
 </style>