Merge pull request #519 from ajnart/feature/spotlight-search-bar

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/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'}

src/components/layout/header/Header.tsx

@@ -1,27 +1,16 @@
-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 +24,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 />

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) => (

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>

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() {
   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`) }),
+    });
+  }
 }