improve: suggestion, modify type decleartion

Suggestion now shows a default search option same as query, this behaviour is same as major browsers.

components/search/engineSelector.tsx

@@ -6,12 +6,13 @@ import { useTranslations } from "next-intl";
 import { useRecoilValue, useSetRecoilState } from "recoil";
 import { settingsState } from "../state/settings";
 import { engineTranslation } from "./translatedEngineList";
+import { settingsType } from "@/global";
 
 export default function(
     props: { className: string }
 ) {
     const t = useTranslations("Search");
-    const settings: settings = useRecoilValue(settingsState);
+    const settings: settingsType = useRecoilValue(settingsState);
     const items = settings.searchEngines;
     const currentEngine: string = settings.currentSearchEngine;
     const displayEngine = getName(currentEngine);
@@ -20,7 +21,7 @@ export default function(
     const setSettings = useSetRecoilState(settingsState);
 
     function setEngine(engine: string) {
-        setSettings((oldSettings) => {
+        setSettings((oldSettings: settingsType) => {
             return {
                 ...oldSettings,
                 currentSearchEngine: engine

components/search/onesearch/onesearch.tsx

@@ -3,28 +3,40 @@ import SuggestionBox from "./suggestionBox";
 import Suggestion from "./suggestion";
 import { useRecoilValue } from "recoil";
 import { queryState } from "@/components/state/query";
-import { Suggestion as SuggestionType, Suggestions } from "search-engine-autocomplete";
-import { useLocale } from "next-intl";
+import { Suggestion as SuggestionType } from "search-engine-autocomplete";
+import { useLocale, useTranslations } from "next-intl";
 import { suggestionsResponse } from "@/global";
+import getSearchEngineName from "@/lib/getSearchEngineName";
 
 export default function () {
     const [suggestion, setSuggetsion] = useState([] as string[]);
     const [lastUpdate, setLastUpdate] = useState(0);
     const query = useRecoilValue(queryState);
+    const engineName = getSearchEngineName();
     const lang = useLocale();
+    const t = useTranslations("Search");
     useEffect(() => {
+        const searchHelperText = `<span class="text-zinc-500">${t("search-help-text", { engine: engineName })}</span>`;
+        if (query !== "") setSuggetsion((_) => [`${query} &nbsp; ${searchHelperText}`]);
+        else setSuggetsion((_) => []);
         const time = new Date().getTime().toString();
         fetch(`/api/suggestion?q=${query}&l=${lang}&t=${time}`)
             .then((res) => res.json())
             .then((data: suggestionsResponse) => {
                 const suggestions = data.suggestions;
                 if (data.time < lastUpdate) return;
-                setSuggetsion((_) => {
-                    return suggestions.map((s: SuggestionType) => s.suggestion);
+                let result = suggestions.map((s: SuggestionType) => s.suggestion);
+                result = result.filter(function (item, pos, self) {
+                    return self.indexOf(item) == pos;
+                });
+                setSuggetsion((oldSuggestions) => {
+                    return oldSuggestions.concat(result).filter(function (item, pos, self) {
+                        return self.indexOf(item) == pos;
+                    });
                 });
                 setLastUpdate(new Date().getTime());
             });
-    }, [query]);
+    }, [query, engineName]);
     return (
         <SuggestionBox>
             {suggestion.slice(0, 10).map((s: string) => {

components/search/onesearch/suggestion.tsx

@@ -1,7 +1,6 @@
 export default function(props: { children: React.ReactNode }) {   
     return (
-        <div className={`w-full h-10 leading-10 bg-slate-200 dark:bg-zinc-800 hover:bg-zinc-700 px-5 z-10 cursor-pointer duration-100`}>
-            <p>{props.children}</p>
+        <div dangerouslySetInnerHTML={{ __html: `<p>${props.children}</p>` as string }} className={`w-full h-10 leading-10 bg-zinc-100 hover:bg-zinc-300 dark:bg-zinc-800 hover:dark:bg-zinc-700 px-5 z-10 cursor-pointer duration-100`}>
         </div>
     );
 }

components/search/onesearch/suggestionBox.tsx

@@ -1,7 +1,7 @@
 export default function(props: { children: React.ReactNode }) {
     return (
-        <div className={`relative bg-slate-200 dark:bg-zinc-800 w-11/12 sm:w-[700px] h-auto left-1/2 
-        translate-x-[-50%] top-72 z-20 rounded overflow-hidden duration-250 ${props.children ? "opacity-100" : "opacity-0"}`}>
+        <div className={`relative bg-zinc-100 dark:bg-zinc-800 w-11/12 sm:w-[700px] h-auto left-1/2 
+        translate-x-[-50%] top-72 z-20 rounded-md overflow-hidden duration-250 ${props.children ? "opacity-100" : "opacity-0"}`}>
             {props.children}
         </div>
     );

components/search/search.tsx

@@ -3,13 +3,13 @@
 import { useRecoilState, useRecoilValue } from "recoil";
 import { settingsState } from "../state/settings";
 import { useTranslations } from "next-intl";
-import { useState } from "react";
 import { normalizeURL } from "@/lib/normalizeURL";
 import validLink from "@/lib/url/validLink";
 import { queryState } from "../state/query";
+import { settingsType } from "@/global";
 
 export default function Search(props: { onFocus: () => void }) {
-    const settings: settings = useRecoilValue(settingsState);
+    const settings: settingsType = useRecoilValue(settingsState);
     const t = useTranslations("Search");
     const [query, setQuery] = useRecoilState(queryState);
 

global.d.ts

@@ -1,6 +1,6 @@
 import { Suggestion } from "search-engine-autocomplete";
 
-type settings = {
+type settingsType = {
     version: number;
     elementBackdrop: boolean;
     bgBlur: boolean;

lib/getSearchEngineName.ts

@@ -0,0 +1,17 @@
+import { engineTranslation } from "@/components/search/translatedEngineList";
+import { settingsState } from "@/components/state/settings";
+import { settingsType } from "@/global";
+import { useTranslations } from "next-intl";
+import { useRecoilValue } from "recoil";
+
+export default function(){
+    const settings: settingsType = useRecoilValue(settingsState);
+    const currentEngine = settings.currentSearchEngine;
+    const displayEngine = getName(currentEngine);
+    return displayEngine;
+}
+
+function getName(engineKey: string) {
+    const t = useTranslations("Search");
+    return engineTranslation.includes(engineKey) ? t(`engine.${engineKey}`) : engineKey;
+}

lib/version.ts

@@ -1,3 +1,3 @@
-export const SPARKHOME_VERSION="4.7.2";
-export const CLIENT_VERSION="4.7.1";
-export const NEXT_API_VERSION="4.7.1";
+export const SPARKHOME_VERSION="4.10.2";
+export const CLIENT_VERSION="4.10.2";
+export const NEXT_API_VERSION="4.10.1";

messages/en-US.json

@@ -10,7 +10,8 @@
             "yandex": "Yandex",
             "yahoo": "Yahoo",
             "ecosia": "Ecosia"
-        }
+        },
+        "search-help-text": "Search {engine}"
     },
     "404": {
         "title": "Page Not Found"

messages/zh-CN.json

@@ -10,7 +10,8 @@
             "yandex": "Yandex",
             "yahoo": "雅虎",
             "ecosia": "Ecosia"
-        }
+        },
+        "search-help-text": "{engine} 搜索"
     },
     "404": {
         "title": "未找到"

package.json

@@ -1,6 +1,6 @@
 {
   "name": "sparkhome",
-  "version": "4.10.0",
+  "version": "4.10.2",
   "private": false,
   "scripts": {
     "dev": "next dev",