feat: Add thumbnails support for files in grid view #2337

george-hub331 · 2025-02-23T22:51:01Z

Closes #2301

This PR adds thumbnail support for files in the IPFS WebUI grid view, improving the visual browsing experience.

Changes:

Enhanced FileThumbnail component to handle both image and text previews
Added efficient loading states and error handling
Optimized text preview loading with size limits
Improved thumbnail styling and layout
Maintained existing functionality while adding preview features
Translations done with google translate

The thumbnails are implemented with:

Lazy loading for images to improve performance
Text preview for common text file formats
Loading states to provide better UX
Error handling to gracefully fallback to file icons
Size limits on text previews to prevent performance issues

Testing:

Tested with various image formats
Verified text file preview functionality
Confirmed loading states work correctly
Checked error handling for invalid files
Verified performance with multiple files

Introduces a new grid view mode for the files page, allowing users to switch between list and grid views. Includes: - New FilesGrid component - View mode toggle buttons - Shared props between list and grid views - Updated rendering logic to support both view modes

Adds multi-select functionality and improved keyboard navigation to the files page grid view: - Implement file selection with checkboxes - Add keyboard navigation between files - Create a new SelectedActions component for bulk operations - Update styling to support selection and focus states

- Adjust GridFile thumbnail opacity for better visual appearance

- Add select all checkbox for grid view - Move selected state management to parent component - Refactor file selection logic to support bulk and individual selection - Minor UI layout adjustments

- Implement text preview for text-based files in Grid File - Add support for reading file contents with doRead action - Enhance FileThumbnail to display text previews - Add localized "Select all entries" text across language files, this was done using google translate

welcome · 2025-02-23T22:51:03Z

Thank you for submitting this PR!
A maintainer will be here shortly to review it.
We are super grateful, but we are also overloaded! Help us by making sure that:

The context for this PR is clear, with relevant discussion, decisions
and stakeholders linked/mentioned.
Your contribution itself is clear (code comments, self-review for the
rest) and in its best form. Follow the code contribution
guidelines
if they apply.

Getting other community members to do a review would be great help too on complex PRs (you can ask in the chats/forums). If you are unsure about something, just leave us a comment.
Next steps:

A maintainer will triage and assign priority to this PR, commenting on
any missing things and potentially assigning a reviewer for high
priority items.
The PR gets reviews, discussed and approvals as needed.
The PR is merged by maintainers when it has been approved and comments addressed.

We currently aim to provide initial feedback/triaging within two business days. Please keep an eye on any labelling actions, as these will indicate priorities and status of your contribution.
We are very grateful for your contribution!

george-hub331 · 2025-02-27T22:16:20Z

Hey @lidel, could you take a look at my PR when you get a chance? Would really appreciate your review!

lidel

Thank you for contributing this, it is amazing work 😻
See some feedback/asks inline.

Snapshot of current state for posterity

yarn.lock

src/files/FilesPage.js

src/files/files-grid/FilesGrid.js

src/files/FilesPage.js

src/files/files-grid/FilesGrid.js

src/files/FilesPage.js

- Move view mode buttons to Header component - Truncate file hash in grid view for better readability - Adjust Header layout and styling

- Add translation for view mode - Apply consistent height to view mode buttons in FilesPage - Adjust Header component margins and layout - Add responsive margin for breadcrumbs header

- Implement keyboard shortcut modal with comprehensive keyboard navigation - Add drop zone and drag-and-drop functionality for files in grid view - Enhance list file navigation and selection with improved keyboard controls - Add visual indicators for drag and drop interactions in grid view

george-hub331 · 2025-03-04T12:15:46Z

hey @lidel, i've been able to resolve all feedbacks/asks

moving 2px and changing border weight does not render well and makes ui jiggle. switching to static sizing + reusing dotted border convention from the old Files screen

we dont want to cause unnecessary work for people at https://app.transifex.com/ipfs/ipfs-webui/dashboard/

we do not use shadows in UI anywhere else, let's keep grid view UI simple and follow similar visual indicators as list view

lidel

Looking good, thank you.

