AppShelf adjustments

src/components/AppShelf/AppShelf.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { Accordion, Grid, Paper, Stack, Text, useMantineColorScheme } from '@mantine/core';
+import { Accordion, Grid, Stack, Title, useMantineColorScheme } from '@mantine/core';
 import {
   closestCenter,
   DndContext,
@@ -9,16 +9,16 @@ import {
   useSensor,
   useSensors,
 } from '@dnd-kit/core';
+
 import { arrayMove, SortableContext } from '@dnd-kit/sortable';
 import { useLocalStorage } from '@mantine/hooks';
 import { useTranslation } from 'next-i18next';
+import * as Modules from '../../modules';
 import { useConfig } from '../../tools/state';
 
-import { SortableAppShelfItem, AppShelfItem } from './AppShelfItem';
-import { ModuleMenu, ModuleWrapper } from '../../modules/moduleWrapper';
+import { AppShelfItem, SortableItem } from './AppShelfItem';
+import { ModuleWrapper } from '../../modules/moduleWrapper';
 import { UsenetModule, TorrentsModule } from '../../modules';
-import TorrentsComponent from '../../modules/torrents/TorrentsModule';
-import { UsenetComponent } from '../../modules/usenet/UsenetModule';
 
 const AppShelf = (props: any) => {
   const { config, setConfig } = useConfig();
@@ -79,13 +79,14 @@ const AppShelf = (props: any) => {
   const getItems = (filter?: string) => {
     // If filter is not set, return all the services without a category or a null category
     let filtered = config.services;
+    const modules = Object.values(Modules).map((module) => module);
+
     if (!filter) {
       filtered = config.services.filter((e) => !e.category || e.category === null);
     }
     if (filter) {
       filtered = config.services.filter((e) => e.category === filter);
     }
-
     return (
       <DndContext
         sensors={sensors}
@@ -94,17 +95,12 @@ const AppShelf = (props: any) => {
         onDragEnd={handleDragEnd}
       >
         <SortableContext items={config.services}>
-          <Grid gutter="xl" align="center">
+          <Grid gutter="lg" align="center">
             {filtered.map((service) => (
-              <Grid.Col
-                key={service.id}
-                span={6}
-                xl={config.settings.appCardWidth || 2}
-                xs={4}
-                sm={3}
-                md={3}
-              >
-                <SortableAppShelfItem service={service} key={service.id} id={service.id} />
+              <Grid.Col key={service.id} span="content">
+                <SortableItem service={service} key={service.id} id={service.id}>
+                  <AppShelfItem service={service} />
+                </SortableItem>
               </Grid.Col>
             ))}
           </Grid>
@@ -123,100 +119,36 @@ const AppShelf = (props: any) => {
     );
   };
 
-  if (categoryList.length > 0) {
-    const noCategory = config.services.filter(
-      (e) => e.category === undefined || e.category === null
-    );
-
-    const torrentEnabled = config.modules?.[TorrentsModule.id]?.enabled ?? false;
-    const usenetEnabled = config.modules?.[UsenetModule.id]?.enabled ?? false;
-
-    const downloadEnabled = usenetEnabled || torrentEnabled;
-    // 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
-      <Stack>
-        <Accordion
-          variant="separated"
-          radius="lg"
-          order={2}
-          multiple
-          value={toggledCategories}
-          onChange={(state) => {
-            setToggledCategories([...state]);
-          }}
-        >
-          {categoryList.map((category, idx) => (
-            <Accordion.Item
-              style={{
-                background: `rgba(${colorScheme === 'dark' ? '32, 33, 35,' : '255, 255, 255,'} \
-              ${(config.settings.appOpacity || 100) / 100}`,
-                borderColor: `rgba(${colorScheme === 'dark' ? '32, 33, 35,' : '233, 236, 239,'} \
-              ${(config.settings.appOpacity || 100) / 100}`,
-              }}
-              key={category}
-              value={idx.toString()}
-            >
-              <Accordion.Control>{category}</Accordion.Control>
-              <Accordion.Panel>{getItems(category)}</Accordion.Panel>
-            </Accordion.Item>
-          ))}
-          {/* Return the item for all services without category */}
-          {noCategory && noCategory.length > 0 ? (
-            <Accordion.Item
-              style={{
-                background: `rgba(${colorScheme === 'dark' ? '32, 33, 35,' : '255, 255, 255,'} \
-            ${(config.settings.appOpacity || 100) / 100}`,
-                borderColor: `rgba(${colorScheme === 'dark' ? '32, 33, 35,' : '233, 236, 239,'} \
-            ${(config.settings.appOpacity || 100) / 100}`,
-              }}
-              key="Other"
-              value="Other"
-            >
-              <Accordion.Control>{t('accordions.others.text')}</Accordion.Control>
-              <Accordion.Panel>{getItems()}</Accordion.Panel>
-            </Accordion.Item>
-          ) : null}
-          {downloadEnabled ? (
-            <Accordion.Item
-              style={{
-                color: `rgba(${colorScheme === 'dark' ? '32, 33, 35,' : '255, 255, 255,'} \
-                ${(config.settings.appOpacity || 100) / 100}`,
-                background: `rgba(${colorScheme === 'dark' ? '32, 33, 35,' : '255, 255, 255,'} \
-            ${(config.settings.appOpacity || 100) / 100}`,
-                borderColor: `rgba(${colorScheme === 'dark' ? '32, 33, 35,' : '233, 236, 239,'} \
-            ${(config.settings.appOpacity || 100) / 100}`,
-              }}
-              key="Downloads"
-              value="Your downloads"
-            >
-              <Accordion.Control>{t('accordions.downloads.text')}</Accordion.Control>
-              <Accordion.Panel>
-                <Paper radius="lg" style={{ position: 'relative' }}>
-                  {torrentEnabled && (
-                    <>
-                      <Text>{t('accordions.downloads.torrents')}</Text>
-                      <ModuleMenu module={TorrentsModule} hovered />
-                      <TorrentsComponent />
-                    </>
-                  )}
-                  {usenetEnabled && (
-                    <>
-                      <Text mt="md">{t('accordions.downloads.usenet')}</Text>
-                      <ModuleMenu module={UsenetModule} hovered />
-                      <UsenetComponent />
-                    </>
-                  )}
-                </Paper>
-              </Accordion.Panel>
-            </Accordion.Item>
-          ) : null}
-        </Accordion>
-      </Stack>
-    );
-  }
   return (
     <Stack>
+      <Accordion
+        variant="separated"
+        radius="lg"
+        order={2}
+        multiple
+        value={toggledCategories}
+        onChange={(state) => {
+          setToggledCategories([...state]);
+        }}
+      >
+        {categoryList.map((category, idx) => (
+          <Accordion.Item
+            style={{
+              background: `rgba(${colorScheme === 'dark' ? '32, 33, 35,' : '255, 255, 255,'} \
+          ${(config.settings.appOpacity || 100) / 100}`,
+              borderColor: `rgba(${colorScheme === 'dark' ? '32, 33, 35,' : '233, 236, 239,'} \
+          ${(config.settings.appOpacity || 100) / 100}`,
+            }}
+            key={category}
+            value={idx.toString()}
+          >
+            <Accordion.Control>
+              <Title order={5}>{category}</Title>
+            </Accordion.Control>
+            <Accordion.Panel>{getItems(category)}</Accordion.Panel>
+          </Accordion.Item>
+        ))}
+      </Accordion>
       {getItems()}
       <ModuleWrapper mt="xl" module={TorrentsModule} />
       <ModuleWrapper mt="xl" module={UsenetModule} />

src/components/AppShelf/AppShelfItem.tsx

@@ -31,7 +31,7 @@ const useStyles = createStyles((theme) => ({
   },
 }));
 
-export function SortableAppShelfItem(props: any) {
+export function SortableItem(props: any) {
   const { attributes, listeners, setNodeRef, transform, transition } = useSortable({
     id: props.id,
   });
@@ -43,7 +43,7 @@ export function SortableAppShelfItem(props: any) {
 
   return (
     <div ref={setNodeRef} style={style} {...attributes} {...listeners}>
-      <AppShelfItem service={props.service} />
+      {props.children}
     </div>
   );
 }
@@ -75,6 +75,8 @@ export function AppShelfItem(props: any) {
         shadow="md"
         className={classes.item}
         style={{
+          // Use the grab cursor when hovering over the card
+          cursor: hovering ? 'grab' : 'auto',
           background: `rgba(${colorScheme === 'dark' ? '37, 38, 43,' : '255, 255, 255,'} \
           ${(config.settings.appOpacity || 100) / 100}`,
           borderColor: `rgba(${colorScheme === 'dark' ? '37, 38, 43,' : '233, 236, 239,'} \
@@ -140,4 +142,4 @@ export function AppShelfItem(props: any) {
       </Card>
     </motion.div>
   );
-}
+}