feat: Implement new UI of file viewer ✨

lethemanh · lethemanh · commit 03251258a8a6 · 2026-01-29T13:53:46.000+07:00
diff --git a/package.json b/package.json
@@ -102,9 +102,9 @@
     "cozy-search": "^0.14.1",
     "cozy-sharing": "^28.3.0",
     "cozy-stack-client": "^60.19.0",
-    "cozy-ui": "^135.3.0",
+    "cozy-ui": "^135.6.0",
     "cozy-ui-plus": "^4.4.0",
-    "cozy-viewer": "^26.5.1",
+    "cozy-viewer": "^26.6.0",
     "date-fns": "2.30.0",
     "diacritics": "1.3.0",
     "filesize": "10.1.6",
diff --git a/src/hooks/useMoreMenuActions.jsx b/src/hooks/useMoreMenuActions.jsx
@@ -1,5 +1,5 @@
 import { useState, useEffect } from 'react'
-import { useNavigate } from 'react-router-dom'
+import { useLocation, useNavigate } from 'react-router-dom'
 import { useI18n } from 'twake-i18n'
 
 import { useClient } from 'cozy-client'
@@ -28,6 +28,7 @@ import { addToFavorites } from '@/modules/actions/components/addToFavorites'
 import { duplicateTo } from '@/modules/actions/components/duplicateTo'
 import { moveTo } from '@/modules/actions/components/moveTo'
 import { removeFromFavorites } from '@/modules/actions/components/removeFromFavorites'
