feat: Add badge to Sharings nav item

src/drive/web/modules/navigation/Nav.jsx

@@ -4,6 +4,7 @@ import React, { useState } from 'react'
 import UINav from 'cozy-ui/transpiled/react/Nav'
 
 import { NavItem } from 'drive/web/modules/navigation/NavItem'
+import { SharingsNavItem } from 'drive/web/modules/navigation/SharingsNavItem'
 
 export const Nav = () => {
   const clickState = useState(null)
@@ -24,13 +25,7 @@ export const Nav = () => {
         rx={/\/recent(\/.*)?/}
         clickState={clickState}
       />
-      <NavItem
-        to="/sharings"
-        icon="share"
-        label="sharings"
-        rx={/\/sharings(\/.*)?/}
-        clickState={clickState}
-      />
+      <SharingsNavItem clickState={clickState} />
       <NavItem
         to="/trash"
         icon="trash"

src/drive/web/modules/navigation/NavContent.jsx

@@ -0,0 +1,55 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import { NavIcon, NavText } from 'cozy-ui/transpiled/react/Nav'
+import Badge from 'cozy-ui/transpiled/react/Badge'
+import useBreakpoints from 'cozy-ui/transpiled/react/hooks/useBreakpoints'
+import Circle from 'cozy-ui/transpiled/react/Circle'
+
+const NavContent = ({ icon, badgeContent, label }) => {
+  const { isDesktop } = useBreakpoints()
+
+  if (badgeContent) {
+    if (isDesktop) {
+      return (
+        <>
+          <NavIcon icon={icon} />
+          <NavText>{label}</NavText>
+          <Circle
+            size="xsmall"
+            className="u-ml-auto u-mr-1"
+            backgroundColor="var(--errorColor)"
+          >
+            <span style={{ fontSize: '11px', lineHeight: '1rem' }}>
+              {badgeContent > 99 ? '99+' : badgeContent}
+            </span>
+          </Circle>
+        </>
+      )
+    } else {
+      return (
+        <>
+          <Badge badgeContent={badgeContent} color="error" withBorder={false}>
+            <NavIcon icon={icon} />
+          </Badge>
+          <NavText>{label}</NavText>
+        </>
+      )
+    }
+  }
+
+  return (
+    <>
+      <NavIcon icon={icon} />
+      <NavText>{label}</NavText>
+    </>
+  )
+}
+
+NavContent.propTypes = {
+  icon: PropTypes.string,
+  badgeContent: PropTypes.number,
+  label: PropTypes.string
+}
+
+export { NavContent }

src/drive/web/modules/navigation/NavItem.jsx

@@ -1,24 +1,23 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-import { useI18n } from 'cozy-ui/transpiled/react'
-
-import {
-  NavItem as UINavItem,
-  NavIcon,
-  NavText
-} from 'cozy-ui/transpiled/react/Nav'
+import { NavItem as UINavItem } from 'cozy-ui/transpiled/react/Nav'
+import { useI18n } from 'cozy-ui/transpiled/react/I18n'
 
+import { NavContent } from 'drive/web/modules/navigation/NavContent'
 import { NavLink } from 'drive/web/modules/navigation/NavLink'
 
-const NavItem = ({ to, icon, label, rx, clickState }) => {
+const NavItem = ({ to, icon, label, rx, clickState, badgeContent }) => {
   const { t } = useI18n()
 
   return (
     <UINavItem>
       <NavLink to={to} rx={rx} clickState={clickState}>
-        <NavIcon icon={icon} />
-        <NavText>{t(`Nav.item_${label}`)}</NavText>
+        <NavContent
+          icon={icon}
+          label={t(`Nav.item_${label}`)}
+          badgeContent={badgeContent}
+        />
       </NavLink>
     </UINavItem>
   )
@@ -28,7 +27,8 @@ NavItem.propTypes = {
   to: PropTypes.string.isRequired,
   icon: PropTypes.string.isRequired,
   label: PropTypes.string.isRequired,
-  rx: PropTypes.shape(RegExp)
+  rx: PropTypes.shape(RegExp),
+  badgeContent: PropTypes.number
 }
 
 export { NavItem }

src/drive/web/modules/navigation/SharingsNavItem.jsx

@@ -0,0 +1,27 @@
+import React from 'react'
+
+import { useQuery } from 'cozy-client'
+
+import { buildNewSharingShortcutQuery } from 'drive/web/modules/queries'
+import { NavItem } from 'drive/web/modules/navigation/NavItem'
+
+const SharingsNavItem = ({ clickState }) => {
+  const newSharingShortcutQuery = buildNewSharingShortcutQuery()
+  const newSharingShortcutResult = useQuery(
+    newSharingShortcutQuery.definition,
+    newSharingShortcutQuery.options
+  )
+
+  return (
+    <NavItem
+      to="/sharings"
+      icon="share"
+      label="sharings"
+      rx={/\/sharings(\/.*)?/}
+      clickState={clickState}
+      badgeContent={newSharingShortcutResult.data?.length}
+    />
+  )
+}
+
+export { SharingsNavItem }

src/drive/web/modules/queries.js

@@ -355,3 +355,17 @@ export const buildFolderByPathQuery = path => ({
     fetchPolicy: defaultFetchPolicy
   }
 })
+
+export const buildNewSharingShortcutQuery = () => ({
+  definition: () =>
+    Q('io.cozy.files')
+      .where({
+        class: 'shortcut',
+        'metadata.sharing.status': 'new'
+      })
+      .indexFields(['class', 'metadata.sharing.status']),
+  options: {
+    as: 'io.cozy.files/new_sharing_shortcut',
+    fetchPolicy: defaultFetchPolicy
+  }
+})