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

* feat: Add grid view mode with thumbnails for files page

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

* feat: Enhance files page with multi-select and keyboard navigation

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

* fix: Improve FilesGrid and GridFile styling and linting

- Adjust GridFile thumbnail opacity for better visual appearance

* feat: Improve file selection and view mode in Files Page

- 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

* feat: Add text preview for files in grid view

- 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

* chore: remove yarn.lock file

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

* feat: Improve view mode UI and file hash display

- 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

- 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

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

* fix: resolve issue with storybook test

* feat: Add keyboard shortcuts and drag-and-drop support for gridfiles

- 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

* fix: avoid jiggling ui

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

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

* fix: remove shadow on hover

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

* chore: remove translation edits

* chore: rename shortcut model filename

* chore: fix mem leak and side effects

* chore: rename new files to kebab case

* fix: grid keyboard nav

* fix: migrate to typescript

* chore: fix lint failures

* chore: fix runtime error

* fix: simplify keyboard shortcut condition

* fix: resolve issue with enter shortcut on grid

* chore: remove default props on FilesList

* feat: add grid view step to files tour

* fix: improve keyboard navigation and refactor grid file component

* feat: add e2e tests for grid view functionality

* chore: remove e2e unnecessary setup script

* fix: resolve error with grid e2e tests

---------

Co-authored-by: Marcin Rataj <[email protected]>
Co-authored-by: Russell Dempsey <[email protected]>

Author: 3 people

@types/ipfs/index.d.ts

@@ -16,6 +16,7 @@ declare module 'ipfs' {
   }
 
   declare export interface CoreService {
+    // TODO: cat returns AsyncIterable<Uint8Array>. see https://github.com/ipfs/js-kubo-rpc-client/blob/1ab7941819dd1a48df653ee159e6983608e72132/src/index.ts#L353C50-L353C75
     cat(pathOrCID: string | CID, options?: CatOptions): AsyncIterable<Buffer>;
     ls(pathOrCID: string | CID, options?: ListOptions): AsyncIterable<ListEntry>;
     add(file: FileContent | FileObject, options?: AddOptions): Promise<UnixFSEntry>;
@@ -94,9 +95,9 @@ declare module 'ipfs' {
   }
 
   declare export type PinType =
-    | "recursive"
-    | "direct"
-    | "indirect"
+    | 'recursive'
+    | 'direct'
+    | 'indirect'
 
   declare export type PinEntry = {
     cid: CID,

config-overrides.js

@@ -121,7 +121,16 @@ function webpackOverride (config) {
       fullySpecified: false
     }
   })
-  config.resolve.extensions = ['.js', '.jsx', '.tsx', '.ts', '...']
+
+  // 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']
+  }
 
   // Instrument for code coverage in development mode
   const REACT_APP_ENV = process.env.REACT_APP_ENV ?? process.env.NODE_ENV ?? 'development'

public/locales/en/files.json

@@ -17,7 +17,10 @@
   "addByCar": "From CAR",
   "bulkImport": "Bulk import",
   "newFolder": "New folder",
+  "viewList": "Show items in list",
+  "viewGrid": "Show items in grid",
   "generating": "Generating…",
+  "dropHere": "Drop here to move",
   "actions": {
     "copyHash": "Copy CID",
     "share": "Share link",
@@ -46,6 +49,28 @@
     "checkboxRemoveLocalPin": "Also remove local pin (recommended)",
     "checkboxUnpinFromServices": "Unpin from all pinning services"
   },
+  "shortcutModal": {
+    "title": "Keyboard Shortcuts",
+    "description": "The following keyboard shortcuts are available in the Files section:",
+    "navigation": "Navigation",
+    "selection": "Selection",
+    "actions": "Actions",
+    "other": "Other",
+    "moveDown": "Move down",
+    "moveUp": "Move up",
+    "moveLeft": "Move left",
+    "moveRight": "Move right",
+    "navigate": "Navigate to selected item",
+    "rename": "Rename selected item",
+    "delete": "Delete selected item(s)",
+    "toggleSelection": "Toggle selection",
+    "selectAll": "Select all items",
+    "deselectAll": "Deselect all items",
+    "copy": "Copy selected item(s)",
+    "paste": "Paste item(s)",
+    "cut": "Cut selected item(s)",
+    "showShortcuts": "Show keyboard shortcuts"
+  },
   "pinningModal": {
     "title": "Select where you would like to pin these items.",
     "complianceLabel": "🔍 Check pinning services' compliance",
@@ -81,6 +106,7 @@
     "description": "Insert the name of the folder you want to create."
   },
   "filesListLabel": "Files list",
