🚀 v0.7.0 : Theming, Password protection, Autocompletion, Transmission, Mobile responsiveness! This is a big upgrade 👀

2022-06-12 17:32:56 +02:00
23 changed files with 258 additions and 478 deletions
--- a/.dockerignore
+++ b/.dockerignore
@@ -2,8 +2,5 @@ Dockerfile
 .dockerignore
 node_modules
 npm-debug.log
-*.md
+README.md
 .git
-.github
-LICENSE
-docs/
--- a/2
+++ b/2
@@ -2,7 +2,7 @@ FROM node:16-alpine
 WORKDIR /app
 ENV NODE_ENV production
 COPY /next.config.js ./
-COPY /public ./public
+COPY  /public ./public
 COPY /package.json ./package.json
 # Automatically leverage output traces to reduce image size. https://nextjs.org/docs/advanced-features/output-file-tracing
 COPY /.next/standalone ./
--- a/README.md
+++ b/README.md
@@ -33,7 +33,7 @@ Homarr is a simple and lightweight homepage for your server, that helps you easi

 It integrates with the services you use to display information on the homepage (E.g. Show upcoming Sonarr/Radarr releases).

-For a full list of integrations look at: [wiki/integrations](https://github.com/ajnart/homarr/wiki/Integrations)
+For a full list of integrations look at: [wiki/integrations](#).

 If you have any questions about Homarr or want to share information with us, please go to one of the following places:

@@ -198,4 +198,7 @@ SOFTWARE.
  <i>Thank you for visiting! <b>For more information <a href="https://github.com/ajnart/homarr/wiki">read the wiki!</a></b></i>
  <br/>
  <br/>
+  <a href="https://trackgit.com">
+    <img src="https://us-central1-trackgit-analytics.cloudfunctions.net/token/ping/l3khzc3a3pexzw5w5whl" alt="trackgit-views" />
+  </a>
 </p>
--- a/data/constants.ts
+++ b/data/constants.ts
@@ -1,2 +1,2 @@
 export const REPO_URL = 'ajnart/homarr';
-export const CURRENT_VERSION = 'v0.7.2';
+export const CURRENT_VERSION = 'v0.7.0';
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "homarr",
-	"version": "0.7.2",
+	"version": "0.7.0",
 	"description": "Homarr - A homepage for your server.",
 	"repository": {
 		"type": "git",
--- a/src/components/AppShelf/AddAppShelfItem.tsx
+++ b/src/components/AppShelf/AddAppShelfItem.tsx
@@ -12,10 +12,6 @@ import {
  Title,
  Anchor,
  Text,
-  Tabs,
-  MultiSelect,
-  ScrollArea,
-  Switch,
 } from '@mantine/core';
 import { useForm } from '@mantine/form';
 import { useEffect, useState } from 'react';
@@ -23,7 +19,7 @@ import { IconApps as Apps } from '@tabler/icons';
 import { v4 as uuidv4 } from 'uuid';
 import { useDebouncedValue } from '@mantine/hooks';
 import { useConfig } from '../../tools/state';
-import { ServiceTypeList, StatusCodes } from '../../tools/types';
+import { ServiceTypeList } from '../../tools/types';

 export function AddItemShelfButton(props: any) {
  const [opened, setOpened] = useState(false);
@@ -117,15 +113,17 @@ export function AddAppShelfItemForm(props: { setOpened: (b: boolean) => void } &
      username: props.username ?? (undefined as unknown as string),
      password: props.password ?? (undefined as unknown as string),
      openedUrl: props.openedUrl ?? (undefined as unknown as string),
-      status: props.status ?? ['200'],
-      newTab: props.newTab ?? true,
    },
    validate: {
      apiKey: () => null,
      // Validate icon with a regex
-      icon: (value: string) =>
-        // Disable matching to allow any values
-        null,
+      icon: (value: string) => {
+        // Regex to match everything that ends with and icon extension
+        if (!value.match(/\.(png|jpg|jpeg|gif|svg)$/)) {
+          return 'Please enter a valid icon URL';
+        }
+        return null;
+      },
      // Validate url with a regex http/https
      url: (value: string) => {
        try {
@@ -135,12 +133,6 @@ export function AddAppShelfItemForm(props: { setOpened: (b: boolean) => void } &
        }
        return null;
      },
-      status: (value: string[]) => {
-        if (!value.length) {
-          return 'Please select a status code';
-        }
-        return null;
-      },
    },
  });

@@ -175,12 +167,6 @@ export function AddAppShelfItemForm(props: { setOpened: (b: boolean) => void } &
      </Center>
      <form
        onSubmit={form.onSubmit(() => {
-          if (JSON.stringify(form.values.status) === JSON.stringify(['200'])) {
-            form.values.status = undefined;
-          }
-          if (form.values.newTab === true) {
-            form.values.newTab = undefined;
-          }
          // If service already exists, update it.
          if (config.services && config.services.find((s) => s.id === form.values.id)) {
            setConfig({
@@ -205,178 +191,131 @@ export function AddAppShelfItemForm(props: { setOpened: (b: boolean) => void } &
          form.reset();
        })}
      >
-        <Tabs grow>
-          <Tabs.Tab label="Options">
-            <ScrollArea style={{ height: 500 }} scrollbarSize={4}>
-              <Group direction="column" grow>
-                <TextInput
-                  required
-                  label="Service name"
-                  placeholder="Plex"
-                  {...form.getInputProps('name')}
-                />
+        <Group direction="column" grow>
+          <TextInput
+            required
+            label="Service name"
+            placeholder="Plex"
+            {...form.getInputProps('name')}
+          />

-                <TextInput
-                  required
-                  label="Icon URL"
-                  placeholder="/favicon.svg"
-                  {...form.getInputProps('icon')}
-                />
-                <TextInput
-                  required
-                  label="Service URL"
-                  placeholder="http://localhost:7575"
-                  {...form.getInputProps('url')}
-                />
-                <TextInput
-                  label="On Click URL"
-                  placeholder="http://sonarr.example.com"
-                  {...form.getInputProps('openedUrl')}
-                />
-                <Select
-                  label="Service type"
-                  defaultValue="Other"
-                  placeholder="Pick one"
-                  required
-                  searchable
-                  data={ServiceTypeList}
-                  {...form.getInputProps('type')}
-                />
-                <Select
-                  label="Category"
-                  data={categoryList}
-                  placeholder="Select a category or create a new one"
-                  nothingFound="Nothing found"
-                  searchable
-                  clearable
-                  creatable
-                  onClick={(e) => {
-                    e.preventDefault();
-                  }}
-                  getCreateLabel={(query) => `+ Create "${query}"`}
-                  onCreate={(query) => {}}
-                  {...form.getInputProps('category')}
-                />
-                <LoadingOverlay visible={isLoading} />
-                {(form.values.type === 'Sonarr' ||
-                  form.values.type === 'Radarr' ||
-                  form.values.type === 'Lidarr' ||
-                  form.values.type === 'Readarr') && (
-                  <>
-                    <TextInput
-                      required
-                      label="API key"
-                      placeholder="Your API key"
-                      value={form.values.apiKey}
-                      onChange={(event) => {
-                        form.setFieldValue('apiKey', event.currentTarget.value);
-                      }}
-                      error={form.errors.apiKey && 'Invalid API key'}
-                    />
-                    <Text
-                      style={{
-                        alignSelf: 'center',
-                        fontSize: '0.75rem',
-                        textAlign: 'center',
-                        color: 'gray',
-                      }}
-                    >
-                      Tip: Get your API key{' '}
-                      <Anchor
-                        target="_blank"
-                        weight="bold"
-                        style={{ fontStyle: 'inherit', fontSize: 'inherit' }}
-                        href={`${hostname}/settings/general`}
-                      >
-                        here.
-                      </Anchor>
-                    </Text>
-                  </>
-                )}
-                {form.values.type === 'qBittorrent' && (
-                  <>
-                    <TextInput
-                      required
-                      label="Username"
-                      placeholder="admin"
-                      value={form.values.username}
-                      onChange={(event) => {
-                        form.setFieldValue('username', event.currentTarget.value);
-                      }}
-                      error={form.errors.username && 'Invalid username'}
-                    />
-                    <TextInput
-                      required
-                      label="Password"
-                      placeholder="adminadmin"
-                      value={form.values.password}
-                      onChange={(event) => {
-                        form.setFieldValue('password', event.currentTarget.value);
-                      }}
-                      error={form.errors.password && 'Invalid password'}
-                    />
-                  </>
-                )}
-                {form.values.type === 'Deluge' && (
-                  <>
-                    <TextInput
-                      label="Password"
-                      placeholder="password"
-                      value={form.values.password}
-                      onChange={(event) => {
-                        form.setFieldValue('password', event.currentTarget.value);
-                      }}
-                      error={form.errors.password && 'Invalid password'}
-                    />
-                  </>
-                )}
-                {form.values.type === 'Transmission' && (
-                  <>
-                    <TextInput
-                      label="Username"
-                      placeholder="admin"
-                      value={form.values.username}
-                      onChange={(event) => {
-                        form.setFieldValue('username', event.currentTarget.value);
-                      }}
-                      error={form.errors.username && 'Invalid username'}
-                    />
-                    <TextInput
-                      label="Password"
-                      placeholder="adminadmin"
-                      value={form.values.password}
-                      onChange={(event) => {
-                        form.setFieldValue('password', event.currentTarget.value);
-                      }}
-                      error={form.errors.password && 'Invalid password'}
-                    />
-                  </>
-                )}
-              </Group>
-            </ScrollArea>
-          </Tabs.Tab>
-          <Tabs.Tab label="Advanced Options">
-            <Group direction="column" grow>
-              <MultiSelect
+          <TextInput
+            required
+            label="Icon URL"
+            placeholder="/favicon.svg"
+            {...form.getInputProps('icon')}
+          />
+          <TextInput
+            required
+            label="Service URL"
+            placeholder="http://localhost:7575"
+            {...form.getInputProps('url')}
+          />
+          <TextInput
+            label="New tab URL"
+            placeholder="http://sonarr.example.com"
+            {...form.getInputProps('openedUrl')}
+          />
+          <Select
+            label="Service type"
+            defaultValue="Other"
+            placeholder="Pick one"
+            required
+            searchable
+            data={ServiceTypeList}
+            {...form.getInputProps('type')}
+          />
+          <Select
+            label="Category"
+            data={categoryList}
+            placeholder="Select a category or create a new one"
+            nothingFound="Nothing found"
+            searchable
+            clearable
+            creatable
+            onClick={(e) => {
+              e.preventDefault();
+            }}
+            getCreateLabel={(query) => `+ Create "${query}"`}
+            onCreate={(query) => {}}
+            {...form.getInputProps('category')}
+          />
+          <LoadingOverlay visible={isLoading} />
+          {(form.values.type === 'Sonarr' ||
+            form.values.type === 'Radarr' ||
+            form.values.type === 'Lidarr' ||
+            form.values.type === 'Readarr') && (
+            <>
+              <TextInput
                required
-                label="HTTP Status Codes"
-                data={StatusCodes}
-                placeholder="Select valid status codes"
-                clearButtonLabel="Clear selection"
-                nothingFound="Nothing found"
-                defaultValue={['200']}
-                clearable
-                searchable
-                {...form.getInputProps('status')}
+                label="API key"
+                placeholder="Your API key"
+                value={form.values.apiKey}
+                onChange={(event) => {
+                  form.setFieldValue('apiKey', event.currentTarget.value);
+                }}
+                error={form.errors.apiKey && 'Invalid API key'}
              />
-              <Switch
-                label="Open service in new tab"
-                defaultChecked={form.values.newTab}
-                {...form.getInputProps('newTab')}
+              <Text
+                style={{
+                  alignSelf: 'center',
+                  fontSize: '0.75rem',
+                  textAlign: 'center',
+                  color: 'gray',
+                }}
+              >
+                Tip: Get your API key{' '}
+                <Anchor
+                  target="_blank"
+                  weight="bold"
+                  style={{ fontStyle: 'inherit', fontSize: 'inherit' }}
+                  href={`${hostname}/settings/general`}
+                >
+                  here.
+                </Anchor>
+              </Text>
+            </>
+          )}
+          {form.values.type === 'qBittorrent' && (
+            <>
+              <TextInput
+                required
+                label="Username"
+                placeholder="admin"
+                value={form.values.username}
+                onChange={(event) => {
+                  form.setFieldValue('username', event.currentTarget.value);
+                }}
+                error={form.errors.username && 'Invalid username'}
              />
-            </Group>
-          </Tabs.Tab>
-        </Tabs>
+              <TextInput
+                required
+                label="Password"
+                placeholder="adminadmin"
+                value={form.values.password}
+                onChange={(event) => {
+                  form.setFieldValue('password', event.currentTarget.value);
+                }}
+                error={form.errors.password && 'Invalid password'}
+              />
+            </>
+          )}
+          {(form.values.type === 'Deluge' || form.values.type === 'Transmission') && (
+            <>
+              <TextInput
+                required
+                label="Password"
+                placeholder="password"
+                value={form.values.password}
+                onChange={(event) => {
+                  form.setFieldValue('password', event.currentTarget.value);
+                }}
+                error={form.errors.password && 'Invalid password'}
+              />
+            </>
+          )}
+        </Group>
+
        <Group grow position="center" mt="xl">
          <Button type="submit">{props.message ?? 'Add service'}</Button>
        </Group>
--- a/src/components/AppShelf/AppShelf.tsx
+++ b/src/components/AppShelf/AppShelf.tsx
@@ -20,30 +20,15 @@ import DownloadComponent from '../modules/downloads/DownloadsModule';

 const useStyles = createStyles((theme, _params) => ({
  item: {
+    borderBottom: 0,
    overflow: 'hidden',
-    borderLeft: '3px solid transparent',
-    borderRight: '3px solid transparent',
-    borderBottom: '3px solid transparent',
-    borderRadius: '20px',
-    borderColor: theme.colorScheme === 'dark' ? theme.colors.dark[5] : theme.colors.gray[1],
+    border: '1px solid transparent',
+    borderRadius: theme.radius.lg,
    marginTop: theme.spacing.md,
  },

-  control: {
-    backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[5] : theme.colors.gray[1],
-    borderRadius: theme.spacing.md,
-
-    '&:hover': {
-      backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[5] : theme.colors.gray[1],
-    },
-  },
-
-  content: {
-    margin: theme.spacing.md,
-  },
-
-  label: {
-    overflow: 'visible',
+  itemOpened: {
+    borderColor: theme.colorScheme === 'dark' ? theme.colors.dark[5] : theme.colors.gray[3],
  },
 }));

@@ -59,16 +44,11 @@ const AppShelf = (props: any) => {
  const { colorScheme } = useMantineColorScheme();

  const sensors = useSensors(
-    useSensor(TouchSensor, {
-      activationConstraint: {
-        delay: 500,
-        tolerance: 5,
-      },
-    }),
+    useSensor(TouchSensor, {}),
    useSensor(MouseSensor, {
      // Require the mouse to move by 10 pixels before activating
      activationConstraint: {
-        delay: 500,
+        delay: 250,
        tolerance: 5,
      },
    })
@@ -121,14 +101,7 @@ const AppShelf = (props: any) => {
        <SortableContext items={config.services}>
          <Grid gutter="xl" align="center">
            {filtered.map((service) => (
-              <Grid.Col
-                key={service.id}
-                span={6}
-                xl={config.settings.appCardWidth || 2}
-                xs={4}
-                sm={3}
-                md={3}
-              >
+              <Grid.Col key={service.id} span={6} xl={2} xs={4} sm={3} md={3}>
                <SortableAppShelfItem service={service} key={service.id} id={service.id} />
              </Grid.Col>
            ))}
@@ -162,6 +135,11 @@ const AppShelf = (props: any) => {
          order={2}
          iconPosition="right"
          multiple
+          styles={{
+            item: {
+              borderRadius: '20px',
+            },
+          }}
          initialState={toggledCategories}
          onChange={(idx) => settoggledCategories(idx)}
        >
--- a/src/components/AppShelf/AppShelfItem.tsx
+++ b/src/components/AppShelf/AppShelfItem.tsx
@@ -83,8 +83,8 @@ export function AppShelfItem(props: any) {
      >
        <Card.Section>
          <Anchor
-            target={service.newTab === false ? '_top' : '_blank'}
-            href={service.openedUrl ? service.openedUrl : service.url}
+            target="_blank"
+            href={service.url}
            style={{ color: 'inherit', fontStyle: 'inherit', fontSize: 'inherit' }}
          >
            <Text mt="sm" align="center" lineClamp={1} weight={550}>
@@ -127,14 +127,13 @@ export function AppShelfItem(props: any) {
                  src={service.icon}
                  fit="contain"
                  onClick={() => {
-                    if (service.openedUrl) {
-                      window.open(service.openedUrl, service.newTab === false ? '_top' : '_blank');
-                    } else window.open(service.url, service.newTab === false ? '_top' : '_blank');
+                    if (service.openedUrl) window.open(service.openedUrl, '_blank');
+                    else window.open(service.url);
                  }}
                />
              </motion.i>
            </AspectRatio>
-            <PingComponent url={service.url} status={service.status} />
+            <PingComponent url={service.url} />
          </Card.Section>
        </Center>
      </Card>
--- a/src/components/AppShelf/AppShelfMenu.tsx
+++ b/src/components/AppShelf/AppShelfMenu.tsx
@@ -20,7 +20,20 @@ export default function AppShelfMenu(props: any) {
        onClose={() => setOpened(false)}
        title="Modify a service"
      >
-        <AddAppShelfItemForm setOpened={setOpened} {...service} message="Save service" />
+        <AddAppShelfItemForm
+          setOpened={setOpened}
+          name={service.name}
+          id={service.id}
+          category={service.category}
+          type={service.type}
+          url={service.url}
+          icon={service.icon}
+          apiKey={service.apiKey}
+          username={service.username}
+          password={service.password}
+          openedUrl={service.openedUrl}
+          message="Save service"
+        />
      </Modal>
      <Menu
        position="right"
--- a/src/components/Settings/AdvancedSettings.tsx
+++ b/src/components/Settings/AdvancedSettings.tsx
@@ -3,7 +3,6 @@ import { useForm } from '@mantine/form';
 import { useConfig } from '../../tools/state';
 import { ColorSelector } from './ColorSelector';
 import { OpacitySelector } from './OpacitySelector';
-import { AppCardWidthSelector } from './AppCardWidthSelector';
 import { ShadeSelector } from './ShadeSelector';

 export default function TitleChanger() {
@@ -59,7 +58,6 @@ export default function TitleChanger() {
      <ColorSelector type="secondary" />
      <ShadeSelector />
      <OpacitySelector />
-      <AppCardWidthSelector />
    </Group>
  );
 }
--- a/src/components/Settings/AppCardWidthSelector.tsx
+++ b/src/components/Settings/AppCardWidthSelector.tsx
@@ -1,32 +0,0 @@
-import React from 'react';
-import { Group, Text, Slider } from '@mantine/core';
-import { useConfig } from '../../tools/state';
-
-export function AppCardWidthSelector() {
-  const { config, setConfig } = useConfig();
-
-  const setappCardWidth = (appCardWidth: number) => {
-    setConfig({
-      ...config,
-      settings: {
-        ...config.settings,
-        appCardWidth,
-      },
-    });
-  };
-
-  return (
-    <Group direction="column" spacing="xs" grow>
-      <Text>App Width</Text>
-      <Slider
-        label={null}
-        defaultValue={config.settings.appCardWidth}
-        step={0.2}
-        min={0.8}
-        max={2}
-        styles={{ markLabel: { fontSize: 'xx-small' } }}
-        onChange={(value) => setappCardWidth(value)}
-      />
-    </Group>
-  );
-}
--- a/src/components/Settings/CommonSettings.tsx
+++ b/src/components/Settings/CommonSettings.tsx
@@ -1,6 +1,6 @@
 import { ActionIcon, Group, Text, SegmentedControl, TextInput, Anchor } from '@mantine/core';
 import { useState } from 'react';
-import { IconBrandGithub as BrandGithub, IconBrandDiscord as BrandDiscord } from '@tabler/icons';
+import { IconBrandGithub as BrandGithub } from '@tabler/icons';
 import { CURRENT_VERSION } from '../../../data/constants';
 import { useConfig } from '../../tools/state';
 import { ColorSchemeSwitch } from '../ColorSchemeToggle/ColorSchemeSwitch';
@@ -28,15 +28,6 @@ export default function CommonSettings(args: any) {
    <Group direction="column" grow>
      <Group grow direction="column" spacing={0}>
        <Text>Search engine</Text>
-        <Text
-          style={{
-            fontSize: '0.75rem',
-            color: 'gray',
-            marginBottom: '0.5rem',
-          }}
-        >
-          Tip: %s can be used as a placeholder for the query.
-        </Text>
        <SegmentedControl
          fullWidth
          title="Search engine"
@@ -62,7 +53,7 @@ export default function CommonSettings(args: any) {
        {searchUrl === 'Custom' && (
          <TextInput
            label="Query URL"
-            placeholder="Custom query URL"
+            placeholder="Custom query url"
            value={customSearchUrl}
            onChange={(event) => {
              setCustomSearchUrl(event.currentTarget.value);
@@ -107,26 +98,21 @@ export default function CommonSettings(args: any) {
            {CURRENT_VERSION}
          </Text>
        </Group>
-        <Group spacing={1}>
-          <Text
-            style={{
-              fontSize: '0.90rem',
-              textAlign: 'center',
-              color: 'gray',
-            }}
+        <Text
+          style={{
+            fontSize: '0.90rem',
+            textAlign: 'center',
+            color: 'gray',
+          }}
+        >
+          Made with ❤️ by @
+          <Anchor
+            href="https://github.com/ajnart"
+            style={{ color: 'inherit', fontStyle: 'inherit', fontSize: 'inherit' }}
          >
-            Made with ❤️ by @
-            <Anchor
-              href="https://github.com/ajnart"
-              style={{ color: 'inherit', fontStyle: 'inherit', fontSize: 'inherit' }}
-            >
-              ajnart
-            </Anchor>
-          </Text>
-          <ActionIcon<'a'> component="a" href="https://discord.gg/aCsmEV5RgA" size="lg">
-            <BrandDiscord size={18} />
-          </ActionIcon>
-        </Group>
+            ajnart
+          </Anchor>
+        </Text>
      </Group>
    </Group>
  );
--- a/src/components/layout/Header.tsx
+++ b/src/components/layout/Header.tsx
@@ -78,7 +78,7 @@ export function Header(props: any) {
            >
              {(styles) => (
                <div style={styles}>
-                  <ScrollArea offsetScrollbars style={{ height: '90vh' }}>
+                  <ScrollArea style={{ height: '90vh' }}>
                    <Group my="sm" grow direction="column" style={{ width: 300 }}>
                      <ModuleWrapper module={CalendarModule} />
                      <ModuleWrapper module={TotalDownloadsModule} />
--- a/src/components/modules/calendar/CalendarModule.tsx
+++ b/src/components/modules/calendar/CalendarModule.tsx
@@ -29,12 +29,6 @@ export const CalendarModule: IModule = {
    'A calendar module for displaying upcoming releases. It interacts with the Sonarr and Radarr API.',
  icon: CalendarIcon,
  component: CalendarComponent,
-  options: {
-    sundaystart: {
-      name: 'Start the week on Sunday',
-      value: false,
-    },
-  },
 };

 export default function CalendarComponent(props: any) {
@@ -68,69 +62,50 @@ export default function CalendarComponent(props: any) {

  useEffect(() => {
    // Create each Sonarr service and get the medias
-    const currentSonarrMedias: any[] = [];
+    const currentSonarrMedias: any[] = [...sonarrMedias];
    Promise.all(
      sonarrServices.map((service) =>
-        getMedias(service, 'sonarr')
-          .then((res) => {
-            currentSonarrMedias.push(...res.data);
-          })
-          .catch(() => {
-            currentSonarrMedias.push([]);
-          })
+        getMedias(service, 'sonarr').then((res) => {
+          currentSonarrMedias.push(...res.data);
+        })
      )
    ).then(() => {
      setSonarrMedias(currentSonarrMedias);
    });
-    const currentRadarrMedias: any[] = [];
+    const currentRadarrMedias: any[] = [...radarrMedias];
    Promise.all(
      radarrServices.map((service) =>
-        getMedias(service, 'radarr')
-          .then((res) => {
-            currentRadarrMedias.push(...res.data);
-          })
-          .catch(() => {
-            currentRadarrMedias.push([]);
-          })
+        getMedias(service, 'radarr').then((res) => {
+          currentRadarrMedias.push(...res.data);
+        })
      )
    ).then(() => {
      setRadarrMedias(currentRadarrMedias);
    });
-    const currentLidarrMedias: any[] = [];
+    const currentLidarrMedias: any[] = [...lidarrMedias];
    Promise.all(
      lidarrServices.map((service) =>
-        getMedias(service, 'lidarr')
-          .then((res) => {
-            currentLidarrMedias.push(...res.data);
-          })
-          .catch(() => {
-            currentLidarrMedias.push([]);
-          })
+        getMedias(service, 'lidarr').then((res) => {
+          currentLidarrMedias.push(...res.data);
+        })
      )
    ).then(() => {
      setLidarrMedias(currentLidarrMedias);
    });
-    const currentReadarrMedias: any[] = [];
+    const currentReadarrMedias: any[] = [...readarrMedias];
    Promise.all(
      readarrServices.map((service) =>
-        getMedias(service, 'readarr')
-          .then((res) => {
-            currentReadarrMedias.push(...res.data);
-          })
-          .catch(() => {
-            currentReadarrMedias.push([]);
-          })
+        getMedias(service, 'readarr').then((res) => {
+          currentReadarrMedias.push(...res.data);
+        })
      )
    ).then(() => {
      setReadarrMedias(currentReadarrMedias);
    });
  }, [config.services]);

-  const weekStartsAtSunday =
-    (config?.modules?.[CalendarModule.title]?.options?.sundaystart?.value as boolean) ?? false;
  return (
    <Calendar
-      firstDayOfWeek={weekStartsAtSunday ? 'sunday' : 'monday'}
      onChange={(day: any) => {}}
      dayStyle={(date) =>
        date.getDay() === today.getDay() && date.getDate() === today.getDate()
@@ -140,13 +115,6 @@ export default function CalendarComponent(props: any) {
            }
          : {}
      }
-      styles={{
-        calendarHeader: {
-          marginRight: 15,
-          marginLeft: 15,
-        },
-      }}
-      allowLevelChange={false}
      dayClassName={(date, modifiers) => cx({ [classes.weekend]: modifiers.weekend })}
      renderDay={(renderdate) => (
        <DayComponent
--- a/src/components/modules/downloads/DownloadsModule.tsx
+++ b/src/components/modules/downloads/DownloadsModule.tsx
@@ -59,7 +59,7 @@ export default function DownloadComponent() {
        setIsLoading(false);
      });
    }, 5000);
-  }, []);
+  }, [config.services]);

  if (downloadServices.length === 0) {
    return (
@@ -158,7 +158,7 @@ export default function DownloadComponent() {
            <Progress
              radius="lg"
              color={
-                torrent.progress === 1 ? 'green' : torrent.state === 'paused' ? 'yellow' : 'blue'
+                torrent.state === 'paused' ? 'yellow' : torrent.progress === 1 ? 'green' : 'blue'
              }
              value={torrent.progress * 100}
              size="lg"
--- a/src/components/modules/moduleWrapper.tsx
+++ b/src/components/modules/moduleWrapper.tsx
@@ -120,8 +120,8 @@ export function ModuleWrapper(props: any) {
        styles={{
          root: {
            position: 'absolute',
-            top: 12,
-            right: 12,
+            top: 15,
+            right: 15,
          },
        }}
      />
--- a/src/components/modules/ping/PingModule.story.tsx
+++ b/src/components/modules/ping/PingModule.story.tsx
@@ -11,8 +11,6 @@ const service: serviceItem = {
  name: 'YouTube',
  icon: 'https://cdn.jsdelivr.net/gh/walkxhub/dashboard-icons/png/youtube.png',
  url: 'https://youtube.com/',
-  status: ['200'],
-  newTab: false,
 };

 export const Default = (args: any) => <PingComponent service={service} />;
--- a/src/components/modules/ping/PingModule.tsx
+++ b/src/components/modules/ping/PingModule.tsx
@@ -1,5 +1,5 @@
 import { Indicator, Tooltip } from '@mantine/core';
-import axios, { AxiosResponse } from 'axios';
+import axios from 'axios';
 import { motion } from 'framer-motion';
 import { useEffect, useState } from 'react';
 import { IconPlug as Plug } from '@tabler/icons';
@@ -19,37 +19,18 @@ export default function PingComponent(props: any) {

  const { url }: { url: string } = props;
  const [isOnline, setOnline] = useState<State>('loading');
-  const [response, setResponse] = useState(500);
  const exists = config.modules?.[PingModule.title]?.enabled ?? false;
-
-  function statusCheck(response: AxiosResponse) {
-    const { status }: { status: string[] } = props;
-    //Default Status
-    let acceptableStatus = ['200'];
-    if (status !== undefined && status.length) {
-      acceptableStatus = status;
-    }
-    // Checks if reported status is in acceptable status array
-    if (acceptableStatus.indexOf(response.status.toString()) >= 0) {
-      setOnline('online');
-      setResponse(response.status);
-    } else {
-      setOnline('down');
-      setResponse(response.status);
-    }
-  }
-
  useEffect(() => {
    if (!exists) {
      return;
    }
    axios
      .get('/api/modules/ping', { params: { url } })
-      .then((response) => {
-        statusCheck(response);
+      .then(() => {
+        setOnline('online');
      })
-      .catch((error) => {
-        statusCheck(error.response);
+      .catch(() => {
+        setOnline('down');
      });
  }, [config.modules?.[PingModule.title]?.enabled]);
  if (!exists) {
@@ -59,13 +40,7 @@ export default function PingComponent(props: any) {
    <Tooltip
      radius="lg"
      style={{ position: 'absolute', bottom: 20, right: 20 }}
-      label={
-        isOnline === 'loading'
-          ? 'Loading...'
-          : isOnline === 'online'
-          ? `Online - ${response}`
-          : `Offline - ${response}`
-      }
+      label={isOnline === 'loading' ? 'Loading...' : isOnline === 'online' ? 'Online' : 'Offline'}
    >
      <motion.div
        animate={{
--- a/src/components/modules/search/SearchModule.tsx
+++ b/src/components/modules/search/SearchModule.tsx
@@ -96,13 +96,7 @@ export default function SearchBar(props: any) {
          } else if (isTorrent) {
            window.open(`https://bitsearch.to/search?q=${query.substring(3)}`);
          } else {
-            window.open(
-              `${
-                queryUrl.includes('%s')
-                  ? queryUrl.replace('%s', values.query)
-                  : queryUrl + values.query
-              }`
-            );
+            window.open(`${queryUrl}${values.query}`);
          }
        }, 20);
      })}
@@ -120,7 +114,6 @@ export default function SearchBar(props: any) {
        onBlurCapture={() => setOpened(false)}
        target={
          <Autocomplete
-            autoFocus
            variant="filled"
            data={autocompleteData}
            icon={icon}
--- a/src/pages/api/modules/calendar.ts
+++ b/src/pages/api/modules/calendar.ts
@@ -44,10 +44,7 @@ async function Post(req: NextApiRequest, res: NextApiResponse) {
    });
  }
  // Get the origin URL
-  let { href: origin } = new URL(service.url);
-  if (origin.endsWith('/')) {
-    origin = origin.slice(0, -1);
-  }
+  const { origin } = new URL(service.url);
  const pined = `${origin}${url?.url}?apiKey=${service.apiKey}&end=${nextMonth}&start=${lastMonth}`;
  const data = await axios.get(
    `${origin}${url?.url}?apiKey=${service.apiKey}&end=${nextMonth}&start=${lastMonth}`
--- a/src/pages/api/modules/downloads.ts
+++ b/src/pages/api/modules/downloads.ts
@@ -7,52 +7,53 @@ import { Config } from '../../../tools/types';

 async function Post(req: NextApiRequest, res: NextApiResponse) {
  // Get the type of service from the request url
-  const { config }: { config: Config } = req.body;
-  const qBittorrentServices = config.services.filter((service) => service.type === 'qBittorrent');
-  const delugeServices = config.services.filter((service) => service.type === 'Deluge');
-  const transmissionServices = config.services.filter((service) => service.type === 'Transmission');
-
  const torrents: NormalizedTorrent[] = [];
-
-  if (!qBittorrentServices && !delugeServices && !transmissionServices) {
+  const { config }: { config: Config } = req.body;
+  const qBittorrentService = config.services
+    .filter((service) => service.type === 'qBittorrent')
+    .at(0);
+  const delugeService = config.services.filter((service) => service.type === 'Deluge').at(0);
+  const transmissionService = config.services
+    .filter((service) => service.type === 'Transmission')
+    .at(0);
+  if (!qBittorrentService && !delugeService && !transmissionService) {
    return res.status(500).json({
      statusCode: 500,
-      message: 'Missing services',
+      message: 'Missing service',
    });
  }
-  await Promise.all(
-    qBittorrentServices.map((service) =>
-      new QBittorrent({
-        baseUrl: service.url,
-        username: service.username,
-        password: service.password,
-      })
-        .getAllData()
-        .then((e) => torrents.push(...e.torrents))
-    )
-  );
-  await Promise.all(
-    delugeServices.map((service) =>
-      new Deluge({
-        baseUrl: service.url,
-        password: 'password' in service ? service.password : '',
-      })
-        .getAllData()
-        .then((e) => torrents.push(...e.torrents))
-    )
-  );
-  // Map transmissionServices
-  await Promise.all(
-    transmissionServices.map((service) =>
-      new Transmission({
-        baseUrl: service.url,
-        username: 'username' in service ? service.username : '',
-        password: 'password' in service ? service.password : '',
-      })
-        .getAllData()
-        .then((e) => torrents.push(...e.torrents))
-    )
-  );
+  if (qBittorrentService) {
+    torrents.push(
+      ...(
+        await new QBittorrent({
+          baseUrl: qBittorrentService.url,
+          username: qBittorrentService.username,
+          password: qBittorrentService.password,
+        }).getAllData()
+      ).torrents
+    );
+  }
+  if (delugeService) {
+    torrents.push(
+      ...(
+        await new Deluge({
+          baseUrl: delugeService.url,
+          password: delugeService.password,
+        }).getAllData()
+      ).torrents
+    );
+  }
+  if (transmissionService) {
+    torrents.push(
+      ...(
+        await new Transmission({
+          baseUrl: transmissionService.url,
+          username: transmissionService.username,
+          password: transmissionService.password,
+        }).getAllData()
+      ).torrents
+    );
+  }
  res.status(200).json(torrents);
 }

--- a/src/pages/api/modules/ping.ts
+++ b/src/pages/api/modules/ping.ts
@@ -7,14 +7,10 @@ async function Get(req: NextApiRequest, res: NextApiResponse) {
  await axios
    .get(url as string)
    .then((response) => {
-      res.status(response.status).json(response.statusText);
+      res.status(200).json(response.data);
    })
    .catch((error) => {
-      if (error.response) {
-        res.status(error.response.status).json(error.response.statusText);
-      } else {
-        res.status(500).json('Server Error');
-      }
+      res.status(500).json(error);
    });
  // // Make a request to the URL
  // const response = await axios.get(url);
--- a/src/tools/types.ts
+++ b/src/tools/types.ts
@@ -12,7 +12,6 @@ export interface Settings {
  background?: string;
  appOpacity?: number;
  widgetPosition?: string;
-  appCardWidth?: number;
 }

 export interface Config {
@@ -32,32 +31,6 @@ interface ConfigModule {
  };
 }

-export const StatusCodes = [
-  { value: '200', label: '200 - OK', group: 'Sucessful responses' },
-  { value: '204', label: '204 - No Content', group: 'Sucessful responses' },
-  { value: '301', label: '301 - Moved Permanently', group: 'Redirection responses' },
-  { value: '302', label: '302 - Found / Moved Temporarily', group: 'Redirection responses' },
-  { value: '304', label: '304 - Not Modified', group: 'Redirection responses' },
-  { value: '307', label: '307 - Temporary Redirect', group: 'Redirection responses' },
-  { value: '308', label: '308 - Permanent Redirect', group: 'Redirection responses' },
-  { value: '400', label: '400 - Bad Request', group: 'Client error responses' },
-  { value: '401', label: '401 - Unauthorized', group: 'Client error responses' },
-  { value: '403', label: '403 - Forbidden', group: 'Client error responses' },
-  { value: '404', label: '404 - Not Found', group: 'Client error responses' },
-  { value: '408', label: '408 - Request Timeout', group: 'Client error responses' },
-  { value: '410', label: '410 - Gone', group: 'Client error responses' },
-  { value: '429', label: '429 - Too Many Requests', group: 'Client error responses' },
-  { value: '500', label: '500 - Internal Server Error', group: 'Server error responses' },
-  { value: '502', label: '502 - Bad Gateway', group: 'Server error responses' },
-  { value: '503', label: '503 - Service Unavailable', group: 'Server error responses' },
-  { value: '054', label: '504 - Gateway Timeout Error', group: 'Server error responses' },
-];
-
-export const Targets = [
-  { value: '_blank', label: 'New Tab' },
-  { value: '_top', label: 'Same Window' },
-];
-
 export const ServiceTypeList = [
  'Other',
  'Emby',
@@ -93,6 +66,4 @@ export interface serviceItem {
  password?: string;
  username?: string;
  openedUrl?: string;
-  newTab?: boolean;
-  status?: string[];
 }