From f951bcd750ad6413a2add2902e337be80aaa78e2 Mon Sep 17 00:00:00 2001
From: Manuel Ruwe <manuel.ruwe@bluewin.ch>
Date: Sat, 15 Oct 2022 23:45:46 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20wrong=20absolute=20position=20of?=
 =?UTF-8?q?=20torrent=20options=20menu?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/locales/en/layout/app-shelf.json |  4 +++-
 src/components/AppShelf/AppShelf.tsx    | 12 +++++++-----
 src/modules/ModuleTypes.d.ts            |  9 +++++++++
 src/modules/moduleWrapper.tsx           | 16 +++++++++++-----
 src/modules/torrents/TorrentsModule.tsx |  4 ++++
 5 files changed, 34 insertions(+), 11 deletions(-)

diff --git a/public/locales/en/layout/app-shelf.json b/public/locales/en/layout/app-shelf.json
index 3297ffe7d..2074f4105 100644
--- a/public/locales/en/layout/app-shelf.json
+++ b/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"
diff --git a/src/components/AppShelf/AppShelf.tsx b/src/components/AppShelf/AppShelf.tsx
index c4e59219a..114d98ec4 100644
--- a/src/components/AppShelf/AppShelf.tsx
+++ b/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 />
                     </>
                   )}
diff --git a/src/modules/ModuleTypes.d.ts b/src/modules/ModuleTypes.d.ts
index 8ccf82c9d..177ce5ae7 100644
--- a/src/modules/ModuleTypes.d.ts
+++ b/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 {
diff --git a/src/modules/moduleWrapper.tsx b/src/modules/moduleWrapper.tsx
index c429e80af..d62e6b02e 100644
--- a/src/modules/moduleWrapper.tsx
+++ b/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>
diff --git a/src/modules/torrents/TorrentsModule.tsx b/src/modules/torrents/TorrentsModule.tsx
index aa4e12a18..d81696e24 100644
--- a/src/modules/torrents/TorrentsModule.tsx
+++ b/src/modules/torrents/TorrentsModule.tsx
@@ -34,6 +34,10 @@ export const TorrentsModule: IModule = {
       value: false,
     },
   },
+  padding: {
+    right: 0,
+    top: -10,
+  },
 };
 
 export default function TorrentsComponent() {