feat(files): advanced sorting options #2421

alikhere · 2025-09-06T13:38:29Z

Summary

Implements a new sorting feature for the Files section that allows users to sort files with pinned items appearing first, while maintaining default sorting behaviour.

Features Added

Sort Dropdown: Clean dropdown UI with two options:
- "Name (A–Z)" - Default(current) behavior (folders first, then files, alphabetically)
- "Pinned first" - Pinned items at top,
Persistence: Both sort preference and view mode (list/grid) are saved to localStorage
Auto-sorting: When "Pinned first" is selected, newly pinned items automatically move to top
Backwards Compatible For those who prefer current behavior

Implementation

Enhanced sortFiles function with pinned-first logic
Added BY_PINNED sort option to existing sorting system
Implemented localStorage persistence for user preferences
Added TypeScript type support for new sort option
Created accessible dropdown component following existing UI patterns

Before

After

Fixes: #2407

alikhere · 2025-09-08T08:35:38Z

Hey @SgtPooki @lidel Could you please review the PR.

changed doFilesCopyCidProvide to doFilesCidProvide to match the actual prop name from the redux store

- add early return for empty or single-item arrays - skip pinned checking when no pins exist

extract duplicate re-sorting logic into resortIfPinnedSorting helper function to reduce code duplication

- validate saved sorting values against allowed SORTING enum - clear corrupted localStorage data on parse errors - remove keyboard navigation complexity from SortDropdown - changed console.warn to console.error for save failures

- replace two separate list/grid buttons with single toggle button - show current view icon (list icon when in list mode, grid icon when in grid mode) - add toggleViewMode function for cleaner code - update tooltips to "Click to switch to..." for clarity - remove unused viewList/viewGrid locale keys - view preference already persisted to localStorage - removed unused filelist-view and filegrid-view classes

- ascending: pinned items first - descending: unpinned items first - previously always showed pinned first regardless of direction

- add BY_ORIGINAL sorting mode to preserve ipfs.ls order - column headers now cycle: ascending → descending → original - no arrow indicator shown when in original order state - add "Original order" option to sort dropdown - make sortFiles non-mutating to preserve original order - store originalContent to preserve true ipfs.ls order refactor: improve sorting implementation - extract getSortedContent helper to reduce code duplication - make resortContent generic instead of pinned-specific - optimize pin checking with Set for O(1) lookup performance - remove unnecessary array spread for BY_ORIGINAL - style column headers with charcoal-muted for consistency

- expand dropdown to show all sort directions (asc/desc) - add Size sorting options to dropdown - show separate options for each sort type and direction: - Name (A → Z) / Name (Z → A) - Size (smallest first) / Size (largest first) - Pinned first / Unpinned first - Original order - update selection logic to match both sort type and direction - clearer labels for what each option does - fix eslint multiline-ternary formatting

more accurate label that conveys this is the unmodified UnixFS DAG traversal order

prevent long labels from breaking dropdown layout

remove extra space before comment

lidel

Thank you @alikhere, applied some changes, but lgtm.

Realized we already had partially implemented sorting UI in the list mode, when you clicked on column names.

What I did I've wired up sorting by pin there:

..and then added option to sort by size to the dropdown, and then adding asc/desc version of each. I also added option to disable sorting and show original order as it is in the UnixFS DAG:

Once i get CI to be green,
I'm merging as-is but feel free to refine / improve in a follow-up PR.

- update test selectors for new button titles - handle single toggle button for view switching - clear localStorage in test setup - fix React act() warnings in async tests

alikhere · 2025-09-17T06:37:39Z

Thank you @alikhere, applied some changes, but lgtm.

Realized we already had partially implemented sorting UI in the list mode, when you clicked on column names.

What I did I've wired up sorting by pin there:

..and then added option to sort by size to the dropdown, and then adding asc/desc version of each. I also added option to disable sorting and show original order as it is in the UnixFS DAG:

Once i get CI to be green, I'm merging as-is but feel free to refine / improve in a follow-up PR.

Looks great!

## [4.9.0](v4.8.0...v4.9.0) (2025-09-17) CID `bafybeietkqxghs3hm56e3w64s4papqlvvzqzjigs4eyuy24plkpz652fee` --- ### Features * add Agent Version column to peers table ([#2433](#2433)) ([614f30d](614f30d)), closes [ipfs/kubo#9465](ipfs/kubo#9465) [ipfs/js-kubo-rpc-client#342](ipfs/js-kubo-rpc-client#342) [ipfs/kubo#9465](ipfs/kubo#9465) * add close button to file viewer for improved navigation ([#2401](#2401)) ([84969a5](84969a5)) * add diagnostics screen ([#2392](#2392)) ([f3a8179](f3a8179)), closes [#2424](#2424) [ipfs-check#102](ipfs/ipfs-check#102) [/github.com/ipfs/ipfs-check/pull/102#pullrequestreview-3214396503](https://github.com/ipfs//github.com/ipfs/ipfs-check/pull/102/issues/pullrequestreview-3214396503) [#2434](#2434) * **files:** advanced sorting options ([#2421](#2421)) ([c9251eb](c9251eb)) * migrate Tooltip from Javascript to Typescript ([#2381](#2381)) ([dc9e9ac](dc9e9ac)) ### Bug Fixes * create redux-bundler migration helpers ([#2388](#2388)) ([d1fdb87](d1fdb87)) * display UX friendly error for missing files ([#2346](#2346)) ([d4e7fca](d4e7fca)) * **files:** rename in Grid View ([#2422](#2422)) ([e39bce6](e39bce6)) * **i18n:** prevent English replacements in translation sync workflow ([#2418](#2418)) ([323c59e](323c59e)) * macos input focus issue in draggable regions ([#2416](#2416)) ([5382688](5382688)) * migrate error boundary to typescript ([#2402](#2402)) ([b33775a](b33775a)) * **navbar:** highlighting on browser back ([#2425](#2425)) ([cec6dfd](cec6dfd)) * Prevent layout breaks with long filenames in file preview ([#2415](#2415)) ([f82efcd](f82efcd)) * reference to `global` in browser environment ([#2408](#2408)) ([03b2e92](03b2e92)) * shared max for bandwidth chart ([#2426](#2426)) ([cd17032](cd17032)) * typecheck more files ([#2409](#2409)) ([fb967ee](fb967ee)) ### Tests * fix bring-your-own kubo node functionality ([#2396](#2396)) ([0883cfa](0883cfa)) * make e2e tests more robust ([#2438](#2438)) ([3de544b](3de544b)) ### Trivial Changes * **readme:** update links ([dc6f8f4](dc6f8f4)) * remove selectApiUrl selector ([#2412](#2412)) ([d4710e8](d4710e8))

