refactor: remove old search component

src/components/layout/dialogs/webhooks/Tracked.jsx

@@ -6,12 +6,13 @@ import { Virtuoso } from 'react-virtuoso'
 import Typography from '@mui/material/Typography'
 
 import Box from '@mui/material/Box'
-import { WebhookSearch } from '@components/layout/dialogs/filters/AdvSearch'
 import { Loading } from '@components/layout/general/Loading'
+import { GenericSearch } from '@components/layout/drawer/ItemSearch'
 
 import TrackedTile from './tiles/TrackedTile'
 import Selecting from './Selecting'
 import { useGetWebhookData } from './hooks'
+import { useWebhookStore } from './store'
 
 /**
  *
@@ -47,4 +48,19 @@ const Tracked = ({ category }) => {
   )
 }
 
+export const WebhookSearch = React.memo(() => {
+  const search = useWebhookStore((s) => s.trackedSearch)
+  const category = useWebhookStore((s) => s.category)
+
+  return (
+    <GenericSearch
+      value={search}
+      setValue={(newValue) =>
+        useWebhookStore.setState({ trackedSearch: newValue })
+      }
+      label={`search_${category}`}
+    />
+  )
+})
+
 export default Tracked

src/components/layout/drawer/ItemSearch.jsx

@@ -9,31 +9,35 @@ import { useDeepStore } from '@hooks/useStore'
 
 /**
  * @typedef {{
- *  field: import('@hooks/useStore').UseStorePaths,
+ *  field?: import('@hooks/useStore').UseStorePaths,
+ *  value?: string,
+ *  setValue?: (value: string) => void,
  *  label?: string,
  *  disabled?: boolean,
  * } & import('@mui/material').TextFieldProps} Props
  */
 
 /** @type {React.ForwardRefExoticComponent<Props>} */
 export const GenericSearch = React.forwardRef(
-  ({ field, label, disabled, ...props }, ref) => {
+  ({ field, label, disabled, value, setValue, ...props }, ref) => {
     const { t } = useTranslation()
-    const [value, setValue] = useDeepStore(field, '')
+    const [searchValue, setSearchValue] = field
+      ? useDeepStore(field, '')
+      : [value, setValue]
 
     const InputProps = React.useMemo(
       () => ({
         endAdornment: (
           <IconButton
             size="small"
             disabled={!value}
-            onClick={() => setValue('')}
+            onClick={() => setSearchValue('')}
           >
             <HighlightOffIcon fontSize="small" />
           </IconButton>
         ),
       }),
-      [!!value, setValue],
+      [!!searchValue, setSearchValue],
     )
     /** @type {import('@mui/material').TextFieldProps['onChange']} */
     const onChange = React.useCallback(
@@ -51,7 +55,7 @@ export const GenericSearch = React.forwardRef(
         fullWidth
         size="small"
         disabled={disabled}
-        value={value}
+        value={searchValue}
         onChange={onChange}
         InputProps={InputProps}
         {...props}