add search action buttons

src/components/FilterTags/FilterTags.tsx

@@ -20,7 +20,6 @@ export default function FilterTags(props: FilterTagsProps) {
             disabled={false}
             key={index}
             onClick={() => onTagClick(tag)}
-            selected={selectedTags.includes(tag)}
             variant={selectedTags.includes(tag) ? 'filled' : 'outlined'}
           >
             {tag}

src/components/Searchbar/Search.module.css

@@ -2,10 +2,16 @@
     width: 100% !important;
 }
 
-.active::placeholder{
-    /*opacity: 1 !important;*/
-}
-
-.searchBox > div {
+.searchButton{
+    border: none !important;
+}
+
+/*if we use textfield*/
+/*.searchBox{*/
+/*    border: none !important;*/
+/*}*/
+
+/*if we use autocompete */
+.searchBox > div{
     border: none !important;
 }

src/components/Searchbar/Searchbar.tsx

@@ -1,4 +1,10 @@
-import { Autocomplete } from '@acid-info/lsd-react'
+import {
+  TextField,
+  Autocomplete,
+  IconButton,
+  SearchIcon,
+  CloseIcon,
+} from '@acid-info/lsd-react'
 import styles from './Search.module.css'
 import { SearchbarContainer } from '@/components/Searchbar/SearchbarContainer'
 import { copyConfigs } from '@/configs/copy.configs'
@@ -21,14 +27,23 @@ export default function Searchbar(props: SearchbarProps) {
   const [query, setQuery] = useState<string | undefined>(undefined)
   const [filterTags, setFilterTags] = useState<string[]>([])
 
-  const performSearch = () => {
-    console.log('performing search', query, filterTags)
+  const validateSearch = useCallback(() => {
+    return (query !== undefined && query.length > 0) || filterTags.length > 0
+  }, [query, filterTags])
+
+  const performSearch = useCallback(() => {
     if (!validateSearch()) return
-  }
+  }, [validateSearch])
+
+  const performClear = useCallback(() => {
+    // TODO: clear input.value seems to be not working. When set to undefined, the input value is still there.
+    setQuery(undefined)
+    setFilterTags([])
+  }, [setQuery, setFilterTags])
 
   useEffect(() => {
     performSearch()
-  }, [filterTags])
+  }, [filterTags, performSearch])
 
   const handleTagClick = (tag: string) => {
     let newSelectedTags = [...filterTags]
@@ -46,42 +61,52 @@ export default function Searchbar(props: SearchbarProps) {
     }
   }
 
-  const validateSearch = () => {
-    return (query !== undefined && query.length > 0) || filterTags.length > 0
-  }
-
-  const isCollapsed = validateSearch() && !active
-
   const constructCollapseText = () => {
     let txt = ''
     if (query !== undefined && query.length > 0) {
-      txt += query
+      txt += `<span>${query}</span>`
     }
     if (filterTags.length > 0) {
-      if (txt.length > 0) txt += ' . '
-      txt += `${filterTags.map((t) => `[${t}]`).join(',')}`
+      if (txt.length > 0) txt += '<b> . </b>'
+      txt += `${filterTags.map((t) => `<small>[${t}]</small>`).join(' ')}`
     }
     return txt
   }
 
+  const isCollapsed = validateSearch() && !active
+
   return (
     <SearchbarContainer onUnfocus={() => setActive(false)}>
-      <Autocomplete
-        className={styles.searchBox}
-        placeholder={
-          searchScope === ESearchScope.GLOBAL
-            ? copyConfigs.search.searchbarPlaceholders.global()
-            : copyConfigs.search.searchbarPlaceholders.article()
-        }
-        withIcon
-        value={query as string}
-        onFocus={() => setActive(true)}
-        inputProps={{
-          onChange: (e) => setQuery(e.target.value),
-          onKeyUp: (e) => handleEnter(e),
-          className: isCollapsed ? styles.active : '',
-        }}
-      />
+      <SearchBox>
+        <Autocomplete
+          className={styles.searchBox}
+          placeholder={
+            searchScope === ESearchScope.GLOBAL
+              ? copyConfigs.search.searchbarPlaceholders.global()
+              : copyConfigs.search.searchbarPlaceholders.article()
+          }
+          value={query as string}
+          onFocus={() => setActive(true)}
+          clearButton={false}
+          inputProps={{
+            onChange: (e) => {
+              setQuery(e.target.value)
+              console.log(e.target.value)
+            },
+            onKeyUp: (e) => handleEnter(e),
+          }}
+        />
+        <div>
+          <IconButton
+            className={styles.searchButton}
+            onClick={() =>
+              validateSearch() ? performClear() : performSearch()
+            }
+          >
+            {validateSearch() ? <CloseIcon /> : <SearchIcon />}
+          </IconButton>
+        </div>
+      </SearchBox>
       <TagsWrapper className={active ? 'active' : ''}>
         <FilterTags
           tags={copyConfigs.search.filterTags}
@@ -89,13 +114,11 @@ export default function Searchbar(props: SearchbarProps) {
           selectedTags={filterTags}
         />
       </TagsWrapper>
-
       <Collapsed
         className={isCollapsed ? 'enabled' : ''}
         onClick={() => setActive(true)}
-      >
-        {constructCollapseText()}
-      </Collapsed>
+        dangerouslySetInnerHTML={{ __html: constructCollapseText() }}
+      ></Collapsed>
     </SearchbarContainer>
   )
 }
@@ -111,6 +134,8 @@ const TagsWrapper = styled.div`
 `
 
 const Collapsed = styled.div`
+  display: flex;
+  align-items: baseline;
   background: rgb(var(--lsd-surface-primary));
   padding: 8px 14px;
   width: calc(90% - 28px);
@@ -127,4 +152,20 @@ const Collapsed = styled.div`
   &.enabled {
     top: 0;
   }
+  > * {
+    margin-right: 4px;
+  }
+  > *:not(:first-child) {
+    margin-left: 4px;
+  }
+
+  b {
+    transform: translateY(-2px);
+  }
+`
+const SearchBox = styled.div`
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: 100%;
 `

src/components/Searchbar/SearchbarContainer.tsx

@@ -23,7 +23,7 @@ export function SearchbarContainer({ children, onUnfocus = nope }: Props) {
       console.log('scrolling', isScrolling)
       onUnfocus()
     }
-  }, [isOutside, stickyRef, isScrolling])
+  }, [isOutside, stickyRef, isScrolling, onUnfocus])
 
   return (
     <>