From 3bc052281232a0e58c4e0d2b93703ac1b444978b Mon Sep 17 00:00:00 2001
From: chain710 <chain710@gmail.com>
Date: Mon, 30 Jan 2023 16:06:56 +0800
Subject: [PATCH 1/3] Support multi search providers

- add `providers` option in search widget, value is array of provider name, like: `[google, bing]`
---
 src/components/widgets/search/search.jsx | 126 ++++++++++++++++++++---
 1 file changed, 111 insertions(+), 15 deletions(-)

diff --git a/src/components/widgets/search/search.jsx b/src/components/widgets/search/search.jsx
index dfb18367e..61b8786d5 100644
--- a/src/components/widgets/search/search.jsx
+++ b/src/components/widgets/search/search.jsx
@@ -1,7 +1,8 @@
-import { useState } from "react";
+import { useState, useEffect, Fragment } from "react";
 import { useTranslation } from "next-i18next";
 import { FiSearch } from "react-icons/fi";
 import { SiDuckduckgo, SiMicrosoftbing, SiGoogle, SiBaidu, SiBrave } from "react-icons/si";
+import { Listbox, Transition } from "@headlessui/react";
 
 export const searchProviders = {
   google: {
@@ -36,21 +37,59 @@ export const searchProviders = {
   },
 };
 
+function classNames(...classes) {
+  return classes.filter(Boolean).join(" ");
+}
+
+function useProviderState() {
+  const key = "search-name";
+
+  const [value, setValue] = useState(providers.google);
+  useEffect(() => {
+    const storedName = localStorage.getItem(key);
+    let storedProvider = null;
+    if (storedName) {
+      storedProvider = Object.values(providers).find((el) => el.name === storedName);
+      if (storedProvider) {
+        setValue(storedProvider);
+      }
+    }
+  }, []);
+
+  return [
+    value,
+    (val) => {
+      setValue(val);
+      localStorage.setItem(key, val.name);
+    },
+  ];
+}
+
+function getAvailableProviderIds(options) {
+  if (options.providers && Array.isArray(options.providers)) {
+    return Object.keys(providers).filter((value) => options.providers.includes(value));
+  }
+  return null;
+}
+
 export default function Search({ options }) {
   const { t } = useTranslation();
 
   const provider = searchProviders[options.provider];
   const [query, setQuery] = useState("");
+  const [selectedProvider, setSelectedProvider] = useProviderState();
 
-  if (!provider) {
+  const availableProviderIds = getAvailableProviderIds(options);
+  if (!provider && !availableProviderIds) {
     return null;
   }
 
   function handleSubmit(event) {
     const q = encodeURIComponent(query);
 
-    if (provider.url) {
-      window.open(`${provider.url}${q}`, options.target || "_blank");
+    const url = provider ? provider.url : selectedProvider.url;
+    if (url) {
+      window.open(`${url}${q}`, options.target || "_blank");
     } else {
       window.open(`${options.url}${q}`, options.target || "_blank");
     }
@@ -60,6 +99,73 @@ export default function Search({ options }) {
     setQuery("");
   }
 
+  const multiProviders = () => (
+    <Listbox as="div" value={selectedProvider} onChange={setSelectedProvider} className="relative text-left">
+      <div>
+        <Listbox.Button
+          className="
+      absolute right-0.5 bottom-0.5 rounded-r-md px-4 py-2 border-1
+      text-white font-medium text-sm
+      bg-theme-600/40 dark:bg-white/10
+      focus:ring-theme-500 dark:focus:ring-white/50"
+        >
+          <selectedProvider.icon className="text-white w-3 h-3" />
+          <span className="sr-only">{t("search.search")}</span>
+        </Listbox.Button>
+      </div>
+
+      <Transition
+        as={Fragment}
+        enter="transition ease-out duration-100"
+        enterFrom="transform opacity-0 scale-95"
+        enterTo="transform opacity-100 scale-100"
+        leave="transition ease-in duration-75"
+        leaveFrom="transform opacity-100 scale-100"
+        leaveTo="transform opacity-0 scale-95"
+      >
+        <Listbox.Options
+          className="absolute right-0 z-10 mt-1 origin-top-right rounded-md 
+          bg-theme-100 dark:bg-theme-600 shadow-lg 
+          ring-1 ring-black ring-opacity-5 focus:outline-none"
+        >
+          <div className="flex flex-col">
+            {availableProviderIds.map((providerId) => {
+              const p = providers[providerId];
+              return (
+                <Listbox.Option key={providerId} value={p} as={Fragment}>
+                  {({ active }) => (
+                    <li
+                      className={classNames(
+                        "rounded-md cursor-pointer",
+                        active ? "bg-theme-600/10 dark:bg-white/10 dark:text-gray-900" : "dark:text-gray-100"
+                      )}
+                    >
+                      <p.icon className="h-4 w-4 mx-4 my-2" />
+                    </li>
+                  )}
+                </Listbox.Option>
+              );
+            })}
+          </div>
+        </Listbox.Options>
+      </Transition>
+    </Listbox>
+  );
+
+  const singleProvider = () => (
+    <button
+      type="submit"
+      className="
+        absolute right-0.5 bottom-0.5 rounded-r-md px-4 py-2 border-1
+        text-white font-medium text-sm
+        bg-theme-600/40 dark:bg-white/10
+        focus:ring-theme-500 dark:focus:ring-white/50"
+    >
+      <provider.icon className="text-white w-3 h-3" />
+      <span className="sr-only">{t("search.search")}</span>
+    </button>
+  );
+
   return (
     <form className="flex-col relative h-8 my-4 min-w-fit grow first:ml-0 ml-4" onSubmit={handleSubmit}>
       <div className="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none w-full text-theme-800 dark:text-white" />
@@ -82,17 +188,7 @@ export default function Search({ options }) {
         // eslint-disable-next-line jsx-a11y/no-autofocus
         autoFocus={options.focus}
       />
-      <button
-        type="submit"
-        className="
-        absolute right-0.5 bottom-0.5 rounded-r-md px-4 py-2 border-1
-        text-white font-medium text-sm
-        bg-theme-600/40 dark:bg-white/10
-        focus:ring-theme-500 dark:focus:ring-white/50"
-      >
-        <provider.icon className="text-white w-3 h-3" />
-        <span className="sr-only">{t("search.search")}</span>
-      </button>
+      {provider ? singleProvider() : multiProviders()}
     </form>
   );
 }

From 87dbbcb1e05a251842cca813f7c8bc1f5b5fae1f Mon Sep 17 00:00:00 2001
From: shamoon <4887959+shamoon@users.noreply.github.com>
Date: Mon, 30 Jan 2023 21:09:15 -0800
Subject: [PATCH 2/3] Refactor multi & single providers & retain `provider` key
 only

---
 src/components/widgets/search/search.jsx | 176 ++++++++++-------------
 1 file changed, 78 insertions(+), 98 deletions(-)

diff --git a/src/components/widgets/search/search.jsx b/src/components/widgets/search/search.jsx
index 61b8786d5..0189e809a 100644
--- a/src/components/widgets/search/search.jsx
+++ b/src/components/widgets/search/search.jsx
@@ -41,33 +41,12 @@ function classNames(...classes) {
   return classes.filter(Boolean).join(" ");
 }
 
-function useProviderState() {
-  const key = "search-name";
-
-  const [value, setValue] = useState(providers.google);
-  useEffect(() => {
-    const storedName = localStorage.getItem(key);
-    let storedProvider = null;
-    if (storedName) {
-      storedProvider = Object.values(providers).find((el) => el.name === storedName);
-      if (storedProvider) {
-        setValue(storedProvider);
-      }
-    }
-  }, []);
-
-  return [
-    value,
-    (val) => {
-      setValue(val);
-      localStorage.setItem(key, val.name);
-    },
-  ];
-}
-
 function getAvailableProviderIds(options) {
-  if (options.providers && Array.isArray(options.providers)) {
-    return Object.keys(providers).filter((value) => options.providers.includes(value));
+  if (options.provider && Array.isArray(options.provider)) {
+    return Object.keys(searchProviders).filter((value) => options.provider.includes(value));
+  }
+  if (options.provider && searchProviders[options.provider]) {
+    return [options.provider];
   }
   return null;
 }
@@ -75,19 +54,34 @@ function getAvailableProviderIds(options) {
 export default function Search({ options }) {
   const { t } = useTranslation();
 
-  const provider = searchProviders[options.provider];
+  const availableProviderIds = getAvailableProviderIds(options);
+
+  const key = "search-name";
+
   const [query, setQuery] = useState("");
-  const [selectedProvider, setSelectedProvider] = useProviderState();
+  const [selectedProvider, setSelectedProvider] = useState(searchProviders[availableProviderIds[0] ?? searchProviders.google]);
 
-  const availableProviderIds = getAvailableProviderIds(options);
-  if (!provider && !availableProviderIds) {
+  useEffect(() => {
+    const storedName = localStorage.getItem(key);
+    let storedProvider = null;
+    let storedProviderKey = null;
+    if (storedName) {
+      storedProvider = Object.values(searchProviders).find((el) => el.name === storedName);
+      storedProviderKey = Object.keys(searchProviders).find((pkey) => searchProviders[pkey] === storedProvider);
+      if (storedProvider && availableProviderIds.includes(storedProviderKey)) {
+        setSelectedProvider(storedProvider);
+      }
+    }
+  }, [availableProviderIds]);
+  
+  if (!availableProviderIds) {
     return null;
   }
 
   function handleSubmit(event) {
     const q = encodeURIComponent(query);
 
-    const url = provider ? provider.url : selectedProvider.url;
+    const url = { selectedProvider };
     if (url) {
       window.open(`${url}${q}`, options.target || "_blank");
     } else {
@@ -99,72 +93,10 @@ export default function Search({ options }) {
     setQuery("");
   }
 
-  const multiProviders = () => (
-    <Listbox as="div" value={selectedProvider} onChange={setSelectedProvider} className="relative text-left">
-      <div>
-        <Listbox.Button
-          className="
-      absolute right-0.5 bottom-0.5 rounded-r-md px-4 py-2 border-1
-      text-white font-medium text-sm
-      bg-theme-600/40 dark:bg-white/10
-      focus:ring-theme-500 dark:focus:ring-white/50"
-        >
-          <selectedProvider.icon className="text-white w-3 h-3" />
-          <span className="sr-only">{t("search.search")}</span>
-        </Listbox.Button>
-      </div>
-
-      <Transition
-        as={Fragment}
-        enter="transition ease-out duration-100"
-        enterFrom="transform opacity-0 scale-95"
-        enterTo="transform opacity-100 scale-100"
-        leave="transition ease-in duration-75"
-        leaveFrom="transform opacity-100 scale-100"
-        leaveTo="transform opacity-0 scale-95"
-      >
-        <Listbox.Options
-          className="absolute right-0 z-10 mt-1 origin-top-right rounded-md 
-          bg-theme-100 dark:bg-theme-600 shadow-lg 
-          ring-1 ring-black ring-opacity-5 focus:outline-none"
-        >
-          <div className="flex flex-col">
-            {availableProviderIds.map((providerId) => {
-              const p = providers[providerId];
-              return (
-                <Listbox.Option key={providerId} value={p} as={Fragment}>
-                  {({ active }) => (
-                    <li
-                      className={classNames(
-                        "rounded-md cursor-pointer",
-                        active ? "bg-theme-600/10 dark:bg-white/10 dark:text-gray-900" : "dark:text-gray-100"
-                      )}
-                    >
-                      <p.icon className="h-4 w-4 mx-4 my-2" />
-                    </li>
-                  )}
-                </Listbox.Option>
-              );
-            })}
-          </div>
-        </Listbox.Options>
-      </Transition>
-    </Listbox>
-  );
-
-  const singleProvider = () => (
-    <button
-      type="submit"
-      className="
-        absolute right-0.5 bottom-0.5 rounded-r-md px-4 py-2 border-1
-        text-white font-medium text-sm
-        bg-theme-600/40 dark:bg-white/10
-        focus:ring-theme-500 dark:focus:ring-white/50"
-    >
-      <provider.icon className="text-white w-3 h-3" />
-      <span className="sr-only">{t("search.search")}</span>
-    </button>
-  );
+  const onChangeProvider = (provider) => {
+    setSelectedProvider(provider);
+    localStorage.setItem(key, provider.name);
+  }
 
   return (
     <form className="flex-col relative h-8 my-4 min-w-fit grow first:ml-0 ml-4" onSubmit={handleSubmit}>
@@ -188,7 +120,55 @@ export default function Search({ options }) {
         // eslint-disable-next-line jsx-a11y/no-autofocus
         autoFocus={options.focus}
       />
-      {provider ? singleProvider() : multiProviders()}
+      <Listbox as="div" value={selectedProvider} onChange={onChangeProvider} className="relative text-left" disabled={availableProviderIds?.length === 1}>
+        <div>
+          <Listbox.Button
+            className="
+        absolute right-0.5 bottom-0.5 rounded-r-md px-4 py-2 border-1
+        text-white font-medium text-sm
+        bg-theme-600/40 dark:bg-white/10
+        focus:ring-theme-500 dark:focus:ring-white/50"
+          >
+            <selectedProvider.icon className="text-white w-3 h-3" />
+            <span className="sr-only">{t("search.search")}</span>
+          </Listbox.Button>
+        </div>
+        <Transition
+          as={Fragment}
+          enter="transition ease-out duration-100"
+          enterFrom="transform opacity-0 scale-95"
+          enterTo="transform opacity-100 scale-100"
+          leave="transition ease-in duration-75"
+          leaveFrom="transform opacity-100 scale-100"
+          leaveTo="transform opacity-0 scale-95"
+        >
+          <Listbox.Options
+            className="absolute right-0 z-10 mt-1 origin-top-right rounded-md 
+            bg-theme-100 dark:bg-theme-600 shadow-lg 
+            ring-1 ring-black ring-opacity-5 focus:outline-none"
+          >
+            <div className="flex flex-col">
+              {availableProviderIds.map((providerId) => {
+                const p = searchProviders[providerId];
+                return (
+                  <Listbox.Option key={providerId} value={p} as={Fragment}>
+                    {({ active }) => (
+                      <li
+                        className={classNames(
+                          "rounded-md cursor-pointer",
+                          active ? "bg-theme-600/10 dark:bg-white/10 dark:text-gray-900" : "dark:text-gray-100"
+                        )}
+                      >
+                        <p.icon className="h-4 w-4 mx-4 my-2" />
+                      </li>
+                    )}
+                  </Listbox.Option>
+                );
+              })}
+            </div>
+          </Listbox.Options>
+        </Transition>
+      </Listbox>
     </form>
   );
 }

From 7a5a3a6608dfc0e55f7468f23e81827e063a6726 Mon Sep 17 00:00:00 2001
From: shamoon <4887959+shamoon@users.noreply.github.com>
Date: Tue, 31 Jan 2023 00:25:23 -0800
Subject: [PATCH 3/3] Compatible with quicklaunch internet search

---
 src/components/widgets/search/search.jsx | 33 +++++++++++++-----------
 src/pages/index.jsx                      | 17 +++++++-----
 2 files changed, 29 insertions(+), 21 deletions(-)

diff --git a/src/components/widgets/search/search.jsx b/src/components/widgets/search/search.jsx
index 0189e809a..b04f0e9f3 100644
--- a/src/components/widgets/search/search.jsx
+++ b/src/components/widgets/search/search.jsx
@@ -3,6 +3,7 @@ import { useTranslation } from "next-i18next";
 import { FiSearch } from "react-icons/fi";
 import { SiDuckduckgo, SiMicrosoftbing, SiGoogle, SiBaidu, SiBrave } from "react-icons/si";
 import { Listbox, Transition } from "@headlessui/react";
+import classNames from "classnames";
 
 export const searchProviders = {
   google: {
@@ -37,10 +38,6 @@ export const searchProviders = {
   },
 };
 
-function classNames(...classes) {
-  return classes.filter(Boolean).join(" ");
-}
-
 function getAvailableProviderIds(options) {
   if (options.provider && Array.isArray(options.provider)) {
     return Object.keys(searchProviders).filter((value) => options.provider.includes(value));
@@ -51,26 +48,32 @@ function getAvailableProviderIds(options) {
   return null;
 }
 
+const localStorageKey = "search-name";
+
+export function getStoredProvider() {
+  if (typeof window !== 'undefined') {
+    const storedName = localStorage.getItem(localStorageKey);
+    if (storedName) {
+      return Object.values(searchProviders).find((el) => el.name === storedName);
+    }
+  }
+  return null;
+}
+
 export default function Search({ options }) {
   const { t } = useTranslation();
 
   const availableProviderIds = getAvailableProviderIds(options);
 
-  const key = "search-name";
-
   const [query, setQuery] = useState("");
   const [selectedProvider, setSelectedProvider] = useState(searchProviders[availableProviderIds[0] ?? searchProviders.google]);
 
   useEffect(() => {
-    const storedName = localStorage.getItem(key);
-    let storedProvider = null;
+    const storedProvider = getStoredProvider();
     let storedProviderKey = null;
-    if (storedName) {
-      storedProvider = Object.values(searchProviders).find((el) => el.name === storedName);
-      storedProviderKey = Object.keys(searchProviders).find((pkey) => searchProviders[pkey] === storedProvider);
-      if (storedProvider && availableProviderIds.includes(storedProviderKey)) {
-        setSelectedProvider(storedProvider);
-      }
+    storedProviderKey = Object.keys(searchProviders).find((pkey) => searchProviders[pkey] === storedProvider);
+    if (storedProvider && availableProviderIds.includes(storedProviderKey)) {
+      setSelectedProvider(storedProvider);
     }
   }, [availableProviderIds]);
   
@@ -95,7 +98,7 @@ export default function Search({ options }) {
 
   const onChangeProvider = (provider) => {
     setSelectedProvider(provider);
-    localStorage.setItem(key, provider.name);
+    localStorage.setItem(localStorageKey, provider.name);
   }
 
   return (
diff --git a/src/pages/index.jsx b/src/pages/index.jsx
index 22b10248a..6c42ab716 100644
--- a/src/pages/index.jsx
+++ b/src/pages/index.jsx
@@ -22,7 +22,7 @@ import { bookmarksResponse, servicesResponse, widgetsResponse } from "utils/conf
 import ErrorBoundary from "components/errorboundry";
 import themes from "utils/styles/themes";
 import QuickLaunch from "components/quicklaunch";
-import { searchProviders } from "components/widgets/search/search";
+import { getStoredProvider, searchProviders } from "components/widgets/search/search";
 
 const ThemeToggle = dynamic(() => import("components/toggles/theme"), {
   ssr: false,
@@ -197,12 +197,17 @@ function Home({ initialSettings }) {
   let searchProvider = null;
   const searchWidget = Object.values(widgets).find(w => w.type === "search");
   if (searchWidget) {
-    if (searchWidget.options?.provider === 'custom') {
-      searchProvider = {
-        url: searchWidget.options.url
-      }
+    if (Array.isArray(searchWidget.options?.provider)) {
+      // if search provider is a list, try to retrieve from localstorage, fall back to the first
+      searchProvider = getStoredProvider() ?? searchProviders[searchWidget.options.provider[0]];
     } else {
-      searchProvider = searchProviders[searchWidget.options?.provider];
+      if (searchWidget.options?.provider === 'custom') {
+        searchProvider = {
+          url: searchWidget.options.url
+        }
+      } else {
+        searchProvider = searchProviders[searchWidget.options?.provider];
+      }
     }
   }