🎨 Moved integrations in widgets directory

src/widgets/useNet/UseNetTile.tsx

@@ -0,0 +1,120 @@
+import {
+  Badge,
+  Button,
+  Group,
+  Select,
+  Stack,
+  Tabs,
+  Text,
+  Title,
+  useMantineTheme,
+} from '@mantine/core';
+import { IconPlayerPause, IconPlayerPlay } from '@tabler/icons';
+import { useEffect, useState } from 'react';
+
+import { useElementSize } from '@mantine/hooks';
+import dayjs from 'dayjs';
+import duration from 'dayjs/plugin/duration';
+import { useTranslation } from 'next-i18next';
+import { UsenetQueueList } from './UsenetQueueList';
+import { UsenetHistoryList } from './UsenetHistoryList';
+import { BaseTileProps } from '../../components/Dashboard/Tiles/type';
+import { ServiceIntegrationType } from '../../types/service';
+import { useConfigContext } from '../../config/provider';
+import { useGetUsenetInfo, usePauseUsenetQueue, useResumeUsenetQueue } from '../../tools/hooks/api';
+import { HomarrCardWrapper } from '../../components/Dashboard/Tiles/HomarrCardWrapper';
+import { humanFileSize } from '../../tools/humanFileSize';
+
+dayjs.extend(duration);
+
+const downloadServiceTypes: ServiceIntegrationType['type'][] = ['sabnzbd', 'nzbGet'];
+
+interface UseNetTileProps extends BaseTileProps {}
+
+export const UseNetTile = ({ className }: UseNetTileProps) => {
+  const { t } = useTranslation('modules/usenet');
+  const { config } = useConfigContext();
+  const downloadServices =
+    config?.services.filter(
+      (x) => x.integration && downloadServiceTypes.includes(x.integration.type)
+    ) ?? [];
+
+  const [selectedServiceId, setSelectedService] = useState<string | null>(downloadServices[0]?.id);
+  const { data } = useGetUsenetInfo({ serviceId: selectedServiceId! });
+
+  useEffect(() => {
+    if (!selectedServiceId && downloadServices.length) {
+      setSelectedService(downloadServices[0].id);
+    }
+  }, [downloadServices, selectedServiceId]);
+
+  const { mutate: pause } = usePauseUsenetQueue({ serviceId: selectedServiceId! });
+  const { mutate: resume } = useResumeUsenetQueue({ serviceId: selectedServiceId! });
+
+  if (downloadServices.length === 0) {
+    return (
+      <HomarrCardWrapper className={className}>
+        <Stack>
+          <Title order={3}>{t('card.errors.noDownloadClients.title')}</Title>
+          <Group>
+            <Text>{t('card.errors.noDownloadClients.text')}</Text>
+          </Group>
+        </Stack>
+      </HomarrCardWrapper>
+    );
+  }
+
+  if (!selectedServiceId) {
+    return null;
+  }
+
+  const { ref, width, height } = useElementSize();
+  const MIN_WIDTH_MOBILE = useMantineTheme().breakpoints.xs;
+
+  return (
+    <HomarrCardWrapper className={className}>
+      <Tabs keepMounted={false} defaultValue="queue">
+        <Tabs.List ref={ref} mb="md" style={{ flex: 1 }} grow>
+          <Tabs.Tab value="queue">{t('tabs.queue')}</Tabs.Tab>
+          <Tabs.Tab value="history">{t('tabs.history')}</Tabs.Tab>
+          {data && (
+            <Group position="right" ml="auto">
+              {width > MIN_WIDTH_MOBILE && (
+                <>
+                  <Badge>{humanFileSize(data?.speed)}/s</Badge>
+                  <Badge>
+                    {t('info.sizeLeft')}: {humanFileSize(data?.sizeLeft)}
+                  </Badge>
+                </>
+              )}
+            </Group>
+          )}
+        </Tabs.List>
+        {downloadServices.length > 1 && (
+          <Select
+            value={selectedServiceId}
+            onChange={setSelectedService}
+            ml="xs"
+            data={downloadServices.map((service) => ({ value: service.id, label: service.name }))}
+          />
+        )}
+        <Tabs.Panel value="queue">
+          <UsenetQueueList serviceId={selectedServiceId} />
+          {!data ? null : data.paused ? (
+            <Button uppercase onClick={() => resume()} radius="xl" size="xs" fullWidth mt="sm">
+              <IconPlayerPlay size={12} style={{ marginRight: 5 }} /> {t('info.paused')}
+            </Button>
+          ) : (
+            <Button uppercase onClick={() => pause()} radius="xl" size="xs" fullWidth mt="sm">
+              <IconPlayerPause size={12} style={{ marginRight: 5 }} />{' '}
+              {dayjs.duration(data.eta, 's').format('HH:mm')}
+            </Button>
+          )}
+        </Tabs.Panel>
+        <Tabs.Panel value="history" style={{ display: 'flex', flexDirection: 'column' }}>
+          <UsenetHistoryList serviceId={selectedServiceId} />
+        </Tabs.Panel>
+      </Tabs>
+    </HomarrCardWrapper>
+  );
+};