🔀 Merge branch 'dev' into feature/add-basic-authentication

src/widgets/torrent/TorrentQueueItem.tsx

@@ -10,6 +10,7 @@ import {
   Progress,
   Stack,
   Text,
+  createStyles,
   useMantineTheme,
 } from '@mantine/core';
 import { useDisclosure, useElementSize } from '@mantine/hooks';
@@ -24,6 +25,7 @@ import {
   IconUpload,
 } 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';
@@ -32,19 +34,20 @@ import { AppType } from '../../types/app';
 interface TorrentQueueItemProps {
   torrent: NormalizedTorrent;
   app?: AppType;
+  width: number;
 }
 
-export const BitTorrrentQueueItem = ({ torrent, app }: TorrentQueueItemProps) => {
+export const BitTorrrentQueueItem = ({ torrent, width, app }: TorrentQueueItemProps) => {
   const [popoverOpened, { open: openPopover, close: closePopover }] = useDisclosure(false);
   const theme = useMantineTheme();
-  const { width } = useElementSize();
+  const { classes } = useStyles();
   const { t } = useTranslation('modules/torrents-status');
 
   const downloadSpeed = torrent.downloadSpeed / 1024 / 1024;
   const uploadSpeed = torrent.uploadSpeed / 1024 / 1024;
   const size = torrent.totalSelected;
   return (
-    <tr key={torrent.id}>
+    <tr key={torrent.id} className={classes.transparentBackground}>
       <td>
         <Popover opened={popoverOpened} radius="md" shadow="md" width={350} withinPortal>
           <Popover.Dropdown>
@@ -74,25 +77,33 @@ export const BitTorrrentQueueItem = ({ torrent, app }: TorrentQueueItemProps) =>
         </Popover>
       </td>
       <td>
-        <Text size="xs">{humanFileSize(size, false)}</Text>
+        <Text className={classes.noTextBreak} size="xs">
+          {humanFileSize(size, false)}
+        </Text>
       </td>
-      {theme.fn.largerThan('xs') && (
+      {width > MIN_WIDTH_MOBILE && (
         <td>
-          <Text size="xs">{downloadSpeed > 0 ? `${downloadSpeed.toFixed(1)} Mb/s` : '-'}</Text>
+          <Text className={classes.noTextBreak} size="xs">
+            {downloadSpeed > 0 ? `${downloadSpeed.toFixed(1)} Mb/s` : '-'}
+          </Text>
         </td>
       )}
-      {theme.fn.largerThan('xs') && (
+      {width > MIN_WIDTH_MOBILE && (
         <td>
-          <Text size="xs">{uploadSpeed > 0 ? `${uploadSpeed.toFixed(1)} Mb/s` : '-'}</Text>
+          <Text className={classes.noTextBreak} size="xs">
+            {uploadSpeed > 0 ? `${uploadSpeed.toFixed(1)} Mb/s` : '-'}
+          </Text>
         </td>
       )}
-      {theme.fn.largerThan('xs') && (
+      {width > MIN_WIDTH_MOBILE && (
         <td>
-          <Text size="xs">{torrent.eta <= 0 ? '∞' : calculateETA(torrent.eta)}</Text>
+          <Text className={classes.noTextBreak} size="xs">
+            {torrent.eta <= 0 ? '∞' : calculateETA(torrent.eta)}
+          </Text>
         </td>
       )}
       <td>
-        <Text>{(torrent.progress * 100).toFixed(1)}%</Text>
+        <Text className={classes.noTextBreak}>{(torrent.progress * 100).toFixed(1)}%</Text>
         <Progress
           radius="lg"
           color={torrent.progress === 1 ? 'green' : torrent.state === 'paused' ? 'yellow' : 'blue'}
@@ -104,7 +115,7 @@ export const BitTorrrentQueueItem = ({ torrent, app }: TorrentQueueItemProps) =>
   );
 };
 
-const TorrentQueuePopover = ({ torrent, app }: TorrentQueueItemProps) => {
+const TorrentQueuePopover = ({ torrent, app }: Omit<TorrentQueueItemProps, 'width'>) => {
   const { t } = useTranslation('modules/torrents-status');
   const { colors } = useMantineTheme();
 
@@ -219,3 +230,12 @@ const TorrentQueuePopover = ({ torrent, app }: TorrentQueueItemProps) => {
     </Stack>
   );
 };
+
+const useStyles = createStyles(() => ({
+  noTextBreak: {
+    whiteSpace: 'nowrap',
+  },
+  transparentBackground: {
+    backgroundColor: 'transparent !important',
+  },
+}));

src/widgets/torrent/TorrentTile.tsx

@@ -1,4 +1,4 @@
-import { NormalizedTorrent } from '@ctrl/shared-torrent';
+import { NormalizedTorrent, TorrentState } from '@ctrl/shared-torrent';
 import {
   Badge,
   Center,
@@ -17,11 +17,12 @@ import dayjs from 'dayjs';
 import duration from 'dayjs/plugin/duration';
 import relativeTime from 'dayjs/plugin/relativeTime';
 import { useTranslation } from 'next-i18next';
+import { useCardStyles } from '~/components/layout/Common/useCardStyles';
 
 import { MIN_WIDTH_MOBILE } from '../../constants/constants';
-import { useGetDownloadClientsQueue } from '../download-speed/useGetNetworkSpeed';
 import { NormalizedDownloadQueueResponse } from '../../types/api/downloads/queue/NormalizedDownloadQueueResponse';
 import { AppIntegrationType } from '../../types/app';
+import { useGetDownloadClientsQueue } from '../download-speed/useGetNetworkSpeed';
 import { defineWidget } from '../helper';
 import { IWidget } from '../widgets';
 import { BitTorrrentQueueItem } from './TorrentQueueItem';
@@ -70,6 +71,7 @@ interface TorrentTileProps {
 function TorrentTile({ widget }: TorrentTileProps) {
   const { t } = useTranslation('modules/torrents-status');
   const { width, ref } = useElementSize();
+  const { classes } = useCardStyles(true);
 
   const {
     data,
@@ -154,11 +156,11 @@ function TorrentTile({ widget }: TorrentTileProps) {
           </thead>
           <tbody>
             {filteredTorrents.map((torrent, index) => (
-              <BitTorrrentQueueItem key={index} torrent={torrent} app={undefined} />
+              <BitTorrrentQueueItem key={index} torrent={torrent} width={width} app={undefined} />
             ))}
 
             {filteredTorrents.length !== torrents.length && (
-              <tr>
+              <tr className={classes.card}>
                 <td colSpan={width > MIN_WIDTH_MOBILE ? 6 : 3}>
                   <Flex gap="xs" align="center" justify="center">
                     <IconInfoCircle opacity={0.7} size={18} />