feat: Implement grid layout ✨ #3421

lethemanh · 2025-07-10T07:52:26Z

Crash-- · 2025-07-10T08:33:07Z

src/components/App/App.jsx

-              </ModalContextProvider>
-            </ThumbnailSizeContextProvider>
+            <ViewSwitcherContextProvider>
+              <ThumbnailSizeContextProvider>


Since you replace this thumbnail size, you should remove it from everywhere.

Crash-- · 2025-07-10T08:34:25Z

src/modules/filelist/File.jsx

+    [styles['fil-content-column-selected']]: selected,
+    [styles['fil-content-column-actioned']]: actionMenuVisible,
+    [styles['fil-content-column-disabled']]: styleDisabled,
+    [styles['fil-content-column-bigger']]: thumbnailSizeBig


can we still have thumbnailSizeBig ?

Crash-- · 2025-07-10T08:35:32Z

src/modules/filelist/File.jsx

      )}
-    </TableRow>
+    </>


do we really need to have this full copy / past between list & grid? Can't we make a few if? Because it seems that there is a lot of stuff that are just duplicated

Crash-- · 2025-07-10T08:39:24Z

src/modules/filelist/FileListHeaderMobile.jsx

@@ -76,11 +76,11 @@ const FileListHeaderMobile = ({
          <Button
            variant="text"
            onClick={() => {
-              toggleThumbnailSize()
+              toggleViewType(viewType === 'list' ? 'grid' : 'list')


Why can't we just toggleViewType()? For me, toggle can only have two values and we change from one to another. So we should not test the previous value every time we want to change. This should be done within the provider.

Otherwise, rename this method to switchViewType and in that case you can do what you did, but I still prefer the first solution.

Crash-- · 2025-07-10T08:40:48Z

src/modules/filelist/cells/SelectBox.jsx

-)
+import { useViewSwitcherContext } from '@/lib/ViewSwitcherContext'
+
+const SelectBox = ({ withSelectionCheckbox, selected, onClick, disabled }) => {


This component should be dump, and should not rely on the hook. Pass a viewType props directly.

Crash-- · 2025-07-10T08:46:22Z

src/modules/filelist/icons/FileThumbnail.tsx

-              <FileIcon file={file} size={48} isEncrypted={isEncrypted} />
+              <FileIcon
+                file={file}
+                size={viewType === 'grid' ? 96 : 48}


why don't you pass 96 when you call FileThumbnail? Like that, no need to rely on the hook.

Crash-- · 2025-07-10T08:48:41Z

src/styles/filelist.styl

+    .fil-content-file-select
+        position absolute
+        top -4px
+        left -3px


what are those magic numbers? Are you sure it still works if you change your font size? Should we use rem or something here?

Crash-- · 2025-07-10T08:49:27Z

src/styles/filelist.styl

+        position absolute
+        top -4px
+        left -3px
+        z-index 1


Can you @require 'settings/z-index.styl' and then use the zIndex variable you need?

Crash-- · 2025-07-10T08:49:43Z

src/styles/filelist.styl

+    white-space normal
+    height auto
+    padding-right 0
+    margin-top 10px


don't use px, you rem please

Crash-- · 2025-07-10T08:50:04Z

test/components/AppLike.jsx

-                      </BreakpointsProvider>
-                    </ThumbnailSizeContextProvider>
+                    <ViewSwitcherContextProvider>
+                      <ThumbnailSizeContextProvider>


remove ThumbnailSizeContextProvider

Crash-- · 2025-07-10T08:53:13Z

Can you split your PR into at least 2 commits:

One that add this "grid view"
One that add the "select all"

Also, what about FolderViewBodyVz? You only change what is not "virtualized", but it seems that this is not what we'll be used anymore?

src/modules/views/Drive/DriveFolderView.jsx

lethemanh · 2025-07-10T10:29:24Z

Can you split your PR into at least 2 commits:

One that add this "grid view"

One that add the "select all"

Also, what about FolderViewBodyVz? You only change what is not "virtualized", but it seems that this is not what we'll be used anymore?

@Crash-- the FolderViewBodyVz is using virtualized table from cozy-ui, I think this is a big change if we want to apply grid layout
cc @rezk2ll

bundlemon · 2025-07-11T07:54:49Z

BundleMon

Files updated (5)

Status	Path	Size	Limits
✅	static/js/main.(hash).js	117.9KB (+805B +0.67%)	-
✅	public/static/js/public.(hash).js	86.83KB (+744B +0.84%)	-
✅	static/css/main.(hash).css	16.61KB (+419B +2.53%)	-
✅	public/static/css/public.(hash).css	6.29KB (+409B +6.78%)	-
✅	public/static/js/cozy.(hash).js	711.88KB (+348B +0.05%)	-

Unchanged files (16)

Status	Path	Size	Limits
✅	static/js/(chunkId).(hash).js	967.38KB	-
✅	public/static/js/(chunkId).(hash).js	872.3KB	-
✅	static/js/cozy.(hash).js	845.89KB	-
✅	(hash).js	337.62KB	-
✅	public/(hash).js	337.62KB	-
✅	services/qualificationMigration.js	282.6KB	-
✅	services/dacc.js	264.84KB	-
✅	public/static/js/lib-react.(hash).js	39.37KB	-
✅	static/js/lib-react.(hash).js	39.37KB	-
✅	public/static/css/cozy.(hash).css	33.69KB	-
✅	static/css/cozy.(hash).css	33.69KB	-
✅	public/static/js/lib-router.(hash).js	22.05KB	-
✅	static/js/lib-router.(hash).js	22.05KB	-
✅	manifest.webapp	1.89KB	-
✅	index.html	688B	-
✅	assets/manifest.json	185B	-

Total files change +2.66KB +0.05%

Groups updated (2)

Status	Path	Size	Limits
✅	*/.js	6.45MB (+1.94KB +0.03%)	-
✅	*/.css	129.78KB (+1.29KB +1%)	-

Unchanged groups (1)

Status	Path	Size	Limits
✅	*/.{png,svg,ico}	2.15MB	-

Final result: ✅

View report in BundleMon website ➡️

Current branch size history | Target branch size history

rezk2ll · 2025-07-11T08:37:07Z

src/styles/filelist.styl

+        text-overflow ellipsis
+        white-space normal
+
+        max-width 96px


This will unnecessarily truncate the file/folder names, and it's in px.

use max-width 100% instead

If use max-width 100%, we cannot limit the long text, so I changed to 6rem instead

rezk2ll · 2025-07-11T08:41:44Z

src/styles/folder-view.styl

@@ -0,0 +1,4 @@
+.fil-folder-body-grid
+    display grid
+    grid-template-columns repeat(auto-fill, minmax(140px, 1fr))


Suggested change

grid-template-columns repeat(auto-fill, minmax(140px, 1fr))

grid-template-columns repeat(auto-fill, minmax(8.4rem, 1fr))

In the Figma design, we have each item having a 136px width ( say 8.5rem ) and the row should have 12 items

If we use the current implementation values, we will end up with 11 items max per row

lethemanh requested review from JF-Cozy, zatteo, Ldoppea and lenhanphung as code owners July 10, 2025 07:52

lethemanh self-assigned this Jul 10, 2025

lethemanh requested a review from rezk2ll July 10, 2025 07:52

lethemanh force-pushed the grid-layout branch from a27bd3a to cc3d9b8 Compare July 10, 2025 07:54

Crash-- reviewed Jul 10, 2025

View reviewed changes

lethemanh force-pushed the grid-layout branch from cc3d9b8 to 13b9486 Compare July 10, 2025 09:35

rezk2ll reviewed Jul 10, 2025

View reviewed changes

src/modules/views/Drive/DriveFolderView.jsx Show resolved Hide resolved

lethemanh requested review from Crash-- and rezk2ll July 10, 2025 10:34

lethemanh force-pushed the grid-layout branch from bab21f6 to 064b925 Compare July 11, 2025 07:51

lethemanh force-pushed the grid-layout branch 2 times, most recently from 6fa0052 to 5475442 Compare July 11, 2025 08:18

rezk2ll reviewed Jul 11, 2025

View reviewed changes

feat: Implement grid layout ✨

463817d

lethemanh force-pushed the grid-layout branch from 5475442 to 463817d Compare July 11, 2025 09:19

lethemanh requested a review from rezk2ll July 11, 2025 09:20

rezk2ll approved these changes Jul 11, 2025

View reviewed changes

rezk2ll merged commit 9d950f6 into master Jul 11, 2025
4 checks passed

rezk2ll deleted the grid-layout branch July 11, 2025 09:36

	grid-template-columns repeat(auto-fill, minmax(140px, 1fr))
	grid-template-columns repeat(auto-fill, minmax(8.4rem, 1fr))

feat: Implement grid layout ✨ #3421

feat: Implement grid layout ✨ #3421

Uh oh!

Conversation

lethemanh commented Jul 10, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Crash-- commented Jul 10, 2025

Uh oh!

Uh oh!

lethemanh commented Jul 10, 2025

Uh oh!

bundlemon bot commented Jul 11, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

BundleMon

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

rezk2ll Jul 11, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

lethemanh commented Jul 10, 2025 •

edited

Loading

bundlemon bot commented Jul 11, 2025 •

edited

Loading

rezk2ll Jul 11, 2025 •

edited

Loading