💄 Added modal on usenet widget (#1398)

src/widgets/useNet/UsenetHistoryList.tsx

@@ -3,25 +3,26 @@ import {
   Center,
   Code,
   Group,
+  List,
   Pagination,
+  Popover,
   Skeleton,
   Stack,
   Table,
   Text,
   Title,
-  Tooltip,
 } from '@mantine/core';
 import { useElementSize } from '@mantine/hooks';
-import { IconAlertCircle } from '@tabler/icons-react';
+import { IconAlertCircle, IconClock, IconFileDownload, IconFileInfo } from '@tabler/icons-react';
 import dayjs from 'dayjs';
 import duration from 'dayjs/plugin/duration';
 import { useTranslation } from 'next-i18next';
 import { FunctionComponent, useState } from 'react';
-
-import { useGetUsenetHistory } from '../dashDot/api';
 import { parseDuration } from '~/tools/client/parseDuration';
 import { humanFileSize } from '~/tools/humanFileSize';
 
+import { useGetUsenetHistory } from '../dashDot/api';
+
 dayjs.extend(duration);
 
 interface UsenetHistoryListProps {
@@ -87,16 +88,25 @@ export const UsenetHistoryList: FunctionComponent<UsenetHistoryListProps> = ({ a
           <tr>
             <th>{t('modules/usenet:history.header.name')}</th>
             <th style={{ width: 100 }}>{t('modules/usenet:history.header.size')}</th>
-            {durationBreakpoint < width ? (
+            {durationBreakpoint < width && (
               <th style={{ width: 200 }}>{t('modules/usenet:history.header.duration')}</th>
-            ) : null}
+            )}
           </tr>
         </thead>
         <tbody>
           {data.items.map((history) => (
+            <Popover
+              withArrow
+              withinPortal
+              radius="lg"
+              shadow="sm"
+              transitionProps={{
+                transition: 'pop',
+              }}
+            >
+              <Popover.Target>
                 <tr key={history.id}>
                   <td>
-                <Tooltip position="top" label={history.name}>
                     <Text
                       size="xs"
                       style={{
@@ -107,17 +117,29 @@ export const UsenetHistoryList: FunctionComponent<UsenetHistoryListProps> = ({ a
                     >
                       {history.name}
                     </Text>
-                </Tooltip>
                   </td>
                   <td>
                     <Text size="xs">{humanFileSize(history.size)}</Text>
                   </td>
-              {durationBreakpoint < width ? (
+                  {durationBreakpoint < width && (
                     <td>
                       <Text size="xs">{parseDuration(history.time, t)}</Text>
                     </td>
-              ) : null}
+                  )}
                 </tr>
+              </Popover.Target>
+              <Popover.Dropdown>
+                <List>
+                  <List.Item icon={<IconFileInfo size={16} />}>{history.name}</List.Item>
+                  <List.Item icon={<IconClock size={16} />}>
+                    {parseDuration(history.time, t)}
+                  </List.Item>
+                  <List.Item icon={<IconFileDownload size={16} />}>
+                    {humanFileSize(history.size)}
+                  </List.Item>
+                </List>
+              </Popover.Dropdown>
+            </Popover>
           ))}
         </tbody>
       </Table>

src/widgets/useNet/UsenetQueueList.tsx

@@ -1,27 +1,35 @@
 import {
-  ActionIcon,
   Alert,
   Center,
   Code,
   Group,
+  List,
   Pagination,
+  Popover,
   Progress,
   Skeleton,
   Stack,
   Table,
   Text,
   Title,
-  Tooltip,
   useMantineTheme,
 } from '@mantine/core';
 import { useElementSize } from '@mantine/hooks';
-import { IconAlertCircle, IconPlayerPause, IconPlayerPlay } from '@tabler/icons-react';
+import {
+  IconAlertCircle,
+  IconClock,
+  IconClockPause,
+  IconFileDownload,
+  IconFileInfo,
+  IconPercentage,
+} from '@tabler/icons-react';
 import dayjs from 'dayjs';
 import duration from 'dayjs/plugin/duration';
 import { useTranslation } from 'next-i18next';
 import { FunctionComponent, useState } from 'react';
-
+import { parseDuration } from '~/tools/client/parseDuration';
 import { humanFileSize } from '~/tools/humanFileSize';
+
 import { useGetUsenetDownloads } from '../dashDot/api';
 
 dayjs.extend(duration);
@@ -105,9 +113,18 @@ export const UsenetQueueList: FunctionComponent<UsenetQueueListProps> = ({ appId
         </thead>
         <tbody>
           {data.items.map((nzb) => (
+            <Popover
+              withArrow
+              withinPortal
+              radius="lg"
+              shadow="sm"
+              transitionProps={{
+                transition: 'pop',
+              }}
+            >
+              <Popover.Target>
                 <tr key={nzb.id}>
                   <td>
-                <Tooltip position="top" label={nzb.name}>
                     <Text
                       style={{
                         whiteSpace: 'nowrap',
@@ -119,7 +136,6 @@ export const UsenetQueueList: FunctionComponent<UsenetQueueListProps> = ({ appId
                     >
                       {nzb.name}
                     </Text>
-                </Tooltip>
                   </td>
                   {sizeBreakpoint < width ? (
                     <td>
@@ -152,6 +168,26 @@ export const UsenetQueueList: FunctionComponent<UsenetQueueListProps> = ({ appId
                     </td>
                   ) : null}
                 </tr>
+              </Popover.Target>
+              <Popover.Dropdown>
+                <List>
+                  <List.Item icon={<IconFileInfo size={16} />}>{nzb.name}</List.Item>
+                  <List.Item icon={<IconPercentage size={16} />}>
+                    {nzb.progress.toFixed(1)}%
+                  </List.Item>
+                  {nzb.state === 'downloading' ? (
+                    <List.Item icon={<IconClock size={16} />}>
+                      {parseDuration(nzb.eta, t)}
+                    </List.Item>
+                  ) : (
+                    <List.Item icon={<IconClockPause size={16} />}>{t('queue.paused')}</List.Item>
+                  )}
+                  <List.Item icon={<IconFileDownload size={16} />}>
+                    {humanFileSize(nzb.size)}
+                  </List.Item>
+                </List>
+              </Popover.Dropdown>
+            </Popover>
           ))}
         </tbody>
       </Table>