From 5f61940c92a923b0d9cf89c798fd4a656fdb5553 Mon Sep 17 00:00:00 2001
From: Thomas Camlong <thomascamlong@gmail.com>
Date: Tue, 15 Nov 2022 00:14:17 +0900
Subject: [PATCH 01/28] #506 Add warning on wrong password attemps

---
 src/pages/api/configs/tryPassword.tsx | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/src/pages/api/configs/tryPassword.tsx b/src/pages/api/configs/tryPassword.tsx
index 8f3848b9d..fee00cb00 100644
--- a/src/pages/api/configs/tryPassword.tsx
+++ b/src/pages/api/configs/tryPassword.tsx
@@ -1,3 +1,4 @@
+import Consola from 'consola';
 import { NextApiRequest, NextApiResponse } from 'next';
 
 function Post(req: NextApiRequest, res: NextApiResponse) {
@@ -8,6 +9,12 @@ function Post(req: NextApiRequest, res: NextApiResponse) {
       success: true,
     });
   }
+  // Warn that there was a wrong password attempt (date : wrong password, password tried, person's IP)
+  Consola.warn(
+    `${new Date().toLocaleString()} : Wrong password attempt, tried ${tried}, from ${
+      req.headers['x-forwarded-for']
+    }`
+  );
   return res.status(200).json({
     success: false,
   });

From 79d52b3a4d532566c49ff04da47a84f38e65902e Mon Sep 17 00:00:00 2001
From: Manuel Ruwe <manuel.ruwe@bluewin.ch>
Date: Wed, 16 Nov 2022 13:07:29 +0100
Subject: [PATCH 02/28] =?UTF-8?q?=F0=9F=90=9B=20Iframe=20color=20scheme=20?=
 =?UTF-8?q?for=20Dash.=20module?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/modules/dashdot/DashdotModule.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/modules/dashdot/DashdotModule.tsx b/src/modules/dashdot/DashdotModule.tsx
index aae0901e7..b2b0a4401 100644
--- a/src/modules/dashdot/DashdotModule.tsx
+++ b/src/modules/dashdot/DashdotModule.tsx
@@ -70,6 +70,8 @@ const useStyles = createStyles((theme, _params) => ({
     maxWidth: '100%',
     height: '140px',
     borderRadius: theme.radius.lg,
+    border: 'none',
+    colorScheme: 'none',
   },
 }));
 
@@ -248,7 +250,6 @@ export function DashdotComponent() {
                         .join('&')}`
                     : ''
                 }`}
-                frameBorder="0"
               />
             </Stack>
           ))}

From 3860e7948c89987700c975304086e95ea11d18f8 Mon Sep 17 00:00:00 2001
From: Thomas Camlong <thomascamlong@gmail.com>
Date: Sat, 12 Nov 2022 22:32:43 +0900
Subject: [PATCH 03/28] Bumb package version

---
 data/constants.ts | 2 +-
 package.json      | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/data/constants.ts b/data/constants.ts
index 6d9a0a462..e876d613c 100644
--- a/data/constants.ts
+++ b/data/constants.ts
@@ -1,2 +1,2 @@
 export const REPO_URL = 'ajnart/homarr';
