💄 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,37 +88,58 @@ 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) => (
-            <tr key={history.id}>
+            <Popover
-              <td>
+              withArrow
-                <Tooltip position="top" label={history.name}>
+              withinPortal
-                  <Text
+              radius="lg"
-                    size="xs"
+              shadow="sm"
-                    style={{
+              transitionProps={{
-                      whiteSpace: 'nowrap',
+                transition: 'pop',
-                      overflow: 'hidden',
+              }}
-                      textOverflow: 'ellipsis',
+            >
-                    }}
+              <Popover.Target>
-                  >
+                <tr key={history.id}>
-                    {history.name}
+                  <td>
-                  </Text>
+                    <Text
-                </Tooltip>
+                      size="xs"
-              </td>
+                      style={{
-              <td>
+                        whiteSpace: 'nowrap',
-                <Text size="xs">{humanFileSize(history.size)}</Text>
+                        overflow: 'hidden',
-              </td>
+                        textOverflow: 'ellipsis',
-              {durationBreakpoint < width ? (
+                      }}
-                <td>
+                    >
-                  <Text size="xs">{parseDuration(history.time, t)}</Text>
+                      {history.name}
-                </td>
+                    </Text>
-              ) : null}
+                  </td>
-            </tr>
+                  <td>
+                    <Text size="xs">{humanFileSize(history.size)}</Text>
+                  </td>
+                  {durationBreakpoint < width && (
+                    <td>
+                      <Text size="xs">{parseDuration(history.time, t)}</Text>
+                    </td>
+                  )}
+                </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,53 +113,81 @@ export const UsenetQueueList: FunctionComponent<UsenetQueueListProps> = ({ appId
         </thead>
         <tbody>
           {data.items.map((nzb) => (
-            <tr key={nzb.id}>
+            <Popover
-              <td>
+              withArrow
-                <Tooltip position="top" label={nzb.name}>
+              withinPortal
-                  <Text
+              radius="lg"
-                    style={{
+              shadow="sm"
-                      whiteSpace: 'nowrap',
+              transitionProps={{
-                      overflow: 'hidden',
+                transition: 'pop',
-                      textOverflow: 'ellipsis',
+              }}
-                    }}
+            >
-                    size="xs"
+              <Popover.Target>
-                    color={nzb.state === 'paused' ? 'dimmed' : undefined}
+                <tr key={nzb.id}>
-                  >
+                  <td>
-                    {nzb.name}
+                    <Text
-                  </Text>
+                      style={{
-                </Tooltip>
+                        whiteSpace: 'nowrap',
-              </td>
+                        overflow: 'hidden',
-              {sizeBreakpoint < width ? (
+                        textOverflow: 'ellipsis',
-                <td>
+                      }}
-                  <Text size="xs">{humanFileSize(nzb.size)}</Text>
+                      size="xs"
-                </td>
+                      color={nzb.state === 'paused' ? 'dimmed' : undefined}
-              ) : null}
+                    >
-              <td>
+                      {nzb.name}
-                {nzb.eta <= 0 ? (
+                    </Text>
-                  <Text size="xs" color="dimmed">
+                  </td>
-                    {t('queue.paused')}
+                  {sizeBreakpoint < width ? (
-                  </Text>
+                    <td>
-                ) : (
+                      <Text size="xs">{humanFileSize(nzb.size)}</Text>
-                  <Text size="xs">{dayjs.duration(nzb.eta, 's').format('H:mm:ss')}</Text>
+                    </td>
-                )}
-              </td>
-              {progressBreakpoint < width ? (
-                <td style={{ display: 'flex', alignItems: 'center' }}>
-                  <Text mr="sm" style={{ whiteSpace: 'nowrap' }}>
-                    {nzb.progress.toFixed(1)}%
-                  </Text>
-                  {width > progressbarBreakpoint ? (
-                    <Progress
-                      radius="lg"
-                      color={nzb.eta > 0 ? theme.primaryColor : 'lightgrey'}
-                      value={nzb.progress}
-                      size="lg"
-                      style={{ width: '100%' }}
-                    />
                   ) : null}
-                </td>
+                  <td>
-              ) : null}
+                    {nzb.eta <= 0 ? (
-            </tr>
+                      <Text size="xs" color="dimmed">
+                        {t('queue.paused')}
+                      </Text>
+                    ) : (
+                      <Text size="xs">{dayjs.duration(nzb.eta, 's').format('H:mm:ss')}</Text>
+                    )}
+                  </td>
+                  {progressBreakpoint < width ? (
+                    <td style={{ display: 'flex', alignItems: 'center' }}>
+                      <Text mr="sm" style={{ whiteSpace: 'nowrap' }}>
+                        {nzb.progress.toFixed(1)}%
+                      </Text>
+                      {width > progressbarBreakpoint ? (
+                        <Progress
+                          radius="lg"
+                          color={nzb.eta > 0 ? theme.primaryColor : 'lightgrey'}
+                          value={nzb.progress}
+                          size="lg"
+                          style={{ width: '100%' }}
+                        />
+                      ) : null}
+                    </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>