I've pushed small cosmetics to unify UI conventions in both views.
(the bold border which I requested caused UI to jiggle – I've reverted it and simplified UI to not move 2px around. This should work better on systems with unstable font rendering – removing surface for jiggling on some Linux boxes)

@SgtPooki mind taking a look with fresh set of eyes and merging if no concerns?

The thumbnails grid view can be enabled by clicking on this icon:

george-hub331 · 2025-03-04T22:38:18Z

Oh great!, Thanks for the changes too @lidel

SgtPooki

A few things here:

new filenames should be kebab case
new files should be typescript
new components should be functional components
translations should not include any changes to anything except public/locales/en/ folder.. we will update other languages later.

george-hub331 · 2025-03-17T15:07:37Z

@SgtPooki noted, i would proceed with these changes

SgtPooki · 2025-03-17T19:04:51Z

@george-hub331 hey, check out the branch now.. I converted to ts and fixed some errors.. the keyboard functionality might need a second eye from you, I think I broke something but i'm going to have to step onto something else for a bit

SgtPooki

review of the latest code..

sometimes, hitting enter on a focused item doesn't execute when in grid view.

I would love to merge the shortcut helper into a generic component, and would have loved that to be a separate PR.. that increases the complexity of this one significantly.

i'm going two open two issues to track shortcut handling being combined into a single component that can be used by both list and grid view, but also an issue to track DOs and DONTs for PRs until we fully migrate to typescript

src/files/files-list/FilesList.js

SgtPooki · 2025-03-17T19:06:35Z

config-overrides.js

+
+  // Make sure .tsx and .ts extensions are properly prioritized
+  // This ordering allows imports like './file.js' to resolve to './file.ts' or './file.tsx'
+  config.resolve.extensions = ['.js', '.jsx', '.ts', '.tsx', '...']
+
+  // Enable resolving .js imports to .ts/.tsx files without specific aliases
+  config.resolve.extensionAlias = {
+    '.js': ['.js', '.ts', '.tsx'],
+    '.jsx': ['.jsx', '.tsx']
+  }


this fixes an issue where TS and webpack and eslint fought against each other about import extensions..

ideally all imports should end in file extension ".js"

src/files/FilesPage.js

SgtPooki · 2025-03-17T19:09:12Z

tsconfig.json

+    "src/files/file-preview/file-thumbnail.tsx",
+    "src/files/type-from-ext/index.js",
+    "src/files/files-grid/files-grid.tsx",
+    "src/files/files-grid/grid-file.tsx",
+    "src/files/file-icon/FileIcon.js",
+    "src/files/pin-icon/PinIcon.js",
+    "src/icons/GlyphDots.js",
+    "src/components/checkbox/Checkbox.js",
+    "src/icons/GlyphPin.js",
+    "src/icons/GlyphPinCloud.js",
+    "src/icons/GlyphSmallTick.js",
+    "src/icons/GlyphDocText.js",
+    "src/icons/GlyphDocPicture.js",
+    "src/icons/GlyphDocMusic.js",
+    "src/icons/GlyphDocMovie.js",
+    "src/icons/GlyphDocGeneric.js",
+    "src/icons/GlyphDocCalc.js",
+    "src/icons/GlyphFolder.js",
+    "src/icons/GlyphPinCloud.js",
+    "src/icons/GlyphPin.js",
+    "src/icons/StrokeCube.js",
+    "src/files/type-from-ext/extToType.js"


ts needed these files in the project because they're being imported by other files.. we really need to finish up the TS migration in this project because it's getting messy

attempt at an explanation is here: #2349

SgtPooki · 2025-03-17T19:10:43Z

src/files/modals/shortcut-modal/shortcut-modal.js

+    if (platform === 'mac' && keySymbols.mac[key]) return keySymbols.mac[key]
+    if (platform !== 'mac' && keySymbols.other[key]) return keySymbols.other[key]


@lidel do you have key recommendations for linux here?

src/files/files-list/FilesList.js

SgtPooki · 2025-03-20T14:20:39Z

@george-hub331 would you mind throwing together an e2e test that validates grid functionalities?

george-hub331 added 5 commits February 20, 2025 10:59

fix: Improve FilesGrid and GridFile styling and linting

47f641f

- Adjust GridFile thumbnail opacity for better visual appearance

feat: Improve file selection and view mode in Files Page

4b76dde

- Add select all checkbox for grid view - Move selected state management to parent component - Refactor file selection logic to support bulk and individual selection - Minor UI layout adjustments

george-hub331 requested a review from a team as a code owner February 23, 2025 22:51

Merge branch 'main' into thumbnail-addition

ba6383c

george-hub331 temporarily deployed to Deploy March 1, 2025 02:33 — with GitHub Actions Inactive

lidel requested changes Mar 1, 2025

View reviewed changes

george-hub331 and others added 9 commits March 1, 2025 14:49

chore: remove yarn.lock file

8507e66

feat: use larger icon size when preview is not available for grids

1205468

feat: Improve view mode UI and file hash display

6021c9c

- Move view mode buttons to Header component - Truncate file hash in grid view for better readability - Adjust Header layout and styling

feat: Add view mode translations and adjust UI styling

b9f8de3

- Add translation for view mode - Apply consistent height to view mode buttons in FilesPage - Adjust Header component margins and layout - Add responsive margin for breadcrumbs header

feat: Improve FilesGrid keyboard navigation and responsiveness

f61bf3d

style: Reduce border width from 2px to 1px in default state

1fe9b1a

fix: resolve issue with storybook test

175630c

Merge branch 'main' into thumbnail-addition

0c4a5bc

george-hub331 temporarily deployed to Deploy March 4, 2025 21:20 — with GitHub Actions Inactive

lidel added 2 commits March 4, 2025 22:53

fix: avoid jiggling ui

8df9581

moving 2px and changing border weight does not render well and makes ui jiggle. switching to static sizing + reusing dotted border convention from the old Files screen

fix: avoid changing unrelated translations

3deea61

we dont want to cause unnecessary work for people at https://app.transifex.com/ipfs/ipfs-webui/dashboard/

lidel temporarily deployed to Deploy March 4, 2025 22:06 — with GitHub Actions Inactive

fix: remove shadow on hover

6430413

we do not use shadows in UI anywhere else, let's keep grid view UI simple and follow similar visual indicators as list view

lidel approved these changes Mar 4, 2025

View reviewed changes

lidel temporarily deployed to Deploy March 4, 2025 22:47 — with GitHub Actions Inactive

Merge branch 'main' into thumbnail-addition

ba6864c

george-hub331 temporarily deployed to Deploy March 14, 2025 20:04 — with GitHub Actions Inactive

chore: remove translation edits

0acb827

SgtPooki requested changes Mar 17, 2025

View reviewed changes

SgtPooki added 2 commits March 17, 2025 10:05

Merge branch 'main' into thumbnail-addition

cc3c47e

chore: rename shortcut model filename

2ab0c2b

SgtPooki added 4 commits March 17, 2025 10:28

chore: fix mem leak and side effects

60b620a

chore: rename new files to kebab case

7beaa11

fix: grid keyboard nav

933a302

fix: migrate to typescript

f1e29c8

SgtPooki temporarily deployed to Deploy March 17, 2025 18:45 — with GitHub Actions Inactive

SgtPooki added 2 commits March 17, 2025 14:02

chore: fix lint failures

f9977b1

chore: fix runtime error

fe6e294

SgtPooki temporarily deployed to Deploy March 17, 2025 19:07 — with GitHub Actions Inactive

SgtPooki approved these changes Mar 17, 2025

View reviewed changes

SgtPooki mentioned this pull request Mar 17, 2025

feat: create shortcut component that can be used on any page #2350

Open

george-hub331 added 4 commits March 19, 2025 01:03

fix: simplify keyboard shortcut condition

05d7fbe

fix: resolve issue with enter shortcut on grid

48c97d3

chore: remove default props on FilesList

8c33280

feat: add grid view step to files tour

6272ea9

george-hub331 temporarily deployed to Deploy March 20, 2025 14:22 — with GitHub Actions Inactive

lidel mentioned this pull request Mar 21, 2025

Release 0.35 ipfs/kubo#10760

Open

23 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: Add thumbnails support for files in grid view #2337

feat: Add thumbnails support for files in grid view #2337

george-hub331 commented Feb 23, 2025

welcome bot commented Feb 23, 2025

george-hub331 commented Feb 27, 2025

lidel left a comment

george-hub331 commented Mar 4, 2025

lidel left a comment

george-hub331 commented Mar 4, 2025

SgtPooki left a comment

george-hub331 commented Mar 17, 2025

SgtPooki commented Mar 17, 2025 •

edited

Loading

SgtPooki left a comment

SgtPooki Mar 17, 2025

SgtPooki Mar 17, 2025

SgtPooki Mar 17, 2025

SgtPooki Mar 17, 2025

SgtPooki commented Mar 20, 2025

		if (platform === 'mac' && keySymbols.mac[key]) return keySymbols.mac[key]
		if (platform !== 'mac' && keySymbols.other[key]) return keySymbols.other[key]

feat: Add thumbnails support for files in grid view #2337

Are you sure you want to change the base?

feat: Add thumbnails support for files in grid view #2337

Conversation

george-hub331 commented Feb 23, 2025

welcome bot commented Feb 23, 2025

george-hub331 commented Feb 27, 2025

lidel left a comment

Choose a reason for hiding this comment

Snapshot of current state for posterity

george-hub331 commented Mar 4, 2025

lidel left a comment

Choose a reason for hiding this comment

george-hub331 commented Mar 4, 2025

SgtPooki left a comment

Choose a reason for hiding this comment

george-hub331 commented Mar 17, 2025

SgtPooki commented Mar 17, 2025 • edited Loading

SgtPooki left a comment

Choose a reason for hiding this comment

SgtPooki Mar 17, 2025

Choose a reason for hiding this comment

SgtPooki Mar 17, 2025

Choose a reason for hiding this comment

SgtPooki Mar 17, 2025

Choose a reason for hiding this comment

SgtPooki Mar 17, 2025

Choose a reason for hiding this comment

SgtPooki commented Mar 20, 2025

SgtPooki commented Mar 17, 2025 •

edited

Loading