🐛 Fix overflowing torrent module issue and added updated last text

src/widgets/bitTorrent/BitTorrentTile.tsx

@@ -1,6 +1,7 @@
-import { NormalizedTorrent, TorrentState } from '@ctrl/shared-torrent';
+import { NormalizedTorrent } from '@ctrl/shared-torrent';
 import {
   Center,
+  Flex,
   Group,
   Loader,
   ScrollArea,
@@ -12,6 +13,9 @@ import {
 } from '@mantine/core';
 import { useElementSize } from '@mantine/hooks';
 import { IconFileDownload } from '@tabler/icons';
+import dayjs from 'dayjs';
+import duration from 'dayjs/plugin/duration';
+import relativeTime from 'dayjs/plugin/relativeTime';
 import { useTranslation } from 'next-i18next';
 import { useEffect, useState } from 'react';
 import { useConfigContext } from '../../config/provider';
@@ -21,6 +25,9 @@ import { defineWidget } from '../helper';
 import { IWidget } from '../widgets';
 import { BitTorrrentQueueItem } from './BitTorrentQueueItem';
 
+dayjs.extend(duration);
+dayjs.extend(relativeTime);
+
 const downloadAppTypes: AppIntegrationType['type'][] = ['deluge', 'qBittorrent', 'transmission'];
 
 const definition = defineWidget({
@@ -62,7 +69,9 @@ function BitTorrentTile({ widget }: BitTorrentTileProps) {
     [];
 
   const [selectedAppId, setSelectedApp] = useState<string | null>(downloadApps[0]?.id);
-  const { data, isFetching, isError } = useGetTorrentData({ appId: selectedAppId! });
+  const { data, isError, isInitialLoading, dataUpdatedAt } = useGetTorrentData({
+    appId: selectedAppId!,
+  });
 
   useEffect(() => {
     if (!selectedAppId && downloadApps.length) {
@@ -92,7 +101,7 @@ function BitTorrentTile({ widget }: BitTorrentTileProps) {
     );
   }
 
-  if (isFetching) {
+  if (isInitialLoading) {
     return (
       <Stack align="center">
         <Loader />
@@ -124,8 +133,13 @@ function BitTorrentTile({ widget }: BitTorrentTileProps) {
     return true;
   };
 
+  const difference = new Date().getTime() - dataUpdatedAt;
+  const duration = dayjs.duration(difference, 'ms');
+  const humanizedDuration = duration.humanize();
+
   return (
-    <ScrollArea sx={{ height: 300, width: '100%' }}>
+    <Flex direction="column" sx={{ height: '100%' }}>
+      <ScrollArea sx={{ height: '100%', width: '100%' }}>
         <Table highlightOnHover p="sm">
           <thead>
             <tr>
@@ -144,6 +158,10 @@ function BitTorrentTile({ widget }: BitTorrentTileProps) {
           </tbody>
         </Table>
       </ScrollArea>
+      <Text color="dimmed" size="xs">
+        Last updated {humanizedDuration} ago
+      </Text>
+    </Flex>
   );
 }
 

src/widgets/date/DateTile.tsx

@@ -1,4 +1,4 @@
-import { Center, Stack, Text, Title } from '@mantine/core';
+import { Stack, Text, Title } from '@mantine/core';
 import { IconClock } from '@tabler/icons';
 import dayjs from 'dayjs';
 import { useEffect, useRef, useState } from 'react';