🟣 V0.9.1: Overserr integration and new design !

Will open a new tab

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

.github/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/release-note.md

@@ -0,0 +1,27 @@
+## 🦞 Homarr [v0.0.0](https://github.com/ajnart/homarr/compare/v0.0.0...v0.0.0) (2022-01-01)
+
+<!-- Small release message -->
+
+<!-- Bigger announcement marked in bold -->
+
+### Upgrade Steps
+*Upgrading without a mounted config? Make sure to download your config from the settings first! You can add it back later by drag and dropping it into your browser.*
+* `docker pull ghcr.io/ajnart/homarr:latest`
+* `docker stop [container_id]`
+* `docker rm [container_id]`
+* `docker run --name homarr -p 7575:7575 -v /data/docker/homarr:/app/data/configs -d ghcr.io/ajnart/homarr:latest` 
+   * *(or use our [docker_compose.yml](https://github.com/ajnart/homarr#-installation))*
+
+### Breaking Changes
+
+### New Features
+
+### Bug Fixes
+
+### UI Changes
+
+### GitHub Changes
+
+### Other Changes
+
+_**Special thanks to our contributors: @ajnart, @c00ldude1oo, @walkxcode, and of course all people using our project.**_

.github/workflows/docker.yml

@@ -1,11 +1,17 @@
-name: Master docker CI
+name: Master CI
-# Workflow to build and publish docker image
+# 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]
+    paths-ignore:
+      - '.github/**'
+      - '**.md'
     tags:
       - v*
+    
   workflow_dispatch:
 
 env:
@@ -18,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/checkout@v3
-      - uses: actions/cache@v2
+
-        id: restore-build
+      - 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
+            ${{ github.workspace }}/.next/cache
-             ./pages/
+          # Generate a new cache whenever packages or source files change.
-             ./public/
+          key: ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json') }}-${{ hashFiles('**.[jt]s', '**.[jt]sx') }}
-             ./.next/static/
+          # If source files changed but packages didn't, rebuild from a prior cache.
-             ./.next/standalone/
+          restore-keys: |
-             ./packages.json
+            ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json') }}-
-          key: ${{ github.sha }}
+
+      - run: yarn install --immutable
+
+      - run: yarn build
+
       - name: Docker meta
         id: meta
         uses: docker/metadata-action@v4
@@ -94,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:
@@ -110,6 +93,8 @@ jobs:
         with:
           platforms: linux/amd64,linux/arm64,linux/arm/v7
           context: .
-          push: ${{ github.event_name != 'pull_request' }}
+          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

@@ -6,12 +6,18 @@ name: Development CI
 on:
   push:
     branches: [dev]
+    paths-ignore:
+      - '.github/**'
+      - '**.md'
   pull_request:
+    paths-ignore:
+      - '.github/**'
+      - '**.md'
   workflow_dispatch:
     inputs:
-      tags:
+      tag:
-        requierd: true
+        required: true
-        description: 'Tags to deploy to'
+        description: 'Tag to deploy to'
 
 env:
   # Use docker.io for Docker Hub if empty
@@ -23,69 +29,48 @@ jobs:
   # Push image to GitHub Packages.
   # See also https://docs.docker.com/docker-hub/builds/
   yarn_install_and_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
-        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'`)
-        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
-        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/checkout@v3
-      - uses: actions/cache@v2
+
-        id: restore-build
+      - 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
+            ${{ github.workspace }}/.next/cache
-             ./pages/
+          # Generate a new cache whenever packages or source files change.
-             ./public/
+          key: ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json') }}-${{ hashFiles('**.[jt]s', '**.[jt]sx') }}
-             ./.next/static/
+          # If source files changed but packages didn't, rebuild from a prior cache.
-             ./.next/standalone/
+          restore-keys: |
-             ./packages.json
+            ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json') }}-
-          key: ${{ github.sha }}
+
+      - run: yarn install --immutable
+
+      - run: yarn build
+
       - name: Docker meta
+        if: github.event_name != 'pull_request'
         id: meta
         uses: docker/metadata-action@v4
         with:
@@ -94,12 +79,17 @@ jobs:
           # generate Docker tags based on the following events/attributes
           tags: |
             type=ref,event=pr
-            tpye=raw,value=dev,priority=1
+            type=raw,value=${{ github.event.inputs.tag }}, prefix=test-,enable=${{ github.event.inputs.tag != '' }}
+            tpye=raw,value=dev,priority=1,enable=${{ github.event.inputs.tag == '' }}
+
       - 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
+        if: github.event_name != 'pull_request'
         uses: docker/login-action@v2
         with:
           registry: ghcr.io
@@ -107,10 +97,13 @@ jobs:
           password: ${{ secrets.GITHUB_TOKEN }}
 
       - name: Build and push
+        if: github.event_name != 'pull_request'
         uses: docker/build-push-action@v3
         with:
           platforms: linux/amd64,linux/arm64,linux/arm/v7
           context: .
-          push: true
+          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

@@ -35,4 +35,15 @@ yarn-error.log*
 *.tsbuildinfo
 
 # storybook
-storybook-static
+storybook-static
+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,34 +0,0 @@
-module.exports = {
-  stories: ['../src/components/**/*.story.mdx', '../src/components/**/*.story.*'],
-  addons: [
-    'storybook-dark-mode',
-    '@storybook/addon-links',
-    '@storybook/addon-essentials',
-    {
-      name: 'storybook-addon-turbo-build',
-      options: { optimizationLevel: 2 },
-    },
-  ],
-  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,21 +0,0 @@
-import { useDarkMode } from 'storybook-dark-mode';
-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
-        theme={{ colorScheme: useDarkMode() ? 'dark' : 'light' }}
-        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,19 +1,21 @@
 FROM node:16-alpine
 WORKDIR /app
+
+ENV NEXT_TELEMETRY_DISABLED 1
+
 ENV NODE_ENV production
-RUN addgroup --system --gid 1001 nodejs
-RUN adduser --system --uid 1001 nextjs
 
-COPY /next.config.js ./
+COPY next.config.js ./
-COPY  /public ./public
+COPY public ./public
-COPY /package.json ./package.json
+COPY package.json ./package.json
 
-# Automatically leverage output traces to reduce image size
+# Automatically leverage output traces to reduce image size 
 # https://nextjs.org/docs/advanced-features/output-file-tracing
-COPY /.next/standalone ./
+COPY .next/standalone ./
-COPY /.next/static ./.next/static
+COPY .next/static ./.next/static
 
 EXPOSE 7575
+
 ENV PORT 7575
-VOLUME /app/data/configs
+
-CMD ["node", "server.js"]
+CMD ["node", "server.js"]

README.md

@@ -1,84 +1,142 @@
-<h3 align="center">Homarr</h3>
+
-<br/>
+<!-- Project Title -->
+<h1 align="center">Homarr</h1>
+
+<!-- Badges -->
 <p align="center">
-  <a href="https://github.com/ajnart/homarr/actions/workflows/docker.yml">
+<img src="https://img.shields.io/github/stars/ajnart/homarr?label=%E2%AD%90%20Stars&style=flat-square?branch=master&kill_cache=1%22">
-      <img title="Docker CI Status" src="https://github.com/ajnart/homarr/actions/workflows/docker.yml/badge.svg" alt="CI Status"></a>
+<a href="https://github.com/ajnart/homarr/releases/latest">
-    <a href="https://github.com/ajnart/homarr/releases/latest">
+  <img alt="Latest Release (Semver)" src="https://img.shields.io/github/v/release/ajnart/homarr?label=%F0%9F%9A%80%20Release">
-      <img alt="GitHub release (latest SemVer)" src="https://img.shields.io/github/v/release/ajnart/homarr"></a>
+</a>
-  <a href="https://github.com/ajnart/homarr/pkgs/container/homarr">
+<a href="https://github.com/ajnart/homarr/actions/workflows/docker.yml">
-    <img alt="Docker Pulls" src="https://img.shields.io/docker/pulls/ajnart/homarr?label=Downloads%20"></a>
+  <img title="Docker CI Status" src="https://github.com/ajnart/homarr/actions/workflows/docker.yml/badge.svg" alt="CI Status">
-  </p>
+</a>
-  <p align="center">
+<a href="https://discord.gg/aCsmEV5RgA">
-  <a href="">
+  <img title="Discord" src="https://discordapp.com/api/guilds/972958686051962910/widget.png?style=shield">
-<img align="end" width=600 src="https://user-images.githubusercontent.com/49837342/168315259-b778c816-10fe-44db-bd25-3eea6f31b233.png" />
+</a>
-  <a/>
-  </p>
-  <p align = "center">
-    A homepage for <i>your</i> server.
-  <br/>
-  <a href = "https://github.com/ajnart/homarr/deployments/activity_log?environment=Production" > <strong> Demo ↗️ </strong> </a> • <a href = "#-installation" > <strong> Install ➡️ </strong> </a>
-  <br />
-  <br />
-    <i>Join the discord!</i>
-  <br />
-    <a href = "https://discord.gg/aCsmEV5RgA" > <img title="Discord" src="https://discordapp.com/api/guilds/972958686051962910/widget.png?style=shield" > </a>
-  <br/>  
-    <br/>
 </p>
 
-# 📃 Table of Contents
+<!-- Links -->
-- [📃 Table of Contents](#-table-of-contents)
+<p align="center">
-- [🚀 Getting Started](#-getting-started)
+<i>Join the discord! — Don't forget to star the repo if you are enjoying the project!</i>
-  - [ℹ️ About](#ℹ️-about)
+</p>
-  - [🐛 Known Issues](#-known-issues)
+<p align="center">
-  - [⚡ Installation](#-installation)
+<a href="https://homarr.ajnart.fr/"><strong> Demo ↗️ </strong></a> • <a href="https://homarr.vercel.app/docs/quick-start/"><strong> Install ➡️ </strong></a> • <a href="https://homarr.vercel.app/docs/about"><strong> Read the Docs 📄 </strong></a>
-    - [Deploying from Docker Image 🐳](#deploying-from-docker-image-)
+</p>
-    - [Building from Source 🛠️](#building-from-source-️)
-- [💖 Contributing](#-contributing)
 
-<!-- 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)**
 
-## ⚡ Installation
+It integrates with the services you use to display information on the homepage (E.g. Show upcoming Sonarr/Radarr releases).
 
-### Deploying from Docker Image 🐳
+For a full list of integrations, [head over to our documentation](https://homarr.vercel.app/docs/advanced-features/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 documentation!](https://homarr.vercel.app/docs/about)**
+
+<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 directly from your homepage.
+- Real-time status indicator for every service.
+- Automatically finds icons while you type the name of a service.
+- 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](#homarr)**
+
+---
+
+## 🚀 Installation
+### 🐳 Deploying from Docker Image
 > Supported architectures: x86-64, ARM, ARM64
 
 _Requirements_:
 - [Docker](https://docs.docker.com/get-docker/)
 
 **Standard Docker Install**
-```sh
+```bash
-docker run --name homarr -p 7575:7575 -v /data/docker/homarr:/app/data/configs -d ghcr.io/ajnart/homarr:latest
+docker run  \
+  --name homarr \
+  --restart unless-stopped \
+  -p 7575:7575 \
+  -v ./homarr/configs:/app/data/configs \
+  -v ./homarr/icons:/app/public/icons \
+  -d ghcr.io/ajnart/homarr:latest
 ```
 
 **Docker Compose**
 ```yml
 ---
 version: '3'
-#--------------------------------------------------------------------------------------------#
+#---------------------------------------------------------------------#
-#                               Homarr -  A homepage for your server.                        #
+#                Homarr -  A homepage for your server.                #
-#--------------------------------------------------------------------------------------------#
+#---------------------------------------------------------------------#
 services:
   homarr:
     container_name: homarr
     image: ghcr.io/ajnart/homarr:latest
     restart: unless-stopped
     volumes:
-      - /data/docker/homarr:/app/data/configs
+      - ./homarr/configs:/app/data/configs
+      - ./homarr/icons:/app/public/icons
     ports:
       - '7575:7575'
 ```
 
-***Getting EACCESS errors in the logs? Try running `sudo chmod 775 /directory-you-mounted-to`!***
+```sh
+docker compose up -d
+```
 
-### Building from Source 🛠️
+*Getting EACCESS errors in the logs? Try running `sudo chmod 777 /directory-you-mounted-to`!*
+
+**[⤴️ Back to Top](#homarr)**
+
+### 🛠️ Building from Source
 
 _Requirements_:
 - [Git](https://git-scm.com/downloads)
@@ -93,9 +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``*
 
-# 💖 Contributing
+**[⤴️ Back to Top](#homarr)**
+
+---
+
+## 💖 Contributing
 **Please read our [Contribution Guidelines](/CONTRIBUTING.md)**
 
 All contributions are highly appreciated.
-    
+
-**[⤴️ Back to Top](#-table-of-contents)**
+**[⤴️ Back to Top](#homarr)**
+
+---
+
+
+## 📜 License
+Homarr is Licensed under [MIT](https://en.wikipedia.org/wiki/MIT_License)
+
+```txt
+Copyright © 2022 Thomas "ajnart" Camlong
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+```
+
+**[⤴️ Back to Top](#homarr)**
+
+---
+
+<p align="center">
+  <i>Thank you for visiting! <b>For more information <a href="https://homarr.vercel.app/docs/about">read the documentation!</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/config.json

@@ -1,12 +0,0 @@
-{
-  "name": "config",
-  "services": [],
-  "settings": {
-    "searchBar": true,
-    "searchUrl": "https://duckduckgo.com/?q=",
-    "enabledModules": [
-      "Date",
-      "Calendar"
-    ]
-  }
-}

data/configs/config_new.json

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

data/configs/default.json

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

data/constants.ts

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

next.config.js

@@ -1,13 +1,16 @@
+const { env } = require('process');
+
 const withBundleAnalyzer = require('@next/bundle-analyzer')({
   enabled: process.env.ANALYZE === 'true',
 });
 
 module.exports = withBundleAnalyzer({
-  reactStrictMode: true,
+  images: {
-  eslint: {
+    domains: ['cdn.jsdelivr.net'],
-    ignoreDuringBuilds: true,
   },
+  reactStrictMode: false,
   experimental: {
     outputStandalone: true,
   },
+  output: 'standalone',
 });

package.json

@@ -1,87 +1,91 @@
 {
 	"name": "homarr",
-	"version": "0.3.0",
+	"version": "0.9.1",
-	"private": "false",
 	"description": "Homarr - A homepage for your server.",
+	"license": "MIT",
 	"repository": {
 		"type": "git",
 		"url": "https://github.com/ajnart/homarr"
 	},
-  "scripts": {
+	"scripts": {
-    "dev": "next dev",
+		"dev": "next dev",
-    "build": "next build",
+		"build": "next build",
-    "analyze": "ANALYZE=true next build",
+		"analyze": "ANALYZE=true next build",
-    "start": "next start --port 7575",
+		"start": "next start",
-    "typecheck": "tsc --noEmit",
+		"typecheck": "tsc --noEmit",
-    "export": "next build && next export",
+		"export": "next build && next export",
-    "lint": "next lint",
+		"lint": "next lint",
-    "jest": "jest",
+		"jest": "jest",
-    "jest:watch": "jest --watch",
+		"jest:watch": "jest --watch",
-    "prettier:check": "prettier --check \"**/*.{ts,tsx}\"",
+		"prettier:check": "prettier --check \"**/*.{ts,tsx}\"",
-    "prettier:write": "prettier --write \"**/*.{ts,tsx}\"",
+		"prettier:write": "prettier --write \"**/*.{ts,tsx}\"",
-    "test": "npm run prettier:check && npm run lint && npm run typecheck && npm run jest",
+		"test": "npm run prettier:check && npm run lint && npm run typecheck && npm run jest",
-    "storybook": "start-storybook -p 7001",
+		"ci": "yarn test && yarn lint --fix && yarn typecheck && yarn prettier:write"
-    "storybook:build": "build-storybook",
+	},
-    "ci": "yarn test && yarn lint --fix && yarn typecheck && yarn prettier:write"
+	"dependencies": {
-  },
+		"@ctrl/deluge": "^4.1.0",
-  "dependencies": {
+		"@ctrl/qbittorrent": "^4.1.0",
-    "@mantine/core": "^4.2.4",
+		"@ctrl/shared-torrent": "^4.1.1",
-    "@mantine/dates": "^4.2.4",
+		"@ctrl/transmission": "^4.1.1",
-    "@mantine/dropzone": "^4.2.4",
+		"@dnd-kit/core": "^6.0.5",
-    "@mantine/form": "^4.2.4",
+		"@dnd-kit/sortable": "^7.0.1",
-    "@mantine/hooks": "^4.2.4",
+		"@dnd-kit/utilities": "^3.2.0",
-    "@mantine/modals": "^4.2.4",
+		"@emotion/react": "^11.10.0",
-    "@mantine/next": "^4.2.4",
+		"@emotion/server": "^11.10.0",
-    "@mantine/notifications": "^4.2.4",
+		"@mantine/carousel": "^5.1.0",
-    "@mantine/prism": "^4.2.4",
+		"@mantine/core": "^5.1.0",
-    "@mantine/rte": "^4.2.4",
+		"@mantine/dates": "^5.1.0",
-    "@mantine/spotlight": "^4.2.4",
+		"@mantine/dropzone": "^5.1.0",
-    "@modulz/radix-icons": "^4.0.0",
+		"@mantine/form": "^5.1.0",
-    "axios": "^0.27.2",
+		"@mantine/hooks": "^5.1.0",
-    "cookies-next": "^2.0.4",
+		"@mantine/modals": "^5.1.0",
-    "dayjs": "^1.11.2",
+		"@mantine/next": "^5.1.0",
-    "framer-motion": "^6.3.1",
+		"@mantine/notifications": "^5.1.0",
-    "js-file-download": "^0.4.12",
+		"@mantine/prism": "^5.0.0",
-    "next": "12.1.5-canary.4",
+		"@nivo/core": "^0.79.0",
-    "prism-react-renderer": "^1.3.1",
+		"@nivo/line": "^0.79.1",
-    "react": "18.0.0",
+		"@tabler/icons": "^1.78.0",
-    "react-dom": "18.0.0",
+		"add": "^2.0.6",
-    "tabler-icons-react": "^1.46.0"
+		"axios": "^0.27.2",
-  },
+		"consola": "^2.15.3",
-  "devDependencies": {
+		"cookies-next": "^2.1.1",
-    "@babel/core": "^7.17.8",
+		"dayjs": "^1.11.4",
-    "@next/bundle-analyzer": "^12.1.4",
+		"dockerode": "^3.3.2",
-    "@next/eslint-plugin-next": "^12.1.4",
+		"embla-carousel-react": "^7.0.0",
-    "@storybook/addon-essentials": "^6.4.22",
+		"framer-motion": "^6.5.1",
-    "@storybook/addon-links": "^6.4.22",
+		"js-file-download": "^0.4.12",
-    "@storybook/react": "^6.4.22",
+		"next": "12.1.6",
-    "@testing-library/dom": "^8.12.0",
+		"prism-react-renderer": "^1.3.5",
-    "@testing-library/jest-dom": "^5.16.3",
+		"react": "^18.2.0",
-    "@testing-library/react": "^13.0.0",
+		"react-dom": "^18.2.0",
-    "@testing-library/user-event": "^14.0.4",
+		"sharp": "^0.30.7",
-    "@types/jest": "^27.4.1",
+		"systeminformation": "^5.12.1",
-    "@types/node": "^17.0.23",
+		"uuid": "^8.3.2",
-    "@types/react": "17.0.43",
+		"yarn": "^1.22.19"
-    "@typescript-eslint/eslint-plugin": "^5.16.0",
+	},
-    "@typescript-eslint/parser": "^5.16.0",
+	"devDependencies": {
-    "babel-loader": "^8.2.4",
+		"@next/bundle-analyzer": "^12.1.4",
-    "eslint": "^8.11.0",
+		"@next/eslint-plugin-next": "^12.1.4",
-    "eslint-config-airbnb": "19.0.4",
+		"@types/dockerode": "^3.3.9",
-    "eslint-config-airbnb-typescript": "^16.1.4",
+		"@types/node": "17.0.1",
-    "eslint-config-mantine": "1.1.0",
+		"@types/react": "17.0.1",
-    "eslint-plugin-import": "^2.25.4",
+		"@types/uuid": "^8.3.4",
-    "eslint-plugin-jest": "^26.1.3",
+		"@typescript-eslint/eslint-plugin": "^5.30.7",
-    "eslint-plugin-jsx-a11y": "^6.5.1",
+		"@typescript-eslint/parser": "^5.30.7",
-    "eslint-plugin-react": "^7.29.4",
+		"eslint": "^8.20.0",
-    "eslint-plugin-react-hooks": "^4.3.0",
+		"eslint-config-airbnb": "^19.0.4",
-    "eslint-plugin-storybook": "^0.5.11",
+		"eslint-config-airbnb-typescript": "^17.0.0",
-    "eslint-plugin-testing-library": "^5.2.0",
+		"eslint-config-mantine": "^2.0.0",
-    "eslint-plugin-unused-imports": "^2.0.0",
+		"eslint-plugin-import": "^2.26.0",
-    "jest": "^27.5.1",
+		"eslint-plugin-jest": "^26.6.0",
-    "prettier": "^2.6.2",
+		"eslint-plugin-jsx-a11y": "^6.6.1",
-    "storybook-addon-turbo-build": "^1.1.0",
+		"eslint-plugin-react": "^7.30.1",
-    "storybook-dark-mode": "^1.0.9",
+		"eslint-plugin-react-hooks": "^4.6.0",
-    "ts-jest": "^27.1.4",
+		"eslint-plugin-testing-library": "^5.5.1",
-    "typescript": "4.6.3"
+		"eslint-plugin-unused-imports": "^2.0.0",
-  }
+		"jest": "^28.1.3",
+		"prettier": "^2.7.1",
+		"typescript": "^4.7.4"
+	},
+	"packageManager": "yarn@3.2.1"
 }

src/components/AppShelf/AddAppShelfItem.tsx

@@ -1,25 +1,30 @@
 import {
-  Modal,
+  ActionIcon,
+  Anchor,
+  Button,
   Center,
   Group,
-  TextInput,
   Image,
-  Button,
-  Select,
-  AspectRatio,
-  Text,
-  Card,
   LoadingOverlay,
-  ActionIcon,
+  Modal,
+  MultiSelect,
+  PasswordInput,
+  Select,
+  Stack,
+  Switch,
+  Tabs,
+  TextInput,
+  Title,
   Tooltip,
 } from '@mantine/core';
 import { useForm } from '@mantine/form';
-import { motion } from 'framer-motion';
+import { IconApps } from '@tabler/icons';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
-import { Apps } from 'tabler-icons-react';
+import { v4 as uuidv4 } from 'uuid';
+import { useDebouncedValue } from '@mantine/hooks';
 import { useConfig } from '../../tools/state';
-import { ServiceTypeList } from '../../tools/types';
+import { tryMatchPort, ServiceTypeList, StatusCodes } from '../../tools/types';
-import { AppShelfItemWrapper } from './AppShelfItemWrapper';
+import Tip from '../layout/Tip';
 
 export function AddItemShelfButton(props: any) {
   const [opened, setOpened] = useState(false);
@@ -28,143 +33,158 @@ export function AddItemShelfButton(props: any) {
       <Modal
         size="xl"
         radius="md"
+        title={<Title order={3}>Add service</Title>}
         opened={props.opened || opened}
         onClose={() => setOpened(false)}
-        title="Add a service"
       >
         <AddAppShelfItemForm setOpened={setOpened} />
       </Modal>
-      <ActionIcon
+      <Tooltip withinPortal label="Add a service">
-        variant="default"
+        <ActionIcon
-        radius="md"
+          variant="default"
-        size="xl"
+          radius="md"
-        color="blue"
+          size="xl"
-        style={props.style}
+          color="blue"
-        onClick={() => setOpened(true)}
+          style={props.style}
-      >
+          onClick={() => setOpened(true)}
-        <Tooltip label="Add a service">
+        >
-          <Apps />
+          <IconApps />
-        </Tooltip>
+        </ActionIcon>
-      </ActionIcon>
+      </Tooltip>
     </>
   );
 }
 
-export default function AddItemShelfItem(props: any) {
+function MatchIcon(name: string | undefined, form: any) {
-  const [opened, setOpened] = useState(false);
+  if (name === undefined || name === '') return null;
-  return (
-    <>
-      <Modal
-        size="xl"
-        radius="md"
-        opened={props.opened || opened}
-        onClose={() => setOpened(false)}
-        title="Add a service"
-      >
-        <AddAppShelfItemForm setOpened={setOpened} />
-      </Modal>
-      <AppShelfItemWrapper>
-        <Card.Section>
-          <Group position="center" mx="lg">
-            <Text
-              // TODO: #1 Remove this hack to get the text to be centered.
-              ml={15}
-              style={{
-                alignSelf: 'center',
-                alignContent: 'center',
-                alignItems: 'center',
-                justifyContent: 'center',
-                justifyItems: 'center',
-              }}
-              mt="sm"
-              weight={500}
-            >
-              Add a service
-            </Text>
-          </Group>
-        </Card.Section>
-        <Card.Section>
-          <AspectRatio ratio={5 / 3} m="xl">
-            <motion.i
-              whileHover={{
-                cursor: 'pointer',
-                scale: 1.1,
-              }}
-            >
-              <Apps style={{ cursor: 'pointer' }} onClick={() => setOpened(true)} size={60} />
-            </motion.i>
-          </AspectRatio>
-        </Card.Section>
-      </AppShelfItemWrapper>
-    </>
-  );
-}
-
-function MatchIcon(name: string, form: any) {
   fetch(
     `https://cdn.jsdelivr.net/gh/walkxhub/dashboard-icons/png/${name
       .replace(/\s+/g, '-')
-      .toLowerCase()}.png`
+      .toLowerCase()
-  )
+      .replace(/^dash\.$/, 'dashdot')}.png`
-    .then((res) => {
+  ).then((res) => {
-      if (res.status === 200) {
+    if (res.ok) {
-        form.setFieldValue('icon', res.url);
+      form.setFieldValue('icon', res.url);
-      }
+    }
-    })
+  });
-    .catch(() => {
-      // Do nothing
-    });
 
   return false;
 }
 
+function MatchService(name: string, form: any) {
+  const service = ServiceTypeList.find((s) => s.toLowerCase() === name.toLowerCase());
+  if (service) {
+    form.setFieldValue('type', service);
+  }
+}
+
+const DEFAULT_ICON = '/favicon.png';
+
 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 InitialCategories = config.services.reduce((acc, cur) => {
+    if (cur.category && !acc.includes(cur.category)) {
+      acc.push(cur.category);
+    }
+    return acc;
+  }, [] as string[]);
+  const [categories, setCategories] = useState<string[]>(InitialCategories);
+
   const form = useForm({
     initialValues: {
+      id: props.id ?? uuidv4(),
       type: props.type ?? 'Other',
+      category: props.category ?? null,
       name: props.name ?? '',
-      icon: props.icon ?? '',
+      icon: props.icon ?? DEFAULT_ICON,
       url: props.url ?? '',
-      apiKey: props.apiKey ?? (undefined as unknown as string),
+      apiKey: props.apiKey ?? undefined,
+      username: props.username ?? undefined,
+      password: props.password ?? undefined,
+      openedUrl: props.openedUrl ?? undefined,
+      status: props.status ?? ['200'],
+      newTab: props.newTab ?? true,
     },
     validate: {
       apiKey: () => null,
       // Validate icon with a regex
-      icon: (value: string) => {
+      icon: (value: string) =>
-        if (!value.match(/^https?:\/\/.+\.(png|jpg|jpeg|gif)$/)) {
+        // Disable matching to allow any values
-          return 'Please enter a valid icon URL';
+        null,
+      // Validate url with a regex http/https
+      url: (value: string) => {
+        try {
+          const _isValid = new URL(value);
+        } catch (e) {
+          return 'Please enter a valid URL';
         }
         return null;
       },
-      // Validate url with a regex http/https
+      status: (value: string[]) => {
-      url: (value: string) => {
+        if (!value.length) {
-        if (!value.match(/^https?:\/\/.+\/$/)) {
+          return 'Please select a status code';
-          return 'Please enter a valid URL (that ends with a /)';
         }
         return null;
       },
     },
   });
 
+  const [debounced, cancel] = useDebouncedValue(form.values.name, 250);
+  useEffect(() => {
+    if (
+      form.values.name !== debounced ||
+      form.values.icon !== DEFAULT_ICON ||
+      form.values.type !== 'Other'
+    ) {
+      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>
+      <Center mb="lg">
-        <Image height={120} width={120} src={form.values.icon} alt="Placeholder" withPlaceholder />
+        <Image
+          height={120}
+          width={120}
+          fit="contain"
+          src={form.values.icon}
+          alt="Placeholder"
+          withPlaceholder
+        />
       </Center>
       <form
         onSubmit={form.onSubmit(() => {
+          const newForm = { ...form.values };
+          if (newForm.newTab === true) newForm.newTab = undefined;
+          if (newForm.category === null) newForm.category = undefined;
+          if (newForm.status.length === 1 && newForm.status[0] === '200') {
+            delete newForm.status;
+          }
           // If service already exists, update it.
-          if (config.services && config.services.find((s) => s.name === form.values.name)) {
+          if (config.services && config.services.find((s) => s.id === newForm.id)) {
             setConfig({
               ...config,
+              // replace the found item by matching ID
               services: config.services.map((s) => {
-                if (s.name === form.values.name) {
+                if (s.id === newForm.id) {
                   return {
-                    ...form.values,
+                    ...newForm,
                   };
                 }
                 return s;
@@ -173,65 +193,182 @@ export function AddAppShelfItemForm(props: { setOpened: (b: boolean) => void } &
           } else {
             setConfig({
               ...config,
-              services: [...config.services, form.values],
+              services: [...config.services, newForm],
             });
           }
           setOpened(false);
           form.reset();
         })}
       >
-        <Group direction="column" grow>
+        <Tabs defaultValue="Options">
-          <TextInput
+          <Tabs.List grow>
-            required
+            <Tabs.Tab value="Options">Options</Tabs.Tab>
-            label="Service name"
+            <Tabs.Tab value="Advanced Options">Advanced options</Tabs.Tab>
-            placeholder="Plex"
+          </Tabs.List>
-            value={form.values.name}
+          <Tabs.Panel value="Options">
-            onChange={(event) => {
+            <Stack>
-              form.setFieldValue('name', event.currentTarget.value);
+              <TextInput
-              const match = MatchIcon(event.currentTarget.value, form);
+                required
-              if (match) {
+                label="Service name"
-                form.setFieldValue('icon', match);
+                placeholder="Plex"
-              }
+                {...form.getInputProps('name')}
-            }}
+              />
-            error={form.errors.name && 'Invalid icon url'}
+              <TextInput
-          />
+                required
-
+                label="Icon URL"
-          <TextInput
+                placeholder={DEFAULT_ICON}
-            required
+                {...form.getInputProps('icon')}
-            label="Icon url"
+              />
-            placeholder="https://i.gifer.com/ANPC.gif"
+              <TextInput
-            {...form.getInputProps('icon')}
+                required
-          />
+                label="Service URL"
-          <TextInput
+                placeholder="http://localhost:7575"
-            required
+                {...form.getInputProps('url')}
-            label="Service url"
+              />
-            placeholder="http://localhost:8989"
+              <TextInput
-            {...form.getInputProps('url')}
+                label="On Click URL"
-          />
+                placeholder="http://sonarr.example.com"
-          <Select
+                {...form.getInputProps('openedUrl')}
-            label="Select the type of service (used for API calls)"
+              />
-            defaultValue="Other"
+              <Select
-            placeholder="Pick one"
+                label="Service type"
-            required
+                defaultValue="Other"
-            searchable
+                placeholder="Pick one"
-            data={ServiceTypeList}
+                required
-            {...form.getInputProps('type')}
+                searchable
-          />
+                data={ServiceTypeList}
-          <LoadingOverlay visible={isLoading} />
+                {...form.getInputProps('type')}
-          {(form.values.type === 'Sonarr' || form.values.type === 'Radarr') && (
+              />
-            <TextInput
+              <Select
-              required
+                label="Category"
-              label="API key"
+                data={categories}
-              placeholder="Your API key"
+                placeholder="Select a category or create a new one"
-              value={form.values.apiKey}
+                nothingFound="Nothing found"
-              onChange={(event) => {
+                searchable
-                form.setFieldValue('apiKey', event.currentTarget.value);
+                clearable
-              }}
+                creatable
-              error={form.errors.apiKey && 'Invalid API key'}
+                onCreate={(query) => {
-            />
+                  const item = { value: query, label: query };
-          )}
+                  setCategories([...InitialCategories, query]);
-        </Group>
+                  return item;
-
+                }}
+                getCreateLabel={(query) => `+ Create "${query}"`}
+                {...form.getInputProps('category')}
+              />
+              <LoadingOverlay visible={isLoading} />
+              {(form.values.type === 'Sonarr' ||
+                form.values.type === 'Radarr' ||
+                form.values.type === 'Lidarr' ||
+                form.values.type === 'Overseerr' ||
+                form.values.type === 'Jellyseerr' ||
+                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'}
+                  />
+                  <PasswordInput
+                    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' && (
+                <>
+                  <PasswordInput
+                    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'}
+                  />
+                  <PasswordInput
+                    label="Password"
+                    placeholder="adminadmin"
+                    value={form.values.password}
+                    onChange={(event) => {
+                      form.setFieldValue('password', event.currentTarget.value);
+                    }}
+                    error={form.errors.password && 'Invalid password'}
+                  />
+                </>
+              )}
+            </Stack>
+          </Tabs.Panel>
+          <Tabs.Panel value="Advanced Options">
+            <Stack>
+              <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')}
+              />
+            </Stack>
+          </Tabs.Panel>
+        </Tabs>
         <Group grow position="center" mt="xl">
           <Button type="submit">{props.message ?? 'Add service'}</Button>
         </Group>

src/components/AppShelf/AppShelf.story.tsx

@@ -1,26 +0,0 @@
-import { SimpleGrid } from '@mantine/core';
-import AppShelf, { AppShelfItem } from './AppShelf';
-
-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,104 +1,188 @@
 import React, { useState } from 'react';
-import { motion } from 'framer-motion';
+import { Accordion, Grid, Paper, Stack, useMantineColorScheme } from '@mantine/core';
-import { Text, AspectRatio, SimpleGrid, Card, Image, useMantineTheme } 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 { serviceItem } from '../../tools/types';
-import AppShelfMenu from './AppShelfMenu';
 
-const AppShelf = () => {
+import { SortableAppShelfItem, AppShelfItem } from './AppShelfItem';
-  const { config } = useConfig();
+import { ModuleMenu, ModuleWrapper } from '../../modules/moduleWrapper';
+import { DownloadsModule } from '../../modules';
+import DownloadComponent from '../../modules/downloads/DownloadsModule';
 
+const AppShelf = (props: any) => {
+  const { config, setConfig } = useConfig();
+  // 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 [toggledCategories, setToggledCategories] = useLocalStorage({
+    key: 'app-shelf-toggled',
+    // This is a bit of a hack to toggle the categories on the first load, return a string[] of the categories
+    defaultValue: categoryList,
+  });
+  const [activeId, setActiveId] = useState(null);
+  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: 500,
+        tolerance: 5,
+      },
+    })
+  );
+
+  function handleDragStart(event: any) {
+    const { active } = event;
+
+    setActiveId(active.id);
+  }
+
+  function handleDragEnd(event: any) {
+    const { active, over } = event;
+
+    if (active.id !== over.id) {
+      const newConfig = { ...config };
+      const activeIndex = newConfig.services.findIndex((e) => e.id === active.id);
+      const overIndex = newConfig.services.findIndex((e) => e.id === over.id);
+      newConfig.services = arrayMove(newConfig.services, activeIndex, overIndex);
+      setConfig(newConfig);
+    }
+
+    setActiveId(null);
+  }
+
+  const getItems = (filter?: string) => {
+    // If filter is not set, return all the services without a category or a null category
+    let filtered = config.services;
+    if (!filter) {
+      filtered = config.services.filter((e) => !e.category || e.category === null);
+    }
+    if (filter) {
+      filtered = config.services.filter((e) => e.category === filter);
+    }
+
+    return (
+      <DndContext
+        sensors={sensors}
+        collisionDetection={closestCenter}
+        onDragStart={handleDragStart}
+        onDragEnd={handleDragEnd}
+      >
+        <SortableContext items={config.services}>
+          <Grid gutter="xl" align="center">
+            {filtered.map((service) => (
+              <Grid.Col
+                key={service.id}
+                span={6}
+                xl={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 (
+      // TODO: Style accordion so that the bar is transparent to the user settings
+      <Stack>
+        <Accordion
+          variant="separated"
+          radius="lg"
+          order={2}
+          multiple
+          value={toggledCategories}
+          onChange={(state) => {
+            setToggledCategories([...state]);
+          }}
+        >
+          {categoryList.map((category, idx) => (
+            <Accordion.Item key={category} value={idx.toString()}>
+              <Accordion.Control>{category}</Accordion.Control>
+              <Accordion.Panel>{getItems(category)}</Accordion.Panel>
+            </Accordion.Item>
+          ))}
+          {/* Return the item for all services without category */}
+          {noCategory && noCategory.length > 0 ? (
+            <Accordion.Item key="Other" value="Other">
+              <Accordion.Control>Other</Accordion.Control>
+              <Accordion.Panel>{getItems()}</Accordion.Panel>
+            </Accordion.Item>
+          ) : null}
+          {downloadEnabled ? (
+            <Accordion.Item key="Downloads" value="Your downloads">
+              <Accordion.Control>Your downloads</Accordion.Control>
+              <Accordion.Panel>
+                <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.Panel>
+            </Accordion.Item>
+          ) : null}
+        </Accordion>
+      </Stack>
+    );
+  }
   return (
-    <SimpleGrid
+    <Stack>
-      cols={7}
+      {getItems()}
-      spacing="xl"
+      <ModuleWrapper mt="xl" module={DownloadsModule} />
-      breakpoints={[
+    </Stack>
-        { maxWidth: 2400, cols: 6, spacing: 'xl' },
-        { maxWidth: 1800, cols: 5, spacing: 'xl' },
-        { maxWidth: 1500, cols: 4, spacing: 'lg' },
-        { maxWidth: 800, cols: 3, spacing: 'md' },
-        { maxWidth: 400, cols: 3, spacing: 'sm' },
-        { maxWidth: 400, cols: 2, spacing: 'sm' },
-      ]}
-    >
-      {config.services.map((service) => (
-        <AppShelfItem key={service.name} service={service} />
-      ))}
-    </SimpleGrid>
   );
 };
 
-export function AppShelfItem(props: any) {
-  const { service }: { service: serviceItem } = props;
-  const [hovering, setHovering] = useState(false);
-  const theme = useMantineTheme();
-  return (
-    <motion.div
-      key={service.name}
-      onHoverStart={() => {
-        setHovering(true);
-      }}
-      onHoverEnd={() => {
-        setHovering(false);
-      }}
-    >
-      <Card
-        style={{
-          boxShadow: hovering ? '0px 0px 3px rgba(0, 0, 0, 0.5)' : '0px 0px 1px rgba(0, 0, 0, 0.5)',
-          backgroundColor:
-            theme.colorScheme === 'dark' ? theme.colors.dark[6] : theme.colors.gray[1],
-        }}
-        radius="md"
-      >
-        <Card.Section>
-          <Text mt="sm" align="center" lineClamp={1} weight={500}>
-            {service.name}
-          </Text>
-          <motion.div
-            style={{
-              position: 'absolute',
-              top: 5,
-              right: 5,
-              alignSelf: 'flex-end',
-            }}
-            animate={{
-              opacity: hovering ? 1 : 0,
-            }}
-          >
-            <AppShelfMenu service={service} />
-          </motion.div>
-        </Card.Section>
-        <Card.Section>
-          <AspectRatio
-            ratio={3 / 5}
-            m="xl"
-            style={{
-              width: 150,
-              height: 90,
-            }}
-          >
-            <motion.i
-              whileHover={{
-                cursor: 'pointer',
-                scale: 1.1,
-              }}
-            >
-              <Image
-                style={{
-                  maxWidth: 80,
-                }}
-                fit="contain"
-                onClick={() => {
-                  window.open(service.url);
-                }}
-                src={service.icon}
-              />
-            </motion.i>
-          </AspectRatio>
-        </Card.Section>
-      </Card>
-    </motion.div>
-  );
-}
-
 export default AppShelf;

src/components/AppShelf/AppShelfItem.tsx

@@ -0,0 +1,145 @@
+import {
+  Text,
+  Card,
+  Anchor,
+  AspectRatio,
+  Center,
+  createStyles,
+  useMantineColorScheme,
+} from '@mantine/core';
+import { motion } from 'framer-motion';
+import { useState } from 'react';
+import { useSortable } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+import Image from 'next/image';
+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: {
+    transition: 'box-shadow 150ms ease, transform 100ms ease',
+
+    '&:hover': {
+      boxShadow: `${theme.shadows.md} !important`,
+      transform: 'scale(1.05)',
+    },
+    [theme.fn.smallerThan('sm')]: {
+      WebkitUserSelect: 'none',
+    },
+  },
+}));
+
+export function SortableAppShelfItem(props: any) {
+  const { attributes, listeners, setNodeRef, transform, transition } = useSortable({
+    id: props.id,
+  });
+
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+  };
+
+  return (
+    <div ref={setNodeRef} style={style} {...attributes} {...listeners}>
+      <AppShelfItem service={props.service} />
+    </div>
+  );
+}
+
+export function AppShelfItem(props: any) {
+  const { service }: { service: serviceItem } = props;
+  const [hovering, setHovering] = useState(false);
+  const { config } = useConfig();
+  const { colorScheme } = useMantineColorScheme();
+  const { classes } = useStyles();
+  return (
+    <motion.div
+      animate={{
+        scale: [0.9, 1.06, 1],
+        rotate: [0, 5, 0],
+      }}
+      transition={{ duration: 0.6, type: 'spring', damping: 10, mass: 0.75, stiffness: 100 }}
+      key={service.name}
+      onHoverStart={() => {
+        setHovering(true);
+      }}
+      onHoverEnd={() => {
+        setHovering(false);
+      }}
+    >
+      <Card
+        withBorder
+        radius="lg"
+        shadow="md"
+        className={classes.item}
+        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={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}>
+              {service.name}
+            </Text>
+          </Anchor>
+          <motion.div
+            style={{
+              position: 'absolute',
+              top: 15,
+              right: 15,
+              alignSelf: 'flex-end',
+            }}
+            animate={{
+              opacity: hovering ? 1 : 0,
+            }}
+          >
+            <AppShelfMenu service={service} />
+          </motion.div>
+        </Card.Section>
+        <Center>
+          <Card.Section>
+            <AspectRatio
+              ratio={3 / 5}
+              m="xl"
+              style={{
+                width: 150,
+                height: 90,
+              }}
+            >
+              <motion.i
+                whileHover={{
+                  scale: 1.1,
+                }}
+              >
+                <Anchor
+                  href={service.openedUrl ?? service.url}
+                  target={service.newTab === false ? '_top' : '_blank'}
+                >
+                  <Image
+                    style={{
+                      cursor: 'pointer',
+                    }}
+                    width={80}
+                    height={80}
+                    src={service.icon}
+                    objectFit="contain"
+                  />
+                </Anchor>
+              </motion.i>
+            </AspectRatio>
+            <PingComponent url={service.url} status={service.status} />
+          </Card.Section>
+        </Center>
+      </Card>
+    </motion.div>
+  );
+}

src/components/AppShelf/AppShelfItemWrapper.tsx

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

src/components/AppShelf/AppShelfMenu.tsx

@@ -1,67 +1,78 @@
-import { Menu, Modal, Text } from '@mantine/core';
+import { ActionIcon, 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, IconMenu, IconTrash as Trash } from '@tabler/icons';
 import { useConfig } from '../../tools/state';
+import { serviceItem } from '../../tools/types';
 import { AddAppShelfItemForm } from './AddAppShelfItem';
+import { useColorTheme } from '../../tools/color';
 
 export default function AppShelfMenu(props: any) {
-  const { service } = props;
+  const { service }: { service: serviceItem } = props;
   const { config, setConfig } = useConfig();
+  const { secondaryColor } = useColorTheme();
+  const theme = useMantineTheme();
   const [opened, setOpened] = useState(false);
   return (
     <>
       <Modal
         size="xl"
-        radius="lg"
+        radius="md"
         opened={props.opened || opened}
         onClose={() => setOpened(false)}
         title="Modify a service"
       >
-        <AddAppShelfItemForm
+        <AddAppShelfItemForm setOpened={setOpened} {...service} message="Save service" />
-          setOpened={setOpened}
-          name={service.name}
-          type={service.type}
-          url={service.url}
-          icon={service.icon}
-          apiKey={service.apiKey}
-          message="Save service"
-        />
       </Modal>
-      <Menu position="right">
+      <Menu
-        <Menu.Label>Settings</Menu.Label>
+        withinPortal
-        <Menu.Item
+        width={150}
-          color="primary"
+        shadow="xl"
-          icon={<Edit size={14} />}
+        withArrow
-          // TODO: #2 Add the ability to edit the service.
+        radius="md"
-          onClick={() => setOpened(true)}
+        position="right"
-        >
+        styles={{
-          Edit
+          dropdown: {
-        </Menu.Item>
+            // Add shadow and elevation to the body
-        <Menu.Label>Danger zone</Menu.Label>
+            boxShadow: '0 0 14px 14px rgba(0, 0, 0, 0.05)',
-        <Menu.Item
+          },
-          color="red"
+        }}
-          onClick={(e: any) => {
+      >
-            setConfig({
+        <Menu.Target>
-              ...config,
+          <ActionIcon style={{}}>
-              services: config.services.filter((s) => s.name !== service.name),
+            <IconMenu />
-            });
+          </ActionIcon>
-            showNotification({
+        </Menu.Target>
-              autoClose: 5000,
+        <Menu.Dropdown>
-              title: (
+          <Menu.Label>Settings</Menu.Label>
-                <Text>
+          <Menu.Item color={secondaryColor} icon={<Edit />} onClick={() => setOpened(true)}>
-                  Service <b>{service.name}</b> removed successfully
+            Edit
-                </Text>
+          </Menu.Item>
-              ),
+          <Menu.Label>Danger zone</Menu.Label>
-              color: 'green',
+          <Menu.Item
-              icon: <Check />,
+            color="red"
-              message: undefined,
+            onClick={(e: any) => {
-            });
+              setConfig({
-          }}
+                ...config,
-          icon={<Trash size={14} />}
+                services: config.services.filter((s) => s.id !== service.id),
-        >
+              });
-          Delete
+              showNotification({
-        </Menu.Item>
+                autoClose: 5000,
+                title: (
+                  <Text>
+                    Service <b>{service.name}</b> removed successfully!
+                  </Text>
+                ),
+                color: 'green',
+                icon: <Check />,
+                message: undefined,
+              });
+            }}
+            icon={<Trash />}
+          >
+            Delete
+          </Menu.Item>
+        </Menu.Dropdown>
       </Menu>
     </>
   );

src/components/AppShelf/index.ts

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

src/components/ColorSchemeToggle/ColorSchemeSwitch.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
-import { createStyles, Switch, Group, useMantineColorScheme } from '@mantine/core';
+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();
 
@@ -40,6 +42,9 @@ export function ColorSchemeSwitch() {
         <Switch checked={colorScheme === 'dark'} onChange={() => toggleColorScheme()} size="md" />
       </div>
       Switch to {colorScheme === 'dark' ? 'light' : 'dark'} mode
+      <Group spacing={2}>
+        <Kbd>Ctrl</Kbd>+<Kbd>J</Kbd>
+      </Group>
     </Group>
   );
 }

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,32 +1,37 @@
 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';
 
 export default function ConfigChanger() {
   const { config, loadConfig, setConfig, getConfigs } = useConfig();
-  const [configList, setConfigList] = useState([] as string[]);
+  const [configList, setConfigList] = useState<string[]>([]);
+  const [value, setValue] = useState(config.name);
   useEffect(() => {
     getConfigs().then((configs) => setConfigList(configs));
-    // setConfig(initialConfig);
   }, [config]);
   // If configlist is empty, return a loading indicator
   if (configList.length === 0) {
     return (
-      <Center>
+      <Tooltip label={"Loading your configs. This doesn't load in vercel."}>
-        <Tooltip label={"Loading your configs. This doesn't load in vercel."}>
+        <Center>
           <Loader />
-        </Tooltip>
+        </Center>
-      </Center>
+      </Tooltip>
     );
   }
+  // return <Select data={[{ value: '1', label: '1' },]} onChange={(e) => console.log(e)} value="1" />;
   return (
     <Select
-      defaultValue={config.name}
       label="Config loader"
+      value={value}
+      defaultValue={config.name}
       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,61 +1,18 @@
-import { Group, Text, useMantineTheme, MantineTheme } from '@mantine/core';
+import { Group, Text, useMantineTheme } from '@mantine/core';
-import { Upload, Photo, X, Icon as TablerIcon, Check } from 'tabler-icons-react';
+import { IconX as X, IconCheck as Check, IconX, IconPhoto, IconUpload } from '@tabler/icons';
-import { DropzoneStatus, FullScreenDropzone } from '@mantine/dropzone';
 import { showNotification } from '@mantine/notifications';
-import { useRef } from 'react';
+import { setCookie } from 'cookies-next';
-import { useRouter } from 'next/router';
+import { Dropzone } from '@mantine/dropzone';
-import { setCookies } from 'cookies-next';
 import { useConfig } from '../../tools/state';
 import { Config } from '../../tools/types';
-
+import { migrateToIdConfig } from '../../tools/migrate';
-function getIconColor(status: DropzoneStatus, theme: MantineTheme) {
-  return status.accepted
-    ? theme.colors[theme.primaryColor][theme.colorScheme === 'dark' ? 4 : 6]
-    : status.rejected
-    ? theme.colors.red[theme.colorScheme === 'dark' ? 4 : 6]
-    : theme.colorScheme === 'dark'
-    ? theme.colors.dark[0]
-    : theme.colors.gray[7];
-}
-
-function ImageUploadIcon({
-  status,
-  ...props
-}: React.ComponentProps<TablerIcon> & { status: DropzoneStatus }) {
-  if (status.accepted) {
-    return <Upload {...props} />;
-  }
-
-  if (status.rejected) {
-    return <X {...props} />;
-  }
-
-  return <Photo {...props} />;
-}
-
-export const dropzoneChildren = (status: DropzoneStatus, theme: MantineTheme) => (
-  <Group position="center" spacing="xl" style={{ minHeight: 220, pointerEvents: 'none' }}>
-    <ImageUploadIcon status={status} style={{ color: getIconColor(status, theme) }} size={80} />
-
-    <div>
-      <Text size="xl" inline>
-        Drag images here or click to select files
-      </Text>
-      <Text size="sm" color="dimmed" inline mt={7}>
-        Attach as many files as you like, each file should not exceed 5mb
-      </Text>
-    </div>
-  </Group>
-);
 
 export default function LoadConfigComponent(props: any) {
   const { setConfig } = useConfig();
   const theme = useMantineTheme();
-  const router = useRouter();
-  const openRef = useRef<() => void>();
 
   return (
-    <FullScreenDropzone
+    <Dropzone.FullScreen
       onDrop={(files) => {
         files[0].text().then((e) => {
           try {
@@ -83,13 +40,41 @@ 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, {
-          setConfig(newConfig);
+            maxAge: 60 * 60 * 24 * 30,
+            sameSite: 'strict',
+          });
+          const migratedConfig = migrateToIdConfig(newConfig);
+          setConfig(migratedConfig);
         });
       }}
       accept={['application/json']}
     >
-      {(status) => dropzoneChildren(status, theme)}
+      <Group position="center" spacing="xl" style={{ minHeight: 220, pointerEvents: 'none' }}>
-    </FullScreenDropzone>
+        <Dropzone.Accept>
+          <Text size="xl" inline>
+            <IconUpload
+              size={50}
+              stroke={1.5}
+              color={theme.colors[theme.primaryColor][theme.colorScheme === 'dark' ? 4 : 6]}
+            />
+            Drag files here to upload a config. Support for JSON only.
+          </Text>
+        </Dropzone.Accept>
+        <Dropzone.Reject>
+          <Text size="xl" inline>
+            <IconX
+              size={50}
+              stroke={1.5}
+              color={theme.colors.red[theme.colorScheme === 'dark' ? 4 : 6]}
+            />
+            This file format is not supported. Please only upload JSON.
+          </Text>
+        </Dropzone.Reject>
+        <Dropzone.Idle>
+          <IconPhoto size={50} stroke={1.5} />
+        </Dropzone.Idle>
+      </Group>
+    </Dropzone.FullScreen>
   );
 }

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}>
+    <Group spacing="xs">
-      Download your config
+      <Modal
-    </Button>
+        radius="md"
+        opened={opened}
+        onClose={() => setOpened(false)}
+        title="Choose the name of your new config"
+      >
+        <form
+          onSubmit={form.onSubmit((values) => {
+            setConfig({ ...config, name: values.configName });
+            setOpened(false);
+            showNotification({
+              title: 'Config saved',
+              icon: <Check />,
+              color: 'green',
+              autoClose: 1500,
+              radius: 'md',
+              message: `Config saved as ${values.configName}`,
+            });
+          })}
+        >
+          <TextInput
+            required
+            label="Config name"
+            placeholder="Your new config name"
+            {...form.getInputProps('configName')}
+          />
+          <Group position="right" mt="md">
+            <Button type="submit">Confirm</Button>
+          </Group>
+        </form>
+      </Modal>
+      <Button 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/SearchBar/SearchBar.story.tsx

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

src/components/SearchBar/SearchBar.tsx

@@ -1,90 +0,0 @@
-import { TextInput, Text, Popover, Box } from '@mantine/core';
-import { useForm } from '@mantine/hooks';
-import { useState } from 'react';
-import { Search, BrandYoutube, Download } from 'tabler-icons-react';
-import { useConfig } from '../../tools/state';
-
-export default function SearchBar(props: any) {
-  const { config, setConfig } = useConfig();
-  const [opened, setOpened] = useState(false);
-  const [icon, setIcon] = useState(<Search />);
-  const querryUrl = config.settings.searchUrl || 'https://www.google.com/search?q=';
-
-  const form = useForm({
-    initialValues: {
-      querry: '',
-    },
-  });
-
-  if (config.settings.searchBar === false) {
-    return null;
-  }
-
-  return (
-    <Box
-      mb={"xl"}
-      style={{
-        width: '100%',
-      }}
-    >
-      <form
-        onChange={() => {
-          // If querry contains !yt or !t add "Searching on YouTube" or "Searching torrent"
-          const querry = form.values.querry.trim();
-          const isYoutube = querry.startsWith('!yt');
-          const isTorrent = querry.startsWith('!t');
-          if (isYoutube) {
-            setIcon(<BrandYoutube size={22} />);
-          } else if (isTorrent) {
-            setIcon(<Download size={22} />);
-          } else {
-            setIcon(<Search size={22} />);
-          }
-        }}
-        onSubmit={form.onSubmit((values) => {
-          // Find if querry is prefixed by !yt or !t
-          const querry = values.querry.trim();
-          const isYoutube = querry.startsWith('!yt');
-          const isTorrent = querry.startsWith('!t');
-          if (isYoutube) {
-            window.open(`https://www.youtube.com/results?search_query=${querry.substring(3)}`);
-          } else if (isTorrent) {
-            window.open(`https://bitsearch.to/search?q=${querry.substring(3)}`);
-          } else {
-            window.open(`${querryUrl}${values.querry}`);
-          }
-        })}
-      >
-        <Popover
-          opened={opened}
-          style={{
-            width: '100%',
-          }}
-          position="bottom"
-          placement="start"
-          withArrow
-          trapFocus={false}
-          transition="pop-top-left"
-          onFocusCapture={() => setOpened(true)}
-          onBlurCapture={() => setOpened(false)}
-          target={
-            <TextInput
-              variant="filled"
-              color="blue"
-              icon={icon}
-              radius="md"
-              size="md"
-              placeholder="Search the web"
-              {...props}
-              {...form.getInputProps('querry')}
-            />
-          }
-        >
-          <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>
-      </form>
-    </Box>
-  );
-}

src/components/Settings/AdvancedSettings.tsx

@@ -0,0 +1,65 @@
+import { TextInput, Button, Stack } 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 (
+    <Stack mb="md" mr="sm" mt="xs">
+      <form onSubmit={form.onSubmit((values) => saveChanges(values))}>
+        <Stack>
+          <TextInput label="Page title" placeholder="Homarr 🦞" {...form.getInputProps('title')} />
+          <TextInput label="Logo" placeholder="/img/logo.png" {...form.getInputProps('logo')} />
+          <TextInput
+            label="Favicon"
+            placeholder="/favicon.png"
+            {...form.getInputProps('favicon')}
+          />
+          <TextInput
+            label="Background"
+            placeholder="/img/background.png"
+            {...form.getInputProps('background')}
+          />
+          <Button type="submit">Save</Button>
+        </Stack>
+      </form>
+      <ColorSelector type="primary" />
+      <ColorSelector type="secondary" />
+      <ShadeSelector />
+      <OpacitySelector />
+      <AppCardWidthSelector />
+    </Stack>
+  );
+}

src/components/Settings/AppCardWidthSelector.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { Text, Slider, Stack } 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 (
+    <Stack spacing="xs">
+      <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)}
+      />
+    </Stack>
+  );
+}

src/components/Settings/ColorSelector.tsx

@@ -0,0 +1,88 @@
+import React, { useState } from 'react';
+import { ColorSwatch, Grid, 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 }) => (
+    <Grid.Col span={2} key={color}>
+      <ColorSwatch
+        component="button"
+        type="button"
+        onClick={() => setConfigColor(color)}
+        color={swatch}
+        size={22}
+        style={{ cursor: 'pointer' }}
+      />
+    </Grid.Col>
+  ));
+
+  return (
+    <Group>
+      <Popover
+        width={250}
+        withinPortal
+        opened={opened}
+        onClose={() => setOpened(false)}
+        position="left"
+        withArrow
+      >
+        <Popover.Target>
+          <ColorSwatch
+            component="button"
+            type="button"
+            color={theme.colors[configColor][6]}
+            onClick={() => setOpened((o) => !o)}
+            size={22}
+            style={{ cursor: 'pointer' }}
+          />
+        </Popover.Target>
+        <Popover.Dropdown>
+          <Grid gutter="lg" columns={14}>
+            {swatches}
+          </Grid>
+        </Popover.Dropdown>
+      </Popover>
+      <Text>{type[0].toUpperCase() + type.slice(1)} color</Text>
+    </Group>
+  );
+}

src/components/Settings/CommonSettings.tsx

@@ -0,0 +1,86 @@
+import { Text, SegmentedControl, TextInput, Stack } 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 (
+    <Stack mb="md" mr="sm">
+      <Stack spacing={0} mt="xs">
+        <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,
+                  },
+                });
+              }}
+            />
+          </>
+        )}
+      </Stack>
+      <ColorSchemeSwitch />
+      <WidgetsPositionSwitch />
+      <ModuleEnabler />
+      <ConfigChanger />
+      <SaveConfigComponent />
+      <Tip>Upload your config file by dragging and dropping it onto the page!</Tip>
+    </Stack>
+  );
+}

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" mt="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,41 +1,35 @@
-import { Group, Switch } from '@mantine/core';
+import { Checkbox, SimpleGrid, Stack, Title } from '@mantine/core';
-import * as Modules from '../modules';
+import * as Modules from '../../modules';
 import { useConfig } from '../../tools/state';
 
 export default function ModuleEnabler(props: any) {
   const { config, setConfig } = useConfig();
   const modules = Object.values(Modules).map((module) => module);
-  const enabledModules = config.settings.enabledModules ?? [];
-  modules.filter((module) => enabledModules.includes(module.title));
   return (
-    <Group direction="column">
+    <Stack>
-      {modules.map((module) => (
+      <Title order={4}>Module enabler</Title>
-        <Switch
+      <SimpleGrid cols={3} spacing="xs">
-          key={module.title}
+        {modules.map((module) => (
-          size="md"
+          <Checkbox
-          checked={enabledModules.includes(module.title)}
+            key={module.title}
-          label={`Enable ${module.title} module`}
+            size="md"
-          onChange={(e) => {
+            checked={config.modules?.[module.title]?.enabled ?? false}
-            if (e.currentTarget.checked) {
+            label={`${module.title}`}
+            onChange={(e) => {
               setConfig({
                 ...config,
-                settings: {
+                modules: {
-                  ...config.settings,
+                  ...config.modules,
-                  enabledModules: [...enabledModules, module.title],
+                  [module.title]: {
+                    ...config.modules?.[module.title],
+                    enabled: e.currentTarget.checked,
+                  },
                 },
               });
-            } else {
+            }}
-              setConfig({
+          />
-                ...config,
+        ))}
-                settings: {
+      </SimpleGrid>
-                  ...config.settings,
+    </Stack>
-                  enabledModules: enabledModules.filter((m) => m !== module.title),
-                },
-              });
-            }
-          }}
-        />
-      ))}
-    </Group>
   );
 }

src/components/Settings/OpacitySelector.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import { Text, Slider, Stack } 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 (
+    <Stack spacing="xs">
+      <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)}
+      />
+    </Stack>
+  );
+}

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,173 +1,61 @@
-import {
+import { ActionIcon, Title, Tooltip, Drawer, Tabs, ScrollArea } from '@mantine/core';
-  ActionIcon,
+import { useHotkeys } from '@mantine/hooks';
-  Group,
+import { useState } from 'react';
-  Modal,
+import { IconSettings } from '@tabler/icons';
-  Switch,
+import AdvancedSettings from './AdvancedSettings';
-  Title,
+import CommonSettings from './CommonSettings';
-  Text,
+import Credits from './Credits';
-  Tooltip,
-  SegmentedControl,
-  Indicator,
-  Alert,
-  TextInput,
-} from '@mantine/core';
-import { useColorScheme } from '@mantine/hooks';
-import { useEffect, useState } from 'react';
-import { AlertCircle, Settings as SettingsIcon } from 'tabler-icons-react';
-import { CURRENT_VERSION, REPO_URL } from '../../../data/constants';
-import { useConfig } from '../../tools/state';
-import { ColorSchemeSwitch } from '../ColorSchemeToggle/ColorSchemeSwitch';
-import ConfigChanger from '../Config/ConfigChanger';
-import SaveConfigComponent from '../Config/SaveConfig';
-import ModuleEnabler from './ModuleEnabler';
 
 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>
+    <Tabs defaultValue="Common">
-      <Alert
+      <Tabs.List grow>
-        icon={<AlertCircle size={16} />}
+        <Tabs.Tab value="Common">Common</Tabs.Tab>
-        title="Update available"
+        <Tabs.Tab value="Customizations">Customizations</Tabs.Tab>
-        radius="lg"
+      </Tabs.List>
-        hidden={current === latest}
+      <Tabs.Panel data-autofocus value="Common">
-      >
+        <ScrollArea style={{ height: '78vh' }} offsetScrollbars>
-        Version {latest} is available. Current: {current}
+          <CommonSettings />
-      </Alert>
+        </ScrollArea>
-      <Group grow direction="column" spacing={0}>
+      </Tabs.Panel>
-        <Text>Search engine</Text>
+      <Tabs.Panel value="Customizations">
-        <SegmentedControl
+        <ScrollArea style={{ height: '78vh' }} offsetScrollbars>
-          fullWidth
+          <AdvancedSettings />
-          title="Search engine"
+        </ScrollArea>
-          value={
+      </Tabs.Panel>
-            // Match config.settings.searchUrl with a key in the matches array
+    </Tabs>
-            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="Querry URL"
-            placeholder="Custom querry url"
-            value={customSearchUrl}
-            onChange={(event) => {
-              setCustomSearchUrl(event.currentTarget.value);
-              setConfig({
-                ...config,
-                settings: {
-                  ...config.settings,
-                  searchUrl: event.currentTarget.value,
-                },
-              });
-            }}
-          />
-        )}
-      </Group>
-      <Group direction="column">
-        <Switch
-          size="md"
-          onChange={(e) =>
-            setConfig({
-              ...config,
-              settings: {
-                ...config.settings,
-                searchBar: e.currentTarget.checked,
-              },
-            })
-          }
-          checked={config.settings.searchBar}
-          label="Enable search bar"
-        />
-      </Group>
-      <ModuleEnabler />
-      <ColorSchemeSwitch />
-      <ConfigChanger />
-      <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>
   );
 }
 
 export function SettingsMenuButton(props: any) {
-  const [update, setUpdate] = useState(false);
+  useHotkeys([['ctrl+L', () => setOpened(!opened)]]);
+
   const [opened, setOpened] = useState(false);
-  const [latestVersion, setLatestVersion] = useState(CURRENT_VERSION);
-  useEffect(() => {
-    // Fetch Data here when component first mounted
-    fetch(`https://api.github.com/repos/${REPO_URL}/releases/latest`).then((res) => {
-      res.json().then((data) => {
-        setLatestVersion(data.tag_name);
-        if (data.tag_name !== CURRENT_VERSION) {
-          setUpdate(true);
-        }
-      });
-    });
-  }, []);
   return (
     <>
-      <Modal
+      <Drawer
-        size="md"
+        size="xl"
-        title={<Title order={3}>Settings</Title>}
+        padding="lg"
+        position="right"
+        title={<Title order={5}>Settings</Title>}
         opened={props.opened || opened}
         onClose={() => setOpened(false)}
       >
-        <SettingsMenu current={CURRENT_VERSION} latest={latestVersion} />
+        <SettingsMenu />
-      </Modal>
+        <Credits />
-      <ActionIcon
+      </Drawer>
-        variant="default"
+      <Tooltip label="Settings">
-        radius="md"
+        <ActionIcon
-        size="xl"
+          variant="default"
-        color="blue"
+          radius="md"
-        style={props.style}
+          size="xl"
-        onClick={() => setOpened(true)}
+          color="blue"
-      >
+          style={props.style}
-        <Tooltip label="Settings">
+          onClick={() => setOpened(true)}
-          <Indicator
+        >
-            size={12}
+          <IconSettings />
-            disabled={CURRENT_VERSION === latestVersion}
+        </ActionIcon>
-            offset={-3}
+      </Tooltip>
-            position="top-end"
-          >
-            <SettingsIcon />
-          </Indicator>
-        </Tooltip>
-      </ActionIcon>
     </>
   );
 }

