feat: add detailed and compact section view

src/components/Home.jsx

@@ -8,6 +8,7 @@ import Applications from 'components/Applications'
 import ScrollToTopOnMount from 'components/ScrollToTopOnMount'
 import Services from 'components/Services'
 import Shortcuts from 'components/Shortcuts'
+import { SectionView } from './Shortcuts/SectionView'
 
 const Home = ({ setAppsReady, wrapper, shortcutsDirectories }) => {
   return (
@@ -16,6 +17,46 @@ const Home = ({ setAppsReady, wrapper, shortcutsDirectories }) => {
         <ScrollToTopOnMount target={wrapper} />
         <Content className="u-flex u-flex-column u-ph-1">
           <Applications onAppsFetched={setAppsReady} />
+          <SectionView
+            items={[
+              {
+                name: 'Travel Tracker',
+                description: 'Explore and document your travel adventures'
+              },
+              {
+                name: 'Expense Tracker',
+                description: 'Track and manage your expenses'
+              },
+              {
+                name: 'Fitness Tracker',
+                description: 'Monitor and improve your fitness goals'
+              },
+              {
+                name: 'Travel Tracker',
+                description: 'Explore and document your travel adventures'
+              },
+              {
+                name: 'Expense Tracker',
+                description: 'Track and manage your expenses'
+              },
+              {
+                name: 'Fitness Tracker',
+                description: 'Monitor and improve your fitness goals'
+              },
+              {
+                name: 'Travel Tracker',
+                description: 'Explore and document your travel adventures'
+              },
+              {
+                name: 'Expense Tracker',
+                description: 'Track and manage your expenses'
+              },
+              {
+                name: 'Fitness Tracker',
+                description: 'Monitor and improve your fitness goals'
+              }
+            ]}
+          />
           <Shortcuts shortcutsDirectories={shortcutsDirectories} />
           <Services />
         </Content>

src/components/Shortcuts/SectionView.tsx

@@ -0,0 +1,81 @@
+import React, { useCallback } from 'react'
+import cx from 'classnames'
+
+import ActionsMenu from 'cozy-ui/transpiled/react/ActionsMenu'
+import Button from 'cozy-ui/transpiled/react/Buttons'
+import Divider from 'cozy-ui/transpiled/react/MuiCozyTheme/Divider'
+import Icon from 'cozy-ui/transpiled/react/Icon'
+import SquareAppIcon from 'cozy-ui/transpiled/react/SquareAppIcon'
+import DotsIcon from 'cozy-ui/transpiled/react/Icons/Dots'
+import {
+  DisplayMode,
+  SectionItem,
+  SectionViewProps
+} from 'components/Shortcuts/types/shortcuts_types'
+import useBreakpoints from 'cozy-ui/transpiled/react/providers/Breakpoints'
+import { actions } from 'components/Shortcuts/actions/SectionActions'
+
+export const SectionView = ({ section }: SectionViewProps): JSX.Element => {
+  const { isMobile } = useBreakpoints()
+  const [display, setDisplay] = React.useState(
+    section[isMobile ? 'mobile' : 'desktop'].detailed_lines
+      ? DisplayMode.DETAILED
+      : DisplayMode.COMPACT
+  )
+  const [state, setState] = React.useState(false)
+  const toggleMenu = (): void => setState(!state)
+  const anchorRef = React.useRef(null)
+  const handleAction = useCallback(
+    (action: DisplayMode) => {
+      if (action === display) return
+
+      setDisplay(action)
+    },
+    [display]
+  )
+  const items = [] as SectionItem[] // TODO: fetch items from section ID with useQuery (already used in another file)
+
+  return (
+    <div className="shortcuts-list-wrapper u-m-auto u-w-100">
+      <Divider className="u-mv-0" variant="subtitle2">
+        {section.originalName}
+      </Divider>
+
+      <Button
+        label={<Icon icon={DotsIcon} />}
+        ref={anchorRef}
+        onClick={toggleMenu}
+      />
+
+      <ActionsMenu
+        ref={anchorRef}
+        open={state}
+        anchorOrigin={{
+          vertical: 'bottom',
+          horizontal: 'left'
+        }}
+        docs={[section]}
+        actions={actions}
+        autoClose
+        onClose={toggleMenu}
+        componentsProps={{ actionsItems: { actionOptions: { handleAction } } }}
+      />
+
+      <div
+        className={cx(
+          'shortcuts-list u-w-100 u-mv-3 u-mv-2-t u-mh-auto u-flex-justify-center',
+          { detailed: display === DisplayMode.DETAILED }
+        )}
+      >
+        {items.map((item, index) => (
+          <SquareAppIcon
+            key={index}
+            display={display}
+            name={item.name}
+            description={item.description}
+          />
+        ))}
+      </div>
+    </div>
+  )
+}

src/components/Shortcuts/actions/SectionActions.tsx

@@ -0,0 +1,35 @@
+import React from 'react'
+
+import ActionsMenuItem from 'cozy-ui/transpiled/react/ActionsMenu/ActionsMenuItem'
+import FileIcon from 'cozy-ui/transpiled/react/Icons/File'
+import ListItemIcon from 'cozy-ui/transpiled/react/ListItemIcon'
+import ListItemText from 'cozy-ui/transpiled/react/ListItemText'
+import { makeActions } from 'cozy-ui/transpiled/react/ActionsMenu/Actions'
+import { Action, DisplayMode } from 'components/Shortcuts/types/shortcuts_types'
+import Icon from 'cozy-ui/transpiled/react/Icon'
+
+const createCustomAction = (primaryText: DisplayMode): (() => Action) => {
+  return () => ({
+    name: `customAction_${primaryText}`,
+    action: (_doc, opts): void => {
+      opts.handleAction(primaryText)
+    },
+    Component: React.forwardRef(function CustomActionComponent(props, ref) {
+      return (
+        <ActionsMenuItem {...props} ref={ref}>
+          <ListItemIcon>
+            <Icon icon={FileIcon} />
+          </ListItemIcon>
+          <ListItemText primary={primaryText} />
+        </ActionsMenuItem>
+      )
+    })
+  })
+}
+
+const actionArray = [
+  createCustomAction(DisplayMode.COMPACT),
+  createCustomAction(DisplayMode.DETAILED)
+]
+
+export const actions = makeActions(actionArray)

src/components/Shortcuts/fixtures/sections_layout.json

@@ -0,0 +1,74 @@
+[
+  {
+    "id": [
+      "1"
+    ],
+    "originalName": "Applications Toutatice",
+    "createdByApp": [
+      "toutatice"
+    ],
+    "mobile": {
+      "detailed_lines": true,
+      "grouped": false
+    },
+    "desktop": {
+      "detailed_lines": true,
+      "grouped": false
+    },
+    "order": 5001
+  },
+  {
+    "id": [
+      "2"
+    ],
+    "originalName": "Infos",
+    "createdByApp": [
+      "infos"
+    ],
+    "mobile": {
+      "detailed_lines": true,
+      "grouped": true
+    },
+    "desktop": {
+      "detailed_lines": false,
+      "grouped": true
+    },
+    "order": 5002
+  },
+  {
+    "id": [
+      "3"
+    ],
+    "originalName": "Espace",
+    "createdByApp": [
+      "espace"
+    ],
+    "mobile": {
+      "detailed_lines": false,
+      "grouped": true
+    },
+    "desktop": {
+      "detailed_lines": false,
+      "grouped": true
+    },
+    "order": 5003
+  },
+  {
+    "id": [
+      "4"
+    ],
+    "originalName": "Mes liens & raccourcis",
+    "createdByApp": [
+      "shortcuts"
+    ],
+    "mobile": {
+      "detailed_lines": true,
+      "grouped": true
+    },
+    "desktop": {
+      "detailed_lines": false,
+      "grouped": true
+    },
+    "order": 5004
+  }
+]

src/components/Shortcuts/types/shortcuts_types.ts

@@ -0,0 +1,40 @@
+export interface DeviceSettings {
+  detailed_lines: boolean
+  grouped: boolean
+}
+
+export interface Section {
+  id: string[]
+  originalName: string
+  createdByApp: string[]
+  mobile: DeviceSettings
+  desktop: DeviceSettings
+  order: number
+}
+
+export interface SectionsLayout {
+  sections: Section[]
+}
+
+export interface SectionViewProps {
+  section: Section
+}
+
+export interface SectionItem {
+  id: string
+  name: string
+  description: string
+}
+
+export enum DisplayMode {
+  COMPACT = 'COMPACT',
+  DETAILED = 'DETAILED'
+}
+
+type HandleActionCallback = (action: DisplayMode) => void
+
+export type Action = {
+  name: string
+  action: (doc: Section, opts: { handleAction: HandleActionCallback }) => void
+  Component: React.FC
+}

src/cozy-ui.d.ts

@@ -1,6 +1,13 @@
+declare module 'cozy-ui/transpiled/react/*' {
+  const component: (props: Record<string, unknown>) => JSX.Element
+  export default component
+}
+
 declare module 'cozy-ui/transpiled/react/CozyDialogs' {
+  import { ReactNode } from 'react'
+
   interface ConfirmDialogProps {
-    actions?: React.ReactNode
+    actions?: ReactNode
     actionsLayout?: 'row' | 'column'
     content?: string
     disableGutters?: boolean
@@ -18,15 +25,19 @@ declare module 'cozy-ui/transpiled/react/CozyDialogs' {
 }
 
 declare module 'cozy-ui/transpiled/react/providers/CozyTheme' {
+  import { ReactNode } from 'react'
+
   interface CozyThemeProps {
     variant?: 'normal' | 'inverted'
-    children?: JSX.Element
+    children?: ReactNode
     className?: string
   }
+
   interface CozyTheme {
     type: string
     variant: string
   }
+
   export default function CozyTheme(props: CozyThemeProps): JSX.Element
   export function useCozyTheme(): CozyTheme
 }
@@ -40,7 +51,25 @@ declare module 'cozy-ui/transpiled/react/Buttons' {
 }
 
 declare module 'cozy-ui/transpiled/react/Icons/Help' {
+  import { SVGAttributes } from 'react'
+
   export default function HelpIcon(
-    props?: Omit<React.SVGAttributes<SVGElement>, 'children'>
+    props?: Omit<SVGAttributes<SVGElement>, 'children'>
   ): JSX.Element
 }
+
+declare module 'cozy-ui/transpiled/react/ActionsMenu/Actions' {
+  type Action = {
+    name: string
+    action: (doc: Section, opts: { handleAction: HandleActionCallback }) => void
+    Component: React.FC
+  }
+
+  export function makeActions(
+    arg1: (() => Action)[]
+  ): Record<string, () => Action>
+}
+
+declare module 'cozy-ui/transpiled/react/providers/Breakpoints' {
+  export default function useBreakpoints(): { isMobile: boolean }
+}

src/styles/lists.styl

@@ -14,6 +14,9 @@
     grid-gap rem(10) 0
     justify-content center
 
+    &.detailed
+        grid-template-columns repeat(auto-fill, 15.5rem)
+
     +small-screen()
         grid-template-columns repeat(auto-fill, mobileTileWithGutter)
         grid-auto-rows minmax(rem(68), auto)
@@ -33,6 +36,7 @@
 
 .app-list-wrapper, .services-list-wrapper, .shortcuts-list-wrapper, .failure-wrapper
     max-width 50rem
+    transition height 200ms ease
 
 .EmptyServicesListTip
     box-sizing border-box