♻️ Refactor and WIP towards mantine v5

src/components/AppShelf/AddAppShelfItem.tsx

@@ -38,7 +38,7 @@ export function AddItemShelfButton(props: any) {
       >
         <AddAppShelfItemForm setOpened={setOpened} />
       </Modal>
-      <Tooltip label="Add a service">
+      <Tooltip withinPortal label="Add a service">
         <ActionIcon
           variant="default"
           radius="md"

src/components/Settings/SettingsMenu.tsx

@@ -44,6 +44,7 @@ export function SettingsMenuButton(props: any) {
         <SettingsMenu />
         <Credits />
       </Drawer>
+      <Tooltip label="Settings">
         <ActionIcon
           variant="default"
           radius="md"
@@ -52,10 +53,9 @@ export function SettingsMenuButton(props: any) {
           style={props.style}
           onClick={() => setOpened(true)}
         >
-        <Tooltip label="Settings">
           <IconSettings />
-        </Tooltip>
         </ActionIcon>
+      </Tooltip>
     </>
   );
 }

src/modules/docker/DockerModule.tsx

@@ -1,4 +1,4 @@
-import { ActionIcon, Drawer, Group, LoadingOverlay, Text } from '@mantine/core';
+import { ActionIcon, Drawer, Group, LoadingOverlay, Text, Tooltip } from '@mantine/core';
 import axios from 'axios';
 import { useEffect, useState } from 'react';
 import Docker from 'dockerode';
@@ -67,7 +67,7 @@ export default function DockerMenuButton(props: any) {
       >
         <DockerTable containers={containers} selection={selection} setSelection={setSelection} />
       </Drawer>
-      <Group position="center">
+      <Tooltip label="Docker">
         <ActionIcon
           variant="default"
           radius="md"
@@ -77,7 +77,7 @@ export default function DockerMenuButton(props: any) {
         >
           <IconBrandDocker />
         </ActionIcon>
-      </Group>
+      </Tooltip>
     </>
   );
 }

src/modules/downloads/DownloadsModule.tsx

@@ -83,10 +83,10 @@ export default function DownloadComponent() {
 
   if (downloadServices.length === 0) {
     return (
-      <Group direction="column">
+      <Group>
         <Title order={3}>No supported download clients found!</Title>
         <Group>
-          <Text>Add a download service to view your current downloads...</Text>
+          <Text>Add a download service to view your current downloads</Text>
           <AddItemShelfButton />
         </Group>
       </Group>

src/modules/downloads/TotalDownloadsModule.tsx

@@ -43,6 +43,7 @@ export default function TotalDownloadsComponent() {
   const totalDownloadSpeed = torrents.reduce((acc, torrent) => acc + torrent.downloadSpeed, 0);
   const totalUploadSpeed = torrents.reduce((acc, torrent) => acc + torrent.uploadSpeed, 0);
   useEffect(() => {
+    if (downloadServices.length === 0) return;
     const interval = setSafeInterval(() => {
       // Send one request with each download service inside
       axios
@@ -78,13 +79,17 @@ export default function TotalDownloadsComponent() {
 
   if (downloadServices.length === 0) {
     return (
-      <Stack>
+      <Group>
         <Title order={4}>No supported download clients found!</Title>
-        <Group noWrap>
-          <Text>Add a download service to view your current downloads...</Text>
-          <AddItemShelfButton />
+        <div>
+          <AddItemShelfButton
+            style={{
+              float: 'inline-end',
+            }}
+          />
+          Add a download service to view your current downloads
+        </div>
       </Group>
-      </Stack>
     );
   }