Entirely rework the search module

It's not as bad anymore 🥳

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",

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}}"
 }

src/components/layout/header/Header.tsx

@@ -1,9 +1,4 @@
-import {
+import { Group, Header as Head, useMantineColorScheme, useMantineTheme } from '@mantine/core';
-  Group,
-  Header as Head,
-  useMantineColorScheme,
-  useMantineTheme,
-} from '@mantine/core';
 import { useViewportSize } from '@mantine/hooks';
 import { AddItemShelfButton } from '../../AppShelf/AddAppShelfItem';
 

src/modules/index.ts

@@ -8,4 +8,3 @@ export * from './weather';
 export * from './docker';
 export * from './overseerr';
 export * from './usenet';
-export * from './spotlight';

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,
+  ActionIcon,
-  IconBrandYoutube as BrandYoutube,
+  Box,
-  IconDownload as Download,
+  createStyles,
-  IconMovie,
+  Divider,
-} from '@tabler/icons';
+  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,
+  icon: IconSearch,
-  component: SearchBar,
+  component: SearchModuleComponent,
   id: 'search',
 };
 
-export default function SearchBar(props: any) {
+interface ItemProps extends React.ComponentPropsWithoutRef<'div'> {
-  const { classes, cx } = useStyles();
+  label: string;
-  // Config
+  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 searchEnginesList: ItemProps[] = [
-  const [loading, setLoading] = useState<boolean>(false);
+    {
-  const [icon, setIcon] = useState(<Search />);
+      icon: <IconSearch />,
-  const [results, setResults] = useState<any[]>([]);
+      disabled: false,
-  const [opened, setOpened] = useState(false);
+      label: t('searchEngines.search.name'),
-  const ref = useClickOutside(() => setOpened(false));
+      value: 'search',
-
+      description: t('searchEngines.search.description'),
-  const textInput = useRef<HTMLInputElement>();
+      url: queryUrl,
-  useHotkeys([['ctrl+K', () => textInput.current && textInput.current.focus()]]);
+      shortcut: 's',
-
-  const form = useForm({
-    initialValues: {
-      query: '',
     },
-  });
+    {
-  const [debounced, cancel] = useDebouncedValue(form.values.query, 250);
+      icon: <IconDownload />,
-  const { t } = useTranslation('modules/search');
+      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) {
+    if (debounced !== '' && selectedSearchEngine.value === 'overseerr' && searchQuery.length > 3) {
-      showNotification({
+      axios.get(`/api/modules/overseerr?query=${searchQuery}`).then((res) => {
-        title: 'Overseerr integration',
+        setOverseerrResults(res.data.results ?? []);
-        message:
-          'Module enabled but no service is configured with the type "Overseerr" / "Jellyseerr"',
-        color: 'red',
       });
     }
-  }, [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
+  //TODO: Fix the bug where clicking anything inside the Modal to ask for a movie
-  const matchingServices = config.services.filter((service) => {
+  // will close it (Because it closes the underlying Popover)
-    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>
-    )
-  );
-
   return (
-    <form
+    <Box style={{ width: '100%', maxWidth: 400, minWidth: 300 }}>
-      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);
-      })}
-    >
       <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"
+            rightSection={<SearchModuleMenu />}
-            itemComponent={AutoCompleteItem}
+            placeholder={t(`searchEngines.${selectedSearchEngine.value}.description`)}
-            onItemSubmit={(item) => {
+            value={searchQuery}
-              setOpened(false);
+            onChange={(event) => tryMatchSearchEngine(event.currentTarget.value, setSearchQuery)}
-              if (item.url) {
+            // Replace %s if it is in selectedSearchEngine.url with searchQuery, otherwise append searchQuery at the end of it
-                results.splice(0, autocompleteData.length);
+            onKeyDown={(event) => {
-                form.reset();
+              if (event.key === 'Enter' && searchQuery.length > 0) {
-                window.open(item.url);
+                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}>
+          <div>
-            <ScrollArea style={{ height: 400, width: 400 }} offsetScrollbars>
+            <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`) }),
+    });
+  }
 }

src/modules/spotlight/SpotlightModule.tsx

@@ -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)
-  }
-}

src/modules/spotlight/index.tsx

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

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