ipfs-gui-bot · 2025-09-17T22:36:05Z

🎉 This PR is included in version 4.9.0 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

alikhere added 2 commits September 6, 2025 04:39

feat: add pinned-first sorting option

bb42ded

feat: add sort dropdown UI

57fc1d2

alikhere requested a review from a team as a code owner September 6, 2025 13:38

alikhere temporarily deployed to Deploy September 6, 2025 13:40 — with GitHub Actions Inactive

alikhere mentioned this pull request Sep 6, 2025

feat(files): sort option to move pinned items to the top #2407

Closed

alikhere changed the title ~~Feat/sorting files~~ feat: add pinned-first sorting option to files section Sep 6, 2025

Merge branch 'main' into feat/sorting-files

7888147

lidel self-assigned this Sep 17, 2025

lidel added 10 commits September 17, 2025 03:52

fix: typo in FilesPage prop name

36d3a4c

changed doFilesCopyCidProvide to doFilesCidProvide to match the actual prop name from the redux store

perf: optimize sortFiles function

a006f27

- add early return for empty or single-item arrays - skip pinned checking when no pins exist

refactor: consolidate re-sorting logic in files bundle

68f4e84

extract duplicate re-sorting logic into resortIfPinnedSorting helper function to reduce code duplication

feat: improve localStorage error handling

7023321

- validate saved sorting values against allowed SORTING enum - clear corrupted localStorage data on parse errors - remove keyboard navigation complexity from SortDropdown - changed console.warn to console.error for save failures

fix: respect sort direction when sorting by pin status

929899f

- ascending: pinned items first - descending: unpinned items first - previously always showed pinned first regardless of direction

rename: 'Original order' to 'Original DAG order'

2b93e6d

more accurate label that conveys this is the unmodified UnixFS DAG traversal order

Merge remote-tracking branch 'origin/main' into feat/sorting-files

089fa47

lidel temporarily deployed to Deploy September 17, 2025 03:27 — with GitHub Actions Inactive

lidel added 2 commits September 17, 2025 05:32

style: add truncate to dropdown label

69920e9

prevent long labels from breaking dropdown layout

fix: eslint no-multi-spaces in protocol.ts

18f5229

remove extra space before comment

lidel approved these changes Sep 17, 2025

View reviewed changes

lidel temporarily deployed to Deploy September 17, 2025 03:40 — with GitHub Actions Inactive

lidel added 2 commits September 17, 2025 06:56

test: fix E2E and unit tests after UI changes

7182a0f

- update test selectors for new button titles - handle single toggle button for view switching - clear localStorage in test setup - fix React act() warnings in async tests

Merge remote-tracking branch 'origin/main' into feat/sorting-files

8a26d90

lidel temporarily deployed to Deploy September 17, 2025 05:00 — with GitHub Actions Inactive

lidel merged commit c9251eb into ipfs:main Sep 17, 2025
20 checks passed

lidel changed the title ~~feat: add pinned-first sorting option to files section~~ feat(files): advanced sorting options Sep 17, 2025

alikhere deleted the feat/sorting-files branch September 17, 2025 06:37

ipfs-gui-bot added the released label Sep 17, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat(files): advanced sorting options #2421

feat(files): advanced sorting options #2421

Uh oh!

alikhere commented Sep 6, 2025 •

edited

Loading

Uh oh!

alikhere commented Sep 8, 2025 •

edited

Loading

Uh oh!

lidel left a comment •

edited

Loading

Uh oh!

Uh oh!

alikhere commented Sep 17, 2025 •

edited

Loading

Uh oh!

ipfs-gui-bot commented Sep 17, 2025

Uh oh!

Uh oh!

feat(files): advanced sorting options #2421

feat(files): advanced sorting options #2421

Uh oh!

Conversation

alikhere commented Sep 6, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Features Added

Implementation

Before

After

Uh oh!

alikhere commented Sep 8, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

lidel left a comment • 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!

Uh oh!

alikhere commented Sep 17, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

ipfs-gui-bot commented Sep 17, 2025

Uh oh!

Uh oh!

alikhere commented Sep 6, 2025 •

edited

Loading

alikhere commented Sep 8, 2025 •

edited

Loading

lidel left a comment •

edited

Loading

alikhere commented Sep 17, 2025 •

edited

Loading