Suggestions added

Witherbomb47 · Feb 13, 2024 · 6eb5eb1 · 6eb5eb1
1 parent 171c421
commit 6eb5eb1
Show file tree

Hide file tree

Showing 7 changed files with 63 additions and 8 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -104,7 +104,6 @@
 - [x] More languages
 
 # Todo
-- [ ] Suggestions with icon for website or search
 - [ ] Apps
 - [ ] Games
 - [ ] Privacy policy

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -15,6 +15,7 @@
   },
   "dependencies": {
     "@ekwoka/preact-global-state": "^2.0.0",
+    "@tomphttp/bare-client": "^2.2.0-alpha",
     "@tomphttp/bare-server-node": "^2.0.1",
     "ejs": "^3.1.9",
     "express": "^4.18.2",

diff --git a/src/components/web.tsx b/src/components/web.tsx
@@ -53,6 +53,7 @@ function Web({ open, setOpen }: WebTypes) {
 
     function closeWeb() {
         if (open) {
+            web.current.src = "";
             search.value = "";
             clearInput();
             setOpen(false);

diff --git a/src/pages/home.tsx b/src/pages/home.tsx
@@ -5,6 +5,8 @@ import { Web, searchWeb } from "../components/web";
 import { SearchIcon } from "../assets/searchIcon";
 import { geSearchEngine } from "../util/getSearchEngine";
 import { CloseIcon } from "../assets/closeIcon";
+import { createBareClient } from "@tomphttp/bare-client";
+import { bare } from "../settings";
 
 function Home() {
     const [service] = useGlobalState<string>("service", localStorage.getItem("metallic/service") || "ultraviolet");
@@ -13,10 +15,17 @@ function Home() {
     const [webOpen, setWebOpen] = useState(false);
     const search = useRef<HTMLInputElement>();
     const [searchHasValue, setSearchHasValue] = useState(false);
+    const [suggestions, setSuggestions] = useState<any>([]);
+    let bareClient: any;
+
+    (async () => {
+        bareClient = await createBareClient(bare);
+    })();
 
     function clearInput() {
         if (search && search.current) {
             if (!search.current.value) {
+                setSuggestions([]);
                 setSearchHasValue(false);
             }
         }
@@ -27,10 +36,30 @@ function Home() {
             search.current.focus();
         }
     }, [location.pathname])
-    
-    const handleSearch = async (e: any) => {
+
+    const handleSuggestions = async (e: any) => {
         setSearchHasValue(e.target.value !== "");
 
+        if (e.target.value) {
+            if (bareClient) {
+                try {
+                    const site = await bareClient.fetch(
+                        "https://duckduckgo.com/ac/?q=" + e.target.value + "&type=list"
+                    );
+                    const results = await site.json();
+                    setSuggestions(results[1].slice(0, 9))
+                } catch (err) {
+                    setSuggestions([]);
+                }
+            } else {
+                setSuggestions([]);
+            }
+        } else {
+            setSuggestions([]);
+        }
+    }
+
+    const handleSearch = async (e: any) => {
         if (e.key == "Enter") {
             if (e.target.value) {
                 await searchWeb(e.target.value, service, geSearchEngine(searchEngine), webOpen, setWebOpen, e.target, clearInput);
@@ -46,6 +75,10 @@ function Home() {
         }
     }
 
+    async function clickSuggestion(suggestion: string) {
+        await searchWeb(suggestion, service, geSearchEngine(searchEngine), webOpen, setWebOpen, search.current, clearInput);
+    }
+
     return (
         <>
             <Head />
@@ -58,17 +91,22 @@ function Home() {
             ) : (
                 <h1 class="title text-4xl sm:text-6xl font-bold text-center mt-32 mb-8 sm:mb-16 font-title">Metallic</h1>
             )}
-            <div class="flex justify-center">
-                <div class="bg-secondary rounded-full w-[600px] h-14 flex items-center justify-center">
+            <div class="flex flex-col items-center justify-center">
+                <div class={"bg-secondary w-[600px] h-14 flex items-center justify-center" + (suggestions.length ? " rounded-[28px_28px_0_0]" : " rounded-full")}>
                     <div class="w-16 h-full flex items-center justify-center shrink-0">
                         <SearchIcon />
                     </div>
                     {/**@ts-ignore */}
-                    <input ref={search} autoFocus={true} onKeyUp={handleSearch} class="bg-transparent w-full h-full outline-none text-textInverse" spellcheck={false} autocomplete="off" data-enable-grammarly="false" />
-                    <button onClick={clearSearch} class="w-16 h-full flex items-center justify-center shrink-0" style={{display: searchHasValue ? "flex" : "none"}}>
+                    <input ref={search} autoFocus={true} onKeyUp={handleSearch} onChange={handleSuggestions} class="bg-transparent w-full h-full outline-none text-textInverse" spellcheck={false} autocomplete="off" data-enable-grammarly="false" />
+                    <button onClick={clearSearch} class="w-16 h-full flex items-center justify-center shrink-0" style={{ display: searchHasValue ? "flex" : "none" }}>
                         <CloseIcon />
                     </button>
                 </div>
+                <div class={"bg-secondary rounded-[0_0_28px_28px] w-[600px]" + (!suggestions.length ? " hidden" : "")}>
+                    {suggestions.map((suggestion: string) => (
+                        <div onClick={() => clickSuggestion(suggestion)} class="h-14 flex items-center cursor-pointer px-4 select-none" key={suggestion}>{suggestion}</div>
+                    ))}
+                </div>
             </div>
         </>
     )

diff --git a/src/settings.ts b/src/settings.ts
@@ -1,6 +1,7 @@
+const bare = new URL("/bare/", window.location.href);
 const pages = ["/", "/apps", "/games", "/settings/search", "/settings/tab", "/settings/appearance", "/settings/locale"];
 const rammerhead = true;
 const github = "https://github.com/cognetwork-dev/Metallic";
 const discord = "https://discord.com/invite/yk33HZSZkU";
 
-export { pages, rammerhead, github, discord };
+export { bare, pages, rammerhead, github, discord };
diff --git a/src/style/style.css b/src/style/style.css
@@ -4,6 +4,10 @@ body {
     font-family: var(--font);
 }
 
+body[data-web-open="true"] {
+    overflow: hidden;
+}
+
 ::-webkit-scrollbar {
     width: 16px;
 }