✨ Add switch option to open search box result in same tab #476

This makes it easier to search when homer is set as the default for a new
tab.

Co-authored-by: Momcilo Bajalovic <momcilobajalovic@Momcilos-Air.lan>

public/locales/en/settings/general/search-engine.json

@@ -7,5 +7,8 @@
   "customEngine": {
     "label": "Query URL",
     "placeholder": "Custom query URL"
+  },
+  "searchNewTab": {
+    "label": "Open search results in new tab"
   }
 }

src/components/SearchNewTabSwitch/SearchNewTabSwitch.tsx

@@ -0,0 +1,61 @@
+import React, { useState } from 'react';
+import { createStyles, Switch, Group } from '@mantine/core';
+import { useTranslation } from 'next-i18next';
+import { useConfig } from '../../tools/state';
+
+const useStyles = createStyles((theme) => ({
+  root: {
+    position: 'relative',
+    '& *': {
+      cursor: 'pointer',
+    },
+  },
+
+  icon: {
+    pointerEvents: 'none',
+    position: 'absolute',
+    zIndex: 1,
+    top: 3,
+  },
+
+  iconLight: {
+    left: 4,
+    color: theme.white,
+  },
+
+  iconDark: {
+    right: 4,
+    color: theme.colors.gray[6],
+  },
+}));
+
+export function SearchNewTabSwitch() {
+  const { config, setConfig } = useConfig();
+  const { classes, cx } = useStyles();
+  const defaultPosition = config?.settings?.searchNewTab ?? true;
+  const [openInNewTab, setOpenInNewTab] = useState<boolean>(defaultPosition);
+  const { t } = useTranslation('settings/general/search-engine');
+  const toggleOpenInNewTab = () => {
+    setOpenInNewTab(!openInNewTab);
+    setConfig({
+      ...config,
+      settings: {
+        ...config.settings,
+        searchNewTab: !openInNewTab,
+      },
+    });
+  };
+
+  return (
+    <Group>
+      <div className={classes.root}>
+        <Switch
+          checked={openInNewTab}
+          onChange={() => toggleOpenInNewTab()}
+          size="md"
+        />
+      </div>
+      {t('searchNewTab.label')}
+    </Group>
+  );
+}

src/components/Settings/CommonSettings.tsx

@@ -2,6 +2,7 @@ import { Text, SegmentedControl, TextInput, Stack } from '@mantine/core';
 import { useState } from 'react';
 import { useTranslation } from 'next-i18next';
 import { useConfig } from '../../tools/state';
+import { SearchNewTabSwitch } from '../SearchNewTabSwitch/SearchNewTabSwitch';
 import { ColorSchemeSwitch } from '../ColorSchemeToggle/ColorSchemeSwitch';
 import { WidgetsPositionSwitch } from '../WidgetsPositionSwitch/WidgetsPositionSwitch';
 import ConfigChanger from '../Config/ConfigChanger';
@@ -75,6 +76,7 @@ export default function CommonSettings(args: any) {
           </>
         )}
       </Stack>
+      <SearchNewTabSwitch />
       <ColorSchemeSwitch />
       <WidgetsPositionSwitch />
       <ModuleEnabler />

src/modules/search/SearchModule.tsx

@@ -153,20 +153,22 @@ export default function SearchBar(props: any) {
       }}
       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)}`);
+              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)}`);
+              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}`}`
+                `${queryUrl.includes('%s') ? queryUrl.replace('%s', query) : `${queryUrl}${query}`}`,
+                open_in
               );
               break;
           }

src/tools/types.ts

@@ -3,6 +3,7 @@ import { OptionValues } from '../modules/ModuleTypes';
 
 export interface Settings {
   searchUrl: string;
+  searchNewTab?: boolean;
   title?: string;
   logo?: string;
   favicon?: string;