From e5efdf919db47f2a99a0f533447726a60030be41 Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Wed, 8 Mar 2023 10:52:59 +0800
Subject: [PATCH] Highlights dropdown menu in the highlight layout

---
 .../templates/homeFeed/HighlightsLayout.tsx   | 45 +++++++++++++++----
 1 file changed, 37 insertions(+), 8 deletions(-)

diff --git a/packages/web/components/templates/homeFeed/HighlightsLayout.tsx b/packages/web/components/templates/homeFeed/HighlightsLayout.tsx
index d892ffec7..e78c599aa 100644
--- a/packages/web/components/templates/homeFeed/HighlightsLayout.tsx
+++ b/packages/web/components/templates/homeFeed/HighlightsLayout.tsx
@@ -6,6 +6,7 @@ import { Highlight } from '../../../lib/networking/fragments/highlightFragment'
 import { Label } from '../../../lib/networking/fragments/labelFragment'
 import { LibraryItem } from '../../../lib/networking/queries/useGetLibraryItemsQuery'
 import { UserBasicData } from '../../../lib/networking/queries/useGetViewerQuery'
+import { Dropdown, DropdownOption } from '../../elements/DropdownElements'
 import { SideBarIcon } from '../../elements/images/SideBarIcon'
 import { LabelChip } from '../../elements/LabelChip'
 import {
@@ -309,13 +310,6 @@ function HighlightItemCard(props: HighlightItemCardProps): JSX.Element {
       css={{ width: '100%', py: '20px', cursor: 'pointer' }}
       onMouseEnter={() => setHover(true)}
       onMouseLeave={() => setHover(false)}
-      onClick={(event) => {
-        if (router && props.viewer) {
-          const dest = `/${props.viewer}/${props.item.node.slug}#${props.highlight.id}`
-          router.push(dest)
-        }
-        event.preventDefault()
-      }}
     >
       <VStack
         css={{
@@ -328,6 +322,13 @@ function HighlightItemCard(props: HighlightItemCardProps): JSX.Element {
         }}
         alignment="start"
         distribution="start"
+        onClick={(event) => {
+          if (router && props.viewer) {
+            const dest = `/${props.viewer}/${props.item.node.slug}#${props.highlight.id}`
+            router.push(dest)
+          }
+          event.preventDefault()
+        }}
       >
         <StyledQuote>
           <SpanBox css={{ p: '1px', borderRadius: '2px' }}>
@@ -380,7 +381,7 @@ function HighlightItemCard(props: HighlightItemCardProps): JSX.Element {
           },
         }}
       >
-        <DotsThreeVertical size={20} color="#EBEBEB" weight="bold" />
+        <HighlightsMenu />
       </SpanBox>
     </HStack>
   )
@@ -419,3 +420,31 @@ function HighlightCountChip(props: HighlightCountChipProps): JSX.Element {
     </HStack>
   )
 }
+
+function HighlightsMenu(): JSX.Element {
+  return (
+    <Dropdown
+      triggerElement={
+        <Box
+          css={{
+            display: 'flex',
+            height: '20px',
+            width: '20px',
+            alignItems: 'center',
+            justifyContent: 'center',
+            borderRadius: '1000px',
+            '&:hover': {
+              bg: '#898989',
+            },
+          }}
+        >
+          <DotsThreeVertical size={20} color="#EBEBEB" weight="bold" />
+        </Box>
+      }
+    >
+      <DropdownOption onSelect={() => {}} title="Copy" />
+      <DropdownOption onSelect={() => {}} title="Labels" />
+      <DropdownOption onSelect={() => {}} title="Delete" />
+    </Dropdown>
+  )
+}