+import { details } from '@/modules/actions/details'
 import { filterActionsByPolicy } from '@/modules/actions/policies'
 
 export const useMoreMenuActions = file => {
@@ -46,6 +47,7 @@ export const useMoreMenuActions = file => {
   const currentFolderId = useCurrentFolderId()
   const { isSharingShortcutCreated, addSharingLink, syncSharingLink } =
     useSharingInfos()
+  const location = useLocation()
   const canWriteToCurrentFolder = hasWriteAccess(currentFolderId, file.driveId)
   const isPDFDoc = file.mime === 'application/pdf'
   const showPrintAction = isPDFDoc && isPrintAvailable
@@ -60,6 +62,7 @@ export const useMoreMenuActions = file => {
       isCozySharing && syncToCozySharingLink,
       download,
       showPrintAction && print,
+      details,
       hr,
       moveTo,
       !isSharedDrive && duplicateTo, // TO DO: Remove condition when duplicating is available in shared drive
@@ -95,7 +98,8 @@ export const useMoreMenuActions = file => {
       fetchBlobFileById,
       isFile,
       addSharingLink,
-      driveId: file.driveId
+      driveId: file.driveId,
+      location
     }
   )
 
diff --git a/src/locales/ar.json b/src/locales/ar.json
@@ -147,6 +147,7 @@
     }
   },
   "actions": {
+    "details": "تفاصيل",
     "personalizeFolder": {
       "label": "تخصيص المجلد"
     },
diff --git a/src/locales/de.json b/src/locales/de.json
@@ -479,6 +479,7 @@
     "empty": "Es wurde kein Ergebnis für die Suche \"%{query}\" gefunden"
   },
   "actions": {
+    "details": "Details",
     "personalizeFolder": {
       "label": "Ordner personalisieren"
     },
diff --git a/src/locales/en.json b/src/locales/en.json
@@ -675,6 +675,7 @@
     "error": "An error occurred, please try again."
   },
   "actions": {
+    "details": "Details",
     "infos": "Details and qualification",
     "infosMobile": "Details",
     "duplicateTo": {
diff --git a/src/locales/es.json b/src/locales/es.json
@@ -452,6 +452,7 @@
     }
   },
   "actions": {
+    "details": "Detalles",
     "personalizeFolder": {
       "label": "Personalizar carpeta"
     },
diff --git a/src/locales/fr.json b/src/locales/fr.json
@@ -672,6 +672,7 @@
     "error": "Une erreur est survenue, merci de réessayer."
   },
   "actions": {
+    "details": "Détails",
     "infos": "Détails et qualification",
     "infosMobile": "Détails",
     "duplicateTo": {
diff --git a/src/locales/it.json b/src/locales/it.json
@@ -302,6 +302,7 @@
     }
   },
   "actions": {
+    "details": "Dettagli",
     "personalizeFolder": {
       "label": "Personalizza cartella"
     },
diff --git a/src/locales/ja.json b/src/locales/ja.json
@@ -414,6 +414,7 @@
     "empty": "問い合わせ “%{query}” の結果が見つかりません"
   },
   "actions": {
+    "details": "詳細",
     "personalizeFolder": {
       "label": "フォルダをカスタマイズ"
     },
diff --git a/src/locales/ko.json b/src/locales/ko.json
@@ -88,6 +88,7 @@
     }
   },
   "actions": {
+    "details": "세부 정보",
     "personalizeFolder": {
       "label": "폴더 개인화"
     },
diff --git a/src/locales/nl.json b/src/locales/nl.json
@@ -102,6 +102,7 @@
     "cannot_copy_shared_drive": "Je kunt de gedeelde schijfmap niet kopiëren"
   },
   "actions": {
+    "details": "Details",
     "personalizeFolder": {
       "label": "Map personaliseren"
     },
diff --git a/src/locales/nl_NL.json b/src/locales/nl_NL.json
@@ -520,6 +520,7 @@
     "element": "item |||| items"
   },
   "actions": {
+    "details": "Details",
     "personalizeFolder": {
       "label": "Map personaliseren"
     },
diff --git a/src/locales/pl.json b/src/locales/pl.json
@@ -85,6 +85,7 @@
     "cannot_copy_shared_drive": "Nie możesz skopiować folderu dysku współdzielonego"
   },
   "actions": {
+    "details": "Szczegóły",
     "personalizeFolder": {
       "label": "Personalizuj folder"
     },
diff --git a/src/locales/ru.json b/src/locales/ru.json
@@ -663,6 +663,7 @@
     "error": "Произошла ошибка, попробуйте ещё раз."
   },
   "actions": {
+    "details": "Подробности",
     "infos": "Детали и категоризация",
     "infosMobile": "Детали",
     "duplicateTo": {
diff --git a/src/locales/vi.json b/src/locales/vi.json
@@ -662,6 +662,7 @@
     "error": "Đã xảy ra lỗi, vui lòng thử lại."
   },
   "actions": {
+    "details": "Chi tiết",
     "infos": "Chi tiết và phân loại",
     "infosMobile": "Chi tiết",
     "duplicateTo": {
diff --git a/src/locales/zh_CN.json b/src/locales/zh_CN.json
@@ -90,6 +90,7 @@
     "cannot_copy_shared_drive": "您无法复制共享云端硬盘文件夹"
   },
   "actions": {
+    "details": "详细信息",
     "personalizeFolder": {
       "label": "个性化文件夹"
     },
diff --git a/src/locales/zh_TW.json b/src/locales/zh_TW.json
@@ -176,6 +176,7 @@
     "cannot_copy_shared_drive": "您無法複製共用雲端硬碟資料夾"
   },
   "actions": {
+    "details": "詳細資訊",
     "personalizeFolder": {
       "label": "個性化資料夾"
     },
diff --git a/src/modules/actions/details.jsx b/src/modules/actions/details.jsx
@@ -0,0 +1,50 @@
+import React, { forwardRef } from 'react'
+
+import flag from 'cozy-flags'
+import ActionsMenuItem from 'cozy-ui/transpiled/react/ActionsMenu/ActionsMenuItem'
+import Icon from 'cozy-ui/transpiled/react/Icon'
+import InfoOutlinedIcon from 'cozy-ui/transpiled/react/Icons/InfoOutlined'
+import ListItemIcon from 'cozy-ui/transpiled/react/ListItemIcon'
+import ListItemText from 'cozy-ui/transpiled/react/ListItemText'
+
+const makeComponent = (label, icon) => {
+  const Component = forwardRef((props, ref) => {
+    return (
+      <ActionsMenuItem {...props} ref={ref}>
+        <ListItemIcon>
+          <Icon icon={icon} />
+        </ListItemIcon>
+        <ListItemText primary={label} />
+      </ActionsMenuItem>
+    )
+  })
+
+  Component.displayName = 'details'
+
+  return Component
+}
+
+export const details = ({ t, navigate, location }) => {
+  const icon = InfoOutlinedIcon
+  const label = t('actions.details')
+
+  return {
+    name: 'details',
+    icon,
+    label,
+    allowInfectedFiles: false,
+    displayCondition: () =>
+      flag('drive.new-file-viewer-ui.enabled') &&
+      location?.state?.showDetailPanel === false,
+    Component: makeComponent(label, icon),
+    action: () => {
+      navigate(location.pathname, {
+        replace: true,
+        state: {
+          ...location.state,
+          showDetailPanel: true
+        }
+      })
+    }
+  }
+}
diff --git a/src/modules/actions/summariseByAI.jsx b/src/modules/actions/summariseByAI.jsx
@@ -3,7 +3,7 @@ import React, { forwardRef } from 'react'
 import flag from 'cozy-flags'
 import ActionsMenuItem from 'cozy-ui/transpiled/react/ActionsMenu/ActionsMenuItem'
 import Icon from 'cozy-ui/transpiled/react/Icon'
-import TextIcon from 'cozy-ui/transpiled/react/Icons/Text'
+import ArticleIcon from 'cozy-ui/transpiled/react/Icons/Article'
 import ListItemIcon from 'cozy-ui/transpiled/react/ListItemIcon'
 import ListItemText from 'cozy-ui/transpiled/react/ListItemText'
 import { isFileSummaryCompatible } from 'cozy-viewer/dist/helpers'
@@ -27,7 +27,7 @@ const makeComponent = (label, icon) => {
 
 export const summariseByAI = ({ t, hasWriteAccess, navigate }) => {
   const label = t('actions.summariseByAI')
-  const icon = TextIcon
+  const icon = ArticleIcon
 
   return {
     name: 'summariseByAI',
diff --git a/src/modules/viewer/FilesViewer.jsx b/src/modules/viewer/FilesViewer.jsx
@@ -4,7 +4,11 @@ import { useNavigate, useParams } from 'react-router-dom'
 import { useI18n } from 'twake-i18n'
 
 import { Q, useClient } from 'cozy-client'
+import flag from 'cozy-flags'
 import { useVaultClient } from 'cozy-keys-lib'
+import Button from 'cozy-ui/transpiled/react/Buttons'
+import Icon from 'cozy-ui/transpiled/react/Icon'
+import ShareIcon from 'cozy-ui/transpiled/react/Icons/Share'
 import useBreakpoints from 'cozy-ui/transpiled/react/providers/Breakpoints'
 import Viewer, {
   FooterActionButtons,
@@ -24,6 +28,7 @@ import {
   getDecryptedFileURL
 } from '@/lib/encryption'
 import logger from '@/lib/logger'
+import { navigateToModal } from '@/modules/actions/helpers'
 import Fallback from '@/modules/viewer/Fallback'
 import MoreMenu from '@/modules/viewer/MoreMenu'
 import {
@@ -205,6 +210,23 @@ const FilesViewer = ({ filesQuery, files, onClose, onChange, viewerProps }) => {
         >
           <ToolbarButtons>
             <MoreMenu file={viewerFiles[viewerIndex]} />
+
+            {flag('drive.new-file-viewer-ui.enabled') && (
+              <Button
+                variant="secondary"
+                aria-label={t('Viewer.share_btn')}
+                label={t('Viewer.share_btn')}
+                startIcon={<Icon icon={ShareIcon} />}
+                onClick={() =>
+                  navigateToModal({
+                    navigate,
+                    pathname: '',
+                    files,
+                    path: 'share'
+                  })
+                }
+              />
+            )}
           </ToolbarButtons>
           <FooterActionButtons>
             <SharingButton />
diff --git a/yarn.lock b/yarn.lock
@@ -5892,10 +5892,10 @@ cozy-ui-plus@^4.4.0:
     react-final-form-arrays "3.1.4"
     rooks "7.14.1"
 
-cozy-ui@^135.3.0:
-  version "135.3.0"
-  resolved "https://registry.yarnpkg.com/cozy-ui/-/cozy-ui-135.3.0.tgz#abd363c4a410d464620b16c67dda3c456d3863b9"
-  integrity sha512-XjBm8lfzAWCNVJvXuu/Aq+lp3ASa0IPZV6NKwbjelt89E5cY+qVPb9/KAjjTpeg9R7vBmAuoHIo+DAupeLFtGA==
+cozy-ui@^135.6.0:
+  version "135.6.0"
+  resolved "https://registry.yarnpkg.com/cozy-ui/-/cozy-ui-135.6.0.tgz#813803ad0de704b9c18f5c6c28ead0b2c1bc37ac"
+  integrity sha512-Ihr22z78Dc9V6vcZOifimz9ScDq1bopH5ifg0RAAgZH1dUkGUB9aM7bo4z9HsxhkUz+2QeJK8bD8MGv44lho9g==
   dependencies:
     "@babel/runtime" "^7.3.4"
     "@date-io/date-fns" "1"
@@ -5922,10 +5922,10 @@ cozy-ui@^135.3.0:
     react-virtuoso "^4.13.0"
     rooks "7.14.1"
 
-cozy-viewer@^26.5.1:
-  version "26.5.1"
-  resolved "https://registry.yarnpkg.com/cozy-viewer/-/cozy-viewer-26.5.1.tgz#e6316ee9d010606c018ff2bf046f8fe7bc2b9938"
-  integrity sha512-up3Gohs+IVwGsbq4hKIgApew60b+owc9dmQYZTWDfKhg+j5ZKgYGDkhmWz3EApsMs2LoWR2Shsp5/ZpFjUaFDQ==
+cozy-viewer@^26.6.0:
+  version "26.6.0"
+  resolved "https://registry.yarnpkg.com/cozy-viewer/-/cozy-viewer-26.6.0.tgz#520e3050599e6ce3a5d2770b2b2e93ced3a8eb7a"
+  integrity sha512-AUVBGPTRNu5mFvMIo6os1qxrkMUoRNd7outtPMdvwFkp6lgumExML8Vy4mgUsI1hCjtbVOaL48+gvyl2M/iPoA==
   dependencies:
     classnames "^2.5.1"
     hammerjs "^2.0.8"

Original file line number	Diff line number	Diff line change
`@@ -147,6 +147,7 @@`
`147`	`147`	`}`
`148`	`148`	`},`
`149`	`149`	`"actions": {`
	`150`	`+ "details": "تفاصيل",`
`150`	`151`	`"personalizeFolder": {`
`151`	`152`	`"label": "تخصيص المجلد"`
`152`	`153`	`},`
Original file line number	Diff line number	Diff line change
`@@ -452,6 +452,7 @@`
`452`	`452`	`}`
`453`	`453`	`},`
`454`	`454`	`"actions": {`
	`455`	`+ "details": "Detalles",`
`455`	`456`	`"personalizeFolder": {`
`456`	`457`	`"label": "Personalizar carpeta"`
`457`	`458`	`},`
Original file line number	Diff line number	Diff line change
`@@ -302,6 +302,7 @@`
`302`	`302`	`}`
`303`	`303`	`},`
`304`	`304`	`"actions": {`
	`305`	`+ "details": "Dettagli",`
`305`	`306`	`"personalizeFolder": {`
`306`	`307`	`"label": "Personalizza cartella"`
`307`	`308`	`},`
Original file line number	Diff line number	Diff line change
`@@ -88,6 +88,7 @@`
`88`	`88`	`}`
`89`	`89`	`},`
`90`	`90`	`"actions": {`
	`91`	`+ "details": "세부 정보",`
`91`	`92`	`"personalizeFolder": {`
`92`	`93`	`"label": "폴더 개인화"`
`93`	`94`	`},`