-export const CURRENT_VERSION = 'v0.10.4';
+export const CURRENT_VERSION = 'v0.10.5';
diff --git a/package.json b/package.json
index 8c7865917..455549865 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "homarr",
-  "version": "0.10.4",
+  "version": "0.10.5",
   "description": "Homarr - A homepage for your server.",
   "license": "MIT",
   "repository": {

From 0a719c0b66da4d4aae9b90eff786830b73e6c0de Mon Sep 17 00:00:00 2001
From: MauriceNino <mauriceprivat98@gmail.com>
Date: Sun, 13 Nov 2022 18:13:57 +0100
Subject: [PATCH 04/28] Make dashdot labels only appear on hover

---
 src/modules/dashdot/DashdotModule.tsx | 19 +++++++++++++++++--
 1 file changed, 17 insertions(+), 2 deletions(-)

diff --git a/src/modules/dashdot/DashdotModule.tsx b/src/modules/dashdot/DashdotModule.tsx
index b2b0a4401..51badf882 100644
--- a/src/modules/dashdot/DashdotModule.tsx
+++ b/src/modules/dashdot/DashdotModule.tsx
@@ -38,7 +38,7 @@ export const DashdotModule = asModule({
   id: 'dashdot',
 });
 
-const useStyles = createStyles((theme, _params) => ({
+const useStyles = createStyles((theme, _params, getRef) => ({
   heading: {
     marginTop: 0,
     marginBottom: 10,
@@ -73,6 +73,19 @@ const useStyles = createStyles((theme, _params) => ({
     border: 'none',
     colorScheme: 'none',
   },
+  graphTitle: {
+    ref: getRef('graphTitle'),
+    position: 'absolute',
+    right: 0,
+    opacity: 0,
+    transition: 'opacity .1s ease-in-out',
+    pointerEvents: 'none',
+  },
+  graphStack: {
+    [`&:hover .${getRef('graphTitle')}`]: {
+      opacity: 0.5,
+    },
+  },
 }));
 
 const bpsPrettyPrint = (bits?: number) =>
@@ -223,6 +236,7 @@ export function DashdotComponent() {
 
           {graphs.map((graph) => (
             <Stack
+              className={classes.graphStack}
               style={
                 isCompact
                   ? {
@@ -232,7 +246,7 @@ export function DashdotComponent() {
                   : undefined
               }
             >
-              <Title style={{ position: 'absolute', right: 0 }} order={4} mt={10} mr={25}>
+              <Title className={classes.graphTitle} order={4} mt={10} mr={25}>
                 {graph.name}
               </Title>
               <iframe
@@ -250,6 +264,7 @@ export function DashdotComponent() {
                         .join('&')}`
                     : ''
                 }`}
+                allowTransparency
               />
             </Stack>
           ))}

From d9ee11af79098c59099c70d0e661a4dea9a73d08 Mon Sep 17 00:00:00 2001
From: Thomas Camlong <49837342+ajnart@users.noreply.github.com>
Date: Thu, 17 Nov 2022 20:16:43 +0900
Subject: [PATCH 05/28] Update tryPassword.tsx

---
 src/pages/api/configs/tryPassword.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/pages/api/configs/tryPassword.tsx b/src/pages/api/configs/tryPassword.tsx
index fee00cb00..381845abf 100644
--- a/src/pages/api/configs/tryPassword.tsx
+++ b/src/pages/api/configs/tryPassword.tsx
@@ -9,9 +9,9 @@ function Post(req: NextApiRequest, res: NextApiResponse) {
       success: true,
     });
   }
-  // Warn that there was a wrong password attempt (date : wrong password, password tried, person's IP)
+  // Warn that there was a wrong password attempt (date : wrong password, person's IP)
   Consola.warn(
-    `${new Date().toLocaleString()} : Wrong password attempt, tried ${tried}, from ${
+    `${new Date().toLocaleString()} : Wrong password attempt, from ${
       req.headers['x-forwarded-for']
     }`
   );

From 9ce569aabeccdf64d815304948529931c2f4848f Mon Sep 17 00:00:00 2001
From: Denis Yantarev <denis.yantarev@gmail.com>
Date: Sat, 19 Nov 2022 11:45:02 +0000
Subject: [PATCH 06/28] Allow self-signed certificates for ping

---
 src/pages/api/modules/ping.ts | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/pages/api/modules/ping.ts b/src/pages/api/modules/ping.ts
index 6662cd8a6..de5dcc79d 100644
--- a/src/pages/api/modules/ping.ts
+++ b/src/pages/api/modules/ping.ts
@@ -1,11 +1,13 @@
 import axios from 'axios';
+import https from 'https';
 import { NextApiRequest, NextApiResponse } from 'next';
 
 async function Get(req: NextApiRequest, res: NextApiResponse) {
   // Parse req.body as a ServiceItem
   const { url } = req.query;
+  const agent = new https.Agent({ rejectUnauthorized: false });
   await axios
-    .get(url as string)
+    .get(url as string, { httpsAgent: agent })
     .then((response) => {
       res.status(response.status).json(response.statusText);
     })

From 7ac852426e5af2e128e44fb72978fe7d9096d57c Mon Sep 17 00:00:00 2001
From: ajnart <thomascamlong@gmail.com>
Date: Tue, 22 Nov 2022 11:23:01 +0900
Subject: [PATCH 07/28] Fix click on logo breaking config changes

Just removed the link on the logo
---
 src/components/layout/Logo.tsx | 28 ++++++++++------------------
 1 file changed, 10 insertions(+), 18 deletions(-)

diff --git a/src/components/layout/Logo.tsx b/src/components/layout/Logo.tsx
index 530314b57..6acdcb075 100644
--- a/src/components/layout/Logo.tsx
+++ b/src/components/layout/Logo.tsx
@@ -18,26 +18,18 @@ export function Logo({ style, withoutText }: any) {
         }}
       />
       {withoutText ? null : (
-        <NextLink
-          href="/"
-          style={{
-            textDecoration: 'none',
-            position: 'relative',
+        <Text
+          sx={style}
+          weight="bold"
+          variant="gradient"
+          gradient={{
+            from: primaryColor,
+            to: secondaryColor,
+            deg: 145,
           }}
         >
-          <Text
-            sx={style}
-            weight="bold"
-            variant="gradient"
-            gradient={{
-              from: primaryColor,
-              to: secondaryColor,
-              deg: 145,
-            }}
-          >
-            {config.settings.title || 'Homarr'}
-          </Text>
-        </NextLink>
+          {config.settings.title || 'Homarr'}
+        </Text>
       )}
     </Group>
   );

From cebeb61b94c74971318498cc158d9526a6582dda Mon Sep 17 00:00:00 2001
From: Thomas Camlong <thomascamlong@gmail.com>
Date: Sun, 16 Oct 2022 23:40:47 +0900
Subject: [PATCH 08/28] Calendar styling changes

---
 src/modules/calendar/CalendarModule.tsx | 4 +++-
 src/modules/common/MediaDisplay.tsx     | 2 +-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/modules/calendar/CalendarModule.tsx b/src/modules/calendar/CalendarModule.tsx
index e3a6ceaff..af78d70bc 100644
--- a/src/modules/calendar/CalendarModule.tsx
+++ b/src/modules/calendar/CalendarModule.tsx
@@ -7,6 +7,7 @@ import {
   ScrollArea,
   createStyles,
   useMantineTheme,
+  Space,
 } from '@mantine/core';
 import React, { useEffect, useState } from 'react';
 import { Calendar } from '@mantine/dates';
@@ -278,10 +279,11 @@ function DayComponent(props: any) {
           scrollbarSize={5}
           style={{
             height:
-              totalFiltered.slice(0, 2).length > 1 ? totalFiltered.slice(0, 2).length * 150 : 200,
+              totalFiltered.slice(0, 2).length > 1 ? totalFiltered.slice(0, 2).length * 150 : 220,
             width: 400,
           }}
         >
+          <Space mt={5} />
           {sonarrFiltered.map((media: any, index: number) => (
             <React.Fragment key={index}>
               <SonarrMediaDisplay media={media} />
diff --git a/src/modules/common/MediaDisplay.tsx b/src/modules/common/MediaDisplay.tsx
index 0e7caea3e..5ea29fc9c 100644
--- a/src/modules/common/MediaDisplay.tsx
+++ b/src/modules/common/MediaDisplay.tsx
@@ -163,7 +163,7 @@ export function MediaDisplay({ media }: { media: IMedia }) {
   const { t } = useTranslation('modules/common-media-cards');
 
   return (
-    <Group mr="xs" align="stretch" noWrap style={{ maxHeight: 200 }}>
+    <Group mr="xs" align="stretch" noWrap style={{ maxHeight: 200 }} spacing="xs">
       <Image src={media.poster} height={200} width={150} radius="md" fit="cover" />
       <Stack justify="space-around">
         <Stack spacing="sm">

From c347180aae4b37c785bb3fcd7b25a588eb1882ce Mon Sep 17 00:00:00 2001
From: ajnart <ajnart@pm.me>
Date: Tue, 22 Nov 2022 12:50:24 +0900
Subject: [PATCH 09/28] Torrent module adjustments for mobile users

---
 src/modules/torrents/TorrentsModule.tsx | 25 +++++++++++--------------
 1 file changed, 11 insertions(+), 14 deletions(-)

diff --git a/src/modules/torrents/TorrentsModule.tsx b/src/modules/torrents/TorrentsModule.tsx
index d81696e24..a12e4b1a2 100644
--- a/src/modules/torrents/TorrentsModule.tsx
+++ b/src/modules/torrents/TorrentsModule.tsx
@@ -13,7 +13,7 @@ import {
 import { IconDownload as Download } from '@tabler/icons';
 import { useEffect, useState } from 'react';
 import axios from 'axios';
-import { useViewportSize } from '@mantine/hooks';
+import { useElementSize } from '@mantine/hooks';
 import { showNotification } from '@mantine/notifications';
 import { NormalizedTorrent } from '@ctrl/shared-torrent';
 import { useTranslation } from 'next-i18next';
@@ -34,15 +34,10 @@ export const TorrentsModule: IModule = {
       value: false,
     },
   },
-  padding: {
-    right: 0,
-    top: -10,
-  },
 };
 
 export default function TorrentsComponent() {
   const { config } = useConfig();
-  const { height, width } = useViewportSize();
   const downloadServices =
     config.services.filter(
       (service) =>
@@ -56,6 +51,7 @@ export default function TorrentsComponent() {
   const [torrents, setTorrents] = useState<NormalizedTorrent[]>([]);
   const setSafeInterval = useSetSafeInterval();
   const [isLoading, setIsLoading] = useState(true);
+  const { ref, width, height } = useElementSize();
 
   const { t } = useTranslation(`modules/${TorrentsModule.id}`);
 
@@ -112,14 +108,13 @@ export default function TorrentsComponent() {
       </>
     );
   }
-  const DEVICE_WIDTH = 576;
   const ths = (
-    <tr>
+    <tr ref={ref}>
       <th>{t('card.table.header.name')}</th>
       <th>{t('card.table.header.size')}</th>
-      {width > 576 ? <th>{t('card.table.header.download')}</th> : ''}
-      {width > 576 ? <th>{t('card.table.header.upload')}</th> : ''}
-      <th>{t('card.table.header.estimatedTimeOfArrival')}</th>
+      {width > 576 ? <th>{t('card.table.header.download')}</th> : null}
+      {width > 576 ? <th>{t('card.table.header.upload')}</th> : null}
+      {width > 576 ? <th>{t('card.table.header.estimatedTimeOfArrival')}</th> : null}
       <th>{t('card.table.header.progress')}</th>
     </tr>
   );
@@ -178,9 +173,11 @@ export default function TorrentsComponent() {
           ) : (
             ''
           )}
-          <td>
-            <Text size="xs">{torrent.eta <= 0 ? '∞' : calculateETA(torrent.eta)}</Text>
-          </td>
+          {width > 576 ? (
+            <td>
+              <Text size="xs">{torrent.eta <= 0 ? '∞' : calculateETA(torrent.eta)}</Text>
+            </td>
+          ) : null}
           <td>
             <Text>{(torrent.progress * 100).toFixed(1)}%</Text>
             <Progress

From 11abac2e333be5fb7188fde1677dba2c1167e598 Mon Sep 17 00:00:00 2001
From: Thomas Camlong <thomascamlong@gmail.com>
Date: Thu, 29 Sep 2022 16:34:57 +0900
Subject: [PATCH 10/28] Usenet module styling

---
 src/modules/usenet/UsenetModule.tsx | 55 +++++++++++++++++------------
 1 file changed, 32 insertions(+), 23 deletions(-)

diff --git a/src/modules/usenet/UsenetModule.tsx b/src/modules/usenet/UsenetModule.tsx
index 081be509f..58b5b52f6 100644
--- a/src/modules/usenet/UsenetModule.tsx
+++ b/src/modules/usenet/UsenetModule.tsx
@@ -5,6 +5,7 @@ import { FunctionComponent, useEffect, useState } from 'react';
 import { useTranslation } from 'next-i18next';
 import dayjs from 'dayjs';
 import duration from 'dayjs/plugin/duration';
+import { useElementSize } from '@mantine/hooks';
 import { IModule } from '../ModuleTypes';
 import { UsenetQueueList } from './UsenetQueueList';
 import { UsenetHistoryList } from './UsenetHistoryList';
@@ -48,30 +49,39 @@ export const UsenetComponent: FunctionComponent = () => {
     return null;
   }
 
+  const { ref, width, height } = useElementSize();
+
   return (
     <Tabs keepMounted={false} defaultValue="queue">
-      <Group mb="md">
-        <Tabs.List style={{ flex: 1 }}>
-          <Tabs.Tab value="queue">{t('tabs.queue')}</Tabs.Tab>
-          <Tabs.Tab value="history">{t('tabs.history')}</Tabs.Tab>
-          {data && (
-            <Group position="right" ml="auto" mb="lg">
-              <Badge>{humanFileSize(data?.speed)}/s</Badge>
-              <Badge>
-                {t('info.sizeLeft')}: {humanFileSize(data?.sizeLeft)}
-              </Badge>
-              {data.paused ? (
-                <Button uppercase onClick={() => resume()} radius="xl" size="xs">
-                  <IconPlayerPlay size={16} style={{ marginRight: 5 }} /> {t('info.paused')}
-                </Button>
-              ) : (
-                <Button uppercase onClick={() => pause()} radius="xl" size="xs">
-                  <IconPlayerPause size={16} style={{ marginRight: 5 }} />{' '}
-                  {dayjs.duration(data.eta, 's').format('HH:mm:ss')}
-                </Button>
-              )}
-            </Group>
-          )}
+        <Tabs.List ref={ref} mb="md" style={{ flex: 1 }}>
+            <Tabs.Tab value="queue">{t('tabs.queue')}</Tabs.Tab>
+            <Tabs.Tab value="history">{t('tabs.history')}</Tabs.Tab>
+            {data && (
+              <Group position="right" ml="auto">
+                {
+                  // Only show if the width is > 400px
+                  width > 400 && (
+                    <>
+                      <Badge>{humanFileSize(data?.speed)}/s</Badge>
+                      <Badge>
+                        {t('info.sizeLeft')}: {humanFileSize(data?.sizeLeft)}
+                      </Badge>
+                    </>
+                  )
+                }
+
+                {data.paused ? (
+                  <Button uppercase onClick={() => resume()} radius="xl" size="xs">
+                    <IconPlayerPlay size={12} style={{ marginRight: 5 }} /> {t('info.paused')}
+                  </Button>
+                ) : (
+                  <Button uppercase onClick={() => pause()} radius="xl" size="xs">
+                    <IconPlayerPause size={12} style={{ marginRight: 5 }} />{' '}
+                    {dayjs.duration(data.eta, 's').format('HH:mm')}
+                  </Button>
+                )}
+              </Group>
+            )}
         </Tabs.List>
         {downloadServices.length > 1 && (
           <Select
@@ -81,7 +91,6 @@ export const UsenetComponent: FunctionComponent = () => {
             data={downloadServices.map((service) => ({ value: service.id, label: service.name }))}
           />
         )}
-      </Group>
       <Tabs.Panel value="queue">
         <UsenetQueueList serviceId={selectedServiceId} />
       </Tabs.Panel>

From 287c184fa9285468abe660ce2256ea1273aee13b Mon Sep 17 00:00:00 2001
From: Thomas Camlong <thomascamlong@gmail.com>
Date: Thu, 29 Sep 2022 16:34:28 +0900
Subject: [PATCH 11/28] Card styling

---
 src/components/AppShelf/AppShelfItem.tsx | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/components/AppShelf/AppShelfItem.tsx b/src/components/AppShelf/AppShelfItem.tsx
index c46265b48..35c730d68 100644
--- a/src/components/AppShelf/AppShelfItem.tsx
+++ b/src/components/AppShelf/AppShelfItem.tsx
@@ -105,14 +105,14 @@ export function AppShelfItem(props: any) {
             <AppShelfMenu service={service} />
           </motion.div>
         </Card.Section>
-        <Center>
-          <Card.Section>
+        <Card.Section>
+          <Center>
             <AspectRatio
               ratio={3 / 5}
-              m="xl"
+              m="lg"
               style={{
-                width: 150,
-                height: 90,
+                height: 75 * ((config.settings.appCardWidth ?? 1) * 1.2),
+                width: 75 * ((config.settings.appCardWidth ?? 1) * 2),
               }}
             >
               <motion.i
@@ -126,8 +126,8 @@ export function AppShelfItem(props: any) {
                 >
                   <Image
                     styles={{ root: { cursor: 'pointer' } }}
-                    width={80}
-                    height={80}
+                    width={75 * ((config.settings.appCardWidth ?? 1) * 1.2)}
+                    height={75 * ((config.settings.appCardWidth ?? 1) * 1.2)}
                     src={service.icon}
                     fit="contain"
                   />
@@ -135,8 +135,8 @@ export function AppShelfItem(props: any) {
               </motion.i>
             </AspectRatio>
             {service.ping !== false && <PingComponent url={service.url} status={service.status} />}
-          </Card.Section>
-        </Center>
+          </Center>
+        </Card.Section>
       </Card>
     </motion.div>
   );

From e2041421f6fd16fa0fad5ff47cb58270f0c9be17 Mon Sep 17 00:00:00 2001
From: ajnart <ajnart@pm.me>
Date: Tue, 22 Nov 2022 12:58:45 +0900
Subject: [PATCH 12/28] Card styling

---
 src/components/Settings/AppCardWidthSelector.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/Settings/AppCardWidthSelector.tsx b/src/components/Settings/AppCardWidthSelector.tsx
index a29ecc18a..cfeb51338 100644
--- a/src/components/Settings/AppCardWidthSelector.tsx
+++ b/src/components/Settings/AppCardWidthSelector.tsx
@@ -21,11 +21,11 @@ export function AppCardWidthSelector() {
     <Stack spacing="xs">
       <Text>{t('label')}</Text>
       <Slider
-        label={null}
-        defaultValue={config.settings.appCardWidth}
-        step={0.2}
-        min={0.8}
-        max={2}
+        label={config.settings.appCardWidth?.toFixed(1)}
+        defaultValue={config.settings.appCardWidth ?? 0.7}
+        step={0.1}
+        min={0.3}
+        max={1.2}
         styles={{ markLabel: { fontSize: 'xx-small' } }}
         onChange={(value) => setappCardWidth(value)}
       />

From 195e1ba946942dd5b86ce204d94eb0d83c8958c8 Mon Sep 17 00:00:00 2001
From: ajnart <ajnart@pm.me>
Date: Tue, 22 Nov 2022 13:58:50 +0900
Subject: [PATCH 13/28] AppShelf adjustments

---
 src/components/AppShelf/AppShelf.tsx     | 148 ++++++-----------------
 src/components/AppShelf/AppShelfItem.tsx |   8 +-
 2 files changed, 45 insertions(+), 111 deletions(-)

diff --git a/src/components/AppShelf/AppShelf.tsx b/src/components/AppShelf/AppShelf.tsx
index 85a204f0c..61587b8bf 100644
--- a/src/components/AppShelf/AppShelf.tsx
+++ b/src/components/AppShelf/AppShelf.tsx
@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { Accordion, Grid, Paper, Stack, Text, useMantineColorScheme } from '@mantine/core';
+import { Accordion, Grid, Stack, Title, useMantineColorScheme } from '@mantine/core';
 import {
   closestCenter,
   DndContext,
@@ -9,16 +9,16 @@ import {
   useSensor,
   useSensors,
 } from '@dnd-kit/core';
+
 import { arrayMove, SortableContext } from '@dnd-kit/sortable';
 import { useLocalStorage } from '@mantine/hooks';
 import { useTranslation } from 'next-i18next';
+import * as Modules from '../../modules';
 import { useConfig } from '../../tools/state';
 
-import { SortableAppShelfItem, AppShelfItem } from './AppShelfItem';
-import { ModuleMenu, ModuleWrapper } from '../../modules/moduleWrapper';
+import { AppShelfItem, SortableItem } from './AppShelfItem';
+import { ModuleWrapper } from '../../modules/moduleWrapper';
 import { UsenetModule, TorrentsModule } from '../../modules';
-import TorrentsComponent from '../../modules/torrents/TorrentsModule';
-import { UsenetComponent } from '../../modules/usenet/UsenetModule';
 
 const AppShelf = (props: any) => {
   const { config, setConfig } = useConfig();
@@ -79,13 +79,14 @@ const AppShelf = (props: any) => {
   const getItems = (filter?: string) => {
     // If filter is not set, return all the services without a category or a null category
     let filtered = config.services;
+    const modules = Object.values(Modules).map((module) => module);
+
     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}
@@ -94,17 +95,12 @@ const AppShelf = (props: any) => {
         onDragEnd={handleDragEnd}
       >
         <SortableContext items={config.services}>
-          <Grid gutter="xl" align="center">
+          <Grid gutter="lg" 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 key={service.id} span="content">
+                <SortableItem service={service} key={service.id} id={service.id}>
+                  <AppShelfItem service={service} />
+                </SortableItem>
               </Grid.Col>
             ))}
           </Grid>
@@ -123,100 +119,36 @@ const AppShelf = (props: any) => {
     );
   };
 
-  if (categoryList.length > 0) {
-    const noCategory = config.services.filter(
-      (e) => e.category === undefined || e.category === null
-    );
-
-    const torrentEnabled = config.modules?.[TorrentsModule.id]?.enabled ?? false;
-    const usenetEnabled = config.modules?.[UsenetModule.id]?.enabled ?? false;
-
-    const downloadEnabled = usenetEnabled || torrentEnabled;
-    // 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
-              style={{
-                background: `rgba(${colorScheme === 'dark' ? '32, 33, 35,' : '255, 255, 255,'} \
-              ${(config.settings.appOpacity || 100) / 100}`,
-                borderColor: `rgba(${colorScheme === 'dark' ? '32, 33, 35,' : '233, 236, 239,'} \
-              ${(config.settings.appOpacity || 100) / 100}`,
-              }}
-              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
-              style={{
-                background: `rgba(${colorScheme === 'dark' ? '32, 33, 35,' : '255, 255, 255,'} \
-            ${(config.settings.appOpacity || 100) / 100}`,
-                borderColor: `rgba(${colorScheme === 'dark' ? '32, 33, 35,' : '233, 236, 239,'} \
-            ${(config.settings.appOpacity || 100) / 100}`,
-              }}
-              key="Other"
-              value="Other"
-            >
-              <Accordion.Control>{t('accordions.others.text')}</Accordion.Control>
-              <Accordion.Panel>{getItems()}</Accordion.Panel>
-            </Accordion.Item>
-          ) : null}
-          {downloadEnabled ? (
-            <Accordion.Item
-              style={{
-                color: `rgba(${colorScheme === 'dark' ? '32, 33, 35,' : '255, 255, 255,'} \
-                ${(config.settings.appOpacity || 100) / 100}`,
-                background: `rgba(${colorScheme === 'dark' ? '32, 33, 35,' : '255, 255, 255,'} \
-            ${(config.settings.appOpacity || 100) / 100}`,
-                borderColor: `rgba(${colorScheme === 'dark' ? '32, 33, 35,' : '233, 236, 239,'} \
-            ${(config.settings.appOpacity || 100) / 100}`,
-              }}
-              key="Downloads"
-              value="Your downloads"
-            >
-              <Accordion.Control>{t('accordions.downloads.text')}</Accordion.Control>
-              <Accordion.Panel>
-                <Paper radius="lg" style={{ position: 'relative' }}>
-                  {torrentEnabled && (
-                    <>
-                      <Text>{t('accordions.downloads.torrents')}</Text>
-                      <ModuleMenu module={TorrentsModule} hovered />
-                      <TorrentsComponent />
-                    </>
-                  )}
-                  {usenetEnabled && (
-                    <>
-                      <Text mt="md">{t('accordions.downloads.usenet')}</Text>
-                      <ModuleMenu module={UsenetModule} hovered />
-                      <UsenetComponent />
-                    </>
-                  )}
-                </Paper>
-              </Accordion.Panel>
-            </Accordion.Item>
-          ) : null}
-        </Accordion>
-      </Stack>
-    );
-  }
   return (
     <Stack>
+      <Accordion
+        variant="separated"
+        radius="lg"
+        order={2}
+        multiple
+        value={toggledCategories}
+        onChange={(state) => {
+          setToggledCategories([...state]);
+        }}
+      >
+        {categoryList.map((category, idx) => (
+          <Accordion.Item
+            style={{
+              background: `rgba(${colorScheme === 'dark' ? '32, 33, 35,' : '255, 255, 255,'} \
+          ${(config.settings.appOpacity || 100) / 100}`,
+              borderColor: `rgba(${colorScheme === 'dark' ? '32, 33, 35,' : '233, 236, 239,'} \
+          ${(config.settings.appOpacity || 100) / 100}`,
+            }}
+            key={category}
+            value={idx.toString()}
+          >
+            <Accordion.Control>
+              <Title order={5}>{category}</Title>
+            </Accordion.Control>
+            <Accordion.Panel>{getItems(category)}</Accordion.Panel>
+          </Accordion.Item>
+        ))}
+      </Accordion>
       {getItems()}
       <ModuleWrapper mt="xl" module={TorrentsModule} />
       <ModuleWrapper mt="xl" module={UsenetModule} />
diff --git a/src/components/AppShelf/AppShelfItem.tsx b/src/components/AppShelf/AppShelfItem.tsx
index 35c730d68..35ca6d604 100644
--- a/src/components/AppShelf/AppShelfItem.tsx
+++ b/src/components/AppShelf/AppShelfItem.tsx
@@ -31,7 +31,7 @@ const useStyles = createStyles((theme) => ({
   },
 }));
 
-export function SortableAppShelfItem(props: any) {
+export function SortableItem(props: any) {
   const { attributes, listeners, setNodeRef, transform, transition } = useSortable({
     id: props.id,
   });
@@ -43,7 +43,7 @@ export function SortableAppShelfItem(props: any) {
 
   return (
     <div ref={setNodeRef} style={style} {...attributes} {...listeners}>
-      <AppShelfItem service={props.service} />
+      {props.children}
     </div>
   );
 }
@@ -75,6 +75,8 @@ export function AppShelfItem(props: any) {
         shadow="md"
         className={classes.item}
         style={{
+          // Use the grab cursor when hovering over the card
+          cursor: hovering ? 'grab' : 'auto',
           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,'} \
@@ -140,4 +142,4 @@ export function AppShelfItem(props: any) {
       </Card>
     </motion.div>
   );
-}
+}
\ No newline at end of file

From f3a7aafe877d7b040a1fa250ad6bd8a6c422e56e Mon Sep 17 00:00:00 2001
From: ajnart <ajnart@pm.me>
Date: Tue, 22 Nov 2022 14:05:03 +0900
Subject: [PATCH 14/28] Fix newline at the end of AppShelfItem

---
 src/components/AppShelf/AppShelfItem.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/AppShelf/AppShelfItem.tsx b/src/components/AppShelf/AppShelfItem.tsx
index 35ca6d604..bbc51122c 100644
--- a/src/components/AppShelf/AppShelfItem.tsx
+++ b/src/components/AppShelf/AppShelfItem.tsx
@@ -142,4 +142,4 @@ export function AppShelfItem(props: any) {
       </Card>
     </motion.div>
   );
-}
\ No newline at end of file
+}

From c15ab30c7ae2fd374c4e82ed27cb4833228ac62f Mon Sep 17 00:00:00 2001
From: ajnart <thomascamlong@gmail.com>
Date: Tue, 22 Nov 2022 09:56:40 +0900
Subject: [PATCH 15/28] Fix docker module for mobile

Signed-off-by: ajnart <thomascamlong@gmail.com>
---
 src/modules/docker/ContainerActionBar.tsx |  6 +--
 src/modules/docker/DockerTable.tsx        | 52 ++++++++++++-----------
 2 files changed, 31 insertions(+), 27 deletions(-)

diff --git a/src/modules/docker/ContainerActionBar.tsx b/src/modules/docker/ContainerActionBar.tsx
index d83b0d272..0dd5e9ff5 100644
--- a/src/modules/docker/ContainerActionBar.tsx
+++ b/src/modules/docker/ContainerActionBar.tsx
@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-non-null-assertion */
-import { Button, Group, TextInput, Title } from '@mantine/core';
-import { closeAllModals, closeModal, openModal } from '@mantine/modals';
+import { Button, Group } from '@mantine/core';
+import { closeModal, openModal } from '@mantine/modals';
 import { showNotification, updateNotification } from '@mantine/notifications';
 import {
   IconCheck,
@@ -72,7 +72,7 @@ export default function ContainerActionBar({ selected, reload }: ContainerAction
   const { config, setConfig } = useConfig();
 
   return (
-    <Group>
+    <Group spacing="xs">
       <Button
         leftIcon={<IconRefresh />}
         onClick={() => {
diff --git a/src/modules/docker/DockerTable.tsx b/src/modules/docker/DockerTable.tsx
index 1e263360e..feebe5123 100644
--- a/src/modules/docker/DockerTable.tsx
+++ b/src/modules/docker/DockerTable.tsx
@@ -1,4 +1,5 @@
 import { Table, Checkbox, Group, Badge, createStyles, ScrollArea, TextInput } from '@mantine/core';
+import { useElementSize } from '@mantine/hooks';
 import { IconSearch } from '@tabler/icons';
 import Dockerode from 'dockerode';
 import { useTranslation } from 'next-i18next';
@@ -26,6 +27,7 @@ export default function DockerTable({
   const [usedContainers, setContainers] = useState<Dockerode.ContainerInfo[]>(containers);
   const { classes, cx } = useStyles();
   const [search, setSearch] = useState('');
+  const { ref, width, height } = useElementSize();
 
   const { t } = useTranslation('modules/docker');
 
@@ -67,28 +69,30 @@ export default function DockerTable({
           />
         </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}
+        {width > 576 ? <td>{element.Image}</td> : null}
+        {width > 576 ? (
+          <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">
+                  {t('table.body.portCollapse', { ports: element.Ports.length - 3 })}
                 </Badge>
-              ))}
-            {element.Ports.length > 3 && (
-              <Badge variant="filled">
-                {t('table.body.portCollapse', { ports: element.Ports.length - 3 })}
-              </Badge>
-            )}
-          </Group>
-        </td>
+              )}
+            </Group>
+          </td>
+        ) : null}
         <td>
           <ContainerState state={element.State} />
         </td>
@@ -106,7 +110,7 @@ export default function DockerTable({
         onChange={handleSearchChange}
         disabled={usedContainers.length === 0}
       />
-      <Table captionSide="bottom" highlightOnHover sx={{ minWidth: 800 }} verticalSpacing="sm">
+      <Table ref={ref} captionSide="bottom" highlightOnHover verticalSpacing="sm">
         <thead>
           <tr>
             <th style={{ width: 40 }}>
@@ -119,8 +123,8 @@ export default function DockerTable({
               />
             </th>
             <th>{t('table.header.name')}</th>
-            <th>{t('table.header.image')}</th>
-            <th>{t('table.header.ports')}</th>
+            {width > 576 ? <th>{t('table.header.image')}</th> : null}
+            {width > 576 ? <th>{t('table.header.ports')}</th> : null}
             <th>{t('table.header.state')}</th>
           </tr>
         </thead>

From 1606d4c28b0f5ffb1aba61f33ff6b651a28e1a5e Mon Sep 17 00:00:00 2001
From: ajnart <ajnart@pm.me>
Date: Tue, 22 Nov 2022 14:23:25 +0900
Subject: [PATCH 16/28] Bumb version to v0.10.6

---
 data/constants.ts | 2 +-
 package.json      | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/data/constants.ts b/data/constants.ts
index e876d613c..db44a4c1e 100644
--- a/data/constants.ts
+++ b/data/constants.ts
@@ -1,2 +1,2 @@
 export const REPO_URL = 'ajnart/homarr';
-export const CURRENT_VERSION = 'v0.10.5';
+export const CURRENT_VERSION = 'v0.10.6';
diff --git a/package.json b/package.json
index 455549865..b81ca8858 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "homarr",
-  "version": "0.10.5",
+  "version": "0.10.6",
   "description": "Homarr - A homepage for your server.",
   "license": "MIT",
   "repository": {

From c71f9629672dfac0650eb47564ea65b6adc4ad2c Mon Sep 17 00:00:00 2001
From: ajnart <ajnart@pm.me>
Date: Tue, 22 Nov 2022 18:00:23 +0900
Subject: [PATCH 17/28] Working on spotlight module

---
 package.json                              |   1 +
 src/modules/index.ts                      |   1 +
 src/modules/spotlight/SpotlightModule.tsx | 107 ++++++++++++++++++++++
 src/modules/spotlight/index.tsx           |   1 +
 yarn.lock                                 |  24 +++++
 5 files changed, 134 insertions(+)
 create mode 100644 src/modules/spotlight/SpotlightModule.tsx
 create mode 100644 src/modules/spotlight/index.tsx

diff --git a/package.json b/package.json
index b81ca8858..47e1b68cb 100644
--- a/package.json
+++ b/package.json
@@ -42,6 +42,7 @@
     "@mantine/next": "^5.2.3",
     "@mantine/notifications": "^5.7.2",
     "@mantine/prism": "^5.0.0",
+    "@mantine/spotlight": "^5.8.2",
     "@nivo/core": "^0.79.0",
     "@nivo/line": "^0.79.1",
     "@tabler/icons": "^1.78.0",
diff --git a/src/modules/index.ts b/src/modules/index.ts
index f3b7292a7..c4e86eadf 100644
--- a/src/modules/index.ts
+++ b/src/modules/index.ts
@@ -8,3 +8,4 @@ export * from './weather';
 export * from './docker';
 export * from './overseerr';
 export * from './usenet';
+export * from './spotlight';
diff --git a/src/modules/spotlight/SpotlightModule.tsx b/src/modules/spotlight/SpotlightModule.tsx
new file mode 100644
index 000000000..c6526257b
--- /dev/null
+++ b/src/modules/spotlight/SpotlightModule.tsx
@@ -0,0 +1,107 @@
+import { Button, Group } from '@mantine/core';
+import { IconSearch, IconBrandYoutube, IconDownload, IconMovie } from '@tabler/icons';
+import { SpotlightProvider, openSpotlight } from '@mantine/spotlight';
+import type { SpotlightAction } from '@mantine/spotlight';
+import { useState } from 'react';
+import { IModule } from '../ModuleTypes';
+
+export const SpotlightModule: IModule = {
+  title: 'Spotlight',
+  icon: IconSearch,
+  component: SpotlightModuleComponent,
+  id: 'spotlight',
+};
+
+interface SearchEngine {
+  name: string;
+  enabled: boolean;
+  description: string;
+  icon: React.ReactNode;
+  url: string;
+  shortcut: string;
+}
+const searchEngines: SearchEngine[] = [
+  {
+    name: 'Google',
+    enabled: true,
+    description: 'Search using your search engine (defined in settings)',
+    icon: <IconSearch />,
+    url: 'https://www.google.com/search?q=',
+    shortcut: 'g',
+  },
+  {
+    name: 'Youtube',
+    enabled: true,
+    description: 'Search Youtube',
+    icon: <IconBrandYoutube />,
+    url: 'https://www.youtube.com/results?search_query=',
+    shortcut: 'y',
+  },
+  {
+    name: 'Download',
+    enabled: true,
+    description: 'Search for torrents',
+    icon: <IconDownload />,
+    url: 'https://1337x.to/search/',
+    shortcut: 't',
+  },
+  {
+    name: 'Movies',
+    icon: <IconMovie />,
+    enabled: false,
+    description: 'Search for movies using Overseerr',
+    url: 'https://www.imdb.com/find?q=',
+    shortcut: 'm',
+  },
+];
+
+function SpotlightControl() {
+  return (
+    <Group position="center">
+      <Button onClick={() => openSpotlight()}>Open spotlight</Button>
+    </Group>
+  );
+}
+
+export function SpotlightModuleComponent(props: any) {
+  const [selectedSearchEngine, setSearchEngine] = useState<SearchEngine>(searchEngines[0]);
+  const actions: SpotlightAction[] = searchEngines.map((engine) => ({
+    title: engine.name,
+    description: engine.description,
+    icon: engine.icon,
+    onTrigger: () => {
+      setSearchEngine(engine);
+    },
+    closeOnTrigger: false,
+  }));
+  return (
+    <SpotlightProvider
+      actions={actions}
+      searchIcon={selectedSearchEngine.icon}
+      searchPlaceholder={selectedSearchEngine.description}
+      shortcut="mod + k"
+      nothingFoundMessage="Press enter to search..."
+      onQueryChange={(researchString) =>
+        useSearchBrowser(researchString, selectedSearchEngine, setSearchEngine, searchEngines)
+      }
+    >
+      <SpotlightControl />
+    </SpotlightProvider>
+  );
+}
+function useSearchBrowser(
+  search: string,
+  selectedSearchEngine: SearchEngine,
+  setSearchEngine: React.Dispatch<React.SetStateAction<SearchEngine>>,
+  searchEngines: SearchEngine[]
+): void {
+  // First check if the value of search contains any shortcut
+  const foundSearchEngine = searchEngines.find((engine) => search.includes(`!${engine.shortcut}`));
+  if (foundSearchEngine) {
+    // If a shortcut is found, use it
+    setSearchEngine(foundSearchEngine);
+    search.replace(`!${foundSearchEngine.shortcut}`, '');
+  } else {
+    // If no shortcut is found, do nothing (for now)
+  }
+}
diff --git a/src/modules/spotlight/index.tsx b/src/modules/spotlight/index.tsx
new file mode 100644
index 000000000..27e68ef6c
--- /dev/null
+++ b/src/modules/spotlight/index.tsx
@@ -0,0 +1 @@
+export { SpotlightModule } from './SpotlightModule';
diff --git a/yarn.lock b/yarn.lock
index 87dd94f19..d04d88e82 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1231,6 +1231,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@mantine/spotlight@npm:^5.8.2":
+  version: 5.8.2
+  resolution: "@mantine/spotlight@npm:5.8.2"
+  dependencies:
+    "@mantine/utils": 5.8.2
+  peerDependencies:
+    "@mantine/core": 5.8.2
+    "@mantine/hooks": 5.8.2
+    react: ">=16.8.0"
+    react-dom: ">=16.8.0"
+  checksum: 162eec73807649015d56359c8cdd565447b7ace86fd66705047657320be73e52e27119dc5f3b3e85367f316181b8cf9afeb18f9993cf396718fa20b5d1edccc1
+  languageName: node
+  linkType: hard
+
 "@mantine/ssr@npm:5.2.3":
   version: 5.2.3
   resolution: "@mantine/ssr@npm:5.2.3"
@@ -1301,6 +1315,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@mantine/utils@npm:5.8.2":
+  version: 5.8.2
+  resolution: "@mantine/utils@npm:5.8.2"
+  peerDependencies:
+    react: ">=16.8.0"
+  checksum: bb6b1de7e8bee92751410e634e7e475ea38eef4d822ee955aa885a739c4379c8d8cbdc12aee570b6c1dcf83ae1202297f1f1c3d78b11de3e3ffe64076edd3a71
+  languageName: node
+  linkType: hard
+
 "@motionone/animation@npm:^10.12.0":
   version: 10.13.1
   resolution: "@motionone/animation@npm:10.13.1"
@@ -4835,6 +4858,7 @@ __metadata:
     "@mantine/next": ^5.2.3
     "@mantine/notifications": ^5.7.2
     "@mantine/prism": ^5.0.0
+    "@mantine/spotlight": ^5.8.2
     "@next/bundle-analyzer": ^12.1.4
     "@next/eslint-plugin-next": ^12.1.4
     "@nivo/core": ^0.79.0

From 3d7449d871d1b34fc7d6ff2c100602dcdeae4442 Mon Sep 17 00:00:00 2001
From: ajnart <ajnart@pm.me>
Date: Tue, 22 Nov 2022 18:05:09 +0900
Subject: [PATCH 18/28] Address PR comments

---
 src/modules/torrents/TorrentsModule.tsx | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/modules/torrents/TorrentsModule.tsx b/src/modules/torrents/TorrentsModule.tsx
index a12e4b1a2..674979f61 100644
--- a/src/modules/torrents/TorrentsModule.tsx
+++ b/src/modules/torrents/TorrentsModule.tsx
@@ -23,6 +23,8 @@ import { AddItemShelfButton } from '../../components/AppShelf/AddAppShelfItem';
 import { useSetSafeInterval } from '../../tools/hooks/useSetSafeInterval';
 import { humanFileSize } from '../../tools/humanFileSize';
 
+const MIM_WIDTH_MOBILE = 576;
+
 export const TorrentsModule: IModule = {
   id: 'torrents-status',
   title: 'Torrent',
@@ -112,9 +114,9 @@ export default function TorrentsComponent() {
     <tr ref={ref}>
       <th>{t('card.table.header.name')}</th>
       <th>{t('card.table.header.size')}</th>
-      {width > 576 ? <th>{t('card.table.header.download')}</th> : null}
-      {width > 576 ? <th>{t('card.table.header.upload')}</th> : null}
-      {width > 576 ? <th>{t('card.table.header.estimatedTimeOfArrival')}</th> : null}
+      {width > MIM_WIDTH_MOBILE && <th>{t('card.table.header.download')}</th>}
+      {width > MIM_WIDTH_MOBILE && <th>{t('card.table.header.upload')}</th>}
+      {width > MIM_WIDTH_MOBILE && <th>{t('card.table.header.estimatedTimeOfArrival')}</th>}
       <th>{t('card.table.header.progress')}</th>
     </tr>
   );

From fb78736a83020028c122747319c177a9986c1f34 Mon Sep 17 00:00:00 2001
From: ajnart <ajnart@pm.me>
Date: Tue, 22 Nov 2022 18:15:37 +0900
Subject: [PATCH 19/28] Address PR comments

---
 src/modules/docker/DockerTable.tsx      | 13 +++++++------
 src/modules/torrents/TorrentsModule.tsx | 22 +++++++++-------------
 2 files changed, 16 insertions(+), 19 deletions(-)

diff --git a/src/modules/docker/DockerTable.tsx b/src/modules/docker/DockerTable.tsx
index feebe5123..10196ac5c 100644
--- a/src/modules/docker/DockerTable.tsx
+++ b/src/modules/docker/DockerTable.tsx
@@ -1,4 +1,4 @@
-import { Table, Checkbox, Group, Badge, createStyles, ScrollArea, TextInput } from '@mantine/core';
+import { Table, Checkbox, Group, Badge, createStyles, ScrollArea, TextInput, useMantineTheme } from '@mantine/core';
 import { useElementSize } from '@mantine/hooks';
 import { IconSearch } from '@tabler/icons';
 import Dockerode from 'dockerode';
@@ -24,6 +24,7 @@ export default function DockerTable({
   containers: Dockerode.ContainerInfo[];
   selection: Dockerode.ContainerInfo[];
 }) {
+  const MIN_WIDTH_MOBILE = useMantineTheme().breakpoints.xs;
   const [usedContainers, setContainers] = useState<Dockerode.ContainerInfo[]>(containers);
   const { classes, cx } = useStyles();
   const [search, setSearch] = useState('');
@@ -69,8 +70,8 @@ export default function DockerTable({
           />
         </td>
         <td>{element.Names[0].replace('/', '')}</td>
-        {width > 576 ? <td>{element.Image}</td> : null}
-        {width > 576 ? (
+        {width > MIN_WIDTH_MOBILE && <td>{element.Image}</td>}
+        {width > MIN_WIDTH_MOBILE && (
           <td>
             <Group>
               {element.Ports.sort((a, b) => a.PrivatePort - b.PrivatePort)
@@ -92,7 +93,7 @@ export default function DockerTable({
               )}
             </Group>
           </td>
-        ) : null}
+        )}
         <td>
           <ContainerState state={element.State} />
         </td>
@@ -123,8 +124,8 @@ export default function DockerTable({
               />
             </th>
             <th>{t('table.header.name')}</th>
-            {width > 576 ? <th>{t('table.header.image')}</th> : null}
-            {width > 576 ? <th>{t('table.header.ports')}</th> : null}
+            {width > MIN_WIDTH_MOBILE ? <th>{t('table.header.image')}</th> : null}
+            {width > MIN_WIDTH_MOBILE ? <th>{t('table.header.ports')}</th> : null}
             <th>{t('table.header.state')}</th>
           </tr>
         </thead>
diff --git a/src/modules/torrents/TorrentsModule.tsx b/src/modules/torrents/TorrentsModule.tsx
index 674979f61..cd010992c 100644
--- a/src/modules/torrents/TorrentsModule.tsx
+++ b/src/modules/torrents/TorrentsModule.tsx
@@ -9,6 +9,7 @@ import {
   ScrollArea,
   Center,
   Stack,
+  useMantineTheme,
 } from '@mantine/core';
 import { IconDownload as Download } from '@tabler/icons';
 import { useEffect, useState } from 'react';
@@ -23,8 +24,6 @@ import { AddItemShelfButton } from '../../components/AppShelf/AddAppShelfItem';
 import { useSetSafeInterval } from '../../tools/hooks/useSetSafeInterval';
 import { humanFileSize } from '../../tools/humanFileSize';
 
-const MIM_WIDTH_MOBILE = 576;
-
 export const TorrentsModule: IModule = {
   id: 'torrents-status',
   title: 'Torrent',
@@ -54,6 +53,7 @@ export default function TorrentsComponent() {
   const setSafeInterval = useSetSafeInterval();
   const [isLoading, setIsLoading] = useState(true);
   const { ref, width, height } = useElementSize();
+  const MIN_WIDTH_MOBILE = useMantineTheme().breakpoints.xs;
 
   const { t } = useTranslation(`modules/${TorrentsModule.id}`);
 
@@ -114,9 +114,9 @@ export default function TorrentsComponent() {
     <tr ref={ref}>
       <th>{t('card.table.header.name')}</th>
       <th>{t('card.table.header.size')}</th>
-      {width > MIM_WIDTH_MOBILE && <th>{t('card.table.header.download')}</th>}
-      {width > MIM_WIDTH_MOBILE && <th>{t('card.table.header.upload')}</th>}
-      {width > MIM_WIDTH_MOBILE && <th>{t('card.table.header.estimatedTimeOfArrival')}</th>}
+      {width > MIN_WIDTH_MOBILE && <th>{t('card.table.header.download')}</th>}
+      {width > MIN_WIDTH_MOBILE && <th>{t('card.table.header.upload')}</th>}
+      {width > MIN_WIDTH_MOBILE && <th>{t('card.table.header.estimatedTimeOfArrival')}</th>}
       <th>{t('card.table.header.progress')}</th>
     </tr>
   );
@@ -161,25 +161,21 @@ export default function TorrentsComponent() {
           <td>
             <Text size="xs">{humanFileSize(size)}</Text>
           </td>
-          {width > 576 ? (
+          {width > MIN_WIDTH_MOBILE && (
             <td>
               <Text size="xs">{downloadSpeed > 0 ? `${downloadSpeed.toFixed(1)} Mb/s` : '-'}</Text>
             </td>
-          ) : (
-            ''
           )}
-          {width > 576 ? (
+          {width > MIN_WIDTH_MOBILE && (
             <td>
               <Text size="xs">{uploadSpeed > 0 ? `${uploadSpeed.toFixed(1)} Mb/s` : '-'}</Text>
             </td>
-          ) : (
-            ''
           )}
-          {width > 576 ? (
+          {width > MIN_WIDTH_MOBILE && (
             <td>
               <Text size="xs">{torrent.eta <= 0 ? '∞' : calculateETA(torrent.eta)}</Text>
             </td>
-          ) : null}
+          )}
           <td>
             <Text>{(torrent.progress * 100).toFixed(1)}%</Text>
             <Progress

From 24c50dda290207e163a298bf040ec41615d9932a Mon Sep 17 00:00:00 2001
From: ajnart <ajnart@pm.me>
Date: Tue, 22 Nov 2022 18:17:05 +0900
Subject: [PATCH 20/28] Address PR comments

---
 src/modules/usenet/UsenetModule.tsx | 82 ++++++++++++++++-------------
 1 file changed, 45 insertions(+), 37 deletions(-)

diff --git a/src/modules/usenet/UsenetModule.tsx b/src/modules/usenet/UsenetModule.tsx
index 58b5b52f6..6545889ee 100644
--- a/src/modules/usenet/UsenetModule.tsx
+++ b/src/modules/usenet/UsenetModule.tsx
@@ -1,4 +1,14 @@
-import { Badge, Button, Group, Select, Stack, Tabs, Text, Title } from '@mantine/core';
+import {
+  Badge,
+  Button,
+  Group,
+  Select,
+  Stack,
+  Tabs,
+  Text,
+  Title,
+  useMantineTheme,
+} from '@mantine/core';
 import { IconDownload, IconPlayerPause, IconPlayerPlay } from '@tabler/icons';
 import { FunctionComponent, useEffect, useState } from 'react';
 
@@ -50,47 +60,45 @@ export const UsenetComponent: FunctionComponent = () => {
   }
 
   const { ref, width, height } = useElementSize();
+  const MIN_WIDTH_MOBILE = useMantineTheme().breakpoints.xs;
 
   return (
     <Tabs keepMounted={false} defaultValue="queue">
-        <Tabs.List ref={ref} mb="md" style={{ flex: 1 }}>
-            <Tabs.Tab value="queue">{t('tabs.queue')}</Tabs.Tab>
-            <Tabs.Tab value="history">{t('tabs.history')}</Tabs.Tab>
-            {data && (
-              <Group position="right" ml="auto">
-                {
-                  // Only show if the width is > 400px
-                  width > 400 && (
-                    <>
-                      <Badge>{humanFileSize(data?.speed)}/s</Badge>
-                      <Badge>
-                        {t('info.sizeLeft')}: {humanFileSize(data?.sizeLeft)}
-                      </Badge>
-                    </>
-                  )
-                }
-
-                {data.paused ? (
-                  <Button uppercase onClick={() => resume()} radius="xl" size="xs">
-                    <IconPlayerPlay size={12} style={{ marginRight: 5 }} /> {t('info.paused')}
-                  </Button>
-                ) : (
-                  <Button uppercase onClick={() => pause()} radius="xl" size="xs">
-                    <IconPlayerPause size={12} style={{ marginRight: 5 }} />{' '}
-                    {dayjs.duration(data.eta, 's').format('HH:mm')}
-                  </Button>
-                )}
-              </Group>
+      <Tabs.List ref={ref} mb="md" style={{ flex: 1 }}>
+        <Tabs.Tab value="queue">{t('tabs.queue')}</Tabs.Tab>
+        <Tabs.Tab value="history">{t('tabs.history')}</Tabs.Tab>
+        {data && (
+          <Group position="right" ml="auto">
+            {width > MIN_WIDTH_MOBILE && (
+              <>
+                <Badge>{humanFileSize(data?.speed)}/s</Badge>
+                <Badge>
+                  {t('info.sizeLeft')}: {humanFileSize(data?.sizeLeft)}
+                </Badge>
+              </>
             )}
-        </Tabs.List>
-        {downloadServices.length > 1 && (
-          <Select
-            value={selectedServiceId}
-            onChange={setSelectedService}
-            ml="xs"
-            data={downloadServices.map((service) => ({ value: service.id, label: service.name }))}
-          />
+
+            {data.paused ? (
+              <Button uppercase onClick={() => resume()} radius="xl" size="xs">
+                <IconPlayerPlay size={12} style={{ marginRight: 5 }} /> {t('info.paused')}
+              </Button>
+            ) : (
+              <Button uppercase onClick={() => pause()} radius="xl" size="xs">
+                <IconPlayerPause size={12} style={{ marginRight: 5 }} />{' '}
+                {dayjs.duration(data.eta, 's').format('HH:mm')}
+              </Button>
+            )}
+          </Group>
         )}
+      </Tabs.List>
+      {downloadServices.length > 1 && (
+        <Select
+          value={selectedServiceId}
+          onChange={setSelectedService}
+          ml="xs"
+          data={downloadServices.map((service) => ({ value: service.id, label: service.name }))}
+        />
+      )}
       <Tabs.Panel value="queue">
         <UsenetQueueList serviceId={selectedServiceId} />
       </Tabs.Panel>

From 940513dc32fec53aa8ea7ab4a3c8a085d2af1527 Mon Sep 17 00:00:00 2001
From: ajnart <ajnart@pm.me>
Date: Tue, 29 Nov 2022 16:22:27 +0900
Subject: [PATCH 21/28] Advancement in the new spotlight

---
 src/modules/spotlight/SpotlightModule.tsx | 195 +++++++++++++++-------
 1 file changed, 135 insertions(+), 60 deletions(-)

diff --git a/src/modules/spotlight/SpotlightModule.tsx b/src/modules/spotlight/SpotlightModule.tsx
index c6526257b..3fb03528e 100644
--- a/src/modules/spotlight/SpotlightModule.tsx
+++ b/src/modules/spotlight/SpotlightModule.tsx
@@ -1,8 +1,21 @@
-import { Button, Group } from '@mantine/core';
-import { IconSearch, IconBrandYoutube, IconDownload, IconMovie } from '@tabler/icons';
-import { SpotlightProvider, openSpotlight } from '@mantine/spotlight';
-import type { SpotlightAction } from '@mantine/spotlight';
-import { useState } from 'react';
+import {
+  ActionIcon,
+  Group,
+  Kbd,
+  Select,
+  Text,
+  TextInput,
+} from '@mantine/core';
+import {
+  IconSearch,
+  IconBrandYoutube,
+  IconDownload,
+  IconMovie,
+  IconBrandGoogle,
+} from '@tabler/icons';
+import { forwardRef, useState } from 'react';
+import { useHotkeys } from '@mantine/hooks';
+import { showNotification } from '@mantine/notifications';
 import { IModule } from '../ModuleTypes';
 
 export const SpotlightModule: IModule = {
@@ -12,95 +25,157 @@ export const SpotlightModule: IModule = {
   id: 'spotlight',
 };
 
-interface SearchEngine {
-  name: string;
-  enabled: boolean;
-  description: string;
-  icon: React.ReactNode;
-  url: string;
-  shortcut: string;
-}
-const searchEngines: SearchEngine[] = [
+const searchEngines = [
   {
-    name: 'Google',
-    enabled: true,
+    label: 'Google',
+    disabled: false,
     description: 'Search using your search engine (defined in settings)',
     icon: <IconSearch />,
     url: 'https://www.google.com/search?q=',
     shortcut: 'g',
   },
   {
-    name: 'Youtube',
-    enabled: true,
+    label: 'Youtube',
+    disabled: false,
     description: 'Search Youtube',
     icon: <IconBrandYoutube />,
     url: 'https://www.youtube.com/results?search_query=',
     shortcut: 'y',
   },
   {
-    name: 'Download',
-    enabled: true,
+    label: 'Download',
+    disabled: false,
     description: 'Search for torrents',
     icon: <IconDownload />,
     url: 'https://1337x.to/search/',
     shortcut: 't',
   },
   {
-    name: 'Movies',
+    label: 'Movies',
+    disabled: true,
+    description: 'Search for movies using Overseerr',
     icon: <IconMovie />,
-    enabled: false,
+    url: 'https://www.imdb.com/find?q=',
+    shortcut: 'm',
+  },
+];
+
+const data: ItemProps[] = [
+  {
+    icon: <IconBrandGoogle />,
+    disabled: false,
+    label: 'Google',
+    value: 'google',
+    description: 'Search using your search engine (defined in settings)',
+    url: 'https://www.google.com/search?q=',
+    shortcut: 'g',
+  },
+
+  {
+    icon: <IconDownload />,
+    disabled: false,
+    label: 'Download',
+    value: 'download',
+    description: 'Search for torrents',
+    url: 'https://1337x.to/search/',
+    shortcut: 't',
+  },
+  {
+    icon: <IconBrandYoutube />,
+    disabled: false,
+    label: 'Youtube',
+    value: 'youtube',
+    description: 'Search Youtube',
+    url: 'https://www.youtube.com/results?search_query=',
+    shortcut: 'y',
+  },
+  {
+    icon: <IconMovie />,
+    disabled: true,
+    label: 'Movies',
+    value: 'movies',
     description: 'Search for movies using Overseerr',
     url: 'https://www.imdb.com/find?q=',
     shortcut: 'm',
   },
 ];
 
-function SpotlightControl() {
+interface ItemProps extends React.ComponentPropsWithoutRef<'div'> {
+  label: string;
+  disabled: boolean;
+  value: string;
+  description: string;
+  icon: React.ReactNode;
+  url: string;
+  shortcut: string;
+}
+
+export function SpotlightModuleComponent(props: any) {
+  const [selectedSearchEngine, setSearchEngine] = useState<ItemProps>(data[0]);
+
+  const SelectItem = forwardRef<HTMLDivElement, ItemProps>(
+    ({ icon, label, description, shortcut, ...others }: ItemProps, ref) => (
+      <div ref={ref} {...others}>
+        <Group position="apart" noWrap>
+          <Group noWrap>
+            {icon}
+            <div>
+              <Text size="sm">{label}</Text>
+              <Text size="xs" opacity={0.65}>
+                {description}
+              </Text>
+            </div>
+          </Group>
+          <Kbd>{shortcut}</Kbd>
+        </Group>
+      </div>
+    )
+  );
+
+  const [opened, setOpened] = useState(false);
+  useHotkeys([['mod+K', () => setOpened(!opened)]]);
   return (
-    <Group position="center">
-      <Button onClick={() => openSpotlight()}>Open spotlight</Button>
+    <Group grow>
+      <Select
+        icon={selectedSearchEngine.icon}
+        onSearchChange={(search) =>
+          setSearchEngine(
+            data.find((item) => item.label.toLowerCase().includes(search.toLowerCase())) ||
+              selectedSearchEngine
+          )
+        }
+        withinPortal
+        defaultValue={selectedSearchEngine.value}
+        itemComponent={SelectItem}
+        data={data}
+        maxDropdownHeight={400}
+      />
+      <TextInput />
     </Group>
   );
 }
 
-export function SpotlightModuleComponent(props: any) {
-  const [selectedSearchEngine, setSearchEngine] = useState<SearchEngine>(searchEngines[0]);
-  const actions: SpotlightAction[] = searchEngines.map((engine) => ({
-    title: engine.name,
-    description: engine.description,
-    icon: engine.icon,
-    onTrigger: () => {
-      setSearchEngine(engine);
-    },
-    closeOnTrigger: false,
-  }));
-  return (
-    <SpotlightProvider
-      actions={actions}
-      searchIcon={selectedSearchEngine.icon}
-      searchPlaceholder={selectedSearchEngine.description}
-      shortcut="mod + k"
-      nothingFoundMessage="Press enter to search..."
-      onQueryChange={(researchString) =>
-        useSearchBrowser(researchString, selectedSearchEngine, setSearchEngine, searchEngines)
-      }
-    >
-      <SpotlightControl />
-    </SpotlightProvider>
-  );
-}
-function useSearchBrowser(
-  search: string,
-  selectedSearchEngine: SearchEngine,
-  setSearchEngine: React.Dispatch<React.SetStateAction<SearchEngine>>,
-  searchEngines: SearchEngine[]
+function tryMatchSearch(
+  query: string,
+  selectedSearchEngine: ItemProps,
+  setSearchEngine: React.Dispatch<React.SetStateAction<ItemProps>>,
+  searchEngines: ItemProps[]
 ): void {
-  // First check if the value of search contains any shortcut
-  const foundSearchEngine = searchEngines.find((engine) => search.includes(`!${engine.shortcut}`));
+  // First check if the value of search contains any shortcut. Make sure it is not disabled
+  const foundSearchEngine = searchEngines.find(
+    (engine) => query.includes(`!${engine.shortcut}`) && !engine.disabled
+  );
   if (foundSearchEngine) {
-    // If a shortcut is found, use it
+    // If a shortcut is found, use it. Except if it is disabled
     setSearchEngine(foundSearchEngine);
-    search.replace(`!${foundSearchEngine.shortcut}`, '');
+    showNotification({
+      radius: 'lg',
+      disallowClose: true,
+      id: 'spotlight',
+      autoClose: 1000,
+      icon: <ActionIcon size="sm">{foundSearchEngine.icon}</ActionIcon>,
+      message: `Using ${foundSearchEngine.label} as search engine`,
+    });
   } else {
     // If no shortcut is found, do nothing (for now)
   }

From f544c621e42f74c484a197460dc9346d3565ce99 Mon Sep 17 00:00:00 2001
From: ajnart <ajnart@pm.me>
Date: Tue, 29 Nov 2022 20:30:37 +0900
Subject: [PATCH 22/28] Fix logo noWrap argument

---
 src/components/layout/Logo.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/layout/Logo.tsx b/src/components/layout/Logo.tsx
index 530314b57..9a8c32a3c 100644
--- a/src/components/layout/Logo.tsx
+++ b/src/components/layout/Logo.tsx
@@ -9,7 +9,7 @@ export function Logo({ style, withoutText }: any) {
   const { primaryColor, secondaryColor } = useColorTheme();
 
   return (
-    <Group spacing="xs">
+    <Group spacing="xs" noWrap>
       <Image
         width={50}
         src={config.settings.logo || '/imgs/logo/logo.png'}

From 6642328f2a1c04c554063df3b2481d831b5a0acb Mon Sep 17 00:00:00 2001
From: ajnart <ajnart@pm.me>
Date: Tue, 29 Nov 2022 20:30:53 +0900
Subject: [PATCH 23/28] Rework header

---
 src/components/layout/header/Header.tsx | 36 ++++++++++---------------
 1 file changed, 14 insertions(+), 22 deletions(-)

diff --git a/src/components/layout/header/Header.tsx b/src/components/layout/header/Header.tsx
index 731c6dc52..445cf80aa 100644
--- a/src/components/layout/header/Header.tsx
+++ b/src/components/layout/header/Header.tsx
@@ -1,27 +1,21 @@
-import { Box, createStyles, Group, Header as Head, useMantineColorScheme } from '@mantine/core';
+import {
+  Group,
+  Header as Head,
+  useMantineColorScheme,
+  useMantineTheme,
+} from '@mantine/core';
+import { useViewportSize } from '@mantine/hooks';
 import { AddItemShelfButton } from '../../AppShelf/AddAppShelfItem';
 
 import DockerMenuButton from '../../../modules/docker/DockerModule';
-import SearchBar from '../../../modules/search/SearchModule';
 import { SettingsMenuButton } from '../../Settings/SettingsMenu';
 import { Logo } from '../Logo';
 import { useConfig } from '../../../tools/state';
-
-const useStyles = createStyles((theme) => ({
-  hide: {
-    [theme.fn.smallerThan('xs')]: {
-      display: 'none',
-    },
-  },
-  burger: {
-    [theme.fn.largerThan('sm')]: {
-      display: 'none',
-    },
-  },
-}));
+import { SearchModuleComponent } from '../../../modules/search/SearchModule';
 
 export function Header(props: any) {
-  const { classes } = useStyles();
+  const { width } = useViewportSize();
+  const MIN_WIDTH_MOBILE = useMantineTheme().breakpoints.xs;
   const { config } = useConfig();
   const { colorScheme } = useMantineColorScheme();
 
@@ -35,12 +29,10 @@ export function Header(props: any) {
       ${(config.settings.appOpacity || 100) / 100}`,
       }}
     >
-      <Group p="xs" position="apart">
-        <Box className={classes.hide}>
-          <Logo style={{ fontSize: 22 }} />
-        </Box>
-        <Group noWrap>
-          <SearchBar />
+      <Group p="xs" noWrap grow>
+        {width > MIN_WIDTH_MOBILE && <Logo style={{ fontSize: 22 }} />}
+        <Group position="right" noWrap>
+          <SearchModuleComponent />
           <DockerMenuButton />
           <SettingsMenuButton />
           <AddItemShelfButton />

From 6b5f91d977e65bbebdbe52a41100fed1c4edf423 Mon Sep 17 00:00:00 2001
From: ajnart <ajnart@pm.me>
Date: Tue, 29 Nov 2022 20:31:18 +0900
Subject: [PATCH 24/28] Styling for Overseerr request

---
 src/modules/overseerr/RequestModal.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/modules/overseerr/RequestModal.tsx b/src/modules/overseerr/RequestModal.tsx
index 79bfd33e1..93e6e4920 100644
--- a/src/modules/overseerr/RequestModal.tsx
+++ b/src/modules/overseerr/RequestModal.tsx
@@ -188,7 +188,7 @@ export function TvRequestModal({
           </thead>
           <tbody>{rows}</tbody>
         </Table>
-        <Group>
+        <Group position="center">
           <Button variant="outline" color="gray" onClick={() => setOpened(false)}>
             {t('popup.item.buttons.cancel')}
           </Button>

From ed6b18867915a1187bcb19b4f48476e27b43a073 Mon Sep 17 00:00:00 2001
From: ajnart <ajnart@pm.me>
Date: Tue, 29 Nov 2022 20:31:28 +0900
Subject: [PATCH 25/28] Styling for calendar

---
 src/modules/calendar/CalendarModule.tsx | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/src/modules/calendar/CalendarModule.tsx b/src/modules/calendar/CalendarModule.tsx
index af78d70bc..bdebf072b 100644
--- a/src/modules/calendar/CalendarModule.tsx
+++ b/src/modules/calendar/CalendarModule.tsx
@@ -144,12 +144,6 @@ export default function CalendarComponent(props: any) {
               margin: 1,
             }
       }
-      styles={{
-        calendarHeader: {
-          marginRight: 40,
-          marginLeft: 40,
-        },
-      }}
       allowLevelChange={false}
       dayClassName={(date, modifiers) => cx({ [classes.weekend]: modifiers.weekend })}
       renderDay={(renderdate) => (

From c53de3acfe7a7f70b0a4f1e3228b909ffbc80eaa Mon Sep 17 00:00:00 2001
From: ajnart <ajnart@pm.me>
Date: Tue, 29 Nov 2022 20:32:24 +0900
Subject: [PATCH 26/28] Entirely rework the search module
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

It's not as bad anymore 🥳
---
 package.json                              |   1 -
 public/locales/en/modules/search.json     |  23 +-
 src/components/layout/header/Header.tsx   |   7 +-
 src/modules/index.ts                      |   1 -
 src/modules/search/SearchModule.tsx       | 366 +++++++++++-----------
 src/modules/spotlight/SpotlightModule.tsx | 182 -----------
 src/modules/spotlight/index.tsx           |   1 -
 yarn.lock                                 |  24 --
 8 files changed, 200 insertions(+), 405 deletions(-)
 delete mode 100644 src/modules/spotlight/SpotlightModule.tsx
 delete mode 100644 src/modules/spotlight/index.tsx

diff --git a/package.json b/package.json
index 47e1b68cb..b81ca8858 100644
--- a/package.json
+++ b/package.json
@@ -42,7 +42,6 @@
     "@mantine/next": "^5.2.3",
     "@mantine/notifications": "^5.7.2",
     "@mantine/prism": "^5.0.0",
-    "@mantine/spotlight": "^5.8.2",
     "@nivo/core": "^0.79.0",
     "@nivo/line": "^0.79.1",
     "@tabler/icons": "^1.78.0",
diff --git a/public/locales/en/modules/search.json b/public/locales/en/modules/search.json
index 38d1aa1a2..cf3f50de0 100644
--- a/public/locales/en/modules/search.json
+++ b/public/locales/en/modules/search.json
@@ -5,5 +5,26 @@
   },
   "input": {
     "placeholder": "Search the web..."
-  }
+  },
+  "switched-to": "Switched to",
+  "searchEngines": {
+    "search": {
+      "name": "Web",
+      "description": "Search using your search engine (defined in settings)"
+    },
+    "youtube": {
+      "name": "Youtube",
+      "description": "Search on Youtube"
+    },
+    "torrents": {
+      "name": "Torrents",
+      "description": "Search for Torrents"
+    },
+    "overseerr": {
+      "name": "Overseerr",
+      "description": "Search for Movies and TV Shows using Overseerr (module must be enabled)"
+    }
+  },
+  "tip": "You can select the search bar with the shortcut ",
+  "switchedSearchEngine": "Switched to searching with {{searchEngine}}"
 }
\ No newline at end of file
diff --git a/src/components/layout/header/Header.tsx b/src/components/layout/header/Header.tsx
index 445cf80aa..803ea7690 100644
--- a/src/components/layout/header/Header.tsx
+++ b/src/components/layout/header/Header.tsx
@@ -1,9 +1,4 @@
-import {
-  Group,
-  Header as Head,
-  useMantineColorScheme,
-  useMantineTheme,
-} from '@mantine/core';
+import { Group, Header as Head, useMantineColorScheme, useMantineTheme } from '@mantine/core';
 import { useViewportSize } from '@mantine/hooks';
 import { AddItemShelfButton } from '../../AppShelf/AddAppShelfItem';
 
diff --git a/src/modules/index.ts b/src/modules/index.ts
index c4e86eadf..f3b7292a7 100644
--- a/src/modules/index.ts
+++ b/src/modules/index.ts
@@ -8,4 +8,3 @@ export * from './weather';
 export * from './docker';
 export * from './overseerr';
 export * from './usenet';
-export * from './spotlight';
diff --git a/src/modules/search/SearchModule.tsx b/src/modules/search/SearchModule.tsx
index 6540178c3..2974e3c29 100644
--- a/src/modules/search/SearchModule.tsx
+++ b/src/modules/search/SearchModule.tsx
@@ -1,236 +1,159 @@
-import { Kbd, createStyles, Autocomplete, Popover, ScrollArea, Divider } from '@mantine/core';
-import { useClickOutside, useDebouncedValue, useHotkeys } from '@mantine/hooks';
-import { useForm } from '@mantine/form';
-import React, { forwardRef, useEffect, useRef, useState } from 'react';
 import {
-  IconSearch as Search,
-  IconBrandYoutube as BrandYoutube,
-  IconDownload as Download,
-  IconMovie,
-} from '@tabler/icons';
+  ActionIcon,
+  Box,
+  createStyles,
+  Divider,
+  Kbd,
+  Menu,
+  Popover,
+  ScrollArea,
+  TextInput,
+  Tooltip,
+} from '@mantine/core';
+import { IconSearch, IconBrandYoutube, IconDownload, IconMovie } from '@tabler/icons';
+import React, { useEffect, useRef, useState } from 'react';
+import { useDebouncedValue, useHotkeys } from '@mantine/hooks';
+import { showNotification } from '@mantine/notifications';
 import { useTranslation } from 'next-i18next';
 import axios from 'axios';
-import { showNotification } from '@mantine/notifications';
-import { useConfig } from '../../tools/state';
 import { IModule } from '../ModuleTypes';
+import { useConfig } from '../../tools/state';
 import { OverseerrModule } from '../overseerr';
+import Tip from '../../components/layout/Tip';
 import { OverseerrMediaDisplay } from '../common';
-import SmallServiceItem from '../../components/AppShelf/SmallServiceItem';
-
-const useStyles = createStyles((theme) => ({
-  hide: {
-    [theme.fn.smallerThan('sm')]: {
-      display: 'none',
-    },
-    display: 'flex',
-    alignItems: 'center',
-  },
-}));
 
 export const SearchModule: IModule = {
   title: 'Search',
-  icon: Search,
-  component: SearchBar,
+  icon: IconSearch,
+  component: SearchModuleComponent,
   id: 'search',
 };
 
-export default function SearchBar(props: any) {
-  const { classes, cx } = useStyles();
-  // Config
+interface ItemProps extends React.ComponentPropsWithoutRef<'div'> {
+  label: string;
+  disabled: boolean;
+  value: string;
+  description: string;
+  icon: React.ReactNode;
+  url: string;
+  shortcut: string;
+}
+
+const useStyles = createStyles((theme) => ({
+  item: {
+    '&[data-hovered]': {
+      backgroundColor: theme.colors[theme.primaryColor][theme.fn.primaryShade()],
+      color: theme.white,
+    },
+  },
+}));
+
+export function SearchModuleComponent(props: any) {
   const { config } = useConfig();
-  const isModuleEnabled = config.modules?.[SearchModule.id]?.enabled ?? false;
+  const { t } = useTranslation('modules/search');
+  const [searchQuery, setSearchQuery] = useState('');
+  const [debounced, cancel] = useDebouncedValue(searchQuery, 250);
+  const queryUrl = config.settings.searchUrl;
   const isOverseerrEnabled = config.modules?.[OverseerrModule.id]?.enabled ?? false;
   const OverseerrService = config.services.find(
     (service) => service.type === 'Overseerr' || service.type === 'Jellyseerr'
   );
-  const queryUrl = config.settings.searchUrl ?? 'https://www.google.com/search?q=';
 
-  const [OverseerrResults, setOverseerrResults] = useState<any[]>([]);
-  const [loading, setLoading] = useState<boolean>(false);
-  const [icon, setIcon] = useState(<Search />);
-  const [results, setResults] = useState<any[]>([]);
-  const [opened, setOpened] = useState(false);
-  const ref = useClickOutside(() => setOpened(false));
-
-  const textInput = useRef<HTMLInputElement>();
-  useHotkeys([['ctrl+K', () => textInput.current && textInput.current.focus()]]);
-
-  const form = useForm({
-    initialValues: {
-      query: '',
+  const searchEnginesList: ItemProps[] = [
+    {
+      icon: <IconSearch />,
+      disabled: false,
+      label: t('searchEngines.search.name'),
+      value: 'search',
+      description: t('searchEngines.search.description'),
+      url: queryUrl,
+      shortcut: 's',
     },
-  });
-  const [debounced, cancel] = useDebouncedValue(form.values.query, 250);
-  const { t } = useTranslation('modules/search');
+    {
+      icon: <IconDownload />,
+      disabled: false,
+      label: t('searchEngines.torrents.name'),
+      value: 'torrents',
+      description: t('searchEngines.torrents.description'),
+      url: 'https://www.torrentdownloads.me/search/?search=',
+      shortcut: 't',
+    },
+    {
+      icon: <IconBrandYoutube />,
+      disabled: false,
+      label: t('searchEngines.youtube.name'),
+      value: 'youtube',
+      description: t('searchEngines.youtube.description'),
+      url: 'https://www.youtube.com/results?search_query=',
+      shortcut: 'y',
+    },
+    {
+      icon: <IconMovie />,
+      disabled: !(isOverseerrEnabled === true && OverseerrService !== undefined),
+      label: t('searchEngines.overseerr.name'),
+      value: 'overseerr',
+      description: t('searchEngines.overseerr.description'),
+      url: `${OverseerrService?.url}search?query=`,
+      shortcut: 'm',
+    },
+  ];
+  const [selectedSearchEngine, setSearchEngine] = useState<ItemProps>(searchEnginesList[0]);
+  const textInput = useRef<HTMLInputElement>(null);
+  useHotkeys([['mod+K', () => textInput.current && textInput.current.focus()]]);
+  const { classes } = useStyles();
+  const openInNewTab = config.settings.searchNewTab ? '_blank' : '_self';
+  const [OverseerrResults, setOverseerrResults] = useState<any[]>([]);
+  const [opened, setOpened] = useState(false);
 
   useEffect(() => {
-    if (OverseerrService === undefined && isOverseerrEnabled) {
-      showNotification({
-        title: 'Overseerr integration',
-        message:
-          'Module enabled but no service is configured with the type "Overseerr" / "Jellyseerr"',
-        color: 'red',
+    if (debounced !== '' && selectedSearchEngine.value === 'overseerr' && searchQuery.length > 3) {
+      axios.get(`/api/modules/overseerr?query=${searchQuery}`).then((res) => {
+        setOverseerrResults(res.data.results ?? []);
       });
     }
-  }, [OverseerrService, isOverseerrEnabled]);
-
-  useEffect(() => {
-    if (
-      form.values.query !== debounced ||
-      form.values.query === '' ||
-      (form.values.query.startsWith('!') && !form.values.query.startsWith('!os'))
-    ) {
-      return;
-    }
-    if (form.values.query.startsWith('!os')) {
-      axios
-        .get(`/api/modules/overseerr?query=${form.values.query.replace('!os', '').trim()}`)
-        .then((res) => {
-          setOverseerrResults(res.data.results ?? []);
-          setLoading(false);
-        });
-      setLoading(true);
-    } else {
-      setOverseerrResults([]);
-      axios
-        .get(`/api/modules/search?q=${form.values.query}`)
-        .then((res) => setResults(res.data ?? []));
-    }
   }, [debounced]);
 
+  const isModuleEnabled = config.modules?.[SearchModule.id]?.enabled ?? false;
   if (!isModuleEnabled) {
     return null;
   }
-  // Match all the services that contain the query in their name if the query is not empty
-  const matchingServices = config.services.filter((service) => {
-    if (form.values.query === '' || form.values.query === undefined) {
-      return false;
-    }
-    return service.name.toLowerCase().includes(form.values.query.toLowerCase());
-  });
-  const autocompleteData = matchingServices.map((service) => ({
-    label: service.name,
-    value: service.name,
-    icon: service.icon,
-    url: service.openedUrl ?? service.url,
-  }));
-  // Append the matching results to the autocomplete data
-  const autoCompleteResults = results.map((result) => ({
-    label: result.phrase,
-    value: result.phrase,
-    icon: result.icon,
-    url: result.url,
-  }));
-  autocompleteData.push(...autoCompleteResults);
-
-  const AutoCompleteItem = forwardRef<HTMLDivElement, any>(
-    ({ label, value, icon, url, ...others }: any, ref) => (
-      <div ref={ref} {...others}>
-        <SmallServiceItem service={{ label, value, icon, url }} />
-      </div>
-    )
-  );
-
+  //TODO: Fix the bug where clicking anything inside the Modal to ask for a movie
+  // will close it (Because it closes the underlying Popover)
   return (
-    <form
-      onChange={() => {
-        // If query contains !yt or !t add "Searching on YouTube" or "Searching torrent"
-        const query = form.values.query.trim();
-        switch (query.substring(0, 3)) {
-          case '!yt':
-            setIcon(<BrandYoutube />);
-            break;
-          case '!t ':
-            setIcon(<Download />);
-            break;
-          case '!os':
-            setIcon(<IconMovie />);
-            break;
-          default:
-            setIcon(<Search />);
-            break;
-        }
-      }}
-      onSubmit={form.onSubmit((values) => {
-        const query = values.query.trim();
-        const open_in = config.settings.searchNewTab ? '_blank' : '_self';
-        setTimeout(() => {
-          form.setValues({ query: '' });
-          switch (query.substring(0, 3)) {
-            case '!yt':
-              window.open(
-                `https://www.youtube.com/results?search_query=${query.substring(3)}`,
-                open_in
-              );
-              break;
-            case '!t ':
-              window.open(
-                `https://www.torrentdownloads.me/search/?search=${query.substring(3)}`,
-                open_in
-              );
-              break;
-            case '!os':
-              break;
-            default:
-              window.open(
-                `${
-                  queryUrl.includes('%s') ? queryUrl.replace('%s', query) : `${queryUrl}${query}`
-                }`,
-                open_in
-              );
-              break;
-          }
-        }, 500);
-      })}
-    >
+    <Box style={{ width: '100%', maxWidth: 400, minWidth: 300 }}>
       <Popover
-        opened={OverseerrResults.length > 0 && opened}
+        opened={OverseerrResults.length > 0 && opened && searchQuery.length > 3}
         position="bottom"
-        withArrow
         withinPortal
         shadow="md"
         radius="md"
         zIndex={100}
-        trapFocus
         transition="pop-top-right"
       >
         <Popover.Target>
-          <Autocomplete
+          <TextInput
+            ref={textInput}
             onFocusCapture={() => setOpened(true)}
             autoFocus
-            variant="filled"
-            itemComponent={AutoCompleteItem}
-            onItemSubmit={(item) => {
-              setOpened(false);
-              if (item.url) {
-                results.splice(0, autocompleteData.length);
-                form.reset();
-                window.open(item.url);
+            rightSection={<SearchModuleMenu />}
+            placeholder={t(`searchEngines.${selectedSearchEngine.value}.description`)}
+            value={searchQuery}
+            onChange={(event) => tryMatchSearchEngine(event.currentTarget.value, setSearchQuery)}
+            // Replace %s if it is in selectedSearchEngine.url with searchQuery, otherwise append searchQuery at the end of it
+            onKeyDown={(event) => {
+              if (event.key === 'Enter' && searchQuery.length > 0) {
+                if (selectedSearchEngine.url.includes('%s')) {
+                  window.open(selectedSearchEngine.url.replace('%s', searchQuery), openInNewTab);
+                } else {
+                  window.open(selectedSearchEngine.url + searchQuery, openInNewTab);
+                }
               }
             }}
-            data={autocompleteData}
-            icon={icon}
-            ref={textInput}
-            rightSectionWidth={90}
-            rightSection={
-              <div className={classes.hide}>
-                <Kbd>Ctrl</Kbd>
-                <span style={{ margin: '0 5px' }}>+</span>
-                <Kbd>K</Kbd>
-              </div>
-            }
-            radius="md"
-            size="md"
-            styles={{ rightSection: { pointerEvents: 'none' } }}
-            placeholder={t('input.placeholder')}
-            {...props}
-            {...form.getInputProps('query')}
           />
         </Popover.Target>
-
         <Popover.Dropdown>
-          <div ref={ref}>
-            <ScrollArea style={{ height: 400, width: 400 }} offsetScrollbars>
+          <div>
+            <ScrollArea style={{ height: 400, width: 420 }} offsetScrollbars>
               {OverseerrResults.slice(0, 5).map((result, index) => (
                 <React.Fragment key={index}>
                   <OverseerrMediaDisplay key={result.id} media={result} />
@@ -241,6 +164,71 @@ export default function SearchBar(props: any) {
           </div>
         </Popover.Dropdown>
       </Popover>
-    </form>
+    </Box>
   );
+
+  function tryMatchSearchEngine(query: string, setSearchQuery: (value: string) => void) {
+    const foundSearchEngine = searchEnginesList.find(
+      (engine) => query.includes(`!${engine.shortcut}`) && !engine.disabled
+    );
+    if (foundSearchEngine) {
+      setSearchQuery(query.replace(`!${foundSearchEngine.shortcut}`, ''));
+      changeSearchEngine(foundSearchEngine);
+    } else {
+      setSearchQuery(query);
+    }
+  }
+
+  function SearchModuleMenu() {
+    return (
+      <Menu shadow="md" width={200} withinPortal classNames={classes}>
+        <Menu.Target>
+          <ActionIcon>{selectedSearchEngine.icon}</ActionIcon>
+        </Menu.Target>
+
+        <Menu.Dropdown>
+          {searchEnginesList.map((item) => (
+            <Tooltip
+              multiline
+              label={item.description}
+              withinPortal
+              width={200}
+              position="left"
+              key={item.value}
+            >
+              <Menu.Item
+                key={item.value}
+                icon={item.icon}
+                rightSection={<Kbd>!{item.shortcut}</Kbd>}
+                disabled={item.disabled}
+                onClick={() => {
+                  changeSearchEngine(item);
+                }}
+              >
+                {item.label}
+              </Menu.Item>
+            </Tooltip>
+          ))}
+          <Menu.Divider />
+          <Menu.Label>
+            <Tip>
+              {t('tip')} <Kbd>mod+k</Kbd>{' '}
+            </Tip>
+          </Menu.Label>
+        </Menu.Dropdown>
+      </Menu>
+    );
+  }
+
+  function changeSearchEngine(item: ItemProps) {
+    setSearchEngine(item);
+    showNotification({
+      radius: 'lg',
+      disallowClose: true,
+      id: 'spotlight',
+      autoClose: 1000,
+      icon: <ActionIcon size="sm">{item.icon}</ActionIcon>,
+      message: t('switchedSearchEngine', { searchEngine: t(`searchEngines.${item.value}.name`) }),
+    });
+  }
 }
diff --git a/src/modules/spotlight/SpotlightModule.tsx b/src/modules/spotlight/SpotlightModule.tsx
deleted file mode 100644
index 3fb03528e..000000000
--- a/src/modules/spotlight/SpotlightModule.tsx
+++ /dev/null
@@ -1,182 +0,0 @@
-import {
-  ActionIcon,
-  Group,
-  Kbd,
-  Select,
-  Text,
-  TextInput,
-} from '@mantine/core';
-import {
-  IconSearch,
-  IconBrandYoutube,
-  IconDownload,
-  IconMovie,
-  IconBrandGoogle,
-} from '@tabler/icons';
-import { forwardRef, useState } from 'react';
-import { useHotkeys } from '@mantine/hooks';
-import { showNotification } from '@mantine/notifications';
-import { IModule } from '../ModuleTypes';
-
-export const SpotlightModule: IModule = {
-  title: 'Spotlight',
-  icon: IconSearch,
-  component: SpotlightModuleComponent,
-  id: 'spotlight',
-};
-
-const searchEngines = [
-  {
-    label: 'Google',
-    disabled: false,
-    description: 'Search using your search engine (defined in settings)',
-    icon: <IconSearch />,
-    url: 'https://www.google.com/search?q=',
-    shortcut: 'g',
-  },
-  {
-    label: 'Youtube',
-    disabled: false,
-    description: 'Search Youtube',
-    icon: <IconBrandYoutube />,
-    url: 'https://www.youtube.com/results?search_query=',
-    shortcut: 'y',
-  },
-  {
-    label: 'Download',
-    disabled: false,
-    description: 'Search for torrents',
-    icon: <IconDownload />,
-    url: 'https://1337x.to/search/',
-    shortcut: 't',
-  },
-  {
-    label: 'Movies',
-    disabled: true,
-    description: 'Search for movies using Overseerr',
-    icon: <IconMovie />,
-    url: 'https://www.imdb.com/find?q=',
-    shortcut: 'm',
-  },
-];
-
-const data: ItemProps[] = [
-  {
-    icon: <IconBrandGoogle />,
-    disabled: false,
-    label: 'Google',
-    value: 'google',
-    description: 'Search using your search engine (defined in settings)',
-    url: 'https://www.google.com/search?q=',
-    shortcut: 'g',
-  },
-
-  {
-    icon: <IconDownload />,
-    disabled: false,
-    label: 'Download',
-    value: 'download',
-    description: 'Search for torrents',
-    url: 'https://1337x.to/search/',
-    shortcut: 't',
-  },
-  {
-    icon: <IconBrandYoutube />,
-    disabled: false,
-    label: 'Youtube',
-    value: 'youtube',
-    description: 'Search Youtube',
-    url: 'https://www.youtube.com/results?search_query=',
-    shortcut: 'y',
-  },
-  {
-    icon: <IconMovie />,
-    disabled: true,
-    label: 'Movies',
-    value: 'movies',
-    description: 'Search for movies using Overseerr',
-    url: 'https://www.imdb.com/find?q=',
-    shortcut: 'm',
-  },
-];
-
-interface ItemProps extends React.ComponentPropsWithoutRef<'div'> {
-  label: string;
-  disabled: boolean;
-  value: string;
-  description: string;
-  icon: React.ReactNode;
-  url: string;
-  shortcut: string;
-}
-
-export function SpotlightModuleComponent(props: any) {
-  const [selectedSearchEngine, setSearchEngine] = useState<ItemProps>(data[0]);
-
-  const SelectItem = forwardRef<HTMLDivElement, ItemProps>(
-    ({ icon, label, description, shortcut, ...others }: ItemProps, ref) => (
-      <div ref={ref} {...others}>
-        <Group position="apart" noWrap>
-          <Group noWrap>
-            {icon}
-            <div>
-              <Text size="sm">{label}</Text>
-              <Text size="xs" opacity={0.65}>
-                {description}
-              </Text>
-            </div>
-          </Group>
-          <Kbd>{shortcut}</Kbd>
-        </Group>
-      </div>
-    )
-  );
-
-  const [opened, setOpened] = useState(false);
-  useHotkeys([['mod+K', () => setOpened(!opened)]]);
-  return (
-    <Group grow>
-      <Select
-        icon={selectedSearchEngine.icon}
-        onSearchChange={(search) =>
-          setSearchEngine(
-            data.find((item) => item.label.toLowerCase().includes(search.toLowerCase())) ||
-              selectedSearchEngine
-          )
-        }
-        withinPortal
-        defaultValue={selectedSearchEngine.value}
-        itemComponent={SelectItem}
-        data={data}
-        maxDropdownHeight={400}
-      />
-      <TextInput />
-    </Group>
-  );
-}
-
-function tryMatchSearch(
-  query: string,
-  selectedSearchEngine: ItemProps,
-  setSearchEngine: React.Dispatch<React.SetStateAction<ItemProps>>,
-  searchEngines: ItemProps[]
-): void {
-  // First check if the value of search contains any shortcut. Make sure it is not disabled
-  const foundSearchEngine = searchEngines.find(
-    (engine) => query.includes(`!${engine.shortcut}`) && !engine.disabled
-  );
-  if (foundSearchEngine) {
-    // If a shortcut is found, use it. Except if it is disabled
-    setSearchEngine(foundSearchEngine);
-    showNotification({
-      radius: 'lg',
-      disallowClose: true,
-      id: 'spotlight',
-      autoClose: 1000,
-      icon: <ActionIcon size="sm">{foundSearchEngine.icon}</ActionIcon>,
-      message: `Using ${foundSearchEngine.label} as search engine`,
-    });
-  } else {
-    // If no shortcut is found, do nothing (for now)
-  }
-}
diff --git a/src/modules/spotlight/index.tsx b/src/modules/spotlight/index.tsx
deleted file mode 100644
index 27e68ef6c..000000000
--- a/src/modules/spotlight/index.tsx
+++ /dev/null
@@ -1 +0,0 @@
-export { SpotlightModule } from './SpotlightModule';
diff --git a/yarn.lock b/yarn.lock
index d04d88e82..87dd94f19 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1231,20 +1231,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@mantine/spotlight@npm:^5.8.2":
-  version: 5.8.2
-  resolution: "@mantine/spotlight@npm:5.8.2"
-  dependencies:
-    "@mantine/utils": 5.8.2
-  peerDependencies:
-    "@mantine/core": 5.8.2
-    "@mantine/hooks": 5.8.2
-    react: ">=16.8.0"
-    react-dom: ">=16.8.0"
-  checksum: 162eec73807649015d56359c8cdd565447b7ace86fd66705047657320be73e52e27119dc5f3b3e85367f316181b8cf9afeb18f9993cf396718fa20b5d1edccc1
-  languageName: node
-  linkType: hard
-
 "@mantine/ssr@npm:5.2.3":
   version: 5.2.3
   resolution: "@mantine/ssr@npm:5.2.3"
@@ -1315,15 +1301,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@mantine/utils@npm:5.8.2":
-  version: 5.8.2
-  resolution: "@mantine/utils@npm:5.8.2"
-  peerDependencies:
-    react: ">=16.8.0"
-  checksum: bb6b1de7e8bee92751410e634e7e475ea38eef4d822ee955aa885a739c4379c8d8cbdc12aee570b6c1dcf83ae1202297f1f1c3d78b11de3e3ffe64076edd3a71
-  languageName: node
-  linkType: hard
-
 "@motionone/animation@npm:^10.12.0":
   version: 10.13.1
   resolution: "@motionone/animation@npm:10.13.1"
@@ -4858,7 +4835,6 @@ __metadata:
     "@mantine/next": ^5.2.3
     "@mantine/notifications": ^5.7.2
     "@mantine/prism": ^5.0.0
-    "@mantine/spotlight": ^5.8.2
     "@next/bundle-analyzer": ^12.1.4
     "@next/eslint-plugin-next": ^12.1.4
     "@nivo/core": ^0.79.0

From be1901d40dad1f140c4110c9f701b0e8427997d2 Mon Sep 17 00:00:00 2001
From: Thomas Camlong <49837342+ajnart@users.noreply.github.com>
Date: Tue, 29 Nov 2022 21:06:11 +0900
Subject: [PATCH 27/28] Update SearchModule.tsx

---
 src/modules/search/SearchModule.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/modules/search/SearchModule.tsx b/src/modules/search/SearchModule.tsx
index 2974e3c29..0842272a4 100644
--- a/src/modules/search/SearchModule.tsx
+++ b/src/modules/search/SearchModule.tsx
@@ -48,7 +48,7 @@ const useStyles = createStyles((theme) => ({
   },
 }));
 
-export function SearchModuleComponent(props: any) {
+export function SearchModuleComponent() {
   const { config } = useConfig();
   const { t } = useTranslation('modules/search');
   const [searchQuery, setSearchQuery] = useState('');

From eba0adc03ee5609edb7a5d09a75c5c5fd08967b9 Mon Sep 17 00:00:00 2001
From: Thomas Camlong <49837342+ajnart@users.noreply.github.com>
Date: Wed, 30 Nov 2022 00:07:34 +0900
Subject: [PATCH 28/28] New Crowdin updates (#520)

* New translations add-service-app-shelf.json (Italian)

* New translations app-shelf.json (Italian)

* New translations app-shelf.json (French)

* New translations calendar.json (Italian)

* New translations app-shelf-menu.json (Italian)

* New translations app-width.json (Italian)

* New translations opacity-selector.json (Italian)

* New translations page-appearance.json (Italian)

* New translations usenet.json (Italian)

* New translations usenet.json (Chinese Simplified)

* New translations search.json (Italian)

* New translations search.json (French)

* New translations search.json (Spanish)

* New translations search.json (Danish)

* New translations search.json (German)

* New translations torrents-status.json (Italian)

* New translations weather.json (Italian)

* New translations ping.json (Italian)

* New translations overseerr.json (Italian)

* New translations torrents-status.json (Hebrew)

* New translations ping.json (Hebrew)

* New translations docker.json (French)

* New translations usenet.json (French)

* New translations dashdot.json (Italian)

* New translations docker.json (Italian)

* New translations dlspeed.json (Italian)

* New translations common-media-cards.json (Italian)

* New translations date.json (Italian)

* New translations config-changer.json (Vietnamese)

* New translations common.json (Vietnamese)

* New translations common.json (Italian)

* New translations search-engine.json (French)

* New translations config-changer.json (Italian)

* New translations login.json (Italian)

* New translations widget-positions.json (Italian)

* New translations shade-selector.json (Italian)

* New translations module-enabler.json (Italian)

* New translations search-engine.json (Italian)

* New translations search.json (LOLCAT)

* New translations search.json (Hebrew)

* New translations search.json (Slovenian)

* New translations search.json (Japanese)

* New translations search.json (Korean)

* New translations search.json (Dutch)

* New translations search.json (Polish)

* New translations search.json (Russian)

* New translations search.json (Portuguese, Brazilian)

* New translations search.json (Swedish)

* New translations search.json (Ukrainian)

* New translations search.json (Chinese Simplified)

* New translations search.json (Vietnamese)

* New translations docker.json (Hebrew)

* New translations dlspeed.json (Hebrew)

* New translations usenet.json (Dutch)

* New translations usenet.json (Spanish)

* New translations usenet.json (Danish)

* New translations usenet.json (German)

* New translations usenet.json (Hebrew)

* New translations usenet.json (Japanese)

* New translations usenet.json (Korean)

* New translations usenet.json (Polish)

* New translations usenet.json (Russian)

* New translations usenet.json (Slovenian)

* New translations usenet.json (Swedish)

* New translations usenet.json (Ukrainian)

* New translations usenet.json (Portuguese, Brazilian)

* New translations usenet.json (LOLCAT)

* New translations page-appearance.json (Japanese)

* New translations page-appearance.json (Korean)

* New translations page-appearance.json (Ukrainian)
---
 public/locales/da/modules/search.json         | 23 +++++++++++-
 public/locales/da/modules/usenet.json         |  2 +-
 public/locales/de/modules/search.json         | 23 +++++++++++-
 public/locales/de/modules/usenet.json         |  4 +--
 public/locales/es/modules/search.json         | 23 +++++++++++-
 public/locales/es/modules/usenet.json         |  2 +-
 public/locales/fr/layout/app-shelf.json       |  4 +--
 public/locales/fr/modules/docker.json         | 16 ++++-----
 public/locales/fr/modules/search.json         | 23 +++++++++++-
 public/locales/fr/modules/usenet.json         |  2 +-
 .../fr/settings/general/search-engine.json    |  2 +-
 public/locales/he/modules/dlspeed.json        |  4 +--
 public/locales/he/modules/docker.json         |  2 +-
 public/locales/he/modules/ping.json           |  6 ++--
 public/locales/he/modules/search.json         | 23 +++++++++++-
 .../locales/he/modules/torrents-status.json   |  4 +--
 public/locales/he/modules/usenet.json         |  4 +--
 public/locales/it/authentication/login.json   |  4 +--
 .../it/layout/add-service-app-shelf.json      | 36 +++++++++----------
 public/locales/it/layout/app-shelf-menu.json  |  8 ++---
 public/locales/it/layout/app-shelf.json       |  4 +--
 public/locales/it/modules/calendar.json       |  4 +--
 .../it/modules/common-media-cards.json        |  4 +--
 public/locales/it/modules/dashdot.json        | 12 +++----
 public/locales/it/modules/date.json           |  2 +-
 public/locales/it/modules/dlspeed.json        | 10 +++---
 public/locales/it/modules/docker.json         | 14 ++++----
 public/locales/it/modules/overseerr.json      |  6 ++--
 public/locales/it/modules/ping.json           |  4 +--
 public/locales/it/modules/search.json         | 25 +++++++++++--
 .../locales/it/modules/torrents-status.json   | 12 +++----
 public/locales/it/modules/usenet.json         |  4 +--
 public/locales/it/modules/weather.json        | 20 +++++------
 public/locales/it/settings/common.json        |  6 ++--
 .../it/settings/customization/app-width.json  |  2 +-
 .../customization/opacity-selector.json       |  2 +-
 .../customization/page-appearance.json        |  2 +-
 .../customization/shade-selector.json         |  2 +-
 .../it/settings/general/config-changer.json   | 26 +++++++-------
 .../it/settings/general/module-enabler.json   |  2 +-
 .../it/settings/general/search-engine.json    |  2 +-
 .../it/settings/general/widget-positions.json |  2 +-
 public/locales/ja/modules/search.json         | 23 +++++++++++-
 public/locales/ja/modules/usenet.json         |  4 +--
 .../customization/page-appearance.json        |  2 +-
 public/locales/ko/modules/search.json         | 23 +++++++++++-
 public/locales/ko/modules/usenet.json         |  4 +--
 .../customization/page-appearance.json        |  2 +-
 public/locales/lol/modules/search.json        | 23 +++++++++++-
 public/locales/lol/modules/usenet.json        |  4 +--
 public/locales/nl/modules/search.json         | 23 +++++++++++-
 public/locales/nl/modules/usenet.json         |  4 +--
 public/locales/pl/modules/search.json         | 23 +++++++++++-
 public/locales/pl/modules/usenet.json         |  2 +-
 public/locales/pt/modules/search.json         | 23 +++++++++++-
 public/locales/pt/modules/usenet.json         |  4 +--
 public/locales/ru/modules/search.json         | 23 +++++++++++-
 public/locales/ru/modules/usenet.json         |  4 +--
 public/locales/sl/modules/search.json         | 23 +++++++++++-
 public/locales/sl/modules/usenet.json         |  4 +--
 public/locales/sv/modules/search.json         | 23 +++++++++++-
 public/locales/sv/modules/usenet.json         |  2 +-
 public/locales/uk/modules/search.json         | 23 +++++++++++-
 public/locales/uk/modules/usenet.json         |  4 +--
 .../customization/page-appearance.json        |  1 +
 public/locales/vi/modules/search.json         | 23 +++++++++++-
 public/locales/vi/settings/common.json        |  2 +-
 .../vi/settings/general/config-changer.json   |  2 +-
 public/locales/zh/modules/search.json         | 23 +++++++++++-
 public/locales/zh/modules/usenet.json         |  6 ++--
 70 files changed, 544 insertions(+), 165 deletions(-)

diff --git a/public/locales/da/modules/search.json b/public/locales/da/modules/search.json
index ab3378dd6..0c37951eb 100644
--- a/public/locales/da/modules/search.json
+++ b/public/locales/da/modules/search.json
@@ -5,5 +5,26 @@
   },
   "input": {
     "placeholder": "Søg på nettet..."
-  }
+  },
+  "switched-to": "Skiftet til",
+  "searchEngines": {
+    "search": {
+      "name": "Web",
+      "description": "Søg ved hjælp af din søgemaskine (defineret i indstillinger)"
+    },
+    "youtube": {
+      "name": "YouTube",
+      "description": "Søg på YouTube"
+    },
+    "torrents": {
+      "name": "Torrents",
+      "description": "Søg efter torrents"
+    },
+    "overseerr": {
+      "name": "Overseerr",
+      "description": "Søg efter film og tv-serier ved hjælp af Overseerr (modul skal være aktiveret)"
+    }
+  },
+  "tip": "Du kan vælge søgefeltet med genvejen ",
+  "switchedSearchEngine": "Skiftede til søgning med {{searchEngine}}"
 }
\ No newline at end of file
diff --git a/public/locales/da/modules/usenet.json b/public/locales/da/modules/usenet.json
index 9c481990d..c66a44c52 100644
--- a/public/locales/da/modules/usenet.json
+++ b/public/locales/da/modules/usenet.json
@@ -1,7 +1,7 @@
 {
   "descriptor": {
     "name": "Usenet",
-    "description": "Giver dig mulighed for at se din usenet (Sabnzbd eller NZBGet) kø og historik, pause og genoptage downloads"
+    "description": "Tillader dig at se din usenet (Sabnzbd eller NZBGet) kø og historie, pause og genoptage downloads"
   },
   "card": {
     "errors": {
diff --git a/public/locales/de/modules/search.json b/public/locales/de/modules/search.json
index 3db2acb8d..739e7632b 100644
--- a/public/locales/de/modules/search.json
+++ b/public/locales/de/modules/search.json
@@ -5,5 +5,26 @@
   },
   "input": {
     "placeholder": "Das Internet durchsuchen..."
-  }
+  },
+  "switched-to": "",
+  "searchEngines": {
+    "search": {
+      "name": "",
+      "description": ""
+    },
+    "youtube": {
+      "name": "",
+      "description": ""
+    },
+    "torrents": {
+      "name": "",
+      "description": ""
+    },
+    "overseerr": {
+      "name": "Overseerr",
+      "description": ""
+    }
+  },
+  "tip": "",
+  "switchedSearchEngine": ""
 }
\ No newline at end of file
diff --git a/public/locales/de/modules/usenet.json b/public/locales/de/modules/usenet.json
index c9be61eff..bdda79882 100644
--- a/public/locales/de/modules/usenet.json
+++ b/public/locales/de/modules/usenet.json
@@ -1,7 +1,7 @@
 {
   "descriptor": {
-    "name": "Usenet",
-    "description": "Ermöglicht es Ihnen, Ihre Usenet-Warteschlange (Sabnzbd oder NZBGet) und den Verlauf anzuzeigen, Downloads anzuhalten und fortzusetzen"
+    "name": "",
+    "description": ""
   },
   "card": {
     "errors": {
diff --git a/public/locales/es/modules/search.json b/public/locales/es/modules/search.json
index 382a29d1d..9d1742273 100644
--- a/public/locales/es/modules/search.json
+++ b/public/locales/es/modules/search.json
@@ -5,5 +5,26 @@
   },
   "input": {
     "placeholder": "Buscar en Internet..."
-  }
+  },
+  "switched-to": "Cambiado a",
+  "searchEngines": {
+    "search": {
+      "name": "Web",
+      "description": "Buscar usando tu motor de búsqueda (definido en ajustes)"
+    },
+    "youtube": {
+      "name": "Youtube",
+      "description": "Buscar en Youtube"
+    },
+    "torrents": {
+      "name": "Torrents",
+      "description": "Buscar Torrents"
+    },
+    "overseerr": {
+      "name": "Overseerr",
+      "description": "Buscar Películas y Series TV usando Overseerr (el módulo debe esta activado)"
+    }
+  },
+  "tip": "Puedes seleccionar la barra de búsqueda con el atajo ",
+  "switchedSearchEngine": "Cambiado a buscando con {{searchEngine}}"
 }
\ No newline at end of file
diff --git a/public/locales/es/modules/usenet.json b/public/locales/es/modules/usenet.json
index 2e830c001..fda32e8b4 100644
--- a/public/locales/es/modules/usenet.json
+++ b/public/locales/es/modules/usenet.json
@@ -1,7 +1,7 @@
 {
   "descriptor": {
     "name": "Usenet",
-    "description": "Le permite ver la cola y el historial de usenet (Sabnzbd o NZBGet), pausar y reanudar las descargas"
+    "description": "Te permite ver la cola e historial de tu usenet (Sabnzbd or NZBGet), pausar y reanudar descargas"
   },
   "card": {
     "errors": {
diff --git a/public/locales/fr/layout/app-shelf.json b/public/locales/fr/layout/app-shelf.json
index 4808fccdd..32881efc8 100644
--- a/public/locales/fr/layout/app-shelf.json
+++ b/public/locales/fr/layout/app-shelf.json
@@ -2,8 +2,8 @@
   "accordions": {
     "downloads": {
       "text": "Vos téléchargements",
-      "torrents": "",
-      "usenet": ""
+      "torrents": "Vos téléchargements Torrents",
+      "usenet": "Vos téléchargements Usenet"
     },
     "others": {
       "text": "Autres"
diff --git a/public/locales/fr/modules/docker.json b/public/locales/fr/modules/docker.json
index b05afeac8..2cefad874 100644
--- a/public/locales/fr/modules/docker.json
+++ b/public/locales/fr/modules/docker.json
@@ -1,7 +1,7 @@
 {
   "descriptor": {
     "name": "Docker",
-    "description": ""
+    "description": "Vous permet de gérer facilement vos conteneurs docker"
   },
   "search": {
     "placeholder": "Recherche par nom de conteneur ou d'image"
@@ -49,20 +49,20 @@
   },
   "actions": {
     "start": {
-      "start": "",
-      "end": ""
+      "start": "Démarrage en cours",
+      "end": "Démarré"
     },
     "stop": {
-      "start": "",
+      "start": "Arrêt en cours",
       "end": "Arrêté"
     },
     "restart": {
-      "start": "",
-      "end": ""
+      "start": "Redémarrage en cours",
+      "end": "Redémarré"
     },
     "remove": {
-      "start": "",
-      "end": ""
+      "start": "Suppression en cours",
+      "end": "Supprimé"
     }
   },
   "errors": {
diff --git a/public/locales/fr/modules/search.json b/public/locales/fr/modules/search.json
index 36aa6c92c..f81d6b1ee 100644
--- a/public/locales/fr/modules/search.json
+++ b/public/locales/fr/modules/search.json
@@ -5,5 +5,26 @@
   },
   "input": {
     "placeholder": "Cherchez sur le web..."
-  }
+  },
+  "switched-to": "Basculé vers",
+  "searchEngines": {
+    "search": {
+      "name": "Web",
+      "description": "Recherche à l'aide de votre moteur de recherche (défini dans les paramètres)"
+    },
+    "youtube": {
+      "name": "YouTube",
+      "description": "Cherchez sur YouTube"
+    },
+    "torrents": {
+      "name": "Torrents",
+      "description": "Chercher des torrents"
+    },
+    "overseerr": {
+      "name": "Overseerr",
+      "description": "Chercher des films et séries TV avec Overseerr (le module doit-être activé)"
+    }
+  },
+  "tip": "Vous pouvez sélectionner la barre de recherche avec le raccourci ",
+  "switchedSearchEngine": "Basculer vers la recherche avec {{searchEngine}}"
 }
\ No newline at end of file
diff --git a/public/locales/fr/modules/usenet.json b/public/locales/fr/modules/usenet.json
index 6a4c0b70c..9e747820b 100644
--- a/public/locales/fr/modules/usenet.json
+++ b/public/locales/fr/modules/usenet.json
@@ -1,7 +1,7 @@
 {
   "descriptor": {
     "name": "Usenet",
-    "description": "Vous permet de voir votre file d'attente et votre historique Usenet (Sabnzbd ou NZBGet), de mettre en pause et de reprendre les téléchargements"
+    "description": "Permet de voir la file d'attente et l'historique de vos téléchargements usenet (Sabnzbd ou NZBGet), de mettre en pause et de reprendre les téléchargements"
   },
   "card": {
     "errors": {
diff --git a/public/locales/fr/settings/general/search-engine.json b/public/locales/fr/settings/general/search-engine.json
index 5e0dea5d0..fa2b7e2b0 100644
--- a/public/locales/fr/settings/general/search-engine.json
+++ b/public/locales/fr/settings/general/search-engine.json
@@ -9,6 +9,6 @@
     "placeholder": "URL de requête personnalisée"
   },
   "searchNewTab": {
-    "label": ""
+    "label": "Ouvrir les résultats de la recherche dans un nouvel onglet"
   }
 }
\ No newline at end of file
diff --git a/public/locales/he/modules/dlspeed.json b/public/locales/he/modules/dlspeed.json
index 313e3d3bb..d82ab968c 100644
--- a/public/locales/he/modules/dlspeed.json
+++ b/public/locales/he/modules/dlspeed.json
@@ -19,8 +19,8 @@
     },
     "lineChart": {
       "title": "מהירות הורדה נוכחית",
-      "download": "הורדה ממתינה",
-      "upload": "העלאה ממתינה",
+      "download": "הורדה",
+      "upload": "העלאה",
       "timeSpan": "לפני שניות",
       "totalDownload": "הורדה ממתינה",
       "totalUpload": "העלאה ממתינה"
diff --git a/public/locales/he/modules/docker.json b/public/locales/he/modules/docker.json
index b8a205052..55d15bcbc 100644
--- a/public/locales/he/modules/docker.json
+++ b/public/locales/he/modules/docker.json
@@ -9,7 +9,7 @@
   "table": {
     "header": {
       "name": "שם",
-      "image": "תמונה",
+      "image": "קובץ תמונה",
       "ports": "יציאות",
       "state": "מצב"
     },
diff --git a/public/locales/he/modules/ping.json b/public/locales/he/modules/ping.json
index d668d84f6..4fe08857a 100644
--- a/public/locales/he/modules/ping.json
+++ b/public/locales/he/modules/ping.json
@@ -1,11 +1,11 @@
 {
   "descriptor": {
-    "name": "זמן תגובה",
+    "name": "פינג",
     "description": "מאפשר בדיקה אם השירות פעיל או מחזיר קוד ספציפי של HTTP"
   },
   "states": {
-    "online": "מקון",
-    "offline": "לא מקון",
+    "online": "מקוון",
+    "offline": "לא מקוון",
     "loading": "טוען..."
   }
 }
\ No newline at end of file
diff --git a/public/locales/he/modules/search.json b/public/locales/he/modules/search.json
index 8085d915a..b6aaf78a1 100644
--- a/public/locales/he/modules/search.json
+++ b/public/locales/he/modules/search.json
@@ -5,5 +5,26 @@
   },
   "input": {
     "placeholder": "חפש באינטרנט..."
-  }
+  },
+  "switched-to": "להחליף ל",
+  "searchEngines": {
+    "search": {
+      "name": "אינטרנט",
+      "description": "חיפוש באמצעות מנוע החיפוש שלך (מוגדר בהגדרות)"
+    },
+    "youtube": {
+      "name": "יוטיוב",
+      "description": "חפש ביוטיוב"
+    },
+    "torrents": {
+      "name": "טורנטים",
+      "description": "חיפוש אחר טורנטים"
+    },
+    "overseerr": {
+      "name": "Overseerr",
+      "description": "חיפוש סרטים ותוכניות טלוויזיה באמצעות  Overseerr (המודול חייב להיות מאופשר)"
+    }
+  },
+  "tip": "באפשרותך לבחור את סרגל החיפוש באמצעות קיצור הדרך",
+  "switchedSearchEngine": "עבור לחיפוש עם"
 }
\ No newline at end of file
diff --git a/public/locales/he/modules/torrents-status.json b/public/locales/he/modules/torrents-status.json
index e375d89e1..27e9d0dd7 100644
--- a/public/locales/he/modules/torrents-status.json
+++ b/public/locales/he/modules/torrents-status.json
@@ -24,8 +24,8 @@
     },
     "lineChart": {
       "title": "מהירות הורדה נוכחית",
-      "download": "הורדה ממתינה",
-      "upload": "העלאה ממתינה",
+      "download": "הורדה",
+      "upload": "העלאה",
       "timeSpan": "לפני שניות",
       "totalDownload": "הורדה ממתינה",
       "totalUpload": "העלאה ממתינה"
diff --git a/public/locales/he/modules/usenet.json b/public/locales/he/modules/usenet.json
index 57a36590c..86add712d 100644
--- a/public/locales/he/modules/usenet.json
+++ b/public/locales/he/modules/usenet.json
@@ -1,7 +1,7 @@
 {
   "descriptor": {
-    "name": "Sabnzbd",
-    "description": "מאמאפשר לך לראות את התור וההיסטוריה של usenet (Sabnzbd או NZBGet), להשהות ולחדש הורדות"
+    "name": "קבוצת דיון",
+    "description": "מאפשר צפייה בהיסטוריה, תור ההורדות, עצירה וחידוש הורדות בקבוצות הדיון (Sabnzbd או NZBGet)"
   },
   "card": {
     "errors": {
diff --git a/public/locales/it/authentication/login.json b/public/locales/it/authentication/login.json
index 044b873cb..847451237 100644
--- a/public/locales/it/authentication/login.json
+++ b/public/locales/it/authentication/login.json
@@ -1,5 +1,5 @@
 {
-  "title": "Bentornato!",
+  "title": "Bentornati!",
   "text": "Inserisci la password",
   "form": {
     "fields": {
@@ -21,7 +21,7 @@
       "title": "Password corretta, reindirizzamento..."
     },
     "wrong": {
-      "title": "Password errata. Per favore, prova di nuovo."
+      "title": "Password errata. Per favore riprova."
     }
   }
 }
diff --git a/public/locales/it/layout/add-service-app-shelf.json b/public/locales/it/layout/add-service-app-shelf.json
index 26f14ca46..cc3831387 100644
--- a/public/locales/it/layout/add-service-app-shelf.json
+++ b/public/locales/it/layout/add-service-app-shelf.json
@@ -1,13 +1,13 @@
 {
     "actionIcon": {
-        "tooltip": "Aggiungere un servizio"
+        "tooltip": "Aggiungi un servizio"
     },
     "modal": {
         "title": "Aggiungi servizio",
         "form": {
             "validation": {
                 "invalidUrl": "Inserire un URL valido",
-                "noStatusCodeSelected": "Selezionare un codice di stato"
+                "noStatusCodeSelected": "Scegliere uno status code"
             }
         },
         "tabs": {
@@ -15,28 +15,28 @@
                 "title": "Opzioni",
                 "form": {
                     "serviceName": {
-                        "label": "Nome del servizio",
+                        "label": "Nome servizio",
                         "placeholder": "Plex"
                     },
                     "iconUrl": {
-                        "label": "Icona URL"
+                        "label": "URL dell'icona"
                     },
                     "serviceUrl": {
-                        "label": "URL del servizio"
+                        "label": "URL servizio"
                     },
                     "onClickUrl": {
-                        "label": "URL di destinatione"
+                        "label": "URL di destinazione"
                     },
                     "serviceType": {
-                        "label": "Tipo di servizio",
+                        "label": "Tipologia servizio",
                         "defaultValue": "Altro",
-                        "placeholder": "Scegli Uno"
+                        "placeholder": "Sceglierne uno"
                     },
                     "category": {
                         "label": "Categoria",
-                        "placeholder": "Selezionare una categoria o crearne una nuova",
-                        "nothingFound": "Non è stato trovato nulla",
-                        "createLabel": "+ Creare {{query}}"
+                        "placeholder": "Seleziona una categoria o creane una nuova",
+                        "nothingFound": "Nessun risultato",
+                        "createLabel": "+ Crea {{query}}"
                     },
                     "integrations": {
                         "apiKey": {
@@ -46,7 +46,7 @@
                                 "noKey": "Chiave non valida"
                             },
                             "tip": {
-                                "text": "Ottenere la chiave API",
+                                "text": "Ottieni la tua chiave API",
                                 "link": "qui."
                             }
                         },
@@ -111,16 +111,16 @@
                 }
             },
             "advancedOptions": {
-                "title": "Opzioni avanzate",
+                "title": "Impostazioni avanzate",
                 "form": {
                     "httpStatusCodes": {
-                        "label": "Codici di stato HTTP",
-                        "placeholder": "Selezionare i codici di stato validi",
-                        "clearButtonLabel": "Cancella la selezione",
-                        "nothingFound": "Non è stato trovato nulla"
+                        "label": "Status Codes HTTP",
+                        "placeholder": "Selezionare status codes validi",
+                        "clearButtonLabel": "Elimina selezione",
+                        "nothingFound": "Nessun risultato"
                     },
                     "openServiceInNewTab": {
-                        "label": "Aprire il servizio in una nuova scheda"
+                        "label": "Apri servizio in una nuova scheda"
                     },
                     "buttons": {
                         "submit": {
diff --git a/public/locales/it/layout/app-shelf-menu.json b/public/locales/it/layout/app-shelf-menu.json
index 1bb556af2..bdbb815c7 100644
--- a/public/locales/it/layout/app-shelf-menu.json
+++ b/public/locales/it/layout/app-shelf-menu.json
@@ -1,18 +1,18 @@
 {
   "modal": {
-    "title": "Modificare un servizio",
+    "title": "Modifica un servizio",
     "buttons": {
-      "save": "Salvataggio del servizio"
+      "save": "Salva servizio"
     }
   },
   "menu": {
     "labels": {
       "settings": "Impostazioni",
-      "dangerZone": "Zona di pericolo"
+      "dangerZone": "Danger zone"
     },
     "actions": {
       "edit": "Modifica",
-      "delete": "Cancella"
+      "delete": "Elimina"
     }
   }
 }
\ No newline at end of file
diff --git a/public/locales/it/layout/app-shelf.json b/public/locales/it/layout/app-shelf.json
index 295f9d021..c0404ff5e 100644
--- a/public/locales/it/layout/app-shelf.json
+++ b/public/locales/it/layout/app-shelf.json
@@ -2,8 +2,8 @@
   "accordions": {
     "downloads": {
       "text": "I tuoi download",
-      "torrents": "Scaricamenti di Torrent",
-      "usenet": "I tuoi scaricamenti di Usenet"
+      "torrents": "I tuoi torrent",
+      "usenet": "I tuoi download di Usenet"
     },
     "others": {
       "text": "Altri"
diff --git a/public/locales/it/modules/calendar.json b/public/locales/it/modules/calendar.json
index fba7e3a67..baa9106ce 100644
--- a/public/locales/it/modules/calendar.json
+++ b/public/locales/it/modules/calendar.json
@@ -1,10 +1,10 @@
 {
   "descriptor": {
     "name": "Calendario",
-    "description": "Un calendario per la visualizzazione dei prossimi rilasci. Interagisce con le API di Sonarr e Radarr.",
+    "description": "Un calendario per la visualizzazione delle prossime uscite. Può comunicare con le API di Sonarr e Radarr.",
     "settings": {
       "sundayStart": {
-        "label": "Inizio settimana di domenica"
+        "label": "Inizia la settimana di domenica"
       }
     }
   }
diff --git a/public/locales/it/modules/common-media-cards.json b/public/locales/it/modules/common-media-cards.json
index f13868358..1d28e1971 100644
--- a/public/locales/it/modules/common-media-cards.json
+++ b/public/locales/it/modules/common-media-cards.json
@@ -1,6 +1,6 @@
 {
   "buttons": {
-    "play": "Avvia",
-    "request": "Richiedi"
+    "play": "Riproduci",
+    "request": "Richiesta"
   }
 }
\ No newline at end of file
diff --git a/public/locales/it/modules/dashdot.json b/public/locales/it/modules/dashdot.json
index 9b81ceea2..620dcae18 100644
--- a/public/locales/it/modules/dashdot.json
+++ b/public/locales/it/modules/dashdot.json
@@ -1,13 +1,13 @@
 {
   "descriptor": {
     "name": "Dash.",
-    "description": "Un modulo per visualizzare i grafici dell'istanza di Dash in esecuzione.",
+    "description": "Un modulo per visualizzare i grafici dell'istanza di Dash. in esecuzione.",
     "settings": {
       "cpuMultiView": {
         "label": "Vista CPU Multi-Core"
       },
       "storageMultiView": {
-        "label": "Visualizzazione dell'unità multipla di archiviazione"
+        "label": "Visualizzazione archiviazione Multi-Drive"
       },
       "useCompactView": {
         "label": "Visualizzazione compatta"
@@ -23,8 +23,8 @@
   "card": {
     "title": "Dash.",
     "errors": {
-      "noService": "Nessun servizio Dash. trovato. Aggiungerne uno alla dashboard di Homarr o impostare un Dash. nelle opzioni del modulo",
-      "noInformation": "Impossibile acquisire informazioni da dash. - state eseguendo l'ultima versione?"
+      "noService": "Nessun servizio Dash. trovato. Aggiungine uno alla dashboard di Homarr o imposta un URL nelle impostazioni del modulo",
+      "noInformation": "Impossibile reperire informazioni da dash. - è in esecuzione l'ultima versione?"
     },
     "graphs": {
       "storage": {
@@ -35,8 +35,8 @@
         "title": "Rete",
         "label": "Rete:",
         "metrics": {
-          "download": "In basso",
-          "upload": "Su"
+          "download": "Down",
+          "upload": "Up"
         }
       },
       "cpu": {
diff --git a/public/locales/it/modules/date.json b/public/locales/it/modules/date.json
index deb7bcb16..e68b8f2ec 100644
--- a/public/locales/it/modules/date.json
+++ b/public/locales/it/modules/date.json
@@ -4,7 +4,7 @@
     "description": "Mostra l'ora e la data corrente in una scheda",
     "settings": {
       "display24HourFormat": {
-        "label": "Visualizzazione a tempo pieno (24 ore)"
+        "label": "Visualizza formato 24 ore"
       }
     }
   }
diff --git a/public/locales/it/modules/dlspeed.json b/public/locales/it/modules/dlspeed.json
index 9e3086a63..1e2b24047 100644
--- a/public/locales/it/modules/dlspeed.json
+++ b/public/locales/it/modules/dlspeed.json
@@ -1,15 +1,15 @@
 {
   "descriptor": {
     "name": "Velocità Di Download",
-    "description": "Mostra la velocità di download attuale dei servizi supportati"
+    "description": "Mostra la velocità di download corrente dei servizi supportati"
   },
   "card": {
     "table": {
       "header": {
         "name": "Nome",
         "size": "Dimensione",
-        "download": "In basso",
-        "upload": "Su",
+        "download": "Down",
+        "upload": "Up",
         "estimatedTimeOfArrival": "ETA",
         "progress": "Avanzamento"
       },
@@ -18,7 +18,7 @@
       }
     },
     "lineChart": {
-      "title": "Velocità di download attuale",
+      "title": "Velocità di download",
       "download": "Download: {{download}}",
       "upload": "Upload: {{upload}}",
       "timeSpan": "{{seconds}} secondi fa",
@@ -28,7 +28,7 @@
     "errors": {
       "noDownloadClients": {
         "title": "Nessun client di download supportato trovato!",
-        "text": "Aggiungere un servizio di download per visualizzare i download correnti"
+        "text": "Aggiungi un servizio di download per visualizzare i tuoi download attuali"
       }
     }
   }
diff --git a/public/locales/it/modules/docker.json b/public/locales/it/modules/docker.json
index f1ba08684..6411a2537 100644
--- a/public/locales/it/modules/docker.json
+++ b/public/locales/it/modules/docker.json
@@ -1,10 +1,10 @@
 {
   "descriptor": {
     "name": "Docker",
-    "description": "Ti permette di gestire facilmente i tuoi container docker"
+    "description": "Gestisci facilmente i tuoi container di docker"
   },
   "search": {
-    "placeholder": "Ricerca per contenitore o nome dell'immagine"
+    "placeholder": "Ricerca per container nome immagine"
   },
   "table": {
     "header": {
@@ -14,7 +14,7 @@
       "state": "Stato"
     },
     "body": {
-      "portCollapse": "{{ports}} di più"
+      "portCollapse": "{{ports}} altro"
     },
     "states": {
       "running": "In esecuzione",
@@ -38,13 +38,13 @@
       "title": "Avvia"
     },
     "refreshData": {
-      "title": "Aggiornare i dati"
+      "title": "Aggiorna dati"
     },
     "remove": {
       "title": "Rimuovi"
     },
     "addToHomarr": {
-      "title": "Aggiungi a Homarr"
+      "title": "Aggiungi ad Homarr"
     }
   },
   "actions": {
@@ -61,13 +61,13 @@
       "end": "Riavviato"
     },
     "remove": {
-      "start": "Rimozione",
+      "start": "Rimozione in corso",
       "end": "Rimosso"
     }
   },
   "errors": {
     "integrationFailed": {
-      "title": "Integrazione di Docker fallita",
+      "title": "Integrazione Docker fallita",
       "message": "Hai dimenticato di montare il socket di docker?"
     },
     "unknownError": {
diff --git a/public/locales/it/modules/overseerr.json b/public/locales/it/modules/overseerr.json
index 2c848ffbc..f360e9788 100644
--- a/public/locales/it/modules/overseerr.json
+++ b/public/locales/it/modules/overseerr.json
@@ -8,17 +8,17 @@
       "buttons": {
         "askFor": "Richiedi {{title}}",
         "cancel": "Annulla",
-        "request": "Richiedi"
+        "request": "Richiesta"
       },
       "alerts": {
         "automaticApproval": {
-          "title": "Utilizzo della chiave API",
+          "title": "Chiave API in uso",
           "text": "Questa richiesta verrà approvata automaticamente"
         }
       }
     },
     "seasonSelector": {
-      "caption": "Spuntare le stagioni che si desidera scaricare.",
+      "caption": "Seleziona le stagioni che desideri scaricare",
       "table": {
         "header": {
           "season": "Stagione",
diff --git a/public/locales/it/modules/ping.json b/public/locales/it/modules/ping.json
index 7fc98c6eb..9235a48e9 100644
--- a/public/locales/it/modules/ping.json
+++ b/public/locales/it/modules/ping.json
@@ -1,11 +1,11 @@
 {
   "descriptor": {
     "name": "Ping",
-    "description": "Consente di verificare se il servizio è attivo o se restituisce un codice di stato HTTP specifico."
+    "description": "Consente di controllare se il servizio è attivo o restituisce uno specifico status code HTTP."
   },
   "states": {
     "online": "Online {{response}}",
     "offline": "Offline {{response}}",
-    "loading": "Caricamento..."
+    "loading": "Caricamento in corso..."
   }
 }
\ No newline at end of file
diff --git a/public/locales/it/modules/search.json b/public/locales/it/modules/search.json
index 621da0e2f..06f1404db 100644
--- a/public/locales/it/modules/search.json
+++ b/public/locales/it/modules/search.json
@@ -1,9 +1,30 @@
 {
   "descriptor": {
     "name": "Barra di ricerca",
-    "description": "Barra di ricerca per cercare sul web, su Youtube, su Torrents o su Overseerr"
+    "description": "Barra di ricerca per cercare sul web, Youtube, Torrent o Overseerr"
   },
   "input": {
     "placeholder": "Cerca sul web..."
-  }
+  },
+  "switched-to": "Impostato su",
+  "searchEngines": {
+    "search": {
+      "name": "Web",
+      "description": "Cerca usando il tuo motore di ricerca (definito nelle impostazioni)"
+    },
+    "youtube": {
+      "name": "Youtube",
+      "description": "Cerca su YouTube"
+    },
+    "torrents": {
+      "name": "Torrents",
+      "description": "Cerca Torrents"
+    },
+    "overseerr": {
+      "name": "Overseerr",
+      "description": "Cerca film e serie TV con Overseerr (il modulo deve essere abilitato)"
+    }
+  },
+  "tip": "Puoi selezionare la barra di ricerca con la scorciatoia ",
+  "switchedSearchEngine": "Ricerca cambiata con {{searchEngine}}"
 }
\ No newline at end of file
diff --git a/public/locales/it/modules/torrents-status.json b/public/locales/it/modules/torrents-status.json
index 500107375..cad61981b 100644
--- a/public/locales/it/modules/torrents-status.json
+++ b/public/locales/it/modules/torrents-status.json
@@ -1,10 +1,10 @@
 {
   "descriptor": {
     "name": "Torrent",
-    "description": "Mostra la velocità di download attuale dei servizi supportati",
+    "description": "Mostra la velocità di download corrente dei servizi supportati",
     "settings": {
       "hideComplete": {
-        "label": "Nascondere i torrent completati"
+        "label": "Nascondi torrent completati"
       }
     }
   },
@@ -13,8 +13,8 @@
       "header": {
         "name": "Nome",
         "size": "Dimensione",
-        "download": "In basso",
-        "upload": "Su",
+        "download": "Down",
+        "upload": "Up",
         "estimatedTimeOfArrival": "ETA",
         "progress": "Avanzamento"
       },
@@ -23,7 +23,7 @@
       }
     },
     "lineChart": {
-      "title": "Velocità di download attuale",
+      "title": "Velocità di download",
       "download": "Download: {{download}}",
       "upload": "Upload: {{upload}}",
       "timeSpan": "{{seconds}} secondi fa",
@@ -33,7 +33,7 @@
     "errors": {
       "noDownloadClients": {
         "title": "Nessun client di download supportato trovato!",
-        "text": "Aggiungere un servizio di download per visualizzare i download correnti"
+        "text": "Aggiungi un servizio di download per visualizzare i tuoi download attuali"
       }
     }
   }
diff --git a/public/locales/it/modules/usenet.json b/public/locales/it/modules/usenet.json
index 27eee650b..6fb5bb105 100644
--- a/public/locales/it/modules/usenet.json
+++ b/public/locales/it/modules/usenet.json
@@ -1,13 +1,13 @@
 {
   "descriptor": {
     "name": "Usenet",
-    "description": "Ti consente di vedere la coda e la cronologia di usenet (Sabnzbd o NZBGet), mettere in pausa e riprendere i download."
+    "description": "Permette di vedere la coda e la cronologia di usenet (Sabnzbd o NZBGet), di mettere in pausa e riprendere i download"
   },
   "card": {
     "errors": {
       "noDownloadClients": {
         "title": "Nessun client di download supportato trovato!",
-        "text": "Aggiungere un servizio di download per visualizzare i download correnti"
+        "text": "Aggiungi un servizio di download per visualizzare i tuoi download attuali"
       }
     }
   },
diff --git a/public/locales/it/modules/weather.json b/public/locales/it/modules/weather.json
index 50d741f0d..a2fe6610c 100644
--- a/public/locales/it/modules/weather.json
+++ b/public/locales/it/modules/weather.json
@@ -4,26 +4,26 @@
     "description": "Consulta il meteo attuale della propria località",
     "settings": {
       "displayInFahrenheit": {
-        "label": "Visualizzazione in Fahrenheit"
+        "label": "Mostra in Fahrenheit"
       },
       "location": {
-        "label": "Posizione meteo"
+        "label": "Località meteo"
       }
     }
   },
   "card": {
     "weatherDescriptions": {
-      "clear": "Cancella",
-      "mainlyClear": "Sereno",
+      "clear": "Sereno",
+      "mainlyClear": "Per lo più sereno",
       "fog": "Nebbia",
-      "drizzle": "Pioggerella",
-      "freezingDrizzle": "Pioggia gelata",
+      "drizzle": "Pioggia leggera",
+      "freezingDrizzle": "Pioggia leggera gelata",
       "rain": "Pioggia",
       "freezingRain": "Pioggia gelata",
-      "snowFall": "Caduta della neve",
-      "snowGrains": "Granelli di neve",
-      "rainShowers": "Piogge a catinelle",
-      "snowShowers": "Piogge di neve",
+      "snowFall": "Neve",
+      "snowGrains": "Neve tonda",
+      "rainShowers": "Rovesci",
+      "snowShowers": "Forti nevicate",
       "thunderstorm": "Temporale",
       "thunderstormWithHail": "Temporale con grandine",
       "unknown": "Sconosciuto"
diff --git a/public/locales/it/settings/common.json b/public/locales/it/settings/common.json
index fdaceac8d..5ad515356 100644
--- a/public/locales/it/settings/common.json
+++ b/public/locales/it/settings/common.json
@@ -2,11 +2,11 @@
   "title": "Impostazioni",
   "tooltip": "Impostazioni",
   "tabs": {
-    "common": "Comune",
-    "customizations": "Personalizzazioni"
+    "common": "Generale",
+    "customizations": "Personalizza"
   },
   "tips": {
-    "configTip": "Caricate il vostro file di configurazione trascinandolo sulla pagina!"
+    "configTip": "Carica il file di configurazione trascinandolo e rilasciandolo sulla pagina!"
   },
   "credits": {
     "madeWithLove": "Realizzato con ❤️ da @"
diff --git a/public/locales/it/settings/customization/app-width.json b/public/locales/it/settings/customization/app-width.json
index 379134b20..8f4bbd23c 100644
--- a/public/locales/it/settings/customization/app-width.json
+++ b/public/locales/it/settings/customization/app-width.json
@@ -1,3 +1,3 @@
 {
-  "label": "Larghezza dell'applicazione"
+  "label": "Larghezza App"
 }
\ No newline at end of file
diff --git a/public/locales/it/settings/customization/opacity-selector.json b/public/locales/it/settings/customization/opacity-selector.json
index eb6104c3d..704709c17 100644
--- a/public/locales/it/settings/customization/opacity-selector.json
+++ b/public/locales/it/settings/customization/opacity-selector.json
@@ -1,3 +1,3 @@
 {
-  "label": "Opacità dell'applicazione"
+  "label": "Opacità App"
 }
\ No newline at end of file
diff --git a/public/locales/it/settings/customization/page-appearance.json b/public/locales/it/settings/customization/page-appearance.json
index 13012cfa5..9f724bc2b 100644
--- a/public/locales/it/settings/customization/page-appearance.json
+++ b/public/locales/it/settings/customization/page-appearance.json
@@ -1,6 +1,6 @@
 {
   "pageTitle": {
-    "label": "Titolo della pagina",
+    "label": "Titolo pagina",
     "placeholder": "Homarr 🦞"
   },
   "logo": {
diff --git a/public/locales/it/settings/customization/shade-selector.json b/public/locales/it/settings/customization/shade-selector.json
index fd0a2eab0..590b65682 100644
--- a/public/locales/it/settings/customization/shade-selector.json
+++ b/public/locales/it/settings/customization/shade-selector.json
@@ -1,3 +1,3 @@
 {
-  "label": "Ombreggiatura"
+  "label": "Tonalità"
 }
\ No newline at end of file
diff --git a/public/locales/it/settings/general/config-changer.json b/public/locales/it/settings/general/config-changer.json
index c25141f67..b9dec1e85 100644
--- a/public/locales/it/settings/general/config-changer.json
+++ b/public/locales/it/settings/general/config-changer.json
@@ -1,13 +1,13 @@
 {
   "configSelect": {
-    "label": "Caricatore di configurazione"
+    "label": "Carica configurazione"
   },
   "modal": {
-    "title": "Scegliere il nome della nuova configurazione",
+    "title": "Scegli il nome della nuova configurazione",
     "form": {
       "configName": {
-        "label": "Nome della configurazione",
-        "placeholder": "Il nome della nuova configurazione"
+        "label": "Nome configurazione",
+        "placeholder": "Nuovo nome configurazione"
       },
       "submitButton": "Conferma"
     },
@@ -19,21 +19,21 @@
     }
   },
   "buttons": {
-    "download": "Scarica la configurazione",
+    "download": "Download configurazione",
     "delete": {
-      "text": "Cancellare la configurazione",
+      "text": "Elimina configurazione",
       "notifications": {
         "deleted": {
-          "title": "Configurazione cancellata",
-          "message": "Configurazione cancellata"
+          "title": "Configurazione eliminata",
+          "message": "Configurazione eliminata"
         },
         "deleteFailed": {
-          "title": "Cancellazione configurazione fallita",
-          "message": "Cancellazione configurazione fallita"
+          "title": "Eliminazione configurazione fallita",
+          "message": "Eliminazione configurazione fallita"
         }
       }
     },
-    "saveCopy": "Salvare una copia"
+    "saveCopy": "Salva una copia"
   },
   "dropzone": {
     "notifications": {
@@ -46,10 +46,10 @@
       }
     },
     "accept": {
-      "text": "Trascinare i file qui per caricare una configurazione. Supporto solo per JSON."
+      "text": "Trascina qui i file per caricare una configurazione. Solo file JSON supportati."
     },
     "reject": {
-      "text": "Questo formato di file non è supportato. Caricare solo JSON."
+      "text": "Formato file non supportato. Caricare solo file JSON."
     }
   }
 }
\ No newline at end of file
diff --git a/public/locales/it/settings/general/module-enabler.json b/public/locales/it/settings/general/module-enabler.json
index 2ddba9c4b..07c1d273c 100644
--- a/public/locales/it/settings/general/module-enabler.json
+++ b/public/locales/it/settings/general/module-enabler.json
@@ -1,3 +1,3 @@
 {
-  "title": "Modulo abilitatore"
+  "title": "Abilitatore moduli"
 }
\ No newline at end of file
diff --git a/public/locales/it/settings/general/search-engine.json b/public/locales/it/settings/general/search-engine.json
index 750cf922d..a10bfaf54 100644
--- a/public/locales/it/settings/general/search-engine.json
+++ b/public/locales/it/settings/general/search-engine.json
@@ -1,7 +1,7 @@
 {
   "title": "Motore di ricerca",
   "tips": {
-    "generalTip": "Utilizzate i prefissi !yt e !t davanti alla vostra ricerca per cercare rispettivamente su YouTube o su un Torrent.",
+    "generalTip": "Usa i prefissi !yt e !t di fronte alla tua ricerca per cercare rispettivamente su YouTube o un Torrent.",
     "placeholderTip": "%s può essere usato come segnaposto per la ricerca."
   },
   "customEngine": {
diff --git a/public/locales/it/settings/general/widget-positions.json b/public/locales/it/settings/general/widget-positions.json
index 52057558f..8d141a558 100644
--- a/public/locales/it/settings/general/widget-positions.json
+++ b/public/locales/it/settings/general/widget-positions.json
@@ -1,3 +1,3 @@
 {
-  "label": "Posizionare i widget a sinistra"
+  "label": "Posiziona widget a sinistra"
 }
\ No newline at end of file
diff --git a/public/locales/ja/modules/search.json b/public/locales/ja/modules/search.json
index 400802258..3efea179d 100644
--- a/public/locales/ja/modules/search.json
+++ b/public/locales/ja/modules/search.json
@@ -5,5 +5,26 @@
   },
   "input": {
     "placeholder": "ウェブで検索..."
-  }
+  },
+  "switched-to": "",
+  "searchEngines": {
+    "search": {
+      "name": "",
+      "description": ""
+    },
+    "youtube": {
+      "name": "",
+      "description": ""
+    },
+    "torrents": {
+      "name": "",
+      "description": ""
+    },
+    "overseerr": {
+      "name": "オーバーホール",
+      "description": ""
+    }
+  },
+  "tip": "",
+  "switchedSearchEngine": ""
 }
\ No newline at end of file
diff --git a/public/locales/ja/modules/usenet.json b/public/locales/ja/modules/usenet.json
index 7f5c81b93..5c95fd2f5 100644
--- a/public/locales/ja/modules/usenet.json
+++ b/public/locales/ja/modules/usenet.json
@@ -1,7 +1,7 @@
 {
   "descriptor": {
-    "name": "ユースネット",
-    "description": "Usenet (Sabnzbd または NZBGet) のキューと履歴を表示し、ダウンロードを一時停止および再開できます。"
+    "name": "",
+    "description": ""
   },
   "card": {
     "errors": {
diff --git a/public/locales/ja/settings/customization/page-appearance.json b/public/locales/ja/settings/customization/page-appearance.json
index 6fd80d79f..48a8d31b2 100644
--- a/public/locales/ja/settings/customization/page-appearance.json
+++ b/public/locales/ja/settings/customization/page-appearance.json
@@ -7,7 +7,7 @@
     "label": "ロゴマーク"
   },
   "favicon": {
-    "label": "Favicon"
+    "label": "ファビコン"
   },
   "background": {
     "label": "背景"
diff --git a/public/locales/ko/modules/search.json b/public/locales/ko/modules/search.json
index 43d18ee9b..41d0e72f7 100644
--- a/public/locales/ko/modules/search.json
+++ b/public/locales/ko/modules/search.json
@@ -5,5 +5,26 @@
   },
   "input": {
     "placeholder": "웹에서 검색..."
-  }
+  },
+  "switched-to": "",
+  "searchEngines": {
+    "search": {
+      "name": "",
+      "description": ""
+    },
+    "youtube": {
+      "name": "",
+      "description": ""
+    },
+    "torrents": {
+      "name": "",
+      "description": ""
+    },
+    "overseerr": {
+      "name": "Overseerr",
+      "description": ""
+    }
+  },
+  "tip": "",
+  "switchedSearchEngine": ""
 }
\ No newline at end of file
diff --git a/public/locales/ko/modules/usenet.json b/public/locales/ko/modules/usenet.json
index d5ca9b14d..5b2b547af 100644
--- a/public/locales/ko/modules/usenet.json
+++ b/public/locales/ko/modules/usenet.json
@@ -1,7 +1,7 @@
 {
   "descriptor": {
-    "name": "ユースネット",
-    "description": "유즈넷(Sabnzbd 또는 NZBGet) 대기열 및 기록을 보고 다운로드를 일시 중지 및 재개할 수 있습니다."
+    "name": "",
+    "description": ""
   },
   "card": {
     "errors": {
diff --git a/public/locales/ko/settings/customization/page-appearance.json b/public/locales/ko/settings/customization/page-appearance.json
index 7104c7496..a7ab68df2 100644
--- a/public/locales/ko/settings/customization/page-appearance.json
+++ b/public/locales/ko/settings/customization/page-appearance.json
@@ -7,7 +7,7 @@
     "label": "로고"
   },
   "favicon": {
-    "label": "Favicon"
+    "label": "파비콘"
   },
   "background": {
     "label": "배경"
diff --git a/public/locales/lol/modules/search.json b/public/locales/lol/modules/search.json
index bd6592251..3ee484112 100644
--- a/public/locales/lol/modules/search.json
+++ b/public/locales/lol/modules/search.json
@@ -5,5 +5,26 @@
   },
   "input": {
     "placeholder": "Search teh web..."
-  }
+  },
+  "switched-to": "",
+  "searchEngines": {
+    "search": {
+      "name": "",
+      "description": ""
+    },
+    "youtube": {
+      "name": "",
+      "description": ""
+    },
+    "torrents": {
+      "name": "",
+      "description": ""
+    },
+    "overseerr": {
+      "name": "Overseerr",
+      "description": ""
+    }
+  },
+  "tip": "",
+  "switchedSearchEngine": ""
 }
\ No newline at end of file
diff --git a/public/locales/lol/modules/usenet.json b/public/locales/lol/modules/usenet.json
index cd126d151..ea078dc3c 100644
--- a/public/locales/lol/modules/usenet.json
+++ b/public/locales/lol/modules/usenet.json
@@ -1,7 +1,7 @@
 {
   "descriptor": {
-    "name": "Usenet",
-    "description": "Allowz u 2 c ur usenet (Sabnzbd & NZBGet) queue an histowee, paues an resuem downloadz"
+    "name": "",
+    "description": ""
   },
   "card": {
     "errors": {
diff --git a/public/locales/nl/modules/search.json b/public/locales/nl/modules/search.json
index f8cbbe7f2..a1fec76b9 100644
--- a/public/locales/nl/modules/search.json
+++ b/public/locales/nl/modules/search.json
@@ -5,5 +5,26 @@
   },
   "input": {
     "placeholder": "Doorzoek het web..."
-  }
+  },
+  "switched-to": "",
+  "searchEngines": {
+    "search": {
+      "name": "",
+      "description": ""
+    },
+    "youtube": {
+      "name": "",
+      "description": ""
+    },
+    "torrents": {
+      "name": "",
+      "description": ""
+    },
+    "overseerr": {
+      "name": "Overseerr",
+      "description": ""
+    }
+  },
+  "tip": "",
+  "switchedSearchEngine": ""
 }
\ No newline at end of file
diff --git a/public/locales/nl/modules/usenet.json b/public/locales/nl/modules/usenet.json
index e9a981b14..91c7bd8d5 100644
--- a/public/locales/nl/modules/usenet.json
+++ b/public/locales/nl/modules/usenet.json
@@ -1,7 +1,7 @@
 {
   "descriptor": {
-    "name": "Usenet",
-    "description": "Hiermee kunt u uw usenet (Sabnzbd of NZBGet) wachtrij en geschiedenis bekijken, downloads pauzeren en hervatten."
+    "name": "",
+    "description": ""
   },
   "card": {
     "errors": {
diff --git a/public/locales/pl/modules/search.json b/public/locales/pl/modules/search.json
index da6261179..2ea5ddfa4 100644
--- a/public/locales/pl/modules/search.json
+++ b/public/locales/pl/modules/search.json
@@ -5,5 +5,26 @@
   },
   "input": {
     "placeholder": "Szukaj w internecie..."
-  }
+  },
+  "switched-to": "",
+  "searchEngines": {
+    "search": {
+      "name": "",
+      "description": ""
+    },
+    "youtube": {
+      "name": "",
+      "description": ""
+    },
+    "torrents": {
+      "name": "",
+      "description": ""
+    },
+    "overseerr": {
+      "name": "Overseerr",
+      "description": ""
+    }
+  },
+  "tip": "",
+  "switchedSearchEngine": ""
 }
\ No newline at end of file
diff --git a/public/locales/pl/modules/usenet.json b/public/locales/pl/modules/usenet.json
index 67cdd5eef..64473ac0c 100644
--- a/public/locales/pl/modules/usenet.json
+++ b/public/locales/pl/modules/usenet.json
@@ -1,7 +1,7 @@
 {
   "descriptor": {
     "name": "Usenet",
-    "description": "Pozwala zobaczyć kolejkę i historię usenetu (Sabnzbd lub NZBGet), wstrzymywać i wznawiać pobieranie."
+    "description": ""
   },
   "card": {
     "errors": {
diff --git a/public/locales/pt/modules/search.json b/public/locales/pt/modules/search.json
index 9ed0ba52c..8669c1b5d 100644
--- a/public/locales/pt/modules/search.json
+++ b/public/locales/pt/modules/search.json
@@ -5,5 +5,26 @@
   },
   "input": {
     "placeholder": "Pesquisar na Internet..."
-  }
+  },
+  "switched-to": "",
+  "searchEngines": {
+    "search": {
+      "name": "",
+      "description": ""
+    },
+    "youtube": {
+      "name": "",
+      "description": ""
+    },
+    "torrents": {
+      "name": "",
+      "description": ""
+    },
+    "overseerr": {
+      "name": "Overseerr",
+      "description": ""
+    }
+  },
+  "tip": "",
+  "switchedSearchEngine": ""
 }
\ No newline at end of file
diff --git a/public/locales/pt/modules/usenet.json b/public/locales/pt/modules/usenet.json
index e55578f80..c975cb4e0 100644
--- a/public/locales/pt/modules/usenet.json
+++ b/public/locales/pt/modules/usenet.json
@@ -1,7 +1,7 @@
 {
   "descriptor": {
-    "name": "Usenet",
-    "description": "Permite que você veja sua fila e histórico de usenet (Sabnzbd ou NZBGet), pausar e retomar downloads."
+    "name": "",
+    "description": ""
   },
   "card": {
     "errors": {
diff --git a/public/locales/ru/modules/search.json b/public/locales/ru/modules/search.json
index 89465fa3a..33ec9789b 100644
--- a/public/locales/ru/modules/search.json
+++ b/public/locales/ru/modules/search.json
@@ -5,5 +5,26 @@
   },
   "input": {
     "placeholder": "Искать в интернете..."
-  }
+  },
+  "switched-to": "",
+  "searchEngines": {
+    "search": {
+      "name": "",
+      "description": ""
+    },
+    "youtube": {
+      "name": "",
+      "description": ""
+    },
+    "torrents": {
+      "name": "",
+      "description": ""
+    },
+    "overseerr": {
+      "name": "Overseerr",
+      "description": ""
+    }
+  },
+  "tip": "",
+  "switchedSearchEngine": ""
 }
\ No newline at end of file
diff --git a/public/locales/ru/modules/usenet.json b/public/locales/ru/modules/usenet.json
index b485c9f3a..160de8c4f 100644
--- a/public/locales/ru/modules/usenet.json
+++ b/public/locales/ru/modules/usenet.json
@@ -1,7 +1,7 @@
 {
   "descriptor": {
-    "name": "Юнет",
-    "description": "Позволяет просматривать очередь и историю Usenet (Sabnzbd или NZBGet), приостанавливать и возобновлять загрузки."
+    "name": "",
+    "description": ""
   },
   "card": {
     "errors": {
diff --git a/public/locales/sl/modules/search.json b/public/locales/sl/modules/search.json
index 2d2ccde2e..652cec58c 100644
--- a/public/locales/sl/modules/search.json
+++ b/public/locales/sl/modules/search.json
@@ -5,5 +5,26 @@
   },
   "input": {
     "placeholder": "Preišči splet..."
-  }
+  },
+  "switched-to": "",
+  "searchEngines": {
+    "search": {
+      "name": "",
+      "description": ""
+    },
+    "youtube": {
+      "name": "",
+      "description": ""
+    },
+    "torrents": {
+      "name": "",
+      "description": ""
+    },
+    "overseerr": {
+      "name": "Overseerr",
+      "description": ""
+    }
+  },
+  "tip": "",
+  "switchedSearchEngine": ""
 }
\ No newline at end of file
diff --git a/public/locales/sl/modules/usenet.json b/public/locales/sl/modules/usenet.json
index 1bae3d448..4f30f78f2 100644
--- a/public/locales/sl/modules/usenet.json
+++ b/public/locales/sl/modules/usenet.json
@@ -1,7 +1,7 @@
 {
   "descriptor": {
-    "name": "Usenet",
-    "description": "Omogoča ogled vaše čakalne vrste in zgodovine usenet (Sabnzbd ali NZBGet), zaustavitev in nadaljevanje prenosov."
+    "name": "",
+    "description": ""
   },
   "card": {
     "errors": {
diff --git a/public/locales/sv/modules/search.json b/public/locales/sv/modules/search.json
index a22daed17..cc0a37ebb 100644
--- a/public/locales/sv/modules/search.json
+++ b/public/locales/sv/modules/search.json
@@ -5,5 +5,26 @@
   },
   "input": {
     "placeholder": "Sök på webben..."
-  }
+  },
+  "switched-to": "",
+  "searchEngines": {
+    "search": {
+      "name": "",
+      "description": ""
+    },
+    "youtube": {
+      "name": "",
+      "description": ""
+    },
+    "torrents": {
+      "name": "",
+      "description": ""
+    },
+    "overseerr": {
+      "name": "Overseerr",
+      "description": ""
+    }
+  },
+  "tip": "",
+  "switchedSearchEngine": ""
 }
\ No newline at end of file
diff --git a/public/locales/sv/modules/usenet.json b/public/locales/sv/modules/usenet.json
index 776c42fde..8ee92da1c 100644
--- a/public/locales/sv/modules/usenet.json
+++ b/public/locales/sv/modules/usenet.json
@@ -1,7 +1,7 @@
 {
   "descriptor": {
     "name": "Usenet",
-    "description": "Låter dig se din usenet (Sabnzbd eller NZBGet) kö och historik, pausa och återuppta nedladdningar."
+    "description": "Låter dig se din usenet (Sabnzbd eller NZBGet) kö och historik, pausa och återuppta nedladdningar"
   },
   "card": {
     "errors": {
diff --git a/public/locales/uk/modules/search.json b/public/locales/uk/modules/search.json
index ce2b12775..70bff8526 100644
--- a/public/locales/uk/modules/search.json
+++ b/public/locales/uk/modules/search.json
@@ -5,5 +5,26 @@
   },
   "input": {
     "placeholder": "Пошук в Інтернеті..."
-  }
+  },
+  "switched-to": "",
+  "searchEngines": {
+    "search": {
+      "name": "",
+      "description": ""
+    },
+    "youtube": {
+      "name": "",
+      "description": ""
+    },
+    "torrents": {
+      "name": "",
+      "description": ""
+    },
+    "overseerr": {
+      "name": "Overseerr",
+      "description": ""
+    }
+  },
+  "tip": "",
+  "switchedSearchEngine": ""
 }
\ No newline at end of file
diff --git a/public/locales/uk/modules/usenet.json b/public/locales/uk/modules/usenet.json
index 4cf378f3a..055b0ad9e 100644
--- a/public/locales/uk/modules/usenet.json
+++ b/public/locales/uk/modules/usenet.json
@@ -1,7 +1,7 @@
 {
   "descriptor": {
-    "name": "Sabnzbd",
-    "description": "Дозволяє переглядати чергу та історію usenet (Sabnzbd або NZBGet), призупиняти та відновлювати завантаження."
+    "name": "Usenet",
+    "description": "Дозволяє вам бачити вашу чергу та історію в usenet (Sabnzbd або NZBGet), керувати завантаженнями"
   },
   "card": {
     "errors": {
diff --git a/public/locales/uk/settings/customization/page-appearance.json b/public/locales/uk/settings/customization/page-appearance.json
index 0fd2dea4f..85c0974f5 100644
--- a/public/locales/uk/settings/customization/page-appearance.json
+++ b/public/locales/uk/settings/customization/page-appearance.json
@@ -8,6 +8,7 @@
   },
   "favicon": {
     "label": "Іконка"
+  },
   "background": {
     "label": "Фон"
   },
diff --git a/public/locales/vi/modules/search.json b/public/locales/vi/modules/search.json
index 15a53c470..4261a4378 100644
--- a/public/locales/vi/modules/search.json
+++ b/public/locales/vi/modules/search.json
@@ -5,5 +5,26 @@
   },
   "input": {
     "placeholder": "Tìm kiếm trên web..."
-  }
+  },
+  "switched-to": "",
+  "searchEngines": {
+    "search": {
+      "name": "",
+      "description": ""
+    },
+    "youtube": {
+      "name": "",
+      "description": ""
+    },
+    "torrents": {
+      "name": "",
+      "description": ""
+    },
+    "overseerr": {
+      "name": "Overseerr",
+      "description": ""
+    }
+  },
+  "tip": "",
+  "switchedSearchEngine": ""
 }
\ No newline at end of file
diff --git a/public/locales/vi/settings/common.json b/public/locales/vi/settings/common.json
index 0a5e2e7bc..edd9e3eb9 100644
--- a/public/locales/vi/settings/common.json
+++ b/public/locales/vi/settings/common.json
@@ -9,6 +9,6 @@
     "configTip": "Tải tệp cấu hình của bạn lên chỉ bằng cách kéo và thả tệp vào trong trang!"
   },
   "credits": {
-    "madeWithLove": "Được tạo bằng ❤️ bởi @"
+    "madeWithLove": "From @ with ❤️"
   }
 }
\ No newline at end of file
diff --git a/public/locales/vi/settings/general/config-changer.json b/public/locales/vi/settings/general/config-changer.json
index 03198b250..2e4aa86c3 100644
--- a/public/locales/vi/settings/general/config-changer.json
+++ b/public/locales/vi/settings/general/config-changer.json
@@ -19,7 +19,7 @@
     }
   },
   "buttons": {
-    "download": "Tải cấu hình xuống",
+    "download": "Tải cấu hình",
     "delete": {
       "text": "Xóa cấu hình",
       "notifications": {
diff --git a/public/locales/zh/modules/search.json b/public/locales/zh/modules/search.json
index 2977e49d2..e445878c4 100644
--- a/public/locales/zh/modules/search.json
+++ b/public/locales/zh/modules/search.json
@@ -5,5 +5,26 @@
   },
   "input": {
     "placeholder": "在网上搜索..."
-  }
+  },
+  "switched-to": "",
+  "searchEngines": {
+    "search": {
+      "name": "",
+      "description": ""
+    },
+    "youtube": {
+      "name": "",
+      "description": ""
+    },
+    "torrents": {
+      "name": "",
+      "description": ""
+    },
+    "overseerr": {
+      "name": "Overseerr",
+      "description": ""
+    }
+  },
+  "tip": "",
+  "switchedSearchEngine": ""
 }
\ No newline at end of file
diff --git a/public/locales/zh/modules/usenet.json b/public/locales/zh/modules/usenet.json
index d59137333..9c8f005cb 100644
--- a/public/locales/zh/modules/usenet.json
+++ b/public/locales/zh/modules/usenet.json
@@ -1,7 +1,7 @@
 {
   "descriptor": {
-    "name": "用户网",
-    "description": "允许您查看您的用户网（Sabnzbd 或 NZBGet）队列和历史记录，暂停和恢复下载。"
+    "name": "",
+    "description": ""
   },
   "card": {
     "errors": {
@@ -16,7 +16,7 @@
     "history": "历史"
   },
   "info": {
-    "sizeLeft": "左侧大小",
+    "sizeLeft": "左侧尺寸调整",
     "paused": "暂停使用"
   },
   "queue": {