src/components/Settings/ShadeSelector.tsx

@@ -0,0 +1,100 @@
+import React, { useState } from 'react';
+import {
+  ColorSwatch,
+  Group,
+  Popover,
+  Text,
+  useMantineTheme,
+  MantineTheme,
+  Stack,
+  Grid,
+} 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 }) => (
+    <Grid.Col span={1} key={Number(shade)}>
+      <ColorSwatch
+        component="button"
+        type="button"
+        onClick={() => setConfigShade(shade)}
+        color={swatch}
+        size={22}
+        style={{ cursor: 'pointer' }}
+      />
+    </Grid.Col>
+  ));
+
+  const secondarySwatches = secondaryShades.map(({ swatch, shade }) => (
+    <Grid.Col span={1} key={Number(shade)}>
+      <ColorSwatch
+        component="button"
+        type="button"
+        onClick={() => setConfigShade(shade)}
+        color={swatch}
+        size={22}
+        style={{ cursor: 'pointer' }}
+      />
+    </Grid.Col>
+  ));
+
+  return (
+    <Group>
+      <Popover
+        width={350}
+        withinPortal
+        opened={opened}
+        onClose={() => setOpened(false)}
+        position="left"
+        withArrow
+      >
+        <Popover.Target>
+          <ColorSwatch
+            component="button"
+            type="button"
+            color={theme.colors[primaryColor][Number(primaryShade)]}
+            onClick={() => setOpened((o) => !o)}
+            size={22}
+            style={{ display: 'block', cursor: 'pointer' }}
+          />
+        </Popover.Target>
+        <Popover.Dropdown>
+          <Stack spacing="xs">
+            <Grid gutter="lg" columns={10}>
+              {primarySwatches}
+              {secondarySwatches}
+            </Grid>
+          </Stack>
+        </Popover.Dropdown>
+      </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,22 +1,36 @@
-import { Aside as MantineAside, Group } from '@mantine/core';
+import { Aside as MantineAside, createStyles } from '@mantine/core';
-import { CalendarModule } from '../modules/calendar/CalendarModule';
+import Widgets from './Widgets';
-import ModuleWrapper from '../modules/moduleWrapper';
 
-export default function Aside() {
+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" direction="column">
+      <Widgets />
-        <ModuleWrapper module={CalendarModule} />
-      </Group>
     </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,13 +1,8 @@
-import React from 'react';
+import React, { useEffect } from 'react';
-import {
+import { createStyles, Footer as FooterComponent } from '@mantine/core';
-  createStyles,
+import { showNotification } from '@mantine/notifications';
-  Anchor,
+import { IconAlertCircle as AlertCircle } from '@tabler/icons';
-  Text,
+import { CURRENT_VERSION, REPO_URL } from '../../../data/constants';
-  Group,
-  ActionIcon,
-  Footer as FooterComponent,
-} from '@mantine/core';
-import { BrandGithub } from 'tabler-icons-react';
 
 const useStyles = createStyles((theme) => ({
   footer: {
@@ -40,54 +35,40 @@ interface FooterCenteredProps {
 }
 
 export function Footer({ links }: FooterCenteredProps) {
-  const { classes } = useStyles();
+  useEffect(() => {
-  const items = links.map((link) => (
+    // Fetch Data here when component first mounted
-    <Anchor<'a'>
+    fetch(`https://api.github.com/repos/${REPO_URL}/releases/latest`).then((res) => {
-      color="dimmed"
+      res.json().then((data) => {
-      key={link.label}
+        if (data.tag_name > CURRENT_VERSION) {
-      href={link.link}
+          showNotification({
-      sx={{ lineHeight: 1 }}
+            color: 'yellow',
-      onClick={(event) => event.preventDefault()}
+            autoClose: false,
-      size="sm"
+            title: 'New version available',
-    >
+            icon: <AlertCircle />,
-      {link.label}
+            message: `Version ${data.tag_name} is available, update now!`,
-    </Anchor>
+          });
-  ));
+        } else if (data.tag_name < CURRENT_VERSION) {
+          showNotification({
+            color: 'orange',
+            autoClose: 5000,
+            title: 'You are using a development version',
+            icon: <AlertCircle />,
+            message: 'This version of Homarr is still in development! Bugs are expected 🐛',
+          });
+        }
+      });
+    });
+  }, []);
 
   return (
-    <FooterComponent height="auto" style={{ border: 'none' }}>
+    <FooterComponent
-      <Group
+      height="auto"
-        sx={{
+      style={{
-          position: 'fixed',
+        background: 'none',
-          bottom: 0,
+        border: 'none',
-          right: 15,
+        clear: 'both',
-        }}
+      }}
-        direction="row"
+      children={undefined}
-        align="center"
+    />
-        mb={15}
-      >
-        <Group className={classes.links}>{items}</Group>
-        <Group spacing="xs" position="right" noWrap>
-          <ActionIcon<'a'> component="a" href="https://github.com/ajnart/homarr" size="lg">
-            <BrandGithub size={18} />
-          </ActionIcon>
-        </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>
-    </FooterComponent>
   );
 }

src/components/layout/Header.tsx

@@ -1,117 +1,42 @@
-import React from 'react';
+import { Box, createStyles, Group, Header as Head } from '@mantine/core';
-import { createStyles, Header as Head, Group, Drawer, Center } from '@mantine/core';
-import { useBooleanToggle } from '@mantine/hooks';
-import { NextLink } from '@mantine/next';
-import { Logo } from './Logo';
-import CalendarComponent from '../modules/calendar/CalendarModule';
-import { SettingsMenuButton } from '../Settings/SettingsMenu';
 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;
 
 const useStyles = createStyles((theme) => ({
-  root: {
+  hide: {
-    position: 'relative',
+    [theme.fn.smallerThan('xs')]: {
-    zIndex: 1,
-  },
-
-  dropdown: {
-    position: 'absolute',
-    top: HEADER_HEIGHT,
-    left: 0,
-    right: 0,
-    zIndex: 0,
-    borderTopRightRadius: 0,
-    borderTopLeftRadius: 0,
-    borderTopWidth: 0,
-    overflow: 'hidden',
-
-    [theme.fn.largerThan('md')]: {
       display: 'none',
     },
   },
-
-  header: {
-    display: 'flex',
-    height: '100%',
-  },
-
-  links: {
-    [theme.fn.smallerThan('md')]: {
-      display: 'none',
-    },
-  },
-
   burger: {
-    [theme.fn.largerThan('md')]: {
+    [theme.fn.largerThan('sm')]: {
       display: 'none',
     },
   },
-
-  link: {
-    display: 'block',
-    lineHeight: 1,
-    padding: '8px 12px',
-    borderRadius: theme.radius.sm,
-    textDecoration: 'none',
-    color: theme.colorScheme === 'dark' ? theme.colors.dark[0] : theme.colors.gray[7],
-    fontSize: theme.fontSizes.sm,
-    fontWeight: 500,
-
-    '&:hover': {
-      backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[6] : theme.colors.gray[0],
-    },
-
-    [theme.fn.smallerThan('sm')]: {
-      borderRadius: 0,
-      padding: theme.spacing.md,
-    },
-  },
-
-  linkActive: {
-    '&, &:hover': {
-      backgroundColor:
-        theme.colorScheme === 'dark'
-          ? theme.fn.rgba(theme.colors[theme.primaryColor][9], 0.25)
-          : theme.colors[theme.primaryColor][0],
-      color: theme.colors[theme.primaryColor][theme.colorScheme === 'dark' ? 3 : 7],
-    },
-  },
 }));
 
-interface HeaderResponsiveProps {
+export function Header(props: any) {
-  links: { link: string; label: string }[];
-}
-
-export function Header({ links }: HeaderResponsiveProps) {
-  const [opened, toggleOpened] = useBooleanToggle(false);
   const { classes, cx } = useStyles();
 
   return (
-    <Head height={HEADER_HEIGHT}>
+    <Head height="auto">
-      <Group direction="row" align="center" position="apart" className={classes.header} mx="xl">
+      <Group p="xs" position="apart">
-        <NextLink style={{ textDecoration: 'none' }} href="/">
+        <Box className={classes.hide}>
           <Logo style={{ fontSize: 22 }} />
-        </NextLink>
+        </Box>
-        <Group>
+        <Group noWrap>
+          <SearchBar />
+          <DockerMenuButton />
           <SettingsMenuButton />
           <AddItemShelfButton />
         </Group>
       </Group>
-
-      <Drawer
-        opened={opened}
-        overlayOpacity={0.55}
-        overlayBlur={3}
-        onClose={() => toggleOpened()}
-        position="right"
-      >
-        {opened ?? (
-          <Center>
-            <CalendarComponent />
-          </Center>
-        )}
-      </Drawer>
     </Head>
   );
 }

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

@@ -1,36 +1,39 @@
-import { AppShell, Center, createStyles } from '@mantine/core';
+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: {
+  main: {},
-    [theme.fn.largerThan('md')]: {
-      maxWidth: 1500,
-    },
-  },
 }));
 
 export default function Layout({ children, style }: any) {
   const { classes, cx } = useStyles();
+  const { config } = useConfig();
+  const widgetPosition = config?.settings?.widgetPosition === 'left';
+
   return (
     <AppShell
-      navbar={<Navbar />}
+      fixed={false}
-      aside={<Aside />}
+      header={<Header />}
-      header={<Header links={[]} />}
+      navbar={widgetPosition ? <Navbar /> : undefined}
+      aside={widgetPosition ? undefined : <Aside />}
       footer={<Footer links={[]} />}
     >
-      <Center>
+      <HeaderConfig />
-        <main
+      <Background />
-          className={cx(classes.main)}
+      <main
-          style={{
+        className={cx(classes.main)}
-            ...style,
+        style={{
-          }}
+          ...style,
-        >
+        }}
-          {children}
+      >
-        </main>
+        {children}
-      </Center>
+      </main>
     </AppShell>
   );
 }

src/components/layout/Logo.tsx

@@ -1,40 +1,44 @@
 import { Group, Image, Text } from '@mantine/core';
+import { NextLink } from '@mantine/next';
 import * as React from 'react';
-import { CURRENT_VERSION } from '../../../data/constants';
+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>
+    <Group spacing="xs">
       <Image
         width={50}
-        src="/imgs/logo.png"
+        src={config.settings.logo || '/imgs/logo.png'}
         style={{
           position: 'relative',
-          left: 15,
         }}
       />
-      <Text
+      {withoutText ? null : (
-        sx={style}
+        <NextLink
-        weight="bold"
+          href="/"
-        variant="gradient"
+          style={{
-        gradient={{ from: 'red', to: 'orange', deg: 145 }}
+            textDecoration: 'none',
-      >
+            position: 'relative',
-        Homarr
+          }}
-      </Text>
+        >
-      <Text
+          <Text
-        style={{
+            sx={style}
-          position: 'relative',
+            weight="bold"
-          left: -14,
+            variant="gradient"
-          bottom: -2,
+            gradient={{
-          color: 'gray',
+              from: primaryColor,
-          fontStyle: 'inherit',
+              to: secondaryColor,
-          fontSize: 'inherit',
+              deg: 145,
-          alignSelf: 'center',
+            }}
-          alignContent: 'center',
+          >
-        }}
+            {config.settings.title || 'Homarr'}
-      >
+          </Text>
-        {CURRENT_VERSION}
+        </NextLink>
-      </Text>
+      )}
     </Group>
   );
 }

src/components/layout/Navbar.tsx

@@ -1,22 +1,37 @@
-import { Group, Navbar as MantineNavbar } from '@mantine/core';
+import { createStyles, Navbar as MantineNavbar } from '@mantine/core';
-import { DateModule } from '../modules/date/DateModule';
+import Widgets from './Widgets';
-import ModuleWrapper from '../modules/moduleWrapper';
+
+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">
+      <Widgets />
-        <ModuleWrapper module={DateModule} />
-      </Group>
     </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 { Stack } from '@mantine/core';
+import { CalendarModule, DateModule, TotalDownloadsModule, WeatherModule } from '../../modules';
+import { DashdotModule } from '../../modules/dashdot';
+import { ModuleWrapper } from '../../modules/moduleWrapper';
+
+export default function Widgets(props: any) {
+  return (
+    <Stack my="sm" style={{ width: 300 }}>
+      <ModuleWrapper module={CalendarModule} />
+      <ModuleWrapper module={TotalDownloadsModule} />
+      <ModuleWrapper module={WeatherModule} />
+      <ModuleWrapper module={DateModule} />
+      <ModuleWrapper module={DashdotModule} />
+    </Stack>
+  );
+}

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,152 +0,0 @@
-/* eslint-disable react/no-children-prop */
-import { Popover, Box, ScrollArea, Divider, Indicator } from '@mantine/core';
-import React, { useEffect, useState } from 'react';
-import { Calendar } from '@mantine/dates';
-import { showNotification } from '@mantine/notifications';
-import { Calendar as CalendarIcon, Check } from 'tabler-icons-react';
-import { RadarrMediaDisplay, SonarrMediaDisplay } from './MediaDisplay';
-import { useConfig } from '../../../tools/state';
-import { IModule } from '../modules';
-
-export const CalendarModule: IModule = {
-  title: 'Calendar',
-  description:
-    'A calendar module for displaying upcoming releases. It interacts with the Sonarr and Radarr API.',
-  icon: CalendarIcon,
-  component: CalendarComponent,
-};
-
-export default function CalendarComponent(props: any) {
-  const { config } = useConfig();
-  const [sonarrMedias, setSonarrMedias] = useState([] as any);
-  const [radarrMedias, setRadarrMedias] = useState([] as any);
-
-  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) {
-      fetch(
-        `${sonarrService?.url}api/calendar?apikey=${sonarrService?.apiKey}&end=${nextMonth}`
-      ).then((response) => {
-        response.ok &&
-          response.json().then((data) => {
-            setSonarrMedias(data);
-            showNotification({
-              title: 'Sonarr',
-              icon: <Check />,
-              color: 'green',
-              autoClose: 1500,
-              radius: 'md',
-              message: `Loaded ${data.length} releases`,
-            });
-          });
-      });
-    }
-    if (radarrService && radarrService.apiKey) {
-      fetch(
-        `${radarrService?.url}api/v3/calendar?apikey=${radarrService?.apiKey}&end=${nextMonth}`
-      ).then((response) => {
-        response.ok &&
-          response.json().then((data) => {
-            setRadarrMedias(data);
-            showNotification({
-              title: 'Radarr',
-              icon: <Check />,
-              color: 'green',
-              autoClose: 1500,
-              radius: 'md',
-              message: `Loaded ${data.length} releases`,
-            });
-          });
-      });
-    }
-  }, [config.services]);
-
-  if (sonarrMedias === undefined && radarrMedias === undefined) {
-    return <Calendar />;
-  }
-  return (
-    <Calendar
-      onChange={(day: any) => {}}
-      renderDay={(renderdate) => (
-        <DayComponent
-          renderdate={renderdate}
-          sonarrmedias={sonarrMedias}
-          radarrmedias={radarrMedias}
-        />
-      )}
-    />
-  );
-}
-
-function DayComponent(props: any) {
-  const {
-    renderdate,
-    sonarrmedias,
-    radarrmedias,
-  }: { renderdate: Date; sonarrmedias: []; radarrmedias: [] } = props;
-  const [opened, setOpened] = useState(false);
-
-  const day = renderdate.getDate();
-  // Itterate over the medias and filter the ones that are on the same day
-  const 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 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();
-  });
-  if (sonarrFiltered.length === 0 && radarrFiltered.length === 0) {
-    return <div>{day}</div>;
-  }
-
-  return (
-    <Box
-      onClick={() => {
-        setOpened(true);
-      }}
-    >
-      {radarrFiltered.length > 0 && <Indicator size={7} color="yellow" children={null} />}
-      {sonarrFiltered.length > 0 && <Indicator size={7} offset={8} color="blue" children={null} />}
-      <Popover
-        position="left"
-        radius="lg"
-        shadow="xl"
-        transition="pop"
-        width={700}
-        onClose={() => setOpened(false)}
-        opened={opened}
-        // TODO: Fix this !! WTF ?
-        target={`‏ ${day}`}
-      >
-        <ScrollArea style={{ height: 400 }}>
-          {sonarrFiltered.map((media: any, index: number) => (
-            <React.Fragment key={index}>
-              <SonarrMediaDisplay media={media} />
-              {index < sonarrFiltered.length - 1 && <Divider variant="dashed" my="xl" />}
-            </React.Fragment>
-          ))}
-          {radarrFiltered.length > 0 && sonarrFiltered.length > 0 && (
-            <Divider variant="dashed" my="xl" />
-          )}
-          {radarrFiltered.map((media: any, index: number) => (
-            <React.Fragment key={index}>
-              <RadarrMediaDisplay media={media} />
-              {index < radarrFiltered.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,100 +0,0 @@
-import { Stack, Image, Group, Title, Badge, Text, ActionIcon, Anchor } from '@mantine/core';
-import { Link } from 'tabler-icons-react';
-
-export interface IMedia {
-  overview: string;
-  imdbId: any;
-  title: string;
-  poster: string;
-  genres: string[];
-  seasonNumber?: number;
-  episodeNumber?: number;
-}
-
-function MediaDisplay(props: { media: IMedia }) {
-  const { media }: { media: IMedia } = props;
-  return (
-    <Group noWrap align="self-start" mr={15}>
-      <Image
-        radius="md"
-        fit="cover"
-        src={media.poster}
-        alt={media.title}
-        width={300}
-        height={400}
-      />
-      <Stack
-        justify="space-between"
-        sx={(theme) => ({
-          height: 400,
-        })}
-      >
-        <Group direction="column">
-          <Group>
-            <Title order={3}>{media.title}</Title>
-            <Anchor href={`https://www.imdb.com/title/${media.imdbId}`} target="_blank">
-              <ActionIcon>
-                <Link />
-              </ActionIcon>
-            </Anchor>
-          </Group>
-          {media.episodeNumber && media.seasonNumber && (
-            <Text
-              style={{
-                textAlign: 'center',
-                color: '#a0aec0',
-              }}
-            >
-              Season {media.seasonNumber} episode {media.episodeNumber}
-            </Text>
-          )}
-          <Text align="justify">{media.overview}</Text>
-        </Group>
-        {/*Add the genres at the bottom of the poster*/}
-        <Group>
-          {media.genres.map((genre: string, i: number) => (
-            <Badge key={i}>{genre}</Badge>
-          ))}
-        </Group>
-      </Stack>
-    </Group>
-  );
-}
-
-export function RadarrMediaDisplay(props: any) {
-  const { media }: { media: any } = props;
-  // Find a poster CoverType
-  const poster = media.images.find((image: any) => image.coverType === 'poster');
-  // Return a movie poster containting the title and the description
-  return (
-    <MediaDisplay
-      media={{
-        imdbId: media.imdbId,
-        title: media.title,
-        overview: media.overview,
-        poster: poster.url,
-        genres: media.genres,
-      }}
-    />
-  );
-}
-
-export function SonarrMediaDisplay(props: any) {
-  const { media }: { media: any } = props;
-  // Find a poster CoverType
-  const poster = media.series.images.find((image: any) => image.coverType === 'poster');
-  // Return a movie poster containting the title and the description
-  return (
-    <MediaDisplay
-      media={{
-        imdbId: media.series.imdbId,
-        title: media.series.title,
-        overview: media.series.overview,
-        poster: poster.url,
-        genres: media.series.genres,
-        seasonNumber: media.seasonNumber,
-        episodeNumber: media.episodeNumber,
-      }}
-    />
-  );
-}

src/components/modules/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,41 +0,0 @@
-import { Group, Text, Title } from '@mantine/core';
-import dayjs from 'dayjs';
-import { useEffect, useState } from 'react';
-import { Clock } from 'tabler-icons-react';
-import { IModule } from '../modules';
-
-export const DateModule: IModule = {
-  title: 'Date',
-  description: 'Show the current time and date in a card',
-  icon: Clock,
-  component: DateComponent,
-};
-
-export default function DateComponent(props: any) {
-  const [date, setDate] = useState(new Date());
-  const hours = date.getHours();
-  const minutes = date.getMinutes();
-
-  // Change date on minute change
-  // Note: Using 10 000ms instead of 1000ms to chill a little :)
-  useEffect(() => {
-    setInterval(() => {
-      setDate(new Date());
-    }, 10000);
-  }, []);
-
-  return (
-    <Group p="sm" direction="column">
-      <Title>
-        {hours < 10 ? `0${hours}` : hours}:{minutes < 10 ? `0${minutes}` : minutes}
-      </Title>
-      <Text size="xl">
-        {
-          // Use dayjs to format the date
-          // https://day.js.org/en/getting-started/installation/
-          dayjs(date).format('dddd, MMMM D')
-        }
-      </Text>
-    </Group>
-  );
-}

src/components/modules/index.ts

@@ -1,2 +0,0 @@
-export * from './date';
-export * from './calendar';

src/components/modules/moduleWrapper.tsx

@@ -1,29 +0,0 @@
-import { Card, useMantineTheme } from '@mantine/core';
-import { useConfig } from '../../tools/state';
-import { IModule } from './modules';
-
-export default function ModuleWrapper(props: any) {
-  const { module }: { module: IModule } = props;
-  const { config } = useConfig();
-  const enabledModules = config.settings.enabledModules ?? [];
-  // Remove 'Module' from enabled modules titles
-  const isShown = enabledModules.includes(module.title);
-  const theme = useMantineTheme();
-  if (!isShown) {
-    return null;
-  }
-  return (
-    <Card
-      hidden={!isShown}
-      mx="sm"
-      radius="lg"
-      shadow="sm"
-      style={{
-        // Make background color of the card depend on the theme
-        backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[5] : 'white',
-      }}
-    >
-      <module.component />
-    </Card>
-  );
-}

src/modules/ModuleTypes.d.ts

@@ -1,11 +1,24 @@
 // 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;
-  props?: any;
+  options?: Option;
+}
+
+interface Option {
+  [x: string]: OptionValues;
+}
+
+export interface OptionValues {
+  name: string;
+  value: boolean | string | string[];
+  options?: string[];
 }

src/modules/calendar/CalendarModule.tsx

@@ -0,0 +1,320 @@
+/* eslint-disable react/no-children-prop */
+import {
+  Box,
+  Divider,
+  Indicator,
+  Popover,
+  ScrollArea,
+  createStyles,
+  useMantineTheme,
+} from '@mantine/core';
+import React, { useEffect, useState } from 'react';
+import { Calendar } from '@mantine/dates';
+import { IconCalendar as CalendarIcon } from '@tabler/icons';
+import axios from 'axios';
+import { useDisclosure } from '@mantine/hooks';
+import { useConfig } from '../../tools/state';
+import { IModule } from '../ModuleTypes';
+import {
+  SonarrMediaDisplay,
+  RadarrMediaDisplay,
+  LidarrMediaDisplay,
+  ReadarrMediaDisplay,
+} from '../common';
+import { serviceItem } from '../../tools/types';
+import { useColorTheme } from '../../tools/color';
+
+export const CalendarModule: IModule = {
+  title: 'Calendar',
+  description:
+    '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(() => {
+    // 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]);
+
+  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}
+        />
+      )}
+    />
+  );
+}
+
+function DayComponent(props: any) {
+  const {
+    renderdate,
+    sonarrmedias,
+    radarrmedias,
+    lidarrmedias,
+    readarrmedias,
+  }: { renderdate: Date; sonarrmedias: []; radarrmedias: []; lidarrmedias: []; readarrmedias: [] } =
+    props;
+  const [opened, { close, open }] = useDisclosure(false);
+
+  const day = renderdate.getDate();
+
+  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.airDateUtc);
+    return date.toDateString() === renderdate.toDateString();
+  });
+  const radarrFiltered = radarrmedias.filter((media: any) => {
+    const date = new Date(media.inCinemas);
+    return date.toDateString() === renderdate.toDateString();
+  });
+  const totalFiltered = [
+    ...readarrFiltered,
+    ...lidarrFiltered,
+    ...sonarrFiltered,
+    ...radarrFiltered,
+  ];
+  if (totalFiltered.length === 0) {
+    return <div>{day}</div>;
+  }
+
+  return (
+    <Popover
+      position="bottom"
+      withArrow
+      withinPortal
+      radius="lg"
+      shadow="sm"
+      transition="pop"
+      onClose={close}
+      opened={opened}
+    >
+      <Popover.Target>
+        <Box onClick={open}>
+          {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}
+            />
+          )}
+          <div>{day}</div>
+        </Box>
+      </Popover.Target>
+      <Popover.Dropdown>
+        <ScrollArea
+          offsetScrollbars
+          scrollbarSize={5}
+          style={{
+            height:
+              totalFiltered.slice(0, 2).length > 1 ? totalFiltered.slice(0, 2).length * 150 : 200,
+            width: 400,
+          }}
+        >
+          {sonarrFiltered.map((media: any, index: number) => (
+            <React.Fragment key={index}>
+              <SonarrMediaDisplay media={media} />
+              {index < sonarrFiltered.length - 1 && <Divider variant="dashed" size="sm" my="xl" />}
+            </React.Fragment>
+          ))}
+          {radarrFiltered.length > 0 && sonarrFiltered.length > 0 && (
+            <Divider variant="dashed" size="sm" my="xl" />
+          )}
+          {radarrFiltered.map((media: any, index: number) => (
+            <React.Fragment key={index}>
+              <RadarrMediaDisplay media={media} />
+              {index < radarrFiltered.length - 1 && <Divider variant="dashed" size="sm" my="xl" />}
+            </React.Fragment>
+          ))}
+          {sonarrFiltered.length > 0 && lidarrFiltered.length > 0 && (
+            <Divider variant="dashed" size="sm" my="xl" />
+          )}
+          {lidarrFiltered.map((media: any, index: number) => (
+            <React.Fragment key={index}>
+              <LidarrMediaDisplay media={media} />
+              {index < lidarrFiltered.length - 1 && <Divider variant="dashed" size="sm" my="xl" />}
+            </React.Fragment>
+          ))}
+          {lidarrFiltered.length > 0 && readarrFiltered.length > 0 && (
+            <Divider variant="dashed" size="sm" my="xl" />
+          )}
+          {readarrFiltered.map((media: any, index: number) => (
+            <React.Fragment key={index}>
+              <ReadarrMediaDisplay media={media} />
+              {index < readarrFiltered.length - 1 && <Divider variant="dashed" size="sm" my="xl" />}
+            </React.Fragment>
+          ))}
+        </ScrollArea>
+      </Popover.Dropdown>
+    </Popover>
+  );
+}

