feat(web): enhance ux/ui of the album list page

[Ethan13310]

This PR add some features and fixes to the album list page.

Album Grouping

With this new feature, albums can now be grouped by year or owner (or not grouped at all). This can be very useful to not get lost when having a lot of albums, that even are sometimes similar.

• This works both on "Covers" and "List" views.

• Albums are first grouped, then sorted inside of those groups.
• Group sorting can be either ascending or descending.
• Group by drop-down is located next to the Sort by one. The two buttons on the right are Expand all and Collapse all. They are not displayed when No grouping is selected.

• Groups can be collapsed (saved in the local storage).

Collapse.mp4

Other UI Changes

• Album cards now display the month and year of the photos.
  • Same month and year: Jan 2024
  • Different months, same year: Jan - Mar 2024
  • Different year: Sep 2023 - Feb 2024
• Album cards now display the title over up to 2 lines. If the title is longer, it is cropped with an ellipsis (no change).

• "Edit Album" modal design has been slightly changed.

Quality of Life

Album List

• The context menu now has 4 options: Download, Edit, Share and Delete.

• The context menu can now be displayed by right-clicking on an album card.
• The context menu is now available on the list view (both Edit and Remove buttons have been removed).
• The context menu is now available on the "Sharing" page, with only 1 option: Download.
• The search feature now ignores accents.

Album View

• When one and only one photo is selected, the context menu now displays the option Set as album cover.

Fixes

• Sorting by album title now works properly with any locale.
• High-resolution album thumbnails are no longer loaded, as they did not bring any quality improvements and can even decrease the apparent quality on Chromium-based browsers.
• Context menus cannot overflow vertically anymore.
• When updating an album (edit title, share...), changes are now correctly displayed in the album list.
• On the "Sharing" page, getUserById() is no more called for each album card since this info is already available in AlbumResponseDto.

[alextran1502]

Nice! <3

[alextran1502]

Hello, can you enable the option to let contributors push directly to the PR? I usually update a PR with main when I perform some manual testings with it

[Ethan13310]

Hello, can you enable the option to let contributors push directly to the PR? I usually update a PR with main when I perform some manual testings with it

Hi! It's done

[alextran1502]

Hello, what property do you use to group albums together by year?

Ah I see you are using the oldest asset in an album

[waclaw66]

I would make year/owner labels bit smaller, 2xl 2024 is big enough imho.