From d4ccde4cd293dae8e8d254e09ddb45d949f626f5 Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Mon, 26 Jun 2023 14:26:05 +0800
Subject: [PATCH] Improve hover actions on library cards, start to add spaced
 list view

---
 .../patterns/LibraryCards/LibraryGridCard.tsx |  3 ++
 .../LibraryCards/LibraryHoverActions.tsx      | 33 ++++++++++-----
 .../patterns/LibraryCards/LibraryListCard.tsx | 10 +++--
 .../templates/homeFeed/HomeFeedContainer.tsx  |  2 +-
 packages/web/package.json                     |  1 +
 yarn.lock                                     | 40 +++++++++++++++++++
 6 files changed, 74 insertions(+), 15 deletions(-)

diff --git a/packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx b/packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx
index 76335c5ff..25c514a6c 100644
--- a/packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx
+++ b/packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx
@@ -64,9 +64,11 @@ export function ProgressBar(props: ProgressBarProps): JSX.Element {
 
 export function LibraryGridCard(props: LinkedItemCardProps): JSX.Element {
   const [isHovered, setIsHovered] = useState(false)
+  const [anchor, setAnchor] = useState<HTMLDivElement | null>(null)
 
   return (
     <VStack
+      ref={setAnchor}
       css={{
         pl: '20px',
         padding: '15px',
@@ -98,6 +100,7 @@ export function LibraryGridCard(props: LinkedItemCardProps): JSX.Element {
       ) : (
         <>
           <LibraryHoverActions
+            anchor={anchor}
             item={props.item}
             viewer={props.viewer}
             handleAction={props.handleAction}
diff --git a/packages/web/components/patterns/LibraryCards/LibraryHoverActions.tsx b/packages/web/components/patterns/LibraryCards/LibraryHoverActions.tsx
index c796e76c7..30ca83fa0 100644
--- a/packages/web/components/patterns/LibraryCards/LibraryHoverActions.tsx
+++ b/packages/web/components/patterns/LibraryCards/LibraryHoverActions.tsx
@@ -14,8 +14,10 @@ import {
 } from 'phosphor-react'
 import { CardMenu } from '../CardMenu'
 import { UserBasicData } from '../../../lib/networking/queries/useGetViewerQuery'
+import { useFloating, shift, offset } from '@floating-ui/react'
 
 type LibraryHoverActionsProps = {
+  anchor: HTMLDivElement | null
   viewer: UserBasicData
 
   isHovered: boolean
@@ -26,21 +28,30 @@ type LibraryHoverActionsProps = {
 
 export const LibraryHoverActions = (props: LibraryHoverActionsProps) => {
   const [menuOpen, setMenuOpen] = useState(false)
+  const { refs, floatingStyles } = useFloating({
+    elements: {
+      reference: props.anchor,
+    },
+    middleware: [
+      offset({
+        mainAxis: -44,
+        crossAxis: -10,
+      }),
+    ],
+    placement: 'top-end',
+  })
 
   return (
-    <Box
-      css={{
-        position: 'relative',
-        width: '100%',
-        height: '0px',
-        display: 'flex',
-      }}
-    >
+    <Box ref={refs.setFloating} style={floatingStyles}>
       <Box
         css={{
-          position: 'absolute',
-          top: '-6px',
-          right: '-6px',
+          // position: 'fixed',
+          // transform: 'translate(621px, 73px)',
+
+          // top: '5px',
+          // right: '155px',
+          // marginTop: '-33px',
+          // marginRight: '-162px',
           overflow: 'clip',
 
           height: '33px',
diff --git a/packages/web/components/patterns/LibraryCards/LibraryListCard.tsx b/packages/web/components/patterns/LibraryCards/LibraryListCard.tsx
index 594a48725..cd0bf8490 100644
--- a/packages/web/components/patterns/LibraryCards/LibraryListCard.tsx
+++ b/packages/web/components/patterns/LibraryCards/LibraryListCard.tsx
@@ -31,17 +31,21 @@ import { LibraryHoverActions } from './LibraryHoverActions'
 
 export function LibraryListCard(props: LinkedItemCardProps): JSX.Element {
   const [isHovered, setIsHovered] = useState(false)
+  const [anchor, setAnchor] = useState<HTMLDivElement | null>(null)
 
   return (
     <VStack
+      ref={setAnchor}
       css={{
-        px: '15px',
-        py: '10px',
+        px: '20px',
+        pt: '20px',
+        pb: '20px',
         height: '100%',
         cursor: 'pointer',
         gap: '10px',
         border: '1px solid $grayBorder',
         borderBottom: 'none',
+        borderRadius: '6px',
         width: '100vw',
         '@media (min-width: 768px)': {
           width: `calc(100vw - ${LIBRARY_LEFT_MENU_WIDTH})`,
@@ -70,6 +74,7 @@ export function LibraryListCard(props: LinkedItemCardProps): JSX.Element {
       ) : (
         <>
           <LibraryHoverActions
+            anchor={anchor}
             item={props.item}
             viewer={props.viewer}
             handleAction={props.handleAction}
@@ -97,7 +102,6 @@ export function LibraryListCardContent(
   props: LinkedItemCardProps
 ): JSX.Element {
   const { isChecked, setIsChecked, item } = props
-  const [menuOpen, setMenuOpen] = useState(false)
   const originText = siteName(props.item.originalArticleUrl, props.item.url)
 
   const handleCheckChanged = useCallback(() => {
diff --git a/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx b/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx
index e824a5b6c..6df99d810 100644
--- a/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx
+++ b/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx
@@ -1100,7 +1100,7 @@ function LibraryItems(props: LibraryItemsProps): JSX.Element {
         width: '100%',
         gridAutoRows: 'auto',
         borderRadius: '6px',
-        gridGap: props.layout == 'LIST_LAYOUT' ? '0' : '20px',
+        gridGap: props.layout == 'LIST_LAYOUT' ? '10px' : '20px',
         marginTop: '10px',
         marginBottom: '0px',
         paddingTop: '0',
diff --git a/packages/web/package.json b/packages/web/package.json
index 5e7657691..bbce82d83 100644
--- a/packages/web/package.json
+++ b/packages/web/package.json
@@ -18,6 +18,7 @@
     "build-storybook": "build-storybook -s public"
   },
   "dependencies": {
+    "@floating-ui/react": "^0.24.3",
     "@radix-ui/react-avatar": "^0.1.1",
     "@radix-ui/react-checkbox": "^0.1.5",
     "@radix-ui/react-dialog": "^0.1.1",
diff --git a/yarn.lock b/yarn.lock
index 025cd3b97..36db67d18 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2504,6 +2504,34 @@
   dependencies:
     tslib "^2.1.0"
 
+"@floating-ui/core@^1.3.1":
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/@floating-ui/core/-/core-1.3.1.tgz#4d795b649cc3b1cbb760d191c80dcb4353c9a366"
+  integrity sha512-Bu+AMaXNjrpjh41znzHqaz3r2Nr8hHuHZT6V2LBKMhyMl0FgKA62PNYbqnfgmzOhoWZj70Zecisbo4H1rotP5g==
+
+"@floating-ui/dom@^1.3.0":
+  version "1.4.2"
+  resolved "https://registry.yarnpkg.com/@floating-ui/dom/-/dom-1.4.2.tgz#eb3a37f7506c4f95ef735967dc3496b5012e11cb"
+  integrity sha512-VKmvHVatWnewmGGy+7Mdy4cTJX71Pli6v/Wjb5RQBuq5wjUYx+Ef+kRThi8qggZqDgD8CogCpqhRoVp3+yQk+g==
+  dependencies:
+    "@floating-ui/core" "^1.3.1"
+
+"@floating-ui/react-dom@^2.0.1":
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/@floating-ui/react-dom/-/react-dom-2.0.1.tgz#7972a4fc488a8c746cded3cfe603b6057c308a91"
+  integrity sha512-rZtAmSht4Lry6gdhAJDrCp/6rKN7++JnL1/Anbr/DdeyYXQPxvg/ivrbYvJulbRf4vL8b212suwMM2lxbv+RQA==
+  dependencies:
+    "@floating-ui/dom" "^1.3.0"
+
+"@floating-ui/react@^0.24.3":
+  version "0.24.3"
+  resolved "https://registry.yarnpkg.com/@floating-ui/react/-/react-0.24.3.tgz#4f11f09c7245555724f5167dd6925133457db89c"
+  integrity sha512-wWC9duiog4HmbgKSKObDRuXqMjZR/6m75MIG+slm5CVWbridAjK9STcnCsGYmdpK78H/GmzYj4ADVP8paZVLYQ==
+  dependencies:
+    "@floating-ui/react-dom" "^2.0.1"
+    aria-hidden "^1.1.3"
+    tabbable "^6.0.1"
+
 "@google-cloud/common@^3.8.1":
   version "3.9.0"
   resolved "https://registry.yarnpkg.com/@google-cloud/common/-/common-3.9.0.tgz#d93e62d13e66edacfad1cd25b20fdbbc11d9f6dd"
@@ -10070,6 +10098,13 @@ aria-hidden@^1.1.1:
   dependencies:
     tslib "^1.0.0"
 
+aria-hidden@^1.1.3:
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/aria-hidden/-/aria-hidden-1.2.3.tgz#14aeb7fb692bbb72d69bebfa47279c1fd725e954"
+  integrity sha512-xcLxITLe2HYa1cnYnwCjkOO1PqUHQpozB8x9AR0OgWN2woOBi5kSDVxKfd0b7sb1hw5qFeJhXm9H1nu3xSfLeQ==
+  dependencies:
+    tslib "^2.0.0"
+
 aria-query@^4.2.2:
   version "4.2.2"
   resolved "https://registry.yarnpkg.com/aria-query/-/aria-query-4.2.2.tgz#0d2ca6c9aceb56b8977e9fed6aed7e15bbd2f83b"
@@ -26195,6 +26230,11 @@ synchronous-promise@^2.0.15:
   resolved "https://registry.yarnpkg.com/synchronous-promise/-/synchronous-promise-2.0.15.tgz#07ca1822b9de0001f5ff73595f3d08c4f720eb8e"
   integrity sha512-k8uzYIkIVwmT+TcglpdN50pS2y1BDcUnBPK9iJeGu0Pl1lOI8pD6wtzgw91Pjpe+RxtTncw32tLxs/R0yNL2Mg==
 
+tabbable@^6.0.1:
+  version "6.1.2"
+  resolved "https://registry.yarnpkg.com/tabbable/-/tabbable-6.1.2.tgz#b0d3ca81d582d48a80f71b267d1434b1469a3703"
+  integrity sha512-qCN98uP7i9z0fIS4amQ5zbGBOq+OSigYeGvPy7NDk8Y9yncqDZ9pRPgfsc2PJIVM9RrJj7GIfuRgmjoUU9zTHQ==
+
 tapable@^1.0.0, tapable@^1.1.3:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/tapable/-/tapable-1.1.3.tgz#a1fccc06b58db61fd7a45da2da44f5f3a3e67ba2"