src/modules/common/MediaDisplay.tsx

@@ -0,0 +1,260 @@
+import { Badge, Button, Group, Image, Stack, Text, Title } from '@mantine/core';
+import { IconDownload, IconExternalLink, IconPlayerPlay } from '@tabler/icons';
+import { useState } from 'react';
+import { useColorTheme } from '../../tools/color';
+import { useConfig } from '../../tools/state';
+import { serviceItem } from '../../tools/types';
+import { RequestModal } from '../overseerr/RequestModal';
+import { Result } from '../overseerr/SearchResult';
+
+export interface IMedia {
+  overview: string;
+  imdbId?: any;
+  tmdbId?: any;
+  artist?: string;
+  title?: string;
+  type: 'movie' | 'tvshow' | 'book' | 'music' | 'overseer';
+  episodetitle?: string;
+  voteAverage?: string;
+  poster?: string;
+  genres: string[];
+  seasonNumber?: number;
+  plexUrl?: string;
+  episodeNumber?: number;
+  [key: string]: any;
+}
+
+export function OverseerrMediaDisplay(props: any) {
+  const { media }: { media: Result } = props;
+  const { config } = useConfig();
+  const service = config.services.find(
+    (service) => service.type === 'Overseerr' || service.type === 'Jellyseerr'
+  );
+
+  return (
+    <MediaDisplay
+      media={{
+        ...media,
+        genres: [],
+        overview: media.overview ?? '',
+        title: media.title ?? media.name ?? media.originalName,
+        poster: `https://image.tmdb.org/t/p/w600_and_h900_bestv2/${media.posterPath}`,
+        seasonNumber: media.mediaInfo?.seasons.length,
+        episodetitle: media.title,
+        plexUrl: media.mediaInfo?.plexUrl ?? media.mediaInfo?.mediaUrl,
+        voteAverage: media.voteAverage?.toString(),
+        overseerrResult: media,
+        overseerrId: `${service?.openedUrl ? service?.openedUrl : service?.url}/${
+          media.mediaType
+        }/${media.id}`,
+        type: 'overseer',
+      }}
+    />
+  );
+}
+
+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 = readarr.openedUrl
+    ? new URL(readarr.openedUrl).origin
+    : new URL(readarr.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={{
+        ...media,
+        title: media.title,
+        poster: fullLink,
+        artist: media.authorTitle,
+        overview: `new book release by ${media.authorTitle}`,
+        genres: media.genres ?? [],
+        voteAverage: media.ratings.value.toString(),
+        type: 'book',
+      }}
+    />
+  );
+}
+
+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 = lidarr.openedUrl ? new URL(lidarr.openedUrl).origin : 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={{
+        type: 'music',
+        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
+  return (
+    <MediaDisplay
+      media={{
+        ...media,
+        title: media.title ?? media.originalTitle,
+        overview: media.overview ?? '',
+        genres: media.genres ?? [],
+        poster: media.images.find((image: any) => image.coverType === 'poster')?.url,
+        voteAverage: media.ratings.tmdb.value.toString(),
+        imdbId: media.imdbId,
+        type: 'movie',
+      }}
+    />
+  );
+}
+
+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={{
+        ...media,
+        genres: media.series.genres ?? [],
+        overview: media.overview ?? media.series.overview ?? '',
+        title: media.series.title,
+        poster: poster ? poster.url : undefined,
+        episodeNumber: media.episodeNumber,
+        seasonNumber: media.seasonNumber,
+        episodetitle: media.title,
+        imdbId: media.series.imdbId,
+        voteAverage: media.series.ratings.value.toString(),
+        type: 'tvshow',
+      }}
+    />
+  );
+}
+
+export function MediaDisplay({ media }: { media: IMedia }) {
+  const [opened, setOpened] = useState(false);
+  const { secondaryColor } = useColorTheme();
+
+  return (
+    <Group mr="xs" align="stretch" noWrap style={{ maxHeight: 200 }}>
+      <Image src={media.poster} height={200} width={150} radius="md" fit="cover" />
+      <Stack justify="space-around">
+        <Stack spacing="sm">
+          <Text lineClamp={2}>
+            <Title order={5}>{media.title}</Title>
+          </Text>
+          <Group spacing="xs">
+            {media.type === 'tvshow' && (
+              <Badge variant="dot" size="xs" radius="md" color="blue">
+                s{media.seasonNumber}e{media.episodeNumber} - {media.episodetitle}
+              </Badge>
+            )}
+            {media.type === 'music' && (
+              <Badge variant="dot" size="xs" radius="md" color="green">
+                {media.artist}
+              </Badge>
+            )}
+            {media.type === 'movie' && (
+              <Badge variant="dot" size="xs" radius="md" color="orange">
+                Radarr
+              </Badge>
+            )}
+            {media.type === 'book' && (
+              <Badge variant="dot" size="xs" radius="md" color="red">
+                Readarr
+              </Badge>
+            )}
+            {media.genres.slice(0, 2).map((genre) => (
+              <Badge size="xs" radius="md" key={genre}>
+                {genre}
+              </Badge>
+            ))}
+          </Group>
+          <Text color="dimmed" size="xs" lineClamp={4}>
+            {media.overview}
+          </Text>
+        </Stack>
+        <Group noWrap>
+          {media.plexUrl && (
+            <Button
+              component="a"
+              target="_blank"
+              variant="outline"
+              href={media.plexUrl}
+              size="sm"
+              rightIcon={<IconPlayerPlay size={15} />}
+            >
+              Play
+            </Button>
+          )}
+          {media.imdbId && (
+            <Button
+              component="a"
+              target="_blank"
+              href={`https://www.imdb.com/title/${media.imdbId}`}
+              variant="outline"
+              size="sm"
+              rightIcon={<IconExternalLink size={15} />}
+            >
+              IMDb
+            </Button>
+          )}
+          {media.overseerrId && (
+            <Button
+              component="a"
+              target="_blank"
+              href={media.overseerrId}
+              variant="outline"
+              size="sm"
+              rightIcon={<IconExternalLink size={15} />}
+            >
+              TMDb
+            </Button>
+          )}
+          {media.type === 'overseer' && !media.overseerrResult?.mediaInfo?.mediaAddedAt && (
+            <>
+              <RequestModal
+                base={media.overseerrResult as Result}
+                opened={opened}
+                setOpened={setOpened}
+              />
+              <Button
+                onClick={() => setOpened(true)}
+                color={secondaryColor}
+                size="sm"
+                rightIcon={<IconDownload size={15} />}
+              >
+                Request
+              </Button>
+            </>
+          )}
+        </Group>
+      </Stack>
+    </Group>
+  );
+}

