From 6cd55e91664cb9381b384099410de89106115de8 Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Wed, 4 Jan 2023 22:33:30 -0800
Subject: [PATCH] Add ContextMenu to CharacterUnit with placeholders

---
 components/CharacterUnit/index.scss |  1 +
 components/CharacterUnit/index.tsx  | 30 +++++++++++++++++++++++++++--
 2 files changed, 29 insertions(+), 2 deletions(-)

diff --git a/components/CharacterUnit/index.scss b/components/CharacterUnit/index.scss
index 2c630039..9741d1c9 100644
--- a/components/CharacterUnit/index.scss
+++ b/components/CharacterUnit/index.scss
@@ -5,6 +5,7 @@
   gap: calc($unit / 2);
   // min-height: 320px;
   // max-width: 200px;
+  position: relative;
   margin-bottom: $unit * 4;
 
   &.editable .CharacterImage:hover {
diff --git a/components/CharacterUnit/index.tsx b/components/CharacterUnit/index.tsx
index 7dbce073..05925d14 100644
--- a/components/CharacterUnit/index.tsx
+++ b/components/CharacterUnit/index.tsx
@@ -4,12 +4,21 @@ import { useSnapshot } from 'valtio'
 import { useTranslation } from 'next-i18next'
 import classnames from 'classnames'
 
-import { appState } from '~utils/appState'
-
+import Button from '~components/Button'
 import CharacterHovercard from '~components/CharacterHovercard'
+import {
+  ContextMenu,
+  ContextMenuTrigger,
+  ContextMenuContent,
+} from '~components/ContextMenu'
+import ContextMenuItem from '~components/ContextMenuItem'
 import SearchModal from '~components/SearchModal'
 import UncapIndicator from '~components/UncapIndicator'
+
+import { appState } from '~utils/appState'
+
 import PlusIcon from '~public/icons/Add.svg'
+import SettingsIcon from '~public/icons/Settings.svg'
 
 import type { SearchableObject } from '~types'
 
@@ -106,8 +115,25 @@ const CharacterUnit = (props: Props) => {
     </SearchModal>
   )
 
+  const contextMenu = () => {
+    return props.editable && gridCharacter && gridCharacter.id ? (
+      <ContextMenu>
+        <ContextMenuTrigger asChild>
+          <Button accessoryIcon={<SettingsIcon />} className="Options" />
+        </ContextMenuTrigger>
+        <ContextMenuContent align="start">
+          <ContextMenuItem>Modify character</ContextMenuItem>
+          <ContextMenuItem>Remove from grid</ContextMenuItem>
+        </ContextMenuContent>
+      </ContextMenu>
+    ) : (
+      ''
+    )
+  }
+
   const unitContent = (
     <div className={classes}>
+      {contextMenu()}
       {props.editable ? editableImage : image}
       {gridCharacter && character ? (
         <UncapIndicator