v0.5.1 : Readarr and Lidarr integrations !

### New Features
- ✨ Lidarr and Readarr integrations
- ✨ Add a way to delete a config via the API
- ✨ Add a way to save a config and delete it
- ✨ Add a key bind to open settings (CTRL + L)

### Bug Fixes
- 🐛 Fixing date issues with weather module
- 🐛 Fix Readarr date match

### UI Changes
- 💄 Totally rework how the media previews work!
- 💄 Make the settings menu a drawer instead
- 💄 Change the way the footer is displayed

### GitHub Changes
- 📝 (README): Updates documentation & Move to Wiki

### Other Changes
- 🧑‍💻 Added strings as an option type for modules
- 🏗️ Make the max notifications to 4

.storybook/main.js

@@ -1,14 +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
-        theme={{ colorScheme: useDarkMode() ? 'dark' : 'light' }}
-        withGlobalStyles
-        withNormalizeCSS
-      >
+      <MantineProvider withGlobalStyles withNormalizeCSS>
         <NotificationsProvider>{props.children}</NotificationsProvider>
       </MantineProvider>
     </ColorSchemeProvider>

README.md

@@ -1,65 +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 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">
-      <img alt="GitHub release (latest SemVer)" src="https://img.shields.io/github/v/release/ajnart/homarr"></a>
-  <a href="https://github.com/ajnart/homarr/pkgs/container/homarr">
-    <img alt="Docker Pulls" src="https://img.shields.io/docker/pulls/ajnart/homarr?label=Downloads%20"></a>
-  </p>
-  <p align="center">
-<img align="end" width=600 src="https://user-images.githubusercontent.com/49837342/168315259-b778c816-10fe-44db-bd25-3eea6f31b233.png" />
-  </p>
-  <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/>
+<img src="https://img.shields.io/github/stars/ajnart/homarr?label=%E2%AD%90%20Stars&style=flat-square?branch=master&kill_cache=1%22">
+<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">
+</a>
+<a href="https://github.com/ajnart/homarr/actions/workflows/docker.yml">
+  <img title="Docker CI Status" src="https://github.com/ajnart/homarr/actions/workflows/docker.yml/badge.svg" alt="CI Status">
+</a>
+<a href="https://discord.gg/aCsmEV5RgA">
+  <img title="Discord" src="https://discordapp.com/api/guilds/972958686051962910/widget.png?style=shield">
+</a>
 </p>
 