src/modules/common/examples/book.json

@@ -0,0 +1,57 @@
+{
+	"title": "Mika in Real Life",
+	"authorTitle": "jean, emiko Mika in Real Life",
+	"seriesTitle": "",
+	"disambiguation": "",
+	"authorId": 1,
+	"foreignBookId": "93584169",
+	"titleSlug": "93584169",
+	"monitored": true,
+	"anyEditionOk": false,
+	"ratings": {
+		"votes": 149,
+		"value": 4.15,
+		"popularity": 618.35
+	},
+	"releaseDate": "2022-08-09T00:00:00Z",
+	"pageCount": 384,
+	"genres": [
+		"fiction",
+		"romance",
+		"contemporary",
+		"adult",
+		"adult-fiction",
+		"chick-lit",
+		"womens-fiction",
+		"asian-literature",
+		"family",
+		"lgbt"
+	],
+	"images": [
+		{
+			"url": "/MediaCover/Books/1/cover.jpg?lastWrite=637899714580000000",
+			"coverType": "cover",
+			"extension": ".jpg"
+		}
+	],
+	"links": [
+		{
+			"url": "https://www.goodreads.com/work/editions/93584169",
+			"name": "Goodreads Editions"
+		},
+		{
+			"url": "https://www.goodreads.com/book/show/59430548-mika-in-real-life",
+			"name": "Goodreads Book"
+		}
+	],
+	"statistics": {
+		"bookFileCount": 0,
+		"bookCount": 0,
+		"totalBookCount": 1,
+		"sizeOnDisk": 0,
+		"percentOfBooks": 0
+	},
+	"added": "2022-08-07T20:48:09Z",
+	"grabbed": false,
+	"id": 1
+}

