From e8948ef14c7c2c2142a89ba24228eb4baf8c782c Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Tue, 27 Jun 2023 14:31:14 +0800
Subject: [PATCH] Dont show hover actions on touch devices

---
 .../patterns/LibraryCards/LibraryGridCard.tsx | 26 +++++++++---------
 .../patterns/LibraryCards/LibraryListCard.tsx | 27 ++++++++++---------
 2 files changed, 29 insertions(+), 24 deletions(-)

diff --git a/packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx b/packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx
index 263461044..81fa74f61 100644
--- a/packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx
+++ b/packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx
@@ -116,18 +116,20 @@ export function LibraryGridCard(props: LinkedItemCardProps): JSX.Element {
         <LibraryGridCardContent {...props} isHovered={isHovered} />
       ) : (
         <>
-          <Box
-            ref={refs.setFloating}
-            style={floatingStyles}
-            {...getFloatingProps()}
-          >
-            <LibraryHoverActions
-              item={props.item}
-              viewer={props.viewer}
-              handleAction={props.handleAction}
-              isHovered={isHovered ?? false}
-            />
-          </Box>
+          {!isTouchScreenDevice() && (
+            <Box
+              ref={refs.setFloating}
+              style={floatingStyles}
+              {...getFloatingProps()}
+            >
+              <LibraryHoverActions
+                item={props.item}
+                viewer={props.viewer}
+                handleAction={props.handleAction}
+                isHovered={isHovered ?? false}
+              />
+            </Box>
+          )}
           <Link
             href={`${props.viewer.profile.username}/${props.item.slug}`}
             passHref
diff --git a/packages/web/components/patterns/LibraryCards/LibraryListCard.tsx b/packages/web/components/patterns/LibraryCards/LibraryListCard.tsx
index 99470edea..7e8f2a791 100644
--- a/packages/web/components/patterns/LibraryCards/LibraryListCard.tsx
+++ b/packages/web/components/patterns/LibraryCards/LibraryListCard.tsx
@@ -25,6 +25,7 @@ import {
 } from '@floating-ui/react'
 import { CardMenu } from '../CardMenu'
 import { DotsThree } from 'phosphor-react'
+import { isTouchScreenDevice } from '../../../lib/deviceType'
 
 export function LibraryListCard(props: LinkedItemCardProps): JSX.Element {
   const [isHovered, setIsHovered] = useState(false)
@@ -95,18 +96,20 @@ export function LibraryListCard(props: LinkedItemCardProps): JSX.Element {
         <LibraryListCardContent {...props} isHovered={isHovered} />
       ) : (
         <>
-          <Box
-            ref={refs.setFloating}
-            style={floatingStyles}
-            {...getFloatingProps()}
-          >
-            <LibraryHoverActions
-              item={props.item}
-              viewer={props.viewer}
-              handleAction={props.handleAction}
-              isHovered={isHovered ?? false}
-            />
-          </Box>
+          {!isTouchScreenDevice() && (
+            <Box
+              ref={refs.setFloating}
+              style={floatingStyles}
+              {...getFloatingProps()}
+            >
+              <LibraryHoverActions
+                item={props.item}
+                viewer={props.viewer}
+                handleAction={props.handleAction}
+                isHovered={isHovered ?? false}
+              />
+            </Box>
+          )}
           <Link
             href={`${props.viewer.profile.username}/${props.item.slug}`}
             passHref