add search support

commafeed-client/src/components/header/Header.tsx

@@ -1,11 +1,13 @@
 import { t } from "@lingui/macro"
-import { Center, Divider, Group } from "@mantine/core"
-import { reloadEntries } from "app/slices/entries"
+import { Center, Divider, Group, Indicator, Popover, TextInput } from "@mantine/core"
+import { useForm } from "@mantine/form"
+import { reloadEntries, search } from "app/slices/entries"
 import { changeReadingMode, changeReadingOrder } from "app/slices/user"
 import { useAppDispatch, useAppSelector } from "app/store"
 import { ActionButton } from "components/ActionButtton"
 import { Loader } from "components/Loader"
-import { TbArrowDown, TbArrowUp, TbEye, TbEyeOff, TbRefresh, TbUser } from "react-icons/tb"
+import { useEffect } from "react"
+import { TbArrowDown, TbArrowUp, TbEye, TbEyeOff, TbRefresh, TbSearch, TbUser } from "react-icons/tb"
 import { MarkAllAsReadButton } from "./MarkAllAsReadButton"
 import { ProfileMenu } from "./ProfileMenu"
 
@@ -17,8 +19,22 @@ const iconSize = 18
 export function Header() {
     const settings = useAppSelector(state => state.user.settings)
     const profile = useAppSelector(state => state.user.profile)
+    const searchFromStore = useAppSelector(state => state.entries.search)
     const dispatch = useAppDispatch()
 
+    const searchForm = useForm<{ search: string }>({
+        validate: {
+            search: value => (value.length > 0 && value.length < 3 ? t`Search requires at least 3 characters` : null),
+        },
+    })
+    const { setValues } = searchForm
+
+    useEffect(() => {
+        setValues({
+            search: searchFromStore,
+        })
+    }, [setValues, searchFromStore])
+
     if (!settings) return <Loader />
     return (
         <Center>
@@ -39,6 +55,24 @@ export function Header() {
                     onClick={() => dispatch(changeReadingOrder(settings.readingOrder === "asc" ? "desc" : "asc"))}
                 />
 
+                <Popover>
+                    <Popover.Target>
+                        <Indicator disabled={!searchFromStore}>
+                            <ActionButton icon={<TbSearch size={iconSize} />} label={t`Search`} />
+                        </Indicator>
+                    </Popover.Target>
+                    <Popover.Dropdown>
+                        <form onSubmit={searchForm.onSubmit(values => dispatch(search(values.search)))}>
+                            <TextInput
+                                placeholder={t`Search`}
+                                {...searchForm.getInputProps("search")}
+                                icon={<TbSearch size={iconSize} />}
+                                autoFocus
+                            />
+                        </form>
+                    </Popover.Dropdown>
+                </Popover>
+
                 <HeaderDivider />
 
                 <ProfileMenu control={<ActionButton icon={<TbUser size={iconSize} />} label={profile?.name} />} />