💄 Small UI qol update

Module download now has a different look and can be toggled on and off

src/components/AppShelf/AppShelf.tsx

@@ -15,8 +15,9 @@ import { useLocalStorage } from '@mantine/hooks';
 import { useConfig } from '../../tools/state';
 
 import { SortableAppShelfItem, AppShelfItem } from './AppShelfItem';
-import { ModuleWrapper } from '../modules/moduleWrapper';
+import { ModuleMenu, ModuleWrapper } from '../modules/moduleWrapper';
 import { DownloadsModule } from '../modules';
+import DownloadComponent from '../modules/downloads/DownloadsModule';
 
 const useStyles = createStyles((theme, _params) => ({
   item: {
@@ -137,6 +138,7 @@ const AppShelf = (props: any) => {
       // Return one item for each category
       <Group grow direction="column">
         <Accordion
+          disableIconRotation
           classNames={classes}
           order={2}
           iconPosition="right"
@@ -160,8 +162,11 @@ const AppShelf = (props: any) => {
               {item()}
             </Accordion.Item>
           ) : null}
+          <Accordion.Item key="Downloads" label="Your downloads">
+            <ModuleMenu module={DownloadsModule} />
+            <DownloadComponent />
+          </Accordion.Item>
         </Accordion>
-        <ModuleWrapper mt="xl" module={DownloadsModule} />
       </Group>
     );
   }

src/components/Config/ConfigChanger.tsx

@@ -26,7 +26,10 @@ export default function ConfigChanger() {
       label="Config loader"
       onChange={(e) => {
         loadConfig(e ?? 'default');
-        setCookies('config-name', e ?? 'default', { maxAge: 60 * 60 * 24 * 30, sameSite: 'strict' });
+        setCookies('config-name', e ?? 'default', {
+          maxAge: 60 * 60 * 24 * 30,
+          sameSite: 'strict',
+        });
       }}
       data={
         // If config list is empty, return the current config

src/components/Settings/CommonSettings.tsx

@@ -1,11 +1,4 @@
-import {
+import { ActionIcon, Group, Text, SegmentedControl, TextInput, Anchor } from '@mantine/core';
-  ActionIcon,
-  Group,
-  Text,
-  SegmentedControl,
-  TextInput,
-  Anchor,
-} from '@mantine/core';
 import { useState } from 'react';
 import { IconBrandGithub as BrandGithub } from '@tabler/icons';
 import { CURRENT_VERSION } from '../../../data/constants';

src/components/modules/downloads/DownloadsModule.tsx

@@ -136,8 +136,7 @@ export default function DownloadComponent() {
     </Center>
   );
   return (
-    <Group noWrap grow direction="column">
+    <Group noWrap grow direction="column" mt="xl">
-      <Title order={4}>Your torrents</Title>
       <ScrollArea sx={{ height: 300 }}>
         {rows.length > 0 ? (
           <Table highlightOnHover>

src/components/modules/moduleWrapper.tsx

@@ -1,4 +1,4 @@
-import { Button, Card, Group, Menu, Switch, TextInput, useMantineTheme } from '@mantine/core';
+import { Button, Card, Group, Menu, Switch, TextInput } from '@mantine/core';
 import { useConfig } from '../../tools/state';
 import { IModule } from './modules';
 
@@ -95,14 +95,32 @@ export function ModuleWrapper(props: any) {
   const enabledModules = config.modules ?? {};
   // Remove 'Module' from enabled modules titles
   const isShown = enabledModules[module.title]?.enabled ?? false;
-  const theme = useMantineTheme();
-  const items: JSX.Element[] = getItems(module);
 
   if (!isShown) {
     return null;
   }
   return (
     <Card {...props} hidden={!isShown} withBorder radius="lg" shadow="sm">
+      <ModuleMenu
+        module={module}
+        styles={{
+          root: {
+            position: 'absolute',
+            top: 15,
+            right: 15,
+          },
+        }}
+      />
+      <module.component />
+    </Card>
+  );
+}
+
+export function ModuleMenu(props: any) {
+  const { module, styles } = props;
+  const items: JSX.Element[] = getItems(module);
+  return (
+    <>
       {module.options && (
         <Menu
           size="lg"
@@ -112,9 +130,7 @@ export function ModuleWrapper(props: any) {
           position="left"
           styles={{
             root: {
-              position: 'absolute',
+              ...props?.styles?.root,
-              top: 15,
-              right: 15,
             },
             body: {
               // Add shadow and elevation to the body
@@ -128,7 +144,6 @@ export function ModuleWrapper(props: any) {
           ))}
         </Menu>
       )}
-      <module.component />
+    </>
-    </Card>
   );
 }