From 57cfc9d84c139064947a003ff8b717a9b73196f4 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Tue, 21 Feb 2023 11:46:20 +0000
Subject: [PATCH] Improve display of relationship cell and options cell

---
 .../app/spreadsheet/OptionsCell.svelte        | 25 +++++++++---
 .../app/spreadsheet/RelationshipCell.svelte   | 40 +++++++++++++++++++
 .../app/spreadsheet/Spreadsheet.svelte        |  3 ++
 3 files changed, 63 insertions(+), 5 deletions(-)
 create mode 100644 packages/client/src/components/app/spreadsheet/RelationshipCell.svelte

diff --git a/packages/client/src/components/app/spreadsheet/OptionsCell.svelte b/packages/client/src/components/app/spreadsheet/OptionsCell.svelte
index 1d4fc0c85b..0494f951bc 100644
--- a/packages/client/src/components/app/spreadsheet/OptionsCell.svelte
+++ b/packages/client/src/components/app/spreadsheet/OptionsCell.svelte
@@ -73,7 +73,9 @@
     {/each}
   </div>
   {#if editable}
-    <Icon name="ChevronDown" />
+    <div class="arrow">
+      <Icon name="ChevronDown" />
+    </div>
   {/if}
   {#if open}
     <div class="options">
@@ -105,11 +107,9 @@
     display: flex;
     flex-direction: row;
     justify-content: space-between;
-    align-items: center;
-    padding: 0 8px;
+    align-items: stretch;
+    align-self: stretch;
     flex: 1 1 auto;
-    overflow: hidden;
-    gap: 4px;
   }
   .container.editable:hover {
     cursor: pointer;
@@ -123,6 +123,7 @@
     width: 0;
     gap: 4px;
     overflow: hidden;
+    padding: 0 8px;
   }
   .text {
     overflow: hidden;
@@ -138,6 +139,20 @@
     border-radius: 8px;
     user-select: none;
   }
+  .arrow {
+    position: absolute;
+    right: 2px;
+    top: 2px;
+    bottom: 2px;
+    padding: 0 6px 0 16px;
+    display: grid;
+    place-items: center;
+    background: linear-gradient(
+      to right,
+      transparent 0%,
+      var(--background) 40%
+    );
+  }
   .options {
     min-width: 100%;
     position: absolute;
diff --git a/packages/client/src/components/app/spreadsheet/RelationshipCell.svelte b/packages/client/src/components/app/spreadsheet/RelationshipCell.svelte
new file mode 100644
index 0000000000..e47633d603
--- /dev/null
+++ b/packages/client/src/components/app/spreadsheet/RelationshipCell.svelte
@@ -0,0 +1,40 @@
+<script>
+  export let value
+
+  $: console.log(value)
+
+  const getColor = idx => {
+    if (!value || idx === -1) {
+      return null
+    }
+    return `hsla(${((idx + 1) * 222) % 360}, 90%, 75%, 0.3)`
+  }
+</script>
+
+<div class="container">
+  {#each value || [] as relationship, idx}
+    <div class="badge" style="--color: {getColor(idx)}">
+      {relationship.primaryDisplay}
+    </div>
+  {/each}
+</div>
+
+<style>
+  .container {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    padding: 0 8px;
+    flex: 1 1 auto;
+    width: 0;
+    gap: 4px;
+    overflow: hidden;
+  }
+  .badge {
+    flex: 0 0 auto;
+    padding: 2px 8px;
+    background: var(--color);
+    border-radius: 8px;
+    user-select: none;
+  }
+</style>
diff --git a/packages/client/src/components/app/spreadsheet/Spreadsheet.svelte b/packages/client/src/components/app/spreadsheet/Spreadsheet.svelte
index dc7f715d90..0474d784f1 100644
--- a/packages/client/src/components/app/spreadsheet/Spreadsheet.svelte
+++ b/packages/client/src/components/app/spreadsheet/Spreadsheet.svelte
@@ -7,6 +7,7 @@
   import DateCell from "./DateCell.svelte"
   import MultiSelectCell from "./MultiSelectCell.svelte"
   import NumberCell from "./NumberCell.svelte"
+  import RelationshipCell from "./RelationshipCell.svelte"
 
   export let table
   export let filter
@@ -96,6 +97,8 @@
       return MultiSelectCell
     } else if (type === "number") {
       return NumberCell
+    } else if (type === "link") {
+      return RelationshipCell
     }
     return TextCell
   }