diff --git a/public/locales/en/settings/general/search-engine.json b/public/locales/en/settings/general/search-engine.json index 42f708ffb..8d419fcf8 100644 --- a/public/locales/en/settings/general/search-engine.json +++ b/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" } } \ No newline at end of file diff --git a/src/components/SearchNewTabSwitch/SearchNewTabSwitch.tsx b/src/components/SearchNewTabSwitch/SearchNewTabSwitch.tsx new file mode 100644 index 000000000..ca759f411 --- /dev/null +++ b/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(defaultPosition); + const { t } = useTranslation('settings/general/search-engine'); + const toggleOpenInNewTab = () => { + setOpenInNewTab(!openInNewTab); + setConfig({ + ...config, + settings: { + ...config.settings, + searchNewTab: !openInNewTab, + }, + }); + }; + + return ( + +
+ toggleOpenInNewTab()} + size="md" + /> +
+ {t('searchNewTab.label')} +
+ ); +} diff --git a/src/components/Settings/CommonSettings.tsx b/src/components/Settings/CommonSettings.tsx index 45adbb735..c7d10b3af 100644 --- a/src/components/Settings/CommonSettings.tsx +++ b/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) { )} + diff --git a/src/modules/search/SearchModule.tsx b/src/modules/search/SearchModule.tsx index b884d3d1e..2363b4e7e 100644 --- a/src/modules/search/SearchModule.tsx +++ b/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; } diff --git a/src/tools/types.ts b/src/tools/types.ts index 7af6ea62e..da2116a6e 100644 --- a/src/tools/types.ts +++ b/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;