From ca8daab0dadfb314b46ab9215f91e6278e81445b Mon Sep 17 00:00:00 2001
From: schroda <50052685+schroda@users.noreply.github.com>
Date: Sun, 7 Apr 2024 21:19:12 +0200
Subject: [PATCH] Change manga in library state on long press in list mode
 (#715)

Was forgotten in 29860482a64ffa3e94994f8f183dd74b83212ee7
---
 src/components/MangaCard.tsx               | 51 +++++++++++++++++++---
 src/components/manga/MangaOptionButton.tsx |  1 +
 2 files changed, 47 insertions(+), 5 deletions(-)

diff --git a/src/components/MangaCard.tsx b/src/components/MangaCard.tsx
index abe4933d..961462d8 100644
--- a/src/components/MangaCard.tsx
+++ b/src/components/MangaCard.tsx
@@ -392,8 +392,22 @@ export const MangaCard = (props: MangaCardProps) => {
                                 component={RouterLink}
                                 to={mangaLinkTo}
                                 onClick={handleClick}
-                                {...longPressBind()}
-                                sx={{ touchCallout: 'none' }}
+                                {...longPressBind(() => popupState.open(optionButtonRef.current))}
+                                sx={{
+                                    touchCallout: 'none',
+                                    '@media (hover: hover) and (pointer: fine)': {
+                                        '&:hover .manga-option-button': {
+                                            visibility: 'visible',
+                                            pointerEvents: 'all',
+                                        },
+                                    },
+                                    '&:hover .source-manga-library-state-button': {
+                                        display: isMobile ? 'none' : 'inline-flex',
+                                    },
+                                    '&:hover .source-manga-library-state-indicator': {
+                                        display: 'none',
+                                    },
+                                }}
                             >
                                 <CardContent
                                     sx={{
@@ -441,17 +455,44 @@ export const MangaCard = (props: MangaCardProps) => {
                                     </Box>
                                     <Stack direction="row" alignItems="center" gap="5px">
                                         <BadgeContainer>
+                                            {inLibraryIndicator && (
+                                                <Button
+                                                    className="source-manga-library-state-button"
+                                                    component="div"
+                                                    variant="contained"
+                                                    size="small"
+                                                    onMouseDown={(e) => e.stopPropagation()}
+                                                    onClick={(e) => {
+                                                        e.preventDefault();
+                                                        e.stopPropagation();
+                                                        updateLibraryState();
+                                                    }}
+                                                    sx={{
+                                                        display: 'none',
+                                                    }}
+                                                    color={isInLibrary ? 'error' : 'primary'}
+                                                >
+                                                    {t(
+                                                        isInLibrary
+                                                            ? 'manga.action.library.remove.label.action'
+                                                            : 'manga.button.add_to_library',
+                                                    )}
+                                                </Button>
+                                            )}
                                             {inLibraryIndicator && isInLibrary && (
-                                                <Typography sx={{ backgroundColor: 'primary.dark' }}>
+                                                <Typography
+                                                    className="source-manga-library-state-indicator"
+                                                    sx={{ backgroundColor: 'primary.dark' }}
+                                                >
                                                     {t('manga.button.in_library')}
                                                 </Typography>
                                             )}
-                                            {showUnreadBadge && unread! > 0 && (
+                                            {showUnreadBadge && (unread ?? 0) > 0 && (
                                                 <Typography sx={{ backgroundColor: 'primary.dark' }}>
                                                     {unread}
                                                 </Typography>
                                             )}
-                                            {showDownloadBadge && downloadCount! > 0 && (
+                                            {showDownloadBadge && (downloadCount ?? 0) > 0 && (
                                                 <Typography
                                                     sx={{
                                                         backgroundColor: 'success.dark',
diff --git a/src/components/manga/MangaOptionButton.tsx b/src/components/manga/MangaOptionButton.tsx
index b665769e..7b4a1872 100644
--- a/src/components/manga/MangaOptionButton.tsx
+++ b/src/components/manga/MangaOptionButton.tsx
@@ -78,6 +78,7 @@ export const MangaOptionButton = forwardRef(
             return (
                 <Tooltip title={t('global.button.options')}>
                     <IconButton
+                        ref={ref}
                         {...bindTriggerProps}
                         onClick={handleClick}
                         onTouchStart={handleClick}