src/modules/common/examples/movie.json

@@ -0,0 +1,70 @@
+{
+	"title": "The Tunnel to Summer, the Exit of Goodbyes",
+	"originalTitle": "夏へのトンネル、さよならの出口",
+	"originalLanguage": {
+		"id": 8,
+		"name": "Japanese"
+	},
+	"alternateTitles": [
+		{
+			"sourceType": "tmdb",
+			"movieId": 1,
+			"title": "Natsu e no Tunnel, Sayonara no Deguchi",
+			"sourceId": 0,
+			"votes": 0,
+			"voteCount": 0,
+			"language": {
+				"id": 1,
+				"name": "English"
+			},
+			"id": 1
+		}
+	],
+	"secondaryYearSourceId": 0,
+	"sortTitle": "tunnel to summer exit goodbyes",
+	"sizeOnDisk": 0,
+	"status": "announced",
+	"overview": "Tono Kaoru heard a rumor: The laws of space and time mean nothing to the Urashima Tunnel. If you find it, walk through and you'll find your heart's desire on the other side...in exchange for years of your own life. On the night Kaoru just so happens to find himself standing in front of a tunnel that looks suspiciously like the one the rumor describes, he finds himself thinking of Karen, the sister he lost in an accident five years ago. To Kaoru's surprise, he's been followed by the new transfer student Anzu Hanaki, who promises to help him experiment with the mysterious tunnel--but what does she want from Kaoru in exchange? And what will he have left to give, after the tunnel's done with him?",
+	"inCinemas": "2022-09-09T00:00:00Z",
+	"images": [
+		{
+			"coverType": "poster",
+			"url": "https://image.tmdb.org/t/p/original/3x5gc6dHsfNqZryipu159IALEPH.jpg"
+		},
+		{
+			"coverType": "fanart",
+			"url": "https://image.tmdb.org/t/p/original/zO3QSYs858SqiapafD7iJp17KVD.jpg"
+		}
+	],
+	"website": "https://natsuton.com/",
+	"year": 2022,
+	"hasFile": false,
+	"youTubeTrailerId": "",
+	"studio": "Pony Canyon",
+	"path": "/data/Library/Movies/The Tunnel to Summer, the Exit of Goodbyes (2022)",
+	"qualityProfileId": 4,
+	"monitored": true,
+	"minimumAvailability": "announced",
+	"isAvailable": true,
+	"folderName": "/data/Library/Movies/The Tunnel to Summer, the Exit of Goodbyes (2022)",
+	"runtime": 0,
+	"cleanTitle": "thetunneltosummerexitgoodbyes",
+	"imdbId": "tt17382524",
+	"tmdbId": 916192,
+	"titleSlug": "916192",
+	"genres": [
+		"Animation",
+		"Drama",
+		"Mystery"
+	],
+	"tags": [],
+	"added": "2022-07-05T07:50:42Z",
+	"ratings": {
+		"tmdb": {
+			"votes": 0,
+			"value": 0,
+			"type": "user"
+		}
+	},
+	"id": 1
+}

src/modules/common/examples/multipletvshows.json

@@ -0,0 +1,409 @@
+{
+	"page": 1,
+	"totalPages": 2,
+	"totalResults": 21,
+	"results": [
+		{
+			"id": 66025,
+			"firstAirDate": "2016-06-14",
+			"genreIds": [
+				80,
+				18
+			],
+			"mediaType": "tv",
+			"name": "Animal Kingdom",
+			"originCountry": [
+				"US"
+			],
+			"originalLanguage": "en",
+			"originalName": "Animal Kingdom",
+			"overview": "Un jeune homme de dix-sept ans emménage avec la famille Cody après le décès de sa mère, une fratrie baignant dans la criminalité gouvernée d'une main de maître par la matriarche, Smurf.",
+			"popularity": 75.653,
+			"voteAverage": 7.7,
+			"voteCount": 318,
+			"backdropPath": "/eQJwfyMqSra10ck8HOoiCrbQR32.jpg",
+			"posterPath": "/rzvdKrnSRKPFI0pgqMQknDPpRC9.jpg",
+			"mediaInfo": {
+				"downloadStatus": [],
+				"downloadStatus4k": [],
+				"id": 217,
+				"mediaType": "tv",
+				"tmdbId": 66025,
+				"tvdbId": 304262,
+				"imdbId": null,
+				"status": 3,
+				"status4k": 1,
+				"createdAt": "2022-08-08T11:06:20.000Z",
+				"updatedAt": "2022-08-08T11:06:23.000Z",
+				"lastSeasonChange": "2022-08-08T11:06:20.000Z",
+				"mediaAddedAt": null,
+				"serviceId": 0,
+				"serviceId4k": null,
+				"externalServiceId": 56,
+				"externalServiceId4k": null,
+				"externalServiceSlug": "animal-kingdom-2016",
+				"externalServiceSlug4k": null,
+				"ratingKey": null,
+				"ratingKey4k": null,
+				"seasons": [],
+				"serviceUrl": "http://sonarr:8989/series/animal-kingdom-2016"
+			}
+		},
+		{
+			"id": 44629,
+			"mediaType": "movie",
+			"adult": false,
+			"genreIds": [
+				18,
+				53,
+				80,
+				9648
+			],
+			"originalLanguage": "en",
+			"originalTitle": "Animal Kingdom",
+			"overview": "Une rue anonyme dans la banlieue de Melbourne. C’est là que vit la famille Cody. Profession: criminels. L’irruption parmi eux de Joshua, un neveu éloigné, offre à la police le moyen de les infiltrer. Il ne reste plus à Joshua qu’à choisir son camp...",
+			"popularity": 11.839,
+			"releaseDate": "2010-06-03",
+			"title": "Animal Kingdom",
+			"video": false,
+			"voteAverage": 6.8,
+			"voteCount": 643,
+			"backdropPath": "/dxOv6K3LNbZfQaGDyx7Tp94Koy.jpg",
+			"posterPath": "/qrVjc5JcaujL58SMMW9lqrp3bBX.jpg"
+		},
+		{
+			"id": 95731,
+			"firstAirDate": "2020-09-25",
+			"genreIds": [
+				99
+			],
+			"mediaType": "tv",
+			"name": "Au cœur de Disney's Animal Kingdom",
+			"originCountry": [],
+			"originalLanguage": "en",
+			"originalName": "Magic of Disney's Animal Kingdom",
+			"overview": "Au cœur d’Animal Kingdom narrée par Josh Gad, une célébrité parmi les fans de Disney, nous emmène en coulisses découvrir la magie de deux des animations animalières les plus visitées au monde : le parc à thème de Disney, Animal Kingdom, et The Seas with Nemo & Friends à Epcot. Les spectateurs s’approchent au plus près de créatures parmi les plus rares et les plus belles de la planète et rencontrent les experts en soins animaliers qui ont tissé des liens stupéfiants avec les 5 000 et plus animaux du parc. Chacun des huit épisodes plonge au cœur de l’endroit le plus magique sur Terre, dévoilant les multiples facettes de sa conception et de sa gestion.",
+			"popularity": 3.367,
+			"voteAverage": 8,
+			"voteCount": 4,
+			"backdropPath": "/gMTMnd54VVAbGiodBqMTGCjM3b2.jpg",
+			"posterPath": "/gvNTeRAfu4KN3dD5HUO4Nbnri07.jpg"
+		},
+		{
+			"id": 120862,
+			"mediaType": "movie",
+			"adult": false,
+			"genreIds": [
+				35,
+				18,
+				10749
+			],
+			"originalLanguage": "en",
+			"originalTitle": "The Animal Kingdom",
+			"overview": "Tom Collier, jeune éditeur, a entretenu une liaison passionnée et intellectuelle avec une dessinatrice, Daisy Sage. Celle-ci ayant mis un terme à leur relation, il a fait la connaissance de Cecilia, qu'il a rapidement décidé d'épouser. Alors que les fiançailles sont annoncées, Daisy, toujours amoureuse, fait son retour, mais trop tard. Le mariage a lieu. Sous l'influence de Cecilia, Tom Collier, qui était un éditeur intègre et exigeant, fait de plus en plus de concessions commerciales. Daisy, elle demeure fidèle à elle-même. Tom Collier, se retrouve a évoluer, par amour pour sa femme, dans un milieu de conventions bourgeoises qui ne l'intéressent pas.",
+			"popularity": 2.102,
+			"releaseDate": "1932-12-28",
+			"title": "The Animal Kingdom",
+			"video": false,
+			"voteAverage": 6.3,
+			"voteCount": 13,
+			"backdropPath": "/5P1Hx46wvCVx9D9yT8M5rdUIHZB.jpg",
+			"posterPath": "/3sLWwNvS77xynAGLkbiHVXlO3UH.jpg"
+		},
+		{
+			"id": 311015,
+			"mediaType": "movie",
+			"adult": false,
+			"genreIds": [
+				99
+			],
+			"originalLanguage": "en",
+			"originalTitle": "Disney Parks: Disney's Animal Kingdom",
+			"overview": "",
+			"popularity": 1.208,
+			"releaseDate": "2010-01-01",
+			"title": "Disney Parks: Disney's Animal Kingdom",
+			"video": true,
+			"voteAverage": 9,
+			"voteCount": 2,
+			"backdropPath": null,
+			"posterPath": "/93OEKY5vnKqGFbOyHtUAdcEz8NV.jpg"
+		},
+		{
+			"id": 291774,
+			"mediaType": "movie",
+			"adult": false,
+			"genreIds": [],
+			"originalLanguage": "en",
+			"originalTitle": "Kenya 3D: Animal Kingdom",
+			"overview": "",
+			"popularity": 0.6,
+			"releaseDate": "2013-03-08",
+			"title": "Kenya 3D: Animal Kingdom",
+			"video": false,
+			"voteAverage": 0,
+			"voteCount": 0,
+			"backdropPath": null,
+			"posterPath": null
+		},
+		{
+			"id": 640253,
+			"mediaType": "movie",
+			"adult": false,
+			"genreIds": [],
+			"originalLanguage": "it",
+			"originalTitle": "Animal Kingdom",
+			"overview": "",
+			"popularity": 0.6,
+			"releaseDate": "2016-11-12",
+			"title": "Animal Kingdom",
+			"video": false,
+			"voteAverage": 0,
+			"voteCount": 0,
+			"backdropPath": null,
+			"posterPath": "/vJFK5cCcIh4X4op0oeK5iY2ibPv.jpg"
+		},
+		{
+			"id": 507434,
+			"mediaType": "movie",
+			"adult": false,
+			"genreIds": [
+				27
+			],
+			"originalLanguage": "en",
+			"originalTitle": "Animal Kingdom",
+			"overview": "",
+			"popularity": 0.6,
+			"releaseDate": "2017-02-25",
+			"title": "Animal Kingdom",
+			"video": false,
+			"voteAverage": 0,
+			"voteCount": 0,
+			"backdropPath": "/8QxSJRLLw2m8ymrFsC2xJ26yd1n.jpg",
+			"posterPath": "/s77Q92boNGgkT2J5se3gwq5N8Xp.jpg"
+		},
+		{
+			"id": 775877,
+			"mediaType": "movie",
+			"adult": false,
+			"genreIds": [],
+			"originalLanguage": "en",
+			"originalTitle": "Disney's Animal Kingdom",
+			"overview": "",
+			"popularity": 0.6,
+			"releaseDate": "2004-05-12",
+			"title": "Disney's Animal Kingdom",
+			"video": true,
+			"voteAverage": 0,
+			"voteCount": 0,
+			"backdropPath": null,
+			"posterPath": null
+		},
+		{
+			"id": 318575,
+			"mediaType": "movie",
+			"adult": false,
+			"genreIds": [
+				99
+			],
+			"originalLanguage": "en",
+			"originalTitle": "Nature: Love in the Animal Kingdom",
+			"overview": "",
+			"popularity": 0.655,
+			"releaseDate": "2013-11-06",
+			"title": "Nature: Love in the Animal Kingdom",
+			"video": true,
+			"voteAverage": 9.5,
+			"voteCount": 2,
+			"backdropPath": "/vx2dfrXPTn0dKoyIqCEgrGvzwkd.jpg",
+			"posterPath": "/1fd53UCxtLAItNI5jMtVetFuw6v.jpg"
+		},
+		{
+			"id": 743266,
+			"mediaType": "movie",
+			"adult": false,
+			"genreIds": [],
+			"originalLanguage": "en",
+			"originalTitle": "Animal Kingdom: Great Are Thy Works",
+			"overview": "",
+			"popularity": 0.6,
+			"releaseDate": "1993-01-01",
+			"title": "Animal Kingdom: Great Are Thy Works",
+			"video": false,
+			"voteAverage": 0,
+			"voteCount": 0,
+			"backdropPath": null,
+			"posterPath": "/vjnsGLvymjG7dAIbjwzgFCdbhl6.jpg"
+		},
+		{
+			"id": 828152,
+			"mediaType": "movie",
+			"adult": false,
+			"genreIds": [
+				99
+			],
+			"originalLanguage": "en",
+			"originalTitle": "Disney's Animal Kingdom: Alive with Magic",
+			"overview": "",
+			"popularity": 0.6,
+			"releaseDate": "2017-06-27",
+			"title": "Disney's Animal Kingdom: Alive with Magic",
+			"video": false,
+			"voteAverage": 0,
+			"voteCount": 0,
+			"backdropPath": null,
+			"posterPath": "/amzVT8T9Ju3KLCDnBq4Rhf3LO8j.jpg"
+		},
+		{
+			"id": 280391,
+			"mediaType": "movie",
+			"adult": false,
+			"genreIds": [
+				12,
+				35,
+				16
+			],
+			"originalLanguage": "fr",
+			"originalTitle": "Pourquoi j'ai pas mangé mon père",
+			"overview": "L’histoire trépidante d’Édouard, fils aîné du roi des simiens, qui, considéré à sa naissance comme trop malingre, est rejeté par sa tribu. Il grandit loin d’eux, auprès de son ami Ian, et, incroyablement ingénieux, il découvre le feu, la chasse, l’habitat moderne, l’amour et même… l’espoir. Généreux, il veut tout partager, révolutionne l’ordre établi, et mène son peuple avec éclat et humour vers la véritable humanité… celle où on ne mange pas son père.",
+			"popularity": 12.971,
+			"releaseDate": "2015-04-08",
+			"title": "Pourquoi j'ai pas mangé mon père",
+			"video": false,
+			"voteAverage": 5.3,
+			"voteCount": 303,
+			"backdropPath": "/msDLrSt7Ozpe6oOg4XJrsQJd2IE.jpg",
+			"posterPath": "/efpzs2g1uRNcP8wPbIKSRPPH0aC.jpg"
+		},
+		{
+			"id": 775559,
+			"mediaType": "movie",
+			"adult": false,
+			"genreIds": [],
+			"originalLanguage": "en",
+			"originalTitle": "A New species of Theme Park: Disney’s Animal Kingdom",
+			"overview": "",
+			"popularity": 0.6,
+			"releaseDate": "1998-04-14",
+			"title": "A New species of Theme Park: Disney’s Animal Kingdom",
+			"video": true,
+			"voteAverage": 0,
+			"voteCount": 0,
+			"backdropPath": null,
+			"posterPath": null
+		},
+		{
+			"id": 775831,
+			"mediaType": "movie",
+			"adult": false,
+			"genreIds": [],
+			"originalLanguage": "en",
+			"originalTitle": "Disney Animal Kingdom Villas: A Village Comes to Life",
+			"overview": "",
+			"popularity": 0.6,
+			"releaseDate": "2007-06-14",
+			"title": "Disney Animal Kingdom Villas: A Village Comes to Life",
+			"video": true,
+			"voteAverage": 0,
+			"voteCount": 0,
+			"backdropPath": null,
+			"posterPath": null
+		},
+		{
+			"id": 432906,
+			"mediaType": "movie",
+			"adult": false,
+			"genreIds": [
+				99
+			],
+			"originalLanguage": "en",
+			"originalTitle": "Out in Nature: Homosexual Behaviour in the Animal Kingdom",
+			"overview": "",
+			"popularity": 0.6,
+			"releaseDate": "2001-09-07",
+			"title": "Out in Nature: Homosexual Behaviour in the Animal Kingdom",
+			"video": false,
+			"voteAverage": 6.8,
+			"voteCount": 4,
+			"backdropPath": null,
+			"posterPath": "/jjxhR9ZxZ3vhauK8IDR6wIBlCLI.jpg"
+		},
+		{
+			"id": 128887,
+			"mediaType": "movie",
+			"adult": false,
+			"genreIds": [
+				16,
+				35
+			],
+			"originalLanguage": "ja",
+			"originalTitle": "クレヨンしんちゃん オタケべ！カスカベ野生王国",
+			"overview": "",
+			"popularity": 5.365,
+			"releaseDate": "2009-04-18",
+			"title": "クレヨンしんちゃん オタケべ！カスカベ野生王国",
+			"video": false,
+			"voteAverage": 8.5,
+			"voteCount": 10,
+			"backdropPath": "/azvwXB25Wvbx2Cou3Th7lbnjrqP.jpg",
+			"posterPath": "/h7LipCtdCyBOKR1By5wSP2Ufy3c.jpg"
+		},
+		{
+			"id": 579733,
+			"mediaType": "movie",
+			"adult": false,
+			"genreIds": [],
+			"originalLanguage": "no",
+			"originalTitle": "Dyreriket",
+			"overview": "",
+			"popularity": 0.6,
+			"releaseDate": "2018-05-01",
+			"title": "Dyreriket",
+			"video": false,
+			"voteAverage": 0,
+			"voteCount": 0,
+			"backdropPath": null,
+			"posterPath": null
+		},
+		{
+			"id": 111612,
+			"firstAirDate": "2018-10-12",
+			"genreIds": [
+				10764
+			],
+			"mediaType": "tv",
+			"name": "坂上どうぶつ王国",
+			"originCountry": [
+				"JP"
+			],
+			"originalLanguage": "ja",
+			"originalName": "坂上どうぶつ王国",
+			"overview": "",
+			"popularity": 1.186,
+			"voteAverage": 0,
+			"voteCount": 0,
+			"backdropPath": "/op8bK5R76L9QpwcVTnYG7nKXKsU.jpg",
+			"posterPath": "/2VPq9RYaDohOT8YqTibKZMMT2Ue.jpg"
+		},
+		{
+			"id": 156216,
+			"firstAirDate": "2022-01-17",
+			"genreIds": [
+				16
+			],
+			"mediaType": "tv",
+			"name": "动物王国的故事",
+			"originCountry": [
+				"CN"
+			],
+			"originalLanguage": "zh",
+			"originalName": "动物王国的故事",
+			"overview": "",
+			"popularity": 0.6,
+			"voteAverage": 0,
+			"voteCount": 0,
+			"backdropPath": "/uxIJQnjzIQn2MGHk17nNhoIEkxU.jpg",
+			"posterPath": "/v90bqYZRUT30n22DdwahmW18LFn.jpg"
+		}
+	]
+}

src/modules/common/examples/music.json

