✨ 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>

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