fix: Make mobile UI friendly 🐛

Author: lethemanh

packages/cozy-search/src/components/Assistant/AssistantContainer.jsx

@@ -28,9 +28,9 @@ const AssistantContainer = () => {
         styles['assistant-container']
       )}
     >
-      <Sidebar className="u-w-5 u-pb-1" />
+      <Sidebar className="u-w-5 u-pb-0-t u-pb-1" />
 
-      <PrettyScrollbar className="u-flex-auto u-flex u-flex-column u-pb-1 u-ov-hidden">
+      <PrettyScrollbar className="u-flex-auto u-flex u-flex-column u-pb-0-t u-pb-1 u-ov-hidden">
         {isOpenSearchConversation &&
         flag('cozy.search-conversation.enabled') ? (
           <SearchConversation />

packages/cozy-search/src/components/Assistant/AssistantSelection.jsx

@@ -7,8 +7,10 @@ import ActionsMenu from 'cozy-ui/transpiled/react/ActionsMenu'
 import ActionsMenuItem from 'cozy-ui/transpiled/react/ActionsMenu/ActionsMenuItem'
 import Chips from 'cozy-ui/transpiled/react/Chips'
 import Icon from 'cozy-ui/transpiled/react/Icon'
+import DropdownIcon from 'cozy-ui/transpiled/react/Icons/Dropdown'
 import PlusIcon from 'cozy-ui/transpiled/react/Icons/Plus'
 import Typography from 'cozy-ui/transpiled/react/Typography'
+import { useBreakpoints } from 'cozy-ui/transpiled/react/providers/Breakpoints'
 
 import styles from './styles.styl'
 import { useAssistant } from '../AssistantProvider'
@@ -19,6 +21,7 @@ import AssistantSelectionItem from './AssistantSelectionItem'
 
 const AssistantSelection = ({ className, disabled }) => {
   const { t } = useI18n()
+  const { isMobile } = useBreakpoints()
   const buttonRef = useRef(null)
   const [open, setOpen] = useState(false)
   const {
@@ -62,7 +65,13 @@ const AssistantSelection = ({ className, disabled }) => {
               assistant={selectedAssistant}
             />
           }
-          label={selectedAssistant.name}
+          label={
+            !isMobile ? (
+              selectedAssistant.name
+            ) : (
+              <Icon className={styles['dropdown-icon']} icon={DropdownIcon} />
+            )
+          }
           clickable
           onClick={handleClick}
           disabled={disabled}

packages/cozy-search/src/components/Assistant/AssistantSelectionItem.jsx

@@ -1,12 +1,15 @@
-import React from 'react'
+import cx from 'classnames'
+import React, { useMemo } from 'react'
 
 import ActionsMenuItem from 'cozy-ui/transpiled/react/ActionsMenu/ActionsMenuItem'
+import Badge from 'cozy-ui/transpiled/react/Badge'
 import Icon from 'cozy-ui/transpiled/react/Icon'
 import IconButton from 'cozy-ui/transpiled/react/IconButton'
 import CheckIcon from 'cozy-ui/transpiled/react/Icons/Check'
 import PenIcon from 'cozy-ui/transpiled/react/Icons/Pen'
 import TrashIcon from 'cozy-ui/transpiled/react/Icons/Trash'
 import Typography from 'cozy-ui/transpiled/react/Typography'
+import { useBreakpoints } from 'cozy-ui/transpiled/react/providers/Breakpoints'
 
 import styles from './styles.styl'
 import AssistantAvatar from '../Assistant/AssistantAvatar'
@@ -21,6 +24,8 @@ const AssistantSelectionItem = ({
   setIsOpenEditAssistant,
   disableActions = false
 }) => {
+  const { isMobile } = useBreakpoints()
+
   const handleSelect = assistant => {
     onSelect(assistant)
     onClose()
@@ -40,33 +45,67 @@ const AssistantSelectionItem = ({
     e.stopPropagation()
   }
 
+  const isSelected = useMemo(
+    () => selectedAssistant?.id === assistant.id,
+    [selectedAssistant?.id, assistant.id]
+  )
+
   return (
     <ActionsMenuItem
       onClick={() => handleSelect(assistant)}
       className={styles['menu-item']}
     >
       <div className="u-flex u-flex-items-center">
-        <AssistantAvatar assistant={assistant} />
+        {isMobile && isSelected ? (
+          <Badge
+            badgeContent={
+              <Icon
+                icon={CheckIcon}
+                size={10}
+                className={styles['selected-item--mobile']}
+              />
+            }
+            variant="standard"
+            size="small"
+            anchorOrigin={{
+              vertical: 'bottom',
+              horizontal: 'right'
+            }}
+            overlap="circular"
+          >
+            <AssistantAvatar assistant={assistant} />
+          </Badge>
+        ) : (
+          <AssistantAvatar assistant={assistant} />
+        )}
         <Typography variant="body1">{assistant.name}</Typography>
       </div>
       <div className="u-flex u-flex-items-center u-flex-justify-between">
-        {selectedAssistant?.id === assistant.id && (
+        {isSelected && !isMobile && (
           <Icon icon={CheckIcon} className="u-success" />
         )}
         {!disableActions && (
           <>
             <IconButton
               aria-label="Edit assistant"
               size="small"
-              className={styles['menu-item-icon-button']}
+              className={cx({
+                [styles['menu-item-icon-button']]:
+                  !isMobile || (!isSelected && isMobile),
+                'u-db': isSelected && isMobile
+              })}
               onClick={handleEdit}
             >
               <Icon icon={PenIcon} color="var(--primaryColor)" />
             </IconButton>
             <IconButton
               aria-label="Delete assistant"
               size="small"
-              className={styles['menu-item-icon-button']}
+              className={cx({
+                [styles['menu-item-icon-button']]:
+                  !isMobile || (!isSelected && isMobile),
+                'u-db': isSelected && isMobile
+              })}
               onClick={handleDelete}
             >
               <Icon icon={TrashIcon} className="u-error" />

packages/cozy-search/src/components/Assistant/styles.styl

@@ -43,4 +43,13 @@
   display none !important
 
 .create-icon
-  margin-right 8px
+  margin-right 0.5rem
+
+.dropdown-icon
+  margin-top 0.25rem
+
+.selected-item--mobile
+  padding 1px
+  border-radius 100%
+  color var(--white)
+  background-color var(--malachite)

packages/cozy-search/src/components/Conversations/ConversationBar.jsx

@@ -1,4 +1,5 @@
 import { ComposerPrimitive } from '@assistant-ui/react'
+import cx from 'classnames'
 import React, { useRef } from 'react'
 import { useI18n } from 'twake-i18n'
 
@@ -19,7 +20,8 @@ const ConversationBar = ({
   isRunning,
   onKeyDown,
   onSend,
-  onCancel
+  onCancel,
+  ...props
 }) => {
   const { t } = useI18n()
   const { isMobile } = useBreakpoints()
@@ -51,7 +53,10 @@ const ConversationBar = ({
   return (
     <div className="u-w-100 u-maw-7 u-mh-auto">
       <SearchBar
-        className={styles['conversationBar']}
+        {...props}
+        className={cx(styles['conversationBar'], {
+          [styles['conversationBar--mobile']]: isMobile
+        })}
         icon={null}
         size="auto"
         placeholder={t('assistant.search.placeholder')}

packages/cozy-search/src/components/Conversations/ConversationComposer.jsx

@@ -4,6 +4,7 @@ import {
   useThread,
   useComposer
 } from '@assistant-ui/react'
+import cx from 'classnames'
 import React, { useCallback } from 'react'
 
 import flag from 'cozy-flags'
@@ -49,8 +50,14 @@ const ConversationComposer = () => {
   )
 
   return (
-    <ComposerPrimitive.Root className="u-w-100 u-maw-7 u-mh-auto">
+    <ComposerPrimitive.Root
+      className={cx('u-w-100 u-maw-7 u-mh-auto', {
+        'u-card u-bxz u-elevation-1': isMobile
+      })}
+    >
       <ConversationBar
+        elevation={isMobile ? 0 : 1}
+        disabledHover={!!isMobile}
         value={value}
         isEmpty={isEmpty}
         isRunning={isRunning}

packages/cozy-search/src/components/Conversations/styles.styl

@@ -8,6 +8,12 @@
     +gt-mobile()
       max-height 178px
 
+    &--mobile
+      border 0
+      background-color transparent !important
+      border-color transparent !important
+
+
 .conversationBar-input
   max-height 80px
 

packages/cozy-search/src/components/CreateAssistantSteps/ProviderSelectionStep.jsx

@@ -1,21 +1,28 @@
+import cx from 'classnames'
 import React from 'react'
 import { useI18n } from 'twake-i18n'
 
 import Alert from 'cozy-ui/transpiled/react/Alert'
 import Typography from 'cozy-ui/transpiled/react/Typography'
+import { useBreakpoints } from 'cozy-ui/transpiled/react/providers/Breakpoints'
 
 import Provider from './Provider'
 import providers from './providers.json'
 import styles from './styles.styl'
 
 const ProviderSelectionStep = ({ selectedProvider, onSelect }) => {
   const { t } = useI18n()
+  const { isMobile } = useBreakpoints()
   return (
-    <div className={`u-flex u-flex-column ${styles.ModelSelectionStep}`}>
+    <div className={cx('u-flex u-flex-column', styles.ModelSelectionStep)}>
       <Typography variant="body1" className="u-mb-1 u-c-text-secondary">
         {t('assistant_create.steps.provider_selection.description')}
       </Typography>
-      <div className={styles['grid-container']}>
+      <div
+        className={cx(styles['grid-container'], {
+          [styles['grid-container--mobile']]: isMobile
+        })}
+      >
         {providers.map(provider => (
           <Provider
             key={provider.id}

packages/cozy-search/src/components/CreateAssistantSteps/styles.styl

@@ -17,6 +17,9 @@
     grid-template-columns 1fr 1fr
     gap 16px
 
+    &--mobile
+      grid-template-columns 1fr
+
   & .model-card
     border-radius 16px
     border 1px solid #E5E5E5