From c6f752d3c48d20c4cdea61c71b7730fbf2cb534d Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Wed, 1 Mar 2023 21:20:10 +0800
Subject: [PATCH] Wrap the next Link in the VStack so we still get hover states
 from the Library list code

---
 .../patterns/LibraryCards/LibraryGridCard.tsx | 344 +++++++++---------
 .../templates/homeFeed/HomeFeedContainer.tsx  |   3 +
 2 files changed, 178 insertions(+), 169 deletions(-)

diff --git a/packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx b/packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx
index d32baddec..c2ce66828 100644
--- a/packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx
+++ b/packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx
@@ -8,6 +8,8 @@ import relativeTime from 'dayjs/plugin/relativeTime'
 import { useState } from 'react'
 import { DotsThree, DotsThreeVertical } from 'phosphor-react'
 import Link from 'next/link'
+import { CardMenu } from '../CardMenu'
+import { Dropdown, DropdownOption } from '../../elements/DropdownElements'
 
 dayjs.extend(relativeTime)
 
@@ -114,55 +116,61 @@ export function LibraryGridCard(props: LinkedItemCardProps): JSX.Element {
     siteName(props.item.originalArticleUrl, props.item.url)
 
   return (
-    <Link href={`${props.viewer.profile.username}/${props.item.slug}`}>
-      <VStack
-        css={{
-          pl: '20px',
-          padding: '15px',
-          width: '320px',
-          height: '100%',
-          minHeight: '270px',
-          background: 'white',
-          borderRadius: '5px',
-          borderWidth: '1px',
-          borderStyle: 'solid',
-          borderColor: '#E1E1E1',
-          cursor: 'pointer',
-        }}
-        alignment="start"
-        distribution="start"
-        onMouseEnter={() => {
-          setIsHovered(true)
-        }}
-        onMouseLeave={() => {
-          setIsHovered(false)
-        }}
+    <VStack
+      css={{
+        pl: '20px',
+        padding: '15px',
+        width: '320px',
+        height: '100%',
+        minHeight: '270px',
+        background: 'white',
+        borderRadius: '5px',
+        borderWidth: '1px',
+        borderStyle: 'solid',
+        borderColor: '#E1E1E1',
+        cursor: 'pointer',
+      }}
+      alignment="start"
+      distribution="start"
+      onMouseEnter={() => {
+        setIsHovered(true)
+      }}
+      onMouseLeave={() => {
+        setIsHovered(false)
+      }}
+    >
+      <Link
+        href={`${props.viewer.profile.username}/${props.item.slug}`}
+        passHref
       >
-        <HStack
-          css={{
-            width: '100%',
-            color: '#6A6968',
-            fontSize: '13px',
-            fontWeight: '400',
-            fontFamily: 'SF Pro Display',
-            minHeight: '35px',
-          }}
-          distribution="start"
+        <a
+          href={`${props.viewer.profile.username}/${props.item.slug}`}
+          style={{ textDecoration: 'unset', width: '100%', height: '100%' }}
         >
-          <Box>
-            {timeAgo(props.item.savedAt)}
-            {` `}
-            {props.item.wordsCount ?? 0 > 0
-              ? `  • ${Math.max(
-                  1,
-                  Math.round((props.item.wordsCount ?? 0) / 235)
-                )} min read`
-              : null}
-          </Box>
-          {isHovered ? (
+          <HStack
+            css={{
+              width: '100%',
+              color: '#6A6968',
+              fontSize: '13px',
+              fontWeight: '400',
+              fontFamily: 'SF Pro Display',
+              minHeight: '35px',
+            }}
+            distribution="start"
+          >
+            <Box>
+              {timeAgo(props.item.savedAt)}
+              {` `}
+              {props.item.wordsCount ?? 0 > 0
+                ? `  • ${Math.max(
+                    1,
+                    Math.round((props.item.wordsCount ?? 0) / 235)
+                  )} min read`
+                : null}
+            </Box>
             <Box
               css={{
-                display: 'flex',
+                display: isHovered ? 'flex' : 'none',
                 marginLeft: 'auto',
                 height: '30px',
                 width: '30px',
@@ -176,146 +184,144 @@ export function LibraryGridCard(props: LinkedItemCardProps): JSX.Element {
                 },
               }}
             >
-              <DotsThreeVertical size={25} weight="bold" color="#ADADAD" />
+              <CardMenu
+                item={props.item}
+                viewer={props.viewer}
+                actionHandler={props.handleAction}
+                triggerElement={
+                  <DotsThreeVertical size={25} weight="bold" color="#ADADAD" />
+                }
+              />
             </Box>
-          ) : (
+          </HStack>
+          <VStack
+            alignment="start"
+            distribution="start"
+            css={{ height: '100%', width: '100%' }}
+          >
             <Box
               css={{
-                color: '#ADADAD',
+                color: 'rgba(61, 61, 61, 1)',
+                fontSize: '20px',
+                fontWeight: '700',
+                lineHeight: '1.25',
+                fontFamily: 'SF Pro Display',
+                overflow: 'hidden',
+                textOverflow: 'ellipsis',
+                wordBreak: 'break-word',
+                display: '-webkit-box',
+                '-webkit-line-clamp': '2',
+                '-webkit-box-orient': 'vertical',
+                height: '50px',
+              }}
+            >
+              {props.item.title}
+            </Box>
+            <Box
+              css={{
+                color: '#3D3D3D',
+                pt: '10px',
+                fontSize: '13px',
+                fontWeight: '400',
+                lineHeight: '140%',
+                fontFamily: 'SF Pro Display',
+                overflow: 'hidden',
+                textOverflow: 'ellipsis',
+                display: '-webkit-box',
+                '-webkit-line-clamp': '2',
+                '-webkit-box-orient': 'vertical',
+                height: '45px',
+                alignItems: 'start',
+              }}
+            >
+              test{props.item.description}
+            </Box>
+            <HStack
+              css={{
+                pt: '10px',
+                color: '#898989',
                 fontSize: '13px',
                 fontWeight: '400',
                 fontFamily: 'SF Pro Display',
               }}
-            ></Box>
-          )}
-        </HStack>
-        <VStack
-          alignment="start"
-          distribution="start"
-          css={{ height: '100%', width: '100%' }}
-        >
-          <Box
-            css={{
-              color: 'rgba(61, 61, 61, 1)',
-              fontSize: '20px',
-              fontWeight: '700',
-              lineHeight: '1.25',
-              fontFamily: 'SF Pro Display',
-              overflow: 'hidden',
-              textOverflow: 'ellipsis',
-              wordBreak: 'break-word',
-              display: '-webkit-box',
-              '-webkit-line-clamp': '2',
-              '-webkit-box-orient': 'vertical',
-              height: '50px',
-            }}
-          >
-            {props.item.title}
-          </Box>
-          <Box
-            css={{
-              color: '#3D3D3D',
-              pt: '10px',
-              fontSize: '13px',
-              fontWeight: '400',
-              lineHeight: '140%',
-              fontFamily: 'SF Pro Display',
-              overflow: 'hidden',
-              textOverflow: 'ellipsis',
-              display: '-webkit-box',
-              '-webkit-line-clamp': '2',
-              '-webkit-box-orient': 'vertical',
-              height: '45px',
-              alignItems: 'start',
-            }}
-          >
-            test{props.item.description}
-          </Box>
-          <HStack
-            css={{
-              pt: '10px',
-              color: '#898989',
-              fontSize: '13px',
-              fontWeight: '400',
-              fontFamily: 'SF Pro Display',
-            }}
-          >
+            >
+              <SpanBox
+                css={{
+                  m: '0px',
+                  maxLines: '1',
+                  textOverflow: 'ellipsis',
+                  whiteSpace: 'nowrap',
+                  maxWidth: '240px',
+                  overflow: 'hidden',
+                  height: '21px',
+                }}
+              >
+                {props.item.author}
+                {props.item.author && originText && ' | '}
+                <SpanBox css={{ textDecoration: 'underline' }}>
+                  {originText}
+                </SpanBox>
+              </SpanBox>
+            </HStack>
             <SpanBox
               css={{
+                pt: '20px',
+                pr: '10px',
+                pb: '20px',
+                width: '100%',
                 m: '0px',
-                maxLines: '1',
-                textOverflow: 'ellipsis',
-                whiteSpace: 'nowrap',
-                maxWidth: '240px',
-                overflow: 'hidden',
-                height: '21px',
               }}
             >
-              {props.item.author}
-              {props.item.author && originText && ' | '}
-              <SpanBox css={{ textDecoration: 'underline' }}>
-                {originText}
-              </SpanBox>
+              <ProgressBar
+                fillPercentage={props.item.readingProgressPercent}
+                fillColor="#FFD234"
+                backgroundColor="#EEEEEE"
+                borderRadius="5px"
+              />
             </SpanBox>
-          </HStack>
-          <SpanBox
-            css={{
-              pt: '20px',
-              pr: '10px',
-              pb: '20px',
-              width: '100%',
-              m: '0px',
-            }}
-          >
-            <ProgressBar
-              fillPercentage={props.item.readingProgressPercent}
-              fillColor="#FFD234"
-              backgroundColor="#EEEEEE"
-              borderRadius="5px"
-            />
-          </SpanBox>
 
-          <HStack
-            distribution="start"
-            alignment="start"
-            css={{ width: '100%', minHeight: '50px' }}
-          >
             <HStack
-              css={{
-                display: 'block',
-                minHeight: '35px',
-              }}
+              distribution="start"
+              alignment="start"
+              css={{ width: '100%', minHeight: '50px' }}
             >
-              {props.item.labels?.map(({ name, color }, index) => (
-                <LabelChip key={index} text={name || ''} color={color} />
-              ))}
+              <HStack
+                css={{
+                  display: 'block',
+                  minHeight: '35px',
+                }}
+              >
+                {props.item.labels?.map(({ name, color }, index) => (
+                  <LabelChip key={index} text={name || ''} color={color} />
+                ))}
+              </HStack>
+              <VStack
+                css={{
+                  width: '80px',
+                  height: '100%',
+                  marginLeft: 'auto',
+                  flexGrow: '1',
+                }}
+                alignment="end"
+                distribution="end"
+              >
+                {props.item.image && (
+                  <CoverImage
+                    src={props.item.image}
+                    alt="Link Preview Image"
+                    width={50}
+                    height={50}
+                    css={{ borderRadius: '8px' }}
+                    onError={(e) => {
+                      ;(e.target as HTMLElement).style.display = 'none'
+                    }}
+                  />
+                )}
+              </VStack>
             </HStack>
-            <VStack
-              css={{
-                width: '80px',
-                height: '100%',
-                marginLeft: 'auto',
-                flexGrow: '1',
-              }}
-              alignment="end"
-              distribution="end"
-            >
-              {props.item.image && (
-                <CoverImage
-                  src={props.item.image}
-                  alt="Link Preview Image"
-                  width={50}
-                  height={50}
-                  css={{ borderRadius: '8px' }}
-                  onError={(e) => {
-                    ;(e.target as HTMLElement).style.display = 'none'
-                  }}
-                />
-              )}
-            </VStack>
-          </HStack>
-        </VStack>
-      </VStack>
-    </Link>
+          </VStack>
+        </a>
+      </Link>
+    </VStack>
   )
 }
diff --git a/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx b/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx
index 9a42a0f26..1c2753cd2 100644
--- a/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx
+++ b/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx
@@ -934,6 +934,9 @@ function HomeFeedGrid(props: HomeFeedContentProps): JSX.Element {
                             '> div': {
                               bg: '$grayBgActive',
                             },
+                            '> a': {
+                              bg: '$grayBgActive',
+                            },
                           },
                         }}
                       >