💄 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,71 +43,79 @@ 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}>
+    <Popover
-      <td>
+      withArrow
-        <Popover opened={popoverOpened} radius="md" shadow="md" width={350} withinPortal>
+      withinPortal
-          <Popover.Dropdown>
+      radius="lg"
-            <TorrentQueuePopover torrent={torrent} app={app} />
+      shadow="sm"
-          </Popover.Dropdown>
+      transitionProps={{
-          <Popover.Target>
+        transition: 'pop',
-            <div onMouseEnter={openPopover} onMouseLeave={closePopover}>
+      }}
-              <Text
+    >
-                style={{
+      <Popover.Target>
-                  maxWidth: '30vw',
+        <tr key={torrent.id} style={{ cursor: 'pointer' }}>
-                }}
+          <td>
-                size="xs"
+            <Text
-                lineClamp={1}
+              style={{
-              >
+                maxWidth: '30vw',
-                {torrent.name}
+              }}
+              size="xs"
+              lineClamp={1}
+            >
+              {torrent.name}
+            </Text>
+            {app && (
+              <Text size="xs" color="dimmed">
+                {t('card.table.item.text', {
+                  appName: app.name,
+                  ratio: torrent.ratio.toFixed(2),
+                })}
               </Text>
-              {app && (
+            )}
-                <Text size="xs" color="dimmed">
+          </td>
-                  {t('card.table.item.text', {
+          <td>
-                    appName: app.name,
+            <Text className={classes.noTextBreak} size="xs">
-                    ratio: torrent.ratio.toFixed(2),
+              {humanFileSize(size, false)}
-                  })}
+            </Text>
-                </Text>
+          </td>
-              )}
+          {width > MIN_WIDTH_MOBILE && (
-            </div>
+            <td>
-          </Popover.Target>
+              <Text className={classes.noTextBreak} size="xs">
-        </Popover>
+                {downloadSpeed > 0 ? `${downloadSpeed.toFixed(1)} Mb/s` : '-'}
-      </td>
+              </Text>
-      <td>
+            </td>
-        <Text className={classes.noTextBreak} size="xs">
+          )}
-          {humanFileSize(size, false)}
+          {width > MIN_WIDTH_MOBILE && (
-        </Text>
+            <td>
-      </td>
+              <Text className={classes.noTextBreak} size="xs">
-      {width > MIN_WIDTH_MOBILE && (
+                {uploadSpeed > 0 ? `${uploadSpeed.toFixed(1)} Mb/s` : '-'}
-        <td>
+              </Text>
-          <Text className={classes.noTextBreak} size="xs">
+            </td>
-            {downloadSpeed > 0 ? `${downloadSpeed.toFixed(1)} Mb/s` : '-'}
+          )}
-          </Text>
+          {width > MIN_WIDTH_MOBILE && (
-        </td>
+            <td>
-      )}
+              <Text className={classes.noTextBreak} size="xs">
-      {width > MIN_WIDTH_MOBILE && (
+                {torrent.eta <= 0 ? '∞' : calculateETA(torrent.eta)}
-        <td>
+              </Text>
-          <Text className={classes.noTextBreak} size="xs">
+            </td>
-            {uploadSpeed > 0 ? `${uploadSpeed.toFixed(1)} Mb/s` : '-'}
+          )}
-          </Text>
+          <td>
-        </td>
+            <Text className={classes.noTextBreak}>{(torrent.progress * 100).toFixed(1)}%</Text>
-      )}
+            <Progress
-      {width > MIN_WIDTH_MOBILE && (
+              radius="lg"
-        <td>
+              color={
-          <Text className={classes.noTextBreak} size="xs">
+                torrent.progress === 1 ? 'green' : torrent.state === 'paused' ? 'yellow' : 'blue'
-            {torrent.eta <= 0 ? '∞' : calculateETA(torrent.eta)}
+              }
-          </Text>
+              value={torrent.progress * 100}
-        </td>
+              size="lg"
-      )}
+            />
-      <td>
+          </td>
-        <Text className={classes.noTextBreak}>{(torrent.progress * 100).toFixed(1)}%</Text>
+        </tr>
-        <Progress
+      </Popover.Target>
-          radius="lg"
+      <Popover.Dropdown>
-          color={torrent.progress === 1 ? 'green' : torrent.state === 'paused' ? 'yellow' : 'blue'}
+        <TorrentQueuePopover torrent={torrent} app={app} />
-          value={torrent.progress * 100}
+      </Popover.Dropdown>
-          size="lg"
+    </Popover>
-        />
-      </td>
-    </tr>
   );
 };
 
@@ -234,7 +239,4 @@ const useStyles = createStyles(() => ({
   noTextBreak: {
     whiteSpace: 'nowrap',
   },
-  transparentBackground: {
-    backgroundColor: 'transparent !important',
-  },
 }));