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

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

* fix unit tests

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

* fix unit tests

* small styling

* better dot

* lint

---------

Co-authored-by: Alex Tran <alex.tran1502@gmail.com>
This commit is contained in:
Ethan Margaillan 2024-04-05 21:19:26 +02:00 committed by GitHub
parent 939e91f9ed
commit 8f981b6052
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
27 changed files with 1352 additions and 621 deletions

View file

@ -67,10 +67,16 @@ export const videoViewerVolume = persisted<number>('video-viewer-volume', 1, {})
export const isShowDetail = persisted<boolean>('info-opened', false, {});
export interface AlbumViewSettings {
sortBy: string;
sortDesc: boolean;
view: string;
filter: string;
groupBy: string;
groupOrder: string;
sortBy: string;
sortOrder: string;
collapsedGroups: {
// Grouping Option => Array<Group ID>
[group: string]: string[];
};
}
export interface SidebarSettings {
@ -83,6 +89,11 @@ export const sidebarSettings = persisted<SidebarSettings>('sidebar-settings-1',
sharing: true,
});
export enum SortOrder {
Asc = 'asc',
Desc = 'desc',
}
export enum AlbumViewMode {
Cover = 'Cover',
List = 'List',
@ -94,11 +105,29 @@ export enum AlbumFilter {
Shared = 'Shared',
}
export enum AlbumGroupBy {
None = 'None',
Year = 'Year',
Owner = 'Owner',
}
export enum AlbumSortBy {
Title = 'Title',
ItemCount = 'ItemCount',
DateModified = 'DateModified',
DateCreated = 'DateCreated',
MostRecentPhoto = 'MostRecentPhoto',
OldestPhoto = 'OldestPhoto',
}
export const albumViewSettings = persisted<AlbumViewSettings>('album-view-settings', {
sortBy: 'Most recent photo',
sortDesc: true,
view: AlbumViewMode.Cover,
filter: AlbumFilter.All,
groupBy: AlbumGroupBy.Year,
groupOrder: SortOrder.Desc,
sortBy: AlbumSortBy.MostRecentPhoto,
sortOrder: SortOrder.Desc,
collapsedGroups: {},
});
export const showDeleteModal = persisted<boolean>('delete-confirm-dialog', true, {});