🐛 wrong absolute position of torrent options menu

public/locales/en/layout/app-shelf.json

@@ -1,7 +1,9 @@
 {
   "accordions": {
     "downloads": {
-      "text": "Your downloads"
+      "text": "Your downloads",
+      "torrents": "Your Torrent downloads",
+      "usenet": "Your Usenet downloads"
     },
     "others": {
       "text": "Others"

src/components/AppShelf/AppShelf.tsx

@@ -5,6 +5,7 @@ import {
   Grid,
   Paper,
   Stack,
+  Text,
   Title,
   useMantineColorScheme,
 } from '@mantine/core';
@@ -200,17 +201,18 @@ const AppShelf = (props: any) => {
             >
               <Accordion.Control>{t('accordions.downloads.text')}</Accordion.Control>
               <Accordion.Panel>
-                <Paper radius="lg">
-                  {torrentEnabled && (
+                <Paper radius="lg" style={{ position: 'relative' }}>
+                      {torrentEnabled && (
                     <>
-                      <ModuleMenu module={TorrentsModule} />
+                      <Text>{t('accordions.downloads.torrents')}</Text>
+                      <ModuleMenu module={TorrentsModule} hovered />
                       <TorrentsComponent />
                     </>
                   )}
                   {usenetEnabled && (
                     <>
-                      {torrentEnabled && <Divider my="sm" />}
-                      <ModuleMenu module={UsenetModule} />
+                      <Text mt="md">{t('accordions.downloads.usenet')}</Text>
+                      <ModuleMenu module={UsenetModule} hovered />
                       <UsenetComponent />
                     </>
                   )}

src/modules/ModuleTypes.d.ts

@@ -11,6 +11,15 @@ export interface IModule {
   icon: TablerIcon;
   component: React.ComponentType;
   options?: Option;
+  padding?: PaddingOptions = {
+    right: 15,
+    top: 15,
+  },
+}
+
+interface PaddingOptions {
+  top: number;
+  right: number;
 }
 
 interface Option {

src/modules/moduleWrapper.tsx

@@ -186,8 +186,13 @@ export function ModuleWrapper(props: any) {
   );
 }
 
-export function ModuleMenu(props: any) {
-  const { module, styles, hovered } = props;
+interface ModuleMenuProps {
+  hovered: boolean;
+  module: IModule;
+}
+
+export function ModuleMenu(props: ModuleMenuProps) {
+  const { module, hovered } = props;
   const items: JSX.Element[] = getItems(module);
   const { t } = useTranslation('modules/common');
   return (
@@ -207,12 +212,13 @@ export function ModuleMenu(props: any) {
             <motion.div
               style={{
                 position: 'absolute',
-                top: 15,
-                right: 15,
+                top: module.padding?.top ?? 15,
+                right: module.padding?.right ?? 15,
                 alignSelf: 'flex-end',
+                zIndex: 10,
               }}
               animate={{
-                opacity: hovered === true ? 1 : 0,
+                opacity: hovered ? 1 : 0,
               }}
             >
               <ActionIcon>

src/modules/torrents/TorrentsModule.tsx

@@ -34,6 +34,10 @@ export const TorrentsModule: IModule = {
       value: false,
     },
   },
+  padding: {
+    right: 0,
+    top: -10,
+  },
 };
 
 export default function TorrentsComponent() {