🚑 Merge pull request #301 from ajnart/dev

🚑 Hotfix Docker image with new NextJS version

.dockerignore

@@ -2,5 +2,8 @@ Dockerfile
 .dockerignore
 node_modules
 npm-debug.log
-README.md
+*.md
 .git
+.github
+LICENSE
+docs/

.eslintrc.js

@@ -3,7 +3,6 @@ module.exports = {
     'mantine',
     'plugin:@next/next/recommended',
     'plugin:jest/recommended',
-    'plugin:storybook/recommended',
     "eslint:recommended",
     "plugin:@typescript-eslint/eslint-recommended",
     "plugin:@typescript-eslint/recommended"

.github/ISSUE_TEMPLATE/feature-request.yml

@@ -22,13 +22,3 @@ body:
         - High (App breaking feature)
     validations:
       required: true
-  - type: checkboxes
-    id: idiot-check
-    attributes:
-      label: Please tick the boxes
-      description: Before submitting, please ensure that
-      options:
-        - label: You've read the [docs](https://github.com/ajnart/homarr#readme)
-          required: true
-        - label: You've checked for [duplicate issues](https://github.com/ajnart/homarr/issues)
-          required: true

.github/pull_request_template.md

@@ -14,10 +14,3 @@
 
 ### Screenshot _(if applicable)_
 > If you've introduced any significant UI changes, please include a screenshot.
-
-### Code Quality Checklist _(Please complete)_
-- [ ] All changes are backwards compatible
-- [ ] There are no (new) build warnings or errors
-- [ ] _(If a new config option is added)_ Attribute is outlined in the schema and documented
-- [ ] _(If a new dependency is added)_ Package is essential, and has been checked out for security or performance
-- [ ] Bumps version, if new feature added

.github/workflows/docker.yml

@@ -1,6 +1,8 @@
-name: Master docker CI
-# Workflow to build and publish docker image
-
+name: Master CI
+# This workflow uses actions that are not certified by GitHub.
+# They are provided by a third-party and are governed by
+# separate terms of service, privacy policy, and support
+# documentation.
 on:
   push:
     branches: [master]
@@ -22,72 +24,46 @@ jobs:
   # Push image to GitHub Packages.
   # See also https://docs.docker.com/docker-hub/builds/
   yarn_install_and_build:
-    # Will run yarn install && yarn build
-    runs-on: ubuntu-latest
-    steps:
-      - name: Setup
-        uses: actions/setup-node@v3
-      - name: Checkout
-        uses: actions/checkout@v3
-      - name: Get yarn cache directory path
-      # to help speed up build times
-        id: yarn-cache-dir-path
-        run: echo "::set-output name=dir::$(yarn cache dir)"
-      - name: Yarn cache
-      # to help speed up build times
-        uses: actions/cache@v3
-        id: yarn-cache # use this to check for `cache-hit` (`steps.yarn-cache.outputs.cache-hit != 'true'`)
-        with:
-          path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
-          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
-          restore-keys: ${{ runner.os }}-yarn-
-      - name: Nextjs cache
-        uses: actions/cache@v2
-        with:
-        # See here for caching with `yarn` https://github.com/actions/cache/blob/main/examples.md#node---yarn or you can leverage caching with actions/setup-node https://github.com/actions/setup-node
-          path: |
-            ~/.npm
-            ${{ github.workspace }}/.next/cache
-          # Generate a new cache whenever packages or source files change.
-          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 build
-      - name: Cache build output
-      # to copy needed files to docker build job
-        uses: actions/cache@v2
-        id: restore-build
-        with:
-          path: |
-             ./next.config.js
-             ./pages/
-             ./public/
-             ./.next/static/
-             ./.next/standalone/
-             ./packages.json
-          key: ${{ github.sha }}
-
-  docker_image_build_and_push:
-    needs: [yarn_install_and_build]
     runs-on: ubuntu-latest
     permissions:
       packages: write
       contents: read
     steps:
+
+      - name: Setup
+        uses: actions/setup-node@v3
+
       - name: Checkout
-        uses: actions/checkout@v2
-      - uses: actions/cache@v2
-        id: restore-build
+        uses: actions/checkout@v3
+
+      - name: Get yarn cache directory path
+        id: yarn-cache-dir-path
+        run: echo "::set-output name=dir::$(yarn config get cacheFolder)"
+      
+      - uses: actions/cache@v3
+        id: yarn-cache
         with:
+          path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
+          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
+          restore-keys: |
+            ${{ runner.os }}-yarn-
+
+      - name: Restore NextJS cache
+        uses: actions/cache@v2
+        with:
+          # See here for caching with `yarn` https://github.com/actions/cache/blob/main/examples.md#node---yarn or you can leverage caching with actions/setup-node https://github.com/actions/setup-node
           path: |
-             ./next.config.js
-             ./pages/
-             ./public/
-             ./.next/static/
-             ./.next/standalone/
-             ./packages.json
-          key: ${{ github.sha }}
+            ${{ github.workspace }}/.next/cache
+          # Generate a new cache whenever packages or source files change.
+          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 --immutable
+
+      - run: yarn build
+
       - name: Docker meta
         id: meta
         uses: docker/metadata-action@v4
@@ -98,10 +74,13 @@ jobs:
           tags: |
             type=raw,value=latest
             type=pep440,pattern={{version}}
+
       - name: Set up QEMU
         uses: docker/setup-qemu-action@v2
+
       - name: Set up Docker Buildx
         uses: docker/setup-buildx-action@v2
+
       - name: Login to GHCR
         uses: docker/login-action@v2
         with:
@@ -117,3 +96,5 @@ jobs:
           push: true
           tags: ${{ steps.meta.outputs.tags }}
           labels: ${{ steps.meta.outputs.labels }}
+          cache-from: type=gha
+          cache-to: type=gha,mode=max

.github/workflows/docker_dev.yml

@@ -16,7 +16,7 @@ on:
   workflow_dispatch:
     inputs:
       tags:
-        requierd: true
+        required: true
         description: 'Tags to deploy to'
 
 env:
@@ -30,6 +30,9 @@ jobs:
   # See also https://docs.docker.com/docker-hub/builds/
   yarn_install_and_build:
     runs-on: ubuntu-latest
+    permissions:
+      packages: write
+      contents: read
     steps:
 
       - name: Setup
@@ -40,67 +43,32 @@ jobs:
 
       - name: Get yarn cache directory path
         id: yarn-cache-dir-path
-        run: echo "::set-output name=dir::$(yarn cache dir)"
-
-      - name: Yarn cache
-        uses: actions/cache@v3
-        id: yarn-cache # use this to check for `cache-hit` (`steps.yarn-cache.outputs.cache-hit != 'true'`)
+        run: echo "::set-output name=dir::$(yarn config get cacheFolder)"
+      
+      - uses: actions/cache@v3
+        id: yarn-cache
         with:
           path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
           key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
-          restore-keys: ${{ runner.os }}-yarn-
+          restore-keys: |
+            ${{ runner.os }}-yarn-
 
-      - name: Nextjs cache
+      - name: Restore NextJS cache
         uses: actions/cache@v2
         with:
-        # See here for caching with `yarn` https://github.com/actions/cache/blob/main/examples.md#node---yarn or you can leverage caching with actions/setup-node https://github.com/actions/setup-node
+          # See here for caching with `yarn` https://github.com/actions/cache/blob/main/examples.md#node---yarn or you can leverage caching with actions/setup-node https://github.com/actions/setup-node
           path: |
-            ~/.npm
             ${{ github.workspace }}/.next/cache
           # Generate a new cache whenever packages or source files change.
           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') }}-
+          restore-keys: |
+            ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json') }}-
+
+      - run: yarn install --immutable
 
-      - run: yarn install --frozen-lockfile
       - run: yarn build
 
-      - name: Cache build output
-        uses: actions/cache@v2
-        id: restore-build
-        with:
-          path: |
-             ./next.config.js
-             ./pages/
-             ./public/
-             ./.next/static/
-             ./.next/standalone/
-             ./packages.json
-          key: ${{ github.sha }}
-
-  docker_image_build_and_push:
-    needs: [yarn_install_and_build]
-    runs-on: ubuntu-latest
-    permissions:
-      packages: write
-      contents: read
-    steps:
-
-      - name: Checkout
-        uses: actions/checkout@v2
-
-      - uses: actions/cache@v2
-        id: restore-build
-        with:
-          path: |
-             ./next.config.js
-             ./pages/
-             ./public/
-             ./.next/static/
-             ./.next/standalone/
-             ./packages.json
-          key: ${{ github.sha }}
-
       - name: Docker meta
         id: meta
         uses: docker/metadata-action@v4
@@ -134,3 +102,5 @@ jobs:
           push: ${{ github.event_name != 'pull_request' }}
           tags: ${{ steps.meta.outputs.tags }}
           labels: ${{ steps.meta.outputs.labels }}
+          cache-from: type=gha
+          cache-to: type=gha,mode=max

.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,30 +0,0 @@
-module.exports = {
-  stories: ['../src/components/**/*.story.mdx', '../src/components/**/*.story.*'],
-  addons: [
-    '@storybook/addon-links',
-    'storybook-addon-mock/register',
-    '@storybook/addon-essentials',
-  ],
-  typescript: {
-    check: false,
-    reactDocgen: false,
-  },
-  framework: '@storybook/react',
-  features: { emotionAlias: false },
-  webpackFinal: async (config, { configType }) => {
-    // `configType` has a value of 'DEVELOPMENT' or 'PRODUCTION'
-    // You can change the configuration based on that.
-    // 'PRODUCTION' is used when building the static version of storybook.
-
-    // https://github.com/polkadot-js/extension/issues/621#issuecomment-759341776
-    // framer-motion uses the .mjs notation and we need to include it so that webpack will
-    // transpile it for us correctly (enables using a CJS module inside an ESM).
-    config.module.rules.push({
-      test: /\.mjs$/,
-      include: /node_modules/,
-      type: 'javascript/auto',
-    });
-    // Return the altered config
-    return config;
-  },
-};

.storybook/preview.tsx

@@ -1,16 +0,0 @@
-import { MantineProvider, ColorSchemeProvider } from '@mantine/core';
-import { NotificationsProvider } from '@mantine/notifications';
-
-export const parameters = { layout: 'fullscreen' };
-
-function ThemeWrapper(props: { children: React.ReactNode }) {
-  return (
-    <ColorSchemeProvider colorScheme="light" toggleColorScheme={() => {}}>
-      <MantineProvider withGlobalStyles withNormalizeCSS>
-        <NotificationsProvider>{props.children}</NotificationsProvider>
-      </MantineProvider>
-    </ColorSchemeProvider>
-  );
-}
-
-export const decorators = [(renderStory: Function) => <ThemeWrapper>{renderStory()}</ThemeWrapper>];

.vscode/launch.json

@@ -0,0 +1,28 @@
+{
+	"version": "0.2.0",
+	"configurations": [
+		{
+			"name": "Next.js: debug server-side",
+			"type": "node-terminal",
+			"request": "launch",
+			"command": "yarn dev"
+		},
+		{
+			"name": "Next.js: debug client-side",
+			"type": "chrome",
+			"request": "launch",
+			"url": "http://localhost:3000"
+		},
+		{
+			"name": "Next.js: debug full stack",
+			"type": "node-terminal",
+			"request": "launch",
+			"command": "yarn dev",
+			"serverReadyAction": {
+				"pattern": "started server on .+, url: (https?://.+)",
+				"uriFormat": "%s",
+				"action": "debugWithChrome"
+			}
+		}
+	]
+}

.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

Dockerfile

@@ -1,13 +1,23 @@
 FROM node:16-alpine
 WORKDIR /app
+
+RUN apk add tzdata
+
+ENV NEXT_TELEMETRY_DISABLED 1
+
 ENV NODE_ENV production
-COPY /next.config.js ./
-COPY  /public ./public
-COPY /package.json ./package.json
-# Automatically leverage output traces to reduce image size. https://nextjs.org/docs/advanced-features/output-file-tracing
-COPY /.next/standalone ./
-COPY /.next/static ./.next/static
+
+COPY next.config.js ./
+COPY public ./public
+COPY package.json ./package.json
+
+# Automatically leverage output traces to reduce image size 
+# https://nextjs.org/docs/advanced-features/output-file-tracing
+COPY .next/standalone ./
+COPY .next/static ./.next/static
+
 EXPOSE 7575
+
 ENV PORT 7575
-VOLUME /app/data/configs
+
 CMD ["node", "server.js"]

README.md

@@ -1,69 +1,97 @@
-<h3 align="center">Homarr</h3>
-<br>
-<p align="center">
-  <i>Don't forget to star the repo if you enjoy the Homarr project!</i>
-  <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/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/71191962/169860380-856634fb-4f41-47cb-ba54-6a9e7b3b9c81.gif" />
 
-  </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/>
+<!-- Project Title -->
+<h1 align="center">Homarr</h1>
+
+<!-- Badges -->
+<p align="center">
+<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)
-  - [📖 Guides](#-guides)
-    - [🔁 Drag and Drop (Rearrange)](#-drag-and-drop-rearrange)   
-  - [🔧 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.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>
+</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](https://github.com/ajnart/homarr/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)
 
-**[⤴️ Back to Top](#-table-of-contents)**
+**[⤴️ Back to Top](#homarr)**
 
-## ⚡ Installation
+---
 
+## 🚀 Installation
 ### 🐳 Deploying from Docker Image
 > Supported architectures: x86-64, ARM, ARM64
 
@@ -71,29 +99,42 @@ _Requirements_:
 - [Docker](https://docs.docker.com/get-docker/)
 
 **Standard Docker Install**
-```sh
-docker run --name homarr -p 7575:7575 -v /data/docker/homarr:/app/data/configs -d ghcr.io/ajnart/homarr:latest
+```bash
+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
 
@@ -110,101 +151,51 @@ _Requirements_:
 - Start the NextJS web server: ``yarn start``
 - *Note: If you want to update the code in real time, launch with ``yarn dev``*
 
-## 📖 Guides
+**[⤴️ Back to Top](#homarr)**
 
-### 🔁 Drag and Drop (Rearrange)
-You can rearrange items by Drag and Dropping them to any position. To Drag an Drop, click and hold an icon for 250ms and then drag it to the desired position.
+---
 
-## 🔧 Configuration
-
-### 🧩  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/>
+</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/default.json

@@ -10,6 +10,17 @@
     }
   ],
   "settings": {
-    "searchUrl": "https://bing.com/search?q="
+    "searchUrl": "https://google.com/search?q="
+  },
+  "modules": {
+    "Search Bar": {
+      "enabled": true
+    },
+    "Date": {
+      "enabled": false
+    },
+    "Docker": {
+      "enabled": true
+    }
   }
 }

data/constants.ts

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

next.config.js

@@ -6,11 +6,5 @@ const withBundleAnalyzer = require('@next/bundle-analyzer')({
 
 module.exports = withBundleAnalyzer({
   reactStrictMode: false,
-  eslint: {
-    ignoreDuringBuilds: true,
-  },
-  experimental: {
-    outputStandalone: true,
-  },
-  basePath: env.BASE_URL,
+  output: 'standalone',
 });

package.json

@@ -1,8 +1,8 @@
 {
 	"name": "homarr",
-	"version": "0.5.0",
-	"private": "false",
+	"version": "0.8.2",
 	"description": "Homarr - A homepage for your server.",
+	"license": "MIT",
 	"repository": {
 		"type": "git",
 		"url": "https://github.com/ajnart/homarr"
@@ -20,61 +20,63 @@
 		"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",
+		"@ctrl/deluge": "^4.1.0",
+		"@ctrl/qbittorrent": "^4.1.0",
+		"@ctrl/shared-torrent": "^4.1.1",
+		"@ctrl/transmission": "^4.1.1",
+		"@dnd-kit/core": "^6.0.5",
+		"@dnd-kit/sortable": "^7.0.1",
+		"@dnd-kit/utilities": "^3.2.0",
+		"@mantine/core": "^4.2.12",
+		"@mantine/dates": "^4.2.12",
+		"@mantine/dropzone": "^4.2.12",
+		"@mantine/form": "^4.2.12",
+		"@mantine/hooks": "^4.2.12",
+		"@mantine/next": "^4.2.12",
+		"@mantine/notifications": "^4.2.12",
+		"@mantine/prism": "^4.2.12",
+		"@nivo/core": "^0.79.0",
+		"@nivo/line": "^0.79.1",
+		"@tabler/icons": "^1.76.0",
 		"axios": "^0.27.2",
-		"cookies-next": "^2.0.4",
-		"dayjs": "^1.11.2",
-		"framer-motion": "^6.3.1",
+		"cookies-next": "^2.1.1",
+		"dayjs": "^1.11.4",
+		"dockerode": "^3.3.2",
+		"framer-motion": "^6.5.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",
+		"next": "12.2.0",
+		"prism-react-renderer": "^1.3.5",
+		"react": "^18.2.0",
+		"react-dom": "^18.2.0",
+		"systeminformation": "^5.12.1",
 		"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",
+		"@next/bundle-analyzer": "12.2.0",
+		"@next/eslint-plugin-next": "12.2.0",
+		"@types/dockerode": "^3.3.9",
+		"@types/node": "^18.0.6",
+		"@types/react": "^18.0.15",
 		"@types/uuid": "^8.3.4",
-		"@typescript-eslint/eslint-plugin": "^5.16.0",
-		"@typescript-eslint/parser": "^5.16.0",
-		"eslint": "^8.11.0",
+		"@typescript-eslint/eslint-plugin": "^5.30.7",
+		"@typescript-eslint/parser": "^5.30.7",
+		"eslint": "^8.20.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-config-airbnb-typescript": "^17.0.0",
+		"eslint-config-mantine": "^2.0.0",
+		"eslint-plugin-import": "^2.26.0",
+		"eslint-plugin-jest": "^26.6.0",
+		"eslint-plugin-jsx-a11y": "^6.6.1",
+		"eslint-plugin-react": "^7.30.1",
+		"eslint-plugin-react-hooks": "^4.6.0",
+		"eslint-plugin-testing-library": "^5.5.1",
 		"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"
+		"jest": "^28.1.3",
+		"prettier": "^2.7.1",
+		"typescript": "^4.7.4"
 	},
-	"resolutions": {
-		"@types/react": "17.0.30"
-	}
+	"packageManager": "yarn@3.2.1"
 }

src/components/AppShelf/AddAppShelfItem.tsx

@@ -1,22 +1,29 @@
 import {
-  Modal,
+  ActionIcon,
+  Anchor,
+  Button,
   Center,
   Group,
-  TextInput,
   Image,
-  Button,
-  Select,
   LoadingOverlay,
-  ActionIcon,
-  Tooltip,
+  Modal,
+  MultiSelect,
+  ScrollArea,
+  Select,
+  Switch,
+  Tabs,
+  TextInput,
   Title,
+  Tooltip,
 } from '@mantine/core';
 import { useForm } from '@mantine/form';
-import { useState } from 'react';
-import { Apps } from 'tabler-icons-react';
+import { useDebouncedValue } from '@mantine/hooks';
+import { IconApps as Apps } from '@tabler/icons';
+import { useEffect, useState } from 'react';
 import { v4 as uuidv4 } from 'uuid';
 import { useConfig } from '../../tools/state';
-import { ServiceTypeList } from '../../tools/types';
+import { tryMatchPort, ServiceTypeList, StatusCodes } from '../../tools/types';
+import Tip from '../layout/Tip';
 
 export function AddItemShelfButton(props: any) {
   const [opened, setOpened] = useState(false);
@@ -47,11 +54,13 @@ export function AddItemShelfButton(props: any) {
   );
 }
 
-function MatchIcon(name: string, form: any) {
+function MatchIcon(name: string | undefined, form: any) {
+  if (name === undefined || name === '') return null;
   fetch(
     `https://cdn.jsdelivr.net/gh/walkxhub/dashboard-icons/png/${name
       .replace(/\s+/g, '-')
-      .toLowerCase()}.png`
+      .toLowerCase()
+      .replace(/^dash\.$/, 'dashdot')}.png`
   ).then((res) => {
     if (res.ok) {
       form.setFieldValue('icon', res.url);
@@ -61,30 +70,49 @@ function MatchIcon(name: string, form: any) {
   return false;
 }
 
+function MatchService(name: string, form: any) {
+  const service = ServiceTypeList.find((s) => s.toLowerCase() === name.toLowerCase());
+  if (service) {
+    form.setFieldValue('type', service);
+  }
+}
+
+const DEFAULT_ICON = '/favicon.svg';
+
 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 ?? '/favicon.svg',
+      icon: props.icon ?? DEFAULT_ICON,
       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),
+      openedUrl: props.openedUrl ?? (undefined as unknown as string),
+      status: props.status ?? ['200'],
+      newTab: props.newTab ?? true,
     },
     validate: {
       apiKey: () => null,
       // Validate icon with a regex
-      icon: (value: string) => {
-        // 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;
-      },
+      icon: (value: string) =>
+        // Disable matching to allow any values
+        null,
       // Validate url with a regex http/https
       url: (value: string) => {
         try {
@@ -94,9 +122,32 @@ export function AddAppShelfItemForm(props: { setOpened: (b: boolean) => void } &
         }
         return null;
       },
+      status: (value: string[]) => {
+        if (!value.length) {
+          return 'Please select a status code';
+        }
+        return null;
+      },
     },
   });
 
+  const [debounced, cancel] = useDebouncedValue(form.values.name, 250);
+  useEffect(() => {
+    if (form.values.name !== debounced || form.values.icon !== DEFAULT_ICON) return;
+    MatchIcon(form.values.name, form);
+    MatchService(form.values.name, form);
+    tryMatchPort(form.values.name, form);
+  }, [debounced]);
+
+  // 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>
@@ -111,6 +162,12 @@ export function AddAppShelfItemForm(props: { setOpened: (b: boolean) => void } &
       </Center>
       <form
         onSubmit={form.onSubmit(() => {
+          if (JSON.stringify(form.values.status) === JSON.stringify(['200'])) {
+            form.values.status = undefined;
+          }
+          if (form.values.newTab === true) {
+            form.values.newTab = undefined;
+          }
           // If service already exists, update it.
           if (config.services && config.services.find((s) => s.id === form.values.id)) {
             setConfig({
@@ -135,58 +192,171 @@ export function AddAppShelfItemForm(props: { setOpened: (b: boolean) => void } &
           form.reset();
         })}
       >
-        <Group direction="column" grow>
-          <TextInput
-            required
-            label="Service name"
-            placeholder="Plex"
-            value={form.values.name}
-            onChange={(event) => {
-              form.setFieldValue('name', event.currentTarget.value);
-              const match = MatchIcon(event.currentTarget.value, form);
-              if (match) {
-                form.setFieldValue('icon', match);
-              }
-            }}
-            error={form.errors.name && 'Invalid icon url'}
-          />
-
-          <TextInput
-            required
-            label="Icon url"
-            placeholder="https://i.gifer.com/ANPC.gif"
-            {...form.getInputProps('icon')}
-          />
-          <TextInput
-            required
-            label="Service url"
-            placeholder="http://localhost:7575"
-            {...form.getInputProps('url')}
-          />
-          <Select
-            label="Select the type of service (used for API calls)"
-            defaultValue="Other"
-            placeholder="Pick one"
-            required
-            searchable
-            data={ServiceTypeList}
-            {...form.getInputProps('type')}
-          />
-          <LoadingOverlay visible={isLoading} />
-          {(form.values.type === 'Sonarr' || form.values.type === 'Radarr') && (
-            <TextInput
-              required
-              label="API key"
-              placeholder="Your API key"
-              value={form.values.apiKey}
-              onChange={(event) => {
-                form.setFieldValue('apiKey', event.currentTarget.value);
-              }}
-              error={form.errors.apiKey && 'Invalid API key'}
-            />
-          )}
-        </Group>
+        <Tabs grow>
+          <Tabs.Tab label="Options">
+            <ScrollArea style={{ height: 500 }} scrollbarSize={4}>
+              <Group direction="column" grow>
+                <TextInput
+                  required
+                  label="Service name"
+                  placeholder="Plex"
+                  {...form.getInputProps('name')}
+                />
 
+                <TextInput
+                  required
+                  label="Icon URL"
+                  placeholder={DEFAULT_ICON}
+                  {...form.getInputProps('icon')}
+                />
+                <TextInput
+                  required
+                  label="Service URL"
+                  placeholder="http://localhost:7575"
+                  {...form.getInputProps('url')}
+                />
+                <TextInput
+                  label="On Click URL"
+                  placeholder="http://sonarr.example.com"
+                  {...form.getInputProps('openedUrl')}
+                />
+                <Select
+                  label="Service type"
+                  defaultValue="Other"
+                  placeholder="Pick one"
+                  required
+                  searchable
+                  data={ServiceTypeList}
+                  {...form.getInputProps('type')}
+                />
+                <Select
+                  label="Category"
+                  data={categoryList}
+                  placeholder="Select a category or create a new one"
+                  nothingFound="Nothing found"
+                  searchable
+                  clearable
+                  creatable
+                  onClick={(e) => {
+                    e.preventDefault();
+                  }}
+                  getCreateLabel={(query) => `+ Create "${query}"`}
+                  onCreate={(query) => {}}
+                  {...form.getInputProps('category')}
+                />
+                <LoadingOverlay visible={isLoading} />
+                {(form.values.type === 'Sonarr' ||
+                  form.values.type === 'Radarr' ||
+                  form.values.type === 'Lidarr' ||
+                  form.values.type === 'Readarr') && (
+                  <>
+                    <TextInput
+                      required
+                      label="API key"
+                      placeholder="Your API key"
+                      value={form.values.apiKey}
+                      onChange={(event) => {
+                        form.setFieldValue('apiKey', event.currentTarget.value);
+                      }}
+                      error={form.errors.apiKey && 'Invalid API key'}
+                    />
+                    <Tip>
+                      Get your API key{' '}
+                      <Anchor
+                        target="_blank"
+                        weight="bold"
+                        style={{ fontStyle: 'inherit', fontSize: 'inherit' }}
+                        href={`${hostname}/settings/general`}
+                      >
+                        here.
+                      </Anchor>
+                    </Tip>
+                  </>
+                )}
+                {form.values.type === 'qBittorrent' && (
+                  <>
+                    <TextInput
+                      required
+                      label="Username"
+                      placeholder="admin"
+                      value={form.values.username}
+                      onChange={(event) => {
+                        form.setFieldValue('username', event.currentTarget.value);
+                      }}
+                      error={form.errors.username && 'Invalid username'}
+                    />
+                    <TextInput
+                      required
+                      label="Password"
+                      placeholder="adminadmin"
+                      value={form.values.password}
+                      onChange={(event) => {
+                        form.setFieldValue('password', event.currentTarget.value);
+                      }}
+                      error={form.errors.password && 'Invalid password'}
+                    />
+                  </>
+                )}
+                {form.values.type === 'Deluge' && (
+                  <>
+                    <TextInput
+                      label="Password"
+                      placeholder="password"
+                      value={form.values.password}
+                      onChange={(event) => {
+                        form.setFieldValue('password', event.currentTarget.value);
+                      }}
+                      error={form.errors.password && 'Invalid password'}
+                    />
+                  </>
+                )}
+                {form.values.type === 'Transmission' && (
+                  <>
+                    <TextInput
+                      label="Username"
+                      placeholder="admin"
+                      value={form.values.username}
+                      onChange={(event) => {
+                        form.setFieldValue('username', event.currentTarget.value);
+                      }}
+                      error={form.errors.username && 'Invalid username'}
+                    />
+                    <TextInput
+                      label="Password"
+                      placeholder="adminadmin"
+                      value={form.values.password}
+                      onChange={(event) => {
+                        form.setFieldValue('password', event.currentTarget.value);
+                      }}
+                      error={form.errors.password && 'Invalid password'}
+                    />
+                  </>
+                )}
+              </Group>
+            </ScrollArea>
+          </Tabs.Tab>
+          <Tabs.Tab label="Advanced Options">
+            <Group direction="column" grow>
+              <MultiSelect
+                required
+                label="HTTP Status Codes"
+                data={StatusCodes}
+                placeholder="Select valid status codes"
+                clearButtonLabel="Clear selection"
+                nothingFound="Nothing found"
+                defaultValue={['200']}
+                clearable
+                searchable
+                {...form.getInputProps('status')}
+              />
+              <Switch
+                label="Open service in new tab"
+                defaultChecked={form.values.newTab}
+                {...form.getInputProps('newTab')}
+              />
+            </Group>
+          </Tabs.Tab>
+        </Tabs>
         <Group grow position="center" mt="xl">
           <Button type="submit">{props.message ?? 'Add service'}</Button>
         </Group>

src/components/AppShelf/AppShelf.story.tsx

@@ -1,27 +0,0 @@
-import { SimpleGrid } from '@mantine/core';
-import AppShelf from './AppShelf';
-import { AppShelfItem } from './AppShelfItem';
-
-export default {
-  title: 'Item Shelf',
-  component: AppShelf,
-  args: {
-    service: {
-      name: 'qBittorrent',
-      url: 'http://',
-      icon: 'https://cdn.jsdelivr.net/gh/IceWhaleTech/CasaOS-AppStore@main/Apps/qBittorrent/icon.png',
-      type: 'qBittorrent',
-      apiKey: '',
-    },
-  },
-};
-
-export const Default = (args: any) => <AppShelf {...args} />;
-export const One = (args: any) => <AppShelfItem {...args} />;
-export const Ten = (args: any) => (
-  <SimpleGrid>
-    {Array.from(Array(10)).map((_, i) => (
-      <AppShelfItem {...args} key={i} />
-    ))}
-  </SimpleGrid>
-);

src/components/AppShelf/AppShelf.tsx

@@ -1,26 +1,74 @@
 import React, { useState } from 'react';
-import { Grid } from '@mantine/core';
+import { Accordion, createStyles, Grid, Group, Paper, useMantineColorScheme } from '@mantine/core';
 import {
   closestCenter,
   DndContext,
   DragOverlay,
   MouseSensor,
+  TouchSensor,
   useSensor,
   useSensors,
 } from '@dnd-kit/core';
 import { arrayMove, SortableContext } from '@dnd-kit/sortable';
+import { useLocalStorage } from '@mantine/hooks';
 import { useConfig } from '../../tools/state';
 
 import { SortableAppShelfItem, AppShelfItem } from './AppShelfItem';
+import { ModuleMenu, ModuleWrapper } from '../modules/moduleWrapper';
+import { DownloadsModule } from '../modules';
+import DownloadComponent from '../modules/downloads/DownloadsModule';
+
+const useStyles = createStyles((theme, _params) => ({
+  item: {
+    overflow: 'hidden',
+    borderLeft: '3px solid transparent',
+    borderRight: '3px solid transparent',
+    borderBottom: '3px solid transparent',
+    borderRadius: '20px',
+    borderColor: theme.colorScheme === 'dark' ? theme.colors.dark[5] : theme.colors.gray[1],
+    marginTop: theme.spacing.md,
+  },
+
+  control: {
+    backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[5] : theme.colors.gray[1],
+    borderRadius: theme.spacing.md,
+
+    '&:hover': {
+      backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[5] : theme.colors.gray[1],
+    },
+  },
+
+  content: {
+    margin: theme.spacing.md,
+  },
+
+  label: {
+    overflow: 'visible',
+  },
+}));
 
 const AppShelf = (props: any) => {
+  const { classes, cx } = useStyles(props);
+  const [toggledCategories, settoggledCategories] = useLocalStorage({
+    key: 'app-shelf-toggled',
+    // This is a bit of a hack to get the 5 first categories to be toggled on by default
+    defaultValue: { 0: true, 1: true, 2: true, 3: true, 4: true } as Record<string, boolean>,
+  });
   const [activeId, setActiveId] = useState(null);
   const { config, setConfig } = useConfig();
+  const { colorScheme } = useMantineColorScheme();
+
   const sensors = useSensors(
+    useSensor(TouchSensor, {
+      activationConstraint: {
+        delay: 500,
+        tolerance: 5,
+      },
+    }),
     useSensor(MouseSensor, {
       // Require the mouse to move by 10 pixels before activating
       activationConstraint: {
-        delay: 250,
+        delay: 500,
         tolerance: 5,
       },
     })
@@ -45,34 +93,116 @@ const AppShelf = (props: any) => {
 
     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[]);
 
-  return (
-    <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)',
-        }}
+  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}
       >
-        {activeId ? (
-          <AppShelfItem service={config.services.find((e) => e.id === activeId)} id={activeId} />
-        ) : null}
-      </DragOverlay>
-    </DndContext>
+        <SortableContext items={config.services}>
+          <Grid gutter="xl" align="center">
+            {filtered.map((service) => (
+              <Grid.Col
+                key={service.id}
+                span={6}
+                xl={config.settings.appCardWidth || 2}
+                xs={4}
+                sm={3}
+                md={3}
+              >
+                <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
+    );
+    const downloadEnabled = config.modules?.[DownloadsModule.title]?.enabled ?? false;
+    // Create an item with 0: true, 1: true, 2: true... For each category
+    return (
+      // Return one item for each category
+      <Group grow direction="column">
+        <Accordion
+          disableIconRotation
+          classNames={classes}
+          order={2}
+          iconPosition="right"
+          multiple
+          initialState={toggledCategories}
+          onChange={(idx) => settoggledCategories(idx)}
+        >
+          {categoryList.map((category, idx) => (
+            <Accordion.Item key={category} label={category}>
+              {item(category)}
+            </Accordion.Item>
+          ))}
+          {/* Return the item for all services without category */}
+          {noCategory && noCategory.length > 0 ? (
+            <Accordion.Item key="Other" label="Other">
+              {item()}
+            </Accordion.Item>
+          ) : null}
+          {downloadEnabled ? (
+            <Accordion.Item key="Downloads" label="Your downloads">
+              <Paper
+                p="lg"
+                radius="lg"
+                style={{
+                  background: `rgba(${colorScheme === 'dark' ? '37, 38, 43,' : '255, 255, 255,'} \
+                ${(config.settings.appOpacity || 100) / 100}`,
+                  borderColor: `rgba(${colorScheme === 'dark' ? '37, 38, 43,' : '233, 236, 239,'} \
+                ${(config.settings.appOpacity || 100) / 100}`,
+                }}
+              >
+                <ModuleMenu module={DownloadsModule} />
+                <DownloadComponent />
+              </Paper>
+            </Accordion.Item>
+          ) : null}
+        </Accordion>
+      </Group>
+    );
+  }
+  return (
+    <Group grow direction="column">
+      {item()}
+      <ModuleWrapper mt="xl" module={DownloadsModule} />
+    </Group>
   );
 };
 

src/components/AppShelf/AppShelfItem.tsx

@@ -6,6 +6,7 @@ import {
   Image,
   Center,
   createStyles,
+  useMantineColorScheme,
 } from '@mantine/core';
 import { motion } from 'framer-motion';
 import { useState } from 'react';
@@ -14,6 +15,7 @@ import { CSS } from '@dnd-kit/utilities';
 import { serviceItem } from '../../tools/types';
 import PingComponent from '../modules/ping/PingModule';
 import AppShelfMenu from './AppShelfMenu';
+import { useConfig } from '../../tools/state';
 
 const useStyles = createStyles((theme) => ({
   item: {
@@ -23,6 +25,9 @@ const useStyles = createStyles((theme) => ({
       boxShadow: `${theme.shadows.md} !important`,
       transform: 'scale(1.05)',
     },
+    [theme.fn.smallerThan('sm')]: {
+      WebkitUserSelect: 'none',
+    },
   },
 }));
 
@@ -46,7 +51,9 @@ export function SortableAppShelfItem(props: any) {
 export function AppShelfItem(props: any) {
   const { service }: { service: serviceItem } = props;
   const [hovering, setHovering] = useState(false);
-  const { classes, theme } = useStyles();
+  const { config } = useConfig();
+  const { colorScheme } = useMantineColorScheme();
+  const { classes } = useStyles();
   return (
     <motion.div
       animate={{
@@ -62,11 +69,22 @@ export function AppShelfItem(props: any) {
         setHovering(false);
       }}
     >
-      <Card withBorder radius="lg" shadow="md" className={classes.item}>
+      <Card
+        withBorder
+        radius="lg"
+        shadow="md"
+        className={classes.item}
+        style={{
+          background: `rgba(${colorScheme === 'dark' ? '37, 38, 43,' : '255, 255, 255,'} \
+          ${(config.settings.appOpacity || 100) / 100}`,
+          borderColor: `rgba(${colorScheme === 'dark' ? '37, 38, 43,' : '233, 236, 239,'} \
+          ${(config.settings.appOpacity || 100) / 100}`,
+        }}
+      >
         <Card.Section>
           <Anchor
-            target="_blank"
-            href={service.url}
+            target={service.newTab === false ? '_top' : '_blank'}
+            href={service.openedUrl ? service.openedUrl : service.url}
             style={{ color: 'inherit', fontStyle: 'inherit', fontSize: 'inherit' }}
           >
             <Text mt="sm" align="center" lineClamp={1} weight={550}>
@@ -99,22 +117,24 @@ export function AppShelfItem(props: any) {
             >
               <motion.i
                 whileHover={{
-                  cursor: 'pointer',
                   scale: 1.1,
                 }}
               >
                 <Image
+                  styles={{ root: { cursor: 'pointer' } }}
                   width={80}
                   height={80}
                   src={service.icon}
                   fit="contain"
                   onClick={() => {
-                    window.open(service.url);
+                    if (service.openedUrl) {
+                      window.open(service.openedUrl, service.newTab === false ? '_top' : '_blank');
+                    } else window.open(service.url, service.newTab === false ? '_top' : '_blank');
                   }}
                 />
               </motion.i>
             </AspectRatio>
-            <PingComponent url={service.url} />
+            <PingComponent url={service.url} status={service.status} />
           </Card.Section>
         </Center>
       </Card>

src/components/AppShelf/AppShelfMenu.tsx

@@ -1,12 +1,13 @@
 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);
@@ -19,31 +20,23 @@ export default function AppShelfMenu(props: any) {
         onClose={() => setOpened(false)}
         title="Modify a service"
       >
-        <AddAppShelfItemForm
-          setOpened={setOpened}
-          name={service.name}
-          id={service.id}
-          type={service.type}
-          url={service.url}
-          icon={service.icon}
-          apiKey={service.apiKey}
-          message="Save service"
-        />
+        <AddAppShelfItemForm setOpened={setOpened} {...service} message="Save service" />
       </Modal>
       <Menu
         position="right"
         radius="md"
+        shadow="xl"
         styles={{
           body: {
-            backgroundColor:
-              theme.colorScheme === 'dark' ? theme.colors.dark[5] : theme.colors.gray[1],
+            // 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)}
         >
@@ -61,7 +54,7 @@ export default function AppShelfMenu(props: any) {
               autoClose: 5000,
               title: (
                 <Text>
-                  Service <b>{service.name}</b> removed successfully
+                  Service <b>{service.name}</b> removed successfully!
                 </Text>
               ),
               color: 'green',
@@ -69,7 +62,7 @@ export default function AppShelfMenu(props: any) {
               message: undefined,
             });
           }}
-          icon={<Trash size={14} />}
+          icon={<Trash />}
         >
           Delete
         </Menu.Item>

src/components/ColorSchemeToggle/ColorSchemeSwitch.tsx

@@ -1,6 +1,7 @@
 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';
+import { useConfig } from '../../tools/state';
 
 const useStyles = createStyles((theme) => ({
   root: {
@@ -29,6 +30,7 @@ const useStyles = createStyles((theme) => ({
 }));
 
 export function ColorSchemeSwitch() {
+  const { config } = useConfig();
   const { colorScheme, toggleColorScheme } = useMantineColorScheme();
   const { classes, cx } = useStyles();
 

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/ConfigChanger.tsx

@@ -1,5 +1,5 @@
 import { Center, Loader, Select, Tooltip } from '@mantine/core';
-import { setCookies } from 'cookies-next';
+import { setCookie } from 'cookies-next';
 import { useEffect, useState } from 'react';
 import { useConfig } from '../../tools/state';
 
@@ -26,7 +26,10 @@ export default function ConfigChanger() {
       label="Config loader"
       onChange={(e) => {
         loadConfig(e ?? 'default');
-        setCookies('config-name', e ?? 'default', { maxAge: 60 * 60 * 24 * 30 });
+        setCookie('config-name', e ?? 'default', {
+          maxAge: 60 * 60 * 24 * 30,
+          sameSite: 'strict',
+        });
       }}
       data={
         // If config list is empty, return the current config

src/components/Config/LoadConfig.tsx

@@ -1,10 +1,16 @@
 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';
 import { useRouter } from 'next/router';
-import { setCookies } from 'cookies-next';
+import { setCookie } from 'cookies-next';
 import { useConfig } from '../../tools/state';
 import { Config } from '../../tools/types';
 import { migrateToIdConfig } from '../../tools/migrate';
@@ -84,7 +90,10 @@ export default function LoadConfigComponent(props: any) {
             icon: <Check />,
             message: undefined,
           });
-          setCookies('config-name', newConfig.name, { maxAge: 60 * 60 * 24 * 30 });
+          setCookie('config-name', newConfig.name, {
+            maxAge: 60 * 60 * 24 * 30,
+            sameSite: 'strict',
+          });
           const migratedConfig = migrateToIdConfig(newConfig);
           setConfig(migratedConfig);
         });

src/components/Config/SaveConfig.tsx

@@ -1,18 +1,102 @@
-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}>
-      Download your config
-    </Button>
+    <Group spacing="xs">
+      <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
+            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 size="xs" leftIcon={<Download />} variant="outline" onClick={onClick}>
+        Download config
+      </Button>
+      <Button
+        size="xs"
+        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 size="xs" 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/AdvancedSettings.tsx

@@ -0,0 +1,65 @@
+import { TextInput, Group, Button } from '@mantine/core';
+import { useForm } from '@mantine/form';
+import { useConfig } from '../../tools/state';
+import { ColorSelector } from './ColorSelector';
+import { OpacitySelector } from './OpacitySelector';
+import { AppCardWidthSelector } from './AppCardWidthSelector';
+import { ShadeSelector } from './ShadeSelector';
+
+export default function TitleChanger() {
+  const { config, setConfig } = useConfig();
+
+  const form = useForm({
+    initialValues: {
+      title: config.settings.title,
+      logo: config.settings.logo,
+      favicon: config.settings.favicon,
+      background: config.settings.background,
+    },
+  });
+
+  const saveChanges = (values: {
+    title?: string;
+    logo?: string;
+    favicon?: string;
+    background?: string;
+  }) => {
+    setConfig({
+      ...config,
+      settings: {
+        ...config.settings,
+        title: values.title,
+        logo: values.logo,
+        favicon: values.favicon,
+        background: values.background,
+      },
+    });
+  };
+
+  return (
+    <Group direction="column" grow mb="lg">
+      <form onSubmit={form.onSubmit((values) => saveChanges(values))}>
+        <Group grow direction="column">
+          <TextInput label="Page title" placeholder="Homarr 🦞" {...form.getInputProps('title')} />
+          <TextInput label="Logo" placeholder="/img/logo.png" {...form.getInputProps('logo')} />
+          <TextInput
+            label="Favicon"
+            placeholder="/favicon.svg"
+            {...form.getInputProps('favicon')}
+          />
+          <TextInput
+            label="Background"
+            placeholder="/img/background.png"
+            {...form.getInputProps('background')}
+          />
+          <Button type="submit">Save</Button>
+        </Group>
+      </form>
+      <ColorSelector type="primary" />
+      <ColorSelector type="secondary" />
+      <ShadeSelector />
+      <OpacitySelector />
+      <AppCardWidthSelector />
+    </Group>
+  );
+}

src/components/Settings/AppCardWidthSelector.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { Group, Text, Slider } from '@mantine/core';
+import { useConfig } from '../../tools/state';
+
+export function AppCardWidthSelector() {
+  const { config, setConfig } = useConfig();
+
+  const setappCardWidth = (appCardWidth: number) => {
+    setConfig({
+      ...config,
+      settings: {
+        ...config.settings,
+        appCardWidth,
+      },
+    });
+  };
+
+  return (
+    <Group direction="column" spacing="xs" grow>
+      <Text>App Width</Text>
+      <Slider
+        label={null}
+        defaultValue={config.settings.appCardWidth}
+        step={0.2}
+        min={0.8}
+        max={2}
+        styles={{ markLabel: { fontSize: 'xx-small' } }}
+        onChange={(value) => setappCardWidth(value)}
+      />
+    </Group>
+  );
+}

src/components/Settings/ColorSelector.tsx

@@ -0,0 +1,96 @@
+import React, { useState } from 'react';
+import { ColorSwatch, Group, Popover, Text, useMantineTheme } from '@mantine/core';
+import { useConfig } from '../../tools/state';
+import { useColorTheme } from '../../tools/color';
+
+interface ColorControlProps {
+  type: string;
+}
+
+export function ColorSelector({ type }: ColorControlProps) {
+  const { config, setConfig } = useConfig();
+  const [opened, setOpened] = useState(false);
+
+  const { primaryColor, secondaryColor, setPrimaryColor, setSecondaryColor } = useColorTheme();
+
+  const theme = useMantineTheme();
+  const colors = Object.keys(theme.colors).map((color) => ({
+    swatch: theme.colors[color][6],
+    color,
+  }));
+
+  const configColor = type === 'primary' ? primaryColor : secondaryColor;
+
+  const setConfigColor = (color: string) => {
+    if (type === 'primary') {
+      setPrimaryColor(color);
+      setConfig({
+        ...config,
+        settings: {
+          ...config.settings,
+          primaryColor: color,
+        },
+      });
+    } else {
+      setSecondaryColor(color);
+      setConfig({
+        ...config,
+        settings: {
+          ...config.settings,
+          secondaryColor: color,
+        },
+      });
+    }
+  };
+
+  const swatches = colors.map(({ color, swatch }) => (
+    <ColorSwatch
+      component="button"
+      type="button"
+      onClick={() => setConfigColor(color)}
+      key={color}
+      color={swatch}
+      size={22}
+      style={{ color: theme.white, cursor: 'pointer' }}
+    />
+  ));
+
+  return (
+    <Group direction="row" spacing={3}>
+      <Popover
+        opened={opened}
+        onClose={() => setOpened(false)}
+        transitionDuration={0}
+        target={
+          <ColorSwatch
+            component="button"
+            type="button"
+            color={theme.colors[configColor][6]}
+            onClick={() => setOpened((o) => !o)}
+            size={22}
+            style={{ display: 'block', cursor: 'pointer' }}
+          />
+        }
+        styles={{
+          root: {
+            marginRight: theme.spacing.xs,
+          },
+          body: {
+            width: 152,
+            backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[8] : theme.white,
+          },
+          arrow: {
+            backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[8] : theme.white,
+          },
+        }}
+        position="bottom"
+        placement="end"
+        withArrow
+        arrowSize={3}
+      >
+        <Group spacing="xs">{swatches}</Group>
+      </Popover>
+      <Text>{type[0].toUpperCase() + type.slice(1)} color</Text>
+    </Group>
+  );
+}

src/components/Settings/CommonSettings.tsx

@@ -0,0 +1,86 @@
+import { Group, Text, SegmentedControl, TextInput } from '@mantine/core';
+import { useState } from 'react';
+import { useConfig } from '../../tools/state';
+import { ColorSchemeSwitch } from '../ColorSchemeToggle/ColorSchemeSwitch';
+import { WidgetsPositionSwitch } from '../WidgetsPositionSwitch/WidgetsPositionSwitch';
+import ConfigChanger from '../Config/ConfigChanger';
+import SaveConfigComponent from '../Config/SaveConfig';
+import ModuleEnabler from './ModuleEnabler';
+import Tip from '../layout/Tip';
+
+export default function CommonSettings(args: any) {
+  const { config, setConfig } = useConfig();
+
+  const matches = [
+    { label: 'Google', value: 'https://google.com/search?q=' },
+    { label: 'DuckDuckGo', value: 'https://duckduckgo.com/?q=' },
+    { label: 'Bing', value: 'https://bing.com/search?q=' },
+    { label: 'Custom', value: 'Custom' },
+  ];
+
+  const [customSearchUrl, setCustomSearchUrl] = useState(config.settings.searchUrl);
+  const [searchUrl, setSearchUrl] = useState(
+    matches.find((match) => match.value === config.settings.searchUrl)?.value ?? 'Custom'
+  );
+
+  return (
+    <Group direction="column" grow mb="lg">
+      <Group grow direction="column" spacing={0}>
+        <Text>Search engine</Text>
+        <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.
+        </Tip>
+        <SegmentedControl
+          fullWidth
+          mb="sm"
+          title="Search engine"
+          value={
+            // Match config.settings.searchUrl with a key in the matches array
+            searchUrl
+          }
+          onChange={
+            // Set config.settings.searchUrl to the value of the selected item
+            (e) => {
+              setSearchUrl(e);
+              setConfig({
+                ...config,
+                settings: {
+                  ...config.settings,
+                  searchUrl: e,
+                },
+              });
+            }
+          }
+          data={matches}
+        />
+        {searchUrl === 'Custom' && (
+          <>
+            <Tip>%s can be used as a placeholder for the query.</Tip>
+            <TextInput
+              label="Query URL"
+              placeholder="Custom query URL"
+              value={customSearchUrl}
+              onChange={(event) => {
+                setCustomSearchUrl(event.currentTarget.value);
+                setConfig({
+                  ...config,
+                  settings: {
+                    ...config.settings,
+                    searchUrl: event.currentTarget.value,
+                  },
+                });
+              }}
+            />
+          </>
+        )}
+      </Group>
+      <ColorSchemeSwitch />
+      <WidgetsPositionSwitch />
+      <ModuleEnabler />
+      <ConfigChanger />
+      <SaveConfigComponent />
+      <Tip>Upload your config file by dragging and dropping it onto the page!</Tip>
+    </Group>
+  );
+}

src/components/Settings/Credits.tsx

@@ -0,0 +1,44 @@
+import { Group, ActionIcon, Anchor, Text } from '@mantine/core';
+import { IconBrandDiscord, IconBrandGithub } from '@tabler/icons';
+import { CURRENT_VERSION } from '../../../data/constants';
+
+export default function Credits(props: any) {
+  return (
+    <Group position="center" direction="row" mr="xs">
+      <Group spacing={0}>
+        <ActionIcon<'a'> component="a" href="https://github.com/ajnart/homarr" size="lg">
+          <IconBrandGithub size={18} />
+        </ActionIcon>
+        <Text
+          style={{
+            position: 'relative',
+            fontSize: '0.90rem',
+            color: 'gray',
+          }}
+        >
+          {CURRENT_VERSION}
+        </Text>
+      </Group>
+      <Group spacing={1}>
+        <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>
+        <ActionIcon<'a'> component="a" href="https://discord.gg/aCsmEV5RgA" size="lg">
+          <IconBrandDiscord size={18} />
+        </ActionIcon>
+      </Group>
+    </Group>
+  );
+}

src/components/Settings/ModuleEnabler.tsx

@@ -1,4 +1,4 @@
-import { Group, Switch } from '@mantine/core';
+import { Checkbox, Group, SimpleGrid, Title } from '@mantine/core';
 import * as Modules from '../modules';
 import { useConfig } from '../../tools/state';
 
@@ -7,26 +7,29 @@ export default function ModuleEnabler(props: any) {
   const modules = Object.values(Modules).map((module) => module);
   return (
     <Group direction="column">
-      {modules.map((module) => (
-        <Switch
-          key={module.title}
-          size="md"
-          checked={config.modules?.[module.title]?.enabled ?? false}
-          label={`Enable ${module.title} module`}
-          onChange={(e) => {
-            setConfig({
-              ...config,
-              modules: {
-                ...config.modules,
-                [module.title]: {
-                  ...config.modules?.[module.title],
-                  enabled: e.currentTarget.checked,
+      <Title order={4}>Module enabler</Title>
+      <SimpleGrid cols={2} spacing="md">
+        {modules.map((module) => (
+          <Checkbox
+            key={module.title}
+            size="md"
+            checked={config.modules?.[module.title]?.enabled ?? false}
+            label={`${module.title}`}
+            onChange={(e) => {
+              setConfig({
+                ...config,
+                modules: {
+                  ...config.modules,
+                  [module.title]: {
+                    ...config.modules?.[module.title],
+                    enabled: e.currentTarget.checked,
+                  },
                 },
-              },
-            });
-          }}
-        />
-      ))}
+              });
+            }}
+          />
+        ))}
+      </SimpleGrid>
     </Group>
   );
 }

src/components/Settings/OpacitySelector.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import { Group, Text, Slider } from '@mantine/core';
+import { useConfig } from '../../tools/state';
+
+export function OpacitySelector() {
+  const { config, setConfig } = useConfig();
+
+  const MARKS = [
+    { value: 10, label: '10' },
+    { value: 20, label: '20' },
+    { value: 30, label: '30' },
+    { value: 40, label: '40' },
+    { value: 50, label: '50' },
+    { value: 60, label: '60' },
+    { value: 70, label: '70' },
+    { value: 80, label: '80' },
+    { value: 90, label: '90' },
+    { value: 100, label: '100' },
+  ];
+
+  const setConfigOpacity = (opacity: number) => {
+    setConfig({
+      ...config,
+      settings: {
+        ...config.settings,
+        appOpacity: opacity,
+      },
+    });
+  };
+
+  return (
+    <Group direction="column" spacing="xs" grow>
+      <Text>App Opacity</Text>
+      <Slider
+        defaultValue={config.settings.appOpacity || 100}
+        step={10}
+        min={10}
+        marks={MARKS}
+        styles={{ markLabel: { fontSize: 'xx-small' } }}
+        onChange={(value) => setConfigOpacity(value)}
+      />
+    </Group>
+  );
+}

src/components/Settings/SettingsMenu.story.tsx

@@ -1,10 +0,0 @@
-import { SettingsMenuButton } from './SettingsMenu';
-
-export default {
-  title: ' menu',
-  args: {
-    opened: false,
-  },
-};
-
-export const Default = (args: any) => <SettingsMenuButton {...args} />;

src/components/Settings/SettingsMenu.tsx

@@ -1,114 +1,45 @@
-import {
-  ActionIcon,
-  Group,
-  Modal,
-  Title,
-  Text,
-  Tooltip,
-  SegmentedControl,
-  TextInput,
-} from '@mantine/core';
-import { useColorScheme } from '@mantine/hooks';
+import { ActionIcon, Title, Tooltip, Drawer, Tabs, ScrollArea } from '@mantine/core';
+import { useHotkeys } from '@mantine/hooks';
 import { useState } from 'react';
-import { Settings as SettingsIcon } from 'tabler-icons-react';
-import { useConfig } from '../../tools/state';
-import { ColorSchemeSwitch } from '../ColorSchemeToggle/ColorSchemeSwitch';
-import ConfigChanger from '../Config/ConfigChanger';
-import SaveConfigComponent from '../Config/SaveConfig';
-import ModuleEnabler from './ModuleEnabler';
+import { IconSettings } from '@tabler/icons';
+import AdvancedSettings from './AdvancedSettings';
+import CommonSettings from './CommonSettings';
+import Credits from './Credits';
 
 function SettingsMenu(props: any) {
-  const { config, setConfig } = useConfig();
-  const colorScheme = useColorScheme();
-  const { current, latest } = props;
-
-  const matches = [
-    { label: 'Google', value: 'https://google.com/search?q=' },
-    { label: 'DuckDuckGo', value: 'https://duckduckgo.com/?q=' },
-    { label: 'Bing', value: 'https://bing.com/search?q=' },
-    { label: 'Custom', value: 'Custom' },
-  ];
-
-  const [customSearchUrl, setCustomSearchUrl] = useState(config.settings.searchUrl);
-  const [searchUrl, setSearchUrl] = useState(
-    matches.find((match) => match.value === config.settings.searchUrl)?.value ?? 'Custom'
-  );
-
   return (
-    <Group direction="column" grow>
-      <Group grow direction="column" spacing={0}>
-        <Text>Search engine</Text>
-        <SegmentedControl
-          fullWidth
-          title="Search engine"
-          value={
-            // Match config.settings.searchUrl with a key in the matches array
-            searchUrl
-          }
-          onChange={
-            // Set config.settings.searchUrl to the value of the selected item
-            (e) => {
-              setSearchUrl(e);
-              setConfig({
-                ...config,
-                settings: {
-                  ...config.settings,
-                  searchUrl: e,
-                },
-              });
-            }
-          }
-          data={matches}
-        />
-        {searchUrl === 'Custom' && (
-          <TextInput
-            label="Query URL"
-            placeholder="Custom query url"
-            value={customSearchUrl}
-            onChange={(event) => {
-              setCustomSearchUrl(event.currentTarget.value);
-              setConfig({
-                ...config,
-                settings: {
-                  ...config.settings,
-                  searchUrl: event.currentTarget.value,
-                },
-              });
-            }}
-          />
-        )}
-      </Group>
-      <ModuleEnabler />
-      <ColorSchemeSwitch />
-      <ConfigChanger />
-      <SaveConfigComponent />
-      <Text
-        style={{
-          alignSelf: 'center',
-          fontSize: '0.75rem',
-          textAlign: 'center',
-          color: '#a0aec0',
-        }}
-      >
-        tip: You can upload your config file by dragging and dropping it onto the page
-      </Text>
-    </Group>
+    <Tabs grow>
+      <Tabs.Tab data-autofocus label="Common">
+        <ScrollArea style={{ height: '78vh' }} offsetScrollbars>
+          <CommonSettings />
+        </ScrollArea>
+      </Tabs.Tab>
+      <Tabs.Tab label="Customizations">
+        <ScrollArea style={{ height: '78vh' }} offsetScrollbars>
+          <AdvancedSettings />
+        </ScrollArea>
+      </Tabs.Tab>
+    </Tabs>
   );
 }
 
 export function SettingsMenuButton(props: any) {
+  useHotkeys([['ctrl+L', () => setOpened(!opened)]]);
+
   const [opened, setOpened] = useState(false);
   return (
     <>
-      <Modal
+      <Drawer
         size="xl"
-        radius="md"
-        title={<Title order={3}>Settings</Title>}
+        padding="lg"
+        position="right"
+        title={<Title order={5}>Settings</Title>}
         opened={props.opened || opened}
         onClose={() => setOpened(false)}
       >
         <SettingsMenu />
-      </Modal>
+        <Credits />
+      </Drawer>
       <ActionIcon
         variant="default"
         radius="md"
@@ -118,7 +49,7 @@ export function SettingsMenuButton(props: any) {
         onClick={() => setOpened(true)}
       >
         <Tooltip label="Settings">
-          <SettingsIcon />
+          <IconSettings />
         </Tooltip>
       </ActionIcon>
     </>

src/components/Settings/ShadeSelector.tsx

@@ -0,0 +1,97 @@
+import React, { useState } from 'react';
+import { ColorSwatch, Group, Popover, Text, useMantineTheme, MantineTheme } from '@mantine/core';
+import { useConfig } from '../../tools/state';
+import { useColorTheme } from '../../tools/color';
+
+export function ShadeSelector() {
+  const { config, setConfig } = useConfig();
+  const [opened, setOpened] = useState(false);
+
+  const { primaryColor, secondaryColor, primaryShade, setPrimaryShade } = useColorTheme();
+
+  const theme = useMantineTheme();
+  const primaryShades = theme.colors[primaryColor].map((s, i) => ({
+    swatch: theme.colors[primaryColor][i],
+    shade: i as MantineTheme['primaryShade'],
+  }));
+  const secondaryShades = theme.colors[secondaryColor].map((s, i) => ({
+    swatch: theme.colors[secondaryColor][i],
+    shade: i as MantineTheme['primaryShade'],
+  }));
+
+  const setConfigShade = (shade: MantineTheme['primaryShade']) => {
+    setPrimaryShade(shade);
+    setConfig({
+      ...config,
+      settings: {
+        ...config.settings,
+        primaryShade: shade,
+      },
+    });
+  };
+
+  const primarySwatches = primaryShades.map(({ swatch, shade }) => (
+    <ColorSwatch
+      component="button"
+      type="button"
+      onClick={() => setConfigShade(shade)}
+      key={Number(shade)}
+      color={swatch}
+      size={22}
+      style={{ color: theme.white, cursor: 'pointer' }}
+    />
+  ));
+
+  const secondarySwatches = secondaryShades.map(({ swatch, shade }) => (
+    <ColorSwatch
+      component="button"
+      type="button"
+      onClick={() => setConfigShade(shade)}
+      key={Number(shade)}
+      color={swatch}
+      size={22}
+      style={{ color: theme.white, cursor: 'pointer' }}
+    />
+  ));
+
+  return (
+    <Group direction="row" spacing={3}>
+      <Popover
+        opened={opened}
+        onClose={() => setOpened(false)}
+        transitionDuration={0}
+        target={
+          <ColorSwatch
+            component="button"
+            type="button"
+            color={theme.colors[primaryColor][Number(primaryShade)]}
+            onClick={() => setOpened((o) => !o)}
+            size={22}
+            style={{ display: 'block', cursor: 'pointer' }}
+          />
+        }
+        styles={{
+          root: {
+            marginRight: theme.spacing.xs,
+          },
+          body: {
+            backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[8] : theme.white,
+          },
+          arrow: {
+            backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[8] : theme.white,
+          },
+        }}
+        position="bottom"
+        placement="end"
+        withArrow
+        arrowSize={3}
+      >
+        <Group direction="column" spacing="xs">
+          <Group spacing="xs">{primarySwatches}</Group>
+          <Group spacing="xs">{secondarySwatches}</Group>
+        </Group>
+      </Popover>
+      <Text>Shade</Text>
+    </Group>
+  );
+}

src/components/WidgetsPositionSwitch/WidgetsPositionSwitch.tsx

@@ -0,0 +1,60 @@
+import React, { useState } from 'react';
+import { createStyles, Switch, Group } from '@mantine/core';
+import { useConfig } from '../../tools/state';
+
+const useStyles = createStyles((theme) => ({
+  root: {
+    position: 'relative',
+    '& *': {
+      cursor: 'pointer',
+    },
+  },
+
+  icon: {
+    pointerEvents: 'none',
+    position: 'absolute',
+    zIndex: 1,
+    top: 3,
+  },
+
+  iconLight: {
+    left: 4,
+    color: theme.white,
+  },
+
+  iconDark: {
+    right: 4,
+    color: theme.colors.gray[6],
+  },
+}));
+
+export function WidgetsPositionSwitch() {
+  const { config, setConfig } = useConfig();
+  const { classes, cx } = useStyles();
+  const defaultPosition = config?.settings?.widgetPosition || 'right';
+  const [widgetPosition, setWidgetPosition] = useState(defaultPosition);
+  const toggleWidgetPosition = () => {
+    const position = widgetPosition === 'right' ? 'left' : 'right';
+    setWidgetPosition(position);
+    setConfig({
+      ...config,
+      settings: {
+        ...config.settings,
+        widgetPosition: position,
+      },
+    });
+  };
+
+  return (
+    <Group>
+      <div className={classes.root}>
+        <Switch
+          checked={widgetPosition === 'left'}
+          onChange={() => toggleWidgetPosition()}
+          size="md"
+        />
+      </div>
+      Position widgets on left
+    </Group>
+  );
+}

src/components/layout/Aside.tsx

@@ -1,24 +1,36 @@
-import { Aside as MantineAside, Group } from '@mantine/core';
-import { WeatherModule, DateModule, CalendarModule } from '../modules';
-import { ModuleWrapper } from '../modules/moduleWrapper';
+import { Aside as MantineAside, createStyles } from '@mantine/core';
+import Widgets from './Widgets';
+
+const useStyles = createStyles((theme) => ({
+  hide: {
+    [theme.fn.smallerThan('xs')]: {
+      display: 'none',
+    },
+  },
+  burger: {
+    [theme.fn.largerThan('sm')]: {
+      display: 'none',
+    },
+  },
+}));
 
 export default function Aside(props: any) {
+  const { classes, cx } = useStyles();
   return (
     <MantineAside
-      hiddenBreakpoint="md"
+      pr="md"
+      hiddenBreakpoint="sm"
       hidden
+      className={cx(classes.hide)}
       style={{
         border: 'none',
+        background: 'none',
       }}
       width={{
         base: 'auto',
       }}
     >
-      <Group mt="sm" grow direction="column">
-        <ModuleWrapper module={CalendarModule} />
-        <ModuleWrapper module={DateModule} />
-        <ModuleWrapper module={WeatherModule} />
-      </Group>
+      <Widgets />
     </MantineAside>
   );
 }

src/components/layout/Background.tsx

@@ -0,0 +1,20 @@
+import { Global } from '@mantine/core';
+import { useConfig } from '../../tools/state';
+
+export function Background() {
+  const { config } = useConfig();
+
+  return (
+    <Global
+      styles={{
+        body: {
+          minHeight: '100vh',
+          backgroundImage: `url('${config.settings.background}')` || '',
+          backgroundPosition: 'center center',
+          backgroundSize: 'cover',
+          backgroundRepeat: 'no-repeat',
+        },
+      }}
+    />
+  );
+}

src/components/layout/Footer.tsx

@@ -1,15 +1,7 @@
-import React, { useEffect, useState } from 'react';
-import {
-  createStyles,
-  Anchor,
-  Text,
-  Group,
-  ActionIcon,
-  Footer as FooterComponent,
-  Alert,
-  useMantineTheme,
-} from '@mantine/core';
-import { AlertCircle, BrandGithub } from 'tabler-icons-react';
+import React, { useEffect } from 'react';
+import { createStyles, Footer as FooterComponent } from '@mantine/core';
+import { showNotification } from '@mantine/notifications';
+import { IconAlertCircle as AlertCircle } from '@tabler/icons';
 import { CURRENT_VERSION, REPO_URL } from '../../../data/constants';
 
 const useStyles = createStyles((theme) => ({
@@ -43,31 +35,26 @@ interface FooterCenteredProps {
 }
 
 export function Footer({ links }: FooterCenteredProps) {
-  const [update, setUpdate] = useState(false);
-  const theme = useMantineTheme();
-  const { classes } = useStyles();
-  const items = links.map((link) => (
-    <Anchor<'a'>
-      color="dimmed"
-      key={link.label}
-      href={link.link}
-      sx={{ lineHeight: 1 }}
-      onClick={(event) => event.preventDefault()}
-      size="sm"
-    >
-      {link.label}
-    </Anchor>
-  ));
-
-  const [latestVersion, setLatestVersion] = useState(CURRENT_VERSION);
-  const [isOpen, setOpen] = useState(true);
   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);
+        if (data.tag_name > CURRENT_VERSION) {
+          showNotification({
+            color: 'yellow',
+            autoClose: false,
+            title: 'New version available',
+            icon: <AlertCircle />,
+            message: `Version ${data.tag_name} is available, update now!`,
+          });
+        } 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 🐛',
+          });
         }
       });
     });
@@ -75,72 +62,13 @@ export function Footer({ links }: FooterCenteredProps) {
 
   return (
     <FooterComponent
-      p={5}
       height="auto"
       style={{
         background: 'none',
         border: 'none',
         clear: 'both',
-        position: 'fixed',
-        bottom: '0',
-        left: '0',
       }}
-    >
-      <Group position="apart" direction="row" style={{ alignItems: 'end' }} mr="xs" mb="xs">
-        <Group position="left">
-          <Alert
-            // onClick open latest release page
-            onClose={() => setOpen(false)}
-            icon={<AlertCircle size={16} />}
-            title={`Updated version: ${latestVersion} is available. Current version: ${CURRENT_VERSION}`}
-            withCloseButton
-            radius="lg"
-            hidden={CURRENT_VERSION === latestVersion || !isOpen}
-            variant="outline"
-            styles={{
-              root: {
-                backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[6] : 'white',
-              },
-
-              closeButton: {
-                marginLeft: '5px',
-              },
-            }}
-            children={undefined}
-          />
-        </Group>
-        <Group position="right">
-          <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: '#a0aec0',
-            }}
-          >
-            Made with ❤️ by @
-            <Anchor
-              href="https://github.com/ajnart"
-              style={{ color: 'inherit', fontStyle: 'inherit', fontSize: 'inherit' }}
-            >
-              ajnart
-            </Anchor>
-          </Text>
-        </Group>
-      </Group>
-    </FooterComponent>
+      children={undefined}
+    />
   );
 }

src/components/layout/Header.tsx

@@ -1,9 +1,11 @@
-import React from 'react';
-import { createStyles, Header as Head, Group, Box } from '@mantine/core';
-import { Logo } from './Logo';
-import SearchBar from '../modules/search/SearchModule';
+import { Box, createStyles, Group, Header as Head } from '@mantine/core';
+import { useBooleanToggle } from '@mantine/hooks';
 import { AddItemShelfButton } from '../AppShelf/AddAppShelfItem';
+
+import DockerMenuButton from '../modules/docker/DockerModule';
+import SearchBar from '../modules/search/SearchModule';
 import { SettingsMenuButton } from '../Settings/SettingsMenu';
+import { Logo } from './Logo';
 
 const HEADER_HEIGHT = 60;
 
@@ -13,19 +15,27 @@ const useStyles = createStyles((theme) => ({
       display: 'none',
     },
   },
+  burger: {
+    [theme.fn.largerThan('sm')]: {
+      display: 'none',
+    },
+  },
 }));
 
 export function Header(props: any) {
+  const [opened, toggleOpened] = useBooleanToggle(false);
   const { classes, cx } = useStyles();
+  const [hidden, toggleHidden] = useBooleanToggle(true);
 
   return (
     <Head height="auto">
-      <Group m="xs" position="apart">
+      <Group p="xs" position="apart">
         <Box className={classes.hide}>
           <Logo style={{ fontSize: 22 }} />
         </Box>
         <Group noWrap>
           <SearchBar />
+          <DockerMenuButton />
           <SettingsMenuButton />
           <AddItemShelfButton />
         </Group>

src/components/layout/HeaderConfig.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import Head from 'next/head';
+import { useConfig } from '../../tools/state';
+
+export function HeaderConfig(props: any) {
+  const { config } = useConfig();
+
+  return (
+    <Head>
+      <title>{config.settings.title || 'Homarr 🦞'}</title>
+      <link rel="shortcut icon" href={config.settings.favicon || '/favicon.svg'} />
+    </Head>
+  );
+}

src/components/layout/Layout.tsx

@@ -2,6 +2,10 @@ import { AppShell, createStyles } from '@mantine/core';
 import { Header } from './Header';
 import { Footer } from './Footer';
 import Aside from './Aside';
+import Navbar from './Navbar';
+import { HeaderConfig } from './HeaderConfig';
+import { Background } from './Background';
+import { useConfig } from '../../tools/state';
 
 const useStyles = createStyles((theme) => ({
   main: {},
@@ -9,8 +13,18 @@ const useStyles = createStyles((theme) => ({
 
 export default function Layout({ children, style }: any) {
   const { classes, cx } = useStyles();
+  const { config } = useConfig();
+  const widgetPosition = config?.settings?.widgetPosition === 'left';
+
   return (
-    <AppShell aside={<Aside />} header={<Header />} footer={<Footer links={[]} />}>
+    <AppShell
+      header={<Header />}
+      navbar={widgetPosition ? <Navbar /> : undefined}
+      aside={widgetPosition ? undefined : <Aside />}
+      footer={<Footer links={[]} />}
+    >
+      <HeaderConfig />
+      <Background />
       <main
         className={cx(classes.main)}
         style={{

src/components/layout/Logo.tsx

@@ -1,33 +1,44 @@
 import { Group, Image, Text } from '@mantine/core';
 import { NextLink } from '@mantine/next';
 import * as React from 'react';
+import { useColorTheme } from '../../tools/color';
+import { useConfig } from '../../tools/state';
+
+export function Logo({ style, withoutText }: any) {
+  const { config } = useConfig();
+  const { primaryColor, secondaryColor } = useColorTheme();
 
-export function Logo({ style }: any) {
   return (
     <Group spacing="xs">
       <Image
         width={50}
-        src="/imgs/logo.png"
+        src={config.settings.logo || '/imgs/logo.png'}
         style={{
           position: 'relative',
         }}
       />
-      <NextLink
-        style={{
-          textDecoration: 'none',
-          position: 'relative',
-        }}
-        href="/"
-      >
-        <Text
-          sx={style}
-          weight="bold"
-          variant="gradient"
-          gradient={{ from: 'red', to: 'orange', deg: 145 }}
+      {withoutText ? null : (
+        <NextLink
+          href="/"
+          style={{
+            textDecoration: 'none',
+            position: 'relative',
+          }}
         >
-          Homarr
-        </Text>
-      </NextLink>
+          <Text
+            sx={style}
+            weight="bold"
+            variant="gradient"
+            gradient={{
+              from: primaryColor,
+              to: secondaryColor,
+              deg: 145,
+            }}
+          >
+            {config.settings.title || 'Homarr'}
+          </Text>
+        </NextLink>
+      )}
     </Group>
   );
 }

src/components/layout/Navbar.tsx

@@ -1,24 +1,37 @@
-import { Group, Navbar as MantineNavbar } from '@mantine/core';
-import { WeatherModule, DateModule } from '../modules';
-import { ModuleWrapper } from '../modules/moduleWrapper';
+import { createStyles, Navbar as MantineNavbar } from '@mantine/core';
+import Widgets from './Widgets';
+
+const useStyles = createStyles((theme) => ({
+  hide: {
+    [theme.fn.smallerThan('xs')]: {
+      display: 'none',
+    },
+  },
+  burger: {
+    [theme.fn.largerThan('sm')]: {
+      display: 'none',
+    },
+  },
+}));
 
 export default function Navbar() {
+  const { classes, cx } = useStyles();
+
   return (
     <MantineNavbar
-      hiddenBreakpoint="lg"
+      pl="md"
+      hiddenBreakpoint="sm"
       hidden
+      className={cx(classes.hide)}
       style={{
         border: 'none',
+        background: 'none',
       }}
       width={{
         base: 'auto',
       }}
     >
-      <Group mt="sm" direction="column" align="center">
-        <ModuleWrapper module={DateModule} />
-        <ModuleWrapper module={WeatherModule} />
-        <ModuleWrapper module={WeatherModule} />
-      </Group>
+      <Widgets />
     </MantineNavbar>
   );
 }

src/components/layout/Tip.tsx

@@ -0,0 +1,19 @@
+import { Text } from '@mantine/core';
+
+interface TipProps {
+  children: React.ReactNode;
+}
+
+export default function Tip(props: TipProps) {
+  return (
+    <Text
+      style={{
+        fontSize: '0.75rem',
+        color: 'gray',
+        marginBottom: '0.5rem',
+      }}
+    >
+      Tip: {props.children}
+    </Text>
+  );
+}

src/components/layout/Widgets.tsx

@@ -0,0 +1,16 @@
+import { Group } from '@mantine/core';
+import { CalendarModule, DateModule, TotalDownloadsModule, WeatherModule } from '../modules';
+import { DashdotModule } from '../modules/dash.';
+import { ModuleWrapper } from '../modules/moduleWrapper';
+
+export default function Widgets(props: any) {
+  return (
+    <Group my="sm" grow direction="column" style={{ width: 300 }}>
+      <ModuleWrapper module={CalendarModule} />
+      <ModuleWrapper module={TotalDownloadsModule} />
+      <ModuleWrapper module={WeatherModule} />
+      <ModuleWrapper module={DateModule} />
+      <ModuleWrapper module={DashdotModule} />
+    </Group>
+  );
+}

src/components/modules/calendar/CalendarComponent.story.tsx

@@ -1,7 +0,0 @@
-import CalendarComponent from './CalendarModule';
-
-export default {
-  title: 'Calendar component',
-};
-
-export const Default = (args: any) => <CalendarComponent {...args} />;

src/components/modules/calendar/CalendarModule.tsx

@@ -1,12 +1,27 @@
 /* eslint-disable react/no-children-prop */
-import { Popover, Box, ScrollArea, Divider, Indicator, useMantineTheme } from '@mantine/core';
+import {
+  Box,
+  Divider,
+  Indicator,
+  Popover,
+  ScrollArea,
+  createStyles,
+  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 { IconCalendar as CalendarIcon } from '@tabler/icons';
+import axios from 'axios';
 import { useConfig } from '../../../tools/state';
 import { IModule } from '../modules';
+import {
+  SonarrMediaDisplay,
+  RadarrMediaDisplay,
+  LidarrMediaDisplay,
+  ReadarrMediaDisplay,
+} from '../common';
+import { serviceItem } from '../../../tools/types';
+import { useColorTheme } from '../../../tools/color';
 
 export const CalendarModule: IModule = {
   title: 'Calendar',
@@ -14,74 +29,132 @@ export const CalendarModule: IModule = {
     'A calendar module for displaying upcoming releases. It interacts with the Sonarr and Radarr API.',
   icon: CalendarIcon,
   component: CalendarComponent,
+  options: {
+    sundaystart: {
+      name: 'Start the week on Sunday',
+      value: false,
+    },
+  },
 };
 
 export default function CalendarComponent(props: any) {
   const { config } = useConfig();
+  const theme = useMantineTheme();
+  const { secondaryColor } = useColorTheme();
+  const useStyles = createStyles((theme) => ({
+    weekend: {
+      color: `${secondaryColor} !important`,
+    },
+  }));
+
   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 sonarrServices = config.services.filter((service) => service.type === 'Sonarr');
+  const radarrServices = config.services.filter((service) => service.type === 'Radarr');
+  const lidarrServices = config.services.filter((service) => service.type === 'Lidarr');
+  const readarrServices = config.services.filter((service) => service.type === 'Readarr');
+  const today = new Date();
+
+  const { classes, cx } = useStyles();
+
+  function getMedias(service: serviceItem | undefined, type: string) {
+    if (!service || !service.apiKey) {
+      return Promise.resolve({ data: [] });
+    }
+    return axios.post(`/api/modules/calendar?type=${type}`, { id: service.id });
+  }
 
   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);
-    const radarrService = filtered.filter((service) => service.type === 'Radarr').at(0);
-    const nextMonth = new Date(new Date().setMonth(new Date().getMonth() + 2)).toISOString();
-    if (sonarrService && sonarrService.apiKey) {
-      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) {
-      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`,
-              });
-            });
-        }
-      );
-    }
+    // Create each Sonarr service and get the medias
+    const currentSonarrMedias: any[] = [];
+    Promise.all(
+      sonarrServices.map((service) =>
+        getMedias(service, 'sonarr')
+          .then((res) => {
+            currentSonarrMedias.push(...res.data);
+          })
+          .catch(() => {
+            currentSonarrMedias.push([]);
+          })
+      )
+    ).then(() => {
+      setSonarrMedias(currentSonarrMedias);
+    });
+    const currentRadarrMedias: any[] = [];
+    Promise.all(
+      radarrServices.map((service) =>
+        getMedias(service, 'radarr')
+          .then((res) => {
+            currentRadarrMedias.push(...res.data);
+          })
+          .catch(() => {
+            currentRadarrMedias.push([]);
+          })
+      )
+    ).then(() => {
+      setRadarrMedias(currentRadarrMedias);
+    });
+    const currentLidarrMedias: any[] = [];
+    Promise.all(
+      lidarrServices.map((service) =>
+        getMedias(service, 'lidarr')
+          .then((res) => {
+            currentLidarrMedias.push(...res.data);
+          })
+          .catch(() => {
+            currentLidarrMedias.push([]);
+          })
+      )
+    ).then(() => {
+      setLidarrMedias(currentLidarrMedias);
+    });
+    const currentReadarrMedias: any[] = [];
+    Promise.all(
+      readarrServices.map((service) =>
+        getMedias(service, 'readarr')
+          .then((res) => {
+            currentReadarrMedias.push(...res.data);
+          })
+          .catch(() => {
+            currentReadarrMedias.push([]);
+          })
+      )
+    ).then(() => {
+      setReadarrMedias(currentReadarrMedias);
+    });
   }, [config.services]);
 
-  if (sonarrMedias === undefined && radarrMedias === undefined) {
-    return <Calendar />;
-  }
+  const weekStartsAtSunday =
+    (config?.modules?.[CalendarModule.title]?.options?.sundaystart?.value as boolean) ?? false;
   return (
     <Calendar
+      firstDayOfWeek={weekStartsAtSunday ? 'sunday' : 'monday'}
       onChange={(day: any) => {}}
+      dayStyle={(date) =>
+        date.getDay() === today.getDay() && date.getDate() === today.getDate()
+          ? {
+              backgroundColor:
+                theme.colorScheme === 'dark' ? theme.colors.dark[5] : theme.colors.gray[0],
+            }
+          : {}
+      }
+      styles={{
+        calendarHeader: {
+          marginRight: 15,
+          marginLeft: 15,
+        },
+      }}
+      allowLevelChange={false}
+      dayClassName={(date, modifiers) => cx({ [classes.weekend]: modifiers.weekend })}
       renderDay={(renderdate) => (
         <DayComponent
           renderdate={renderdate}
           sonarrmedias={sonarrMedias}
           radarrmedias={radarrMedias}
+          lidarrmedias={lidarrMedias}
+          readarrmedias={readarrMedias}
         />
       )}
     />
@@ -93,23 +166,37 @@ 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.toDateString() === renderdate.toDateString();
+  });
+
+  const lidarrFiltered = lidarrmedias.filter((media: any) => {
+    const date = new Date(media.releaseDate);
+    return date.toDateString() === renderdate.toDateString();
+  });
   const sonarrFiltered = sonarrmedias.filter((media: any) => {
-    const date = new Date(media.airDate);
-    // Return true if the date is renerdate without counting hours and minutes
-    return date.getDate() === day && date.getMonth() === renderdate.getMonth();
+    const date = new Date(media.airDateUtc);
+    return date.toDateString() === renderdate.toDateString();
   });
   const radarrFiltered = radarrmedias.filter((media: any) => {
     const date = new Date(media.inCinemas);
-    // Return true if the date is renerdate without counting hours and minutes
-    return date.getDate() === day && date.getMonth() === renderdate.getMonth();
+    return date.toDateString() === renderdate.toDateString();
   });
-  if (sonarrFiltered.length === 0 && radarrFiltered.length === 0) {
+  if (
+    sonarrFiltered.length === 0 &&
+    radarrFiltered.length === 0 &&
+    lidarrFiltered.length === 0 &&
+    readarrFiltered.length === 0
+  ) {
     return <div>{day}</div>;
   }
 
@@ -119,14 +206,69 @@ 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"
+        position="bottom"
         radius="lg"
         shadow="xl"
         transition="pop"
-        width={700}
+        styles={{
+          body: {
+            boxShadow: '0 0 14px 14px rgba(0, 0, 0, 0.1), 0 14px 11px rgba(0, 0, 0, 0.1)',
+          },
+        }}
+        width="auto"
         onClose={() => setOpened(false)}
         opened={opened}
         target={day}
@@ -147,6 +289,24 @@ function DayComponent(props: any) {
               {index < radarrFiltered.length - 1 && <Divider variant="dashed" my="xl" />}
             </React.Fragment>
           ))}
+          {sonarrFiltered.length > 0 && lidarrFiltered.length > 0 && (
+            <Divider variant="dashed" my="xl" />
+          )}
+          {lidarrFiltered.map((media: any, index: number) => (
+            <React.Fragment key={index}>
+              <LidarrMediaDisplay media={media} />
+              {index < lidarrFiltered.length - 1 && <Divider variant="dashed" my="xl" />}
+            </React.Fragment>
+          ))}
+          {lidarrFiltered.length > 0 && readarrFiltered.length > 0 && (
+            <Divider variant="dashed" my="xl" />
+          )}
+          {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.story.tsx

@@ -1,67 +0,0 @@
-import { RadarrMediaDisplay } from './MediaDisplay';
-
-export default {
-  title: 'Media display component',
-  args: {
-    media: {
-      title: 'Doctor Strange in the Multiverse of Madness',
-      originalTitle: 'Doctor Strange in the Multiverse of Madness',
-      originalLanguage: {
-        id: 1,
-        name: 'English',
-      },
-      secondaryYearSourceId: 0,
-      sortTitle: 'doctor strange in multiverse madness',
-      sizeOnDisk: 0,
-      status: 'announced',
-      overview:
-        'Doctor Strange, with the help of mystical allies both old and new, traverses the mind-bending and dangerous alternate realities of the Multiverse to confront a mysterious new adversary.',
-      inCinemas: '2022-05-04T00:00:00Z',
-      images: [
-        {
-          coverType: 'poster',
-          url: 'https://image.tmdb.org/t/p/original/wRnbWt44nKjsFPrqSmwYki5vZtF.jpg',
-        },
-        {
-          coverType: 'fanart',
-          url: 'https://image.tmdb.org/t/p/original/ndCSoasjIZAMMDIuMxuGnNWu4DU.jpg',
-        },
-      ],
-      website: 'https://www.marvel.com/movies/doctor-strange-in-the-multiverse-of-madness',
-      year: 2022,
-      hasFile: false,
-      youTubeTrailerId: 'aWzlQ2N6qqg',
-      studio: 'Marvel Studios',
-      path: '/config/Doctor Strange in the Multiverse of Madness (2022)',
-      qualityProfileId: 1,
-      monitored: true,
-      minimumAvailability: 'announced',
-      isAvailable: true,
-      folderName: '/config/Doctor Strange in the Multiverse of Madness (2022)',
-      runtime: 126,
-      cleanTitle: 'doctorstrangeinmultiversemadness',
-      imdbId: 'tt9419884',
-      tmdbId: 453395,
-      titleSlug: '453395',
-      certification: 'PG-13',
-      genres: ['Fantasy', 'Action', 'Adventure'],
-      tags: [],
-      added: '2022-04-29T20:52:33Z',
-      ratings: {
-        tmdb: {
-          votes: 0,
-          value: 0,
-          type: 'user',
-        },
-      },
-      collection: {
-        name: 'Doctor Strange Collection',
-        tmdbId: 618529,
-        images: [],
-      },
-      id: 1,
-    },
-  },
-};
-
-export const Default = (args: any) => <RadarrMediaDisplay {...args} />;

src/components/modules/calendar/MediaDisplay.tsx

@@ -1,102 +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 noWrap>
-            <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 lineClamp={12} 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,193 @@
+import {
+  Image,
+  Group,
+  Title,
+  Badge,
+  Text,
+  ActionIcon,
+  Anchor,
+  ScrollArea,
+  createStyles,
+} from '@mantine/core';
+import { useMediaQuery } from '@mantine/hooks';
+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;
+}
+
+const useStyles = createStyles((theme) => ({
+  overview: {
+    [theme.fn.largerThan('sm')]: {
+      width: 400,
+    },
+  },
+}));
+
+export function MediaDisplay(props: { media: IMedia }) {
+  const { media }: { media: IMedia } = props;
+  const { classes, cx } = useStyles();
+  const phone = useMediaQuery('(min-width: 800px)');
+  return (
+    <Group position="apart">
+      <Text>
+        {media.poster && (
+          <Image
+            width={phone ? 250 : 100}
+            height={phone ? 400 : 160}
+            style={{
+              float: 'right',
+            }}
+            radius="md"
+            fit="cover"
+            src={media.poster}
+            alt={media.title}
+          />
+        )}
+        <Group direction="column" style={{ minWidth: phone ? 450 : '65vw' }}>
+          <Group noWrap mr="sm" className={classes.overview}>
+            <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: 280, maxWidth: 700 }}>{media.overview}</ScrollArea>
+          <Group align="center" position="center" spacing="xs">
+            {media.genres.slice(-5).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/dash./DashdotModule.tsx

@@ -0,0 +1,233 @@
+import { createStyles, useMantineColorScheme, useMantineTheme } from '@mantine/core';
+import { IconCalendar as CalendarIcon } from '@tabler/icons';
+import axios from 'axios';
+import { useEffect, useState } from 'react';
+import { useConfig } from '../../../tools/state';
+import { serviceItem } from '../../../tools/types';
+import { IModule } from '../modules';
+
+const asModule = <T extends IModule>(t: T) => t;
+export const DashdotModule = asModule({
+  title: 'Dash.',
+  description: 'A module for displaying the graphs of your running Dash. instance.',
+  icon: CalendarIcon,
+  component: DashdotComponent,
+  options: {
+    cpuMultiView: {
+      name: 'CPU Multi-Core View',
+      value: false,
+    },
+    storageMultiView: {
+      name: 'Storage Multi-Drive View',
+      value: false,
+    },
+    useCompactView: {
+      name: 'Use Compact View',
+      value: false,
+    },
+    graphs: {
+      name: 'Graphs',
+      value: ['CPU', 'RAM', 'Storage', 'Network'],
+      options: ['CPU', 'RAM', 'Storage', 'Network', 'GPU'],
+    },
+  },
+});
+
+const useStyles = createStyles((theme, _params) => ({
+  heading: {
+    marginTop: 0,
+    marginBottom: 10,
+  },
+  table: {
+    display: 'table',
+  },
+  tableRow: {
+    display: 'table-row',
+  },
+  tableLabel: {
+    display: 'table-cell',
+    paddingRight: 10,
+  },
+  tableValue: {
+    display: 'table-cell',
+    whiteSpace: 'pre-wrap',
+    paddingBottom: 5,
+  },
+  graphsContainer: {
+    display: 'flex',
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    rowGap: 10,
+    columnGap: 10,
+  },
+  iframe: {
+    flex: '1 0 auto',
+    maxWidth: '100%',
+    height: '140px',
+    borderRadius: theme.radius.lg,
+  },
+}));
+
+const bpsPrettyPrint = (bits?: number) =>
+  !bits
+    ? '-'
+    : bits > 1000 * 1000 * 1000
+    ? `${(bits / 1000 / 1000 / 1000).toFixed(1)} Gb/s`
+    : bits > 1000 * 1000
+    ? `${(bits / 1000 / 1000).toFixed(1)} Mb/s`
+    : bits > 1000
+    ? `${(bits / 1000).toFixed(1)} Kb/s`
+    : `${bits.toFixed(1)} b/s`;
+
+const bytePrettyPrint = (byte: number): string =>
+  byte > 1024 * 1024 * 1024
+    ? `${(byte / 1024 / 1024 / 1024).toFixed(1)} GiB`
+    : byte > 1024 * 1024
+    ? `${(byte / 1024 / 1024).toFixed(1)} MiB`
+    : byte > 1024
+    ? `${(byte / 1024).toFixed(1)} KiB`
+    : `${byte.toFixed(1)} B`;
+
+const useJson = (service: serviceItem | undefined, url: string) => {
+  const [data, setData] = useState<any | undefined>();
+
+  const doRequest = async () => {
+    try {
+      const resp = await axios.get(url, { baseURL: service?.url });
+
+      setData(resp.data);
+      // eslint-disable-next-line no-empty
+    } catch (e) {}
+  };
+
+  useEffect(() => {
+    if (service?.url) {
+      doRequest();
+    }
+  }, [service?.url]);
+
+  return data;
+};
+
+export function DashdotComponent() {
+  const { config } = useConfig();
+  const theme = useMantineTheme();
+  const { classes } = useStyles();
+  const { colorScheme } = useMantineColorScheme();
+
+  const dashConfig = config.modules?.[DashdotModule.title]
+    .options as typeof DashdotModule['options'];
+  const isCompact = dashConfig?.useCompactView?.value ?? false;
+  const dashdotService = config.services.filter((service) => service.type === 'Dash.')[0];
+
+  const enabledGraphs = dashConfig?.graphs?.value ?? ['CPU', 'RAM', 'Storage', 'Network'];
+  const cpuEnabled = enabledGraphs.includes('CPU');
+  const storageEnabled = enabledGraphs.includes('Storage');
+  const ramEnabled = enabledGraphs.includes('RAM');
+  const networkEnabled = enabledGraphs.includes('Network');
+  const gpuEnabled = enabledGraphs.includes('GPU');
+
+  const info = useJson(dashdotService, '/info');
+  const storageLoad = useJson(dashdotService, '/load/storage');
+
+  const totalUsed =
+    (storageLoad?.layout as any[])?.reduce((acc, curr) => (curr.load ?? 0) + acc, 0) ?? 0;
+  const totalSize =
+    (info?.storage?.layout as any[])?.reduce((acc, curr) => (curr.size ?? 0) + acc, 0) ?? 0;
+
+  const graphs = [
+    {
+      name: 'CPU',
+      enabled: cpuEnabled,
+      params: {
+        multiView: dashConfig?.cpuMultiView?.value ?? false,
+      },
+    },
+    {
+      name: 'Storage',
+      enabled: storageEnabled && !isCompact,
+      params: {
+        multiView: dashConfig?.storageMultiView?.value ?? false,
+      },
+    },
+    {
+      name: 'RAM',
+      enabled: ramEnabled,
+    },
+    {
+      name: 'Network',
+      enabled: networkEnabled,
+      spanTwo: true,
+    },
+    {
+      name: 'GPU',
+      enabled: gpuEnabled,
+      spanTwo: true,
+    },
+  ].filter((g) => g.enabled);
+
+  return (
+    <div>
+      <h2 className={classes.heading}>Dash.</h2>
+
+      {!dashdotService ? (
+        <p>No dash. service found. Please add one to your Homarr dashboard.</p>
+      ) : !info ? (
+        <p>Cannot acquire information from dash. - are you running the latest version?</p>
+      ) : (
+        <div className={classes.graphsContainer}>
+          <div className={classes.table}>
+            {storageEnabled && isCompact && (
+              <div className={classes.tableRow}>
+                <p className={classes.tableLabel}>Storage:</p>
+                <p className={classes.tableValue}>
+                  {((100 * totalUsed) / (totalSize || 1)).toFixed(1)}%{'\n'}
+                  {bytePrettyPrint(totalUsed)} / {bytePrettyPrint(totalSize)}
+                </p>
+              </div>
+            )}
+            {networkEnabled && (
+              <div className={classes.tableRow}>
+                <p className={classes.tableLabel}>Network:</p>
+                <p className={classes.tableValue}>
+                  {bpsPrettyPrint(info?.network?.speedUp)} Up{'\n'}
+                  {bpsPrettyPrint(info?.network?.speedDown)} Down
+                </p>
+              </div>
+            )}
+          </div>
+
+          {graphs.map((graph) => (
+            <iframe
+              className={classes.iframe}
+              style={
+                isCompact
+                  ? {
+                      width: graph.spanTwo ? '100%' : 'calc(50% - 5px)',
+                    }
+                  : undefined
+              }
+              key={graph.name}
+              title={graph.name}
+              src={`${
+                dashdotService.url
+              }?singleGraphMode=true&graph=${graph.name.toLowerCase()}&theme=${colorScheme}&surface=${(colorScheme ===
+              'dark'
+                ? theme.colors.dark[7]
+                : theme.colors.gray[0]
+              ).substring(1)}${isCompact ? '&gap=10' : '&gap=5'}&innerRadius=${theme.radius.lg}${
+                graph.params
+                  ? `&${Object.entries(graph.params)
+                      .map(([key, value]) => `${key}=${value.toString()}`)
+                      .join('&')}`
+                  : ''
+              }`}
+              frameBorder="0"
+              allowTransparency
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

src/components/modules/dash./index.ts

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

src/components/modules/date/DateModule.story.tsx

@@ -1,7 +0,0 @@
-import DateComponent from './DateModule';
-
-export default {
-  title: 'Date module',
-};
-
-export const Default = (args: any) => <DateComponent {...args} />;

src/components/modules/date/DateModule.tsx

@@ -1,9 +1,10 @@
 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';
+import { useSetSafeInterval } from '../../../tools/hooks/useSetSafeInterval';
 
 export const DateModule: IModule = {
   title: 'Date',
@@ -20,19 +21,20 @@ export const DateModule: IModule = {
 
 export default function DateComponent(props: any) {
   const [date, setDate] = useState(new Date());
+  const setSafeInterval = useSetSafeInterval();
   const { config } = useConfig();
-  const isFullTime = config?.modules?.[DateModule.title]?.options?.full?.value ?? false;
+  const isFullTime = config?.modules?.[DateModule.title]?.options?.full?.value ?? true;
   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(() => {
+    setSafeInterval(() => {
       setDate(new Date());
     }, 1000 * 60);
   }, []);
 
   return (
-    <Group p="sm" direction="column">
+    <Group p="sm" spacing="xs" direction="column">
       <Title>{dayjs(date).format(formatString)}</Title>
       <Text size="xl">{dayjs(date).format('dddd, MMMM D')}</Text>
     </Group>

src/components/modules/docker/ContainerActionBar.tsx

@@ -0,0 +1,164 @@
+import { Button, Group, Modal, Title } from '@mantine/core';
+import { useBooleanToggle } from '@mantine/hooks';
+import { showNotification, updateNotification } from '@mantine/notifications';
+import {
+  IconCheck,
+  IconPlayerPlay,
+  IconPlayerStop,
+  IconPlus,
+  IconRefresh,
+  IconRotateClockwise,
+  IconTrash,
+} from '@tabler/icons';
+import axios from 'axios';
+import Dockerode from 'dockerode';
+import { tryMatchService } from '../../../tools/addToHomarr';
+import { AddAppShelfItemForm } from '../../AppShelf/AddAppShelfItem';
+
+function sendDockerCommand(
+  action: string,
+  containerId: string,
+  containerName: string,
+  reload: () => void
+) {
+  showNotification({
+    id: containerId,
+    loading: true,
+    title: `${action}ing container ${containerName}`,
+    message: undefined,
+    autoClose: false,
+    disallowClose: true,
+  });
+  axios
+    .get(`/api/docker/container/${containerId}?action=${action}`)
+    .then((res) => {
+      updateNotification({
+        id: containerId,
+        title: `Container ${containerName} ${action}ed`,
+        message: `Your container was successfully ${action}ed`,
+        icon: <IconCheck />,
+        autoClose: 2000,
+      });
+    })
+    .catch((err) => {
+      updateNotification({
+        id: containerId,
+        color: 'red',
+        title: 'There was an error',
+        message: err.response.data.reason,
+        autoClose: 2000,
+      });
+    })
+    .finally(() => {
+      reload();
+    });
+}
+
+export interface ContainerActionBarProps {
+  selected: Dockerode.ContainerInfo[];
+  reload: () => void;
+}
+
+export default function ContainerActionBar({ selected, reload }: ContainerActionBarProps) {
+  const [opened, setOpened] = useBooleanToggle(false);
+  return (
+    <Group>
+      <Modal
+        size="xl"
+        radius="md"
+        opened={opened}
+        onClose={() => setOpened(false)}
+        title="Add service"
+      >
+        <AddAppShelfItemForm
+          setOpened={setOpened}
+          {...tryMatchService(selected.at(0))}
+          message="Add service to homarr"
+        />
+      </Modal>
+      <Button
+        leftIcon={<IconRotateClockwise />}
+        onClick={() =>
+          Promise.all(
+            selected.map((container) =>
+              sendDockerCommand('restart', container.Id, container.Names[0].substring(1), reload)
+            )
+          )
+        }
+        variant="light"
+        color="orange"
+        radius="md"
+      >
+        Restart
+      </Button>
+      <Button
+        leftIcon={<IconPlayerStop />}
+        onClick={() =>
+          Promise.all(
+            selected.map((container) =>
+              sendDockerCommand('stop', container.Id, container.Names[0].substring(1), reload)
+            )
+          )
+        }
+        variant="light"
+        color="red"
+        radius="md"
+      >
+        Stop
+      </Button>
+      <Button
+        leftIcon={<IconPlayerPlay />}
+        onClick={() =>
+          Promise.all(
+            selected.map((container) =>
+              sendDockerCommand('start', container.Id, container.Names[0].substring(1), reload)
+            )
+          )
+        }
+        variant="light"
+        color="green"
+        radius="md"
+      >
+        Start
+      </Button>
+      <Button leftIcon={<IconRefresh />} onClick={() => reload()} variant="light" radius="md">
+        Refresh data
+      </Button>
+      <Button
+        leftIcon={<IconPlus />}
+        color="indigo"
+        variant="light"
+        radius="md"
+        onClick={() => {
+          if (selected.length !== 1) {
+            showNotification({
+              autoClose: 5000,
+              title: <Title order={5}>Please only add one service at a time!</Title>,
+              color: 'red',
+              message: undefined,
+            });
+          } else {
+            setOpened(true);
+          }
+        }}
+      >
+        Add to Homarr
+      </Button>
+      <Button
+        leftIcon={<IconTrash />}
+        color="red"
+        variant="light"
+        radius="md"
+        onClick={() =>
+          Promise.all(
+            selected.map((container) =>
+              sendDockerCommand('remove', container.Id, container.Names[0].substring(1), reload)
+            )
+          )
+        }
+      >
+        Remove
+      </Button>
+    </Group>
+  );
+}

src/components/modules/docker/ContainerState.tsx

@@ -0,0 +1,49 @@
+import { Badge, BadgeVariant, MantineSize } from '@mantine/core';
+import Dockerode from 'dockerode';
+
+export interface ContainerStateProps {
+  state: Dockerode.ContainerInfo['State'];
+}
+
+export default function ContainerState(props: ContainerStateProps) {
+  const { state } = props;
+  const options: {
+    size: MantineSize;
+    radius: MantineSize;
+    variant: BadgeVariant;
+  } = {
+    size: 'md',
+    radius: 'md',
+    variant: 'outline',
+  };
+  switch (state) {
+    case 'running': {
+      return (
+        <Badge color="green" {...options}>
+          Running
+        </Badge>
+      );
+    }
+    case 'created': {
+      return (
+        <Badge color="cyan" {...options}>
+          Created
+        </Badge>
+      );
+    }
+    case 'exited': {
+      return (
+        <Badge color="red" {...options}>
+          Stopped
+        </Badge>
+      );
+    }
+    default: {
+      return (
+        <Badge color="purple" {...options}>
+          Unknown
+        </Badge>
+      );
+    }
+  }
+}

src/components/modules/docker/DockerModule.tsx

@@ -0,0 +1,84 @@
+import { ActionIcon, Drawer, Group, LoadingOverlay, Text } from '@mantine/core';
+import axios from 'axios';
+import { useEffect, useState } from 'react';
+import Docker from 'dockerode';
+import { IconBrandDocker, IconX } from '@tabler/icons';
+import { showNotification } from '@mantine/notifications';
+import ContainerActionBar from './ContainerActionBar';
+import DockerTable from './DockerTable';
+import { useConfig } from '../../../tools/state';
+import { IModule } from '../modules';
+
+export const DockerModule: IModule = {
+  title: 'Docker',
+  description: 'Allows you to easily manage your torrents',
+  icon: IconBrandDocker,
+  component: DockerMenuButton,
+};
+
+export default function DockerMenuButton(props: any) {
+  const [opened, setOpened] = useState(false);
+  const [containers, setContainers] = useState<Docker.ContainerInfo[]>([]);
+  const [selection, setSelection] = useState<Docker.ContainerInfo[]>([]);
+  const [visible, setVisible] = useState(false);
+  const { config } = useConfig();
+  const moduleEnabled = config.modules?.[DockerModule.title]?.enabled ?? false;
+
+  useEffect(() => {
+    reload();
+  }, [config.modules]);
+
+  function reload() {
+    if (!moduleEnabled) {
+      return;
+    }
+    setVisible(true);
+    setTimeout(() => {
+      axios
+        .get('/api/docker/containers')
+        .then((res) => {
+          setContainers(res.data);
+          setSelection([]);
+          setVisible(false);
+        })
+        .catch(() =>
+          // Send an Error notification
+          showNotification({
+            autoClose: 1500,
+            title: <Text>Docker integration failed</Text>,
+            color: 'red',
+            icon: <IconX />,
+            message: 'Did you forget to mount the docker socket ?',
+          })
+        );
+    }, 300);
+  }
+  const exists = config.modules?.[DockerModule.title]?.enabled ?? false;
+  if (!exists) {
+    return null;
+  }
+  // Check if the user has at least one container
+  if (containers.length < 1) return null;
+  return (
+    <>
+      <Drawer opened={opened} onClose={() => setOpened(false)} padding="xl" size="full">
+        <ContainerActionBar selected={selection} reload={reload} />
+        <div style={{ position: 'relative' }}>
+          <LoadingOverlay transitionDuration={500} visible={visible} />
+          <DockerTable containers={containers} selection={selection} setSelection={setSelection} />
+        </div>
+      </Drawer>
+      <Group position="center">
+        <ActionIcon
+          variant="default"
+          radius="md"
+          size="xl"
+          color="blue"
+          onClick={() => setOpened(true)}
+        >
+          <IconBrandDocker />
+        </ActionIcon>
+      </Group>
+    </>
+  );
+}

src/components/modules/docker/DockerTable.tsx

@@ -0,0 +1,125 @@
+import { Table, Checkbox, Group, Badge, createStyles, ScrollArea, TextInput } from '@mantine/core';
+import { IconSearch } from '@tabler/icons';
+import Dockerode from 'dockerode';
+import { useEffect, useState } from 'react';
+import ContainerState from './ContainerState';
+
+const useStyles = createStyles((theme) => ({
+  rowSelected: {
+    backgroundColor:
+      theme.colorScheme === 'dark'
+        ? theme.fn.rgba(theme.colors[theme.primaryColor][7], 0.2)
+        : theme.colors[theme.primaryColor][0],
+  },
+}));
+
+export default function DockerTable({
+  containers,
+  selection,
+  setSelection,
+}: {
+  setSelection: any;
+  containers: Dockerode.ContainerInfo[];
+  selection: Dockerode.ContainerInfo[];
+}) {
+  const [usedContainers, setContainers] = useState<Dockerode.ContainerInfo[]>(containers);
+  const { classes, cx } = useStyles();
+  const [search, setSearch] = useState('');
+
+  useEffect(() => {
+    setContainers(containers);
+  }, [containers]);
+
+  const handleSearchChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const { value } = event.currentTarget;
+    setSearch(value);
+    setContainers(filterContainers(containers, value));
+  };
+
+  function filterContainers(data: Dockerode.ContainerInfo[], search: string) {
+    const query = search.toLowerCase().trim();
+    return data.filter((item) =>
+      item.Names.some((name) => name.toLowerCase().includes(query) || item.Image.includes(query))
+    );
+  }
+
+  const toggleRow = (container: Dockerode.ContainerInfo) =>
+    setSelection((current: Dockerode.ContainerInfo[]) =>
+      current.includes(container) ? current.filter((c) => c !== container) : [...current, container]
+    );
+  const toggleAll = () =>
+    setSelection((current: any) =>
+      current.length === usedContainers.length ? [] : usedContainers.map((c) => c)
+    );
+
+  const rows = usedContainers.map((element) => {
+    const selected = selection.includes(element);
+    return (
+      <tr key={element.Id} className={cx({ [classes.rowSelected]: selected })}>
+        <td>
+          <Checkbox
+            checked={selection.includes(element)}
+            onChange={() => toggleRow(element)}
+            transitionDuration={0}
+          />
+        </td>
+        <td>{element.Names[0].replace('/', '')}</td>
+        <td>{element.Image}</td>
+        <td>
+          <Group>
+            {element.Ports.sort((a, b) => a.PrivatePort - b.PrivatePort)
+              // Remove duplicates with filter function
+              .filter(
+                (port, index, self) =>
+                  index === self.findIndex((t) => t.PrivatePort === port.PrivatePort)
+              )
+              .slice(-3)
+              .map((port) => (
+                <Badge key={port.PrivatePort} variant="outline">
+                  {port.PrivatePort}:{port.PublicPort}
+                </Badge>
+              ))}
+            {element.Ports.length > 3 && (
+              <Badge variant="filled">{element.Ports.length - 3} more</Badge>
+            )}
+          </Group>
+        </td>
+        <td>
+          <ContainerState state={element.State} />
+        </td>
+      </tr>
+    );
+  });
+
+  return (
+    <ScrollArea style={{ height: '80vh' }}>
+      <TextInput
+        placeholder="Search by container or image name"
+        mt="md"
+        icon={<IconSearch size={14} />}
+        value={search}
+        onChange={handleSearchChange}
+      />
+      <Table captionSide="bottom" highlightOnHover sx={{ minWidth: 800 }} verticalSpacing="sm">
+        <caption>your docker containers</caption>
+        <thead>
+          <tr>
+            <th style={{ width: 40 }}>
+              <Checkbox
+                onChange={toggleAll}
+                checked={selection.length === usedContainers.length}
+                indeterminate={selection.length > 0 && selection.length !== usedContainers.length}
+                transitionDuration={0}
+              />
+            </th>
+            <th>Name</th>
+            <th>Image</th>
+            <th>Ports</th>
+            <th>State</th>
+          </tr>
+        </thead>
+        <tbody>{rows}</tbody>
+      </Table>
+    </ScrollArea>
+  );
+}

src/components/modules/docker/index.ts

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

src/components/modules/downloads/DownloadsModule.tsx

@@ -0,0 +1,209 @@
+import {
+  Table,
+  Text,
+  Tooltip,
+  Title,
+  Group,
+  Progress,
+  Skeleton,
+  ScrollArea,
+  Center,
+  Image,
+} 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 { useViewportSize } from '@mantine/hooks';
+import { showNotification } from '@mantine/notifications';
+import { IModule } from '../modules';
+import { useConfig } from '../../../tools/state';
+import { AddItemShelfButton } from '../../AppShelf/AddAppShelfItem';
+import { useSetSafeInterval } from '../../../tools/hooks/useSetSafeInterval';
+import { humanFileSize } from '../../../tools/humanFileSize';
+
+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 { height, width } = useViewportSize();
+  const downloadServices =
+    config.services.filter(
+      (service) =>
+        service.type === 'qBittorrent' ||
+        service.type === 'Transmission' ||
+        service.type === 'Deluge'
+    ) ?? [];
+  const hideComplete: boolean =
+    (config?.modules?.[DownloadsModule.title]?.options?.hidecomplete?.value as boolean) ?? false;
+  const [torrents, setTorrents] = useState<NormalizedTorrent[]>([]);
+  const setSafeInterval = useSetSafeInterval();
+  const [isLoading, setIsLoading] = useState(true);
+  useEffect(() => {
+    setIsLoading(true);
+    if (downloadServices.length === 0) return;
+    const interval = setInterval(() => {
+      // Send one request with each download service inside
+      axios
+        .post('/api/modules/downloads')
+        .then((response) => {
+          setTorrents(response.data);
+          setIsLoading(false);
+        })
+        .catch((error) => {
+          setTorrents([]);
+          // eslint-disable-next-line no-console
+          console.error('Error while fetching torrents', error.response.data);
+          setIsLoading(false);
+          showNotification({
+            title: 'Error fetching torrents',
+            autoClose: 1000,
+            disallowClose: true,
+            id: 'fail-torrent-downloads-module',
+            color: 'red',
+            message:
+              'Please check your config for any potential errors, check the console for more info',
+          });
+          clearInterval(interval);
+        });
+    }, 5000);
+  }, []);
+
+  if (downloadServices.length === 0) {
+    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 (isLoading) {
+    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 DEVICE_WIDTH = 576;
+  const ths = (
+    <tr>
+      <th>Name</th>
+      <th>Size</th>
+      {width > 576 ? <th>Down</th> : ''}
+      {width > 576 ? <th>Up</th> : ''}
+      <th>ETA</th>
+      <th>Progress</th>
+    </tr>
+  );
+  // Convert Seconds to readable format.
+  function calculateETA(givenSeconds: number) {
+    // If its superior than one day return > 1 day
+    if (givenSeconds > 86400) {
+      return '> 1 day';
+    }
+    // Transform the givenSeconds into a readable format. e.g. 1h 2m 3s
+    const hours = Math.floor(givenSeconds / 3600);
+    const minutes = Math.floor((givenSeconds % 3600) / 60);
+    const seconds = Math.floor(givenSeconds % 60);
+    // Only show hours if it's greater than 0.
+    const hoursString = hours > 0 ? `${hours}h ` : '';
+    const minutesString = minutes > 0 ? `${minutes}m ` : '';
+    const secondsString = seconds > 0 ? `${seconds}s` : '';
+    return `${hoursString}${minutesString}${secondsString}`;
+  }
+  // Loop over qBittorrent torrents merging with deluge torrents
+  const rows = torrents
+    .filter((torrent) => !(torrent.progress === 1 && hideComplete))
+    .map((torrent) => {
+      const downloadSpeed = torrent.downloadSpeed / 1024 / 1024;
+      const uploadSpeed = torrent.uploadSpeed / 1024 / 1024;
+      const size = torrent.totalSelected;
+      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">{humanFileSize(size)}</Text>
+          </td>
+          {width > 576 ? (
+            <td>
+              <Text size="xs">{downloadSpeed > 0 ? `${downloadSpeed.toFixed(1)} Mb/s` : '-'}</Text>
+            </td>
+          ) : (
+            ''
+          )}
+          {width > 576 ? (
+            <td>
+              <Text size="xs">{uploadSpeed > 0 ? `${uploadSpeed.toFixed(1)} Mb/s` : '-'}</Text>
+            </td>
+          ) : (
+            ''
+          )}
+          <td>
+            <Text size="xs">{torrent.eta <= 0 ? '∞' : calculateETA(torrent.eta)}</Text>
+          </td>
+          <td>
+            <Text>{(torrent.progress * 100).toFixed(1)}%</Text>
+            <Progress
+              radius="lg"
+              color={
+                torrent.progress === 1 ? 'green' : torrent.state === 'paused' ? 'yellow' : 'blue'
+              }
+              value={torrent.progress * 100}
+              size="lg"
+            />
+          </td>
+        </tr>
+      );
+    });
+
+  const easteregg = (
+    <Center style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+      <Image fit="cover" height={300} src="https://danjohnvelasco.github.io/images/empty.png" />
+    </Center>
+  );
+  return (
+    <Group noWrap grow direction="column" mt="xl">
+      <ScrollArea sx={{ height: 300 }}>
+        {rows.length > 0 ? (
+          <Table highlightOnHover>
+            <thead>{ths}</thead>
+            <tbody>{rows}</tbody>
+          </Table>
+        ) : (
+          easteregg
+        )}
+      </ScrollArea>
+    </Group>
+  );
+}

src/components/modules/downloads/TotalDownloadsModule.tsx

@@ -0,0 +1,186 @@
+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 { showNotification } from '@mantine/notifications';
+import { AddItemShelfButton } from '../../AppShelf/AddAppShelfItem';
+import { useConfig } from '../../../tools/state';
+import { humanFileSize } from '../../../tools/humanFileSize';
+import { IModule } from '../modules';
+import { useSetSafeInterval } from '../../../tools/hooks/useSetSafeInterval';
+
+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 setSafeInterval = useSetSafeInterval();
+  const { config } = useConfig();
+  const downloadServices =
+    config.services.filter(
+      (service) =>
+        service.type === 'qBittorrent' ||
+        service.type === 'Transmission' ||
+        service.type === 'Deluge'
+    ) ?? [];
+
+  const [torrentHistory, torrentHistoryHandlers] = useListState<torrentHistory>([]);
+  const [torrents, setTorrents] = useState<NormalizedTorrent[]>([]);
+
+  const totalDownloadSpeed = torrents.reduce((acc, torrent) => acc + torrent.downloadSpeed, 0);
+  const totalUploadSpeed = torrents.reduce((acc, torrent) => acc + torrent.uploadSpeed, 0);
+  useEffect(() => {
+    const interval = setSafeInterval(() => {
+      // Send one request with each download service inside
+      axios
+        .post('/api/modules/downloads')
+        .then((response) => {
+          setTorrents(response.data);
+        })
+        .catch((error) => {
+          setTorrents([]);
+          // eslint-disable-next-line no-console
+          console.error('Error while fetching torrents', error.response.data);
+          showNotification({
+            title: 'Torrent speed module failed to fetch torrents',
+            autoClose: 1000,
+            disallowClose: true,
+            id: 'fail-torrent-speed-module',
+            color: 'red',
+            message:
+              'Error fetching torrents, please check your config for any potential errors, check the console for more info',
+          });
+          clearInterval(interval);
+        });
+    }, 1000);
+  }, [config.services]);
+
+  useEffect(() => {
+    torrentHistoryHandlers.append({
+      x: Date.now(),
+      down: totalDownloadSpeed,
+      up: totalUploadSpeed,
+    });
+  }, [totalDownloadSpeed, totalUploadSpeed]);
+
+  if (downloadServices.length === 0) {
+    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,5 +1,8 @@
-export * from './date';
 export * from './calendar';
-export * from './search';
+export * from './dash.';
+export * from './date';
+export * from './downloads';
 export * from './ping';
+export * from './search';
 export * from './weather';
+export * from './docker';

src/components/modules/moduleWrapper.tsx

@@ -1,14 +1,18 @@
-import { Card, Menu, Switch, useMantineTheme } from '@mantine/core';
+import {
+  Button,
+  Card,
+  Group,
+  Menu,
+  MultiSelect,
+  Switch,
+  TextInput,
+  useMantineColorScheme,
+} from '@mantine/core';
 import { useConfig } from '../../tools/state';
 import { IModule } from './modules';
 
-export function ModuleWrapper(props: any) {
-  const { module }: { module: IModule } = props;
+function getItems(module: IModule) {
   const { config, setConfig } = useConfig();
-  const enabledModules = config.modules ?? {};
-  // Remove 'Module' from enabled modules titles
-  const isShown = enabledModules[module.title]?.enabled ?? false;
-  const theme = useMantineTheme();
   const items: JSX.Element[] = [];
   if (module.options) {
     const keys = Object.keys(module.options);
@@ -19,13 +23,89 @@ export function ModuleWrapper(props: any) {
     types.forEach((type, index) => {
       const optionName = `${module.title}.${keys[index]}`;
       const moduleInConfig = config.modules?.[module.title];
+      if (type === 'object') {
+        items.push(
+          <MultiSelect
+            label={module.options?.[keys[index]].name}
+            data={module.options?.[keys[index]].options ?? []}
+            defaultValue={
+              (moduleInConfig?.options?.[keys[index]]?.value as string[]) ??
+              (values[index].value as string[]) ??
+              []
+            }
+            searchable
+            onChange={(value) => {
+              setConfig({
+                ...config,
+                modules: {
+                  ...config.modules,
+                  [module.title]: {
+                    ...moduleInConfig,
+                    options: {
+                      ...moduleInConfig?.options,
+                      [keys[index]]: {
+                        ...moduleInConfig?.options?.[keys[index]],
+                        value,
+                      },
+                    },
+                  },
+                },
+              });
+            }}
+          />
+        );
+      }
+      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) ??
+                  (values[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 ?? false
+              (moduleInConfig?.options?.[keys[index]]?.value as boolean) ??
+              (values[index].value as boolean) ??
+              false
             }
             key={keys[index]}
             onClick={(e) => {
@@ -52,27 +132,69 @@ export function ModuleWrapper(props: any) {
       }
     });
   }
+  return items;
+}
+
+export function ModuleWrapper(props: any) {
+  const { module }: { module: IModule } = props;
+  const { colorScheme } = useMantineColorScheme();
+  const { config, setConfig } = useConfig();
+  const enabledModules = config.modules ?? {};
+  // Remove 'Module' from enabled modules titles
+  const isShown = enabledModules[module.title]?.enabled ?? false;
+
   if (!isShown) {
     return null;
   }
+
   return (
-    <Card hidden={!isShown} mx="sm" withBorder radius="lg" shadow="sm">
+    <Card
+      {...props}
+      hidden={!isShown}
+      withBorder
+      radius="lg"
+      shadow="sm"
+      style={{
+        background: `rgba(${colorScheme === 'dark' ? '37, 38, 43,' : '255, 255, 255,'} \
+          ${(config.settings.appOpacity || 100) / 100}`,
+        borderColor: `rgba(${colorScheme === 'dark' ? '37, 38, 43,' : '233, 236, 239,'} \
+          ${(config.settings.appOpacity || 100) / 100}`,
+      }}
+    >
+      <ModuleMenu
+        module={module}
+        styles={{
+          root: {
+            position: 'absolute',
+            top: 12,
+            right: 12,
+          },
+        }}
+      />
+      <module.component />
+    </Card>
+  );
+}
+
+export function ModuleMenu(props: any) {
+  const { module, styles } = props;
+  const items: JSX.Element[] = getItems(module);
+  return (
+    <>
       {module.options && (
         <Menu
-          size="md"
+          size="lg"
           shadow="xl"
           closeOnItemClick={false}
           radius="md"
           position="left"
           styles={{
             root: {
-              position: 'absolute',
-              top: 15,
-              right: 15,
+              ...props?.styles?.root,
             },
             body: {
-              backgroundColor:
-                theme.colorScheme === 'dark' ? theme.colors.dark[5] : theme.colors.gray[1],
+              // Add shadow and elevation to the body
+              boxShadow: '0 0 14px 14px rgba(0, 0, 0, 0.05)',
             },
           }}
         >
@@ -82,7 +204,6 @@ export function ModuleWrapper(props: any) {
           ))}
         </Menu>
       )}
-      <module.component />
-    </Card>
+    </>
   );
 }

src/components/modules/modules.tsx

@@ -1,11 +1,14 @@
 // This interface is to be used in all the modules of the project
 // Each module should have its own interface and call the following function:
 // TODO: Add a function to register a module
+
+import { TablerIcon } from '@tabler/icons';
+
 // Note: Maybe use context to keep track of the modules
 export interface IModule {
   title: string;
   description: string;
-  icon: React.ReactNode;
+  icon: TablerIcon;
   component: React.ComponentType;
   options?: Option;
 }
@@ -16,5 +19,6 @@ interface Option {
 
 export interface OptionValues {
   name: string;
-  value: boolean;
+  value: boolean | string | string[];
+  options?: string[];
 }

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

@@ -1,16 +0,0 @@
-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

@@ -1,8 +1,8 @@
 import { Indicator, Tooltip } from '@mantine/core';
-import axios from 'axios';
+import axios, { AxiosResponse } from 'axios';
 import { motion } from 'framer-motion';
 import { useEffect, useState } from 'react';
-import { Plug } from 'tabler-icons-react';
+import { IconPlug as Plug } from '@tabler/icons';
 import { useConfig } from '../../../tools/state';
 import { IModule } from '../modules';
 
@@ -19,20 +19,39 @@ export default function PingComponent(props: any) {
 
   const { url }: { url: string } = props;
   const [isOnline, setOnline] = useState<State>('loading');
+  const [response, setResponse] = useState(500);
   const exists = config.modules?.[PingModule.title]?.enabled ?? false;
+
+  function statusCheck(response: AxiosResponse) {
+    const { status }: { status: string[] } = props;
+    //Default Status
+    let acceptableStatus = ['200'];
+    if (status !== undefined && status.length) {
+      acceptableStatus = status;
+    }
+    // Checks if reported status is in acceptable status array
+    if (acceptableStatus.indexOf(response.status.toString()) >= 0) {
+      setOnline('online');
+      setResponse(response.status);
+    } else {
+      setOnline('down');
+      setResponse(response.status);
+    }
+  }
+
   useEffect(() => {
     if (!exists) {
       return;
     }
     axios
       .get('/api/modules/ping', { params: { url } })
-      .then(() => {
-        setOnline('online');
+      .then((response) => {
+        statusCheck(response);
       })
-      .catch(() => {
-        setOnline('down');
+      .catch((error) => {
+        statusCheck(error.response);
       });
-  }, []);
+  }, [config.modules?.[PingModule.title]?.enabled]);
   if (!exists) {
     return null;
   }
@@ -40,7 +59,13 @@ export default function PingComponent(props: any) {
     <Tooltip
       radius="lg"
       style={{ position: 'absolute', bottom: 20, right: 20 }}
-      label={isOnline === 'loading' ? 'Loading...' : isOnline === 'online' ? 'Online' : 'Offline'}
+      label={
+        isOnline === 'loading'
+          ? 'Loading...'
+          : isOnline === 'online'
+          ? `Online - ${response}`
+          : `Offline - ${response}`
+      }
     >
       <motion.div
         animate={{

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

@@ -1,10 +0,0 @@
-import SearchBar from './SearchModule';
-
-export default {
-  title: 'Search bar',
-  config: {
-    searchBar: false,
-  },
-};
-
-export const Default = (args: any) => <SearchBar {...args} />;

src/components/modules/search/SearchModule.tsx

@@ -1,7 +1,12 @@
-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 { Kbd, createStyles, Autocomplete } from '@mantine/core';
+import { useDebouncedValue, useForm, useHotkeys } from '@mantine/hooks';
+import { useEffect, useRef, useState } from 'react';
+import {
+  IconSearch as Search,
+  IconBrandYoutube as BrandYoutube,
+  IconDownload as Download,
+} from '@tabler/icons';
+import axios from 'axios';
 import { useConfig } from '../../../tools/state';
 import { IModule } from '../modules';
 
@@ -28,8 +33,22 @@ export default function SearchBar(props: any) {
   const [icon, setIcon] = useState(<Search />);
   const queryUrl = config.settings.searchUrl ?? 'https://www.google.com/search?q=';
   const textInput = useRef<HTMLInputElement>();
-  useHotkeys([['ctrl+K', () => textInput.current && textInput.current.focus()]]);
+  // Find a service with the type of 'Overseerr'
+  const form = useForm({
+    initialValues: {
+      query: '',
+    },
+  });
 
+  const [debounced, cancel] = useDebouncedValue(form.values.query, 250);
+  const [results, setResults] = useState<any[]>([]);
+  useEffect(() => {
+    if (form.values.query !== debounced || form.values.query === '') return;
+    axios
+      .get(`/api/modules/search?q=${form.values.query}`)
+      .then((res) => setResults(res.data ?? []));
+  }, [debounced]);
+  useHotkeys([['ctrl+K', () => textInput.current && textInput.current.focus()]]);
   const { classes, cx } = useStyles();
   const rightSection = (
     <div className={classes.hide}>
@@ -39,12 +58,6 @@ export default function SearchBar(props: any) {
     </div>
   );
 
-  const form = useForm({
-    initialValues: {
-      query: '',
-    },
-  });
-
   // If enabled modules doesn't contain the module, return null
   // If module in enabled
 
@@ -53,6 +66,10 @@ export default function SearchBar(props: any) {
     return null;
   }
 
+  const autocompleteData = results.map((result) => ({
+    label: result.phrase,
+    value: result.phrase,
+  }));
   return (
     <form
       onChange={() => {
@@ -79,43 +96,32 @@ export default function SearchBar(props: any) {
           } else if (isTorrent) {
             window.open(`https://bitsearch.to/search?q=${query.substring(3)}`);
           } else {
-            window.open(`${queryUrl}${values.query}`);
+            window.open(
+              `${
+                queryUrl.includes('%s')
+                  ? queryUrl.replace('%s', values.query)
+                  : queryUrl + values.query
+              }`
+            );
           }
         }, 20);
       })}
     >
-      <Popover
-        opened={opened}
-        position="bottom"
-        placement="start"
-        width={260}
-        withArrow
+      <Autocomplete
+        autoFocus
+        variant="filled"
+        data={autocompleteData}
+        icon={icon}
+        ref={textInput}
+        rightSectionWidth={90}
+        rightSection={rightSection}
         radius="md"
-        trapFocus={false}
-        transition="pop-bottom-right"
-        onFocusCapture={() => setOpened(true)}
-        onBlurCapture={() => setOpened(false)}
-        target={
-          <TextInput
-            variant="filled"
-            icon={icon}
-            ref={textInput}
-            rightSectionWidth={90}
-            rightSection={rightSection}
-            radius="md"
-            size="md"
-            styles={{ rightSection: { pointerEvents: 'none' } }}
-            placeholder="Search the web..."
-            {...props}
-            {...form.getInputProps('query')}
-          />
-        }
-      >
-        <Text>
-          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>
+        size="md"
+        styles={{ rightSection: { pointerEvents: 'none' } }}
+        placeholder="Search the web..."
+        {...props}
+        {...form.getInputProps('query')}
+      />
     </form>
   );
 }

src/components/modules/system/SystemModule.tsx

@@ -0,0 +1,59 @@
+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';
+import { useSetSafeInterval } from '../../../tools/hooks/useSetSafeInterval';
+
+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>();
+  const setSafeInterval = useSetSafeInterval();
+  // Refresh data every second
+  useEffect(() => {
+    setSafeInterval(() => {
+      axios.get('/api/modules/systeminfo').then((res) => setData(res.data));
+    }, 1000);
+  }, []);
+
+  // 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/WeatherModule.tsx

@@ -1,24 +1,24 @@
-import { Group, Space, Title, Tooltip } from '@mantine/core';
+import { Group, Space, Title, Tooltip, Skeleton } from '@mantine/core';
 import axios from 'axios';
 import { useEffect, useState } from 'react';
 import {
-  ArrowDownRight,
-  ArrowUpRight,
-  Cloud,
-  CloudFog,
-  CloudRain,
-  CloudSnow,
-  CloudStorm,
-  QuestionMark,
-  Snowflake,
-  Sun,
-} from 'tabler-icons-react';
+  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)',
+  title: 'Weather',
   description: 'Look up the current weather in your location',
   icon: Sun,
   component: WeatherComponent,
@@ -27,6 +27,10 @@ export const WeatherModule: IModule = {
       name: 'Display in Fahrenheit',
       value: false,
     },
+    location: {
+      name: 'Current location',
+      value: 'Paris',
+    },
   },
 };
 
@@ -128,35 +132,49 @@ 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) ?? 'Paris';
   const isFahrenheit: boolean =
-    config?.modules?.[WeatherModule.title]?.options?.freedomunit?.value ?? false;
-
-  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;
+    return (
+      <>
+        <Skeleton height={40} width={100} mb="xl" />
+        <Group noWrap direction="row">
+          <Skeleton height={50} circle />
+          <Group>
+            <Skeleton height={25} width={70} mr="lg" />
+            <Skeleton height={25} width={70} />
+          </Group>
+        </Group>
+      </>
+    );
   }
   function usePerferedUnit(value: number): string {
-    return isFahrenheit ? `${(value * (9 / 5)).toFixed(1)}°F` : `${value.toFixed(1)}°C`;
+    return isFahrenheit ? `${(value * (9 / 5) + 32).toFixed(1)}°F` : `${value.toFixed(1)}°C`;
   }
   return (
-    <Group position="left" direction="column">
+    <Group p="sm" spacing="xs" direction="column">
       <Title>{usePerferedUnit(weather.current_weather.temperature)}</Title>
       <Group spacing={0}>
         <WeatherIcon code={weather.current_weather.weathercode} />

src/middleware.ts

@@ -0,0 +1,15 @@
+import { NextResponse } from 'next/server';
+import type { NextRequest } from 'next/server';
+
+// eslint-disable-next-line consistent-return
+export function middleware(request: NextRequest) {
+  // const cookie = request.cookies.get('password');
+  // const isPasswordCorrect = cookie === process.env.PASSWORD;
+  // if (
+  //   !isPasswordCorrect &&
+  //   request.nextUrl.pathname !== '/login' &&
+  //   request.nextUrl.pathname !== '/api/configs/trylogin'
+  // ) {
+  //   return NextResponse.redirect('/login');
+  // }
+}

src/pages/404.tsx

@@ -58,7 +58,7 @@ const useStyles = createStyles((theme) => ({
   },
 }));
 
-export function Illustration(props: React.ComponentPropsWithoutRef<'svg'>) {
+function Illustration(props: React.ComponentPropsWithoutRef<'svg'>) {
   const theme = useMantineTheme();
   return (
     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 362 145" {...props}>
@@ -70,7 +70,7 @@ export function Illustration(props: React.ComponentPropsWithoutRef<'svg'>) {
   );
 }
 
-export default function NothingFoundBackground() {
+export default function Custom404() {
   const { classes } = useStyles();
 
   return (

src/pages/[slug].tsx

@@ -6,6 +6,7 @@ import AppShelf from '../components/AppShelf/AppShelf';
 import LoadConfigComponent from '../components/Config/LoadConfig';
 import { Config } from '../tools/types';
 import { useConfig } from '../tools/state';
+import Layout from '../components/layout/Layout';
 
 export async function getServerSideProps(
   context: GetServerSidePropsContext
@@ -46,9 +47,9 @@ export default function HomePage(props: any) {
     setConfig(initialConfig);
   }, [initialConfig]);
   return (
-    <>
+    <Layout>
       <AppShelf />
       <LoadConfigComponent />
-    </>
+    </Layout>
   );
 }

src/pages/_app.tsx

@@ -1,51 +1,67 @@
 import { GetServerSidePropsContext } from 'next';
 import { useState } from 'react';
 import { AppProps } from 'next/app';
-import { getCookie, setCookies } from 'cookies-next';
+import { getCookie, setCookie } from 'cookies-next';
 import Head from 'next/head';
-import { MantineProvider, ColorScheme, ColorSchemeProvider } from '@mantine/core';
+import { MantineProvider, ColorScheme, ColorSchemeProvider, MantineTheme } from '@mantine/core';
 import { NotificationsProvider } from '@mantine/notifications';
 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';
+import { ColorTheme } from '../tools/color';
 
-export default function App(props: AppProps & { colorScheme: ColorScheme }) {
+export default function App(this: any, props: AppProps & { colorScheme: ColorScheme }) {
   const { Component, pageProps } = props;
   const [colorScheme, setColorScheme] = useState<ColorScheme>(props.colorScheme);
 
+  const [primaryColor, setPrimaryColor] = useState<MantineTheme['primaryColor']>('red');
+  const [secondaryColor, setSecondaryColor] = useState<MantineTheme['primaryColor']>('orange');
+  const [primaryShade, setPrimaryShade] = useState<MantineTheme['primaryShade']>(6);
+  const colorTheme = {
+    primaryColor,
+    secondaryColor,
+    setPrimaryColor,
+    setSecondaryColor,
+    primaryShade,
+    setPrimaryShade,
+  };
+
   const toggleColorScheme = (value?: ColorScheme) => {
     const nextColorScheme = value || (colorScheme === 'dark' ? 'light' : 'dark');
     setColorScheme(nextColorScheme);
-    setCookies('color-scheme', nextColorScheme, { maxAge: 60 * 60 * 24 * 30 });
+    setCookie('color-scheme', nextColorScheme, { maxAge: 60 * 60 * 24 * 30 });
   };
   useHotkeys([['mod+J', () => toggleColorScheme()]]);
 
   return (
     <>
       <Head>
-        <title>Homarr 🦞</title>
         <meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width" />
-        <link rel="shortcut icon" href="/favicon.svg" />
       </Head>
 
       <ColorSchemeProvider colorScheme={colorScheme} toggleColorScheme={toggleColorScheme}>
-        <MantineProvider
-          theme={{
-            ...theme,
-            colorScheme,
-          }}
-          withGlobalStyles
-          withNormalizeCSS
-        >
-          <NotificationsProvider limit={2} position="top-right">
-            <ConfigProvider>
-              <Layout>
+        <ColorTheme.Provider value={colorTheme}>
+          <MantineProvider
+            theme={{
+              ...theme,
+              primaryColor,
+              primaryShade,
+              colorScheme,
+            }}
+            styles={{
+              ...styles,
+            }}
+            withGlobalStyles
+            withNormalizeCSS
+          >
+            <NotificationsProvider limit={4} position="bottom-left">
+              <ConfigProvider>
                 <Component {...pageProps} />
-              </Layout>
-            </ConfigProvider>
-          </NotificationsProvider>
-        </MantineProvider>
+              </ConfigProvider>
+            </NotificationsProvider>
+          </MantineProvider>
+        </ColorTheme.Provider>
       </ColorSchemeProvider>
     </>
   );

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/configs/tryPassword.tsx

@@ -0,0 +1,25 @@
+import { NextApiRequest, NextApiResponse } from 'next';
+
+function Post(req: NextApiRequest, res: NextApiResponse) {
+  const { tried } = req.body;
+  // Try to match the password with the PASSWORD env variable
+  if (tried === process.env.PASSWORD) {
+    return res.status(200).json({
+      success: true,
+    });
+  }
+  return res.status(200).json({
+    success: false,
+  });
+}
+
+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/docker/container/[id].tsx

@@ -0,0 +1,60 @@
+import { NextApiRequest, NextApiResponse } from 'next';
+import Docker from 'dockerode';
+
+const docker = new Docker();
+
+async function Get(req: NextApiRequest, res: NextApiResponse) {
+  // Get the slug of the request
+  const { id } = req.query as { id: string };
+  const { action } = req.query;
+  // Get the action on the request (start, stop, restart)
+  if (action !== 'start' && action !== 'stop' && action !== 'restart' && action !== 'remove') {
+    return res.status(400).json({
+      statusCode: 400,
+      message: 'Invalid action',
+    });
+  }
+  if (!id) {
+    return res.status(400).json({
+      message: 'Missing ID',
+    });
+  }
+  // Get the container with the ID
+  const container = docker.getContainer(id);
+  const startAction = async () => {
+    switch (action) {
+      case 'remove':
+        return container.remove();
+      case 'start':
+        return container.start();
+      case 'stop':
+        return container.stop();
+      case 'restart':
+        return container.restart();
+      default:
+        return Promise;
+    }
+  };
+  try {
+    await startAction();
+    return res.status(200).json({
+      statusCode: 200,
+      message: `Container ${id} ${action}ed`,
+    });
+  } catch (err) {
+    return res.status(500).json(
+      err,
+    );
+  }
+}
+
+export default async (req: NextApiRequest, res: NextApiResponse) => {
+  // Filter out if the reuqest is a Put 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/docker/containers.tsx

@@ -0,0 +1,24 @@
+import { NextApiRequest, NextApiResponse } from 'next';
+
+import Docker from 'dockerode';
+
+async function Get(req: NextApiRequest, res: NextApiResponse) {
+  try {
+    const docker = new Docker();
+    const containers = await docker.listContainers({ all: true });
+    res.status(200).json(containers);
+  } catch (err) {
+    res.status(500).json({ err });
+  }
+}
+
+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/calendar.ts

@@ -0,0 +1,83 @@
+import axios from 'axios';
+import { getCookie } from 'cookies-next';
+import { NextApiRequest, NextApiResponse } from 'next';
+import { getConfig } from '../../../tools/getConfig';
+import { Config } from '../../../tools/types';
+
+async function Post(req: NextApiRequest, res: NextApiResponse) {
+  // Parse req.body as a ServiceItem
+  const { id } = req.body;
+  const { type } = req.query;
+  const configName = getCookie('config-name', { req });
+  const { config }: { config: Config } = getConfig(configName?.toString() ?? 'default').props;
+  // Find service with serviceId in config
+  const service = config.services.find((service) => service.id === id);
+  if (!service) {
+    return res.status(500).json({
+      statusCode: 500,
+      message: 'Missing service',
+    });
+  }
+
+  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',
+    },
+  ];
+  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
+  let { href: origin } = new URL(service.url);
+  if (origin.endsWith('/')) {
+    origin = origin.slice(0, -1);
+  }
+  const pined = `${origin}${url?.url}?apiKey=${service.apiKey}&end=${nextMonth}&start=${lastMonth}`;
+  return axios
+    .get(`${origin}${url?.url}?apiKey=${service.apiKey}&end=${nextMonth}&start=${lastMonth}`)
+    .then((response) => res.status(200).json(response.data))
+    .catch((e) => res.status(500).json(e));
+  // // 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,75 @@
+import { Deluge } from '@ctrl/deluge';
+import { QBittorrent } from '@ctrl/qbittorrent';
+import { NormalizedTorrent } from '@ctrl/shared-torrent';
+import { Transmission } from '@ctrl/transmission';
+import { getCookie } from 'cookies-next';
+import { NextApiRequest, NextApiResponse } from 'next';
+import { getConfig } from '../../../tools/getConfig';
+import { Config } from '../../../tools/types';
+
+async function Post(req: NextApiRequest, res: NextApiResponse) {
+  // Get the type of service from the request url
+  const configName = getCookie('config-name', { req });
+  const { config }: { config: Config } = getConfig(configName?.toString() ?? 'default').props;
+  const qBittorrentServices = config.services.filter((service) => service.type === 'qBittorrent');
+  const delugeServices = config.services.filter((service) => service.type === 'Deluge');
+  const transmissionServices = config.services.filter((service) => service.type === 'Transmission');
+
+  const torrents: NormalizedTorrent[] = [];
+
+  if (!qBittorrentServices && !delugeServices && !transmissionServices) {
+    return res.status(500).json({
+      statusCode: 500,
+      message: 'Missing services',
+    });
+  }
+  try {
+    await Promise.all(
+      qBittorrentServices.map((service) =>
+        new QBittorrent({
+          baseUrl: service.url,
+          username: service.username,
+          password: service.password,
+        })
+          .getAllData()
+          .then((e) => torrents.push(...e.torrents))
+      )
+    );
+    await Promise.all(
+      delugeServices.map((service) =>
+        new Deluge({
+          baseUrl: service.url,
+          password: 'password' in service ? service.password : '',
+        })
+          .getAllData()
+          .then((e) => torrents.push(...e.torrents))
+      )
+    );
+    // Map transmissionServices
+    await Promise.all(
+      transmissionServices.map((service) =>
+        new Transmission({
+          baseUrl: service.url,
+          username: 'username' in service ? service.username : '',
+          password: 'password' in service ? service.password : '',
+        })
+          .getAllData()
+          .then((e) => torrents.push(...e.torrents))
+      )
+    );
+  } catch (e: any) {
+    return res.status(401).json(e);
+  }
+  return res.status(200).json(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

@@ -7,10 +7,14 @@ async function Get(req: NextApiRequest, res: NextApiResponse) {
   await axios
     .get(url as string)
     .then((response) => {
-      res.status(200).json(response.data);
+      res.status(response.status).json(response.statusText);
     })
     .catch((error) => {
-      res.status(500).json(error);
+      if (error.response) {
+        res.status(error.response.status).json(error.response.statusText);
+      } else {
+        res.status(500).json('Server Error');
+      }
     });
   // // Make a request to the URL
   // const response = await axios.get(url);

src/pages/api/modules/search.ts

@@ -0,0 +1,19 @@
+import axios from 'axios';
+import { NextApiRequest, NextApiResponse } from 'next';
+
+async function Get(req: NextApiRequest, res: NextApiResponse) {
+  const { q } = req.query;
+  const response = await axios.get(`https://duckduckgo.com/ac/?q=${q}`);
+  res.status(200).json(response.data);
+}
+
+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,13 +1,14 @@
-import { getCookie, setCookies } from 'cookies-next';
+import { getCookie, setCookie } 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';
+import { useColorTheme } from '../tools/color';
+import Layout from '../components/layout/Layout';
 
 export async function getServerSideProps({
   req,
@@ -15,46 +16,31 @@ 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 });
+    setCookie('config-name', 'default', {
+      req,
+      res,
+      maxAge: 60 * 60 * 24 * 30,
+      sameSite: 'strict',
+    });
     cookie = 'default';
   }
-  // Check if the config file exists
-  const configPath = path.join(process.cwd(), 'data/configs', `${cookie}.json`);
-  if (!fs.existsSync(configPath)) {
-    return {
-      props: {
-        config: {
-          name: cookie.toString(),
-          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),
-    },
-  };
+  return getConfig(cookie as string);
 }
 
 export default function HomePage(props: any) {
   const { config: initialConfig }: { config: Config } = props;
-  const { config, loadConfig, setConfig, getConfigs } = useConfig();
+  const { setConfig } = useConfig();
+  const { setPrimaryColor, setSecondaryColor } = useColorTheme();
   useEffect(() => {
     const migratedConfig = migrateToIdConfig(initialConfig);
+    setPrimaryColor(migratedConfig.settings.primaryColor || 'red');
+    setSecondaryColor(migratedConfig.settings.secondaryColor || 'orange');
     setConfig(migratedConfig);
   }, [initialConfig]);
   return (
-    <>
+    <Layout>
       <AppShelf />
       <LoadConfigComponent />
-    </>
+    </Layout>
   );
 }

src/pages/login.tsx

@@ -0,0 +1,117 @@
+import React from 'react';
+import { PasswordInput, Anchor, Paper, Title, Text, Container, Group, Button } from '@mantine/core';
+import { setCookie } from 'cookies-next';
+import { useForm } from '@mantine/hooks';
+import { showNotification, updateNotification } from '@mantine/notifications';
+import axios from 'axios';
+import { IconCheck, IconX } from '@tabler/icons';
+import { Logo } from '../components/layout/Logo';
+
+// TODO: Add links to the wiki articles about the login process.
+export default function AuthenticationTitle() {
+  const form = useForm({
+    initialValues: {
+      password: '',
+    },
+  });
+  return (
+    <Container
+      size="lg"
+      style={{
+        height: '100vh',
+        display: 'flex',
+        width: '100%',
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'center',
+      }}
+    >
+      <Group>
+        <Title
+          align="center"
+          sx={(theme) => ({ fontFamily: `Greycliff CF, ${theme.fontFamily}`, fontWeight: 900 })}
+        >
+          Welcome back!
+        </Title>
+        <Logo withoutText />
+      </Group>
+
+      <Text color="dimmed" size="sm" align="center" mt={5}>
+        Please enter the{' '}
+        <Anchor<'a'> href="#" size="sm" onClick={(event) => event.preventDefault()}>
+          password
+        </Anchor>
+      </Text>
+
+      <Paper
+        withBorder
+        shadow="md"
+        p={30}
+        mt={30}
+        radius="md"
+        style={{ width: '100%', maxWidth: 420 }}
+      >
+        <form
+          onSubmit={form.onSubmit((values) => {
+            setCookie('password', values.password, {
+              maxAge: 60 * 60 * 24 * 30,
+              sameSite: 'lax',
+            });
+            showNotification({
+              id: 'load-data',
+              loading: true,
+              title: 'Checking your password',
+              message: 'Your password is being checked...',
+              autoClose: false,
+              disallowClose: true,
+            });
+            axios
+              .post('/api/configs/tryPassword', {
+                tried: values.password,
+              })
+              .then((res) => {
+                setTimeout(() => {
+                  if (res.data.success === true) {
+                    updateNotification({
+                      id: 'load-data',
+                      color: 'teal',
+                      title: 'Password correct',
+                      message: undefined,
+                      icon: <IconCheck />,
+                      autoClose: 300,
+                      onClose: () => {
+                        window.location.reload();
+                      },
+                    });
+                  }
+                  if (res.data.success === false) {
+                    updateNotification({
+                      id: 'load-data',
+                      color: 'red',
+                      title: 'Password is wrong, please try again.',
+                      message: undefined,
+                      icon: <IconX />,
+                      autoClose: 2000,
+                    });
+                  }
+                }, 500);
+              });
+          })}
+        >
+          <PasswordInput
+            id="password"
+            label="Password"
+            placeholder="Your password"
+            required
+            autoFocus
+            mt="md"
+            {...form.getInputProps('password')}
+          />
+          <Button fullWidth type="submit" mt="xl">
+            Sign in
+          </Button>
+        </form>
+      </Paper>
+    </Container>
+  );
+}

src/tools/addToHomarr.ts

@@ -0,0 +1,57 @@
+import Dockerode from 'dockerode';
+import { Config, MatchingImages, ServiceType, tryMatchPort } from './types';
+
+async function MatchIcon(name: string) {
+  const res = await fetch(
+    `https://cdn.jsdelivr.net/gh/walkxhub/dashboard-icons/png/${name
+      .replace(/\s+/g, '-')
+      .toLowerCase()}.png`
+  );
+  return res.ok ? res.url : '/favicon.svg';
+}
+
+function tryMatchType(imageName: string): ServiceType {
+  // Try to find imageName inside MatchingImages
+
+  const match = MatchingImages.find(({ image }) => imageName.includes(image));
+  if (match) {
+    return match.type;
+  }
+  return 'Other';
+}
+
+export function tryMatchService(container: Dockerode.ContainerInfo | undefined) {
+  if (container === undefined) return {};
+  const name = container.Names[0].substring(1);
+  const type = tryMatchType(container.Image);
+  const port = tryMatchPort(type.toLowerCase());
+  return {
+    name,
+    id: container.Id,
+    type: tryMatchType(container.Image),
+    url: `localhost${port ? `:${port.value}` : ''}`,
+    icon: `https://cdn.jsdelivr.net/gh/walkxhub/dashboard-icons/png/${name
+      .replace(/\s+/g, '-')
+      .toLowerCase()}.png`,
+  };
+}
+
+export default async function addToHomarr(
+  container: Dockerode.ContainerInfo,
+  config: Config,
+  setConfig: (newconfig: Config) => void
+) {
+  setConfig({
+    ...config,
+    services: [
+      ...config.services,
+      {
+        name: container.Names[0].substring(1),
+        id: container.Id,
+        type: tryMatchType(container.Image),
+        url: `localhost:${container.Ports.at(0)?.PublicPort}`,
+        icon: await MatchIcon(container.Names[0].substring(1)),
+      },
+    ],
+  });
+}

src/tools/color.ts

@@ -0,0 +1,28 @@
+import { createContext, useContext } from 'react';
+import { MantineTheme } from '@mantine/core';
+
+type colorThemeContextType = {
+  primaryColor: MantineTheme['primaryColor'];
+  secondaryColor: MantineTheme['primaryColor'];
+  primaryShade: MantineTheme['primaryShade'];
+  setPrimaryColor: (color: MantineTheme['primaryColor']) => void;
+  setSecondaryColor: (color: MantineTheme['primaryColor']) => void;
+  setPrimaryShade: (shade: MantineTheme['primaryShade']) => void;
+};
+
+export const ColorTheme = createContext<colorThemeContextType>({
+  primaryColor: 'red',
+  secondaryColor: 'orange',
+  primaryShade: 6,
+  setPrimaryColor: () => {},
+  setSecondaryColor: () => {},
+  setPrimaryShade: () => {},
+});
+
+export function useColorTheme() {
+  const context = useContext(ColorTheme);
+  if (context === undefined) {
+    throw new Error('useColorTheme must be used within a ColorTheme.Provider');
+  }
+  return context;
+}

src/tools/getConfig.ts

@@ -0,0 +1,35 @@
+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: {
+            'Search Bar': {
+              enabled: true,
+            },
+          },
+        },
+      },
+    };
+  }
+
+  const config = fs.readFileSync(configPath, 'utf8');
+  // Print loaded config
+  return {
+    props: {
+      configName: name,
+      config: JSON.parse(config),
+    },
+  };
+}

src/tools/hooks/useSetSafeInterval.tsx

@@ -0,0 +1,22 @@
+import { useEffect, useRef } from 'react';
+
+export function useSetSafeInterval() {
+  const timers = useRef<NodeJS.Timer[]>([]);
+
+  function setSafeInterval(callback: () => void, delay: number) {
+    const newInterval = setInterval(callback, delay);
+    timers.current.push(newInterval);
+    return newInterval;
+  }
+
+  useEffect(
+    () => () => {
+      timers.current.forEach((t) => {
+        clearInterval(t);
+      });
+    },
+    []
+  );
+
+  return setSafeInterval;
+}