add search toggle

Author: cocoelacanth

src/components/List/List.tsx

@@ -38,17 +38,19 @@ export default function List(props: ListProps) {
             return;
         }
         setSearchSelected(false);
+        onSearch("", "");
         const offset = categoryBarRef.current!.getBoundingClientRect().height;
         const y = categoryRefs[filter].current!.getBoundingClientRect().bottom + window.scrollY - offset;
 
         window.scrollTo({top: y, behavior: "smooth"});
     }
 
-    function onQueryRun(query: string, unicodeRepr: string) {
+    function onSearch(query: string, unicodeRepr: string) {
         const listItems = document.querySelectorAll("button.list-item");
         for (let i = 0; i < listItems.length; i++) {
             const item = listItems[i] as HTMLElement;
             item.removeAttribute("hidden");
+            if (!searchSelected) continue;
             let notFound = unicodeRepr !== item.id;
             notFound = notFound ? !item.dataset.name.toLowerCase().includes(query) : notFound;
             for (const j of item.dataset.keywords.split(" ")) {
@@ -61,6 +63,7 @@ export default function List(props: ListProps) {
                 item.setAttribute("hidden", "");
             }
         }
+        return searchSelected ? 1 : 0;
     }
 
     return (
@@ -90,7 +93,7 @@ export default function List(props: ListProps) {
                     })
                 }
             </div>
-            <ListSearch onQueryRun={onQueryRun} />
+            <ListSearch key={onSearch("", "")} searchSelected={searchSelected} onSearch={onSearch} />
         </div>
     );
 }

src/components/List/ListCategoryButton.tsx

@@ -15,6 +15,7 @@ import activities from "img/categories/Activities.svg?url";
 import objects from "img/categories/Objects.svg?url";
 import symbols from "img/categories/Symbols.svg?url";
 import flags from "img/categories/Flags.svg?url";
+import search from "img/categories/Search.svg?url";
 
 const categoryIcons: {[category: string]: string} = {
     "Smileys & Emotion": smileysandemotion,
@@ -25,7 +26,8 @@ const categoryIcons: {[category: string]: string} = {
     "Activities": activities,
     "Objects": objects,
     "Symbols": symbols,
-    "Flags": flags
+    "Flags": flags,
+    "Search": search
 };
 
 export default function ListCategoryButton(props: ListCategoryButtonProps) {

src/components/List/ListFilter.tsx

@@ -62,12 +62,14 @@ export default function ListFilter(props: ListFilterProps) {
         <div id="filters" ref={props.barRef}
             aria-label="Filter Toolbar" role="toolbar"
             onKeyDown={tabulate}>
-            {/* <ListCategoryButton category="Search" onCategoryChange={changeCategory} selected={props.searchSelected} /> */}
+            <ListCategoryButton key="Search" category="Search"
+                onCategoryChange={changeCategory} selected={props.searchSelected}
+            />
             {
                 categories.map((category: string) => {
                     return (
                         <ListCategoryButton key={category} category={category}
-                            onCategoryChange={changeCategory} selected={category === selectedCategory ? true : false}
+                            onCategoryChange={changeCategory} selected={!props.searchSelected && category === selectedCategory}
                         />
                     );
                 })

src/components/List/ListSearch.tsx

@@ -3,28 +3,28 @@ import React from "react";
 import "css/components/ListSearch.css";
 
 interface ListSearchProps {
-    onQueryRun: (query: string, unicodeRepr: string) => void;
+    searchSelected: boolean;
+    onSearch: (query: string, unicodeRepr: string) => void;
 }
 
 export default function ListSearch(props: ListSearchProps) {
-    function runQuery(e) {
+    function search(e) {
         const query = String(e.target.value);
         const unicodeRepr = Array.from(query)
             .map(s => s.codePointAt(0))
             .map(c => c.toString(16))
             .map(n => (n.length > 3 ? "" : "0".repeat(4 - n.length)) + n)
             .join("-");
-        props.onQueryRun(query.toLowerCase(), unicodeRepr);
+        props.onSearch(query.toLowerCase(), unicodeRepr);
     }
 
     return (
-        <div id="search" role="search">
-            {/* <SearchBar handleSearch={props.handleSearch} /> */}
+        <div id="search" role="search" data-active={props.searchSelected}>
             <input
                 type="search"
                 placeholder="Search"
                 defaultValue=""
-                onChange={runQuery}
+                onChange={search}
             ></input>
         </div>
     );

src/css/ListSearch.css

@@ -0,0 +1,36 @@
+div#search {
+    position: fixed;
+    bottom: 20pt;
+    right: 20pt;
+
+    background-color: white;
+    filter: drop-shadow(0 2pt 8pt #00000066);
+
+    border-radius: 24pt;
+    overflow: hidden;
+
+    z-index: 4;
+
+    display: flex;
+    justify-content: center;
+}
+
+div#search[data-active="false"] {
+    display: none;
+}
+
+div#search input {
+    box-sizing: border-box;
+    
+    width: 200pt;
+    height: 48pt;
+    
+    padding: 16pt;
+    
+    appearance: none;
+    border: none;
+    
+    font-family: "Manrope", sans-serif;
+    font-size: 12pt;
+    background-color: white;
+}