Merge pull request #897 from avdept/add_search_to_quicklaunch

Add internet search to quicklaunch

public/locales/en/common.json

@@ -282,7 +282,8 @@
     },
     "quicklaunch": {
         "bookmark": "Bookmark",
-        "service": "Service"
+        "service": "Service",
+        "search": "Search"
     },
     "wmo": {
         "0-day": "Sunny",

src/components/quicklaunch.jsx

@@ -6,7 +6,7 @@ import ResolvedIcon from "./resolvedicon";
 
 import { SettingsContext } from "utils/contexts/settings";
 
-export default function QuickLaunch({servicesAndBookmarks, searchString, setSearchString, isOpen, close, searchDescriptions}) {
+export default function QuickLaunch({servicesAndBookmarks, searchString, setSearchString, isOpen, close, searchDescriptions, searchProvider}) {
   const { t } = useTranslation();
   const { settings } = useContext(SettingsContext);
 
@@ -50,6 +50,7 @@ export default function QuickLaunch({servicesAndBookmarks, searchString, setSear
     }
   }
 
+
   function handleItemHover(event) {
     setCurrentItemIndex(parseInt(event.target?.dataset?.index, 10));
   }
@@ -75,6 +76,15 @@ export default function QuickLaunch({servicesAndBookmarks, searchString, setSear
       if (searchDescriptions) {
         newResults = newResults.sort((a, b) => b.priority - a.priority);
       }
+      if (searchProvider) {
+        newResults.push(
+          {
+            href: searchProvider.url + encodeURIComponent(searchString),
+            name: `${searchProvider.name} ${t("quicklaunch.search")} `,
+            type: 'search',
+          }
+        )
+      }
 
       setResults(newResults);
 
@@ -82,7 +92,7 @@ export default function QuickLaunch({servicesAndBookmarks, searchString, setSear
         setCurrentItemIndex(0);
       }
     }
-  }, [searchString, servicesAndBookmarks, searchDescriptions]);
+  }, [searchString, servicesAndBookmarks, searchDescriptions, searchProvider, t]);
 
 
   const [hidden, setHidden] = useState(true);
@@ -135,10 +145,10 @@ export default function QuickLaunch({servicesAndBookmarks, searchString, setSear
                     i === currentItemIndex && "bg-theme-300/50 dark:bg-theme-700/50",
                     )} onClick={handleItemClick}>
                     <div className="flex flex-row items-center mr-4 pointer-events-none">
-                      <div className="w-5 text-xs mr-4">
+                      {(r.icon || r.abbr) && <div className="w-5 text-xs mr-4">
                         {r.icon && <ResolvedIcon icon={r.icon} />}
                         {r.abbr && r.abbr}
-                      </div>
+                      </div>}
                       <div className="flex flex-col md:flex-row text-left items-baseline mr-4 pointer-events-none">
                         <span className="mr-4">{r.name}</span>
                         {r.description &&
@@ -148,7 +158,7 @@ export default function QuickLaunch({servicesAndBookmarks, searchString, setSear
                         }
                       </div>
                     </div>
-                    <div className="text-xs text-theme-600 font-bold pointer-events-none">{r.type === 'service' ? t("quicklaunch.service") : t("quicklaunch.bookmark")}</div>
+                    <div className="text-xs text-theme-600 font-bold pointer-events-none">{t(`quicklaunch.${r.type ? r.type.toLowerCase() : 'bookmark'}`)}</div>
                   </button>
                 </li>
               ))}

src/components/widgets/search/search.jsx

@@ -3,7 +3,7 @@ import { useTranslation } from "next-i18next";
 import { FiSearch } from "react-icons/fi";
 import { SiDuckduckgo, SiMicrosoftbing, SiGoogle, SiBaidu, SiBrave } from "react-icons/si";
 
-const providers = {
+export const searchProviders = {
   google: {
     name: "Google",
     url: "https://www.google.com/search?q=",
@@ -39,7 +39,7 @@ const providers = {
 export default function Search({ options }) {
   const { t } = useTranslation();
 
-  const provider = providers[options.provider];
+  const provider = searchProviders[options.provider];
   const [query, setQuery] = useState("");
 
   if (!provider) {

src/pages/index.jsx

@@ -22,6 +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";
 
 const ThemeToggle = dynamic(() => import("components/toggles/theme"), {
   ssr: false,
@@ -193,6 +194,11 @@ function Home({ initialSettings }) {
 
   const [searching, setSearching] = useState(false);
   const [searchString, setSearchString] = useState("");
+  let searchProvider = null;
+  const searchWidget = Object.values(widgets).find(w => w.type === "search");
+  if (searchWidget) {
+    searchProvider = searchProviders[searchWidget.options?.provider];
+  }
 
   useEffect(() => {
     function handleKeyDown(e) {
@@ -251,6 +257,7 @@ function Home({ initialSettings }) {
             isOpen={searching}
             close={setSearching}
             searchDescriptions={settings.quicklaunch?.searchDescriptions}
+            searchProvider={settings.quicklaunch?.hideInternetSearch ? null : searchProvider}
           />
           {widgets && (
             <>