Add clear button to the FilterInput.

icons/cross.svg

+<svg viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="m6 5.293 2.475-2.475.707.707L6.707 6l2.475 2.475-.707.707L6 6.707 3.525 9.182l-.707-.707L5.293 6 2.818 3.525l.707-.707L6 5.293Z" fill="currentColor"/>
+</svg>

ui/shared/FilterInput.tsx

-import { Input, InputGroup, InputLeftElement, Icon, useColorModeValue, chakra } from '@chakra-ui/react';
+import { chakra, Icon, IconButton, Input, InputGroup, InputLeftElement, InputRightElement, useColorModeValue } from '@chakra-ui/react';
 import type { ChangeEvent } from 'react';
 import React, { useCallback, useState } from 'react';
 
+import crossIcon from 'icons/cross.svg';
 import searchIcon from 'icons/search.svg';
 
 type Props = {
@@ -13,6 +14,7 @@ type Props = {
 
 const FilterInput = ({ onChange, className, size = 'sm', placeholder }: Props) => {
   const [ filterQuery, setFilterQuery ] = useState('');
+  const inputRef = React.useRef<HTMLInputElement>(null);
 
   const handleFilterQueryChange = useCallback((event: ChangeEvent<HTMLInputElement>) => {
     const { value } = event.target;
@@ -21,6 +23,12 @@ const FilterInput = ({ onChange, className, size = 'sm', placeholder }: Props) =
     onChange(value);
   }, [ onChange ]);
 
+  const handleFilterQueryClear = useCallback(() => {
+    setFilterQuery('');
+    onChange('');
+    inputRef?.current?.focus();
+  }, [ onChange ]);
+
   return (
     <InputGroup
       size={ size }
@@ -33,6 +41,7 @@ const FilterInput = ({ onChange, className, size = 'sm', placeholder }: Props) =
       </InputLeftElement>
 
       <Input
+        ref={ inputRef }
         size={ size }
         value={ filterQuery }
         onChange={ handleFilterQueryChange }
@@ -40,6 +49,19 @@ const FilterInput = ({ onChange, className, size = 'sm', placeholder }: Props) =
         borderWidth="2px"
         textOverflow="ellipsis"
       />
+
+      <InputRightElement>
+        <IconButton
+          colorScheme="gray"
+          aria-label="Clear the filter input"
+          title="Clear the filter input"
+          w={ 6 }
+          h={ 6 }
+          icon={ <Icon as={ crossIcon } w={ 4 } h={ 4 } color={ useColorModeValue('blackAlpha.600', 'whiteAlpha.600') }/> }
+          size="sm"
+          onClick={ handleFilterQueryClear }
+        />
+      </InputRightElement>
     </InputGroup>
   );
 };