cozy-ui 111.6.0 → 111.7.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [111.7.0](https://github.com/cozy/cozy-ui/compare/v111.6.0...v111.7.0) (2024-08-14)
+
+
+### Features
+
+* handle shortcuttiles ([e5ff800](https://github.com/cozy/cozy-ui/commit/e5ff800))
+
 # [111.6.0](https://github.com/cozy/cozy-ui/compare/v111.5.0...v111.6.0) (2024-08-14)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cozy-ui",
-  "version": "111.6.0",
+  "version": "111.7.0",
   "description": "Cozy apps UI SDK",
   "main": "./index.js",
   "bin": {

package/react/AppIcon/index.jsx

@@ -5,8 +5,10 @@ import React, { Component } from 'react'
 import { withClient } from 'cozy-client'
 
 import styles from './styles.styl'
+import { isShortcutFile } from '../AppSections/helpers'
 import Icon, { iconPropType } from '../Icon'
 import CubeIcon from '../Icons/Cube'
+import { ShortcutTile } from '../ShortcutTile'
 import palette from '../palette'
 import { AppDoctype } from '../proptypes'
 
@@ -45,6 +47,9 @@ export class AppIcon extends Component {
   fetchIcon() {
     const { app, type, priority, client } = this.props
 
+    // Shortcut files used in cozy-store have their own icon in their doctype metadata
+    if (isShortcutFile(app)) return
+
     return client.getStackClient().getIconURL({
       type,
       slug: app.slug || app,
@@ -93,6 +98,10 @@ export class AppIcon extends Component {
     const { alt, className, fallbackIcon } = this.props
     const { icon, status } = this.state
 
+    if (isShortcutFile(this.props.app)) {
+      return <ShortcutTile file={this.props.app} />
+    }
+
     switch (status) {
       case FETCHING:
         return (

package/react/AppSections/Sections.jsx

@@ -2,11 +2,16 @@ import cx from 'classnames'
 import PropTypes from 'prop-types'
 import React, { Component } from 'react'
 
+import flag from 'cozy-flags'
+import { useExtendI18n } from 'cozy-ui/transpiled/react/providers/I18n'
+
 import styles from './Sections.styl'
 import * as catUtils from './categories'
 import AppsSection from './components/AppsSection'
 import DropdownFilter from './components/DropdownFilter'
 import { APP_TYPE } from './constants'
+import { generateI18nConfig } from './generateI18nConfig'
+import { isShortcutFile } from './helpers'
 import en from './locales/en.json'
 import fr from './locales/fr.json'
 import * as searchUtils from './search'
@@ -105,12 +110,19 @@ export class Sections extends Component {
     const webAppGroups = catUtils.groupApps(
       filteredApps.filter(a => a.type === APP_TYPE.WEBAPP)
     )
+    const shortcutsGroups = catUtils.groupApps(
+      filteredApps.filter(a => isShortcutFile(a))
+    )
+
     const webAppsCategories = Object.keys(webAppGroups)
       .map(cat => catUtils.addLabel({ value: cat }, t))
       .sort(catUtils.sorter)
     const konnectorsCategories = Object.keys(konnectorGroups)
       .map(cat => catUtils.addLabel({ value: cat }, t))
       .sort(catUtils.sorter)
+    const shortcutsCategories = Object.keys(shortcutsGroups)
+      .map(cat => catUtils.addLabel({ value: cat }, t))
+      .sort(catUtils.sorter)
 
     const dropdownDisplayed =
       hasNav && (isMobile || isTablet) && showFilterDropdown
@@ -154,6 +166,33 @@ export class Sections extends Component {
               })}
             </div>
           )}
+          {!!shortcutsCategories.length && (
+            <div>
+              {showSubTitles && (
+                <SectionSubtitle>{t('sections.shortcuts')}</SectionSubtitle>
+              )}
+
+              {shortcutsCategories.map(cat => {
+                return (
+                  <AppsSection
+                    key={cat.value}
+                    {...componentsProps?.appsSection}
+                    appsList={shortcutsGroups[cat.value]}
+                    subtitle={
+                      showSubSubTitles ? (
+                        <SectionSubSubtitle>{cat.label}</SectionSubSubtitle>
+                      ) : null
+                    }
+                    IconComponent={IconComponent}
+                    onAppClick={onAppClick}
+                    displaySpecificMaintenanceStyle={
+                      displaySpecificMaintenanceStyle
+                    }
+                  />
+                )
+              })}
+            </div>
+          )}
           {!!konnectorsCategories.length && (
             <div>
               {showSubTitles && (
@@ -186,6 +225,14 @@ export class Sections extends Component {
   }
 }
 
+const SectionsWrapper = props => {
+  const config = flag('store.alternative-source')
+  const i18nConfig = generateI18nConfig(config?.categories)
+  useExtendI18n(i18nConfig)
+
+  return <Sections {...props} />
+}
+
 Sections.propTypes = {
   t: PropTypes.func.isRequired,
 
@@ -230,6 +277,6 @@ Sections.defaultProps = {
   })
 }
 
-export const Untranslated = withBreakpoints()(Sections)
+export const Untranslated = withBreakpoints()(SectionsWrapper)
 
 export default withLocales(locales)(translate()(Untranslated))

package/react/AppSections/__snapshots__/index.spec.jsx.snap

@@ -1075,6 +1075,11 @@ exports[`AppsSection component should render dropdown filter on mobile if no nav
           "type": "webapp",
           "value": "partners",
         },
+        Object {
+          "label": "Shortcuts",
+          "secondary": false,
+          "value": "shortcuts",
+        },
         Object {
           "label": "Services",
           "secondary": false,
@@ -1476,6 +1481,11 @@ exports[`AppsSection component should render dropdown filter on tablet if no nav
           "type": "webapp",
           "value": "partners",
         },
+        Object {
+          "label": "Shortcuts",
+          "secondary": false,
+          "value": "shortcuts",
+        },
         Object {
           "label": "Services",
           "secondary": false,

package/react/AppSections/categories.js

@@ -38,21 +38,37 @@ export const groupApps = apps => multiGroupBy(apps, getAppCategory)
  * Alphabetical sort on label except for
  *   - 'all' value always at the beginning
  *   - 'others' value always at the end
+ *   - 'cozy' value should be near the beginning, right after 'all'
+ *   - items of type 'file' should appear alphabetically between 'webapp' and 'konnector'
  *
  * @param  {CategoryOption} categoryA
  * @param  {CategoryOption} categoryB
  * @return {Number}
  */
 export const sorter = (categoryA, categoryB) => {
-  return (
-    (categoryA.value === 'all' && -1) ||
-    (categoryB.value === 'all' && 1) ||
-    (categoryA.value === 'others' && 1) ||
-    (categoryB.value === 'others' && -1) ||
-    (categoryA.value === 'cozy' && -1) ||
-    (categoryB.value === 'cozy' && 1) ||
-    categoryA.label.localeCompare(categoryB.label)
-  )
+  // Always keep 'all' at the beginning
+  if (categoryA.value === 'all') return -1
+  if (categoryB.value === 'all') return 1
+
+  // Always keep 'others' at the end
+  if (categoryA.value === 'others') return 1
+  if (categoryB.value === 'others') return -1
+
+  // Keep 'cozy' near the beginning, right after 'all'
+  if (categoryA.value === 'cozy') return -1
+  if (categoryB.value === 'cozy') return 1
+
+  // Sort by type order: webapp < file < konnector
+  const typeOrder = ['webapp', 'file', 'konnector']
+  const typeAIndex = typeOrder.indexOf(categoryA.type)
+  const typeBIndex = typeOrder.indexOf(categoryB.type)
+
+  if (typeAIndex !== typeBIndex) {
+    return typeAIndex - typeBIndex
+  }
+
+  // Alphabetical sort on label for the rest
+  return categoryA.label.localeCompare(categoryB.label)
 }
 
 export const addLabel = (cat, t) => ({
@@ -82,7 +98,7 @@ export const generateOptionsFromApps = (apps, options = {}) => {
       ]
     : []
 
-  for (const type of [APP_TYPE.WEBAPP, APP_TYPE.KONNECTOR]) {
+  for (const type of [APP_TYPE.WEBAPP, APP_TYPE.FILE, APP_TYPE.KONNECTOR]) {
     const catApps = groupApps(apps.filter(a => a.type === type))
     // Add an entry to filter by all konnectors
     if (type === APP_TYPE.KONNECTOR) {
@@ -93,11 +109,19 @@ export const generateOptionsFromApps = (apps, options = {}) => {
         })
       )
     }
+    if (type === APP_TYPE.FILE) {
+      allCategoryOptions.push(
+        addLabel({
+          value: 'shortcuts',
+          secondary: false
+        })
+      )
+    }
     const categoryOptions = Object.keys(catApps).map(cat => {
       return addLabel({
         value: cat,
         type: type,
-        secondary: type === APP_TYPE.KONNECTOR
+        secondary: type === APP_TYPE.KONNECTOR || type === APP_TYPE.FILE
       })
     })
 

package/react/AppSections/categories.spec.js

@@ -104,6 +104,7 @@ describe('generateOptionsFromApps', () => {
         type: 'webapp',
         value: 'others'
       },
+      { label: 'Shortcuts', secondary: false, value: 'shortcuts' },
       {
         label: 'Services',
         secondary: false,
@@ -156,6 +157,11 @@ describe('generateOptionsFromApps', () => {
         type: 'webapp',
         value: 'others'
       },
+      {
+        label: 'Shortcuts',
+        secondary: false,
+        value: 'shortcuts'
+      },
       {
         label: 'Services',
         secondary: false,

package/react/AppSections/components/__snapshots__/AppsSection.spec.jsx.snap

@@ -28,7 +28,7 @@ Array [
     "title": "Cozy Photos",
   },
   Object {
-    "developer": null,
+    "developer": "By undefined",
     "status": "Update available",
     "title": "Tasky",
   },

package/react/AppSections/constants.js

@@ -1,4 +1,9 @@
 export const APP_TYPE = {
   KONNECTOR: 'konnector',
-  WEBAPP: 'webapp'
+  WEBAPP: 'webapp',
+  FILE: 'file'
+}
+
+export const APP_CLASS = {
+  SHORTCUT: 'shortcut'
 }

package/react/AppSections/generateI18nConfig.ts

@@ -0,0 +1,23 @@
+export const generateI18nConfig = (categories?: {
+  [key: string]: string
+}): {
+  en: Record<string, string>
+  fr: Record<string, string>
+} => {
+  if (!categories) return { en: {}, fr: {} }
+
+  const i18nConfig: Record<string, string> = {}
+
+  for (const [key, value] of Object.entries(categories)) {
+    // Extract the final part of the path as the display name
+    const displayName =
+      value?.split('/').pop() ?? ''.replace(/([A-Z])/g, ' $1').trim()
+
+    i18nConfig[`app_categories.${key}`] = displayName
+  }
+
+  return {
+    en: i18nConfig,
+    fr: i18nConfig
+  }
+}

package/react/AppSections/helpers.js

@@ -1,8 +1,16 @@
 import _get from 'lodash/get'
 
+import { APP_CLASS, APP_TYPE } from './constants'
+
 export const getTranslatedManifestProperty = (app, path, t) => {
   if (!t || !app || !path) return _get(app, path, '')
   return t(`apps.${app.slug}.${path}`, {
     _: _get(app, path, '')
   })
 }
+
+export const isShortcutFile = app => {
+  if (!app) return false
+
+  return app.type === APP_TYPE.FILE && app.class === APP_CLASS.SHORTCUT
+}

package/react/AppSections/locales/en.json

@@ -26,10 +26,12 @@
     "tech": "Tech",
     "telecom": "Telecom",
     "transport": "Transportation",
-    "pro": "Work"
+    "pro": "Work",
+    "shortcuts": "Shortcuts"
   },
   "sections": {
     "applications": "Applications",
-    "konnectors": "Services"
+    "konnectors": "Services",
+    "shortcuts": "Shortcuts"
   }
 }

package/react/AppSections/locales/fr.json

@@ -26,10 +26,12 @@
     "tech": "Tech",
     "telecom": "Mobile",
     "transport": "Voyage et transport",
-    "pro": "Travail"
+    "pro": "Travail",
+    "shortcuts": "Raccourcis"
   },
   "sections": {
     "applications": "Applications",
-    "konnectors": "Services"
+    "konnectors": "Services",
+    "shortcuts": "Raccourcis"
   }
 }

package/react/AppTile/AppTile.spec.jsx

@@ -5,10 +5,11 @@
 import { render } from '@testing-library/react'
 import React from 'react'
 
-import CozyClient, { CozyProvider } from 'cozy-client'
+import CozyClient from 'cozy-client'
 
 import AppTile from '.'
 import en from '../AppSections/locales/en.json'
+import DemoProvider from '../providers/DemoProvider'
 import I18n from '../providers/I18n'
 
 const appMock = {
@@ -41,11 +42,11 @@ const appMock2 = {
 const client = new CozyClient({})
 const Wrapper = props => {
   return (
-    <CozyProvider client={client}>
+    <DemoProvider client={client}>
       <I18n dictRequire={() => en} lang="en">
         <AppTile {...props} />
       </I18n>
-    </CozyProvider>
+    </DemoProvider>
   )
 }
 

package/react/AppTile/index.jsx

@@ -7,8 +7,10 @@ import en from './locales/en.json'
 import fr from './locales/fr.json'
 import styles from './styles.styl'
 import AppIcon from '../AppIcon'
+import { isShortcutFile } from '../AppSections/helpers.js'
 import Icon from '../Icon'
 import WrenchCircleIcon from '../Icons/WrenchCircle'
+import { ShortcutTile } from '../ShortcutTile'
 import Tile, {
   TileTitle,
   TileSubtitle,
@@ -18,6 +20,7 @@ import Tile, {
 } from '../Tile'
 import palette from '../palette'
 import { AppDoctype } from '../proptypes'
+import useBreakpoints from '../providers/Breakpoints'
 import { createUseI18n } from '../providers/I18n'
 
 const locales = { en, fr }
@@ -47,16 +50,30 @@ export const AppTile = ({
   IconComponent: IconComponentProp,
   displaySpecificMaintenanceStyle
 }) => {
-  const name = nameProp || app.name
   const { t } = useI18n()
   const { developer = {} } = app
+  const { isMobile } = useBreakpoints()
+
+  const name = nameProp || app.name
+
   const statusLabel = getCurrentStatusLabel(app)
-  const statusToDisplay = Array.isArray(showStatus)
-    ? showStatus.indexOf(statusLabel) > -1 && statusLabel
-    : showStatus && statusLabel
+
+  const isStatusArray = Array.isArray(showStatus)
+
+  const statusToDisplay =
+    isShortcutFile(app) && statusLabel === APP_STATUS.installed && isMobile
+      ? 'favorite'
+      : isStatusArray
+      ? showStatus.indexOf(statusLabel) > -1 && statusLabel
+      : showStatus && statusLabel
+
   const IconComponent = IconComponentProp || AppIcon
+
   const isInMaintenanceWithSpecificDisplay =
     displaySpecificMaintenanceStyle && statusLabel === APP_STATUS.maintenance
+  const tileSubtitle = isShortcutFile(app)
+    ? app.metadata?.source
+    : developer.name
 
   return (
     <Tile
@@ -70,11 +87,15 @@ export const AppTile = ({
       isSecondary={statusLabel === APP_STATUS.installed}
     >
       <TileIcon>
-        <IconComponent
-          app={app}
-          className={styles['AppTile-icon']}
-          {...getAppIconProps()}
-        />
+        {isShortcutFile(app) ? (
+          <ShortcutTile file={app} />
+        ) : (
+          <IconComponent
+            app={app}
+            className={styles['AppTile-icon']}
+            {...getAppIconProps()}
+          />
+        )}
         {isInMaintenanceWithSpecificDisplay && (
           <Icon
             data-testid="icon-maintenance"
@@ -88,8 +109,8 @@ export const AppTile = ({
         <TileTitle isMultiline={!statusLabel}>
           {namePrefix ? `${namePrefix} ${name}` : name}
         </TileTitle>
-        {developer.name && showDeveloper && (
-          <TileSubtitle>{`${t('app_item.by')} ${developer.name}`}</TileSubtitle>
+        {showDeveloper && (
+          <TileSubtitle>{`${t('app_item.by')} ${tileSubtitle}`}</TileSubtitle>
         )}
         {statusToDisplay && (
           <TileFooter isAccent={statusLabel === APP_STATUS.update}>

package/react/AppTile/locales/en.json

@@ -3,6 +3,7 @@
     "by": "By",
     "installed": "Installed",
     "maintenance": "In maintenance",
-    "update": "Update available"
+    "update": "Update available",
+    "favorite": "Added to home page"
   }
 }

package/react/AppTile/locales/fr.json

@@ -3,6 +3,7 @@
     "by": "Par",
     "installed": "Installée",
     "maintenance": "En maintenance",
-    "update": "Mise à jour dispo."
+    "update": "Mise à jour dispo.",
+    "favorite": "Ajouté sur la page d'accueil"
   }
 }

package/react/ShortcutTile/index.tsx

@@ -0,0 +1,63 @@
+import React from 'react'
+
+import { IOCozyFile } from 'cozy-client/types/types'
+// @ts-expect-error - The following component is not typed
+import { nameToColor } from 'cozy-ui/react/Avatar/helpers'
+// @ts-expect-error - The following component is not typed
+import Typography from 'cozy-ui/react/Typography'
+
+import styles from '../AppTile/styles.styl'
+import { TileIcon } from '../Tile'
+import { makeStyles } from '../styles'
+
+interface ShortcutTileProps {
+  file: Partial<IOCozyFile> & {
+    name: string
+    attributes?: { metadata?: { icon?: string; iconMimeType?: string } }
+  }
+}
+
+const useStyles = makeStyles({
+  letter: {
+    color: 'white',
+    margin: 'auto'
+  },
+  letterWrapper: {
+    backgroundColor: ({ name }: { name: string }) =>
+      (nameToColor as (name: string) => string)(name)
+  }
+})
+
+export const ShortcutTile = ({ file }: ShortcutTileProps): JSX.Element => {
+  const classes = useStyles({ name: file.name })
+  const icon = file.attributes?.metadata?.icon
+  const iconMimeType = file.attributes?.metadata?.iconMimeType
+
+  if (icon) {
+    return (
+      <TileIcon>
+        <img
+          className={styles['AppTile-icon']}
+          src={
+            iconMimeType
+              ? `data:${iconMimeType};base64,${icon}`
+              : `data:image/svg+xml;base64,${window.btoa(icon)}`
+          }
+          width={48}
+          height={48}
+          alt={file.name}
+        />
+      </TileIcon>
+    )
+  }
+
+  return (
+    <TileIcon>
+      <div className={classes.letterWrapper}>
+        <Typography className={classes.letter} variant="h2" align="center">
+          {file.name[0].toUpperCase()}
+        </Typography>
+      </div>
+    </TileIcon>
+  )
+}

package/react/types.d.ts

@@ -0,0 +1,4 @@
+declare module '*.styl' {
+  const classes: Record<string, string>
+  export default classes
+}

package/transpiled/react/AppIcon/index.js

@@ -22,8 +22,10 @@ var styles = {
   "c-app-icon": "styles__c-app-icon___2_O40",
   "c-app-icon-default": "styles__c-app-icon-default___3CEmt"
 };
+import { isShortcutFile } from "cozy-ui/transpiled/react/AppSections/helpers";
 import Icon, { iconPropType } from "cozy-ui/transpiled/react/Icon";
 import CubeIcon from "cozy-ui/transpiled/react/Icons/Cube";
+import { ShortcutTile } from "cozy-ui/transpiled/react/ShortcutTile";
 import palette from "cozy-ui/transpiled/react/palette";
 import { AppDoctype } from "cozy-ui/transpiled/react/proptypes";
 var DONE = 'done';
@@ -78,7 +80,9 @@ export var AppIcon = /*#__PURE__*/function (_Component) {
           app = _this$props.app,
           type = _this$props.type,
           priority = _this$props.priority,
-          client = _this$props.client;
+          client = _this$props.client; // Shortcut files used in cozy-store have their own icon in their doctype metadata
+
+      if (isShortcutFile(app)) return;
       return client.getStackClient().getIconURL({
         type: type,
         slug: app.slug || app,
@@ -164,6 +168,12 @@ export var AppIcon = /*#__PURE__*/function (_Component) {
           icon = _this$state.icon,
           status = _this$state.status;
 
+      if (isShortcutFile(this.props.app)) {
+        return /*#__PURE__*/React.createElement(ShortcutTile, {
+          file: this.props.app
+        });
+      }
+
       switch (status) {
         case FETCHING:
           return /*#__PURE__*/React.createElement("div", {

package/transpiled/react/AppSections/Sections.js

@@ -13,6 +13,8 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 import cx from 'classnames';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
+import flag from 'cozy-flags';
+import { useExtendI18n } from 'cozy-ui/transpiled/react/providers/I18n';
 var styles = {
   "Sections__section": "Sections__Sections__section___2onYy"
 };
@@ -20,6 +22,8 @@ import * as catUtils from "cozy-ui/transpiled/react/AppSections/categories";
 import AppsSection from "cozy-ui/transpiled/react/AppSections/components/AppsSection";
 import DropdownFilter from "cozy-ui/transpiled/react/AppSections/components/DropdownFilter";
 import { APP_TYPE } from "cozy-ui/transpiled/react/AppSections/constants";
+import { generateI18nConfig } from "cozy-ui/transpiled/react/AppSections/generateI18nConfig";
+import { isShortcutFile } from "cozy-ui/transpiled/react/AppSections/helpers";
 var en = {
   app_categories: {
     all: "All categories",
@@ -48,11 +52,13 @@ var en = {
     tech: "Tech",
     telecom: "Telecom",
     transport: "Transportation",
-    pro: "Work"
+    pro: "Work",
+    shortcuts: "Shortcuts"
   },
   sections: {
     applications: "Applications",
-    konnectors: "Services"
+    konnectors: "Services",
+    shortcuts: "Shortcuts"
   }
 };
 var fr = {
@@ -83,11 +89,13 @@ var fr = {
     tech: "Tech",
     telecom: "Mobile",
     transport: "Voyage et transport",
-    pro: "Travail"
+    pro: "Travail",
+    shortcuts: "Raccourcis"
   },
   sections: {
     applications: "Applications",
-    konnectors: "Services"
+    konnectors: "Services",
+    shortcuts: "Raccourcis"
   }
 };
 import * as searchUtils from "cozy-ui/transpiled/react/AppSections/search";
@@ -210,6 +218,9 @@ export var Sections = /*#__PURE__*/function (_Component) {
       var webAppGroups = catUtils.groupApps(filteredApps.filter(function (a) {
         return a.type === APP_TYPE.WEBAPP;
       }));
+      var shortcutsGroups = catUtils.groupApps(filteredApps.filter(function (a) {
+        return isShortcutFile(a);
+      }));
       var webAppsCategories = Object.keys(webAppGroups).map(function (cat) {
         return catUtils.addLabel({
           value: cat
@@ -220,6 +231,11 @@ export var Sections = /*#__PURE__*/function (_Component) {
           value: cat
         }, t);
       }).sort(catUtils.sorter);
+      var shortcutsCategories = Object.keys(shortcutsGroups).map(function (cat) {
+        return catUtils.addLabel({
+          value: cat
+        }, t);
+      }).sort(catUtils.sorter);
       var dropdownDisplayed = hasNav && (isMobile || isTablet) && showFilterDropdown;
       var rawSelectOptions = catUtils.generateOptionsFromApps(apps, {
         includeAll: true
@@ -244,6 +260,16 @@ export var Sections = /*#__PURE__*/function (_Component) {
           IconComponent: IconComponent,
           displaySpecificMaintenanceStyle: displaySpecificMaintenanceStyle
         });
+      })), !!shortcutsCategories.length && /*#__PURE__*/React.createElement("div", null, showSubTitles && /*#__PURE__*/React.createElement(SectionSubtitle, null, t('sections.shortcuts')), shortcutsCategories.map(function (cat) {
+        return /*#__PURE__*/React.createElement(AppsSection, _extends({
+          key: cat.value
+        }, componentsProps === null || componentsProps === void 0 ? void 0 : componentsProps.appsSection, {
+          appsList: shortcutsGroups[cat.value],
+          subtitle: showSubSubTitles ? /*#__PURE__*/React.createElement(SectionSubSubtitle, null, cat.label) : null,
+          IconComponent: IconComponent,
+          onAppClick: onAppClick,
+          displaySpecificMaintenanceStyle: displaySpecificMaintenanceStyle
+        }));
       })), !!konnectorsCategories.length && /*#__PURE__*/React.createElement("div", null, showSubTitles && /*#__PURE__*/React.createElement(SectionSubtitle, null, t('sections.konnectors')), konnectorsCategories.map(function (cat) {
         return /*#__PURE__*/React.createElement(AppsSection, _extends({
           key: cat.value
@@ -260,6 +286,14 @@ export var Sections = /*#__PURE__*/function (_Component) {
 
   return Sections;
 }(Component);
+
+var SectionsWrapper = function SectionsWrapper(props) {
+  var config = flag('store.alternative-source');
+  var i18nConfig = generateI18nConfig(config === null || config === void 0 ? void 0 : config.categories);
+  useExtendI18n(i18nConfig);
+  return /*#__PURE__*/React.createElement(Sections, props);
+};
+
 Sections.propTypes = {
   t: PropTypes.func.isRequired,
 
@@ -300,5 +334,5 @@ Sections.defaultProps = {
     })
   })
 };
-export var Untranslated = withBreakpoints()(Sections);
+export var Untranslated = withBreakpoints()(SectionsWrapper);
 export default withLocales(locales)(translate()(Untranslated));

package/transpiled/react/AppSections/categories.js

@@ -69,6 +69,8 @@ export var groupApps = function groupApps(apps) {
  * Alphabetical sort on label except for
  *   - 'all' value always at the beginning
  *   - 'others' value always at the end
+ *   - 'cozy' value should be near the beginning, right after 'all'
+ *   - items of type 'file' should appear alphabetically between 'webapp' and 'konnector'
  *
  * @param  {CategoryOption} categoryA
  * @param  {CategoryOption} categoryB
@@ -76,7 +78,26 @@ export var groupApps = function groupApps(apps) {
  */
 
 export var sorter = function sorter(categoryA, categoryB) {
-  return categoryA.value === 'all' && -1 || categoryB.value === 'all' && 1 || categoryA.value === 'others' && 1 || categoryB.value === 'others' && -1 || categoryA.value === 'cozy' && -1 || categoryB.value === 'cozy' && 1 || categoryA.label.localeCompare(categoryB.label);
+  // Always keep 'all' at the beginning
+  if (categoryA.value === 'all') return -1;
+  if (categoryB.value === 'all') return 1; // Always keep 'others' at the end
+
+  if (categoryA.value === 'others') return 1;
+  if (categoryB.value === 'others') return -1; // Keep 'cozy' near the beginning, right after 'all'
+
+  if (categoryA.value === 'cozy') return -1;
+  if (categoryB.value === 'cozy') return 1; // Sort by type order: webapp < file < konnector
+
+  var typeOrder = ['webapp', 'file', 'konnector'];
+  var typeAIndex = typeOrder.indexOf(categoryA.type);
+  var typeBIndex = typeOrder.indexOf(categoryB.type);
+
+  if (typeAIndex !== typeBIndex) {
+    return typeAIndex - typeBIndex;
+  } // Alphabetical sort on label for the rest
+
+
+  return categoryA.label.localeCompare(categoryB.label);
 };
 export var addLabel = function addLabel(cat, t) {
   return _objectSpread(_objectSpread({}, cat), {}, {
@@ -120,11 +141,18 @@ export var generateOptionsFromApps = function generateOptionsFromApps(apps) {
       }));
     }
 
+    if (type === APP_TYPE.FILE) {
+      allCategoryOptions.push(addLabel({
+        value: 'shortcuts',
+        secondary: false
+      }));
+    }
+
     var categoryOptions = Object.keys(catApps).map(function (cat) {
       return addLabel({
         value: cat,
         type: type,
-        secondary: type === APP_TYPE.KONNECTOR
+        secondary: type === APP_TYPE.KONNECTOR || type === APP_TYPE.FILE
       });
     }); // Since options have been labelled, it's possible to sort them
 
@@ -135,7 +163,7 @@ export var generateOptionsFromApps = function generateOptionsFromApps(apps) {
     allCategoryOptions = allCategoryOptions.concat(categoryOptions);
   };
 
-  for (var _i = 0, _arr = [APP_TYPE.WEBAPP, APP_TYPE.KONNECTOR]; _i < _arr.length; _i++) {
+  for (var _i = 0, _arr = [APP_TYPE.WEBAPP, APP_TYPE.FILE, APP_TYPE.KONNECTOR]; _i < _arr.length; _i++) {
     _loop2();
   }
 

package/transpiled/react/AppSections/constants.js

@@ -1,4 +1,8 @@
 export var APP_TYPE = {
   KONNECTOR: 'konnector',
-  WEBAPP: 'webapp'
+  WEBAPP: 'webapp',
+  FILE: 'file'
+};
+export var APP_CLASS = {
+  SHORTCUT: 'shortcut'
 };

package/transpiled/react/AppSections/generateI18nConfig.d.ts

@@ -0,0 +1,6 @@
+export declare const generateI18nConfig: (categories?: {
+    [key: string]: string;
+} | undefined) => {
+    en: Record<string, string>;
+    fr: Record<string, string>;
+};

package/transpiled/react/AppSections/generateI18nConfig.js

@@ -0,0 +1,25 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+export var generateI18nConfig = function generateI18nConfig(categories) {
+  if (!categories) return {
+    en: {},
+    fr: {}
+  };
+  var i18nConfig = {};
+
+  for (var _i = 0, _Object$entries = Object.entries(categories); _i < _Object$entries.length; _i++) {
+    var _value$split$pop;
+
+    var _Object$entries$_i = _slicedToArray(_Object$entries[_i], 2),
+        _key = _Object$entries$_i[0],
+        value = _Object$entries$_i[1];
+
+    // Extract the final part of the path as the display name
+    var displayName = (_value$split$pop = value === null || value === void 0 ? void 0 : value.split('/').pop()) !== null && _value$split$pop !== void 0 ? _value$split$pop : ''.replace(/([A-Z])/g, ' $1').trim();
+    i18nConfig["app_categories.".concat(_key)] = displayName;
+  }
+
+  return {
+    en: i18nConfig,
+    fr: i18nConfig
+  };
+};

package/transpiled/react/AppSections/helpers.js

@@ -1,7 +1,12 @@
 import _get from 'lodash/get';
+import { APP_CLASS, APP_TYPE } from "cozy-ui/transpiled/react/AppSections/constants";
 export var getTranslatedManifestProperty = function getTranslatedManifestProperty(app, path, t) {
   if (!t || !app || !path) return _get(app, path, '');
   return t("apps.".concat(app.slug, ".").concat(path), {
     _: _get(app, path, '')
   });
+};
+export var isShortcutFile = function isShortcutFile(app) {
+  if (!app) return false;
+  return app.type === APP_TYPE.FILE && app.class === APP_CLASS.SHORTCUT;
 };

package/transpiled/react/AppTile/index.js

@@ -9,7 +9,8 @@ var en = {
     by: "By",
     installed: "Installed",
     maintenance: "In maintenance",
-    update: "Update available"
+    update: "Update available",
+    favorite: "Added to home page"
   }
 };
 var fr = {
@@ -17,7 +18,8 @@ var fr = {
     by: "Par",
     installed: "Install\xE9e",
     maintenance: "En maintenance",
-    update: "Mise \xE0 jour dispo."
+    update: "Mise \xE0 jour dispo.",
+    favorite: "Ajout\xE9 sur la page d'accueil"
   }
 };
 var styles = {
@@ -27,11 +29,14 @@ var styles = {
   "AppTile-container-maintenance": "styles__AppTile-container-maintenance___u1a1M"
 };
 import AppIcon from "cozy-ui/transpiled/react/AppIcon";
+import { isShortcutFile } from "cozy-ui/transpiled/react/AppSections/helpers.js";
 import Icon from "cozy-ui/transpiled/react/Icon";
 import WrenchCircleIcon from "cozy-ui/transpiled/react/Icons/WrenchCircle";
+import { ShortcutTile } from "cozy-ui/transpiled/react/ShortcutTile";
 import Tile, { TileTitle, TileSubtitle, TileFooter, TileIcon, TileDescription } from "cozy-ui/transpiled/react/Tile";
 import palette from "cozy-ui/transpiled/react/palette";
 import { AppDoctype } from "cozy-ui/transpiled/react/proptypes";
+import useBreakpoints from "cozy-ui/transpiled/react/providers/Breakpoints";
 import { createUseI18n } from "cozy-ui/transpiled/react/providers/I18n";
 var locales = {
   en: en,
@@ -55,6 +60,8 @@ var getAppIconProps = function getAppIconProps() {
 
 var useI18n = createUseI18n(locales);
 export var AppTile = function AppTile(_ref) {
+  var _app$metadata;
+
   var app = _ref.app,
       nameProp = _ref.name,
       namePrefix = _ref.namePrefix,
@@ -63,24 +70,32 @@ export var AppTile = function AppTile(_ref) {
       showStatus = _ref.showStatus,
       IconComponentProp = _ref.IconComponent,
       displaySpecificMaintenanceStyle = _ref.displaySpecificMaintenanceStyle;
-  var name = nameProp || app.name;
 
   var _useI18n = useI18n(),
       t = _useI18n.t;
 
   var _app$developer = app.developer,
       developer = _app$developer === void 0 ? {} : _app$developer;
+
+  var _useBreakpoints = useBreakpoints(),
+      isMobile = _useBreakpoints.isMobile;
+
+  var name = nameProp || app.name;
   var statusLabel = getCurrentStatusLabel(app);
-  var statusToDisplay = Array.isArray(showStatus) ? showStatus.indexOf(statusLabel) > -1 && statusLabel : showStatus && statusLabel;
+  var isStatusArray = Array.isArray(showStatus);
+  var statusToDisplay = isShortcutFile(app) && statusLabel === APP_STATUS.installed && isMobile ? 'favorite' : isStatusArray ? showStatus.indexOf(statusLabel) > -1 && statusLabel : showStatus && statusLabel;
   var IconComponent = IconComponentProp || AppIcon;
   var isInMaintenanceWithSpecificDisplay = displaySpecificMaintenanceStyle && statusLabel === APP_STATUS.maintenance;
+  var tileSubtitle = isShortcutFile(app) ? (_app$metadata = app.metadata) === null || _app$metadata === void 0 ? void 0 : _app$metadata.source : developer.name;
   return /*#__PURE__*/React.createElement(Tile, {
     tag: "button",
     type: "button",
     onClick: onClick,
     className: cx(_defineProperty({}, styles['AppTile-container-maintenance'], isInMaintenanceWithSpecificDisplay)),
     isSecondary: statusLabel === APP_STATUS.installed
-  }, /*#__PURE__*/React.createElement(TileIcon, null, /*#__PURE__*/React.createElement(IconComponent, _extends({
+  }, /*#__PURE__*/React.createElement(TileIcon, null, isShortcutFile(app) ? /*#__PURE__*/React.createElement(ShortcutTile, {
+    file: app
+  }) : /*#__PURE__*/React.createElement(IconComponent, _extends({
     app: app,
     className: styles['AppTile-icon']
   }, getAppIconProps())), isInMaintenanceWithSpecificDisplay && /*#__PURE__*/React.createElement(Icon, {
@@ -92,7 +107,7 @@ export var AppTile = function AppTile(_ref) {
     className: styles["AppTile-description"]
   }, /*#__PURE__*/React.createElement(TileTitle, {
     isMultiline: !statusLabel
-  }, namePrefix ? "".concat(namePrefix, " ").concat(name) : name), developer.name && showDeveloper && /*#__PURE__*/React.createElement(TileSubtitle, null, "".concat(t('app_item.by'), " ").concat(developer.name)), statusToDisplay && /*#__PURE__*/React.createElement(TileFooter, {
+  }, namePrefix ? "".concat(namePrefix, " ").concat(name) : name), showDeveloper && /*#__PURE__*/React.createElement(TileSubtitle, null, "".concat(t('app_item.by'), " ").concat(tileSubtitle)), statusToDisplay && /*#__PURE__*/React.createElement(TileFooter, {
     isAccent: statusLabel === APP_STATUS.update
   }, t("app_item.".concat(statusToDisplay)))));
 };

package/transpiled/react/ShortcutTile/index.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import { IOCozyFile } from 'cozy-client/types/types';
+interface ShortcutTileProps {
+    file: Partial<IOCozyFile> & {
+        name: string;
+        attributes?: {
+            metadata?: {
+                icon?: string;
+                iconMimeType?: string;
+            };
+        };
+    };
+}
+export declare const ShortcutTile: ({ file }: ShortcutTileProps) => JSX.Element;
+export {};

package/transpiled/react/ShortcutTile/index.js

@@ -0,0 +1,53 @@
+import React from 'react';
+// @ts-expect-error - The following component is not typed
+import { nameToColor } from 'cozy-ui/react/Avatar/helpers'; // @ts-expect-error - The following component is not typed
+
+import Typography from 'cozy-ui/react/Typography';
+var styles = {
+  "AppTile-icon": "styles__AppTile-icon___1f0c0",
+  "AppTile-icon--default": "styles__AppTile-icon--default___1tjiF",
+  "AppTile-icon-maintenance": "styles__AppTile-icon-maintenance___2VOvO",
+  "AppTile-container-maintenance": "styles__AppTile-container-maintenance___u1a1M"
+};
+import { TileIcon } from "cozy-ui/transpiled/react/Tile";
+import { makeStyles } from "cozy-ui/transpiled/react/styles";
+var useStyles = makeStyles({
+  letter: {
+    color: 'white',
+    margin: 'auto'
+  },
+  letterWrapper: {
+    backgroundColor: function backgroundColor(_ref) {
+      var name = _ref.name;
+      return nameToColor(name);
+    }
+  }
+});
+export var ShortcutTile = function ShortcutTile(_ref2) {
+  var _file$attributes, _file$attributes$meta, _file$attributes2, _file$attributes2$met;
+
+  var file = _ref2.file;
+  var classes = useStyles({
+    name: file.name
+  });
+  var icon = (_file$attributes = file.attributes) === null || _file$attributes === void 0 ? void 0 : (_file$attributes$meta = _file$attributes.metadata) === null || _file$attributes$meta === void 0 ? void 0 : _file$attributes$meta.icon;
+  var iconMimeType = (_file$attributes2 = file.attributes) === null || _file$attributes2 === void 0 ? void 0 : (_file$attributes2$met = _file$attributes2.metadata) === null || _file$attributes2$met === void 0 ? void 0 : _file$attributes2$met.iconMimeType;
+
+  if (icon) {
+    return /*#__PURE__*/React.createElement(TileIcon, null, /*#__PURE__*/React.createElement("img", {
+      className: styles['AppTile-icon'],
+      src: iconMimeType ? "data:".concat(iconMimeType, ";base64,").concat(icon) : "data:image/svg+xml;base64,".concat(window.btoa(icon)),
+      width: 48,
+      height: 48,
+      alt: file.name
+    }));
+  }
+
+  return /*#__PURE__*/React.createElement(TileIcon, null, /*#__PURE__*/React.createElement("div", {
+    className: classes.letterWrapper
+  }, /*#__PURE__*/React.createElement(Typography, {
+    className: classes.letter,
+    variant: "h2",
+    align: "center"
+  }, file.name[0].toUpperCase())));
+};

package/transpiled/react/Tile/index.d.ts

@@ -0,0 +1,68 @@
+export function TileDescription({ children, className }: {
+    children: any;
+    className: any;
+}): JSX.Element;
+export function TileTitle({ children, className, isMultiline }: {
+    children: any;
+    className: any;
+    isMultiline: any;
+}): JSX.Element;
+export namespace TileTitle {
+    namespace propTypes {
+        const className: PropTypes.Requireable<string>;
+        const isMultiline: PropTypes.Requireable<boolean>;
+    }
+    namespace defaultProps {
+        const isMultiline_1: boolean;
+        export { isMultiline_1 as isMultiline };
+    }
+}
+export function TileSubtitle({ children }: {
+    children: any;
+}): JSX.Element;
+export function TileFooter({ children, className, isAccent }: {
+    children: any;
+    className: any;
+    isAccent: any;
+}): JSX.Element;
+export namespace TileFooter {
+    export namespace propTypes_1 {
+        const className_1: PropTypes.Requireable<string>;
+        export { className_1 as className };
+        export const isAccent: PropTypes.Requireable<boolean>;
+    }
+    export { propTypes_1 as propTypes };
+    export namespace defaultProps_1 {
+        const isAccent_1: boolean;
+        export { isAccent_1 as isAccent };
+    }
+    export { defaultProps_1 as defaultProps };
+}
+export function TileIcon({ children }: {
+    children: any;
+}): JSX.Element;
+export default Tile;
+import PropTypes from "prop-types";
+declare function Tile({ children, className, tag: Tag, isSecondary, ...props }: {
+    [x: string]: any;
+    children: any;
+    className: any;
+    tag: any;
+    isSecondary: any;
+}): JSX.Element;
+declare namespace Tile {
+    export namespace propTypes_2 {
+        const className_2: PropTypes.Requireable<string>;
+        export { className_2 as className };
+        export const isSecondary: PropTypes.Requireable<boolean>;
+        export const tag: PropTypes.Requireable<string>;
+    }
+    export { propTypes_2 as propTypes };
+    export namespace defaultProps_2 {
+        const isSecondary_1: boolean;
+        export { isSecondary_1 as isSecondary };
+        const tag_1: string;
+        export { tag_1 as tag };
+    }
+    export { defaultProps_2 as defaultProps };
+}

package/transpiled/react/Typography/index.d.ts

@@ -0,0 +1,3 @@
+export default Typography;
+declare const Typography: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
+import React from "react";