✨ Adjust design for search engine config

src/components/Settings/Common/SearchEngineEnabledSwitch.tsx

@@ -1,44 +0,0 @@
-import { Switch } from '@mantine/core';
-import { useTranslation } from 'next-i18next';
-import { useState } from 'react';
-import { useConfigContext } from '../../../config/provider';
-import { useConfigStore } from '../../../config/store';
-import { SearchEngineCommonSettingsType } from '../../../types/settings';
-
-interface SearchEnabledSwitchProps {
-  defaultValue: boolean | undefined;
-}
-
-export function SearchEnabledSwitch({ defaultValue }: SearchEnabledSwitchProps) {
-  const { t } = useTranslation('settings/general/search-engine');
-  const { name: configName } = useConfigContext();
-  const updateConfig = useConfigStore((x) => x.updateConfig);
-
-  const [enabled, setEnabled] = useState<boolean>(defaultValue ?? true);
-
-  if (!configName) return null;
-
-  const toggleEnabled = () => {
-    setEnabled(!enabled);
-    updateConfig(configName, (prev) => ({
-      ...prev,
-      settings: {
-        ...prev.settings,
-        common: {
-          ...prev.settings.common,
-          searchEngine: {
-            ...prev.settings.common.searchEngine,
-            properties: {
-              ...prev.settings.common.searchEngine.properties,
-              enabled: !enabled,
-            },
-          } as SearchEngineCommonSettingsType,
-        },
-      },
-    }));
-  };
-
-  return (
-    <Switch checked={enabled} onChange={toggleEnabled} size="md" label={t('searchEnabled.label')} />
-  );
-}

src/components/Settings/Common/SearchEngineSelector.tsx

@@ -1,4 +1,4 @@
-import { Alert, Paper, SegmentedControl, Stack, TextInput, Title } from '@mantine/core';
+import { Alert, Paper, SegmentedControl, Space, Stack, TextInput, Title } from '@mantine/core';
 import { IconInfoCircle } from '@tabler/icons';
 import { useTranslation } from 'next-i18next';
 import { ChangeEventHandler, useState } from 'react';
@@ -9,12 +9,12 @@ import {
   SearchEngineCommonSettingsType,
 } from '../../../types/settings';
 import Tip from '../../layout/Tip';
+import { SearchNewTabSwitch } from './SearchNewTabSwitch';
 
 interface Props {
   searchEngine: SearchEngineCommonSettingsType;
 }
 
-// TODO: discuss with @manuel-rw the design of the search engine
 export const SearchEngineSelector = ({ searchEngine }: Props) => {
   const { t } = useTranslation(['settings/general/search-engine']);
   const { updateSearchEngineConfig } = useUpdateSearchEngineConfig();
@@ -49,18 +49,26 @@ export const SearchEngineSelector = ({ searchEngine }: Props) => {
         onChange={onEngineChange}
         data={searchEngineOptions}
       />
+      <Paper p="md" py="sm" mb="md" withBorder>
+        <Title order={6} mb={0}>
+          Search engine configuration
+        </Title>
+
+        <SearchNewTabSwitch defaultValue={searchEngine.properties.openInNewTab} />
+
         {engine === 'custom' && (
-        <Paper p="md" py="sm" mb="xs" withBorder>
-          <Title order={6}>{t('customEngine.title')}</Title>
-          <Tip>{t('tips.placeholderTip')}</Tip>
+          <>
+            <Space mb="md" />
             <TextInput
               label={t('customEngine.label')}
+              description={t('tips.placeholderTip')}
               placeholder={t('customEngine.placeholder')}
               value={searchUrl}
               onChange={onSearchUrlChange}
             />
-        </Paper>
+          </>
         )}
+      </Paper>
       <Alert icon={<IconInfoCircle />} color="blue">
         {t('tips.generalTip')}
       </Alert>
@@ -87,10 +95,11 @@ const useUpdateSearchEngineConfig = () => {
   const { name: configName } = useConfigContext();
   const updateConfig = useConfigStore((x) => x.updateConfig);
 
-  if (!configName)
+  if (!configName) {
     return {
       updateSearchEngineConfig: () => {},
     };
+  }
 
   const updateSearchEngineConfig = (engine: EngineType, searchUrl: string) => {
     updateConfig(configName, (prev) => ({

src/components/Settings/Common/SearchNewTabSwitch.tsx

@@ -42,7 +42,6 @@ export function SearchNewTabSwitch({ defaultValue }: SearchNewTabSwitchProps) {
     <Switch
       checked={openInNewTab}
       onChange={toggleOpenInNewTab}
-      size="md"
       label={t('searchNewTab.label')}
     />
   );

src/components/Settings/CommonSettings.tsx

@@ -3,7 +3,6 @@ import { useConfigContext } from '../../config/provider';
 import ConfigChanger from '../Config/ConfigChanger';
 import ConfigActions from './Common/ConfigActions';
 import LanguageSelect from './Common/LanguageSelect';
-import { SearchEnabledSwitch } from './Common/SearchEngineEnabledSwitch';
 import { SearchEngineSelector } from './Common/SearchEngineSelector';
 import { SearchNewTabSwitch } from './Common/SearchNewTabSwitch';
 
@@ -21,10 +20,6 @@ export default function CommonSettings() {
   return (
     <Stack mb="md" mr="sm">
       <SearchEngineSelector searchEngine={config.settings.common.searchEngine} />
-      <SearchNewTabSwitch
-        defaultValue={config.settings.common.searchEngine.properties.openInNewTab}
-      />
-      <SearchEnabledSwitch defaultValue={config.settings.common.searchEngine.properties.enabled} />
       <Space />
       <LanguageSelect />
       <ConfigChanger />

src/components/layout/header/Search.tsx

@@ -56,6 +56,8 @@ export function Search() {
   const [debounced, cancel] = useDebouncedValue(searchQuery, 250);
 
   // TODO: ask manuel-rw about overseerr
+  // Answer: We can simply check if there is a service of the type overseer and display results if there is one.
+  // Overseerr is not use anywhere else, so it makes no sense to add a standalone toggle for displaying results
   const isOverseerrEnabled = false; //config?.settings.common.enabledModules.overseerr;
   const overseerrService = config?.services.find(
     (service) =>