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",
@@ -432,7 +433,7 @@
     },
     "cloudflared": {
         "origin_ip": "Origin IP",
-        "status": "Status" 
+        "status": "Status"
     },
     "proxmoxbackupserver": {
         "datastore_usage": "Datastore",
@@ -446,4 +447,4 @@
         "videos": "Videos",
         "storage": "Storage"
     }
-}
+}

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);
 
@@ -34,7 +34,7 @@ export default function QuickLaunch({servicesAndBookmarks, searchString, setSear
 
   function handleSearchKeyDown(event) {
     if (!isOpen) return;
-    
+
     if (event.key === "Escape") {
       closeAndReset();
       event.preventDefault();
@@ -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);
@@ -90,7 +100,7 @@ export default function QuickLaunch({servicesAndBookmarks, searchString, setSear
     function handleBackdropClick(event) {
       if (event.target?.tagName === "DIV") closeAndReset();
     }
-    
+
     if (isOpen) {
       searchField.current.focus();
       document.body.addEventListener('click', handleBackdropClick);
@@ -135,20 +145,20 @@ 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 && 
+                        {r.description &&
                           <span className="text-xs text-theme-600 text-light">
                             {searchDescriptions && r.priority < 2 ? highlightText(r.description) : r.description}
                           </span>
                         }
                       </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 && (
             <>