#1323 Search box in search page

ontrack-web-core/components/search/NavBarSearch.js

@@ -1,18 +1,24 @@
 import {Input} from "antd";
 import {useSearch} from "@/pages/search";
+import {useContext} from "react";
+import {SearchContext} from "@components/search/SearchContext";
 
 export default function NavBarSearch({style}) {
 
     const search = useSearch()
+    const {active} = useContext(SearchContext)
 
     return (
         <>
-            <Input.Search
-                style={style}
-                placeholder="Search..."
-                onSearch={search}
-                allowClear={true}
-            />
+            {
+                !active &&
+                <Input.Search
+                    style={style}
+                    placeholder="Search..."
+                    onSearch={search}
+                    allowClear={true}
+                />
+            }
         </>
     )
 }

ontrack-web-core/components/search/SearchContext.js

@@ -1,14 +1,14 @@
 import {createContext, useState} from "react";
 
-export const SearchContext = createContext({q: ''})
+export const SearchContext = createContext({active: false})
 
 export default function SearchContextProvider({children}) {
 
-    const [q, setQ] = useState('')
+    const [active, setActive] = useState(false)
 
     const context = {
-        q,
-        setQ,
+        active,
+        setActive,
     }
 
     return <SearchContext.Provider value={context}>{children}</SearchContext.Provider>

ontrack-web-core/components/search/SearchInput.js

@@ -0,0 +1,26 @@
+import {Input} from "antd";
+import {useEffect, useState} from "react";
+import {useSearch} from "@/pages/search";
+
+export default function SearchInput({q, searching}) {
+
+    const [searchValue, setSearchValue] = useState(q)
+    useEffect(() => {
+        setSearchValue(q)
+    }, [q])
+
+    const search = useSearch()
+
+    return (
+        <>
+            <Input.Search
+                size="large"
+                disabled={searching}
+                loading={searching}
+                onSearch={search}
+                value={searchValue}
+                onChange={(e) => setSearchValue(e.target.value)}
+            />
+        </>
+    )
+}

ontrack-web-core/components/search/SearchView.js

@@ -6,21 +6,32 @@ import {homeUri} from "@components/common/Links";
 import {CloseCommand} from "@components/common/Commands";
 import {homeBreadcrumbs} from "@components/common/Breadcrumbs";
 import MainPage from "@components/layouts/MainPage";
-import {Button, Popover, Skeleton, Space, Typography} from "antd";
-import {useEffect, useState} from "react";
+import {Button, Input, Popover, Skeleton, Space, Typography} from "antd";
+import {useContext, useEffect, useState} from "react";
 import {gql} from "graphql-request";
 import SearchResultList from "@components/search/SearchResultList";
 import SearchResultType from "@components/search/SearchResultType";
 import {FaBan} from "react-icons/fa";
 import {useRouter} from "next/router";
 import {conditionalPlural} from "@components/common/TextUtils";
 import LoadMoreButton from "@components/common/LoadMoreButton";
+import {SearchContext} from "@components/search/SearchContext";
+import {useSearch} from "@/pages/search";
+import SearchInput from "@components/search/SearchInput";
 
 export default function SearchView() {
 
     const router = useRouter()
     const {q, type} = router.query
 
+    const {setActive} = useContext(SearchContext)
+    useEffect(() => {
+        setActive(true)
+        return () => {
+            setActive(false)
+        }
+    }, [])
+
     const client = useGraphQLClient()
     const [searching, setSearching] = useState(true)
     const [selectedType, setSelectedType] = useState(type)
@@ -114,6 +125,10 @@ export default function SearchView() {
             >
                 <Skeleton active loading={searching}>
                     <Space direction="vertical" className="ot-line">
+                        <SearchInput
+                            searching={searching}
+                            q={q}
+                        />
                         <Space direction="horizontal" wrap className="ot-line">
                             <Button
                                 style={{height: 48}}