feat: Display entrypoints in cozy-bar

src/components/AppsMenu/AppsMenuContent.jsx

@@ -8,10 +8,12 @@ import { sortApplicationsList } from 'cozy-client/dist/models/applications'
 
 import AppItem from 'components/AppsMenu/components/AppItem'
 import ShortcutItem from 'components/AppsMenu/components/ShortcutItem'
+import EntrypointItem from 'components/AppsMenu/components/EntrypointItem'
 import AppItemPlaceholder from 'components/AppsMenu/components/AppItemPlaceholder'
 import useI18n from 'components/useI18n'
 import { getApps, getHomeApp, isFetchingApps } from 'lib/reducers'
 import styles from 'styles/apps-menu.styl'
+import { buildEntrypoints } from 'components/AppsMenu/helper'
 
 const AppsMenuContent = ({
   isFetchingApps,
@@ -48,6 +50,8 @@ const AppsMenuContent = ({
     ? sortApplicationsList(displayedApps, flag('apps.sort'))
     : displayedApps
 
+  const entrypoints = buildEntrypoints(apps)
+
   return (
     <div className={styles['apps-menu-grid']}>
       {sortedApps.map((app, index) => (
@@ -56,6 +60,9 @@ const AppsMenuContent = ({
       {shortcuts.map((shortcut, index) => (
         <ShortcutItem key={index} shortcut={shortcut} />
       ))}
+      {entrypoints.map(entrypoint => (
+        <EntrypointItem key={entrypoint.name} entrypoint={entrypoint} />
+      ))}
     </div>
   )
 }

src/components/AppsMenu/components/EntrypointItem.jsx

@@ -0,0 +1,70 @@
+import React from 'react'
+
+import { useClient, generateWebLink } from 'cozy-client'
+
+import { makeStyles } from 'cozy-ui/transpiled/react/styles'
+import Buttons from 'cozy-ui/transpiled/react/Buttons'
+import Typography from 'cozy-ui/transpiled/react/Typography'
+import cx from 'classnames'
+
+import styles from 'styles/apps-menu.styl'
+import useI18n from 'components/useI18n'
+
+const useStyles = makeStyles(() => {
+  return {
+    text: {
+      lineHeight: '22.5px',
+      fontSize: '12px',
+      fontWeight: 400
+    }
+  }
+})
+
+export const EntrypointItem = ({ entrypoint }) => {
+  const client = useClient()
+  const classes = useStyles()
+  const { lang } = useI18n()
+
+  const cozyUrl = client.getStackClient().uri
+  const { subdomain: subDomainType } = client.getInstanceOptions()
+
+  const entrypointUrl = generateWebLink({
+    cozyUrl,
+    subDomainType,
+    slug: entrypoint.slug,
+    pathname: '/',
+    hash: entrypoint.hash
+  })
+
+  const title = entrypoint.title[lang] || entrypoint.title['en']
+
+  return (
+    <Buttons
+      height="auto"
+      component="a"
+      target="_blank"
+      variant="text"
+      href={entrypointUrl}
+      title={title}
+      className={cx(styles['apps-menu-grid-item-wrapper'], 'u-bdrs-5')}
+      label={
+        <div className={styles['apps-menu-grid-item']}>
+          <div className={styles['apps-menu-grid-item-icon']}>
+            <img
+              className="u-bdrs-5"
+              src={`data:image/svg+xml;base64,${entrypoint.icon}`}
+              alt=""
+              width={42}
+              height={42}
+            />
+          </div>
+          <Typography noWrap className={classes.text}>
+            {title}
+          </Typography>
+        </div>
+      }
+    />
+  )
+}
+
+export default EntrypointItem

src/components/AppsMenu/helper.js

@@ -0,0 +1,10 @@
+export const buildEntrypoints = apps => {
+  return apps.flatMap(app => {
+    if (!app.entrypoints) return []
+
+    return app.entrypoints.map(entrypoint => ({
+      ...entrypoint,
+      slug: app.slug
+    }))
+  })
+}