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 1/8] 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 940513dc32fec53aa8ea7ab4a3c8a085d2af1527 Mon Sep 17 00:00:00 2001
From: ajnart <ajnart@pm.me>
Date: Tue, 29 Nov 2022 16:22:27 +0900
Subject: [PATCH 2/8] 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 3/8] 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 4/8] 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 5/8] 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 6/8] 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 7/8] 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 8/8] 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('');