@@ -0,0 +1,832 @@
+{
+	"title": "Celebrate",
+	"disambiguation": "",
+	"overview": "",
+	"artistId": 9,
+	"foreignAlbumId": "bfedab35-92b7-449b-adf0-875439ec9a85",
+	"monitored": true,
+	"anyReleaseOk": true,
+	"profileId": 1,
+	"duration": 1818062,
+	"albumType": "Album",
+	"secondaryTypes": [],
+	"mediumCount": 1,
+	"ratings": {
+			"votes": 1,
+			"value": 10
+	},
+	"releaseDate": "2022-07-27T00:00:00Z",
+	"releases": [
+			{
+					"id": 202,
+					"albumId": 32,
+					"foreignReleaseId": "22bd49a1-f858-427d-94ee-1788b54fb508",
+					"title": "Celebrate",
+					"status": "Official",
+					"duration": 0,
+					"trackCount": 9,
+					"media": [
+							{
+									"mediumNumber": 1,
+									"mediumName": "",
+									"mediumFormat": "CD"
+							}
+					],
+					"mediumCount": 1,
+					"disambiguation": "ONCE JAPAN限定盤",
+					"country": [
+							"Japan"
+					],
+					"label": [
+							"Warner Music Japan"
+					],
+					"format": "CD",
+					"monitored": false
+			},
+			{
+					"id": 203,
+					"albumId": 32,
+					"foreignReleaseId": "52c73f5f-4f91-451b-96d1-3ac3ef9371ee",
+					"title": "Celebrate",
+					"status": "Official",
+					"duration": 0,
+					"trackCount": 9,
+					"media": [
+							{
+									"mediumNumber": 1,
+									"mediumName": "",
+									"mediumFormat": "CD"
+							}
+					],
+					"mediumCount": 1,
+					"disambiguation": "初回限定盤B",
+					"country": [
+							"Japan"
+					],
+					"label": [
+							"Warner Music Japan"
+					],
+					"format": "CD",
+					"monitored": false
+			},
+			{
+					"id": 204,
+					"albumId": 32,
+					"foreignReleaseId": "5745040b-a5fa-4dae-ad31-0bce9d501e23",
+					"title": "Celebrate",
+					"status": "Official",
+					"duration": 0,
+					"trackCount": 9,
+					"media": [
+							{
+									"mediumNumber": 1,
+									"mediumName": "",
+									"mediumFormat": "CD"
+							}
+					],
+					"mediumCount": 1,
+					"disambiguation": "JEONGYEON盤",
+					"country": [
+							"Japan"
+					],
+					"label": [
+							"Warner Music Japan"
+					],
+					"format": "CD",
+					"monitored": false
+			},
+			{
+					"id": 205,
+					"albumId": 32,
+					"foreignReleaseId": "006f9135-454b-4182-a057-47d1b002a282",
+					"title": "Celebrate",
+					"status": "Official",
+					"duration": 0,
+					"trackCount": 9,
+					"media": [
+							{
+									"mediumNumber": 1,
+									"mediumName": "",
+									"mediumFormat": "CD"
+							}
+					],
+					"mediumCount": 1,
+					"disambiguation": "NAYEON盤",
+					"country": [
+							"Japan"
+					],
+					"label": [
+							"Warner Music Japan"
+					],
+					"format": "CD",
+					"monitored": false
+			},
+			{
+					"id": 206,
+					"albumId": 32,
+					"foreignReleaseId": "eeacd54b-a2bd-48f8-8d7c-3ab55b68f17c",
+					"title": "Celebrate",
+					"status": "Official",
+					"duration": 0,
+					"trackCount": 81,
+					"media": [
+							{
+									"mediumNumber": 1,
+									"mediumName": "NAYEON盤",
+									"mediumFormat": "CD"
+							},
+							{
+									"mediumNumber": 2,
+									"mediumName": "JEONGYEON盤",
+									"mediumFormat": "CD"
+							},
+							{
+									"mediumNumber": 3,
+									"mediumName": "MOMO盤",
+									"mediumFormat": "CD"
+							},
+							{
+									"mediumNumber": 4,
+									"mediumName": "SANA盤",
+									"mediumFormat": "CD"
+							},
+							{
+									"mediumNumber": 5,
+									"mediumName": "JIHYO盤",
+									"mediumFormat": "CD"
+							},
+							{
+									"mediumNumber": 6,
+									"mediumName": "MINA盤",
+									"mediumFormat": "CD"
+							},
+							{
+									"mediumNumber": 7,
+									"mediumName": "DAHYUN盤",
+									"mediumFormat": "CD"
+							},
+							{
+									"mediumNumber": 8,
+									"mediumName": "CHAEYOUNG盤",
+									"mediumFormat": "CD"
+							},
+							{
+									"mediumNumber": 9,
+									"mediumName": "TZUYU盤",
+									"mediumFormat": "CD"
+							}
+					],
+					"mediumCount": 9,
+					"disambiguation": "5th Anniversary Collection BOX",
+					"country": [
+							"Japan"
+					],
+					"label": [
+							"Warner Music Japan",
+							"Warner Music Japan",
+							"Warner Music Japan",
+							"Warner Music Japan",
+							"Warner Music Japan",
+							"Warner Music Japan",
+							"Warner Music Japan",
+							"Warner Music Japan",
+							"Warner Music Japan"
+					],
+					"format": "9xCD",
+					"monitored": false
+			},
+			{
+					"id": 207,
+					"albumId": 32,
+					"foreignReleaseId": "8ddd43f0-859e-4cff-be7c-daf6806cc035",
+					"title": "Celebrate",
+					"status": "Official",
+					"duration": 0,
+					"trackCount": 9,
+					"media": [
+							{
+									"mediumNumber": 1,
+									"mediumName": "",
+									"mediumFormat": "CD"
+							}
+					],
+					"mediumCount": 1,
+					"disambiguation": "JIHYO盤",
+					"country": [
+							"Japan"
+					],
+					"label": [
+							"Warner Music Japan"
+					],
+					"format": "CD",
+					"monitored": false
+			},
+			{
+					"id": 208,
+					"albumId": 32,
+					"foreignReleaseId": "ad8e0553-97de-499b-8010-85bd02c62859",
+					"title": "Celebrate",
+					"status": "Official",
+					"duration": 0,
+					"trackCount": 9,
+					"media": [
+							{
+									"mediumNumber": 1,
+									"mediumName": "",
+									"mediumFormat": "CD"
+							}
+					],
+					"mediumCount": 1,
+					"disambiguation": "TZUYU盤",
+					"country": [
+							"Japan"
+					],
+					"label": [
+							"Warner Music Japan"
+					],
+					"format": "CD",
+					"monitored": false
+			},
+			{
+					"id": 209,
+					"albumId": 32,
+					"foreignReleaseId": "276bf831-8cae-49a0-bc50-479869d401ac",
+					"title": "Celebrate",
+					"status": "Official",
+					"duration": 0,
+					"trackCount": 9,
+					"media": [
+							{
+									"mediumNumber": 1,
+									"mediumName": "",
+									"mediumFormat": "CD"
+							}
+					],
+					"mediumCount": 1,
+					"disambiguation": "MOMO盤",
+					"country": [
+							"Japan"
+					],
+					"label": [
+							"Warner Music Japan"
+					],
+					"format": "CD",
+					"monitored": false
+			},
+			{
+					"id": 210,
+					"albumId": 32,
+					"foreignReleaseId": "3d201058-deb0-4159-a82f-d9076a608036",
+					"title": "Celebrate",
+					"status": "Official",
+					"duration": 0,
+					"trackCount": 9,
+					"media": [
+							{
+									"mediumNumber": 1,
+									"mediumName": "",
+									"mediumFormat": "CD"
+							}
+					],
+					"mediumCount": 1,
+					"disambiguation": "MINA盤",
+					"country": [
+							"Japan"
+					],
+					"label": [
+							"Warner Music Japan"
+					],
+					"format": "CD",
+					"monitored": false
+			},
+			{
+					"id": 211,
+					"albumId": 32,
+					"foreignReleaseId": "e1fbf96d-f83e-478c-be7d-f0f6dd5305d1",
+					"title": "Celebrate",
+					"status": "Official",
+					"duration": 0,
+					"trackCount": 9,
+					"media": [
+							{
+									"mediumNumber": 1,
+									"mediumName": "",
+									"mediumFormat": "CD"
+							}
+					],
+					"mediumCount": 1,
+					"disambiguation": "DAHYUN盤",
+					"country": [
+							"Japan"
+					],
+					"label": [
+							"Warner Music Japan"
+					],
+					"format": "CD",
+					"monitored": false
+			},
+			{
+					"id": 212,
+					"albumId": 32,
+					"foreignReleaseId": "769a7006-763b-4cd8-8d1f-d389d52ec002",
+					"title": "Celebrate",
+					"status": "Official",
+					"duration": 0,
+					"trackCount": 9,
+					"media": [
+							{
+									"mediumNumber": 1,
+									"mediumName": "",
+									"mediumFormat": "CD"
+							}
+					],
+					"mediumCount": 1,
+					"disambiguation": "CHAEYOUNG盤",
+					"country": [
+							"Japan"
+					],
+					"label": [
+							"Warner Music Japan"
+					],
+					"format": "CD",
+					"monitored": false
+			},
+			{
+					"id": 213,
+					"albumId": 32,
+					"foreignReleaseId": "42e74581-0ef3-4db9-8a20-ba8a3daa1cf0",
+					"title": "Celebrate",
+					"status": "Official",
+					"duration": 0,
+					"trackCount": 9,
+					"media": [
+							{
+									"mediumNumber": 1,
+									"mediumName": "",
+									"mediumFormat": "CD"
+							}
+					],
+					"mediumCount": 1,
+					"disambiguation": "初回限定盤A",
+					"country": [
+							"Japan"
+					],
+					"label": [
+							"Warner Music Japan",
+							"Warner Music Japan"
+					],
+					"format": "CD",
+					"monitored": false
+			},
+			{
+					"id": 214,
+					"albumId": 32,
+					"foreignReleaseId": "81bdf07f-61ad-4436-bfae-63cd1d9e700c",
+					"title": "Celebrate",
+					"status": "Official",
+					"duration": 0,
+					"trackCount": 9,
+					"media": [
+							{
+									"mediumNumber": 1,
+									"mediumName": "",
+									"mediumFormat": "CD"
+							}
+					],
+					"mediumCount": 1,
+					"disambiguation": "通常盤",
+					"country": [
+							"Japan"
+					],
+					"label": [
+							"Warner Music Japan"
+					],
+					"format": "CD",
+					"monitored": false
+			},
+			{
+					"id": 215,
+					"albumId": 32,
+					"foreignReleaseId": "273b3ba1-88e8-4653-a542-c8b0489c1772",
+					"title": "Celebrate",
+					"status": "Official",
+					"duration": 0,
+					"trackCount": 9,
+					"media": [
+							{
+									"mediumNumber": 1,
+									"mediumName": "",
+									"mediumFormat": "CD"
+							}
+					],
+					"mediumCount": 1,
+					"disambiguation": "SANA盤",
+					"country": [
+							"Japan"
+					],
+					"label": [
+							"Warner Music Japan"
+					],
+					"format": "CD",
+					"monitored": false
+			},
+			{
+					"id": 216,
+					"albumId": 32,
+					"foreignReleaseId": "2442df5f-4090-452c-be7f-5885dffee8e2",
+					"title": "Celebrate",
+					"status": "Official",
+					"duration": 1818062,
+					"trackCount": 9,
+					"media": [
+							{
+									"mediumNumber": 1,
+									"mediumName": "",
+									"mediumFormat": "Digital Media"
+							}
+					],
+					"mediumCount": 1,
+					"disambiguation": "",
+					"country": [
+							"Algeria",
+							"Angola",
+							"Anguilla",
+							"Antigua and Barbuda",
+							"Argentina",
+							"Armenia",
+							"Australia",
+							"Austria",
+							"Azerbaijan",
+							"Bahamas",
+							"Bahrain",
+							"Barbados",
+							"Belgium",
+							"Belize",
+							"Benin",
+							"Bermuda",
+							"Bhutan",
+							"Bolivia",
+							"Bosnia and Herzegovina",
+							"Botswana",
+							"Brazil",
+							"Brunei",
+							"Bulgaria",
+							"Burkina Faso",
+							"Cambodia",
+							"Cameroon",
+							"Canada",
+							"Cape Verde",
+							"Cayman Islands",
+							"Chad",
+							"Chile",
+							"China",
+							"Colombia",
+							"Congo",
+							"Costa Rica",
+							"Côte d'Ivoire",
+							"Croatia",
+							"Cyprus",
+							"Czech Republic",
+							"Denmark",
+							"Dominica",
+							"Dominican Republic",
+							"Ecuador",
+							"Egypt",
+							"El Salvador",
+							"Estonia",
+							"Fiji",
+							"Finland",
+							"France",
+							"Gabon",
+							"Gambia",
+							"Georgia",
+							"Germany",
+							"Ghana",
+							"Greece",
+							"Grenada",
+							"Guatemala",
+							"Guinea-Bissau",
+							"Guyana",
+							"Honduras",
+							"Hong Kong",
+							"Hungary",
+							"Iceland",
+							"India",
+							"Indonesia",
+							"Iraq",
+							"Ireland",
+							"Israel",
+							"Italy",
+							"Jamaica",
+							"Japan",
+							"Jordan",
+							"Kazakhstan",
+							"Kenya",
+							"Kuwait",
+							"Kyrgyzstan",
+							"Laos",
+							"Latvia",
+							"Lebanon",
+							"Liberia",
+							"Libya",
+							"Lithuania",
+							"Luxembourg",
+							"Macao",
+							"North Macedonia",
+							"Madagascar",
+							"Malawi",
+							"Malaysia",
+							"Maldives",
+							"Mali",
+							"Malta",
+							"Mauritania",
+							"Mauritius",
+							"Mexico",
+							"Federated States of Micronesia",
+							"Moldova",
+							"Mongolia",
+							"Montserrat",
+							"Morocco",
+							"Mozambique",
+							"Myanmar",
+							"Namibia",
+							"Nepal",
+							"Netherlands",
+							"New Zealand",
+							"Nicaragua",
+							"Niger",
+							"Nigeria",
+							"Norway",
+							"Oman",
+							"Panama",
+							"Papua New Guinea",
+							"Paraguay",
+							"Peru",
+							"Philippines",
+							"Poland",
+							"Portugal",
+							"Qatar",
+							"Romania",
+							"Rwanda",
+							"Saint Kitts and Nevis",
+							"Saint Lucia",
+							"Saint Vincent and The Grenadines",
+							"Saudi Arabia",
+							"Senegal",
+							"Seychelles",
+							"Sierra Leone",
+							"Singapore",
+							"Slovakia",
+							"Slovenia",
+							"Solomon Islands",
+							"South Africa",
+							"Spain",
+							"Sri Lanka",
+							"Suriname",
+							"Eswatini",
+							"Sweden",
+							"Switzerland",
+							"Taiwan",
+							"Tajikistan",
+							"Tanzania",
+							"Thailand",
+							"Tonga",
+							"Trinidad and Tobago",
+							"Tunisia",
+							"Turkey",
+							"Turkmenistan",
+							"Turks and Caicos Islands",
+							"Uganda",
+							"Ukraine",
+							"United Arab Emirates",
+							"United Kingdom",
+							"United States",
+							"Uruguay",
+							"Uzbekistan",
+							"Vanuatu",
+							"Venezuela",
+							"Vietnam",
+							"British Virgin Islands",
+							"Yemen",
+							"Democratic Republic of the Congo",
+							"Zambia",
+							"Zimbabwe",
+							"Montenegro",
+							"Serbia",
+							"Kosovo"
+					],
+					"label": [
+							"Warner Music Japan"
+					],
+					"format": "Digital Media",
+					"monitored": true
+			}
+	],
+	"genres": [],
+	"media": [
+			{
+					"mediumNumber": 1,
+					"mediumName": "",
+					"mediumFormat": "Digital Media"
+			}
+	],
+	"artist": {
+			"artistMetadataId": 14,
+			"status": "continuing",
+			"ended": false,
+			"artistName": "TWICE",
+			"foreignArtistId": "8da127cc-c432-418f-b356-ef36210d82ac",
+			"tadbId": 0,
+			"discogsId": 0,
+			"overview": "Twice (Korean: 트와이스; RR: Teuwaiseu; Japanese: トゥワイス, Hepburn: To~uwaisu; commonly stylized in all caps as TWICE) is a South Korean girl group formed by JYP Entertainment. The group is composed of nine members: Nayeon, Jeongyeon, Momo, Sana, Jihyo, Mina, Dahyun, Chaeyoung, and Tzuyu. Twice was formed under the television program Sixteen (2015) and debuted on October 20, 2015, with the extended play (EP) The Story Begins.\nTwice rose to domestic fame in 2016 with their single \"Cheer Up\", which charted at number one on the Gaon Digital Chart, became the best-performing single of the year, and won \"Song of the Year\" at the Melon Music Awards and Mnet Asian Music Awards. Their next single, \"TT\", from their third EP Twicecoaster: Lane 1, topped the Gaon charts for four consecutive weeks. The EP was the highest selling Korean girl group album of 2016. Within 19 months after debut, Twice had already sold over 1.2 million units of their four EPs and special album. As of December 2020, the group has sold over 10 million albums cumulatively in South Korea and Japan, becoming the highest-selling K-Pop girl group of all time.The group debuted in Japan on June 28, 2017, under Warner Music Japan, with the release of a compilation album titled #Twice. The album charted at number 2 on the Oricon Albums Chart with the highest first-week album sales by a K-pop artist in Japan in two years. It was followed by the release of Twice's first original Japanese maxi single titled \"One More Time\" in October. Twice became the first Korean girl group to earn a platinum certification from the Recording Industry Association of Japan (RIAJ) for both an album and CD single in the same year. Twice ranked third in the Top Artist category of Billboard Japan's 2017 Year-end Rankings, and in 2019, they became the first Korean girl group to embark on a Japanese dome tour.\nTwice is the first female Korean act to simultaneously top both Billboard's World Albums and World Digital Song Sales charts with the release of their first studio album Twicetagram and its lead single \"Likey\" in 2017. With the release of their single \"Feel Special\" in 2019, Twice became the third female Korean act to chart into the Canadian Hot 100. After signing with Republic Records for American promotions as part of a partnership with JYP Entertainment, the group has charted into the US Billboard 200 with More & More and Eyes Wide Open in 2020 and Taste of Love and Formula of Love: O+T=<3 in 2021. Their first official English-language single, \"The Feels\", became their first song to enter the US Billboard Hot 100 and the UK Singles Chart, peaking at the 83rd and 80th positions of the charts, respectively. They have been dubbed the next \"Nation's Girl Group\", and their point choreography—including for \"Cheer Up\" (2016), \"TT\" (2016), \"Signal\" (2017), and \"What Is Love?\" (2018)—became dance crazes and viral memes imitated by many celebrities.",
+			"artistType": "Group",
+			"disambiguation": "South Korean girl group",
+			"links": [
+					{
+							"url": "https://www.generasia.com/wiki/Twice",
+							"name": "generasia"
+					},
+					{
+							"url": "http://twice.jype.com/",
+							"name": "jype"
+					},
+					{
+							"url": "https://twitter.com/JYPETWICE",
+							"name": "twitter"
+					},
+					{
+							"url": "https://www.facebook.com/JYPETWICE",
+							"name": "facebook"
+					},
+					{
+							"url": "https://www.instagram.com/twicetagram/",
+							"name": "instagram"
+					},
+					{
+							"url": "https://www.wikidata.org/wiki/Q20645861",
+							"name": "wikidata"
+					},
+					{
+							"url": "http://fans.jype.com/twice",
+							"name": "jype"
+					},
+					{
+							"url": "https://commons.wikimedia.org/wiki/File:Twice_performing_at_SAC_2016_02_(cropped).jpg",
+							"name": "wikimedia"
+					},
+					{
+							"url": "https://www.discogs.com/artist/4786543",
+							"name": "discogs"
+					},
+					{
+							"url": "https://www.last.fm/music/%ED%8A%B8%EC%99%80%EC%9D%B4%EC%8A%A4",
+							"name": "last"
+					},
+					{
+							"url": "https://www.last.fm/music/TWICE",
+							"name": "last"
+					},
+					{
+							"url": "https://commons.wikimedia.org/wiki/File:160507_Twice_guerrilla_concert.jpg",
+							"name": "wikimedia"
+					},
+					{
+							"url": "https://open.spotify.com/artist/7n2Ycct7Beij7Dj7meI4X0",
+							"name": "spotify"
+					},
+					{
+							"url": "http://www.twicejapan.com/",
+							"name": "twicejapan"
+					},
+					{
+							"url": "https://www.instagram.com/jypetwice_japan/",
+							"name": "instagram"
+					},
+					{
+							"url": "https://twitter.com/JYPETWICE_JAPAN",
+							"name": "twitter"
+					},
+					{
+							"url": "https://itunes.apple.com/jp/artist/id1203816887",
+							"name": "apple"
+					},
+					{
+							"url": "https://commons.wikimedia.org/wiki/File:(TV10)_%EC%97%AC%EC%9E%90%EC%B9%9C%EA%B5%AC%C2%B7%ED%8A%B8%EC%99%80%EC%9D%B4%EC%8A%A4%C2%B7%EB%B8%94%EB%9E%99%ED%95%91%ED%81%AC,_%EB%A0%88%EB%93%9C%EC%B9%B4%ED%8E%AB_%EA%B0%81%EC%96%91%EA%B0%81%EC%83%89_%ED%8C%A8%EC%85%98_%EC%97%B4%EC%A0%84_(2017_%EA%B3%A8%EB%93%A0%EB%94%94%EC%8A%A4%ED%81%AC_%EB%A0%88%EB%93%9C%EC%B9%B4%ED%8E%AB)_2m19s.jpg",
+							"name": "wikimedia"
+					},
+					{
+							"url": "https://itunes.apple.com/us/artist/id1203816887",
+							"name": "apple"
+					},
+					{
+							"url": "http://viaf.org/viaf/178150468353504172529",
+							"name": "viaf"
+					},
+					{
+							"url": "https://www.deezer.com/artist/161553",
+							"name": "deezer"
+					},
+					{
+							"url": "https://imvdb.com/n/twice",
+							"name": "imvdb"
+					},
+					{
+							"url": "https://listen.tidal.com/artist/3577941",
+							"name": "tidal"
+					},
+					{
+							"url": "https://www.youtube.com/TWICE",
+							"name": "youtube"
+					},
+					{
+							"url": "https://www.youtube.com/twicejapan_official",
+							"name": "youtube"
+					},
+					{
+							"url": "https://music.apple.com/mx/artist/1203816887",
+							"name": "apple"
+					},
+					{
+							"url": "https://www.imdb.com/name/nm9652049/",
+							"name": "imdb"
+					},
+					{
+							"url": "https://www.tiktok.com/@twice_tiktok_officialjp",
+							"name": "tiktok"
+					},
+					{
+							"url": "https://music.youtube.com/channel/UCAq0pFGa2w9SjxOq0ZxKVIw",
+							"name": "youtube"
+					}
+			],
+			"images": [
+					{
+							"url": "http://assets.fanart.tv/fanart/music/8da127cc-c432-418f-b356-ef36210d82ac/musicbanner/twice-58fb678fb1219.jpg",
+							"coverType": "banner",
+							"extension": ".jpg"
+					},
+					{
+							"url": "http://assets.fanart.tv/fanart/music/8da127cc-c432-418f-b356-ef36210d82ac/artistbackground/twice-619421e3c57cc.jpg",
+							"coverType": "fanart",
+							"extension": ".jpg"
+					},
+					{
+							"url": "http://assets.fanart.tv/fanart/music/8da127cc-c432-418f-b356-ef36210d82ac/hdmusiclogo/twice-58d833d0a608a.png",
+							"coverType": "logo",
+							"extension": ".png"
+					},
+					{
+							"url": "http://assets.fanart.tv/fanart/music/8da127cc-c432-418f-b356-ef36210d82ac/artistthumb/twice-58fb69c0c2b00.jpg",
+							"coverType": "poster",
+							"extension": ".jpg"
+					}
+			],
+			"path": "/data/Library/Music/TWICE",
+			"qualityProfileId": 1,
+			"metadataProfileId": 1,
+			"monitored": true,
+			"monitorNewItems": "all",
+			"genres": [
+					"Dance",
+					"Electronica",
+					"K-Pop",
+					"Pop",
+					"R&B"
+			],
+			"cleanName": "twice",
+			"sortName": "twice",
+			"tags": [],
+			"added": "2022-07-30T19:32:06Z",
+			"ratings": {
+					"votes": 4,
+					"value": 9.5
+			},
+			"statistics": {
+					"albumCount": 0,
+					"trackFileCount": 0,
+					"trackCount": 0,
+					"totalTrackCount": 0,
+					"sizeOnDisk": 0,
+					"percentOfTracks": 0
+			},
+			"id": 9
+	},
+	"images": [
+			{
+					"url": "/MediaCover/Albums/32/cover.jpg?lastWrite=637927379160000000",
+					"coverType": "cover",
+					"extension": ".jpg",
+					"remoteUrl": "https://imagecache.lidarr.audio/v1/caa/22bd49a1-f858-427d-94ee-1788b54fb508/32961181216-1200.jpg"
+			}
+	],
+	"links": [],
+	"statistics": {
+			"trackFileCount": 9,
+			"trackCount": 9,
+			"totalTrackCount": 9,
+			"sizeOnDisk": 74968875,
+			"percentOfTracks": 100
+	},
+	"grabbed": false,
+	"id": 32
+}

src/modules/common/examples/request.json

@@ -0,0 +1,47 @@
+{
+	"id": 634649,
+	"mediaType": "movie",
+	"adult": false,
+	"genreIds": [
+		28,
+		12,
+		878
+	],
+	"originalLanguage": "en",
+	"originalTitle": "Spider-Man: No Way Home",
+	"overview": "Après les événements liés à l'affrontement avec Mysterio, l'identité secrète de Spider-Man a été révélée. Il est poursuivi par le gouvernement américain, qui l'accuse du meurtre de Mysterio, et traqué par les médias. Cet événement a également des conséquences terribles sur la vie de sa petite-amie M.J. et de son meilleur ami Ned. Désemparé, Peter Parker demande alors de l'aide au docteur Strange. Ce dernier lance un sort pour que tout le monde oublie que Peter est Spider-Man. Mais les choses ne se passent pas comme prévu, et cette action altère la stabilité de l'espace-temps. Cela ouvre le « multivers », un concept terrifiant dont ils ne savent quasiment rien...",
+	"popularity": 1643.549,
+	"releaseDate": "2021-12-15",
+	"title": "Spider-Man: No Way Home",
+	"video": false,
+	"voteAverage": 8,
+	"voteCount": 14510,
+	"backdropPath": "/ocUp7DJBIc8VJgLEw1prcyK1dYv.jpg",
+	"posterPath": "/3SyG7dq2q0ollxJ4pSsrqcfRmVj.jpg",
+	"mediaInfo": {
+		"downloadStatus": [],
+		"downloadStatus4k": [],
+		"id": 91,
+		"mediaType": "movie",
+		"tmdbId": 634649,
+		"tvdbId": null,
+		"imdbId": null,
+		"status": 5,
+		"status4k": 1,
+		"createdAt": "2021-11-15T15:15:57.000Z",
+		"updatedAt": "2022-08-01T08:40:19.000Z",
+		"lastSeasonChange": "2021-11-15T15:15:57.000Z",
+		"mediaAddedAt": "2021-12-23T12:04:39.000Z",
+		"serviceId": 0,
+		"serviceId4k": null,
+		"externalServiceId": 89,
+		"externalServiceId4k": null,
+		"externalServiceSlug": "634649",
+		"externalServiceSlug4k": null,
+		"ratingKey": "823",
+		"ratingKey4k": null,
+		"seasons": [],
+		"plexUrl": "https://app.plex.tv/desktop#!/server/719240db84d0795f30baa1c7283588fea536bb21/details?key=%2Flibrary%2Fmetadata%2F823",
+		"serviceUrl": "http://radarr:7878/movie/634649"
+	}
+}

src/modules/common/examples/search-response.json

