Cleanup bad merge

src/components/AppShelf/AppShelf.tsx

@@ -126,7 +126,7 @@ const AppShelf = (props: any) => {
     const noCategory = config.services.filter(
       (e) => e.category === undefined || e.category === null
     );
-    const downloadEnabled = config.modules?.[DownloadsModule.id]?.enabled ?? false;
+    const downloadEnabled = config.modules?.[TorrentsModule.id]?.enabled ?? false;
     // Create an item with 0: true, 1: true, 2: true... For each category
     return (
       // TODO: Style accordion so that the bar is transparent to the user settings
@@ -150,7 +150,7 @@ const AppShelf = (props: any) => {
           {/* Return the item for all services without category */}
           {noCategory && noCategory.length > 0 ? (
             <Accordion.Item key="Other" value="Other">
-              <Accordion.Control>Other</Accordion.Control>
+              <Accordion.Control>{t('accordions.others.text')}</Accordion.Control>
               <Accordion.Panel>{getItems()}</Accordion.Panel>
             </Accordion.Item>
           ) : null}

src/modules/torrents/TotalDownloadsModule.tsx

@@ -4,6 +4,7 @@ import { useEffect, useState } from 'react';
 import axios from 'axios';
 import { NormalizedTorrent } from '@ctrl/shared-torrent';
 import { linearGradientDef } from '@nivo/core';
+import { useTranslation } from 'next-i18next';
 import { Datum, ResponsiveLine } from '@nivo/line';
 import { useListState } from '@mantine/hooks';
 import { showNotification } from '@mantine/notifications';
@@ -14,10 +15,10 @@ import { IModule } from '../ModuleTypes';
 import { useSetSafeInterval } from '../../tools/hooks/useSetSafeInterval';
 
 export const TotalDownloadsModule: IModule = {
-  id: 'totalDownload',
   title: 'Download Speed',
   icon: Download,
   component: TotalDownloadsComponent,
+  id: 'dlspeed',
 };
 
 interface torrentHistory {
@@ -36,6 +37,7 @@ export default function TotalDownloadsComponent() {
         service.type === 'Transmission' ||
         service.type === 'Deluge'
     ) ?? [];
+  const { t } = useTranslation(`modules/${TotalDownloadsModule.id}`);
 
   const [torrentHistory, torrentHistoryHandlers] = useListState<torrentHistory>([]);
   const [torrents, setTorrents] = useState<NormalizedTorrent[]>([]);
@@ -69,6 +71,30 @@ export default function TotalDownloadsComponent() {
     }, 1000);
   }, [config.services]);
 
+  useEffect(() => {
+    torrentHistoryHandlers.append({
+      x: Date.now(),
+      down: totalDownloadSpeed,
+      up: totalUploadSpeed,
+    });
+  }, [totalDownloadSpeed, totalUploadSpeed]);
+
+  if (downloadServices.length === 0) {
+    return (
+      <Group>
+        <Title order={4}>{t('card.errors.noDownloadClients.title')}</Title>
+        <div>
+          <AddItemShelfButton
+            style={{
+              float: 'inline-end',
+            }}
+          />
+          {t('card.errors.noDownloadClients.text')}
+        </div>
+      </Group>
+    );
+  }
+
   const theme = useMantineTheme();
   // Load the last 10 values from the history
   const history = torrentHistory.slice(-10);
@@ -81,41 +107,21 @@ export default function TotalDownloadsComponent() {
     y: load.down,
   })) as Datum[];
 
-  useEffect(() => {
-    torrentHistoryHandlers.append({
-      x: Date.now(),
-      down: totalDownloadSpeed,
-      up: totalUploadSpeed,
-    });
-  }, [totalDownloadSpeed, totalUploadSpeed]);
-
-  if (downloadServices.length === 0) {
-    return (
-      <Group>
-        <Title order={4}>No supported download clients found!</Title>
-        <div>
-          <AddItemShelfButton
-            style={{
-              float: 'inline-end',
-            }}
-          />
-          Add a download service to view your current downloads
-        </div>
-      </Group>
-    );
-  }
-
   return (
     <Stack>
-      <Title order={4}>Current download speed</Title>
+      <Title order={4}>{t('card.lineChart.title')}</Title>
       <Stack>
         <Group>
           <ColorSwatch size={12} color={theme.colors.green[5]} />
-          <Text>Download: {humanFileSize(totalDownloadSpeed)}/s</Text>
+          <Text>
+            {t('card.lineChart.totalDownload', { download: humanFileSize(totalDownloadSpeed) })}
+          </Text>
         </Group>
         <Group>
           <ColorSwatch size={12} color={theme.colors.blue[5]} />
-          <Text>Upload: {humanFileSize(totalUploadSpeed)}/s</Text>
+          <Text>
+            {t('card.lineChart.totalUpload', { upload: humanFileSize(totalUploadSpeed) })}
+          </Text>
         </Group>
       </Stack>
       <Box
@@ -136,16 +142,20 @@ export default function TotalDownloadsComponent() {
             const roundedSeconds = Math.round(seconds);
             return (
               <Card p="sm" radius="md" withBorder>
-                <Text size="md">{roundedSeconds} seconds ago</Text>
+                <Text size="md">{t('card.lineChart.timeSpan', { seconds: roundedSeconds })}</Text>
                 <Card.Section p="sm">
                   <Stack>
                     <Group>
                       <ColorSwatch size={10} color={theme.colors.green[5]} />
-                      <Text size="md">Download: {humanFileSize(Download)}</Text>
+                      <Text size="md">
+                        {t('card.lineChart.download', { download: humanFileSize(Download) })}
+                      </Text>
                     </Group>
                     <Group>
                       <ColorSwatch size={10} color={theme.colors.blue[5]} />
-                      <Text size="md">Upload: {humanFileSize(Upload)}</Text>
+                      <Text size="md">
+                        {t('card.lineChart.upload', { upload: humanFileSize(Upload) })}
+                      </Text>
                     </Group>
                   </Stack>
                 </Card.Section>