feat(Assistant): Use new SearchBar

cozy · Oct 16, 2024 · c758d0c · c758d0c
1 parent 59bf991
commit c758d0c
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 4 deletions.
diff --git a/src/assistant/AssistantWrapperDesktop.jsx b/src/assistant/AssistantWrapperDesktop.jsx
@@ -3,7 +3,7 @@ import flag from 'cozy-flags'
 
 import { useBreakpoints } from 'cozy-ui/transpiled/react/providers/Breakpoints'
 
-import AssistantBar from 'assistant/AssistantBar'
+import SearchBar from './Search/SearchBar'
 
 const AssistantWrapperDesktop = () => {
   const { isMobile } = useBreakpoints()
@@ -12,7 +12,7 @@ const AssistantWrapperDesktop = () => {
 
   return (
     <div className="app-list-wrapper u-mb-3 u-mh-auto u-w-100">
-      <AssistantBar />
+      <SearchBar />
     </div>
   )
 }

diff --git a/src/assistant/AssistantWrapperMobile.jsx b/src/assistant/AssistantWrapperMobile.jsx
@@ -1,18 +1,24 @@
 import React from 'react'
+import { useNavigate } from 'react-router-dom'
 import flag from 'cozy-flags'
 import cx from 'classnames'
 
 import { getFlagshipMetadata } from 'cozy-device-helper'
 import { useBreakpoints } from 'cozy-ui/transpiled/react/providers/Breakpoints'
 import { useCozyTheme } from 'cozy-ui/transpiled/react/providers/CozyTheme'
+import SearchBar from 'cozy-ui/transpiled/react/SearchBar'
+import Icon from 'cozy-ui/transpiled/react/Icon'
+import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 
-import AssistantBar from 'assistant/AssistantBar'
+import AssistantIcon from 'assets/images/icon-assistant.png'
 
 import styles from './styles.styl'
 
 export const AssistantWrapperMobile = () => {
   const { isMobile } = useBreakpoints()
   const { type } = useCozyTheme()
+  const { t } = useI18n()
+  const navigate = useNavigate()
 
   if (!flag('cozy.assistant.enabled') || !isMobile) return null
 
@@ -30,7 +36,15 @@ export const AssistantWrapperMobile = () => {
         }
       )}
     >
-      <AssistantBar />
+      <SearchBar
+        size="medium"
+        icon={
+          <Icon className="u-ml-1 u-mr-half" icon={AssistantIcon} size={24} />
+        }
+        type="button"
+        label={t('assistant.search.placeholder')}
+        onClick={() => navigate('search')}
+      />
     </div>
   )
 }