@@ -0,0 +1,490 @@
+{
+	"page": 1,
+	"totalPages": 43,
+	"totalResults": 847,
+	"results": [
+		{
+			"id": 66732,
+			"firstAirDate": "2016-07-15",
+			"genreIds": [
+				18,
+				10765,
+				9648
+			],
+			"mediaType": "tv",
+			"name": "Stranger Things",
+			"originCountry": [
+				"US"
+			],
+			"originalLanguage": "en",
+			"originalName": "Stranger Things",
+			"overview": "Quand un jeune garçon disparaît, une petite ville découvre une affaire mystérieuse, des expériences secrètes, des forces surnaturelles terrifiantes... et une fillette.",
+			"popularity": 1750.831,
+			"voteAverage": 8.6,
+			"voteCount": 12763,
+			"backdropPath": "/56v2KjBlU4XaOv9rVYEQypROD7P.jpg",
+			"posterPath": "/r2w5UNf2mO2Mdl4q6HopuBms6XM.jpg",
+			"mediaInfo": {
+				"downloadStatus": [],
+				"downloadStatus4k": [],
+				"id": 202,
+				"mediaType": "tv",
+				"tmdbId": 66732,
+				"tvdbId": 305288,
+				"imdbId": null,
+				"status": 4,
+				"status4k": 1,
+				"createdAt": "2022-08-01T08:55:00.000Z",
+				"updatedAt": "2022-08-02T02:30:09.000Z",
+				"lastSeasonChange": "2022-08-01T08:55:00.000Z",
+				"mediaAddedAt": "2022-08-01T08:49:00.000Z",
+				"serviceId": 0,
+				"serviceId4k": null,
+				"externalServiceId": 42,
+				"externalServiceId4k": null,
+				"externalServiceSlug": "stranger-things",
+				"externalServiceSlug4k": null,
+				"ratingKey": "2012",
+				"ratingKey4k": null,
+				"seasons": [
+					{
+						"id": 166,
+						"seasonNumber": 1,
+						"status": 3,
+						"status4k": 1,
+						"createdAt": "2022-08-01T08:55:00.000Z",
+						"updatedAt": "2022-08-02T02:30:09.000Z"
+					},
+					{
+						"id": 167,
+						"seasonNumber": 2,
+						"status": 3,
+						"status4k": 1,
+						"createdAt": "2022-08-01T08:55:00.000Z",
+						"updatedAt": "2022-08-02T02:30:09.000Z"
+					},
+					{
+						"id": 168,
+						"seasonNumber": 3,
+						"status": 3,
+						"status4k": 1,
+						"createdAt": "2022-08-01T08:55:00.000Z",
+						"updatedAt": "2022-08-02T02:30:09.000Z"
+					},
+					{
+						"id": 169,
+						"seasonNumber": 4,
+						"status": 5,
+						"status4k": 1,
+						"createdAt": "2022-08-01T08:55:00.000Z",
+						"updatedAt": "2022-08-01T08:55:00.000Z"
+					}
+				],
+				"plexUrl": "https://app.plex.tv/desktop#!/server/719240db84d0795f30baa1c7283588fea536bb21/details?key=%2Flibrary%2Fmetadata%2F2012",
+				"serviceUrl": "http://sonarr:8989/series/stranger-things"
+			}
+		},
+		{
+			"id": 74851,
+			"firstAirDate": "2017-10-27",
+			"genreIds": [
+				10767
+			],
+			"mediaType": "tv",
+			"name": "Beyond Stranger Things",
+			"originCountry": [
+				"US"
+			],
+			"originalLanguage": "en",
+			"originalName": "Beyond Stranger Things",
+			"overview": "Les secrets de l'univers de \"Stranger Things 2\" sont révélés tandis que comédiens et artistes invités évoquent les derniers épisodes avec Jim Rash. Attention, spoilers !",
+			"popularity": 72.277,
+			"voteAverage": 7.5,
+			"voteCount": 74,
+			"backdropPath": "/qevaCqIekzc7Bp5f2kGAi92kO39.jpg",
+			"posterPath": "/rHCFO8RJ3Hg6a8KjWAsvAsa38hp.jpg"
+		},
+		{
+			"id": 182026,
+			"mediaType": "movie",
+			"adult": false,
+			"genreIds": [
+				18
+			],
+			"originalLanguage": "en",
+			"originalTitle": "Stranger Things",
+			"overview": "",
+			"popularity": 76.465,
+			"releaseDate": "2013-04-05",
+			"title": "Stranger Things",
+			"video": false,
+			"voteAverage": 8.6,
+			"voteCount": 51,
+			"backdropPath": null,
+			"posterPath": "/4TKdguyacjYrC1Hnbi3PjSP8r3M.jpg"
+		},
+		{
+			"id": 1865,
+			"mediaType": "movie",
+			"adult": false,
+			"genreIds": [
+				12,
+				28,
+				14
+			],
+			"originalLanguage": "en",
+			"originalTitle": "Pirates of the Caribbean: On Stranger Tides",
+			"overview": "Dans cette histoire pleine d’action, où vérité, trahison, jeunesse éternelle et mort forment un cocktail explosif, le capitaine Jack Sparrow retrouve une femme qu’il a connu autrefois. Leurs liens sont‐ils faits d’amour ou, cette femme n’est‐elle qu’une aventurière sans scrupules qui cherche à l’utiliser pour découvrir la légendaire Fontaine de Jouvence ? Lorsqu’elle l’oblige à embarquer à bord du Queen Anne’s Revenge, le bateau du terrible pirate Barbe‐Noire, Jack ne sait plus ce qu’il doit craindre le plus : Le redoutable maître du bateau ou cette femme surgit de son passé…",
+			"popularity": 251.27,
+			"releaseDate": "2011-05-14",
+			"title": "Pirates des Caraïbes : La Fontaine de jouvence",
+			"video": false,
+			"voteAverage": 6.5,
+			"voteCount": 12180,
+			"backdropPath": "/uzIGtyS6bbnJzGsPL93WCF1FWm8.jpg",
+			"posterPath": "/5JjjjGg24IGRXIQtaZkPU59acjV.jpg"
+		},
+		{
+			"id": 96608,
+			"firstAirDate": "2020-01-30",
+			"genreIds": [
+				9648,
+				80
+			],
+			"mediaType": "tv",
+			"name": "Intimidation",
+			"originCountry": [
+				"GB"
+			],
+			"originalLanguage": "en",
+			"originalName": "The Stranger",
+			"overview": "Adam Price mène une vie idyllique : il a un bon travail, deux fils merveilleux et son mariage semble sans faille. Mais son bonheur va soudainement voler en éclats lorsque « The Stranger » dévoile un secret choquant au sujet de sa femme.",
+			"popularity": 15.11,
+			"voteAverage": 7.4,
+			"voteCount": 283,
+			"backdropPath": "/97pA0UjBqqgcZFbREQL3U1BQDgX.jpg",
+			"posterPath": "/y9mX3A3O4SxffDIAlK8Li8AL8BD.jpg"
+		},
+		{
+			"id": 7183,
+			"mediaType": "movie",
+			"adult": false,
+			"genreIds": [
+				53
+			],
+			"originalLanguage": "en",
+			"originalTitle": "Perfect Stranger",
+			"overview": "Rowena est une journaliste d'investigation. Lorsqu'elle découvre que Harrison Hill, le très puissant publicitaire, est peut-être lié au meurtre de son amie, elle décide de mener son enquête. Pour se faire et l'approcher, elle va endosser deux identités, celle de Katherine, une intérimaire employée de sa société et Veronica, une jeune femme avec laquelle Hill flirte sur internet.",
+			"popularity": 20.863,
+			"releaseDate": "2007-04-11",
+			"title": "Dangereuse séduction",
+			"video": false,
+			"voteAverage": 5.8,
+			"voteCount": 756,
+			"backdropPath": "/sG7flxRI3ujV5t2scYpbmREVQbv.jpg",
+			"posterPath": "/jpQoXiLjTN8uqU9Ym9TMaz2D9aS.jpg"
+		},
+		{
+			"id": 99282,
+			"firstAirDate": "2020-04-13",
+			"genreIds": [
+				18,
+				9648,
+				80
+			],
+			"mediaType": "tv",
+			"name": "The Stranger",
+			"originCountry": [
+				"US"
+			],
+			"originalLanguage": "en",
+			"originalName": "The Stranger",
+			"overview": "Un jeune conducteur sans scrupule prend un mystérieux passager d'Hollywood Hills. Sur 12 heures, les deux hommes naviguent dans les bas-fonds sordides de Los Angeles...",
+			"popularity": 7.158,
+			"voteAverage": 7.5,
+			"voteCount": 25,
+			"backdropPath": "/g8n6jB5Mkn6FUGQ5MbqEMIHrZba.jpg",
+			"posterPath": "/4KrCPwB6yNBR8Chg5quigrrUFCD.jpg"
+		},
+		{
+			"id": 10053,
+			"mediaType": "movie",
+			"adult": false,
+			"genreIds": [
+				27,
+				9648
+			],
+			"originalLanguage": "en",
+			"originalTitle": "When a Stranger Calls",
+			"overview": "Alors qu'elle garde des enfants, une étudiante est terrorisée par un homme qui la harcèle au téléphone en lui demandant si elle a bien vérifié que tout était normal avec les petits dont elle a la charge. Les policiers qu'elle a appelés finissent par localiser les appels et l'informent que ceux-ci proviennent de la maison où elle se trouve...",
+			"popularity": 18.475,
+			"releaseDate": "2006-02-03",
+			"title": "Terreur sur la Ligne",
+			"video": false,
+			"voteAverage": 5.7,
+			"voteCount": 873,
+			"backdropPath": "/lF3ojoSmCZgrh9nyy2lOxoWL7KD.jpg",
+			"posterPath": "/xva4IuEfaT6c8tZLpNK2LKCtNGf.jpg"
+		},
+		{
+			"id": 291151,
+			"mediaType": "movie",
+			"adult": false,
+			"genreIds": [
+				53,
+				27,
+				9648
+			],
+			"originalLanguage": "en",
+			"originalTitle": "The Stranger",
+			"overview": "Un homme mystérieux à la recherche de sa femme arrive dans une petite ville du Canada,  sa présence va quelque peu bouleverser l'apparente tranquillité qui y règne.",
+			"popularity": 7.932,
+			"releaseDate": "2014-06-12",
+			"title": "The Stranger",
+			"video": false,
+			"voteAverage": 4.7,
+			"voteCount": 77,
+			"backdropPath": "/plTx6iHNbLxNXKL4swZxl4RVT2w.jpg",
+			"posterPath": "/8YjSy1vG4yuuatgdAU1NbitA52F.jpg"
+		},
+		{
+			"id": 1262,
+			"mediaType": "movie",
+			"adult": false,
+			"genreIds": [
+				35,
+				18,
+				14,
+				10749
+			],
+			"originalLanguage": "en",
+			"originalTitle": "Stranger Than Fiction",
+			"overview": "Un beau matin, Harold Crick, un obscur fonctionnaire du fisc, entend soudain une voix de femme qui se met à commenter tout ce qu'il vit, y compris ses pensées les plus intimes. Pour Harold, c'est un cauchemar qui dérègle sa vie parfaitement agencée, mais cela devient encore plus grave lorsque la voix annonce qu'il va bientôt mourir...Harold découvre que cette voix est celle d'une romancière, Karen Eiffel, qui s'efforce désespérément d'écrire la fin de ce qui pourrait être son meilleur livre. Il ne lui reste plus qu'à trouver comment tuer son personnage principal : Harold ! Elle ignore que celui-ci existe, qu'il entend ses mots et connaît le sort qu'elle lui réserve...Pour s'en sortir vivant, Harold doit changer son destin. Sa seule chance est de devenir un personnage de comédie, puisque ceux-ci ne sont jamais tués...",
+			"popularity": 12.475,
+			"releaseDate": "2006-09-09",
+			"title": "L'Incroyable Destin de Harold Crick",
+			"video": false,
+			"voteAverage": 7.3,
+			"voteCount": 1875,
+			"backdropPath": "/d9eONXYtCmQnPWw61w9pNMGlSzK.jpg",
+			"posterPath": "/hZpCDBXmKqDBBonBKGAcZ95Qmvi.jpg"
+		},
+		{
+			"id": 87692,
+			"firstAirDate": "2019-04-06",
+			"genreIds": [
+				16,
+				35,
+				10765
+			],
+			"mediaType": "tv",
+			"name": "Chou Kadou Girl",
+			"originCountry": [
+				"JP"
+			],
+			"originalLanguage": "ja",
+			"originalName": "超可動ガール⅙ AMAZING STRANGER",
+			"overview": "Haruto est un otaku qui ne s'intéresse pas aux (vraies) filles en 3D ! Un jour, sa dernière acquisition, une figurine de son héroïne préférée Nona, se met à bouger toute seule. Ainsi commence la drôle de vie conjugale entre un otaku et un robot...",
+			"popularity": 11.422,
+			"voteAverage": 6.4,
+			"voteCount": 5,
+			"backdropPath": "/yl4Ltag61cTv0XtwbwMpvzxt7ov.jpg",
+			"posterPath": "/pPxakEs1TP6JhclPceGxHBoE8Ey.jpg"
+		},
+		{
+			"id": 455108,
+			"mediaType": "movie",
+			"adult": false,
+			"genreIds": [
+				9648,
+				18,
+				27,
+				36
+			],
+			"originalLanguage": "en",
+			"originalTitle": "The Little Stranger",
+			"overview": "Fils d’une modeste domestique, le docteur Faraday s’est construit une existence tranquille et respectable en devenant médecin de campagne. En 1947, lors d’un été particulièrement long et chaud, il est appelé au chevet d’une patiente à Hundreds Hall, où sa mère fut employée autrefois. Le domaine, qui appartient depuis plus de deux siècles à la famille Ayres, est aujourd’hui en piteux état, et ses habitants – la mère, son fils et sa fille – sont hantés par quelque chose de bien plus effrayant encore que le déclin de leurs finances. Faraday ne s’imagine pas à quel point le destin de cette famille et le sien sont liés, ni ce que cela a de terrifiant…",
+			"popularity": 12.538,
+			"releaseDate": "2018-08-30",
+			"title": "The Little Stranger",
+			"video": false,
+			"voteAverage": 5.7,
+			"voteCount": 216,
+			"backdropPath": "/eyrUZ6jvg1Qy3jUz5YH8U4UkFLP.jpg",
+			"posterPath": "/qm1KJU9coK2voDIFD6AUvSgVG56.jpg"
+		},
+		{
+			"id": 38166,
+			"mediaType": "movie",
+			"adult": false,
+			"genreIds": [
+				28,
+				18,
+				53,
+				9648
+			],
+			"originalLanguage": "en",
+			"originalTitle": "The Stranger",
+			"overview": "Un agent du F.B.I poursuit le témoin matériel d'une enquête classée secret défense.",
+			"popularity": 6.555,
+			"releaseDate": "2010-06-01",
+			"title": "The Stranger",
+			"video": false,
+			"voteAverage": 4.9,
+			"voteCount": 57,
+			"backdropPath": "/kjFC8S6y9wKiRXRpOPwQQu6e9cJ.jpg",
+			"posterPath": "/fXg4MXYruDKrssFmfzKlf2TINJb.jpg"
+		},
+		{
+			"id": 20246,
+			"mediaType": "movie",
+			"adult": false,
+			"genreIds": [
+				80,
+				18,
+				9648,
+				53
+			],
+			"originalLanguage": "en",
+			"originalTitle": "The Stranger",
+			"overview": "L'inspecteur Wilson, de la commission contre les crimes de guerre, décide de relâcher un ancien chef de camp d'extermination nazi, dans l'espoir qu'il le conduira jusqu'à son supérieur, Franz Kindler. L'Allemand, qui circule sous un nom d'emprunt, se rend dans la petite ville de Harper. L'inspecteur le suit. Se sachant surveillé, l'ex-détenu attire le policier dans le gymnase de l'école. Là, il l'assomme et se précipite dans la maison voisine, qui n'est autre que celle de Franz Kindler, aujourd'hui professeur dans ce collège, pour le prévenir de l'arrivée de la police…",
+			"popularity": 7.449,
+			"releaseDate": "1946-07-02",
+			"title": "Le Criminel",
+			"video": false,
+			"voteAverage": 7.3,
+			"voteCount": 449,
+			"backdropPath": "/eewSm2QKPMueCM3ix5r3aE5eIur.jpg",
+			"posterPath": "/ee3F8CvNMSJZvYiwW2DKSvU9rQj.jpg"
+		},
+		{
+			"id": 469,
+			"mediaType": "movie",
+			"adult": false,
+			"genreIds": [
+				35,
+				18
+			],
+			"originalLanguage": "en",
+			"originalTitle": "Stranger Than Paradise",
+			"overview": "Eva, 16 ans, quitte la Hongrie et retrouve son cousin Willie, installé depuis 10 ans aux États-Unis. Inadaptés à cette terre de désillusions, ils partent de Miami découvrir le paradis de la Floride, royaume du jeu et dernier espoir d'un exil douloureux.",
+			"popularity": 9.713,
+			"releaseDate": "1984-10-01",
+			"title": "Stranger Than Paradise",
+			"video": false,
+			"voteAverage": 7.2,
+			"voteCount": 394,
+			"backdropPath": "/tAEV7htL9Yi0hMHtxlv2VAm9Rbe.jpg",
+			"posterPath": "/fxlMexOi2D64ugS07Sv2hJZYM3R.jpg"
+		},
+		{
+			"id": 45964,
+			"mediaType": "movie",
+			"adult": false,
+			"genreIds": [
+				27,
+				53,
+				18,
+				80,
+				9648
+			],
+			"originalLanguage": "en",
+			"originalTitle": "When a Stranger Calls",
+			"overview": "Au cours d’une nuit où elle garde les enfants d’un couple marié, une baby-sitter se fait harceler au téléphone par un inconnu qui lui pose systématiquement la même question : « êtes-vous allée voir les enfants ? ». De plus en plus inquiète à mesure que les appels se succèdent, la jeune femme décide de contacter la police.",
+			"popularity": 9.731,
+			"releaseDate": "1979-10-26",
+			"title": "Terreur sur la ligne",
+			"video": false,
+			"voteAverage": 6.2,
+			"voteCount": 178,
+			"backdropPath": "/3dK12SaczU7Tf8btq7K2F5HQg6F.jpg",
+			"posterPath": "/x4d8XUXbWLjiro51iQ2qiFhT6t4.jpg"
+		},
+		{
+			"id": 105024,
+			"firstAirDate": "2020-06-24",
+			"genreIds": [
+				35,
+				18
+			],
+			"mediaType": "tv",
+			"name": "Hello, Stranger",
+			"originCountry": [
+				"PH"
+			],
+			"originalLanguage": "tl",
+			"originalName": "Hello, Stranger",
+			"overview": "",
+			"popularity": 3.554,
+			"voteAverage": 7.3,
+			"voteCount": 3,
+			"backdropPath": "/8uXYX9F92gc0RlVlTEYVrze83fo.jpg",
+			"posterPath": "/uu8yWT64FP0W39whxIcs2aMv1Wb.jpg"
+		},
+		{
+			"id": 618352,
+			"mediaType": "movie",
+			"adult": false,
+			"genreIds": [
+				16,
+				28,
+				27,
+				14
+			],
+			"originalLanguage": "en",
+			"originalTitle": "DC Showcase: The Phantom Stranger",
+			"overview": "L'histoire se situe dans les années 1970, quand une jeune femme du nom de Jess et ses amis se rendent à une soirée dans un vieux manoir qui appartient à un certain Seth, les choses tournent au vinaigre, le Phantom Stranger arrivera pour leur porter secours.",
+			"popularity": 8.072,
+			"releaseDate": "2020-02-25",
+			"title": "DC Showcase: The Phantom Stranger",
+			"video": false,
+			"voteAverage": 7.5,
+			"voteCount": 49,
+			"backdropPath": "/vQkGZ0u9E8PgBbjg8vo61KHxQDc.jpg",
+			"posterPath": "/tqcL1YEiGUKsW1Ofka59m4MIKr1.jpg"
+		},
+		{
+			"id": 413852,
+			"mediaType": "movie",
+			"adult": false,
+			"genreIds": [
+				18,
+				9648,
+				53,
+				878
+			],
+			"originalLanguage": "en",
+			"originalTitle": "Welcome the Stranger",
+			"overview": "Alice arrive inopinément chez son frère, Ethan, en espérant se réconcilier avec lui. D'étranges visions et le retour de la petite amie d'Ethan perturbent son projet...",
+			"popularity": 5.994,
+			"releaseDate": "2018-03-20",
+			"title": "Welcome the Stranger",
+			"video": false,
+			"voteAverage": 5,
+			"voteCount": 33,
+			"backdropPath": "/51aiE8fEXchmbLIyX7Smm3zJavV.jpg",
+			"posterPath": "/fZch4FhfexA18gUUQjHXKnLmkjh.jpg"
+		},
+		{
+			"id": 41670,
+			"mediaType": "movie",
+			"adult": false,
+			"genreIds": [
+				18,
+				10749,
+				80
+			],
+			"originalLanguage": "en",
+			"originalTitle": "A Stranger Among Us",
+			"overview": "Chargée d'enquêter sur un meurtre au sein de la communauté hassidique de la ville de New-York, la détective Emily Eden parvient à se faire accepter au sein de cette secte si hermétique.",
+			"popularity": 7.016,
+			"releaseDate": "1992-07-17",
+			"title": "Une étrangère parmi nous",
+			"video": false,
+			"voteAverage": 5.7,
+			"voteCount": 71,
+			"backdropPath": "/hL0hkMFGWgOvC0P4le6gzRzwa62.jpg",
+			"posterPath": "/rvk00cSV6cGWQQIppEPYLnDebQ1.jpg"
+		}
+	]
+}

src/modules/common/examples/tvshow.json

@@ -0,0 +1,110 @@
+{
+	"seriesId": 37,
+	"episodeFileId": 7387,
+	"seasonNumber": 1,
+	"episodeNumber": 4,
+	"title": "Part IV",
+	"airDate": "2022-06-08",
+	"airDateUtc": "2022-06-08T07:00:00Z",
+	"overview": "Obi-Wan Kenobi plots a daring mission into enemy territory.",
+	"episodeFile": {
+		"seriesId": 37,
+		"seasonNumber": 1,
+		"relativePath": "Season 1/Obi-Wan.Kenobi.S01E04.1080p.WEB.h264-KOGi[rartv].mkv",
+		"path": "/tv/Obi-Wan Kenobi/Season 1/Obi-Wan.Kenobi.S01E04.1080p.WEB.h264-KOGi[rartv].mkv",
+		"size": 1893191174,
+		"dateAdded": "2022-06-08T07:32:27.158296Z",
+		"sceneName": "Obi-Wan.Kenobi.S01E04.1080p.WEB.h264-KOGi[rartv]",
+		"quality": {
+			"quality": {
+				"id": 3,
+				"name": "WEBDL-1080p",
+				"source": "web",
+				"resolution": 1080
+			},
+			"revision": {
+				"version": 1,
+				"real": 0,
+				"isRepack": false
+			}
+		},
+		"language": {
+			"id": 1,
+			"name": "English"
+		},
+		"mediaInfo": {
+			"audioChannels": 5.1,
+			"audioCodec": "EAC3 Atmos",
+			"videoCodec": "h264"
+		},
+		"originalFilePath": "Obi-Wan.Kenobi.S01E04.1080p.WEB.h264-KOGi[rarbg]/Obi-Wan.Kenobi.S01E04.1080p.WEB.h264-KOGi.mkv",
+		"qualityCutoffNotMet": false,
+		"id": 7387
+	},
+	"hasFile": true,
+	"monitored": true,
+	"unverifiedSceneNumbering": false,
+	"series": {
+		"title": "Obi-Wan Kenobi",
+		"sortTitle": "obiwan kenobi",
+		"seasonCount": 1,
+		"status": "ended",
+		"overview": "During the reign of the Empire, Obi-Wan Kenobi embarks on a crucial mission.",
+		"network": "Disney+",
+		"airTime": "03:00",
+		"images": [
+			{
+				"coverType": "banner",
+				"url": "https://artworks.thetvdb.com/banners/v4/series/393199/banners/6290d38b8c283.jpg"
+			},
+			{
+				"coverType": "poster",
+				"url": "https://artworks.thetvdb.com/banners/v4/series/393199/posters/629668351aca3.jpg"
+			},
+			{
+				"coverType": "fanart",
+				"url": "https://artworks.thetvdb.com/banners/v4/series/393199/backgrounds/62912a0fe623d.jpg"
+			}
+		],
+		"seasons": [
+			{
+				"seasonNumber": 1,
+				"monitored": true
+			}
+		],
+		"year": 2022,
+		"path": "/tv/Obi-Wan Kenobi",
+		"profileId": 1,
+		"languageProfileId": 1,
+		"seasonFolder": true,
+		"monitored": true,
+		"useSceneNumbering": false,
+		"runtime": 39,
+		"tvdbId": 393199,
+		"tvRageId": 0,
+		"tvMazeId": 52260,
+		"firstAired": "2022-05-27T00:00:00Z",
+		"lastInfoSync": "2022-07-22T03:36:34.392414Z",
+		"seriesType": "standard",
+		"cleanTitle": "obiwankenobi",
+		"imdbId": "tt8466564",
+		"titleSlug": "obi-wan-kenobi",
+		"certification": "TV-14",
+		"genres": [
+			"Action",
+			"Adventure",
+			"Fantasy",
+			"Mini-Series",
+			"Science Fiction"
+		],
+		"tags": [],
+		"added": "2022-05-03T20:22:10.47688Z",
+		"ratings": {
+			"votes": 0,
+			"value": 0
+		},
+		"qualityProfileId": 1,
+		"id": 37
+	},
+	"id": 1407
+}

