publish: Merge pull request #281 from cozy/feat/add-translate-apps

generated from commit 7e07ec9

en/cozy-home/src/assistant/AssistantWrapperDesktop.jsx

@@ -0,0 +1,20 @@
+import React from 'react'
+import flag from 'cozy-flags'
+
+import { useBreakpoints } from 'cozy-ui/transpiled/react/providers/Breakpoints'
+
+import AssistantBar from 'assistant/AssistantBar'
+
+const AssistantWrapperDesktop = () => {
+  const { isMobile } = useBreakpoints()
+
+  if (!flag('cozy.assistant.enabled') || isMobile) return null
+
+  return (
+    <div className="app-list-wrapper u-mb-3 u-mh-auto u-w-100">
+      <AssistantBar />
+    </div>
+  )
+}
+
+export default AssistantWrapperDesktop

en/cozy-home/src/assistant/AssistantWrapperMobile.jsx

@@ -0,0 +1,38 @@
+import React from 'react'
+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 AssistantBar from 'assistant/AssistantBar'
+
+import styles from './styles.styl'
+
+export const AssistantWrapperMobile = () => {
+  const { isMobile } = useBreakpoints()
+  const { type } = useCozyTheme()
+
+  if (!flag('cozy.assistant.enabled') || !isMobile) return null
+
+  return (
+    <div
+      className={cx(
+        styles['assistantWrapper-mobile'],
+        styles[`assistantWrapper-mobile--${type}`],
+        {
+          [styles['assistantWrapper-mobile--offset']]: flag(
+            'home.fab.button.enabled'
+          ),
+          [styles['assistantWrapper-mobile--immersive']]:
+            getFlagshipMetadata().immersive
+        }
+      )}
+    >
+      <AssistantBar />
+    </div>
+  )
+}
+
+export default AssistantWrapperMobile

en/cozy-home/src/assistant/Conversations/ConversationSearchBar.jsx

@@ -29,6 +29,7 @@ const ConversationSearchBar = ({ assistantStatus, conversationId }) => {
   useTimeoutWhen(() => setShowSuggestions(true), 2000)
 
   useEventListener(inputRef.current, 'input', () => {
+    // TODO: hack found on internet, we could try remove the auto assignment to see if it still works without it
     inputRef.current.style.height = 'auto'
     inputRef.current.style.height = `${inputRef.current.scrollHeight}px`
   })

en/cozy-home/src/assistant/Conversations/styles.styl

@@ -1,17 +1,17 @@
 @require 'settings/breakpoints.styl'
 
 .conversationSearchBar
-    max-height 178px
+    max-height 95px
     z-index calc(var(--zIndex-modal) + 15)
 
     +gt-mobile()
-      max-height 95px
+      max-height 178px
 
 .conversationSearchBar-input
-  max-height 155px
+  max-height 80px
 
   +gt-mobile()
-    max-height 80px
+    max-height 155px
 
   &--startAdornment
     position absolute

en/cozy-home/src/assistant/styles.styl

@@ -0,0 +1,18 @@
+.assistantWrapper-mobile
+  position fixed
+  bottom 0
+  right 0
+  left 0
+  padding 1rem
+
+  &--light
+    background-color #E9F4FF
+
+  &--dark
+    background-color #142536
+
+  &--offset
+    padding-right 4.5rem
+
+  &--immersive
+    padding-bottom calc(1rem + var(--flagship-bottom-height))

en/cozy-home/src/assistant/useFetchResult.jsx

@@ -75,13 +75,14 @@ export const useFetchResult = searchValue => {
     }
 
     if (searchValue) {
-      if (searchValue !== state.searchValue) {
+      // !state.results below is a quick fix condition to avoid triggering the skeleton at each search. Don't know if it's the best approach, we should maybe remove it when working on the search correctly
+      if (searchValue !== state.searchValue && !state.results) {
         fetch(searchValue)
       }
     } else {
       setState({ isLoading: true, results: null, searchValue: null })
     }
-  }, [searchValue, state.searchValue, setState])
+  }, [searchValue, state.searchValue, state.results, setState])
 
   return {
     isLoading: state.isLoading,

en/cozy-home/src/components/AddButton/AddButton.jsx

@@ -24,6 +24,7 @@ const styles = {
     right: '1rem',
     bottom: '1rem',
     position: 'fixed',
+    zIndex: 'var(--zIndex-low)',
     marginBottom: immersive ? 'var(--flagship-bottom-height)' : 0
   })
 }
