Add sort by date in history page

[anurag2787]

Pull Request Type

• [ ] Bugfix
• [x] Feature Implementation
• [ ] Documentation
• [ ] Other

Related issue

closes #5595

Description

In this PR i have added sort button in the history page where allowing user can organize their watch history either by Latest First or Oldest First where it will shows the watch history in ascending or descending order

Testing

Icon should change

• Change the sort order using sort dropdown
• Check and verify that the icon updates reflect or not on changing the sort order

Earliest first should not show latest when new entry added

• Set sort order to Earliest Watched First
• Add a new history by watching any new video
• Verify that the new entry appears at the end not at the top

Sorting doesn't change when user uses keywords to filter

• Set a sort order (Any Latest Watched First or Earliest Watched First)
• Enter a search keywords in the search bar
• Verify that the filtered results remains in the same sort order as before the search

Sort order change affects all other windows and new windows and future app instances

• Set a sort order in one window (Any Latest Watched First or Earliest Watched First)
• Open a new window in FreeTube or restart it
• Verify that the selected sort order is preserved in second window or after restarting it.

General regression

• Switch between sort orders and perform searches repeatedly
• Confirm that the UI updates correctly and no unexpected behavior occurs

Demo

Sort By Oldest First

Sort By Latest First

Desktop

• OS: Windows 11
• OS Version: 24H2 (OS Build 26100.3476)
• FreeTube version: 0.23.2

[efb4f5ff-1298-471a-8973-3d47447115dc]

Hi @anurag2787 nice to see a pr from you again. Did you already take a look at https://github.com/FreeTubeApp/FreeTube/pull/6214 and the feedback we left on that

[anurag2787]

In getIconForSortPreference function instead of passing setHistorySortOrder i have passed the value of it sortOrder so that it can determine the correct icon

[anurag2787]

Fixed Icon change like on other pages

https://github.com/user-attachments/assets/aa9d30b3-f4d7-4fd2-89b9-2c962e690bc5

Also Updated history sort labels

[anurag2787]

I have fixed it, the new translation keys now been added to the History instead of Global

[anurag2787]

Fixed the issue of new history not showing according to the sort filter applied

[anurag2787]

Hy, since i have worked on similar feature #7139 where i migrated the playlist sort preference from sessionStorage to Vuex store to persist it across sessions so I'd like to confirm for the history sort preference should i follow same approach and store it in Vuex or prefer to store in sessionStorage instead?

[absidue]

In vuex settings store, that way it will also get remembered across app launches. As a general rule unless there is an extremely good reason, you should not be putting anything in session storage in FreeTube.

As for the sorting itself, I feel like this pull request is a bit over engineered. If we break it down the goal is to implement an option to keep the order the the history is already in (newest to oldest) or have it in the reverse order (oldest to newest). That means that the .sort() call is actually overkill, as you can either use the original array as is or use .toReversed() to get a copy in the reverse order.

The entire sorting could be handled by changing the existing historyCacheSorted computed on the history page, without needing to modify anything in the history store:

historyCacheSorted: function () {
  const historySorted = store.getter.getHistoryCacheSorted

  if (this.historySortOrder === HISTORY_SORT_BY_VALUES.DateAddedOldest) {
    return historySorted.toReversed()
  } else {
    return historySorted
  }
}

[anurag2787]

I’ve simplified the implementation as per the feedback and removed the over engineered sorting logic. Additionally i have stored the user history sort preference in the Vuex settings store ensuring it persists across app launches

[efb4f5ff-1298-471a-8973-3d47447115dc]

Sorting doesnt change when user uses keywords to filter

https://github.com/user-attachments/assets/7c6dddb3-cd7f-41ae-8cf4-de3c9f0238df

[anurag2787]

I have fixed the issue. This was happening because of filterVideosWithQuery has a hardcoded .sort((a, b) => b.timeWatched - a.timeWatched) which overrode the selected sort order.

[efb4f5ff-1298-471a-8973-3d47447115dc]

1. Sort History by Earliest

   2. Open new Window

   3. Go to History page

   4. See that its sorted by Latest

It should be also sorted by Earliest

Its better but not quite the same UX as how other dropdowns behave

https://github.com/user-attachments/assets/ddc11fea-27f5-4a02-b969-e8dd9b1fb6c2

[anurag2787]

I have checked carefully but i am still having trouble in spotting exactly what behavior is different between my dropdown and the expected one could you please elaborate a bit more

[efb4f5ff-1298-471a-8973-3d47447115dc]

@anurag2787 so in the first few seconds of the video the following happens. When sort order changes it automatically also changes in the other window.

When i navigate towards the History page this doesnt happen

[anurag2787]

Thanks for clarifying I see the issue now and have fixed it so that the sort order syncs correctly

[github-actions[bot]]

This PR is stale because it has been open 14 days with no activity. Remove stale label or comment or this will be closed in 14 days.

[efb4f5ff-1298-471a-8973-3d47447115dc]

Apologies for the wait. We will get back to reviewing this as soon as possible

[PikachuEXE]

Need all the test cases in testing section...

• Icon should change
• Earliest first should not show latest when new entry added
• Sorting doesn't change when user uses keywords to filter (I don't even know what this means
• Sort order change affects all other windows and new windows and future app instances

I definitely miss something I dunno what...

[anurag2787]

I have added the testing section with the required test cases as mentioned please review whenever you have time. Thanks!

[github-actions[bot]]

This pull request has conflicts, please resolve those before we can evaluate the pull request.

[github-actions[bot]]

Conflicts have been resolved. A maintainer will review the pull request shortly.

[anurag2787]

I have accidentally pushed yarn.lock file in my commit and am now facing some difficulties reverting it back to the original state could you please help me to resolve this

[PikachuEXE]

Reversed