src/modules/common/index.ts

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

src/modules/dashdot/DashdotModule.tsx

@@ -0,0 +1,246 @@
+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 '../ModuleTypes';
+
+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'],
+    },
+    url: {
+      name: 'Dash. URL',
+      value: '',
+    },
+  },
+});
+
+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 = (targetUrl: string, url: string) => {
+  const [data, setData] = useState<any | undefined>();
+
+  const doRequest = async () => {
+    try {
+      const resp = await axios.get(`/api/modules/dashdot?url=${url}&base=${targetUrl}`);
+
+      setData(resp.data);
+      // eslint-disable-next-line no-empty
+    } catch (e) {}
+  };
+
+  useEffect(() => {
+    if (targetUrl) {
+      doRequest();
+    }
+  }, [targetUrl]);
+
+  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: serviceItem | undefined = config.services.filter(
+    (service) => service.type === 'Dash.'
+  )[0];
+  const dashdotUrl = dashdotService?.url ?? dashConfig?.url?.value ?? '';
+  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(dashdotUrl, '/info');
+  const storageLoad = useJson(dashdotUrl, '/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);
+
+  if (dashdotUrl === '') {
+    return (
+      <div>
+        <h2 className={classes.heading}>Dash.</h2>
+        <p>
+          No dash. service found. Please add one to your Homarr dashboard or set a dashdot URL in
+          the module options
+        </p>
+      </div>
+    );
+  }
+
+  return (
+    <div>
+      <h2 className={classes.heading}>Dash.</h2>
+
+      {!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={`${dashdotUrl}?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"
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

src/modules/dashdot/index.ts

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

src/modules/date/DateModule.tsx

@@ -0,0 +1,42 @@
+import { Group, Text, Title } from '@mantine/core';
+import dayjs from 'dayjs';
+import { useEffect, useState } from 'react';
+import { IconClock as Clock } from '@tabler/icons';
+import { useConfig } from '../../tools/state';
+import { IModule } from '../ModuleTypes';
+import { useSetSafeInterval } from '../../tools/hooks/useSetSafeInterval';
+
+export const DateModule: IModule = {
+  title: 'Date',
+  description: 'Show the current time and date in a card',
+  icon: Clock,
+  component: DateComponent,
+  options: {
+    full: {
+      name: 'Display full time (24-hour)',
+      value: true,
+    },
+  },
+};
+
+export default function DateComponent(props: any) {
+  const [date, setDate] = useState(new Date());
+  const setSafeInterval = useSetSafeInterval();
+  const { config } = useConfig();
+  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(() => {
+    setSafeInterval(() => {
+      setDate(new Date());
+    }, 1000 * 60);
+  }, []);
+
+  return (
+    <Group p="sm" spacing="xs">
+      <Title>{dayjs(date).format(formatString)}</Title>
+      <Text size="lg">{dayjs(date).format('dddd, MMMM D')}</Text>
+    </Group>
+  );
+}

src/modules/docker/ContainerActionBar.tsx

@@ -0,0 +1,164 @@
+import { Button, Group, Modal, Title } from '@mantine/core';
+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 '../../components/AppShelf/AddAppShelfItem';
+import { useState } from 'react';
+
+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] = useState<boolean>(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/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/modules/docker/DockerModule.tsx

@@ -0,0 +1,83 @@
+import { ActionIcon, Drawer, Group, LoadingOverlay, Text, Tooltip } 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 '../ModuleTypes';
+
+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 { config } = useConfig();
+  const moduleEnabled = config.modules?.[DockerModule.title]?.enabled ?? false;
+
+  useEffect(() => {
+    reload();
+  }, [config.modules]);
+
+  function reload() {
+    if (!moduleEnabled) {
+      return;
+    }
+    setTimeout(() => {
+      axios
+        .get('/api/docker/containers')
+        .then((res) => {
+          setContainers(res.data);
+          setSelection([]);
+        })
+        .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"
+        title={<ContainerActionBar selected={selection} reload={reload} />}
+      >
+        <DockerTable containers={containers} selection={selection} setSelection={setSelection} />
+      </Drawer>
+      <Tooltip label="Docker">
+        <ActionIcon
+          variant="default"
+          radius="md"
+          size="xl"
+          color="blue"
+          onClick={() => setOpened(true)}
+        >
+          <IconBrandDocker />
+        </ActionIcon>
+      </Tooltip>
+    </>
+  );
+}

src/modules/docker/DockerTable.tsx

@@ -0,0 +1,124 @@
+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">
+        <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/modules/docker/index.ts

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

src/modules/downloads/DownloadsModule.tsx

@@ -0,0 +1,203 @@
+import {
+  Table,
+  Text,
+  Tooltip,
+  Title,
+  Group,
+  Progress,
+  Skeleton,
+  ScrollArea,
+  Center,
+} 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 '../ModuleTypes';
+import { useConfig } from '../../tools/state';
+import { AddItemShelfButton } from '../../components/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>
+        <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>
+      );
+    });
+
+  return (
+    <ScrollArea mt="xl" sx={{ height: 300, width: '100%' }}>
+      {rows.length > 0 ? (
+        <Table highlightOnHover>
+          <thead>{ths}</thead>
+          <tbody>{rows}</tbody>
+        </Table>
+      ) : (
+        <Center style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+          <Title order={3}>No torrents found</Title>
+        </Center>
+      )}
+    </ScrollArea>
+  );
+}

src/modules/downloads/TotalDownloadsModule.tsx

@@ -0,0 +1,191 @@
+import { Text, Title, Group, useMantineTheme, Box, Card, ColorSwatch, Stack } 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 '../../components/AppShelf/AddAppShelfItem';
+import { useConfig } from '../../tools/state';
+import { humanFileSize } from '../../tools/humanFileSize';
+import { IModule } from '../ModuleTypes';
+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(() => {
+    if (downloadServices.length === 0) return;
+    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>
+        <Title order={4}>No supported download clients found!</Title>
+        <div>
+          <AddItemShelfButton
+            style={{
+              float: 'inline-end',
+            }}
+          />
+          Add a download service to view your current downloads
+        </div>
+      </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 (
+    <Stack>
+      <Title order={4}>Current download speed</Title>
+      <Stack>
+        <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>
+      </Stack>
+      <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">
+                  <Stack>
+                    <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>
+                  </Stack>
+                </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>
+    </Stack>
+  );
+}

src/modules/downloads/index.ts

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

src/modules/index.ts

@@ -0,0 +1,9 @@
+export * from './calendar';
+export * from './dashdot';
+export * from './date';
+export * from './downloads';
+export * from './ping';
+export * from './search';
+export * from './weather';
+export * from './docker';
+export * from './overseerr';

src/modules/moduleWrapper.tsx

@@ -0,0 +1,229 @@
+import {
+  ActionIcon,
+  Button,
+  Card,
+  Group,
+  Menu,
+  MultiSelect,
+  Switch,
+  TextInput,
+  useMantineColorScheme,
+} from '@mantine/core';
+import { IconAdjustments } from '@tabler/icons';
+import { motion } from 'framer-motion';
+import { useState } from 'react';
+import { useConfig } from '../tools/state';
+import { IModule } from './ModuleTypes';
+
+function getItems(module: IModule) {
+  const { config, setConfig } = useConfig();
+  const items: JSX.Element[] = [];
+  if (module.options) {
+    const keys = Object.keys(module.options);
+    const values = Object.values(module.options);
+    // Get the value and the name of the option
+    const types = values.map((v) => typeof v.value);
+    // Loop over all the types with a for each loop
+    types.forEach((type, index) => {
+      const optionName = `${module.title}.${keys[index]}`;
+      const moduleInConfig = config.modules?.[module.title];
+      if (type === '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">
+              <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 as boolean) ??
+              (values[index].value as boolean) ??
+              false
+            }
+            key={keys[index]}
+            onClick={(e) => {
+              setConfig({
+                ...config,
+                modules: {
+                  ...config.modules,
+                  [module.title]: {
+                    ...config.modules[module.title],
+                    options: {
+                      ...config.modules[module.title].options,
+                      [keys[index]]: {
+                        ...config.modules[module.title].options?.[keys[index]],
+                        value: e.currentTarget.checked,
+                      },
+                    },
+                  },
+                },
+              });
+            }}
+            label={values[index].name}
+          />
+        );
+      }
+    });
+  }
+  return items;
+}
+
+export function ModuleWrapper(props: any) {
+  const { module }: { module: IModule } = props;
+  const { colorScheme } = useMantineColorScheme();
+  const { config, setConfig } = useConfig();
+  const enabledModules = config.modules ?? {};
+  // Remove 'Module' from enabled modules titles
+  const isShown = enabledModules[module.title]?.enabled ?? false;
+  //TODO: fix the hover problem
+  const [hovering, setHovering] = useState(false);
+
+  if (!isShown) {
+    return null;
+  }
+
+  return (
+    <Card
+      {...props}
+      key={module.title}
+      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}`,
+      }}
+    >
+      <motion.div
+        onHoverStart={() => {
+          setHovering(true);
+        }}
+        onHoverEnd={() => {
+          setHovering(false);
+        }}
+      >
+        <ModuleMenu module={module} hovered={hovering} />
+        <module.component />
+      </motion.div>
+    </Card>
+  );
+}
+
+export function ModuleMenu(props: any) {
+  const { module, styles, hovered } = props;
+  const items: JSX.Element[] = getItems(module);
+  return (
+    <>
+      {module.options && (
+        <Menu
+          key={module.title}
+          withinPortal
+          width="lg"
+          shadow="xl"
+          withArrow
+          closeOnItemClick={false}
+          radius="md"
+          position="left"
+        >
+          <Menu.Target>
+            <motion.div
+              style={{
+                position: 'absolute',
+                top: 15,
+                right: 15,
+                alignSelf: 'flex-end',
+              }}
+              animate={{
+                opacity: hovered === true ? 1 : 0,
+              }}
+            >
+              <ActionIcon>
+                <IconAdjustments />
+              </ActionIcon>
+            </motion.div>
+          </Menu.Target>
+          <Menu.Dropdown>
+            <Menu.Label>Settings</Menu.Label>
+            {items.map((item) => (
+              <Menu.Item key={item.key}>{item}</Menu.Item>
+            ))}
+          </Menu.Dropdown>
+        </Menu>
+      )}
+    </>
+  );
+}

src/modules/overseerr/Movie.d.ts

@@ -0,0 +1,248 @@
+export interface MovieResult {
+  id: number;
+  adult: boolean;
+  budget: number;
+  genres: Genre[];
+  relatedVideos: RelatedVideo[];
+  originalLanguage: string;
+  originalTitle: string;
+  popularity: number;
+  productionCompanies: ProductionCompany[];
+  productionCountries: ProductionCountry[];
+  releaseDate: Date;
+  releases: Releases;
+  revenue: number;
+  spokenLanguages: SpokenLanguage[];
+  status: string;
+  title: string;
+  video: boolean;
+  voteAverage: number;
+  voteCount: number;
+  backdropPath: string;
+  homepage: string;
+  imdbId: string;
+  overview: string;
+  posterPath: string;
+  runtime: number;
+  tagline: string;
+  credits: Credits;
+  collection: Collection;
+  externalIds: ExternalIDS;
+  mediaInfo: Media;
+  watchProviders: WatchProvider[];
+}
+
+export interface Collection {
+  id: number;
+  name: string;
+  posterPath: string;
+  backdropPath: string;
+}
+
+export interface Credits {
+  cast: Cast[];
+  crew: Crew[];
+}
+
+export interface Cast {
+  castId: number;
+  character: string;
+  creditId: string;
+  id: number;
+  name: string;
+  order: number;
+  gender: number;
+  profilePath: null | string;
+}
+
+export interface Crew {
+  creditId: string;
+  department: Department;
+  id: number;
+  job: string;
+  name: string;
+  gender: number;
+  profilePath: null | string;
+}
+
+export enum Department {
+  Art = 'Art',
+  Camera = 'Camera',
+  CostumeMakeUp = 'Costume & Make-Up',
+  Crew = 'Crew',
+  Directing = 'Directing',
+  Editing = 'Editing',
+  Production = 'Production',
+  Sound = 'Sound',
+  VisualEffects = 'Visual Effects',
+  Writing = 'Writing',
+}
+
+export interface ExternalIDS {
+  facebookId: string;
+  imdbId: string;
+  instagramId: string;
+  twitterId: string;
+}
+
+export interface Genre {
+  id: number;
+  name: string;
+}
+
+export interface Request {
+  id: number;
+  status: number;
+  createdAt: Date;
+  updatedAt: Date;
+  type: string;
+  is4k: boolean;
+  serverId: number;
+  profileId: number;
+  rootFolder: string;
+  languageProfileId: null;
+  tags: any[];
+  media: Media;
+  requestedBy: EdBy;
+  modifiedBy: EdBy;
+  seasons: any[];
+  seasonCount: number;
+}
+
+export interface Media {
+  downloadStatus: any[];
+  downloadStatus4k: any[];
+  id: number;
+  mediaType: string;
+  tmdbId: number;
+  tvdbId: null;
+  imdbId: null;
+  status: number;
+  status4k: number;
+  createdAt: Date;
+  updatedAt: Date;
+  lastSeasonChange: Date;
+  mediaAddedAt: Date;
+  serviceId: number;
+  serviceId4k: null;
+  externalServiceId: number;
+  externalServiceId4k: null;
+  externalServiceSlug: string;
+  externalServiceSlug4k: null;
+  ratingKey: string;
+  ratingKey4k: null;
+  requests?: Request[];
+  issues?: any[];
+  seasons: any[];
+  plexUrl: string;
+  serviceUrl: string;
+}
+
+export interface EdBy {
+  permissions: number;
+  id: number;
+  email: string;
+  plexUsername: string;
+  username: string;
+  recoveryLinkExpirationDate: null;
+  userType: number;
+  avatar: string;
+  movieQuotaLimit: null;
+  movieQuotaDays: null;
+  tvQuotaLimit: null;
+  tvQuotaDays: null;
+  createdAt: Date;
+  updatedAt: Date;
+  settings: Settings;
+  requestCount: number;
+  displayName: string;
+}
+
+export interface Settings {
+  id: number;
+  locale: string;
+  region: string;
+  originalLanguage: null;
+  pgpKey: null;
+  discordId: string;
+  pushbulletAccessToken: null;
+  pushoverApplicationToken: null;
+  pushoverUserKey: null;
+  telegramChatId: null;
+  telegramSendSilently: null;
+  notificationTypes: NotificationTypes;
+}
+
+export interface NotificationTypes {
+  discord: number;
+  email: number;
+  webpush: number;
+}
+
+export interface ProductionCompany {
+  id: number;
+  name: string;
+  originCountry?: string;
+  logoPath: string;
+  displayPriority?: number;
+}
+
+export interface ProductionCountry {
+  iso_3166_1: string;
+  name: string;
+}
+
+export interface RelatedVideo {
+  site: string;
+  key: string;
+  name: string;
+  size: number;
+  type: string;
+  url: string;
+}
+
+export interface Releases {
+  results: Result[];
+}
+
+export interface Result {
+  iso_3166_1: string;
+  release_dates: ReleaseDate[];
+}
+
+export interface ReleaseDate {
+  certification: string;
+  iso_639_1: ISO639_1 | null;
+  note: Note;
+  release_date: Date;
+  type: number;
+}
+
+export enum ISO639_1 {
+  CS = 'cs',
+  Empty = '',
+}
+
+export enum Note {
+  Empty = '',
+  HBOMax = 'HBO Max',
+  LosAngelesCalifornia = 'Los Angeles, California',
+  Starz = 'STARZ',
+  The4KUHDBluRayDVD = '4K UHD, Blu-ray & DVD',
+  TheMoreFunStuffVersion = 'The More Fun Stuff Version',
+  Tvod = 'TVOD',
+  VOD = 'VOD',
+}
+
+export interface SpokenLanguage {
+  english_name: string;
+  iso_639_1: string;
+  name: string;
+}
+
+export interface WatchProvider {
+  iso_3166_1: string;
+  link: string;
+  buy: ProductionCompany[];
+  flatrate: ProductionCompany[];
+}

src/modules/overseerr/OverseerrModule.tsx

@@ -0,0 +1,14 @@
+import { IconEyeglass } from '@tabler/icons';
+import { OverseerrMediaDisplay } from '../common';
+import { IModule } from '../ModuleTypes';
+
+export const OverseerrModule: IModule = {
+  title: 'Overseerr',
+  description: 'Allows you to search and add media from Overseerr/Jellyseerr',
+  icon: IconEyeglass,
+  component: OverseerrMediaDisplay,
+};
+
+export interface OverseerSearchProps {
+  query: string;
+}

src/modules/overseerr/RequestModal.tsx

@@ -0,0 +1,240 @@
+import { Alert, Button, Checkbox, createStyles, Group, Modal, Stack, Table } from '@mantine/core';
+import { showNotification, updateNotification } from '@mantine/notifications';
+import { IconAlertCircle, IconCheck, IconDownload } from '@tabler/icons';
+import axios from 'axios';
+import Consola from 'consola';
+import { useState } from 'react';
+import { useColorTheme } from '../../tools/color';
+import { MovieResult } from './Movie.d';
+import { MediaType, Result } from './SearchResult.d';
+import { TvShowResult, TvShowResultSeason } from './TvShow.d';
+
+interface RequestModalProps {
+  base: Result;
+  opened: boolean;
+  setOpened: (opened: boolean) => void;
+}
+
+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 function RequestModal({ base, opened, setOpened }: RequestModalProps) {
+  const [result, setResult] = useState<MovieResult | TvShowResult>();
+  const { secondaryColor } = useColorTheme();
+  function getResults(base: Result) {
+    axios.get(`/api/modules/overseerr/${base.id}?type=${base.mediaType}`).then((res) => {
+      setResult(res.data);
+    });
+  }
+  if (opened && !result) {
+    getResults(base);
+  }
+  if (!result || !opened) {
+    return null;
+  }
+  return base.mediaType === 'movie' ? (
+    <MovieRequestModal result={result as MovieResult} opened={opened} setOpened={setOpened} />
+  ) : (
+    <TvRequestModal result={result as TvShowResult} opened={opened} setOpened={setOpened} />
+  );
+}
+
+export function MovieRequestModal({
+  result,
+  opened,
+  setOpened,
+}: {
+  result: MovieResult;
+  opened: boolean;
+  setOpened: (opened: boolean) => void;
+}) {
+  const { secondaryColor } = useColorTheme();
+  return (
+    <Modal
+      onClose={() => setOpened(false)}
+      radius="lg"
+      size="lg"
+      trapFocus
+      zIndex={150}
+      withinPortal
+      opened={opened}
+      title={
+        <Group>
+          <IconDownload />
+          Ask for {result.title}
+        </Group>
+      }
+    >
+      <Stack>
+        <Alert
+          icon={<IconAlertCircle size={16} />}
+          title="Using API key"
+          color={secondaryColor}
+          radius="md"
+          variant="filled"
+        >
+          This request will be automatically approved
+        </Alert>
+        <Group>
+          <Button variant="outline" color="gray" onClick={() => setOpened(false)}>
+            Cancel
+          </Button>
+          <Button
+            variant="outline"
+            onClick={() => {
+              askForMedia(MediaType.Movie, result.id, result.title, []);
+            }}
+          >
+            Request
+          </Button>
+        </Group>
+      </Stack>
+    </Modal>
+  );
+}
+
+export function TvRequestModal({
+  result,
+  opened,
+  setOpened,
+}: {
+  result: TvShowResult;
+  opened: boolean;
+  setOpened: (opened: boolean) => void;
+}) {
+  const [selection, setSelection] = useState<TvShowResultSeason[]>(result.seasons);
+  const { classes, cx } = useStyles();
+
+  const toggleRow = (container: TvShowResultSeason) =>
+    setSelection((current: TvShowResultSeason[]) =>
+      current.includes(container) ? current.filter((c) => c !== container) : [...current, container]
+    );
+  const toggleAll = () =>
+    setSelection((current: any) =>
+      current.length === result.seasons.length ? [] : result.seasons.map((c) => c)
+    );
+
+  const rows = result.seasons.map((element) => {
+    const selected = selection.includes(element);
+    return (
+      <tr key={element.id} className={cx({ [classes.rowSelected]: selected })}>
+        <td>
+          <Checkbox
+            key={element.id}
+            checked={selection.includes(element)}
+            onChange={() => toggleRow(element)}
+            transitionDuration={0}
+          />
+        </td>
+        <td>{element.name}</td>
+        <td>{element.episodeCount}</td>
+      </tr>
+    );
+  });
+  const { secondaryColor } = useColorTheme();
+
+  return (
+    <Modal
+      onClose={() => setOpened(false)}
+      radius="lg"
+      size="lg"
+      opened={opened}
+      title={
+        <Group>
+          <IconDownload />
+          Ask for {result.name ?? result.originalName ?? 'a TV show'}
+        </Group>
+      }
+    >
+      <Stack>
+        <Alert
+          icon={<IconAlertCircle size={16} />}
+          title="Using API key"
+          color={secondaryColor}
+          radius="md"
+          variant="filled"
+        >
+          This request will be automatically approved
+        </Alert>
+        <Table captionSide="bottom" highlightOnHover>
+          <caption>Tick the seasons that you want to be downloaded</caption>
+          <thead>
+            <tr>
+              <th>
+                <Checkbox
+                  onChange={toggleAll}
+                  checked={selection.length === result.seasons.length}
+                  indeterminate={selection.length > 0 && selection.length !== result.seasons.length}
+                  transitionDuration={0}
+                />
+              </th>
+              <th>Season</th>
+              <th>Number of episodes</th>
+            </tr>
+          </thead>
+          <tbody>{rows}</tbody>
+        </Table>
+        <Group>
+          <Button variant="outline" color="gray" onClick={() => setOpened(false)}>
+            Cancel
+          </Button>
+          <Button
+            variant="outline"
+            disabled={selection.length === 0}
+            onClick={() => {
+              askForMedia(
+                MediaType.Tv,
+                result.id,
+                result.name,
+                selection.map((s) => s.seasonNumber)
+              );
+            }}
+          >
+            Request
+          </Button>
+        </Group>
+      </Stack>
+    </Modal>
+  );
+}
+
+function askForMedia(type: MediaType, id: number, name: string, seasons?: number[]) {
+  Consola.info(`Requesting ${type} ${id} ${name}`);
+  showNotification({
+    title: 'Request',
+    id: id.toString(),
+    message: `Requesting media ${name}`,
+    color: 'orange',
+    loading: true,
+    autoClose: false,
+    disallowClose: true,
+    icon: <IconAlertCircle />,
+  });
+  axios
+    .post(`/api/modules/overseerr/${id}`, { type, seasons })
+    .then(() => {
+      updateNotification({
+        id: id.toString(),
+        title: '',
+        color: 'green',
+        message: ` ${name} requested`,
+        icon: <IconCheck />,
+        autoClose: 2000,
+      });
+    })
+    .catch((err) => {
+      updateNotification({
+        id: id.toString(),
+        color: 'red',
+        title: 'There was an error',
+        message: err.message,
+        autoClose: 2000,
+      });
+    });
+}

src/modules/overseerr/SearchResult.d.ts

@@ -0,0 +1,66 @@
+export interface SearchResult {
+  page: number;
+  totalPages: number;
+  totalResults: number;
+  results: Result[];
+}
+
+export interface Result {
+  id: number;
+  mediaType: MediaType;
+  adult?: boolean;
+  genreIds: number[];
+  originalLanguage: OriginalLanguage;
+  originalTitle?: string;
+  overview: string;
+  popularity: number;
+  releaseDate?: Date;
+  title?: string;
+  video?: boolean;
+  voteAverage: number;
+  voteCount: number;
+  backdropPath: null | string;
+  posterPath: string;
+  mediaInfo?: MediaInfo;
+  firstAirDate?: Date;
+  name?: string;
+  originCountry?: string[];
+  originalName?: string;
+}
+
+export interface MediaInfo {
+  downloadStatus: any[];
+  downloadStatus4k: any[];
+  id: number;
+  mediaType: MediaType;
+  tmdbId: number;
+  tvdbId: null;
+  imdbId: null;
+  status: number;
+  status4k: number;
+  createdAt: Date;
+  updatedAt: Date;
+  lastSeasonChange: Date;
+  mediaAddedAt: Date;
+  serviceId: number;
+  serviceId4k: null;
+  externalServiceId: number;
+  externalServiceId4k: null;
+  externalServiceSlug: string;
+  externalServiceSlug4k: null;
+  ratingKey: string;
+  ratingKey4k: null;
+  seasons: any[];
+  plexUrl: string;
+  serviceUrl: string;
+  mediaUrl?: string;
+}
+
+export enum MediaType {
+  Movie = 'movie',
+  Tv = 'tv',
+}
+
+export enum OriginalLanguage {
+  En = 'en',
+}