+  "filesGridLabel": "Files grid",
   "filesList": {
     "noFiles": "<0>No files in this directory. Click the “Import” button to add some.</0>"
   },
@@ -117,6 +143,11 @@
       "paragraph1": "Finally, the listing where you can find your files and folders. Drag and drop files or folders to add them.",
       "paragraph2": "You can share or download files, inspect them in the IPLD Explorer, rename or remove them!",
       "paragraph3": "Pro tip: drag and drop a file from any other page of the Web UI to add them to the root of your MFS."
+    },
+    "step6": {
+      "title": "Files grid",
+      "paragraph1": "The grid view displays your files and folders as thumbnails, making it easy to visually browse your content.",
+      "paragraph2": "You can share or download files, inspect them in the IPLD Explorer, rename or remove them!"
     }
   },
   "previewLimitReached": "This preview is limited to 10 KiB. Click the download button to access the full file.",
@@ -153,5 +184,6 @@
     "pleaseWait": "Please wait while the initial 20 copies of the updated IPNS record are stored with the help of DHT peers…"
   },
   "noPinsInProgress": "All done, no remote pins in progress.",
-  "remotePinningInProgress": "Remote pinning in progress:"
+  "remotePinningInProgress": "Remote pinning in progress:",
+  "selectAllEntries": "Select all entries"
 }

src/bundles/files/actions.js

@@ -185,6 +185,19 @@ const actions = () => ({
     }
   },
 
+  /**
+   * Reads data from a CID with optional offset and length.
+   * @param {import('multiformats/cid').CID} cid - The CID to read from
+   * @param {number} [offset] - The starting point to read from
+   * @param {number} [length] - The number of bytes to read
+  */
+  doRead: (cid, offset = 0, length) => perform(ACTIONS.READ_FILE, async (ipfs) => {
+    if (!ipfs) {
+      throw new Error('IPFS is not available')
+    }
+    return ipfs.cat(cid, { offset, length })
+  }),
+
   /**
    * Fetches conten for the currently selected path. And updates
    * `state.pageContent` on succesful completion.

src/bundles/files/consts.js

@@ -42,7 +42,9 @@ export const ACTIONS = {
   /** @type {'FILES_WRITE_UPDATED'} */
   WRITE_UPDATED: ('FILES_WRITE_UPDATED'),
   /** @type {'FILES_UPDATE_SORT'} */
-  UPDATE_SORT: ('FILES_UPDATE_SORT')
+  UPDATE_SORT: ('FILES_UPDATE_SORT'),
+  /** @type {'FILES_READ'} */
+  READ_FILE: ('FILES_READ')
 }
 
 export const SORTING = {

src/components/checkbox/Checkbox.js

@@ -3,12 +3,24 @@ import PropTypes from 'prop-types'
 import Tick from '../../icons/GlyphSmallTick.js'
 import './Checkbox.css'
 
+/**
+ * @param {Object} props
+ * @param {string} [props.className]
+ * @param {React.ReactNode} [props.label]
+ * @param {boolean} [props.disabled]
+ * @param {boolean} [props.checked]
+ * @param {function(boolean): void} props.onChange
+ * @returns {React.ReactElement}
+ */
 const Checkbox = ({ className, label, disabled, checked, onChange, ...props }) => {
   className = `Checkbox dib sans-serif ${className}`
   if (!disabled) {
     className += ' pointer'
   }
 
+  /**
+   * @param {React.ChangeEvent<HTMLInputElement>} event
+   */
   const change = (event) => {
     onChange(event.target.checked)
   }
@@ -19,9 +31,9 @@ const Checkbox = ({ className, label, disabled, checked, onChange, ...props }) =
       <span className='dib v-mid br1 w1 h1 pointer'>
         <Tick className='w1 h1 o-0 fill-aqua' viewBox='25 25 50 50' />
       </span>
-      <span className='v-mid pl2'>
+      {Boolean(label) && <span className='v-mid pl2'>
         {label}
-      </span>
+      </span>}
     </label>
   )
 }

src/components/text-input-modal/TextInputModal.js

@@ -123,7 +123,7 @@ class TextInputModal extends React.Component {
             onKeyPress={this.onKeyPress}
             value={this.state.value}
             required
-            className={`input-reset charcoal ba b--black-20 br1 pa2 mb2 db w-90 center focus-outline ${this.inputClass}`}
+            className={`input-reset charcoal ba b--black-20 br1 pa2 mb2 db w-90 center focus-outline modal-input ${this.inputClass}`}
             type='text' />
         </ModalBody>