Search apps

CuriousDog69 · Apr 14, 2024 · 99e8f97 · 99e8f97
1 parent 88e050a
commit 99e8f97
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 3 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -107,6 +107,9 @@
 - [x] Update app icons and names
 
 # Todo
+- [ ] Custom search engine
+- [ ] Change transport (Eproxy, Libcurl, Bare)
+- [ ] Change Wisp URL and Bare URL
 - [ ] Games
 
 ### Roadmap

diff --git a/src/pages/apps.tsx b/src/pages/apps.tsx
@@ -1,30 +1,73 @@
 import { Head } from "../components/head";
 import { useTranslation } from "react-i18next";
-import { useState } from "preact/hooks";
+import { useState, useRef } from "preact/hooks";
 import { Web, setWeb } from "../components/web";
 import { useGlobalState } from "@ekwoka/preact-global-state";
 import { encodeURL } from "../util/searchURL";
+import { SearchIcon } from "../assets/searchIcon";
+import { CloseIcon } from "../assets/closeIcon";
 import apps from "../assets/apps.json";
 
 function Apps() {
     const { t } = useTranslation();
     const [service] = useGlobalState<string>("service", localStorage.getItem("metallic/service") || "ultraviolet");
     const [webOpen, setWebOpen] = useState(false);
+    const search = useRef<HTMLInputElement>();
+    const [searchValue, setSearchValue] = useState("");
+    const [searchHasValue, setSearchHasValue] = useState(false);
 
     async function openApp(url: string) {
         setWeb(await encodeURL(url, service), webOpen, setWebOpen)
     }
 
+    const handleChange = async (e: any) => {
+        setSearchHasValue(e.target.value !== "");
+    }
+
+    function clearSearch() {
+        if (search && search.current) {
+            search.current.value = "";
+            setSearchValue("");
+            setSearchHasValue(false);
+            search.current.focus();
+        }
+    }
+
+    const handleSearch = async (e: any) => {
+        setSearchValue(e.target.value.toLowerCase().trim())
+    }
+
+    const appsSearched = apps.filter((app: any) => {
+        if (!searchValue) {
+          return app;
+        } else {
+          return app.name.toLowerCase().trim().includes(searchValue);
+        }
+      });
+
     return (
         <>
             <Head pageTitle={t("title.apps")} />
             <Web open={webOpen} setOpen={setWebOpen} />
+            <div class="flex flex-col items-center justify-center mb-8">
+                <div class="bg-secondary w-[600px] h-14 flex items-center justify-center rounded-lg">
+                    <div class="w-16 h-full flex items-center justify-center shrink-0">
+                        <SearchIcon />
+                    </div>
+                    {/**@ts-ignore */}
+                    <input ref={search} autoFocus={true} placeholder="Search apps" onKeyUp={handleSearch} onChange={handleChange} 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>
+            <p class={"text-center" + (!appsSearched.length ? "" : " hidden")}>No results found.</p>
             <div
                 class="grid justify-evenly gap-8 grid-cols-1 sm:grid-cols-[repeat(auto-fill,minmax(auto,16rem))]"
             >
-                {apps.map((app: any) => (
+                {appsSearched.map((app: any) => (
                     <button
-                        onClick={async() => await openApp(app.url)}
+                        onClick={async () => await openApp(app.url)}
                         class="rounded-3xl h-72 bg-secondary flex flex-col p-4 cursor-pointer w-full sm:w-64 text-left"
                     >
                         <div