-# 📃 Table of Contents
-- [📃 Table of Contents](#-table-of-contents)
-- [🚀 Getting Started](#-getting-started)
-  - [ℹ️ About](#ℹ️-about)
-  - [💥 Known Issues](#-known-issues)
-  - [⚡ Installation](#-installation)
-    - [🐳 Deploying from Docker Image](#-deploying-from-docker-image)
-    - [🛠️ 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)
-    - [🍏 Request Icons](#-request-icons)
+<!-- Links -->
+<p align="center">
+<i>Join the discord! — Don't forget to star the repo if you are enjoying the project!</i>
+</p>
+<p align="center">
+<a href="https://homarr.netlify.app/"><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>
+</p>
 
+---
 
-<!-- Getting Started -->
-# 🚀 Getting Started
-
-## ℹ️ About
+<!-- Homarr Description -->
+<img align="right" width=250 src="public/imgs/logo-color.svg" />
 
 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
 
@@ -68,16 +100,16 @@ _Requirements_:
 
 **Standard Docker Install**
 ```sh
-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 /data/docker/homarr:/app/data/configs -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
@@ -89,7 +121,13 @@ services:
       - '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
 
@@ -106,96 +144,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.
-
-**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.
-
-**Weather Module**
-The Weather Module uses your devices location to display the current, highest, and lowest temperature.
-
-**[⤴️ 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
+## 💖 Contributing
 **Please read our [Contribution Guidelines](/CONTRIBUTING.md)**
 
 All contributions are highly appreciated.
 
-**[⤴️ Back to Top](#-table-of-contents)**
+**[⤴️ Back to Top](#homarr)**
 
-## 🍏 Request Icons
+---
 
-The icons used in Homarr are automatically requested from the [dashboard-icons](https://github.com/walkxhub/dashboard-icons) repo. You can make a icon request by creating an [issue](https://github.com/walkxhub/dashboard-icons/issues/new/choose).
-    
-**[⤴️ Back to Top](#-table-of-contents)**
+
+## 📜 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>

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,14 @@
   "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://bing.com/search?q=",
-    "enabledModules": []
+    "searchUrl": "https://bing.com/search?q="
   }
 }

data/constants.ts

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

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

src/components/AppShelf/AddAppShelfItem.tsx

@@ -6,21 +6,17 @@ import {
   Image,
   Button,
   Select,
-  AspectRatio,
-  Text,
-  Card,
   LoadingOverlay,
   ActionIcon,
   Tooltip,
   Title,
 } from '@mantine/core';
 import { useForm } from '@mantine/form';
-import { motion } from 'framer-motion';
 import { useState } from 'react';
 import { Apps } from 'tabler-icons-react';
+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,70 +47,16 @@ 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) => {
-      if (res.status === 200) {
-        form.setFieldValue('icon', res.url);
-      }
-    })
-    .catch(() => {
-      // Do nothing
-    });
+  ).then((res) => {
+    if (res.ok) {
+      form.setFieldValue('icon', res.url);
+    }
+  });
 
   return false;
 }
@@ -126,9 +68,10 @@ export function AddAppShelfItemForm(props: { setOpened: (b: boolean) => void } &
 
   const form = useForm({
     initialValues: {
+      id: props.id ?? uuidv4(),
       type: props.type ?? 'Other',
       name: props.name ?? '',
-      icon: props.icon ?? '',
+      icon: props.icon ?? '/favicon.svg',
       url: props.url ?? '',
       apiKey: props.apiKey ?? (undefined as unknown as string),
     },
@@ -136,15 +79,18 @@ export function AddAppShelfItemForm(props: { setOpened: (b: boolean) => void } &
       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?:\/\/.+\/$/)) {
-          return 'Please enter a valid URL (that ends with a /)';
+        try {
+          const _isValid = new URL(value);
+        } catch (e) {
+          return 'Please enter a valid URL';
         }
         return null;
       },
@@ -166,11 +112,12 @@ export function AddAppShelfItemForm(props: { setOpened: (b: boolean) => void } &
       <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,
                   };
@@ -213,7 +160,7 @@ 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
@@ -226,7 +173,10 @@ export function AddAppShelfItemForm(props: { setOpened: (b: boolean) => void } &
             {...form.getInputProps('type')}
           />
           <LoadingOverlay visible={isLoading} />
-          {(form.values.type === 'Sonarr' || form.values.type === 'Radarr') && (
+          {(form.values.type === 'Sonarr' ||
+            form.values.type === 'Radarr' ||
+            form.values.type === 'Lidarr' ||
+            form.values.type === 'Readarr') && (
             <TextInput
               required
               label="API key"

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,106 +1,79 @@
 import React, { useState } from 'react';
-import { motion } from 'framer-motion';
-import { Text, AspectRatio, Card, Image, Center, Grid, createStyles } from '@mantine/core';
+import { 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 PingComponent from '../modules/ping/PingModule';
 
-const useStyles = createStyles((theme) => ({
-  item: {
-    transition: 'box-shadow 150ms ease, transform 100ms ease',
-
-    '&:hover': {
-      boxShadow: `${theme.shadows.md} !important`,
-      transform: 'scale(1.05)',
-    },
-  },
-}));
+import { SortableAppShelfItem, AppShelfItem } from './AppShelfItem';
 
 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);
+  }
+
   return (
-    <Grid gutter="xl" align="center">
-      {config.services.map((service) => (
-        <Grid.Col key={service.name} span={6} xl={2} xs={4} sm={3} md={3}>
-          <AppShelfItem key={service.name} service={service} />
-        </Grid.Col>
-      ))}
-    </Grid>
+    <DndContext
+      sensors={sensors}
+      collisionDetection={closestCenter}
+      onDragStart={handleDragStart}
+      onDragEnd={handleDragEnd}
+    >
+      <SortableContext items={config.services}>
+        <Grid gutter="xl" align="center">
+          {config.services.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>
   );
 };
 
-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>
-          <Text mt="sm" align="center" lineClamp={1} weight={550}>
-            {service.name}
-          </Text>
-          <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={{
-                  cursor: 'pointer',
-                  scale: 1.1,
-                }}
-              >
-                <Image
-                  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>
-  );
-}
-
 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={{
+                  cursor: 'pointer',
+                  scale: 1.1,
+                }}
+              >
+                <Image
+                  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

@@ -22,6 +22,7 @@ export default function AppShelfMenu(props: any) {
         <AddAppShelfItemForm
           setOpened={setOpened}
           name={service.name}
+          id={service.id}
           type={service.type}
           url={service.url}
           icon={service.icon}
@@ -54,7 +55,7 @@ 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,

src/components/AppShelf/index.ts

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

src/components/Config/ConfigChanger.tsx

@@ -9,7 +9,7 @@ export default function ConfigChanger() {
   useEffect(() => {
     getConfigs().then((configs) => setConfigList(configs));
     // setConfig(initialConfig);
-  }, [config]);
+  }, [config.name]);
   // If configlist is empty, return a loading indicator
   if (configList.length === 0) {
     return (

src/components/Config/LoadConfig.tsx

@@ -7,6 +7,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 +85,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,96 @@
-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 { Check, Download, Plus, Trash, X } from 'tabler-icons-react';
 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}>
-      Download your config
-    </Button>
+    <Group>
+      <Modal
+        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
+            defaultValue={config.name}
+            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 your 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 current config
+      </Button>
+      <Button leftIcon={<Plus />} variant="outline" onClick={() => setOpened(true)}>
+        Save a copy of your config
+      </Button>
+    </Group>
   );
 }

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`}
           onChange={(e) => {
-            if (e.currentTarget.checked) {
-              setConfig({
-                ...config,
-                settings: {
-                  ...config.settings,
-                  enabledModules: [...enabledModules, module.title],
+            setConfig({
+              ...config,
+              modules: {
+                ...config.modules,
+                [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,14 +1,14 @@
 import {
   ActionIcon,
   Group,
-  Modal,
   Title,
   Text,
   Tooltip,
   SegmentedControl,
   TextInput,
+  Drawer,
 } from '@mantine/core';
-import { useColorScheme } from '@mantine/hooks';
+import { useColorScheme, useHotkeys } from '@mantine/hooks';
 import { useState } from 'react';
 import { Settings as SettingsIcon } from 'tabler-icons-react';
 import { useConfig } from '../../tools/state';
@@ -97,18 +97,21 @@ function SettingsMenu(props: any) {
 }
 
 export function SettingsMenuButton(props: any) {
+  useHotkeys([['ctrl+L', () => setOpened(!opened)]]);
+
   const [opened, setOpened] = useState(false);
   return (
     <>
-      <Modal
-        size="xl"
-        radius="md"
+      <Drawer
+        size="auto"
+        padding="xl"
+        position="right"
         title={<Title order={3}>Settings</Title>}
         opened={props.opened || opened}
         onClose={() => setOpened(false)}
       >
         <SettingsMenu />
-      </Modal>
+      </Drawer>
       <ActionIcon
         variant="default"
         radius="md"

src/components/layout/Footer.tsx

@@ -81,9 +81,6 @@ export function Footer({ links }: FooterCenteredProps) {
         background: 'none',
         border: 'none',
         clear: 'both',
-        position: 'fixed',
-        bottom: '0',
-        left: '0',
       }}
     >
       <Group position="apart" direction="row" style={{ alignItems: 'end' }} mr="xs" mb="xs">

src/components/layout/Logo.tsx

@@ -1,4 +1,5 @@
 import { Group, Image, Text } from '@mantine/core';
+import { NextLink } from '@mantine/next';
 import * as React from 'react';
 
 export function Logo({ style }: any) {
@@ -11,14 +12,22 @@ export function Logo({ style }: any) {
           position: 'relative',
         }}
       />
-      <Text
-        sx={style}
-        weight="bold"
-        variant="gradient"
-        gradient={{ from: 'red', to: 'orange', deg: 145 }}
+      <NextLink
+        style={{
+          textDecoration: 'none',
+          position: 'relative',
+        }}
+        href="/"
       >
-        Homarr
-      </Text>
+        <Text
+          sx={style}
+          weight="bold"
+          variant="gradient"
+          gradient={{ from: 'red', to: 'orange', deg: 145 }}
+        >
+          Homarr
+        </Text>
+      </NextLink>
     </Group>
   );
 }

src/components/modules/calendar/CalendarModule.tsx

@@ -1,12 +1,17 @@
 /* eslint-disable react/no-children-prop */
-import { Popover, Box, ScrollArea, Divider, Indicator, useMantineTheme } from '@mantine/core';
+import { Box, Divider, Indicator, Popover, ScrollArea, useMantineTheme } from '@mantine/core';
 import React, { useEffect, useState } from 'react';
 import { Calendar } from '@mantine/dates';
 import { showNotification } from '@mantine/notifications';
 import { Calendar as CalendarIcon, Check } from 'tabler-icons-react';
-import { RadarrMediaDisplay, SonarrMediaDisplay } from './MediaDisplay';
 import { useConfig } from '../../../tools/state';
 import { IModule } from '../modules';
+import {
+  SonarrMediaDisplay,
+  RadarrMediaDisplay,
+  LidarrMediaDisplay,
+  ReadarrMediaDisplay,
+} from './MediaDisplay';
 
 export const CalendarModule: IModule = {
   title: 'Calendar',
@@ -19,53 +24,101 @@ 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);
 
   useEffect(() => {
     // Filter only sonarr and radarr services
     const filtered = config.services.filter(
-      (service) => service.type === 'Sonarr' || service.type === 'Radarr'
+      (service) =>
+        service.type === 'Sonarr' ||
+        service.type === 'Radarr' ||
+        service.type === 'Lidarr' ||
+        service.type === 'Readarr'
     );
 
     // Get the url and apiKey for all Sonarr and Radarr services
     const sonarrService = filtered.filter((service) => service.type === 'Sonarr').at(0);
     const radarrService = filtered.filter((service) => service.type === 'Radarr').at(0);
+    const lidarrService = filtered.filter((service) => service.type === 'Lidarr').at(0);
+    const readarrService = filtered.filter((service) => service.type === 'Readarr').at(0);
     const nextMonth = new Date(new Date().setMonth(new Date().getMonth() + 2)).toISOString();
     if (sonarrService && sonarrService.apiKey) {
-      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`,
+      const baseUrl = new URL(sonarrService.url).origin;
+      fetch(`${baseUrl}/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`,
+      const baseUrl = new URL(radarrService.url).origin;
+      fetch(`${baseUrl}/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`,
+              });
             });
-          });
-      });
+        }
+      );
+    }
+    if (lidarrService && lidarrService.apiKey) {
+      const baseUrl = new URL(lidarrService.url).origin;
+      fetch(`${baseUrl}/api/v1/calendar?apikey=${lidarrService?.apiKey}&end=${nextMonth}`).then(
+        (response) => {
+          response.ok &&
+            response.json().then((data) => {
+              setLidarrMedias(data);
+              showNotification({
+                title: 'Lidarr',
+                icon: <Check />,
+                color: 'green',
+                autoClose: 1500,
+                radius: 'md',
+                message: `Loaded ${data.length} releases`,
+              });
+            });
+        }
+      );
+    }
+    if (readarrService && readarrService.apiKey) {
+      const baseUrl = new URL(readarrService.url).origin;
+      fetch(`${baseUrl}/api/v1/calendar?apikey=${readarrService?.apiKey}&end=${nextMonth}`).then(
+        (response) => {
+          response.ok &&
+            response.json().then((data) => {
+              setReadarrMedias(data);
+              showNotification({
+                title: 'Readarr',
+                icon: <Check />,
+                color: 'green',
+                autoClose: 1500,
+                radius: 'md',
+                message: `Loaded ${data.length} releases`,
+              });
+            });
+        }
+      );
     }
   }, [config.services]);
 
@@ -80,6 +133,8 @@ export default function CalendarComponent(props: any) {
           renderdate={renderdate}
           sonarrmedias={sonarrMedias}
           radarrmedias={radarrMedias}
+          lidarrmedias={lidarrMedias}
+          readarrmedias={readarrMedias}
         />
       )}
     />
@@ -91,12 +146,25 @@ 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 theme = useMantineTheme();
 
   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
@@ -107,7 +175,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>;
   }
 
@@ -117,8 +190,58 @@ function DayComponent(props: any) {
         setOpened(true);
       }}
     >
-      {radarrFiltered.length > 0 && <Indicator size={7} color="yellow" children={null} />}
-      {sonarrFiltered.length > 0 && <Indicator size={7} offset={8} color="blue" children={null} />}
+      {readarrFiltered.length > 0 && (
+        <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"
@@ -145,6 +268,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,11 +1,14 @@
-import { Stack, Image, Group, Title, Badge, Text, ActionIcon, Anchor } from '@mantine/core';
+import { Image, Group, Title, Badge, Text, ActionIcon, Anchor, ScrollArea } from '@mantine/core';
 import { Link } from 'tabler-icons-react';
+import { useConfig } from '../../../tools/state';
+import { serviceItem } from '../../../tools/types';
 
 export interface IMedia {
   overview: string;
-  imdbId: any;
+  imdbId?: any;
+  artist?: string;
   title: string;
-  poster: string;
+  poster?: string;
   genres: string[];
   seasonNumber?: number;
   episodeNumber?: number;
@@ -14,30 +17,44 @@ export interface IMedia {
 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">
+    <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="row">
+          <Title order={3}>{media.title}</Title>
+          {media.imdbId && (
+            <Anchor
+              href={`https://www.imdb.com/title/${media.imdbId}`}
+              target="_blank"
+              rel="noopener noreferrer"
+            >
               <ActionIcon>
                 <Link />
               </ActionIcon>
             </Anchor>
-          </Group>
+          )}
+          {media.artist && (
+            <Text
+              style={{
+                textAlign: 'center',
+                color: '#a0aec0',
+              }}
+            >
+              New release from {media.artist}
+            </Text>
+          )}
           {media.episodeNumber && media.seasonNumber && (
             <Text
               style={{
@@ -48,19 +65,77 @@ function MediaDisplay(props: { media: IMedia }) {
               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 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>
-      </Stack>
+      </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
+  console.log(poster);
+  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 = `${baseUrl}${poster.url}`;
+  // 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

src/components/modules/date/DateModule.tsx

@@ -21,13 +21,8 @@ export const DateModule: IModule = {
 export default function DateComponent(props: any) {
   const [date, setDate] = useState(new Date());
   const { config } = useConfig();
-  const hours = date.getHours();
-  const minutes = date.getMinutes();
-  const isFullTime =
-    config.settings[`${DateModule.title}.full`] === undefined
-      ? true
-      : config.settings[`${DateModule.title}.full`];
-  const formatString = isFullTime ? 'HH:mm' : 'h:mm a';
+  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(() => {

src/components/modules/moduleWrapper.tsx

@@ -1,13 +1,13 @@
-import { Card, Menu, Switch, 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 function ModuleWrapper(props: any) {
   const { module }: { module: IModule } = props;
   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[] = [];
   if (module.options) {
@@ -18,25 +18,69 @@ export function ModuleWrapper(props: any) {
     // 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
-              config.settings[optionName] ??
-              (module.options && module.options[keys[index]].value) ??
-              false
+              (moduleInConfig?.options?.[keys[index]]?.value as boolean) ?? false
             }
-            defaultValue={config.settings[optionName] ?? false}
             key={keys[index]}
             onClick={(e) => {
               setConfig({
                 ...config,
-                settings: {
-                  ...config.settings,
-                  enabledModules: [...config.settings.enabledModules],
-                  [optionName]: e.currentTarget.checked,
+                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,
+                      },
+                    },
+                  },
                 },
               });
             }}
@@ -46,7 +90,6 @@ export function ModuleWrapper(props: any) {
       }
     });
   }
-  // Sussy baka
   if (!isShown) {
     return null;
   }
@@ -54,7 +97,7 @@ export function ModuleWrapper(props: any) {
     <Card hidden={!isShown} mx="sm" withBorder radius="lg" shadow="sm">
       {module.options && (
         <Menu
-          size="md"
+          size="lg"
           shadow="xl"
           closeOnItemClick={false}
           radius="md"

src/components/modules/modules.tsx

@@ -14,7 +14,7 @@ interface Option {
   [x: string]: OptionValues;
 }
 
-interface OptionValues {
+export interface OptionValues {
   name: string;
-  value: boolean;
+  value: boolean | string;
 }

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

@@ -6,6 +6,7 @@ export default {
 };
 
 const service: serviceItem = {
+  id: '1',
   type: 'Other',
   name: 'YouTube',
   icon: 'https://cdn.jsdelivr.net/gh/walkxhub/dashboard-icons/png/youtube.png',

src/components/modules/ping/PingModule.tsx

@@ -19,8 +19,9 @@ export default function PingComponent(props: any) {
 
   const { url }: { url: string } = props;
   const [isOnline, setOnline] = useState<State>('loading');
+  const exists = config.modules?.[PingModule.title]?.enabled ?? false;
   useEffect(() => {
-    if (!config.settings.enabledModules.includes('Ping Services')) {
+    if (!exists) {
       return;
     }
     axios
@@ -32,7 +33,7 @@ export default function PingComponent(props: any) {
         setOnline('down');
       });
   }, []);
-  if (!config.settings.enabledModules.includes('Ping Services')) {
+  if (!exists) {
     return null;
   }
   return (

src/components/modules/search/SearchModule.tsx

@@ -26,7 +26,7 @@ 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 = useRef<HTMLInputElement>();
   useHotkeys([['ctrl+K', () => textInput.current && textInput.current.focus()]]);
 
@@ -46,7 +46,10 @@ export default function SearchBar(props: any) {
   });
 
   // If enabled modules doesn't contain the module, return null
-  if (!config.settings.enabledModules.includes(SearchModule.title)) {
+  // If module in enabled
+
+  const exists = config.modules?.[SearchModule.title]?.enabled ?? false;
+  if (!exists) {
     return null;
   }
 

src/components/modules/weather/WeatherModule.tsx

@@ -27,6 +27,10 @@ export const WeatherModule: IModule = {
       name: 'Display in Fahrenheit',
       value: false,
     },
+    location: {
+      name: 'Current location',
+      value: '',
+    },
   },
 };
 
@@ -128,29 +132,30 @@ export function WeatherIcon(props: any) {
 
 export default function WeatherComponent(props: any) {
   // Get location from browser
-  const [location, setLocation] = useState({ lat: 0, lng: 0 });
   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.settings[`${WeatherModule.title}.freedomunit`] === undefined
-      ? false
-      : config.settings[`${WeatherModule.title}.freedomunit`];
-
-  if ('geolocation' in navigator && location.lat === 0 && location.lng === 0) {
-    navigator.geolocation.getCurrentPosition((position) => {
-      setLocation({ lat: position.coords.latitude, lng: position.coords.longitude });
-    });
-  }
+    (config?.modules?.[WeatherModule.title]?.options?.freedomunit?.value as boolean) ?? false;
 
   useEffect(() => {
     axios
-      .get(
-        `https://api.open-meteo.com/v1/forecast?latitude=${location.lat}&longitude=${location.lng}&daily=weathercode,temperature_2m_max,temperature_2m_min&current_weather=true&timezone=Europe%2FLondon`
-      )
-      .then((res) => {
-        setWeather(res.data);
+      .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;
   }
@@ -163,10 +168,10 @@ export default function WeatherComponent(props: any) {
       <Group spacing={0}>
         <WeatherIcon code={weather.current_weather.weathercode} />
         <Space mx="sm" />
-        <span>{weather.daily.temperature_2m_max[0]}°C</span>
+        <span>{usePerferedUnit(weather.daily.temperature_2m_max[0])}</span>
         <ArrowUpRight size={16} style={{ right: 15 }} />
         <Space mx="sm" />
-        <span>{weather.daily.temperature_2m_min[0]}°C</span>
+        <span>{usePerferedUnit(weather.daily.temperature_2m_min[0])}</span>
         <ArrowDownRight size={16} />
       </Group>
     </Group>

src/pages/404.tsx

@@ -78,10 +78,9 @@ export default function NothingFoundBackground() {
       <div className={classes.inner}>
         <Illustration className={classes.image} />
         <div className={classes.content}>
-          <Title className={classes.title}>Nothing to see here</Title>
+          <Title className={classes.title}>Config not found</Title>
           <Text color="dimmed" size="lg" align="center" className={classes.description}>
-            Page you are trying to open does not exist. You may have mistyped the address, or the
-            page has been moved to another URL. If you think this is an error contact support.
+            The config you are trying to access does not exist. Please check the URL and try again.
           </Text>
           <Group position="center">
             <NextLink href="/">

src/pages/[slug].tsx

@@ -1,8 +1,54 @@
-import { Title } from '@mantine/core';
-import { useRouter } from 'next/router';
+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 default function SlugPage(props: any) {
-  const router = useRouter();
-  const { slug } = router.query;
-  return <Title>ok</Title>;
+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

@@ -38,7 +38,7 @@ export default function App(props: AppProps & { colorScheme: ColorScheme }) {
           withGlobalStyles
           withNormalizeCSS
         >
-          <NotificationsProvider limit={2} position="top-right">
+          <NotificationsProvider limit={4} position="top-right">
             <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/index.tsx

@@ -7,6 +7,7 @@ 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';
 
 export async function getServerSideProps({
   req,
@@ -26,10 +27,9 @@ export async function getServerSideProps({
           name: cookie.toString(),
           services: [],
           settings: {
-            enabledModules: [],
-            searchBar: true,
             searchUrl: 'https://www.google.com/search?q=',
           },
+          modules: {},
         },
       },
     };
@@ -48,7 +48,8 @@ export default function HomePage(props: any) {
   const { config: initialConfig }: { config: Config } = props;
   const { config, loadConfig, setConfig, getConfigs } = useConfig();
   useEffect(() => {
-    setConfig(initialConfig);
+    const migratedConfig = migrateToIdConfig(initialConfig);
+    setConfig(migratedConfig);
   }, [initialConfig]);
   return (
     <>

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

@@ -17,10 +17,9 @@ const configContext = createContext<configContextType>({
     name: 'default',
     services: [],
     settings: {
-      searchBar: true,
-      searchUrl: 'https://www.google.com/search?q=',
-      enabledModules: [],
+      searchUrl: 'https://google.com/search?q=',
     },
+    modules: {},
   },
   setConfig: () => {},
   loadConfig: async (name: string) => {},
@@ -44,10 +43,9 @@ 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) {

src/tools/types.ts

@@ -1,37 +1,51 @@
+import { OptionValues } from '../components/modules/modules';
+
 export interface Settings {
   searchUrl: string;
-  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',
+  'Lidarr',
+  'Plex',
+  'Radarr',
+  'Readarr',
+  'Sonarr',
+  'qBittorrent',
 ];
 export type ServiceType =
   | 'Other'
-  | 'Sonarr'
-  | 'Radarr'
+  | 'Emby'
   | 'Lidarr'
-  | 'qBittorrent'
   | 'Plex'
-  | 'Emby';
+  | 'Radarr'
+  | 'Readarr'
+  | 'Sonarr'
+  | 'qBittorrent';
 
 export interface serviceItem {
-  [x: string]: any;
+  id: string;
   name: string;
   type: string;
   url: string;
   icon: string;
+  apiKey?: string;
 }