Add sort by date in history page

[anurag2787]

Pull Request Type

• Bugfix
• 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

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 #6214 and the feedback we left on that

[Copilot]

Copilot reviewed 5 out of 6 changed files in this pull request and generated 1 comment.

Files not reviewed (1)

• src/renderer/views/History/History.css: Language not supported

Comments suppressed due to low confidence (1)

static/locales/en-US.yaml:53

• There is a trailing whitespace at the end of the 'Latest First' text which should be removed for consistency.

DateNewestHistory: Latest First 

[Copilot]

The getIconForSortPreference function is receiving setHistorySortOrder as its argument; it likely should receive the current sort order (e.g., the value from sortOrder) to determine the correct icon.

Suggested change

	:icon="getIconForSortPreference(setHistorySortOrder)"
	:icon="getIconForSortPreference(sortOrder)"

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

tested how copilot would work on this PR. Please disregard if this is a non issue.

[anurag2787]

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

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

Icon doesnt change like on other pages.

VirtualBoxVM_4KNwAlFBhV.mp4

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

Suggested change

	DateOldestHistory: Oldest First
	DateOldestHistory: Earliest Watched First

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

Suggested change

	DateNewestHistory: Latest First
	DateNewestHistory: Latest Watched First

[anurag2787]

Fixed Icon change like on other pages

12.04.2025_12.46.03_REC.mp4

Also Updated history sort labels

[PikachuEXE]

It works but I wonder why the new translation keys are added to Global not History

[anurag2787]

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

Not quite done reviewing

[kommunarr]

issue (blocking): When setting order to Earliest Watched First and then new history entries are added, they're shown at the start instead of the end, despite them being the latest entries watched. I believe this is because upsertToHistoryCache is not updated to handle non-default sort methods.

[kommunarr]

Suggested change

	useAscendingOrder: HISTORY_SORT_BY_VALUES.DateAddedNewest,
	sortOrder: HISTORY_SORT_BY_VALUES.DateAddedNewest,

suggestion: Update variable name and concomitant uses to better reflect its type (sort type, not boolean).

[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

[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

VirtualBoxVM_bS3GY5q9CD.mp4

[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

VirtualBoxVM_VZJVmscjhk.mp4

[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]

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...