💄 Replace hover with click and on the full row (#1397)

src/widgets/torrent/TorrentQueueItem.tsx

@@ -13,7 +13,6 @@ import {
   createStyles,
   useMantineTheme,
 } from '@mantine/core';
-import { useDisclosure } from '@mantine/hooks';
 import {
   IconAffiliate,
   IconDatabase,
@@ -26,7 +25,6 @@ import {
 } from '@tabler/icons-react';
 import { useTranslation } from 'next-i18next';
 import { MIN_WIDTH_MOBILE } from '~/constants/constants';
-
 import { calculateETA } from '~/tools/client/calculateEta';
 import { humanFileSize } from '~/tools/humanFileSize';
 import { AppType } from '~/types/app';
@@ -38,7 +36,6 @@ interface TorrentQueueItemProps {
 }
 
 export const BitTorrentQueueItem = ({ torrent, width, app }: TorrentQueueItemProps) => {
-  const [popoverOpened, { open: openPopover, close: closePopover }] = useDisclosure(false);
   const { classes } = useStyles();
   const { t } = useTranslation('modules/torrents-status');
 
@@ -46,14 +43,18 @@ export const BitTorrentQueueItem = ({ torrent, width, app }: TorrentQueueItemPro
   const uploadSpeed = torrent.uploadSpeed / 1024 / 1024;
   const size = torrent.totalSelected;
   return (
-    <tr key={torrent.id} className={classes.transparentBackground}>
-      <td>
-        <Popover opened={popoverOpened} radius="md" shadow="md" width={350} withinPortal>
-          <Popover.Dropdown>
-            <TorrentQueuePopover torrent={torrent} app={app} />
-          </Popover.Dropdown>
+    <Popover
+      withArrow
+      withinPortal
+      radius="lg"
+      shadow="sm"
+      transitionProps={{
+        transition: 'pop',
+      }}
+    >
       <Popover.Target>
-            <div onMouseEnter={openPopover} onMouseLeave={closePopover}>
+        <tr key={torrent.id} style={{ cursor: 'pointer' }}>
+          <td>
             <Text
               style={{
                 maxWidth: '30vw',
@@ -71,9 +72,6 @@ export const BitTorrentQueueItem = ({ torrent, width, app }: TorrentQueueItemPro
                 })}
               </Text>
             )}
-            </div>
-          </Popover.Target>
-        </Popover>
           </td>
           <td>
             <Text className={classes.noTextBreak} size="xs">
@@ -105,12 +103,19 @@ export const BitTorrentQueueItem = ({ torrent, width, app }: TorrentQueueItemPro
             <Text className={classes.noTextBreak}>{(torrent.progress * 100).toFixed(1)}%</Text>
             <Progress
               radius="lg"
-          color={torrent.progress === 1 ? 'green' : torrent.state === 'paused' ? 'yellow' : 'blue'}
+              color={
+                torrent.progress === 1 ? 'green' : torrent.state === 'paused' ? 'yellow' : 'blue'
+              }
               value={torrent.progress * 100}
               size="lg"
             />
           </td>
         </tr>
+      </Popover.Target>
+      <Popover.Dropdown>
+        <TorrentQueuePopover torrent={torrent} app={app} />
+      </Popover.Dropdown>
+    </Popover>
   );
 };
 
@@ -234,7 +239,4 @@ const useStyles = createStyles(() => ({
   noTextBreak: {
     whiteSpace: 'nowrap',
   },
-  transparentBackground: {
-    backgroundColor: 'transparent !important',
-  },
 }));