@@ -53,6 +54,7 @@ export const AddButton = () => {
       <Fab
         color="primary"
         aria-label="add"
+        size="medium"
         ref={anchorRef}
         style={styles.fab(getFlagshipMetadata().immersive)}
         onClick={showMenu}

en/cozy-home/src/components/Home.jsx

@@ -1,30 +1,41 @@
 import React from 'react'
+import cx from 'classnames'
 import { Outlet, useLocation } from 'react-router-dom'
 
 import flag from 'cozy-flags'
 import CozyDevTools from 'cozy-client/dist/devtools'
 import { CozyConfirmDialogProvider } from 'cozy-harvest-lib'
+import { getFlagshipMetadata } from 'cozy-device-helper'
 import { Main, Content } from 'cozy-ui/transpiled/react/Layout'
+import { useBreakpoints } from 'cozy-ui/transpiled/react/providers/Breakpoints'
 
 import Applications from 'components/Applications'
 import ScrollToTopOnMount from 'components/ScrollToTopOnMount'
 import Services from 'components/Services'
 import Shortcuts from 'components/Shortcuts'
 import GroupedServices from 'components/GroupedServices'
 import { Announcements } from 'components/Announcements/Announcements'
-import AssistantWrapper from 'components/AssistantWrapper'
+
+import styles from './styles.styl'
 
 const Home = ({ setAppsReady, wrapper }) => {
   const { pathname } = useLocation()
+  const { isMobile } = useBreakpoints()
 
   return (
     <CozyConfirmDialogProvider>
       <Main className="u-flex-grow-1">
         <ScrollToTopOnMount target={wrapper} />
         {pathname === '/connected' && <Announcements />}
-        <Content className="u-flex u-flex-column u-ph-1">
+        <Content
+          className={cx('u-flex u-flex-column u-ph-1', {
+            [styles['homeMainContent--withAssistant']]:
+              isMobile && flag('cozy.assistant.enabled'),
+            [styles['homeMainContent--immersive']]:
+              getFlagshipMetadata().immersive
+          })}
+        >
           {flag('debug') && <CozyDevTools />}
-          <AssistantWrapper />
           <Applications onAppsFetched={setAppsReady} />
           <Shortcuts />
           {flag('home.detailed-services-dev') ? (

en/cozy-home/src/components/styles.styl

@@ -0,0 +1,6 @@
+.homeMainContent
+  &--withAssistant
+    padding-bottom 2rem
+
+  &--immersive
+    padding-bottom calc(2rem + var(--flagship-bottom-height))

en/cozy-home/src/containers/App.jsx

@@ -13,6 +13,8 @@ import Spinner from 'cozy-ui/transpiled/react/Spinner'
 import { Main } from 'cozy-ui/transpiled/react/Layout'
 import { useCozyTheme } from 'cozy-ui/transpiled/react/providers/CozyTheme'
 
+import AssistantWrapperMobile from 'assistant/AssistantWrapperMobile'
+import AssistantWrapperDesktop from 'assistant/AssistantWrapperDesktop'
 import AddButton from 'components/AddButton/AddButton'
 import Corner from 'components/HeroHeader/Corner'
 import Failure from 'components/Failure'
@@ -151,6 +153,7 @@ const App = ({ accounts, konnectors, triggers }) => {
               <Spinner size="xxlarge" />
             </Main>
           )}
+          <AssistantWrapperDesktop />
           {!isFetching && (
             <>
               <SentryRoutes>
@@ -181,13 +184,13 @@ const App = ({ accounts, konnectors, triggers }) => {
               </SentryRoutes>
             </>
           )}
-
           <IconSprite />
         </div>
         <FooterLogo />
       </MainView>
       {isFlagshipApp() && <DefaultRedirectionSnackbar />}
       {flag(FLAG_FAB_BUTTON_ENABLED) && isMobile && <AddButton />}
+      <AssistantWrapperMobile />
     </>
   )
 }

en/cozy-home/src/locales/fr.json

@@ -1,7 +1,7 @@
 {
   "assistant": {
     "search": {
-      "placeholder": "Une question ?"
+      "placeholder": "Une question ?"
     },
     "dialog": {
       "close": "Fermer"