v0.6.0 ✨ Categories and current download graphs ! 🥳

System info

.eslintrc.js

@@ -20,6 +20,7 @@ module.exports = {
   },
   rules: {
     'react/react-in-jsx-scope': 'off',
+    'react/no-children-prop': 'off',
     "unused-imports/no-unused-imports": "warn",
     "@typescript-eslint/no-unused-vars": "off",
     "@typescript-eslint/no-unused-imports": "off",

.github/workflows/docker.yml

@@ -52,7 +52,7 @@ jobs:
           key: ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json') }}-${{ hashFiles('**.[jt]s', '**.[jt]sx') }}
           # If source files changed but packages didn't, rebuild from a prior cache.
           restore-keys: ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json') }}-
-      - run: yarn install --frozen-lockfile
+      - run: yarn install --immutable
       - run: yarn build
       - name: Cache build output
       # to copy needed files to docker build job

.github/workflows/docker_dev.yml

@@ -62,7 +62,7 @@ jobs:
           # If source files changed but packages didn't, rebuild from a prior cache.
           restore-keys: ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json') }}-
 
-      - run: yarn install --frozen-lockfile
+      - run: yarn install --immutable
       - run: yarn build
 
       - name: Cache build output

.gitignore

@@ -36,4 +36,14 @@ yarn-error.log*
 
 # storybook
 storybook-static
-data/configs
+data/configs
+
+# https://yarnpkg.com/getting-started/qa#which-files-should-be-gitignored
+# Yarn v2
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/sdks
+!.yarn/versions

.storybook/main.js

@@ -1,13 +1,9 @@
 module.exports = {
   stories: ['../src/components/**/*.story.mdx', '../src/components/**/*.story.*'],
   addons: [
-    'storybook-dark-mode',
     '@storybook/addon-links',
+    'storybook-addon-mock/register',
     '@storybook/addon-essentials',
-    {
-      name: 'storybook-addon-turbo-build',
-      options: { optimizationLevel: 2 },
-    },
   ],
   typescript: {
     check: false,

.storybook/preview.tsx

@@ -1,4 +1,3 @@
-import { useDarkMode } from 'storybook-dark-mode';
 import { MantineProvider, ColorSchemeProvider } from '@mantine/core';
 import { NotificationsProvider } from '@mantine/notifications';
 
@@ -7,11 +6,7 @@ export const parameters = { layout: 'fullscreen' };
 function ThemeWrapper(props: { children: React.ReactNode }) {
   return (
     <ColorSchemeProvider colorScheme="light" toggleColorScheme={() => {}}>
-      <MantineProvider
+      <MantineProvider withGlobalStyles withNormalizeCSS>
-        theme={{ colorScheme: useDarkMode() ? 'dark' : 'light' }}
-        withGlobalStyles
-        withNormalizeCSS
-      >
         <NotificationsProvider>{props.children}</NotificationsProvider>
       </MantineProvider>
     </ColorSchemeProvider>

.yarnrc

@@ -0,0 +1,5 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+yarn-path ".yarn/releases/yarn-1.22.19.cjs"

.yarnrc.yml

@@ -0,0 +1,3 @@
+nodeLinker: node-modules
+
+yarnPath: .yarn/releases/yarn-3.2.1.cjs

README.md

@@ -1,64 +1,97 @@
-<h3 align="center">Homarr</h3>
+
-<br>
+<!-- Project Title -->
+<h1 align="center">Homarr</h1>
+
+<!-- Badges -->
 <p align="center">
-  <a href="https://github.com/ajnart/homarr/actions/workflows/docker.yml">
+<img src="https://img.shields.io/github/stars/ajnart/homarr?label=%E2%AD%90%20Stars&style=flat-square?branch=master&kill_cache=1%22">
-      <img title="Docker CI Status" src="https://github.com/ajnart/homarr/actions/workflows/docker.yml/badge.svg" alt="CI Status"></a>
+<a href="https://github.com/ajnart/homarr/releases/latest">
-    <a href="https://github.com/ajnart/homarr/releases/latest">
+  <img alt="Latest Release (Semver)" src="https://img.shields.io/github/v/release/ajnart/homarr?label=%F0%9F%9A%80%20Release">
-      <img alt="GitHub release (latest SemVer)" src="https://img.shields.io/github/v/release/ajnart/homarr"></a>
+</a>
-  <a href="https://github.com/ajnart/homarr/pkgs/container/homarr">
+<a href="https://github.com/ajnart/homarr/actions/workflows/docker.yml">
-    <img alt="Docker Pulls" src="https://img.shields.io/docker/pulls/ajnart/homarr?label=Downloads%20"></a>
+  <img title="Docker CI Status" src="https://github.com/ajnart/homarr/actions/workflows/docker.yml/badge.svg" alt="CI Status">
-  </p>
+</a>
-  <p align="center">
+<a href="https://discord.gg/aCsmEV5RgA">
-<img align="end" width=600 src="https://user-images.githubusercontent.com/49837342/168315259-b778c816-10fe-44db-bd25-3eea6f31b233.png" />
+  <img title="Discord" src="https://discordapp.com/api/guilds/972958686051962910/widget.png?style=shield">
-  </p>
+</a>
-  <p align = "center">
-    A homepage for <i>your</i> server.
-  <br/>
-  <a href = "https://homarr.netlify.app/" > <strong> Demo ↗️ </strong> </a> • <a href = "#-installation" > <strong> Install ➡️ </strong> </a>
-  <br />
-  <br />
-    <i>Join the discord!</i>
-  <br />
-    <a href = "https://discord.gg/aCsmEV5RgA" > <img title="Discord" src="https://discordapp.com/api/guilds/972958686051962910/widget.png?style=shield" > </a>
-  <br/>  
-    <br/>
 </p>
 
-# 📃 Table of Contents
+<!-- Links -->
-- [📃 Table of Contents](#-table-of-contents)
+<p align="center">
-- [🚀 Getting Started](#-getting-started)
+<i>Join the discord! — Don't forget to star the repo if you are enjoying the project!</i>
-  - [ℹ️ About](#ℹ️-about)
+</p>
-  - [💥 Known Issues](#-known-issues)
+<p align="center">
-  - [⚡ Installation](#-installation)
+<a href="https://homarr.ajnart.fr/"><strong> Demo ↗️ </strong></a> • <a href="#-installation"><strong> Install ➡️ </strong></a> • <a href="https://github.com/ajnart/homarr/wiki"><strong> Read the Wiki 📄 </strong></a>
-    - [🐳 Deploying from Docker Image](#-deploying-from-docker-image)
+</p>
-    - [🛠️ Building from Source](#%EF%B8%8F-building-from-source)
-  - [🔧 Configuration](#-configuration)
-    - [🧩 Integrations](#--integrations)
-    - [🧑‍🤝‍🧑 Multiple Configs](#-multiple-configs)
-    - [🐻 Icons](#-icons)
-    - [📊 Modules](#-modules)
-    - [🔍 Search Bar](#-search-bar)
-- [💖 Contributing](#-contributing)
 
+---
 
-<!-- Getting Started -->
+<!-- Homarr Description -->
-# 🚀 Getting Started
+<img align="right" width=250 src="public/imgs/logo-color.svg" />
-
-## ℹ️ About
 
 Homarr is a simple and lightweight homepage for your server, that helps you easily access all of your services in one place.
-    
+
-**[⤴️ Back to Top](#-table-of-contents)**
+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](#).
+
+If you have any questions about Homarr or want to share information with us, please go to one of the following places:
+
+- [Github Discussions](https://github.com/ajnart/homarr/discussions)
+- [Discord Server](https://discord.gg/aCsmEV5RgA)
+
+*Before you file an [issue](https://github.com/ajnart/homarr/issues/new/choose), make sure you have the read [known issues](#-known-issues) section.*
+
+**For more information, [read the wiki!](https://github.com/ajnart/homarr/wiki)**
+
+<details>
+  <summary><b>Table of Contents</b></summary>
+  <p>
+
+- [✨ Features](#-features)
+- [👀 Preview](#-preview)
+- [💥 Known Issues](#-known-issues)
+- [🚀 Installation](#-installation)
+  - [🐳 Deploying from Docker Image](#-deploying-from-docker-image)
+  - [🛠️ Building from Source](#️-building-from-source)
+- [💖 Contributing](#-contributing)
+- [📜 License](#-license)
+
+  </p>
+</details>
+
+---
+
+## ✨ Features
+- Integrates with services you use.
+- Search the web direcetly from your homepage.
+- Real-time status indicator for every service.
+- Automatically finds icons while you type the name of a serivce.
+- Widgets that can display all types of information.
+- Easy deployment with Docker.
+- Very light-weight and fast.
+- Free and Open-Source.
+- And more...
+
+**[⤴️ Back to Top](#homarr)**
+
+---
+
+## 👀 Preview
+<img alt="Homarr Preview" align="center" width="100%" src="https://user-images.githubusercontent.com/71191962/169860380-856634fb-4f41-47cb-ba54-6a9e7b3b9c81.gif" />
+
+**[⤴️ Back to Top](#homarr)**
+
+---
 
 ## 💥 Known Issues
 - Posters on the Calendar get blocked by adblockers. (IMDb posters)
-- Editing a service creates a duplicate (#97)
-- Used search engine not properly selected (#35)
 
-**[⤴️ Back to Top](#-table-of-contents)**
+**[⤴️ Back to Top](#homarr)**
 
-## ⚡ Installation
+---
 
+## 🚀 Installation
 ### 🐳 Deploying from Docker Image
 > Supported architectures: x86-64, ARM, ARM64
 
@@ -66,29 +99,42 @@ _Requirements_:
 - [Docker](https://docs.docker.com/get-docker/)
 
 **Standard Docker Install**
-```sh
+```bash
-docker run --name homarr -p 7575:7575 -v /data/docker/homarr:/app/data/configs -d ghcr.io/ajnart/homarr:latest
+docker run  \
+  --name homarr \
+  --restart unless-stopped \
+  -p 7575:7575 \
+  -v ./homarr/configs:/app/data/configs \
+  -v ./homarr/icons:/app/public/icons \
+  -d ghcr.io/ajnart/homarr:latest
 ```
 
 **Docker Compose**
 ```yml
 ---
 version: '3'
-#--------------------------------------------------------------------------------------------#
+#---------------------------------------------------------------------#
-#                               Homarr -  A homepage for your server.                        #
+#                Homarr -  A homepage for your server.                #
-#--------------------------------------------------------------------------------------------#
+#---------------------------------------------------------------------#
 services:
   homarr:
     container_name: homarr
     image: ghcr.io/ajnart/homarr:latest
     restart: unless-stopped
     volumes:
-      - /data/docker/homarr:/app/data/configs
+      - ./homarr/configs:/app/data/configs
+      - ./homarr/icons:/app/public/icons
     ports:
       - '7575:7575'
 ```
 
-***Getting EACCESS errors in the logs? Try running `sudo chmod 775 /directory-you-mounted-to`!***
+```sh
+docker compose up -d
+```
+
+*Getting EACCESS errors in the logs? Try running `sudo chmod 777 /directory-you-mounted-to`!*
+
+**[⤴️ Back to Top](#homarr)**
 
 ### 🛠️ Building from Source
 
@@ -105,87 +151,54 @@ _Requirements_:
 - Start the NextJS web server: ``yarn start``
 - *Note: If you want to update the code in real time, launch with ``yarn dev``*
 
-## 🔧 Configuration
+**[⤴️ Back to Top](#homarr)**
 
-### 🧩  Integrations
+---
 
-Homarr natively integrates with your services. Here is a list of all supported services.
+## 💖 Contributing
-
-**Emby**
-*The Emby integration is still in development.*
-
-**Lidarr**
-*The Lidarr integration is still in development.*
-
-**Sonarr**
-*Sonarr needs an API key.*<br>
-Make a new API key in `Advanced > Security > Create new API key`<br>
-**Current integration:** Upcoming media is displayed in the **Calendar** module.
-
-**Plex**
-*The Plex integration is still in development.*
-
-**Radarr**
-*Radarr needs an API key.*<br>
-Make a new API key in `Advanced > Security > Create new API key`<br>
-**Current integration:** Upcoming media is displayed in the **Calendar** module.
-
-**qBittorent**
-*The qBittorent integration is still in development.*
-
-**[⤴️ Back to Top](#-table-of-contents)**
-
-### 🧑‍🤝‍🧑 Multiple Configs
-
-Homarr allows the usage of multiple configs. You can add a new config in two ways.
-
-**Drag-and-Drop**
-1. Download your config from the Homarr settings.
-2. Change the name of the `.json` file and the name in the `.json` file to any name you want *(just make sure it's different)*.
-3. Drag-and-Drop the file into the Homarr tab in your browser.
-4. Change the config in settings.
-
-**Using a filebrowser**
-1. Locate your mounted `default.json` file.
-2. Duplicate your `default.json` file.
-3. Change the name of the `.json` file and the name in the `.json` file to any name you want *(just make sure it's different)*.
-4. Refresh the Homarr tab in your browser.
-5. Change the config in settings.
-
-**[⤴️ Back to Top](#-table-of-contents)**
-
-### 🐻 Icons
-
-The icons used in Homarr are automatically requested from the [dashboard-icons](https://github.com/walkxhub/dashboard-icons) repo.
-
-Icons are requested in the following way: <br>
-`Grab name > Replace ' ' with '-' > .toLower() > https://cdn.jsdelivr.net/gh/walkxhub/dashboard-icons/png/{name}.png`
-
-**[⤴️ Back to Top](#-table-of-contents)**
-
-### 📊 Modules
-
-Modules are blocks shown on the sides of the Homarr dashboard that display information. They can be enabled in settings.
-
-**Clock Module**
-The clock module will display your current time and date.
-
-**Calendar Module**
-The Calendar module uses [integrations](#--integrations-1) to display new content.
-
-**[⤴️ Back to Top](#-table-of-contents)**
-
-### 🔍 Search Bar
-
-The Search Bar will open any Search Query after the Query URL you've specified in settings.
-
-*(Eg. `https://www.google.com/search?q=*Your Query will be inserted here*`)*
-
-**[⤴️ Back to Top](#-table-of-contents)**
-
-# 💖 Contributing
 **Please read our [Contribution Guidelines](/CONTRIBUTING.md)**
 
 All contributions are highly appreciated.
-    
+
-**[⤴️ Back to Top](#-table-of-contents)**
+**[⤴️ Back to Top](#homarr)**
+
+---
+
+
+## 📜 License
+Homarr is Licensed under [MIT](https://en.wikipedia.org/wiki/MIT_License)
+
+```txt
+Copyright © 2022 Thomas "ajnart" Camlong
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+```
+
+**[⤴️ Back to Top](#homarr)**
+
+---
+
+<p align="center">
+  <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>

crowdin.yml

@@ -0,0 +1,3 @@
+files:
+  - source: /public/locales/en/*.json
+    translation: /public/locales/%two_letters_code%/%original_file_name%.json

data/configs/config.json

@@ -1,26 +0,0 @@
-{
-  "name": "config",
-  "services": [
-    {
-      "type": "Other",
-      "name": "YouTube",
-      "icon": "https://cdn.jsdelivr.net/gh/walkxhub/dashboard-icons/png/youtube.png",
-      "url": "https://youtube.com/"
-    },
-    {
-      "type": "Other",
-      "name": "YouTube ",
-      "icon": "https://cdn.jsdelivr.net/gh/walkxhub/dashboard-icons/png/youtube.png",
-      "url": "https://youtube.com/"
-    }
-  ],
-  "settings": {
-    "searchBar": true,
-    "searchUrl": "Custom",
-    "enabledModules": [
-      "Date",
-      "Calendar",
-      "Weather"
-    ]
-  }
-}

data/configs/config_new.json

@@ -1,16 +0,0 @@
-{
-  "name": "config_new",
-  "services": [
-    {
-      "type": "Other",
-      "name": "example",
-      "icon": "https://c.tenor.com/o656qFKDzeUAAAAC/rick-astley-never-gonna-give-you-up.gif",
-      "url": "https://www.youtube.com/watch?v=dQw4w9WgXcQ"
-    }
-  ],
-  "settings": {
-    "searchBar": true,
-    "searchUrl": "https://duckduckgo.com/?q=",
-    "enabledModules": []
-  }
-}

data/configs/default.json

@@ -2,15 +2,22 @@
   "name": "default",
   "services": [
     {
-      "type": "Other",
       "name": "example",
+      "id": "09c45847-8afc-4c1a-9697-f03192de948a",
+      "type": "Other",
       "icon": "https://c.tenor.com/o656qFKDzeUAAAAC/rick-astley-never-gonna-give-you-up.gif",
       "url": "https://www.youtube.com/watch?v=dQw4w9WgXcQ"
     }
   ],
   "settings": {
-    "searchBar": true,
+    "searchUrl": "https://google.com/search?q="
-    "searchUrl": "https://bing.com/search?q=",
+  },
-    "enabledModules": []
+  "modules": {
+    "Search Bar": {
+      "enabled": true
+    },
+    "Date": {
+      "enabled": false
+    }
   }
 }

data/constants.ts

@@ -1,2 +1,2 @@
 export const REPO_URL = 'ajnart/homarr';
-export const CURRENT_VERSION = 'v0.3.1';
+export const CURRENT_VERSION = 'v0.6.0';

next.config.js

@@ -1,13 +1,16 @@
+const { env } = require('process');
+
 const withBundleAnalyzer = require('@next/bundle-analyzer')({
   enabled: process.env.ANALYZE === 'true',
 });
 
 module.exports = withBundleAnalyzer({
-  reactStrictMode: true,
+  reactStrictMode: false,
   eslint: {
     ignoreDuringBuilds: true,
   },
   experimental: {
     outputStandalone: true,
   },
+  basePath: env.BASE_URL,
 });

package.json

@@ -1,87 +1,87 @@
 {
 	"name": "homarr",
-	"version": "0.3.0",
+	"version": "0.6.0",
-	"private": "false",
 	"description": "Homarr - A homepage for your server.",
 	"repository": {
 		"type": "git",
 		"url": "https://github.com/ajnart/homarr"
 	},
-  "scripts": {
+	"scripts": {
-    "dev": "next dev",
+		"dev": "next dev",
-    "build": "next build",
+		"build": "next build",
-    "analyze": "ANALYZE=true next build",
+		"analyze": "ANALYZE=true next build",
-    "start": "next start --port 7575",
+		"start": "next start",
-    "typecheck": "tsc --noEmit",
+		"typecheck": "tsc --noEmit",
-    "export": "next build && next export",
+		"export": "next build && next export",
-    "lint": "next lint",
+		"lint": "next lint",
-    "jest": "jest",
+		"jest": "jest",
-    "jest:watch": "jest --watch",
+		"jest:watch": "jest --watch",
-    "prettier:check": "prettier --check \"**/*.{ts,tsx}\"",
+		"prettier:check": "prettier --check \"**/*.{ts,tsx}\"",
-    "prettier:write": "prettier --write \"**/*.{ts,tsx}\"",
+		"prettier:write": "prettier --write \"**/*.{ts,tsx}\"",
-    "test": "npm run prettier:check && npm run lint && npm run typecheck && npm run jest",
+		"test": "npm run prettier:check && npm run lint && npm run typecheck && npm run jest",
-    "storybook": "start-storybook -p 7001",
+		"storybook": "start-storybook -p 7001",
-    "storybook:build": "build-storybook",
+		"storybook:build": "build-storybook",
-    "ci": "yarn test && yarn lint --fix && yarn typecheck && yarn prettier:write"
+		"ci": "yarn test && yarn lint --fix && yarn typecheck && yarn prettier:write"
-  },
+	},
-  "dependencies": {
+	"dependencies": {
-    "@mantine/core": "^4.2.4",
+		"@ctrl/deluge": "^4.0.0",
-    "@mantine/dates": "^4.2.4",
+		"@ctrl/qbittorrent": "^4.0.0",
-    "@mantine/dropzone": "^4.2.4",
+		"@ctrl/shared-torrent": "^4.1.0",
-    "@mantine/form": "^4.2.4",
+		"@dnd-kit/core": "^6.0.1",
-    "@mantine/hooks": "^4.2.4",
+		"@dnd-kit/sortable": "^7.0.0",
-    "@mantine/modals": "^4.2.4",
+		"@dnd-kit/utilities": "^3.2.0",
-    "@mantine/next": "^4.2.4",
+		"@mantine/core": "^4.2.6",
-    "@mantine/notifications": "^4.2.4",
+		"@mantine/dates": "^4.2.6",
-    "@mantine/prism": "^4.2.4",
+		"@mantine/dropzone": "^4.2.6",
-    "@mantine/rte": "^4.2.4",
+		"@mantine/form": "^4.2.6",
-    "@mantine/spotlight": "^4.2.4",
+		"@mantine/hooks": "^4.2.6",
-    "@modulz/radix-icons": "^4.0.0",
+		"@mantine/next": "^4.2.6",
-    "axios": "^0.27.2",
+		"@mantine/notifications": "^4.2.6",
-    "cookies-next": "^2.0.4",
+		"@mantine/prism": "^4.2.6",
-    "dayjs": "^1.11.2",
+		"@nivo/core": "^0.79.0",
-    "framer-motion": "^6.3.1",
+		"@nivo/line": "^0.79.1",
-    "js-file-download": "^0.4.12",
+		"@tabler/icons": "^1.68.0",
-    "next": "12.1.5-canary.4",
+		"axios": "^0.27.2",
-    "prism-react-renderer": "^1.3.1",
+		"cookies-next": "^2.0.4",
-    "react": "18.0.0",
+		"dayjs": "^1.11.2",
-    "react-dom": "18.0.0",
+		"framer-motion": "^6.3.1",
-    "tabler-icons-react": "^1.46.0"
+		"js-file-download": "^0.4.12",
-  },
+		"next": "12.1.6",
-  "devDependencies": {
+		"prism-react-renderer": "^1.3.1",
-    "@babel/core": "^7.17.8",
+		"react": "^17.0.1",
-    "@next/bundle-analyzer": "^12.1.4",
+		"react-dom": "^17.0.1",
-    "@next/eslint-plugin-next": "^12.1.4",
+		"systeminformation": "^5.11.16",
-    "@storybook/addon-essentials": "^6.4.22",
+		"uuid": "^8.3.2"
-    "@storybook/addon-links": "^6.4.22",
+	},
-    "@storybook/react": "^6.4.22",
+	"devDependencies": {
-    "@testing-library/dom": "^8.12.0",
+		"@babel/core": "^7.17.8",
-    "@testing-library/jest-dom": "^5.16.3",
+		"@next/bundle-analyzer": "^12.1.4",
-    "@testing-library/react": "^13.0.0",
+		"@next/eslint-plugin-next": "^12.1.4",
-    "@testing-library/user-event": "^14.0.4",
+		"@storybook/react": "^6.5.4",
-    "@types/jest": "^27.4.1",
+		"@types/node": "^17.0.23",
-    "@types/node": "^17.0.23",
+		"@types/react": "17.0.43",
-    "@types/react": "17.0.43",
+		"@types/uuid": "^8.3.4",
-    "@typescript-eslint/eslint-plugin": "^5.16.0",
+		"@typescript-eslint/eslint-plugin": "^5.16.0",
-    "@typescript-eslint/parser": "^5.16.0",
+		"@typescript-eslint/parser": "^5.16.0",
-    "babel-loader": "^8.2.4",
+		"eslint": "^8.11.0",
-    "eslint": "^8.11.0",
+		"eslint-config-airbnb": "^19.0.4",
-    "eslint-config-airbnb": "19.0.4",
+		"eslint-config-airbnb-typescript": "^16.1.0",
-    "eslint-config-airbnb-typescript": "^16.1.4",
+		"eslint-config-mantine": "1.1.0",
-    "eslint-config-mantine": "1.1.0",
+		"eslint-plugin-import": "^2.25.4",
-    "eslint-plugin-import": "^2.25.4",
+		"eslint-plugin-jest": "^26.1.3",
-    "eslint-plugin-jest": "^26.1.3",
+		"eslint-plugin-jsx-a11y": "^6.5.1",
-    "eslint-plugin-jsx-a11y": "^6.5.1",
+		"eslint-plugin-react": "^7.29.4",
-    "eslint-plugin-react": "^7.29.4",
+		"eslint-plugin-react-hooks": "^4.3.0",
-    "eslint-plugin-react-hooks": "^4.3.0",
+		"eslint-plugin-storybook": "^0.5.11",
-    "eslint-plugin-storybook": "^0.5.11",
+		"eslint-plugin-testing-library": "^5.2.0",
-    "eslint-plugin-testing-library": "^5.2.0",
+		"eslint-plugin-unused-imports": "^2.0.0",
-    "eslint-plugin-unused-imports": "^2.0.0",
+		"jest": "^28.1.0",
-    "jest": "^27.5.1",
+		"prettier": "^2.6.2",
-    "prettier": "^2.6.2",
+		"require-from-string": "^2.0.2",
-    "storybook-addon-turbo-build": "^1.1.0",
+		"typescript": "4.6.4"
-    "storybook-dark-mode": "^1.0.9",
+	},
-    "ts-jest": "^27.1.4",
+	"resolutions": {
-    "typescript": "4.6.3"
+		"@types/react": "17.0.30"
-  }
+	},
+	"packageManager": "yarn@3.2.1"
 }

src/components/AppShelf/AddAppShelfItem.tsx

@@ -6,21 +6,19 @@ import {
   Image,
   Button,
   Select,
-  AspectRatio,
-  Text,
-  Card,
   LoadingOverlay,
   ActionIcon,
   Tooltip,
   Title,
+  Anchor,
+  Text,
 } from '@mantine/core';
 import { useForm } from '@mantine/form';
-import { motion } from 'framer-motion';
 import { useState } from 'react';
-import { Apps } from 'tabler-icons-react';
+import { IconApps as Apps } from '@tabler/icons';
+import { v4 as uuidv4 } from 'uuid';
 import { useConfig } from '../../tools/state';
 import { ServiceTypeList } from '../../tools/types';
-import { AppShelfItemWrapper } from './AppShelfItemWrapper';
 
 export function AddItemShelfButton(props: any) {
   const [opened, setOpened] = useState(false);
@@ -51,119 +49,121 @@ export function AddItemShelfButton(props: any) {
   );
 }
 
-export default function AddItemShelfItem(props: any) {
-  const [opened, setOpened] = useState(false);
-  return (
-    <>
-      <Modal
-        size="xl"
-        radius="md"
-        opened={props.opened || opened}
-        onClose={() => setOpened(false)}
-        title="Add a service"
-      >
-        <AddAppShelfItemForm setOpened={setOpened} />
-      </Modal>
-      <AppShelfItemWrapper>
-        <Card.Section>
-          <Group position="center" mx="lg">
-            <Text
-              // TODO: #1 Remove this hack to get the text to be centered.
-              ml={15}
-              style={{
-                alignSelf: 'center',
-                alignContent: 'center',
-                alignItems: 'center',
-                justifyContent: 'center',
-                justifyItems: 'center',
-              }}
-              mt="sm"
-              weight={500}
-            >
-              Add a service
-            </Text>
-          </Group>
-        </Card.Section>
-        <Card.Section>
-          <AspectRatio ratio={5 / 3} m="xl">
-            <motion.i
-              whileHover={{
-                cursor: 'pointer',
-                scale: 1.1,
-              }}
-            >
-              <Apps style={{ cursor: 'pointer' }} onClick={() => setOpened(true)} size={60} />
-            </motion.i>
-          </AspectRatio>
-        </Card.Section>
-      </AppShelfItemWrapper>
-    </>
-  );
-}
-
 function MatchIcon(name: string, form: any) {
   fetch(
     `https://cdn.jsdelivr.net/gh/walkxhub/dashboard-icons/png/${name
       .replace(/\s+/g, '-')
       .toLowerCase()}.png`
-  )
+  ).then((res) => {
-    .then((res) => {
+    if (res.ok) {
-      if (res.status === 200) {
+      form.setFieldValue('icon', res.url);
-        form.setFieldValue('icon', res.url);
+    }
-      }
+  });
-    })
-    .catch(() => {
-      // Do nothing
-    });
 
   return false;
 }
 
+function MatchService(name: string, form: any) {
+  const service = ServiceTypeList.find((s) => s === name);
+  if (service) {
+    form.setFieldValue('type', service);
+  }
+}
+
+function MatchPort(name: string, form: any) {
+  const portmap = [
+    { name: 'qBittorrent', value: '8080' },
+    { name: 'Sonarr', value: '8989' },
+    { name: 'Radarr', value: '7878' },
+    { name: 'Lidarr', value: '8686' },
+    { name: 'Readarr', value: '8686' },
+    { name: 'Deluge', value: '8112' },
+    { name: 'Transmission', value: '9091' },
+  ];
+  // Match name with portmap key
+  const port = portmap.find((p) => p.name === name);
+  if (port) {
+    form.setFieldValue('url', `http://localhost:${port.value}`);
+  }
+}
+
 export function AddAppShelfItemForm(props: { setOpened: (b: boolean) => void } & any) {
   const { setOpened } = props;
   const { config, setConfig } = useConfig();
   const [isLoading, setLoading] = useState(false);
 
+  // Extract all the categories from the services in config
+  const categoryList = config.services.reduce((acc, cur) => {
+    if (cur.category && !acc.includes(cur.category)) {
+      acc.push(cur.category);
+    }
+    return acc;
+  }, [] as string[]);
+
   const form = useForm({
     initialValues: {
+      id: props.id ?? uuidv4(),
       type: props.type ?? 'Other',
+      category: props.category ?? undefined,
       name: props.name ?? '',
-      icon: props.icon ?? '',
+      icon: props.icon ?? '/favicon.svg',
       url: props.url ?? '',
       apiKey: props.apiKey ?? (undefined as unknown as string),
+      username: props.username ?? (undefined as unknown as string),
+      password: props.password ?? (undefined as unknown as string),
     },
     validate: {
       apiKey: () => null,
       // Validate icon with a regex
       icon: (value: string) => {
-        if (!value.match(/^https?:\/\/.+\.(png|jpg|jpeg|gif)$/)) {
+        // 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) => {
-        if (!value.match(/^https?:\/\/.+\/$/)) {
+        try {
-          return 'Please enter a valid URL (that ends with a /)';
+          const _isValid = new URL(value);
+        } catch (e) {
+          return 'Please enter a valid URL';
         }
         return null;
       },
     },
   });
 
+  // Try to set const hostname to new URL(form.values.url).hostname)
+  // If it fails, set it to the form.values.url
+  let hostname = form.values.url;
+  try {
+    hostname = new URL(form.values.url).origin;
+  } catch (e) {
+    // Do nothing
+  }
+
   return (
     <>
       <Center>
-        <Image height={120} width={120} src={form.values.icon} alt="Placeholder" withPlaceholder />
+        <Image
+          height={120}
+          width={120}
+          fit="contain"
+          src={form.values.icon}
+          alt="Placeholder"
+          withPlaceholder
+        />
       </Center>
       <form
         onSubmit={form.onSubmit(() => {
           // If service already exists, update it.
-          if (config.services && config.services.find((s) => s.name === form.values.name)) {
+          if (config.services && config.services.find((s) => s.id === form.values.id)) {
             setConfig({
               ...config,
+              // replace the found item by matching ID
               services: config.services.map((s) => {
-                if (s.name === form.values.name) {
+                if (s.id === form.values.id) {
                   return {
                     ...form.values,
                   };
@@ -189,10 +189,9 @@ export function AddAppShelfItemForm(props: { setOpened: (b: boolean) => void } &
             value={form.values.name}
             onChange={(event) => {
               form.setFieldValue('name', event.currentTarget.value);
-              const match = MatchIcon(event.currentTarget.value, form);
+              MatchIcon(event.currentTarget.value, form);
-              if (match) {
+              MatchService(event.currentTarget.value, form);
-                form.setFieldValue('icon', match);
+              MatchPort(event.currentTarget.value, form);
-              }
             }}
             error={form.errors.name && 'Invalid icon url'}
           />
@@ -206,11 +205,11 @@ export function AddAppShelfItemForm(props: { setOpened: (b: boolean) => void } &
           <TextInput
             required
             label="Service url"
-            placeholder="http://localhost:8989"
+            placeholder="http://localhost:7575"
             {...form.getInputProps('url')}
           />
           <Select
-            label="Select the type of service (used for API calls)"
+            label="Service type"
             defaultValue="Other"
             placeholder="Pick one"
             required
@@ -218,18 +217,94 @@ export function AddAppShelfItemForm(props: { setOpened: (b: boolean) => void } &
             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 === 'Sonarr' ||
-            <TextInput
+            form.values.type === 'Radarr' ||
-              required
+            form.values.type === 'Lidarr' ||
-              label="API key"
+            form.values.type === 'Readarr') && (
-              placeholder="Your API key"
+            <>
-              value={form.values.apiKey}
+              <TextInput
-              onChange={(event) => {
+                required
-                form.setFieldValue('apiKey', event.currentTarget.value);
+                label="API key"
-              }}
+                placeholder="Your API key"
-              error={form.errors.apiKey && 'Invalid 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
+                required
+                label="Password"
+                placeholder="deluge"
+                value={form.values.password}
+                onChange={(event) => {
+                  form.setFieldValue('password', event.currentTarget.value);
+                }}
+                error={form.errors.password && 'Invalid password'}
+              />
+            </>
           )}
         </Group>
 

src/components/AppShelf/AppShelf.story.tsx

@@ -1,5 +1,6 @@
 import { SimpleGrid } from '@mantine/core';
-import AppShelf, { AppShelfItem } from './AppShelf';
+import AppShelf from './AppShelf';
+import { AppShelfItem } from './AppShelfItem';
 
 export default {
   title: 'Item Shelf',

src/components/AppShelf/AppShelf.tsx

@@ -1,89 +1,133 @@
 import React, { useState } from 'react';
-import { motion } from 'framer-motion';
+import { Grid, Group, Title } from '@mantine/core';
-import { Text, AspectRatio, Card, Image, useMantineTheme, Center, Grid } from '@mantine/core';
+import {
+  closestCenter,
+  DndContext,
+  DragOverlay,
+  MouseSensor,
+  useSensor,
+  useSensors,
+} from '@dnd-kit/core';
+import { arrayMove, SortableContext } from '@dnd-kit/sortable';
 import { useConfig } from '../../tools/state';
-import { serviceItem } from '../../tools/types';
+
-import AppShelfMenu from './AppShelfMenu';
+import { SortableAppShelfItem, AppShelfItem } from './AppShelfItem';
+import { ModuleWrapper } from '../modules/moduleWrapper';
+import { DownloadsModule } from '../modules';
 
 const AppShelf = (props: any) => {
-  const { config } = useConfig();
+  const [activeId, setActiveId] = useState(null);
+  const { config, setConfig } = useConfig();
+  const sensors = useSensors(
+    useSensor(MouseSensor, {
+      // Require the mouse to move by 10 pixels before activating
+      activationConstraint: {
+        delay: 250,
+        tolerance: 5,
+      },
+    })
+  );
 
+  function handleDragStart(event: any) {
+    const { active } = event;
+
+    setActiveId(active.id);
+  }
+
+  function handleDragEnd(event: any) {
+    const { active, over } = event;
+
+    if (active.id !== over.id) {
+      const newConfig = { ...config };
+      const activeIndex = newConfig.services.findIndex((e) => e.id === active.id);
+      const overIndex = newConfig.services.findIndex((e) => e.id === over.id);
+      newConfig.services = arrayMove(newConfig.services, activeIndex, overIndex);
+      setConfig(newConfig);
+    }
+
+    setActiveId(null);
+  }
+  // Extract all the categories from the services in config
+  const categoryList = config.services.reduce((acc, cur) => {
+    if (cur.category && !acc.includes(cur.category)) {
+      acc.push(cur.category);
+    }
+    return acc;
+  }, [] as string[]);
+
+  const item = (filter?: string) => {
+    // If filter is not set, return all the services without a category or a null category
+    let filtered = config.services;
+    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}
+        collisionDetection={closestCenter}
+        onDragStart={handleDragStart}
+        onDragEnd={handleDragEnd}
+      >
+        <SortableContext items={config.services}>
+          <Grid gutter="xl" align="center">
+            {filtered.map((service) => (
+              <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>
+            ))}
+          </Grid>
+        </SortableContext>
+        <DragOverlay
+          style={{
+            // Add a shadow to the drag overlay
+            boxShadow: '0 0 10px rgba(0, 0, 0, 0.5)',
+          }}
+        >
+          {activeId ? (
+            <AppShelfItem service={config.services.find((e) => e.id === activeId)} id={activeId} />
+          ) : null}
+        </DragOverlay>
+      </DndContext>
+    );
+  };
+
+  if (categoryList.length > 0) {
+    const noCategory = config.services.filter(
+      (e) => e.category === undefined || e.category === null
+    );
+
+    return (
+      // Return one item for each category
+      <Group grow direction="column">
+        {categoryList.map((category) => (
+          <>
+            <Title order={3} key={category}>
+              {category}
+            </Title>
+            {item(category)}
+          </>
+        ))}
+        {/* Return the item for all services without category */}
+        {noCategory && noCategory.length > 0 ? (
+          <>
+            <Title order={3}>Other</Title>
+            {item()}
+          </>
+        ) : null}
+        <ModuleWrapper mt="xl" module={DownloadsModule} />
+      </Group>
+    );
+  }
   return (
-    <Grid gutter="xl" align="center">
+    <Group grow direction="column">
-      {config.services.map((service) => (
+      {item()}
-        <Grid.Col span={6} xl={2} xs={4} sm={3} md={3}>
+      <ModuleWrapper mt="xl" module={DownloadsModule} />
-          <AppShelfItem key={service.name} service={service} />
+    </Group>
-        </Grid.Col>
-      ))}
-    </Grid>
   );
 };
 
-export function AppShelfItem(props: any) {
-  const { service }: { service: serviceItem } = props;
-  const [hovering, setHovering] = useState(false);
-  const theme = useMantineTheme();
-  return (
-    <motion.div
-      key={service.name}
-      onHoverStart={() => {
-        setHovering(true);
-      }}
-      onHoverEnd={() => {
-        setHovering(false);
-      }}
-    >
-      <Card withBorder radius="lg" shadow="md">
-        <Card.Section>
-          <Text mt="sm" align="center" lineClamp={1} weight={550}>
-            {service.name}
-          </Text>
-          <motion.div
-            style={{
-              position: 'absolute',
-              top: 5,
-              right: 5,
-              alignSelf: 'flex-end',
-            }}
-            animate={{
-              opacity: hovering ? 1 : 0,
-            }}
-          >
-            <AppShelfMenu service={service} />
-          </motion.div>
-        </Card.Section>
-        <Center>
-          <Card.Section>
-            <AspectRatio
-              ratio={3 / 5}
-              m="xl"
-              style={{
-                width: 150,
-                height: 90,
-              }}
-            >
-              <motion.i
-                whileHover={{
-                  cursor: 'pointer',
-                  scale: 1.1,
-                }}
-              >
-                <Image
-                  width={80}
-                  height={80}
-                  src={service.icon}
-                  fit="contain"
-                  onClick={() => {
-                    window.open(service.url);
-                  }}
-                />
-              </motion.i>
-            </AspectRatio>
-          </Card.Section>
-        </Center>
-      </Card>
-    </motion.div>
-  );
-}
-
 export default AppShelf;

src/components/AppShelf/AppShelfItem.tsx

@@ -0,0 +1,115 @@
+import { Text, Card, Anchor, AspectRatio, Image, Center, createStyles } from '@mantine/core';
+import { motion } from 'framer-motion';
+import { useState } from 'react';
+import { useSortable } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+import { serviceItem } from '../../tools/types';
+import PingComponent from '../modules/ping/PingModule';
+import AppShelfMenu from './AppShelfMenu';
+
+const useStyles = createStyles((theme) => ({
+  item: {
+    transition: 'box-shadow 150ms ease, transform 100ms ease',
+
+    '&:hover': {
+      boxShadow: `${theme.shadows.md} !important`,
+      transform: 'scale(1.05)',
+    },
+  },
+}));
+
+export function SortableAppShelfItem(props: any) {
+  const { attributes, listeners, setNodeRef, transform, transition } = useSortable({
+    id: props.id,
+  });
+
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+  };
+
+  return (
+    <div ref={setNodeRef} style={style} {...attributes} {...listeners}>
+      <AppShelfItem service={props.service} />
+    </div>
+  );
+}
+
+export function AppShelfItem(props: any) {
+  const { service }: { service: serviceItem } = props;
+  const [hovering, setHovering] = useState(false);
+  const { classes, theme } = useStyles();
+  return (
+    <motion.div
+      animate={{
+        scale: [0.9, 1.06, 1],
+        rotate: [0, 5, 0],
+      }}
+      transition={{ duration: 0.6, type: 'spring', damping: 10, mass: 0.75, stiffness: 100 }}
+      key={service.name}
+      onHoverStart={() => {
+        setHovering(true);
+      }}
+      onHoverEnd={() => {
+        setHovering(false);
+      }}
+    >
+      <Card withBorder radius="lg" shadow="md" className={classes.item}>
+        <Card.Section>
+          <Anchor
+            target="_blank"
+            href={service.url}
+            style={{ color: 'inherit', fontStyle: 'inherit', fontSize: 'inherit' }}
+          >
+            <Text mt="sm" align="center" lineClamp={1} weight={550}>
+              {service.name}
+            </Text>
+          </Anchor>
+          <motion.div
+            style={{
+              position: 'absolute',
+              top: 15,
+              right: 15,
+              alignSelf: 'flex-end',
+            }}
+            animate={{
+              opacity: hovering ? 1 : 0,
+            }}
+          >
+            <AppShelfMenu service={service} />
+          </motion.div>
+        </Card.Section>
+        <Center>
+          <Card.Section>
+            <AspectRatio
+              ratio={3 / 5}
+              m="xl"
+              style={{
+                width: 150,
+                height: 90,
+              }}
+            >
+              <motion.i
+                whileHover={{
+                  scale: 1.1,
+                }}
+              >
+                <Image
+                  styles={{ root: { cursor: 'pointer' } }}
+                  width={80}
+                  height={80}
+                  src={service.icon}
+                  fit="contain"
+                  onClick={() => {
+                    window.open(service.url);
+                  }}
+                />
+              </motion.i>
+            </AspectRatio>
+            <PingComponent url={service.url} />
+          </Card.Section>
+        </Center>
+      </Card>
+    </motion.div>
+  );
+}

src/components/AppShelf/AppShelfItemWrapper.tsx

@@ -1,17 +0,0 @@
-import { useMantineTheme, Card } from '@mantine/core';
-
-export function AppShelfItemWrapper(props: any) {
-  const { children, hovering } = props;
-  const theme = useMantineTheme();
-  return (
-    <Card
-      style={{
-        boxShadow: hovering ? '0px 0px 3px rgba(0, 0, 0, 0.5)' : '0px 0px 1px rgba(0, 0, 0, 0.5)',
-        backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[6] : theme.colors.gray[1],
-      }}
-      radius="md"
-    >
-      {children}
-    </Card>
-  );
-}

src/components/AppShelf/AppShelfMenu.tsx

@@ -1,19 +1,21 @@
-import { Menu, Modal, Text } from '@mantine/core';
+import { Menu, Modal, Text, useMantineTheme } from '@mantine/core';
 import { showNotification } from '@mantine/notifications';
 import { useState } from 'react';
-import { Check, Edit, Trash } from 'tabler-icons-react';
+import { IconCheck as Check, IconEdit as Edit, IconTrash as Trash } from '@tabler/icons';
 import { useConfig } from '../../tools/state';
+import { serviceItem } from '../../tools/types';
 import { AddAppShelfItemForm } from './AddAppShelfItem';
 
 export default function AppShelfMenu(props: any) {
-  const { service } = props;
+  const { service }: { service: serviceItem } = props;
   const { config, setConfig } = useConfig();
+  const theme = useMantineTheme();
   const [opened, setOpened] = useState(false);
   return (
     <>
       <Modal
         size="xl"
-        radius="lg"
+        radius="md"
         opened={props.opened || opened}
         onClose={() => setOpened(false)}
         title="Modify a service"
@@ -21,18 +23,32 @@ export default function AppShelfMenu(props: any) {
         <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}
           message="Save service"
         />
       </Modal>
-      <Menu position="right">
+      <Menu
+        position="right"
+        radius="md"
+        shadow="xl"
+        styles={{
+          body: {
+            // Add shadow and elevation to the body
+            boxShadow: '0 0 14px 14px rgba(0, 0, 0, 0.05)',
+          },
+        }}
+      >
         <Menu.Label>Settings</Menu.Label>
         <Menu.Item
           color="primary"
-          icon={<Edit size={14} />}
+          icon={<Edit />}
           // TODO: #2 Add the ability to edit the service.
           onClick={() => setOpened(true)}
         >
@@ -44,13 +60,13 @@ export default function AppShelfMenu(props: any) {
           onClick={(e: any) => {
             setConfig({
               ...config,
-              services: config.services.filter((s) => s.name !== service.name),
+              services: config.services.filter((s) => s.id !== service.id),
             });
             showNotification({
               autoClose: 5000,
               title: (
                 <Text>
-                  Service <b>{service.name}</b> removed successfully
+                  Service <b>{service.name}</b> removed successfully!
                 </Text>
               ),
               color: 'green',
@@ -58,7 +74,7 @@ export default function AppShelfMenu(props: any) {
               message: undefined,
             });
           }}
-          icon={<Trash size={14} />}
+          icon={<Trash />}
         >
           Delete
         </Menu.Item>

src/components/AppShelf/index.ts

@@ -0,0 +1,2 @@
+export { default as AppShelf } from './AppShelf';
+export * from './AppShelfItem';

src/components/ColorSchemeToggle/ColorSchemeSwitch.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { createStyles, Switch, Group, useMantineColorScheme, Kbd } from '@mantine/core';
-import { Sun, MoonStars } from 'tabler-icons-react';
+import { IconSun as Sun, IconMoonStars as MoonStars } from '@tabler/icons';
 
 const useStyles = createStyles((theme) => ({
   root: {

src/components/ColorSchemeToggle/ColorSchemeToggle.tsx

@@ -1,5 +1,5 @@
 import { Box, useMantineColorScheme } from '@mantine/core';
-import { Sun, MoonStars } from 'tabler-icons-react';
+import { IconSun as Sun, IconMoonStars as MoonStars } from '@tabler/icons';
 import { motion } from 'framer-motion';
 
 export function ColorSchemeToggle() {

src/components/Config/LoadConfig.tsx

@@ -1,5 +1,11 @@
 import { Group, Text, useMantineTheme, MantineTheme } from '@mantine/core';
-import { Upload, Photo, X, Icon as TablerIcon, Check } from 'tabler-icons-react';
+import {
+  IconUpload as Upload,
+  IconPhoto as Photo,
+  IconX as X,
+  IconCheck as Check,
+  TablerIcon,
+} from '@tabler/icons';
 import { DropzoneStatus, FullScreenDropzone } from '@mantine/dropzone';
 import { showNotification } from '@mantine/notifications';
 import { useRef } from 'react';
@@ -7,6 +13,7 @@ import { useRouter } from 'next/router';
 import { setCookies } from 'cookies-next';
 import { useConfig } from '../../tools/state';
 import { Config } from '../../tools/types';
+import { migrateToIdConfig } from '../../tools/migrate';
 
 function getIconColor(status: DropzoneStatus, theme: MantineTheme) {
   return status.accepted
@@ -84,7 +91,8 @@ export default function LoadConfigComponent(props: any) {
             message: undefined,
           });
           setCookies('config-name', newConfig.name, { maxAge: 60 * 60 * 24 * 30 });
-          setConfig(newConfig);
+          const migratedConfig = migrateToIdConfig(newConfig);
+          setConfig(migratedConfig);
         });
       }}
       accept={['application/json']}

src/components/Config/SaveConfig.tsx

@@ -1,18 +1,101 @@
-import { Button } from '@mantine/core';
+import { Button, Group, Modal, TextInput } from '@mantine/core';
+import { useForm } from '@mantine/form';
+import { showNotification } from '@mantine/notifications';
+import axios from 'axios';
 import fileDownload from 'js-file-download';
-import { Download } from 'tabler-icons-react';
+import { useState } from 'react';
+import {
+  IconCheck as Check,
+  IconDownload as Download,
+  IconPlus as Plus,
+  IconTrash as Trash,
+  IconX as X,
+} from '@tabler/icons';
 import { useConfig } from '../../tools/state';
 
 export default function SaveConfigComponent(props: any) {
-  const { config } = useConfig();
+  const [opened, setOpened] = useState(false);
+  const { config, setConfig } = useConfig();
+  const form = useForm({
+    initialValues: {
+      configName: config.name,
+    },
+  });
   function onClick(e: any) {
     if (config) {
       fileDownload(JSON.stringify(config, null, '\t'), `${config.name}.json`);
     }
   }
   return (
-    <Button leftIcon={<Download />} variant="outline" onClick={onClick}>
+    <Group>
-      Download your config
+      <Modal
-    </Button>
+        radius="md"
+        opened={opened}
+        onClose={() => setOpened(false)}
+        title="Choose the name of your new config"
+      >
+        <form
+          onSubmit={form.onSubmit((values) => {
+            setConfig({ ...config, name: values.configName });
+            setOpened(false);
+            showNotification({
+              title: 'Config saved',
+              icon: <Check />,
+              color: 'green',
+              autoClose: 1500,
+              radius: 'md',
+              message: `Config saved as ${values.configName}`,
+            });
+          })}
+        >
+          <TextInput
+            required
+            label="Config name"
+            placeholder="Your new config name"
+            {...form.getInputProps('configName')}
+          />
+          <Group position="right" mt="md">
+            <Button type="submit">Confirm</Button>
+          </Group>
+        </form>
+      </Modal>
+      <Button leftIcon={<Download />} variant="outline" onClick={onClick}>
+        Download config
+      </Button>
+      <Button
+        leftIcon={<Trash />}
+        variant="outline"
+        onClick={() => {
+          axios
+            .delete(`/api/configs/${config.name}`)
+            .then(() => {
+              showNotification({
+                title: 'Config deleted',
+                icon: <Check />,
+                color: 'green',
+                autoClose: 1500,
+                radius: 'md',
+                message: 'Config deleted',
+              });
+            })
+            .catch(() => {
+              showNotification({
+                title: 'Config delete failed',
+                icon: <X />,
+                color: 'red',
+                autoClose: 1500,
+                radius: 'md',
+                message: 'Config delete failed',
+              });
+            });
+          setConfig({ ...config, name: 'default' });
+        }}
+      >
+        Delete config
+      </Button>
+      <Button leftIcon={<Plus />} variant="outline" onClick={() => setOpened(true)}>
+        Save a copy
+      </Button>
+    </Group>
   );
 }

src/components/Config/SelectConfig.tsx

@@ -1,16 +0,0 @@
-import { Select } from '@mantine/core';
-import { useState } from 'react';
-
-export default function SelectConfig(props: any) {
-  const [value, setValue] = useState<string | null>('');
-  return (
-    <Select
-      value={value}
-      onChange={setValue}
-      data={[
-        { value: 'default', label: 'Default' },
-        { value: 'yourmom', label: 'Your mom' },
-      ]}
-    />
-  );
-}

src/components/Settings/ModuleEnabler.tsx

@@ -5,34 +5,25 @@ import { useConfig } from '../../tools/state';
 export default function ModuleEnabler(props: any) {
   const { config, setConfig } = useConfig();
   const modules = Object.values(Modules).map((module) => module);
-  const enabledModules = config.settings.enabledModules ?? [];
-  modules.filter((module) => enabledModules.includes(module.title));
   return (
     <Group direction="column">
       {modules.map((module) => (
         <Switch
           key={module.title}
           size="md"
-          checked={enabledModules.includes(module.title)}
+          checked={config.modules?.[module.title]?.enabled ?? false}
-          label={`Enable ${module.title} module`}
+          label={`Enable ${module.title}`}
           onChange={(e) => {
-            if (e.currentTarget.checked) {
+            setConfig({
-              setConfig({
+              ...config,
-                ...config,
+              modules: {
-                settings: {
+                ...config.modules,
-                  ...config.settings,
+                [module.title]: {
-                  enabledModules: [...enabledModules, module.title],
+                  ...config.modules?.[module.title],
+                  enabled: e.currentTarget.checked,
                 },
-              });
+              },
-            } else {
+            });
-              setConfig({
-                ...config,
-                settings: {
-                  ...config.settings,
-                  enabledModules: enabledModules.filter((m) => m !== module.title),
-                },
-              });
-            }
           }}
         />
       ))}

src/components/Settings/SettingsMenu.tsx

@@ -1,20 +1,18 @@
 import {
   ActionIcon,
   Group,
-  Modal,
-  Switch,
   Title,
   Text,
   Tooltip,
   SegmentedControl,
-  Indicator,
-  Alert,
   TextInput,
+  Drawer,
+  Anchor,
 } from '@mantine/core';
-import { useColorScheme } from '@mantine/hooks';
+import { useColorScheme, useHotkeys } from '@mantine/hooks';
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
-import { AlertCircle, Settings as SettingsIcon } from 'tabler-icons-react';
+import { IconBrandGithub as BrandGithub, IconSettings } from '@tabler/icons';
-import { CURRENT_VERSION, REPO_URL } from '../../../data/constants';
+import { CURRENT_VERSION } from '../../../data/constants';
 import { useConfig } from '../../tools/state';
 import { ColorSchemeSwitch } from '../ColorSchemeToggle/ColorSchemeSwitch';
 import ConfigChanger from '../Config/ConfigChanger';
@@ -40,14 +38,6 @@ function SettingsMenu(props: any) {
 
   return (
     <Group direction="column" grow>
-      <Alert
-        icon={<AlertCircle size={16} />}
-        title="Update available"
-        radius="lg"
-        hidden={current === latest}
-      >
-        Version {latest} is available. Current: {current}
-      </Alert>
       <Group grow direction="column" spacing={0}>
         <Text>Search engine</Text>
         <SegmentedControl
@@ -90,22 +80,6 @@ function SettingsMenu(props: any) {
           />
         )}
       </Group>
-      <Group direction="column">
-        <Switch
-          size="md"
-          onChange={(e) =>
-            setConfig({
-              ...config,
-              settings: {
-                ...config.settings,
-                searchBar: e.currentTarget.checked,
-              },
-            })
-          }
-          checked={config.settings.searchBar}
-          label="Enable search bar"
-        />
-      </Group>
       <ModuleEnabler />
       <ColorSchemeSwitch />
       <ConfigChanger />
@@ -115,41 +89,62 @@ function SettingsMenu(props: any) {
           alignSelf: 'center',
           fontSize: '0.75rem',
           textAlign: 'center',
-          color: '#a0aec0',
+          color: 'gray',
         }}
       >
-        tip: You can upload your config file by dragging and dropping it onto the page
+        Tip: You can upload your config file by dragging and dropping it onto the page!
       </Text>
+      <Group position="center" direction="row" mr="xs">
+        <Group spacing={0}>
+          <ActionIcon<'a'> component="a" href="https://github.com/ajnart/homarr" size="lg">
+            <BrandGithub size={18} />
+          </ActionIcon>
+          <Text
+            style={{
+              position: 'relative',
+              fontSize: '0.90rem',
+              color: 'gray',
+            }}
+          >
+            {CURRENT_VERSION}
+          </Text>
+        </Group>
+        <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' }}
+          >
+            ajnart
+          </Anchor>
+        </Text>
+      </Group>
     </Group>
   );
 }
 
 export function SettingsMenuButton(props: any) {
-  const [update, setUpdate] = useState(false);
+  useHotkeys([['ctrl+L', () => setOpened(!opened)]]);
+
   const [opened, setOpened] = useState(false);
-  const [latestVersion, setLatestVersion] = useState(CURRENT_VERSION);
-  useEffect(() => {
-    // Fetch Data here when component first mounted
-    fetch(`https://api.github.com/repos/${REPO_URL}/releases/latest`).then((res) => {
-      res.json().then((data) => {
-        setLatestVersion(data.tag_name);
-        if (data.tag_name !== CURRENT_VERSION) {
-          setUpdate(true);
-        }
-      });
-    });
-  }, []);
   return (
     <>
-      <Modal
+      <Drawer
-        size="xl"
+        size="auto"
-        radius="md"
+        padding="xl"
+        position="right"
         title={<Title order={3}>Settings</Title>}
         opened={props.opened || opened}
         onClose={() => setOpened(false)}
       >
-        <SettingsMenu current={CURRENT_VERSION} latest={latestVersion} />
+        <SettingsMenu />
-      </Modal>
+      </Drawer>
       <ActionIcon
         variant="default"
         radius="md"
@@ -159,14 +154,7 @@ export function SettingsMenuButton(props: any) {
         onClick={() => setOpened(true)}
       >
         <Tooltip label="Settings">
-          <Indicator
+          <IconSettings />
-            size={12}
-            disabled={CURRENT_VERSION === latestVersion}
-            offset={-3}
-            position="top-end"
-          >
-            <SettingsIcon />
-          </Indicator>
         </Tooltip>
       </ActionIcon>
     </>

src/components/layout/Aside.tsx

@@ -1,11 +1,17 @@
 import { Aside as MantineAside, Group } from '@mantine/core';
-import { DateModule } from '../modules';
+import {
-import { CalendarModule } from '../modules/calendar/CalendarModule';
+  WeatherModule,
-import ModuleWrapper from '../modules/moduleWrapper';
+  DateModule,
+  CalendarModule,
+  TotalDownloadsModule,
+  SystemModule,
+} from '../modules';
+import { ModuleWrapper } from '../modules/moduleWrapper';
 
 export default function Aside(props: any) {
   return (
     <MantineAside
+      pr="md"
       hiddenBreakpoint="md"
       hidden
       style={{
@@ -15,9 +21,12 @@ export default function Aside(props: any) {
         base: 'auto',
       }}
     >
-      <Group mt="sm" grow direction="column">
+      <Group my="sm" grow direction="column" style={{ width: 300 }}>
         <ModuleWrapper module={CalendarModule} />
+        <ModuleWrapper module={TotalDownloadsModule} />
+        <ModuleWrapper module={WeatherModule} />
         <ModuleWrapper module={DateModule} />
+        <ModuleWrapper module={SystemModule} />
       </Group>
     </MantineAside>
   );

src/components/layout/Footer.tsx

@@ -1,13 +1,8 @@
-import React from 'react';
+import React, { useEffect } from 'react';
-import {
+import { createStyles, Footer as FooterComponent } from '@mantine/core';
-  createStyles,
+import { showNotification } from '@mantine/notifications';
-  Anchor,
+import { CURRENT_VERSION, REPO_URL } from '../../../data/constants';
-  Text,
+import { IconAlertCircle as AlertCircle } from '@tabler/icons';
-  Group,
-  ActionIcon,
-  Footer as FooterComponent,
-} from '@mantine/core';
-import { BrandGithub } from 'tabler-icons-react';
 
 const useStyles = createStyles((theme) => ({
   footer: {
@@ -40,42 +35,40 @@ interface FooterCenteredProps {
 }
 
 export function Footer({ links }: FooterCenteredProps) {
-  const { classes } = useStyles();
+  useEffect(() => {
-  const items = links.map((link) => (
+    // Fetch Data here when component first mounted
-    <Anchor<'a'>
+    fetch(`https://api.github.com/repos/${REPO_URL}/releases/latest`).then((res) => {
-      color="dimmed"
+      res.json().then((data) => {
-      key={link.label}
+        if (data.tag_name > CURRENT_VERSION) {
-      href={link.link}
+          showNotification({
-      sx={{ lineHeight: 1 }}
+            color: 'yellow',
-      onClick={(event) => event.preventDefault()}
+            autoClose: false,
-      size="sm"
+            title: 'New version available',
-    >
+            icon: <AlertCircle />,
-      {link.label}
+            message: `Version ${data.tag_name} is available, update now!`,
-    </Anchor>
+          });
-  ));
+        } else if (data.tag_name < CURRENT_VERSION) {
+          showNotification({
+            color: 'orange',
+            autoClose: 5000,
+            title: 'You are using a development version',
+            icon: <AlertCircle />,
+            message: 'This version of Homarr is still in development! Bugs are expected 🐛',
+          });
+        }
+      });
+    });
+  }, []);
 
-  return ( 
+  return (
-    <FooterComponent p={5} height="auto" style={{ border: 'none', position: 'fixed', bottom: 0, right: 0 }}>
+    <FooterComponent
-      <Group position="right" mr="xs" mb="xs">
+      height="auto"
-        <ActionIcon<'a'> component="a" href="https://github.com/ajnart/homarr" size="lg">
+      style={{
-          <BrandGithub size={18} />
+        background: 'none',
-        </ActionIcon>
+        border: 'none',
-        <Text
+        clear: 'both',
-          style={{
+      }}
-            fontSize: '0.90rem',
+      children={undefined}
-            textAlign: 'center',
+    />
-            color: '#a0aec0',
-          }}
-        >
-          Made with ❤️ by @
-          <Anchor
-            href="https://github.com/ajnart"
-            style={{ color: 'inherit', fontStyle: 'inherit', fontSize: 'inherit' }}
-          >
-            ajnart
-          </Anchor>
-        </Text>
-      </Group>
-    </FooterComponent>
   );
 }

src/components/layout/Header.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { createStyles, Header as Head, Group, Box } from '@mantine/core';
 import { Logo } from './Logo';
-import SearchBar from '../SearchBar/SearchBar';
+import SearchBar from '../modules/search/SearchModule';
 import { AddItemShelfButton } from '../AppShelf/AddAppShelfItem';
 import { SettingsMenuButton } from '../Settings/SettingsMenu';
 

src/components/layout/Layout.tsx

@@ -10,11 +10,7 @@ const useStyles = createStyles((theme) => ({
 export default function Layout({ children, style }: any) {
   const { classes, cx } = useStyles();
   return (
-    <AppShell
+    <AppShell aside={<Aside />} header={<Header />} footer={<Footer links={[]} />}>
-      aside={<Aside />}
-      header={<Header />}
-      footer={<Footer links={[]} />}
-    >
       <main
         className={cx(classes.main)}
         style={{

src/components/layout/Logo.tsx

@@ -1,40 +1,33 @@
 import { Group, Image, Text } from '@mantine/core';
+import { NextLink } from '@mantine/next';
 import * as React from 'react';
-import { CURRENT_VERSION } from '../../../data/constants';
 
 export function Logo({ style }: any) {
   return (
-    <Group>
+    <Group spacing="xs">
       <Image
         width={50}
         src="/imgs/logo.png"
         style={{
           position: 'relative',
-          left: 15,
         }}
       />
-      <Text
+      <NextLink
-        sx={style}
+        href="/"
-        weight="bold"
-        variant="gradient"
-        gradient={{ from: 'red', to: 'orange', deg: 145 }}
-      >
-        Homarr
-      </Text>
-      <Text
         style={{
+          textDecoration: 'none',
           position: 'relative',
-          left: -14,
-          bottom: -2,
-          color: 'gray',
-          fontStyle: 'inherit',
-          fontSize: 'inherit',
-          alignSelf: 'center',
-          alignContent: 'center',
         }}
       >
-        {CURRENT_VERSION}
+        <Text
-      </Text>
+          sx={style}
+          weight="bold"
+          variant="gradient"
+          gradient={{ from: 'red', to: 'orange', deg: 145 }}
+        >
+          Homarr
+        </Text>
+      </NextLink>
     </Group>
   );
 }

src/components/layout/Navbar.tsx

@@ -1,6 +1,6 @@
 import { Group, Navbar as MantineNavbar } from '@mantine/core';
-import { DateModule } from '../modules/date/DateModule';
+import { WeatherModule, DateModule } from '../modules';
-import ModuleWrapper from '../modules/moduleWrapper';
+import { ModuleWrapper } from '../modules/moduleWrapper';
 
 export default function Navbar() {
   return (
@@ -16,6 +16,8 @@ export default function Navbar() {
     >
       <Group mt="sm" direction="column" align="center">
         <ModuleWrapper module={DateModule} />
+        <ModuleWrapper module={WeatherModule} />
+        <ModuleWrapper module={WeatherModule} />
       </Group>
     </MantineNavbar>
   );

src/components/modules/calendar/CalendarModule.tsx

@@ -1,12 +1,18 @@
 /* eslint-disable react/no-children-prop */
-import { Popover, Box, ScrollArea, Divider, Indicator } from '@mantine/core';
+import { Box, Divider, Indicator, Popover, ScrollArea } from '@mantine/core';
 import React, { useEffect, useState } from 'react';
 import { Calendar } from '@mantine/dates';
-import { showNotification } from '@mantine/notifications';
+import { IconCalendar as CalendarIcon } from '@tabler/icons';
-import { Calendar as CalendarIcon, Check } from 'tabler-icons-react';
+import axios from 'axios';
-import { RadarrMediaDisplay, SonarrMediaDisplay } from './MediaDisplay';
 import { useConfig } from '../../../tools/state';
 import { IModule } from '../modules';
+import {
+  SonarrMediaDisplay,
+  RadarrMediaDisplay,
+  LidarrMediaDisplay,
+  ReadarrMediaDisplay,
+} from '../common';
+import { serviceItem } from '../../../tools/types';
 
 export const CalendarModule: IModule = {
   title: 'Calendar',
@@ -19,59 +25,31 @@ export const CalendarModule: IModule = {
 export default function CalendarComponent(props: any) {
   const { config } = useConfig();
   const [sonarrMedias, setSonarrMedias] = useState([] as any);
+  const [lidarrMedias, setLidarrMedias] = useState([] as any);
   const [radarrMedias, setRadarrMedias] = useState([] as any);
+  const [readarrMedias, setReadarrMedias] = useState([] as any);
+  const sonarrService = config.services.filter((service) => service.type === 'Sonarr').at(0);
+  const radarrService = config.services.filter((service) => service.type === 'Radarr').at(0);
+  const lidarrService = config.services.filter((service) => service.type === 'Lidarr').at(0);
+  const readarrService = config.services.filter((service) => service.type === 'Readarr').at(0);
+
+  function getMedias(service: serviceItem | undefined, type: string) {
+    if (!service || !service.apiKey) {
+      return Promise.resolve({ data: [] });
+    }
+    return axios.post(`/api/modules/calendar?type=${type}`, { ...service });
+  }
 
   useEffect(() => {
     // Filter only sonarr and radarr services
-    const filtered = config.services.filter(
-      (service) => service.type === 'Sonarr' || service.type === 'Radarr'
-    );
 
     // Get the url and apiKey for all Sonarr and Radarr services
-    const sonarrService = filtered.filter((service) => service.type === 'Sonarr').at(0);
+    getMedias(sonarrService, 'sonarr').then((res) => setSonarrMedias(res.data));
-    const radarrService = filtered.filter((service) => service.type === 'Radarr').at(0);
+    getMedias(radarrService, 'radarr').then((res) => setRadarrMedias(res.data));
-    const nextMonth = new Date(new Date().setMonth(new Date().getMonth() + 2)).toISOString();
+    getMedias(lidarrService, 'lidarr').then((res) => setLidarrMedias(res.data));
-    if (sonarrService && sonarrService.apiKey) {
+    getMedias(readarrService, 'readarr').then((res) => setReadarrMedias(res.data));
-      fetch(
-        `${sonarrService?.url}api/calendar?apikey=${sonarrService?.apiKey}&end=${nextMonth}`
-      ).then((response) => {
-        response.ok &&
-          response.json().then((data) => {
-            setSonarrMedias(data);
-            showNotification({
-              title: 'Sonarr',
-              icon: <Check />,
-              color: 'green',
-              autoClose: 1500,
-              radius: 'md',
-              message: `Loaded ${data.length} releases`,
-            });
-          });
-      });
-    }
-    if (radarrService && radarrService.apiKey) {
-      fetch(
-        `${radarrService?.url}api/v3/calendar?apikey=${radarrService?.apiKey}&end=${nextMonth}`
-      ).then((response) => {
-        response.ok &&
-          response.json().then((data) => {
-            setRadarrMedias(data);
-            showNotification({
-              title: 'Radarr',
-              icon: <Check />,
-              color: 'green',
-              autoClose: 1500,
-              radius: 'md',
-              message: `Loaded ${data.length} releases`,
-            });
-          });
-      });
-    }
   }, [config.services]);
 
-  if (sonarrMedias === undefined && radarrMedias === undefined) {
-    return <Calendar />;
-  }
   return (
     <Calendar
       onChange={(day: any) => {}}
@@ -80,6 +58,8 @@ export default function CalendarComponent(props: any) {
           renderdate={renderdate}
           sonarrmedias={sonarrMedias}
           radarrmedias={radarrMedias}
+          lidarrmedias={lidarrMedias}
+          readarrmedias={readarrMedias}
         />
       )}
     />
@@ -91,11 +71,24 @@ function DayComponent(props: any) {
     renderdate,
     sonarrmedias,
     radarrmedias,
-  }: { renderdate: Date; sonarrmedias: []; radarrmedias: [] } = props;
+    lidarrmedias,
+    readarrmedias,
+  }: { renderdate: Date; sonarrmedias: []; radarrmedias: []; lidarrmedias: []; readarrmedias: [] } =
+    props;
   const [opened, setOpened] = useState(false);
 
   const day = renderdate.getDate();
-  // Itterate over the medias and filter the ones that are on the same day
+
+  const readarrFiltered = readarrmedias.filter((media: any) => {
+    const date = new Date(media.releaseDate);
+    return date.getDate() === day && date.getMonth() === renderdate.getMonth();
+  });
+
+  const lidarrFiltered = lidarrmedias.filter((media: any) => {
+    const date = new Date(media.releaseDate);
+    // Return true if the date is renerdate without counting hours and minutes
+    return date.getDate() === day && date.getMonth() === renderdate.getMonth();
+  });
   const sonarrFiltered = sonarrmedias.filter((media: any) => {
     const date = new Date(media.airDate);
     // Return true if the date is renerdate without counting hours and minutes
@@ -106,7 +99,12 @@ function DayComponent(props: any) {
     // Return true if the date is renerdate without counting hours and minutes
     return date.getDate() === day && date.getMonth() === renderdate.getMonth();
   });
-  if (sonarrFiltered.length === 0 && radarrFiltered.length === 0) {
+  if (
+    sonarrFiltered.length === 0 &&
+    radarrFiltered.length === 0 &&
+    lidarrFiltered.length === 0 &&
+    readarrFiltered.length === 0
+  ) {
     return <div>{day}</div>;
   }
 
@@ -116,18 +114,72 @@ function DayComponent(props: any) {
         setOpened(true);
       }}
     >
-      {radarrFiltered.length > 0 && <Indicator size={7} color="yellow" children={null} />}
+      {readarrFiltered.length > 0 && (
-      {sonarrFiltered.length > 0 && <Indicator size={7} offset={8} color="blue" children={null} />}
+        <Indicator
+          size={10}
+          withBorder
+          style={{
+            position: 'absolute',
+            bottom: 8,
+            left: 8,
+          }}
+          color="red"
+          children={null}
+        />
+      )}
+      {radarrFiltered.length > 0 && (
+        <Indicator
+          size={10}
+          withBorder
+          style={{
+            position: 'absolute',
+            top: 8,
+            left: 8,
+          }}
+          color="yellow"
+          children={null}
+        />
+      )}
+      {sonarrFiltered.length > 0 && (
+        <Indicator
+          size={10}
+          withBorder
+          style={{
+            position: 'absolute',
+            top: 8,
+            right: 8,
+          }}
+          color="blue"
+          children={null}
+        />
+      )}
+      {lidarrFiltered.length > 0 && (
+        <Indicator
+          size={10}
+          withBorder
+          style={{
+            position: 'absolute',
+            bottom: 8,
+            right: 8,
+          }}
+          color="green"
+          children={undefined}
+        />
+      )}
       <Popover
         position="left"
         radius="lg"
         shadow="xl"
         transition="pop"
+        styles={{
+          body: {
+            boxShadow: '0 0 14px 14px rgba(0, 0, 0, 0.1), 0 14px 11px rgba(0, 0, 0, 0.1)',
+          },
+        }}
         width={700}
         onClose={() => setOpened(false)}
         opened={opened}
-        // TODO: Fix this !! WTF ?
+        target={day}
-        target={`‏ ${day}`}
       >
         <ScrollArea style={{ height: 400 }}>
           {sonarrFiltered.map((media: any, index: number) => (
@@ -145,6 +197,18 @@ function DayComponent(props: any) {
               {index < radarrFiltered.length - 1 && <Divider variant="dashed" my="xl" />}
             </React.Fragment>
           ))}
+          {lidarrFiltered.map((media: any, index: number) => (
+            <React.Fragment key={index}>
+              <LidarrMediaDisplay media={media} />
+              {index < lidarrFiltered.length - 1 && <Divider variant="dashed" my="xl" />}
+            </React.Fragment>
+          ))}
+          {readarrFiltered.map((media: any, index: number) => (
+            <React.Fragment key={index}>
+              <ReadarrMediaDisplay media={media} />
+              {index < readarrFiltered.length - 1 && <Divider variant="dashed" my="xl" />}
+            </React.Fragment>
+          ))}
         </ScrollArea>
       </Popover>
     </Box>

src/components/modules/calendar/MediaDisplay.tsx

@@ -1,100 +0,0 @@
-import { Stack, Image, Group, Title, Badge, Text, ActionIcon, Anchor } from '@mantine/core';
-import { Link } from 'tabler-icons-react';
-
-export interface IMedia {
-  overview: string;
-  imdbId: any;
-  title: string;
-  poster: string;
-  genres: string[];
-  seasonNumber?: number;
-  episodeNumber?: number;
-}
-
-function MediaDisplay(props: { media: IMedia }) {
-  const { media }: { media: IMedia } = props;
-  return (
-    <Group noWrap align="self-start" mr={15}>
-      <Image
-        radius="md"
-        fit="cover"
-        src={media.poster}
-        alt={media.title}
-        width={300}
-        height={400}
-      />
-      <Stack
-        justify="space-between"
-        sx={(theme) => ({
-          height: 400,
-        })}
-      >
-        <Group direction="column">
-          <Group>
-            <Title order={3}>{media.title}</Title>
-            <Anchor href={`https://www.imdb.com/title/${media.imdbId}`} target="_blank">
-              <ActionIcon>
-                <Link />
-              </ActionIcon>
-            </Anchor>
-          </Group>
-          {media.episodeNumber && media.seasonNumber && (
-            <Text
-              style={{
-                textAlign: 'center',
-                color: '#a0aec0',
-              }}
-            >
-              Season {media.seasonNumber} episode {media.episodeNumber}
-            </Text>
-          )}
-          <Text align="justify">{media.overview}</Text>
-        </Group>
-        {/*Add the genres at the bottom of the poster*/}
-        <Group>
-          {media.genres.map((genre: string, i: number) => (
-            <Badge key={i}>{genre}</Badge>
-          ))}
-        </Group>
-      </Stack>
-    </Group>
-  );
-}
-
-export function RadarrMediaDisplay(props: any) {
-  const { media }: { media: any } = props;
-  // Find a poster CoverType
-  const poster = media.images.find((image: any) => image.coverType === 'poster');
-  // Return a movie poster containting the title and the description
-  return (
-    <MediaDisplay
-      media={{
-        imdbId: media.imdbId,
-        title: media.title,
-        overview: media.overview,
-        poster: poster.url,
-        genres: media.genres,
-      }}
-    />
-  );
-}
-
-export function SonarrMediaDisplay(props: any) {
-  const { media }: { media: any } = props;
-  // Find a poster CoverType
-  const poster = media.series.images.find((image: any) => image.coverType === 'poster');
-  // Return a movie poster containting the title and the description
-  return (
-    <MediaDisplay
-      media={{
-        imdbId: media.series.imdbId,
-        title: media.series.title,
-        overview: media.series.overview,
-        poster: poster.url,
-        genres: media.series.genres,
-        seasonNumber: media.seasonNumber,
-        episodeNumber: media.episodeNumber,
-      }}
-    />
-  );
-}

src/components/modules/common/MediaDisplay.tsx

@@ -0,0 +1,172 @@
+import { Image, Group, Title, Badge, Text, ActionIcon, Anchor, ScrollArea } from '@mantine/core';
+import { IconLink as Link } from '@tabler/icons';
+import { useConfig } from '../../../tools/state';
+import { serviceItem } from '../../../tools/types';
+
+export interface IMedia {
+  overview: string;
+  imdbId?: any;
+  artist?: string;
+  title: string;
+  poster?: string;
+  genres: string[];
+  seasonNumber?: number;
+  episodeNumber?: number;
+}
+
+export function MediaDisplay(props: { media: IMedia }) {
+  const { media }: { media: IMedia } = props;
+  return (
+    <Group position="apart">
+      <Text>
+        {media.poster && (
+          <Image
+            style={{
+              float: 'right',
+            }}
+            radius="md"
+            fit="cover"
+            src={media.poster}
+            alt={media.title}
+            width={250}
+            height={400}
+          />
+        )}
+        <Group direction="column">
+          <Group noWrap mr="sm" style={{ minWidth: 400 }}>
+            <Title order={3}>{media.title}</Title>
+            {media.imdbId && (
+              <Anchor href={`https://www.imdb.com/title/${media.imdbId}`} target="_blank">
+                <ActionIcon>
+                  <Link />
+                </ActionIcon>
+              </Anchor>
+            )}
+          </Group>
+          {media.artist && (
+            <Text
+              style={{
+                textAlign: 'center',
+                color: 'gray',
+              }}
+            >
+              New release from {media.artist}
+            </Text>
+          )}
+          {media.episodeNumber && media.seasonNumber && (
+            <Text
+              style={{
+                textAlign: 'center',
+                color: 'gray',
+              }}
+            >
+              Season {media.seasonNumber} episode {media.episodeNumber}
+            </Text>
+          )}
+        </Group>
+        <Group direction="column" position="apart">
+          <ScrollArea style={{ height: 250 }}>{media.overview}</ScrollArea>
+          <Group align="center" position="center" spacing="xs">
+            {media.genres.map((genre: string, i: number) => (
+              <Badge size="sm" key={i}>
+                {genre}
+              </Badge>
+            ))}
+          </Group>
+        </Group>
+      </Text>
+    </Group>
+  );
+}
+
+export function ReadarrMediaDisplay(props: any) {
+  const { media }: { media: any } = props;
+  const { config } = useConfig();
+  // Find lidarr in services
+  const readarr = config.services.find((service: serviceItem) => service.type === 'Readarr');
+  // Find a poster CoverType
+  const poster = media.images.find((image: any) => image.coverType === 'cover');
+  if (!readarr) {
+    return null;
+  }
+  const baseUrl = new URL(readarr.url).origin;
+  // Remove '/' from the end of the lidarr url
+  const fullLink = `${baseUrl}${poster.url}`;
+  // Return a movie poster containting the title and the description
+  return (
+    <MediaDisplay
+      media={{
+        title: media.title,
+        poster: fullLink,
+        artist: media.author.authorName,
+        overview: media.overview,
+        genres: media.genres,
+      }}
+    />
+  );
+}
+
+export function LidarrMediaDisplay(props: any) {
+  const { media }: { media: any } = props;
+  const { config } = useConfig();
+  // Find lidarr in services
+  const lidarr = config.services.find((service: serviceItem) => service.type === 'Lidarr');
+  // Find a poster CoverType
+  const poster = media.images.find((image: any) => image.coverType === 'cover');
+  if (!lidarr) {
+    return null;
+  }
+  const baseUrl = new URL(lidarr.url).origin;
+  // Remove '/' from the end of the lidarr url
+  const fullLink = poster ? `${baseUrl}${poster.url}` : undefined;
+  // Return a movie poster containting the title and the description
+  return (
+    <MediaDisplay
+      media={{
+        title: media.title,
+        poster: fullLink,
+        artist: media.artist.artistName,
+        overview: media.overview,
+        genres: media.genres,
+      }}
+    />
+  );
+}
+
+export function RadarrMediaDisplay(props: any) {
+  const { media }: { media: any } = props;
+  // Find a poster CoverType
+  const poster = media.images.find((image: any) => image.coverType === 'poster');
+  // Return a movie poster containting the title and the description
+  return (
+    <MediaDisplay
+      media={{
+        imdbId: media.imdbId,
+        title: media.title,
+        overview: media.overview,
+        poster: poster.url,
+        genres: media.genres,
+      }}
+    />
+  );
+}
+
+export function SonarrMediaDisplay(props: any) {
+  const { media }: { media: any } = props;
+  // Find a poster CoverType
+  const poster = media.series.images.find((image: any) => image.coverType === 'poster');
+  // Return a movie poster containting the title and the description
+  return (
+    <MediaDisplay
+      media={{
+        imdbId: media.series.imdbId,
+        title: media.series.title,
+        overview: media.series.overview,
+        poster: poster.url,
+        genres: media.series.genres,
+        seasonNumber: media.seasonNumber,
+        episodeNumber: media.episodeNumber,
+      }}
+    />
+  );
+}

src/components/modules/common/index.ts

@@ -0,0 +1 @@
+export * from './MediaDisplay';

src/components/modules/date/DateModule.tsx

@@ -1,7 +1,8 @@
 import { Group, Text, Title } from '@mantine/core';
 import dayjs from 'dayjs';
 import { useEffect, useState } from 'react';
-import { Clock } from 'tabler-icons-react';
+import { IconClock as Clock } from '@tabler/icons';
+import { useConfig } from '../../../tools/state';
 import { IModule } from '../modules';
 
 export const DateModule: IModule = {
@@ -9,33 +10,31 @@ export const DateModule: IModule = {
   description: 'Show the current time and date in a card',
   icon: Clock,
   component: DateComponent,
+  options: {
+    full: {
+      name: 'Display full time (24-hour)',
+      value: true,
+    },
+  },
 };
 
 export default function DateComponent(props: any) {
   const [date, setDate] = useState(new Date());
-  const hours = date.getHours();
+  const { config } = useConfig();
-  const minutes = date.getMinutes();
+  const isFullTime = config?.modules?.[DateModule.title]?.options?.full?.value ?? false;
-
+  const formatString = isFullTime ? 'HH:mm' : 'h:mm A';
   // Change date on minute change
   // Note: Using 10 000ms instead of 1000ms to chill a little :)
   useEffect(() => {
     setInterval(() => {
       setDate(new Date());
-    }, 10000);
+    }, 1000 * 60);
   }, []);
 
   return (
-    <Group p="sm" direction="column">
+    <Group p="sm" spacing="xs" direction="column">
-      <Title>
+      <Title>{dayjs(date).format(formatString)}</Title>
-        {hours < 10 ? `0${hours}` : hours}:{minutes < 10 ? `0${minutes}` : minutes}
+      <Text size="xl">{dayjs(date).format('dddd, MMMM D')}</Text>
-      </Title>
-      <Text size="xl">
-        {
-          // Use dayjs to format the date
-          // https://day.js.org/en/getting-started/installation/
-          dayjs(date).format('dddd, MMMM D')
-        }
-      </Text>
     </Group>
   );
 }

src/components/modules/downloads/DownloadsModule.tsx

@@ -0,0 +1,142 @@
+import { Table, Text, Tooltip, Title, Group, Progress, Skeleton, ScrollArea } from '@mantine/core';
+import { IconDownload as Download } from '@tabler/icons';
+import { useEffect, useState } from 'react';
+import axios from 'axios';
+import { NormalizedTorrent } from '@ctrl/shared-torrent';
+import { IModule } from '../modules';
+import { useConfig } from '../../../tools/state';
+import { AddItemShelfButton } from '../../AppShelf/AddAppShelfItem';
+
+export const DownloadsModule: IModule = {
+  title: 'Torrent',
+  description: 'Show the current download speed of supported services',
+  icon: Download,
+  component: DownloadComponent,
+  options: {
+    hidecomplete: {
+      name: 'Hide completed torrents',
+      value: false,
+    },
+  },
+};
+
+export default function DownloadComponent() {
+  const { config } = useConfig();
+  const qBittorrentService = config.services
+    .filter((service) => service.type === 'qBittorrent')
+    .at(0);
+  const delugeService = config.services.filter((service) => service.type === 'Deluge').at(0);
+  const hideComplete: boolean =
+    (config?.modules?.[DownloadsModule.title]?.options?.hidecomplete?.value as boolean) ?? false;
+
+  const [delugeTorrents, setDelugeTorrents] = useState<NormalizedTorrent[]>([]);
+  const [qBittorrentTorrents, setqBittorrentTorrents] = useState<NormalizedTorrent[]>([]);
+
+  useEffect(() => {
+    if (qBittorrentService) {
+      setInterval(() => {
+        axios
+          .post('/api/modules/downloads?dlclient=qbit', { ...qBittorrentService })
+          .then((res) => {
+            setqBittorrentTorrents(res.data.torrents);
+          });
+      }, 3000);
+    }
+    if (delugeService) {
+      setInterval(() => {
+        axios.post('/api/modules/downloads?dlclient=deluge', { ...delugeService }).then((res) => {
+          setDelugeTorrents(res.data.torrents);
+        });
+      }, 3000);
+    }
+  }, [config.modules]);
+
+  if (!qBittorrentService && !delugeService) {
+    return (
+      <Group direction="column">
+        <Title order={3}>No supported download clients found!</Title>
+        <Group>
+          <Text>Add a download service to view your current downloads...</Text>
+          <AddItemShelfButton />
+        </Group>
+      </Group>
+    );
+  }
+
+  if (qBittorrentTorrents.length === 0 && delugeTorrents.length === 0) {
+    return (
+      <>
+        <Skeleton height={40} mt={10} />
+        <Skeleton height={40} mt={10} />
+        <Skeleton height={40} mt={10} />
+        <Skeleton height={40} mt={10} />
+        <Skeleton height={40} mt={10} />
+      </>
+    );
+  }
+
+  const ths = (
+    <tr>
+      <th>Name</th>
+      <th>Download</th>
+      <th>Upload</th>
+      <th>Progress</th>
+    </tr>
+  );
+  // Loop over qBittorrent torrents merging with deluge torrents
+  const torrents: NormalizedTorrent[] = [];
+  delugeTorrents.forEach((delugeTorrent) =>
+    torrents.push({ ...delugeTorrent, progress: delugeTorrent.progress / 100 })
+  );
+  qBittorrentTorrents.forEach((torrent) => torrents.push(torrent));
+  const rows = torrents.map((torrent) => {
+    if (torrent.progress === 1 && hideComplete) {
+      return [];
+    }
+    const downloadSpeed = torrent.downloadSpeed / 1024 / 1024;
+    const uploadSpeed = torrent.uploadSpeed / 1024 / 1024;
+    return (
+      <tr key={torrent.id}>
+        <td>
+          <Tooltip position="top" label={torrent.name}>
+            <Text
+              style={{
+                maxWidth: '30vw',
+              }}
+              size="xs"
+              lineClamp={1}
+            >
+              {torrent.name}
+            </Text>
+          </Tooltip>
+        </td>
+        <td>
+          <Text size="xs">{downloadSpeed > 0 ? `${downloadSpeed.toFixed(1)} Mb/s` : '-'}</Text>
+        </td>
+        <td>
+          <Text size="xs">{uploadSpeed > 0 ? `${uploadSpeed.toFixed(1)} Mb/s` : '-'}</Text>
+        </td>
+        <td>
+          <Text>{(torrent.progress * 100).toFixed(1)}%</Text>
+          <Progress
+            radius="lg"
+            color={torrent.progress === 1 ? 'green' : 'blue'}
+            value={torrent.progress * 100}
+            size="lg"
+          />
+        </td>
+      </tr>
+    );
+  });
+  return (
+    <Group noWrap grow direction="column">
+      <Title order={4}>Your torrents</Title>
+      <ScrollArea sx={{ height: 300 }}>
+        <Table highlightOnHover>
+          <thead>{ths}</thead>
+          <tbody>{rows}</tbody>
+        </Table>
+      </ScrollArea>
+    </Group>
+  );
+}

src/components/modules/downloads/TotalDownloadsModule.tsx

@@ -0,0 +1,211 @@
+import { Text, Title, Group, useMantineTheme, Box, Card, ColorSwatch } from '@mantine/core';
+import { IconDownload as Download } from '@tabler/icons';
+import { useEffect, useState } from 'react';
+import axios from 'axios';
+import { NormalizedTorrent } from '@ctrl/shared-torrent';
+import { linearGradientDef } from '@nivo/core';
+import { Datum, ResponsiveLine } from '@nivo/line';
+import { useListState } from '@mantine/hooks';
+import { AddItemShelfButton } from '../../AppShelf/AddAppShelfItem';
+import { useConfig } from '../../../tools/state';
+import { IModule } from '../modules';
+
+/**
+ * Format bytes as human-readable text.
+ *
+ * @param bytes Number of bytes.
+ * @param si True to use metric (SI) units, aka powers of 1000. False to use
+ *           binary (IEC), aka powers of 1024.
+ * @param dp Number of decimal places to display.
+ *
+ * @return Formatted string.
+ */
+function humanFileSize(initialBytes: number, si = true, dp = 1) {
+  const thresh = si ? 1000 : 1024;
+  let bytes = initialBytes;
+
+  if (Math.abs(bytes) < thresh) {
+    return `${bytes} B`;
+  }
+
+  const units = si
+    ? ['kb', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']
+    : ['KiB', 'MiB', 'GiB', 'TiB', 'PiB', 'EiB', 'ZiB', 'YiB'];
+  let u = -1;
+  const r = 10 ** dp;
+
+  do {
+    bytes /= thresh;
+    u += 1;
+  } while (Math.round(Math.abs(bytes) * r) / r >= thresh && u < units.length - 1);
+
+  return `${bytes.toFixed(dp)} ${units[u]}`;
+}
+
+export const TotalDownloadsModule: IModule = {
+  title: 'Download Speed',
+  description: 'Show the current download speed of supported services',
+  icon: Download,
+  component: TotalDownloadsComponent,
+};
+
+interface torrentHistory {
+  x: number;
+  up: number;
+  down: number;
+}
+
+export default function TotalDownloadsComponent() {
+  const { config } = useConfig();
+  const qBittorrentService = config.services
+    .filter((service) => service.type === 'qBittorrent')
+    .at(0);
+  const delugeService = config.services.filter((service) => service.type === 'Deluge').at(0);
+
+  const [delugeTorrents, setDelugeTorrents] = useState<NormalizedTorrent[]>([]);
+  const [torrentHistory, torrentHistoryHandlers] = useListState<torrentHistory>([]);
+  const [qBittorrentTorrents, setqBittorrentTorrents] = useState<NormalizedTorrent[]>([]);
+
+  const torrents: NormalizedTorrent[] = [];
+  delugeTorrents.forEach((delugeTorrent) =>
+    torrents.push({ ...delugeTorrent, progress: delugeTorrent.progress / 100 })
+  );
+  qBittorrentTorrents.forEach((torrent) => torrents.push(torrent));
+
+  const totalDownloadSpeed = torrents.reduce((acc, torrent) => acc + torrent.downloadSpeed, 0);
+  const totalUploadSpeed = torrents.reduce((acc, torrent) => acc + torrent.uploadSpeed, 0);
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      // Get the current download speed of qBittorrent.
+      if (qBittorrentService) {
+        axios
+          .post('/api/modules/downloads?dlclient=qbit', { ...qBittorrentService })
+          .then((res) => {
+            setqBittorrentTorrents(res.data.torrents);
+          });
+        if (delugeService) {
+          axios.post('/api/modules/downloads?dlclient=deluge', { ...delugeService }).then((res) => {
+            setDelugeTorrents(res.data.torrents);
+          });
+        }
+      }
+    }, 1000);
+  }, [config.modules]);
+
+  useEffect(() => {
+    torrentHistoryHandlers.append({
+      x: Date.now(),
+      down: totalDownloadSpeed,
+      up: totalUploadSpeed,
+    });
+  }, [totalDownloadSpeed, totalUploadSpeed]);
+
+  if (!qBittorrentService && !delugeService) {
+    return (
+      <Group direction="column">
+        <Title order={4}>No supported download clients found!</Title>
+        <Group noWrap>
+          <Text>Add a download service to view your current downloads...</Text>
+          <AddItemShelfButton />
+        </Group>
+      </Group>
+    );
+  }
+
+  const theme = useMantineTheme();
+  // Load the last 10 values from the history
+  const history = torrentHistory.slice(-10);
+  const chartDataUp = history.map((load, i) => ({
+    x: load.x,
+    y: load.up,
+  })) as Datum[];
+  const chartDataDown = history.map((load, i) => ({
+    x: load.x,
+    y: load.down,
+  })) as Datum[];
+
+  return (
+    <Group noWrap direction="column" grow>
+      <Title order={4}>Current download speed</Title>
+      <Group direction="column">
+        <Group>
+          <ColorSwatch size={12} color={theme.colors.green[5]} />
+          <Text>Download: {humanFileSize(totalDownloadSpeed)}/s</Text>
+        </Group>
+        <Group>
+          <ColorSwatch size={12} color={theme.colors.blue[5]} />
+          <Text>Upload: {humanFileSize(totalUploadSpeed)}/s</Text>
+        </Group>
+      </Group>
+      <Box
+        style={{
+          height: 200,
+          width: '100%',
+        }}
+      >
+        <ResponsiveLine
+          isInteractive
+          enableSlices="x"
+          sliceTooltip={({ slice }) => {
+            const Download = slice.points[0].data.y as number;
+            const Upload = slice.points[1].data.y as number;
+            // Get the number of seconds since the last update.
+            const seconds = (Date.now() - (slice.points[0].data.x as number)) / 1000;
+            // Round to the nearest second.
+            const roundedSeconds = Math.round(seconds);
+            return (
+              <Card p="sm" radius="md" withBorder>
+                <Text size="md">{roundedSeconds} seconds ago</Text>
+                <Card.Section p="sm">
+                  <Group direction="column">
+                    <Group>
+                      <ColorSwatch size={10} color={theme.colors.green[5]} />
+                      <Text size="md">Download: {humanFileSize(Download)}</Text>
+                    </Group>
+                    <Group>
+                      <ColorSwatch size={10} color={theme.colors.blue[5]} />
+                      <Text size="md">Upload: {humanFileSize(Upload)}</Text>
+                    </Group>
+                  </Group>
+                </Card.Section>
+              </Card>
+            );
+          }}
+          data={[
+            {
+              id: 'downloads',
+              data: chartDataUp,
+            },
+            {
+              id: 'uploads',
+              data: chartDataDown,
+            },
+          ]}
+          curve="monotoneX"
+          yFormat=" >-.2f"
+          axisTop={null}
+          axisRight={null}
+          enablePoints={false}
+          animate={false}
+          enableGridX={false}
+          enableGridY={false}
+          enableArea
+          defs={[
+            linearGradientDef('gradientA', [
+              { offset: 0, color: 'inherit' },
+              { offset: 100, color: 'inherit', opacity: 0 },
+            ]),
+          ]}
+          fill={[{ match: '*', id: 'gradientA' }]}
+          colors={[
+            // Blue
+            theme.colors.blue[5],
+            // Green
+            theme.colors.green[5],
+          ]}
+        />
+      </Box>
+    </Group>
+  );
+}

src/components/modules/downloads/index.ts

@@ -0,0 +1,2 @@
+export { DownloadsModule } from './DownloadsModule';
+export { TotalDownloadsModule } from './TotalDownloadsModule';

src/components/modules/index.ts

@@ -1,2 +1,7 @@
 export * from './date';
 export * from './calendar';
+export * from './search';
+export * from './ping';
+export * from './weather';
+export * from './downloads';
+export * from './system';

src/components/modules/moduleWrapper.tsx

@@ -1,19 +1,133 @@
-import { Card, useMantineTheme } from '@mantine/core';
+import { Button, Card, Group, Menu, Switch, TextInput, useMantineTheme } from '@mantine/core';
 import { useConfig } from '../../tools/state';
 import { IModule } from './modules';
 
-export default function ModuleWrapper(props: any) {
+function getItems(module: IModule) {
+  const { config, setConfig } = useConfig();
+  const enabledModules = config.modules ?? {};
+  const items: JSX.Element[] = [];
+  if (module.options) {
+    const keys = Object.keys(module.options);
+    const values = Object.values(module.options);
+    // Get the value and the name of the option
+    const types = values.map((v) => typeof v.value);
+    // Loop over all the types with a for each loop
+    types.forEach((type, index) => {
+      const optionName = `${module.title}.${keys[index]}`;
+      const moduleInConfig = config.modules?.[module.title];
+      if (type === 'string') {
+        items.push(
+          <form
+            onSubmit={(e) => {
+              e.preventDefault();
+              setConfig({
+                ...config,
+                modules: {
+                  ...config.modules,
+                  [module.title]: {
+                    ...config.modules[module.title],
+                    options: {
+                      ...config.modules[module.title].options,
+                      [keys[index]]: {
+                        ...config.modules[module.title].options?.[keys[index]],
+                        value: (e.target as any)[0].value,
+                      },
+                    },
+                  },
+                },
+              });
+            }}
+          >
+            <Group noWrap align="end" position="center" mt={0}>
+              <TextInput
+                key={optionName}
+                id={optionName}
+                name={optionName}
+                label={values[index].name}
+                defaultValue={(moduleInConfig?.options?.[keys[index]]?.value as string) ?? ''}
+                onChange={(e) => {}}
+              />
+
+              <Button type="submit">Save</Button>
+            </Group>
+          </form>
+        );
+      }
+      // TODO: Add support for other types
+      if (type === 'boolean') {
+        items.push(
+          <Switch
+            defaultChecked={
+              // Set default checked to the value of the option if it exists
+              (moduleInConfig?.options?.[keys[index]]?.value as boolean) ?? false
+            }
+            key={keys[index]}
+            onClick={(e) => {
+              setConfig({
+                ...config,
+                modules: {
+                  ...config.modules,
+                  [module.title]: {
+                    ...config.modules[module.title],
+                    options: {
+                      ...config.modules[module.title].options,
+                      [keys[index]]: {
+                        ...config.modules[module.title].options?.[keys[index]],
+                        value: e.currentTarget.checked,
+                      },
+                    },
+                  },
+                },
+              });
+            }}
+            label={values[index].name}
+          />
+        );
+      }
+    });
+  }
+  return items;
+}
+
+export function ModuleWrapper(props: any) {
   const { module }: { module: IModule } = props;
-  const { config } = useConfig();
+  const { config, setConfig } = useConfig();
-  const enabledModules = config.settings.enabledModules ?? [];
+  const enabledModules = config.modules ?? {};
   // Remove 'Module' from enabled modules titles
-  const isShown = enabledModules.includes(module.title);
+  const isShown = enabledModules[module.title]?.enabled ?? false;
   const theme = useMantineTheme();
+  const items: JSX.Element[] = getItems(module);
+
   if (!isShown) {
     return null;
   }
   return (
-    <Card hidden={!isShown} mx="sm" withBorder radius="lg" shadow="sm">
+    <Card {...props} hidden={!isShown} withBorder radius="lg" shadow="sm">
+      {module.options && (
+        <Menu
+          size="lg"
+          shadow="xl"
+          closeOnItemClick={false}
+          radius="md"
+          position="left"
+          styles={{
+            root: {
+              position: 'absolute',
+              top: 15,
+              right: 15,
+            },
+            body: {
+              // Add shadow and elevation to the body
+              boxShadow: '0 0 14px 14px rgba(0, 0, 0, 0.05)',
+            },
+          }}
+        >
+          <Menu.Label>Settings</Menu.Label>
+          {items.map((item) => (
+            <Menu.Item key={item.key}>{item}</Menu.Item>
+          ))}
+        </Menu>
+      )}
       <module.component />
     </Card>
   );

src/components/modules/modules.tsx

@@ -7,5 +7,14 @@ export interface IModule {
   description: string;
   icon: React.ReactNode;
   component: React.ComponentType;
-  props?: any;
+  options?: Option;
+}
+
+interface Option {
+  [x: string]: OptionValues;
+}
+
+export interface OptionValues {
+  name: string;
+  value: boolean | string;
 }

src/components/modules/ping/PingModule.story.tsx

@@ -0,0 +1,16 @@
+import { serviceItem } from '../../../tools/types';
+import PingComponent from './PingModule';
+
+export default {
+  title: 'Modules/Search bar',
+};
+
+const service: serviceItem = {
+  id: '1',
+  type: 'Other',
+  name: 'YouTube',
+  icon: 'https://cdn.jsdelivr.net/gh/walkxhub/dashboard-icons/png/youtube.png',
+  url: 'https://youtube.com/',
+};
+
+export const Default = (args: any) => <PingComponent service={service} />;

src/components/modules/ping/PingModule.tsx

@@ -0,0 +1,60 @@
+import { Indicator, Tooltip } from '@mantine/core';
+import axios from 'axios';
+import { motion } from 'framer-motion';
+import { useEffect, useState } from 'react';
+import { IconPlug as Plug } from '@tabler/icons';
+import { useConfig } from '../../../tools/state';
+import { IModule } from '../modules';
+
+export const PingModule: IModule = {
+  title: 'Ping Services',
+  description: 'Pings your services and shows their status as an indicator',
+  icon: Plug,
+  component: PingComponent,
+};
+
+export default function PingComponent(props: any) {
+  type State = 'loading' | 'down' | 'online';
+  const { config } = useConfig();
+
+  const { url }: { url: string } = props;
+  const [isOnline, setOnline] = useState<State>('loading');
+  const exists = config.modules?.[PingModule.title]?.enabled ?? false;
+  useEffect(() => {
+    if (!exists) {
+      return;
+    }
+    axios
+      .get('/api/modules/ping', { params: { url } })
+      .then(() => {
+        setOnline('online');
+      })
+      .catch(() => {
+        setOnline('down');
+      });
+  }, []);
+  if (!exists) {
+    return null;
+  }
+  return (
+    <Tooltip
+      radius="lg"
+      style={{ position: 'absolute', bottom: 20, right: 20 }}
+      label={isOnline === 'loading' ? 'Loading...' : isOnline === 'online' ? 'Online' : 'Offline'}
+    >
+      <motion.div
+        animate={{
+          scale: isOnline === 'online' ? [1, 0.8, 1] : 1,
+        }}
+        transition={{ repeat: Infinity, duration: 2.5, ease: 'easeInOut' }}
+      >
+        <Indicator
+          size={13}
+          color={isOnline === 'online' ? 'green' : isOnline === 'down' ? 'red' : 'yellow'}
+        >
+          {null}
+        </Indicator>
+      </motion.div>
+    </Tooltip>
+  );
+}

src/components/modules/ping/index.ts

@@ -0,0 +1 @@
+export { PingModule } from './PingModule';

src/components/modules/search/SearchModule.story.tsx

@@ -1,4 +1,4 @@
-import SearchBar from './SearchBar';
+import SearchBar from './SearchModule';
 
 export default {
   title: 'Search bar',

src/components/modules/search/SearchModule.tsx

@@ -1,8 +1,13 @@
-import { TextInput, Kbd, createStyles, useMantineTheme, Text, Popover } from '@mantine/core';
+import { TextInput, Kbd, createStyles, Text, Popover } from '@mantine/core';
 import { useForm, useHotkeys } from '@mantine/hooks';
 import { useRef, useState } from 'react';
-import { Search, BrandYoutube, Download } from 'tabler-icons-react';
+import {
-import { useConfig } from '../../tools/state';
+  IconSearch as Search,
+  IconBrandYoutube as BrandYoutube,
+  IconDownload as Download,
+} from '@tabler/icons';
+import { useConfig } from '../../../tools/state';
+import { IModule } from '../modules';
 
 const useStyles = createStyles((theme) => ({
   hide: {
@@ -14,16 +19,22 @@ const useStyles = createStyles((theme) => ({
   },
 }));
 
+export const SearchModule: IModule = {
+  title: 'Search Bar',
+  description: 'Show the current time and date in a card',
+  icon: Search,
+  component: SearchBar,
+};
+
 export default function SearchBar(props: any) {
   const { config, setConfig } = useConfig();
   const [opened, setOpened] = useState(false);
   const [icon, setIcon] = useState(<Search />);
-  const queryUrl = config.settings.searchUrl || 'https://www.google.com/search?q=';
+  const queryUrl = config.settings.searchUrl ?? 'https://www.google.com/search?q=';
-  const textInput: any = useRef(null);
+  const textInput = useRef<HTMLInputElement>();
-  useHotkeys([['ctrl+K', () => textInput.current.focus()]]);
+  useHotkeys([['ctrl+K', () => textInput.current && textInput.current.focus()]]);
 
   const { classes, cx } = useStyles();
-  const theme = useMantineTheme();
   const rightSection = (
     <div className={classes.hide}>
       <Kbd>Ctrl</Kbd>
@@ -38,7 +49,11 @@ export default function SearchBar(props: any) {
     },
   });
 
-  if (config.settings.searchBar === false) {
+  // If enabled modules doesn't contain the module, return null
+  // If module in enabled
+
+  const exists = config.modules?.[SearchModule.title]?.enabled ?? false;
+  if (!exists) {
     return null;
   }
 
@@ -58,17 +73,19 @@ export default function SearchBar(props: any) {
         }
       }}
       onSubmit={form.onSubmit((values) => {
-        // Find if query is prefixed by !yt or !t
         const query = values.query.trim();
         const isYoutube = query.startsWith('!yt');
         const isTorrent = query.startsWith('!t');
-        if (isYoutube) {
+        form.setValues({ query: '' });
-          window.open(`https://www.youtube.com/results?search_query=${query.substring(3)}`);
+        setTimeout(() => {
-        } else if (isTorrent) {
+          if (isYoutube) {
-          window.open(`https://bitsearch.to/search?q=${query.substring(3)}`);
+            window.open(`https://www.youtube.com/results?search_query=${query.substring(3)}`);
-        } else {
+          } else if (isTorrent) {
-          window.open(`${queryUrl}${values.query}`);
+            window.open(`https://bitsearch.to/search?q=${query.substring(3)}`);
-        }
+          } else {
+            window.open(`${queryUrl}${values.query}`);
+          }
+        }, 20);
       })}
     >
       <Popover
@@ -99,7 +116,7 @@ export default function SearchBar(props: any) {
         }
       >
         <Text>
-          tip: Use the prefixes <b>!yt</b> and <b>!t</b> in front of your query to search on YouTube
+          Tip: Use the prefixes <b>!yt</b> and <b>!t</b> in front of your query to search on YouTube
           or for a Torrent respectively.
         </Text>
       </Popover>

src/components/modules/search/index.ts

@@ -0,0 +1 @@
+export { SearchModule } from './SearchModule';

src/components/modules/system/SystemModule.tsx

@@ -0,0 +1,64 @@
+import {
+  Center,
+  Group,
+  RingProgress,
+  Title,
+  useMantineTheme,
+} from '@mantine/core';
+import { IconCpu } from '@tabler/icons';
+import { useEffect, useState } from 'react';
+import axios from 'axios';
+import si from 'systeminformation';
+import { useListState } from '@mantine/hooks';
+import { IModule } from '../modules';
+
+export const SystemModule: IModule = {
+  title: 'System info',
+  description: 'Show the current CPU usage and memory usage',
+  icon: IconCpu,
+  component: SystemInfo,
+};
+
+interface ApiResponse {
+  cpu: si.Systeminformation.CpuData;
+  os: si.Systeminformation.OsData;
+  memory: si.Systeminformation.MemData;
+  load: si.Systeminformation.CurrentLoadData;
+}
+
+export default function SystemInfo(args: any) {
+  const [data, setData] = useState<ApiResponse>();
+
+  // Refresh data every second
+  useEffect(() => {
+    setInterval(() => {
+      axios.get('/api/modules/systeminfo').then((res) => setData(res.data));
+    }, 1000);
+  }, [args]);
+
+  // Update data every time data changes
+  const [cpuLoadHistory, cpuLoadHistoryHandlers] =
+    useListState<si.Systeminformation.CurrentLoadData>([]);
+
+  // useEffect(() => {
+
+  // }, [data]);
+
+  const theme = useMantineTheme();
+  const currentLoad = data?.load?.currentLoad ?? 0;
+
+  return (
+    <Center>
+      <Group p="sm" direction="column" align="center">
+        <Title order={3}>Current CPU load</Title>
+        <RingProgress
+          size={150}
+          label={<Center>{`${currentLoad.toFixed(2)}%`}</Center>}
+          thickness={15}
+          roundCaps
+          sections={[{ value: currentLoad ?? 0, color: 'cyan' }]}
+        />
+      </Group>
+    </Center>
+  );
+}

src/components/modules/system/index.ts

@@ -0,0 +1 @@
+export { SystemModule } from './SystemModule';

src/components/modules/weather/WeatherInterface.ts

@@ -0,0 +1,41 @@
+// To parse this data:
+//
+//   import { Convert, WeatherResponse } from "./file";
+//
+//   const weatherResponse = Convert.toWeatherResponse(json);
+//
+// These functions will throw an error if the JSON doesn't
+// match the expected interface, even if the JSON is valid.
+
+export interface WeatherResponse {
+  current_weather: CurrentWeather;
+  utc_offset_seconds: number;
+  latitude: number;
+  elevation: number;
+  longitude: number;
+  generationtime_ms: number;
+  daily_units: DailyUnits;
+  daily: Daily;
+}
+
+export interface CurrentWeather {
+  winddirection: number;
+  windspeed: number;
+  time: string;
+  weathercode: number;
+  temperature: number;
+}
+
+export interface Daily {
+  temperature_2m_max: number[];
+  time: Date[];
+  temperature_2m_min: number[];
+  weathercode: number[];
+}
+
+export interface DailyUnits {
+  temperature_2m_max: string;
+  temperature_2m_min: string;
+  time: string;
+  weathercode: string;
+}

src/components/modules/weather/WeatherModule.tsx

@@ -0,0 +1,179 @@
+import { Group, Space, Title, Tooltip } from '@mantine/core';
+import axios from 'axios';
+import { useEffect, useState } from 'react';
+import {
+  IconArrowDownRight as ArrowDownRight,
+  IconArrowUpRight as ArrowUpRight,
+  IconCloud as Cloud,
+  IconCloudFog as CloudFog,
+  IconCloudRain as CloudRain,
+  IconCloudSnow as CloudSnow,
+  IconCloudStorm as CloudStorm,
+  IconQuestionMark as QuestionMark,
+  IconSnowflake as Snowflake,
+  IconSun as Sun,
+} from '@tabler/icons';
+import { useConfig } from '../../../tools/state';
+import { IModule } from '../modules';
+import { WeatherResponse } from './WeatherInterface';
+
+export const WeatherModule: IModule = {
+  title: 'Weather (beta)',
+  description: 'Look up the current weather in your location',
+  icon: Sun,
+  component: WeatherComponent,
+  options: {
+    freedomunit: {
+      name: 'Display in Fahrenheit',
+      value: false,
+    },
+    location: {
+      name: 'Current location',
+      value: '',
+    },
+  },
+};
+
+// 0 Clear sky
+// 1, 2, 3 Mainly clear, partly cloudy, and overcast
+// 45, 48 Fog and depositing rime fog
+// 51, 53, 55 Drizzle: Light, moderate, and dense intensity
+// 56, 57 Freezing Drizzle: Light and dense intensity
+// 61, 63, 65 Rain: Slight, moderate and heavy intensity
+// 66, 67 Freezing Rain: Light and heavy intensity
+// 71, 73, 75 Snow fall: Slight, moderate, and heavy intensity
+// 77 Snow grains
+// 80, 81, 82 Rain showers: Slight, moderate, and violent
+// 85, 86Snow showers slight and heavy
+// 95 *Thunderstorm: Slight or moderate
+// 96, 99 *Thunderstorm with slight and heavy hail
+export function WeatherIcon(props: any) {
+  const { code } = props;
+  let data: { icon: any; name: string };
+  switch (code) {
+    case 0: {
+      data = { icon: Sun, name: 'Clear' };
+      break;
+    }
+    case 1:
+    case 2:
+    case 3: {
+      data = { icon: Cloud, name: 'Mainly clear' };
+      break;
+    }
+    case 45:
+    case 48: {
+      data = { icon: CloudFog, name: 'Fog' };
+      break;
+    }
+    case 51:
+    case 53:
+    case 55: {
+      data = { icon: Cloud, name: 'Drizzle' };
+      break;
+    }
+    case 56:
+    case 57: {
+      data = { icon: Snowflake, name: 'Freezing drizzle' };
+      break;
+    }
+    case 61:
+    case 63:
+    case 65: {
+      data = { icon: CloudRain, name: 'Rain' };
+      break;
+    }
+    case 66:
+    case 67: {
+      data = { icon: CloudRain, name: 'Freezing rain' };
+      break;
+    }
+    case 71:
+    case 73:
+    case 75: {
+      data = { icon: CloudSnow, name: 'Snow fall' };
+      break;
+    }
+    case 77: {
+      data = { icon: CloudSnow, name: 'Snow grains' };
+      break;
+    }
+    case 80:
+    case 81:
+    case 82: {
+      data = { icon: CloudRain, name: 'Rain showers' };
+
+      break;
+    }
+    case 85:
+    case 86: {
+      data = { icon: CloudSnow, name: 'Snow showers' };
+      break;
+    }
+    case 95: {
+      data = { icon: CloudStorm, name: 'Thunderstorm' };
+      break;
+    }
+    case 96:
+    case 99: {
+      data = { icon: CloudStorm, name: 'Thunderstorm with hail' };
+      break;
+    }
+    default: {
+      data = { icon: QuestionMark, name: 'Unknown' };
+    }
+  }
+  return (
+    <Tooltip label={data.name}>
+      <data.icon size={50} />
+    </Tooltip>
+  );
+}
+
+export default function WeatherComponent(props: any) {
+  // Get location from browser
+  const { config } = useConfig();
+  const [weather, setWeather] = useState({} as WeatherResponse);
+  const cityInput: string =
+    (config?.modules?.[WeatherModule.title]?.options?.location?.value as string) ?? '';
+  const isFahrenheit: boolean =
+    (config?.modules?.[WeatherModule.title]?.options?.freedomunit?.value as boolean) ?? false;
+
+  useEffect(() => {
+    axios
+      .get(`https://geocoding-api.open-meteo.com/v1/search?name=${cityInput}`)
+      .then((response) => {
+        // Check if results exists
+        const { latitude, longitude } = response.data.results
+          ? response.data.results[0]
+          : { latitude: 0, longitude: 0 };
+        axios
+          .get(
+            `https://api.open-meteo.com/v1/forecast?latitude=${latitude}&longitude=${longitude}&daily=weathercode,temperature_2m_max,temperature_2m_min&current_weather=true&timezone=Europe%2FLondon`
+          )
+          .then((res) => {
+            setWeather(res.data);
+          });
+      });
+  }, [cityInput]);
+  if (!weather.current_weather) {
+    return null;
+  }
+  function usePerferedUnit(value: number): string {
+    return isFahrenheit ? `${(value * (9 / 5)).toFixed(1)}°F` : `${value.toFixed(1)}°C`;
+  }
+  return (
+    <Group p="sm" spacing="xs" direction="column">
+      <Title>{usePerferedUnit(weather.current_weather.temperature)}</Title>
+      <Group spacing={0}>
+        <WeatherIcon code={weather.current_weather.weathercode} />
+        <Space mx="sm" />
+        <span>{usePerferedUnit(weather.daily.temperature_2m_max[0])}</span>
+        <ArrowUpRight size={16} style={{ right: 15 }} />
+        <Space mx="sm" />
+        <span>{usePerferedUnit(weather.daily.temperature_2m_min[0])}</span>
+        <ArrowDownRight size={16} />
+      </Group>
+    </Group>
+  );
+}

src/components/modules/weather/index.ts

@@ -0,0 +1 @@
+export { WeatherModule } from './WeatherModule';

src/pages/404.tsx

@@ -0,0 +1,94 @@
+import React from 'react';
+import {
+  createStyles,
+  Container,
+  Title,
+  Text,
+  Button,
+  Group,
+  useMantineTheme,
+} from '@mantine/core';
+import { NextLink } from '@mantine/next';
+
+const useStyles = createStyles((theme) => ({
+  root: {
+    paddingTop: 80,
+    paddingBottom: 80,
+  },
+
+  inner: {
+    position: 'relative',
+  },
+
+  image: {
+    position: 'absolute',
+    top: 0,
+    right: 0,
+    left: 0,
+    zIndex: 0,
+    opacity: 0.75,
+  },
+
+  content: {
+    paddingTop: 220,
+    position: 'relative',
+    zIndex: 1,
+
+    [theme.fn.smallerThan('sm')]: {
+      paddingTop: 120,
+    },
+  },
+
+  title: {
+    fontFamily: `Greycliff CF, ${theme.fontFamily}`,
+    textAlign: 'center',
+    fontWeight: 900,
+    fontSize: 38,
+
+    [theme.fn.smallerThan('sm')]: {
+      fontSize: 32,
+    },
+  },
+
+  description: {
+    maxWidth: 540,
+    margin: 'auto',
+    marginTop: theme.spacing.xl,
+    marginBottom: theme.spacing.xl * 1.5,
+  },
+}));
+
+export function Illustration(props: React.ComponentPropsWithoutRef<'svg'>) {
+  const theme = useMantineTheme();
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 362 145" {...props}>
+      <path
+        fill={theme.colorScheme === 'dark' ? theme.colors.dark[6] : theme.colors.gray[0]}
+        d="M62.6 142c-2.133 0-3.2-1.067-3.2-3.2V118h-56c-2 0-3-1-3-3V92.8c0-1.333.4-2.733 1.2-4.2L58.2 4c.8-1.333 2.067-2 3.8-2h28c2 0 3 1 3 3v85.4h11.2c.933 0 1.733.333 2.4 1 .667.533 1 1.267 1 2.2v21.2c0 .933-.333 1.733-1 2.4-.667.533-1.467.8-2.4.8H93v20.8c0 2.133-1.067 3.2-3.2 3.2H62.6zM33 90.4h26.4V51.2L33 90.4zM181.67 144.6c-7.333 0-14.333-1.333-21-4-6.666-2.667-12.866-6.733-18.6-12.2-5.733-5.467-10.266-13-13.6-22.6-3.333-9.6-5-20.667-5-33.2 0-12.533 1.667-23.6 5-33.2 3.334-9.6 7.867-17.133 13.6-22.6 5.734-5.467 11.934-9.533 18.6-12.2 6.667-2.8 13.667-4.2 21-4.2 7.467 0 14.534 1.4 21.2 4.2 6.667 2.667 12.8 6.733 18.4 12.2 5.734 5.467 10.267 13 13.6 22.6 3.334 9.6 5 20.667 5 33.2 0 12.533-1.666 23.6-5 33.2-3.333 9.6-7.866 17.133-13.6 22.6-5.6 5.467-11.733 9.533-18.4 12.2-6.666 2.667-13.733 4-21.2 4zm0-31c9.067 0 15.6-3.733 19.6-11.2 4.134-7.6 6.2-17.533 6.2-29.8s-2.066-22.2-6.2-29.8c-4.133-7.6-10.666-11.4-19.6-11.4-8.933 0-15.466 3.8-19.6 11.4-4 7.6-6 17.533-6 29.8s2 22.2 6 29.8c4.134 7.467 10.667 11.2 19.6 11.2zM316.116 142c-2.134 0-3.2-1.067-3.2-3.2V118h-56c-2 0-3-1-3-3V92.8c0-1.333.4-2.733 1.2-4.2l56.6-84.6c.8-1.333 2.066-2 3.8-2h28c2 0 3 1 3 3v85.4h11.2c.933 0 1.733.333 2.4 1 .666.533 1 1.267 1 2.2v21.2c0 .933-.334 1.733-1 2.4-.667.533-1.467.8-2.4.8h-11.2v20.8c0 2.133-1.067 3.2-3.2 3.2h-27.2zm-29.6-51.6h26.4V51.2l-26.4 39.2z"
+      />
+    </svg>
+  );
+}
+
+export default function NothingFoundBackground() {
+  const { classes } = useStyles();
+
+  return (
+    <Container className={classes.root}>
+      <div className={classes.inner}>
+        <Illustration className={classes.image} />
+        <div className={classes.content}>
+          <Title className={classes.title}>Config not found</Title>
+          <Text color="dimmed" size="lg" align="center" className={classes.description}>
+            The config you are trying to access does not exist. Please check the URL and try again.
+          </Text>
+          <Group position="center">
+            <NextLink href="/">
+              <Button size="md">Take me back to home page</Button>
+            </NextLink>
+          </Group>
+        </div>
+      </div>
+    </Container>
+  );
+}

src/pages/[slug].tsx

@@ -0,0 +1,54 @@
+import { GetServerSidePropsContext } from 'next';
+import path from 'path';
+import fs from 'fs';
+import { useEffect } from 'react';
+import AppShelf from '../components/AppShelf/AppShelf';
+import LoadConfigComponent from '../components/Config/LoadConfig';
+import { Config } from '../tools/types';
+import { useConfig } from '../tools/state';
+
+export async function getServerSideProps(
+  context: GetServerSidePropsContext
+): Promise<{ props: { config: Config } }> {
+  const configByUrl = context.query.slug;
+  const configPath = path.join(process.cwd(), 'data/configs', `${configByUrl}.json`);
+  const configExists = fs.existsSync(configPath);
+  if (!configExists) {
+    // Redirect to 404
+    context.res.writeHead(301, { Location: '/404' });
+    context.res.end();
+    return {
+      props: {
+        config: {
+          name: 'Default config',
+          services: [],
+          settings: {
+            searchUrl: 'https://www.google.com/search?q=',
+          },
+          modules: {},
+        },
+      },
+    };
+  }
+  const config = fs.readFileSync(configPath, 'utf8');
+  // Print loaded config
+  return {
+    props: {
+      config: JSON.parse(config),
+    },
+  };
+}
+
+export default function HomePage(props: any) {
+  const { config: initialConfig }: { config: Config } = props;
+  const { setConfig } = useConfig();
+  useEffect(() => {
+    setConfig(initialConfig);
+  }, [initialConfig]);
+  return (
+    <>
+      <AppShelf />
+      <LoadConfigComponent />
+    </>
+  );
+}

src/pages/_app.tsx

@@ -9,6 +9,7 @@ import { useHotkeys } from '@mantine/hooks';
 import Layout from '../components/layout/Layout';
 import { ConfigProvider } from '../tools/state';
 import { theme } from '../tools/theme';
+import { styles } from '../tools/styles';
 
 export default function App(props: AppProps & { colorScheme: ColorScheme }) {
   const { Component, pageProps } = props;
@@ -24,7 +25,7 @@ export default function App(props: AppProps & { colorScheme: ColorScheme }) {
   return (
     <>
       <Head>
-        <title>Homarr - A homepage for your server!</title>
+        <title>Homarr 🦞</title>
         <meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width" />
         <link rel="shortcut icon" href="/favicon.svg" />
       </Head>
@@ -35,10 +36,13 @@ export default function App(props: AppProps & { colorScheme: ColorScheme }) {
             ...theme,
             colorScheme,
           }}
+          styles={{
+            ...styles,
+          }}
           withGlobalStyles
           withNormalizeCSS
         >
-          <NotificationsProvider limit={2} position="top-right">
+          <NotificationsProvider limit={4} position="bottom-left">
             <ConfigProvider>
               <Layout>
                 <Component {...pageProps} />

src/pages/_document.tsx

@@ -6,7 +6,6 @@ const stylesServer = createStylesServer();
 export default class _Document extends Document {
   static async getInitialProps(ctx: DocumentContext) {
     const initialProps = await Document.getInitialProps(ctx);
-
     // Add your app specific logic here
 
     return {

src/pages/api/configs/[slug].ts

@@ -51,6 +51,9 @@ export default async (req: NextApiRequest, res: NextApiResponse) => {
   if (req.method === 'PUT') {
     return Put(req, res);
   }
+  if (req.method === 'DELETE') {
+    return Delete(req, res);
+  }
   if (req.method === 'GET') {
     return Get(req, res);
   }
@@ -59,3 +62,28 @@ export default async (req: NextApiRequest, res: NextApiResponse) => {
     message: 'Method not allowed',
   });
 };
+
+function Delete(req: NextApiRequest, res: NextApiResponse<any>) {
+  // Get the slug of the request
+  const { slug } = req.query as { slug: string };
+  if (!slug) {
+    return res.status(400).json({
+      message: 'Wrong request',
+    });
+  }
+  // Loop over all the files in the /data/configs directory
+  const files = fs.readdirSync('data/configs');
+  // Strip the .json extension from the file name
+  const configs = files.map((file) => file.replace('.json', ''));
+  // If the target is not in the list of files, return an error
+  if (!configs.includes(slug)) {
+    return res.status(404).json({
+      message: 'Target not found',
+    });
+  }
+  // Delete the file
+  fs.unlinkSync(path.join('data/configs', `${slug}.json`));
+  return res.status(200).json({
+    message: 'Configuration deleted with success',
+  });
+}

src/pages/api/modules/calendar.ts

@@ -0,0 +1,67 @@
+import axios from 'axios';
+import { NextApiRequest, NextApiResponse } from 'next';
+import { serviceItem } from '../../../tools/types';
+
+async function Post(req: NextApiRequest, res: NextApiResponse) {
+  // Parse req.body as a ServiceItem
+  const nextMonth = new Date(new Date().setMonth(new Date().getMonth() + 2)).toISOString();
+  const lastMonth = new Date(new Date().setMonth(new Date().getMonth() - 2)).toISOString();
+  const TypeToUrl: { service: string; url: string }[] = [
+    {
+      service: 'sonarr',
+      url: '/api/calendar',
+    },
+    {
+      service: 'radarr',
+      url: '/api/v3/calendar',
+    },
+    {
+      service: 'lidarr',
+      url: '/api/v1/calendar',
+    },
+    {
+      service: 'readarr',
+      url: '/api/v1/calendar',
+    },
+  ];
+  const service: serviceItem = req.body;
+  const { type } = req.query;
+  if (!type) {
+    return res.status(400).json({
+      message: 'Missing required parameter in url: type',
+    });
+  }
+  if (!service) {
+    return res.status(400).json({
+      message: 'Missing required parameter in body: service',
+    });
+  }
+  // Match the type to the correct url
+  const url = TypeToUrl.find((x) => x.service === type);
+  if (!url) {
+    return res.status(400).json({
+      message: 'Invalid type',
+    });
+  }
+  // Get the origin URL
+  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}`
+  );
+  return res.status(200).json(data.data);
+  // // Make a request to the URL
+  // const response = await axios.get(url);
+  // // Return the response
+}
+
+export default async (req: NextApiRequest, res: NextApiResponse) => {
+  // Filter out if the reuqest is a POST or a GET
+  if (req.method === 'POST') {
+    return Post(req, res);
+  }
+  return res.status(405).json({
+    statusCode: 405,
+    message: 'Method not allowed',
+  });
+};

src/pages/api/modules/downloads.ts

@@ -0,0 +1,51 @@
+import { Deluge } from '@ctrl/deluge';
+import { QBittorrent } from '@ctrl/qbittorrent';
+import { NextApiRequest, NextApiResponse } from 'next';
+
+async function Post(req: NextApiRequest, res: NextApiResponse) {
+  // Get the type of service from the request url
+  const { dlclient } = req.query;
+  const { body } = req;
+  // Get login, password and url from the body
+  const { username, password, url } = body;
+  if (!dlclient || (!username && !password) || !url) {
+    return res.status(400).json({
+      error: 'Wrong request',
+    });
+  }
+  let client: Deluge | QBittorrent;
+  switch (dlclient) {
+    case 'qbit':
+      client = new QBittorrent({
+        baseUrl: new URL(url).origin,
+        username,
+        password,
+      });
+      break;
+    case 'deluge':
+      client = new Deluge({
+        baseUrl: new URL(url).origin,
+        password,
+      });
+      break;
+    default:
+      return res.status(400).json({
+        error: 'Wrong request',
+      });
+  }
+  const data = await client.getAllData();
+  res.status(200).json({
+    torrents: data.torrents,
+  });
+}
+
+export default async (req: NextApiRequest, res: NextApiResponse) => {
+  // Filter out if the reuqest is a POST or a GET
+  if (req.method === 'POST') {
+    return Post(req, res);
+  }
+  return res.status(405).json({
+    statusCode: 405,
+    message: 'Method not allowed',
+  });
+};

src/pages/api/modules/ping.ts

@@ -0,0 +1,29 @@
+import axios from 'axios';
+import { NextApiRequest, NextApiResponse } from 'next';
+
+async function Get(req: NextApiRequest, res: NextApiResponse) {
+  // Parse req.body as a ServiceItem
+  const { url } = req.query;
+  await axios
+    .get(url as string)
+    .then((response) => {
+      res.status(200).json(response.data);
+    })
+    .catch((error) => {
+      res.status(500).json(error);
+    });
+  // // Make a request to the URL
+  // const response = await axios.get(url);
+  // // Return the response
+}
+
+export default async (req: NextApiRequest, res: NextApiResponse) => {
+  // Filter out if the reuqest is a POST or a GET
+  if (req.method === 'GET') {
+    return Get(req, res);
+  }
+  return res.status(405).json({
+    statusCode: 405,
+    message: 'Method not allowed',
+  });
+};

src/pages/api/modules/systeminfo.ts

@@ -0,0 +1,30 @@
+import { NextApiRequest, NextApiResponse } from 'next';
+import si from 'systeminformation';
+
+async function Get(req: NextApiRequest, res: NextApiResponse) {
+  const [osInfo, cpuInfo, memInfo, cpuLoad] = await Promise.all([
+    si.osInfo(),
+    si.cpu(),
+    si.mem(),
+    si.currentLoad(),
+  ]);
+
+  const sysinfo = {
+    cpu: cpuInfo,
+    os: osInfo,
+    mem: memInfo,
+    load: cpuLoad,
+  };
+  res.status(200).json(sysinfo);
+}
+
+export default async (req: NextApiRequest, res: NextApiResponse) => {
+  // Filter out if the reuqest is a POST or a GET
+  if (req.method === 'GET') {
+    return Get(req, res);
+  }
+  return res.status(405).json({
+    statusCode: 405,
+    message: 'Method not allowed',
+  });
+};

src/pages/index.tsx

@@ -1,12 +1,12 @@
 import { getCookie, setCookies } from 'cookies-next';
 import { GetServerSidePropsContext } from 'next';
-import path from 'path';
-import fs from 'fs';
 import { useEffect } from 'react';
 import AppShelf from '../components/AppShelf/AppShelf';
 import LoadConfigComponent from '../components/Config/LoadConfig';
 import { Config } from '../tools/types';
 import { useConfig } from '../tools/state';
+import { migrateToIdConfig } from '../tools/migrate';
+import { getConfig } from '../tools/getConfig';
 
 export async function getServerSideProps({
   req,
@@ -14,41 +14,23 @@ export async function getServerSideProps({
 }: GetServerSidePropsContext): Promise<{ props: { config: Config } }> {
   let cookie = getCookie('config-name', { req, res });
   if (!cookie) {
-    setCookies('config-name', 'default', { req, res, maxAge: 60 * 60 * 24 * 30 });
+    setCookies('config-name', 'default', {
+      req,
+      res,
+      maxAge: 60 * 60 * 24 * 30,
+      sameSite: 'strict',
+    });
     cookie = 'default';
   }
-  // Check if the config file exists
+  return getConfig(cookie as string);
-  const configPath = path.join(process.cwd(), 'data/configs', `${cookie}.json`);
-  if (!fs.existsSync(configPath)) {
-    return {
-      props: {
-        config: {
-          name: cookie.toString(),
-          services: [],
-          settings: {
-            enabledModules: [],
-            searchBar: true,
-            searchUrl: 'https://www.google.com/search?q=',
-          },
-        },
-      },
-    };
-  }
-
-  const config = fs.readFileSync(configPath, 'utf8');
-  // Print loaded config
-  return {
-    props: {
-      config: JSON.parse(config),
-    },
-  };
 }
 
 export default function HomePage(props: any) {
   const { config: initialConfig }: { config: Config } = props;
-  const { config, loadConfig, setConfig, getConfigs } = useConfig();
+  const { setConfig } = useConfig();
   useEffect(() => {
-    setConfig(initialConfig);
+    const migratedConfig = migrateToIdConfig(initialConfig);
+    setConfig(migratedConfig);
   }, [initialConfig]);
   return (
     <>

src/tools/getConfig.ts

@@ -0,0 +1,31 @@
+import path from 'path';
+import fs from 'fs';
+
+export function getConfig(name: string) {
+  // Check if the config file exists
+  const configPath = path.join(process.cwd(), 'data/configs', `${name}.json`);
+  if (!fs.existsSync(configPath)) {
+    return {
+      props: {
+        configName: name,
+        config: {
+          name: name.toString(),
+          services: [],
+          settings: {
+            searchUrl: 'https://www.google.com/search?q=',
+          },
+          modules: {},
+        },
+      },
+    };
+  }
+
+  const config = fs.readFileSync(configPath, 'utf8');
+  // Print loaded config
+  return {
+    props: {
+      configName: name,
+      config: JSON.parse(config),
+    },
+  };
+}

src/tools/migrate.ts

@@ -0,0 +1,14 @@
+import { v4 as uuidv4 } from 'uuid';
+import { Config } from './types';
+
+export function migrateToIdConfig(config: Config): Config {
+  // Set the config and add an ID to all the services that don't have one
+  const services = config.services.map((service) => ({
+    ...service,
+    id: service.id ?? uuidv4(),
+  }));
+  return {
+    ...config,
+    services,
+  };
+}

src/tools/state.tsx

@@ -2,7 +2,7 @@
 import { showNotification } from '@mantine/notifications';
 import axios from 'axios';
 import { createContext, ReactNode, useContext, useState } from 'react';
-import { Check, X } from 'tabler-icons-react';
+import { IconCheck as Check, IconX as X } from '@tabler/icons';
 import { Config } from './types';
 
 type configContextType = {
@@ -17,10 +17,9 @@ const configContext = createContext<configContextType>({
     name: 'default',
     services: [],
     settings: {
-      searchBar: true,
+      searchUrl: 'https://google.com/search?q=',
-      searchUrl: 'https://www.google.com/search?q=',
-      enabledModules: [],
     },
+    modules: {},
   },
   setConfig: () => {},
   loadConfig: async (name: string) => {},
@@ -44,16 +43,15 @@ export function ConfigProvider({ children }: Props) {
     name: 'default',
     services: [],
     settings: {
-      searchBar: true,
       searchUrl: 'https://www.google.com/search?q=',
-      enabledModules: [],
     },
+    modules: {},
   });
 
   async function loadConfig(configName: string) {
     try {
       const response = await axios.get(`/api/configs/${configName}`);
-      setConfigInternal(response.data);
+      setConfigInternal(JSON.parse(response.data));
       showNotification({
         title: 'Config',
         icon: <Check />,

src/tools/styles.ts

@@ -0,0 +1,12 @@
+import { MantineProviderProps } from '@mantine/core';
+
+export const styles: MantineProviderProps['styles'] = {
+  Checkbox: {
+    input: { cursor: 'pointer' },
+    label: { cursor: 'pointer' },
+  },
+  Switch: {
+    input: { cursor: 'pointer' },
+    label: { cursor: 'pointer' },
+  },
+};

src/tools/theme.ts

@@ -1,3 +1,6 @@
 import { MantineProviderProps } from '@mantine/core';
 
-export const theme: MantineProviderProps['theme'] = {};
+export const theme: MantineProviderProps['theme'] = {
+  primaryColor: 'red',
+  primaryShade: 6,
+};

src/tools/types.ts

@@ -1,38 +1,56 @@
+import { OptionValues } from '../components/modules/modules';
+
 export interface Settings {
   searchUrl: string;
-  searchBar: boolean;
-  enabledModules: string[];
-  [key: string]: any;
 }
 
 export interface Config {
   name: string;
   services: serviceItem[];
   settings: Settings;
+  modules: {
+    [key: string]: ConfigModule;
+  };
+}
+
+interface ConfigModule {
+  title: string;
+  enabled: boolean;
+  options: {
+    [key: string]: OptionValues;
+  };
 }
 
 export const ServiceTypeList = [
   'Other',
-  'Sonarr',
-  'Radarr',
-  'Lidarr',
-  'qBittorrent',
-  'Plex',
   'Emby',
+  'Deluge',
+  'Lidarr',
+  'Plex',
+  'Radarr',
+  'Readarr',
+  'Sonarr',
+  'qBittorrent',
 ];
 export type ServiceType =
   | 'Other'
-  | 'Sonarr'
+  | 'Emby'
-  | 'Radarr'
+  | 'Deluge'
   | 'Lidarr'
-  | 'qBittorrent'
   | 'Plex'
-  | 'Emby';
+  | 'Radarr'
+  | 'Readarr'
+  | 'Sonarr'
+  | 'qBittorrent';
 
 export interface serviceItem {
-  [x: string]: any;
+  id: string;
   name: string;
   type: string;
   url: string;
   icon: string;
+  category?: string;
+  apiKey?: string;
+  password?: string;
+  username?: string;
 }

tsconfig.json

@@ -1,7 +1,11 @@
 {
   "compilerOptions": {
     "target": "es5",
-    "lib": ["dom", "dom.iterable", "esnext"],
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
     "allowJs": true,
     "skipLibCheck": true,
     "strict": true,
@@ -15,6 +19,13 @@
     "jsx": "preserve",
     "incremental": true
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "next.config.js"],
+  "include": [
-  "exclude": ["node_modules"]
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    "next.config.js"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
 }