feat(web): add a user setting for default album sort order. (#18950)

* Add a user setting for default album sort order.

Add a user setting under "Features" to control the initial sort order
when creating an album. Default to the existing behavior of
"newest first".

* chore: patch openapi

---------

Co-authored-by: Alex <alex.tran1502@gmail.com>

i18n/en.json

@@ -402,6 +402,9 @@
   "album_with_link_access": "Let anyone with the link see photos and people in this album.",
   "albums": "Albums",
   "albums_count": "{count, plural, one {{count, number} Album} other {{count, number} Albums}}",
+  "albums_default_sort_order": "Default album sort order",
+  "albums_default_sort_order_description": "Initial asset sort order when creating new albums.",
+  "albums_feature_description": "Collections of assets that can be shared with other users.",
   "all": "All",
   "all_albums": "All albums",
   "all_people": "All people",

mobile/lib/utils/openapi_patching.dart

@@ -12,6 +12,7 @@ dynamic upgradeDto(dynamic value, String targetType) {
         addDefault(value, 'tags', TagsResponse().toJson());
         addDefault(value, 'sharedLinks', SharedLinksResponse().toJson());
         addDefault(value, 'cast', CastResponse().toJson());
+        addDefault(value, 'albums', {'defaultAssetOrder': 'desc'});
       }
       break;
     case 'ServerConfigDto':

open-api/immich-openapi-specs.json

@@ -8717,6 +8717,34 @@
         ],
         "type": "string"
       },
+      "AlbumsResponse": {
+        "properties": {
+          "defaultAssetOrder": {
+            "allOf": [
+              {
+                "$ref": "#/components/schemas/AssetOrder"
+              }
+            ],
+            "default": "desc"
+          }
+        },
+        "required": [
+          "defaultAssetOrder"
+        ],
+        "type": "object"
+      },
+      "AlbumsUpdate": {
+        "properties": {
+          "defaultAssetOrder": {
+            "allOf": [
+              {
+                "$ref": "#/components/schemas/AssetOrder"
+              }
+            ]
+          }
+        },
+        "type": "object"
+      },
       "AllJobStatusResponseDto": {
         "properties": {
           "backgroundTask": {
@@ -15040,6 +15068,9 @@
       },
       "UserPreferencesResponseDto": {
         "properties": {
+          "albums": {
+            "$ref": "#/components/schemas/AlbumsResponse"
+          },
           "cast": {
             "$ref": "#/components/schemas/CastResponse"
           },
@@ -15072,6 +15103,7 @@
           }
         },
         "required": [
+          "albums",
           "cast",
           "download",
           "emailNotifications",
@@ -15087,6 +15119,9 @@
       },
       "UserPreferencesUpdateDto": {
         "properties": {
+          "albums": {
+            "$ref": "#/components/schemas/AlbumsUpdate"
+          },
           "avatar": {
             "$ref": "#/components/schemas/AvatarUpdate"
           },

open-api/typescript-sdk/src/fetch-client.ts

@@ -129,6 +129,9 @@ export type UserAdminUpdateDto = {
     shouldChangePassword?: boolean;
     storageLabel?: string | null;
 };
+export type AlbumsResponse = {
+    defaultAssetOrder: AssetOrder;
+};
 export type CastResponse = {
     gCastEnabled: boolean;
 };
@@ -168,6 +171,7 @@ export type TagsResponse = {
     sidebarWeb: boolean;
 };
 export type UserPreferencesResponseDto = {
+    albums: AlbumsResponse;
     cast: CastResponse;
     download: DownloadResponse;
     emailNotifications: EmailNotificationsResponse;
@@ -179,6 +183,9 @@ export type UserPreferencesResponseDto = {
     sharedLinks: SharedLinksResponse;
     tags: TagsResponse;
 };
+export type AlbumsUpdate = {
+    defaultAssetOrder?: AssetOrder;
+};
 export type AvatarUpdate = {
     color?: UserAvatarColor;
 };
@@ -221,6 +228,7 @@ export type TagsUpdate = {
     sidebarWeb?: boolean;
 };
 export type UserPreferencesUpdateDto = {
+    albums?: AlbumsUpdate;
     avatar?: AvatarUpdate;
     cast?: CastUpdate;
     download?: DownloadUpdate;
@@ -3749,6 +3757,10 @@ export enum UserStatus {
     Removing = "removing",
     Deleted = "deleted"
 }
+export enum AssetOrder {
+    Asc = "asc",
+    Desc = "desc"
+}
 export enum AssetVisibility {
     Archive = "archive",
     Timeline = "timeline",
@@ -3770,10 +3782,6 @@ export enum AssetTypeEnum {
     Audio = "AUDIO",
     Other = "OTHER"
 }
-export enum AssetOrder {
-    Asc = "asc",
-    Desc = "desc"
-}
 export enum Error {
     Duplicate = "duplicate",
     NoPermission = "no_permission",

server/src/dtos/user-preferences.dto.ts

@@ -1,7 +1,7 @@
 import { ApiProperty } from '@nestjs/swagger';
 import { Type } from 'class-transformer';
 import { IsDateString, IsEnum, IsInt, IsPositive, ValidateNested } from 'class-validator';
-import { UserAvatarColor } from 'src/enum';
+import { AssetOrder, UserAvatarColor } from 'src/enum';
 import { UserPreferences } from 'src/types';
 import { Optional, ValidateBoolean } from 'src/validation';
 
@@ -22,6 +22,12 @@ class RatingsUpdate {
   enabled?: boolean;
 }
 
+class AlbumsUpdate {
+  @IsEnum(AssetOrder)
+  @ApiProperty({ enumName: 'AssetOrder', enum: AssetOrder })
+  defaultAssetOrder?: AssetOrder;
+}
+
 class FoldersUpdate {
   @ValidateBoolean({ optional: true })
   enabled?: boolean;
@@ -91,6 +97,11 @@ class CastUpdate {
 }
 
 export class UserPreferencesUpdateDto {
+  @Optional()
+  @ValidateNested()
+  @Type(() => AlbumsUpdate)
+  albums?: AlbumsUpdate;
+
   @Optional()
   @ValidateNested()
   @Type(() => FoldersUpdate)
@@ -147,6 +158,12 @@ export class UserPreferencesUpdateDto {
   cast?: CastUpdate;
 }
 
+class AlbumsResponse {
+  @IsEnum(AssetOrder)
+  @ApiProperty({ enumName: 'AssetOrder', enum: AssetOrder })
+  defaultAssetOrder: AssetOrder = AssetOrder.DESC;
+}
+
 class RatingsResponse {
   enabled: boolean = false;
 }
@@ -198,6 +215,7 @@ class CastResponse {
 }
 
 export class UserPreferencesResponseDto implements UserPreferences {
+  albums!: AlbumsResponse;
   folders!: FoldersResponse;
   memories!: MemoriesResponse;
   people!: PeopleResponse;

server/src/services/album.service.spec.ts

@@ -1,7 +1,7 @@
 import { BadRequestException } from '@nestjs/common';
 import _ from 'lodash';
 import { BulkIdErrorReason } from 'src/dtos/asset-ids.response.dto';
-import { AlbumUserRole } from 'src/enum';
+import { AlbumUserRole, AssetOrder, UserMetadataKey } from 'src/enum';
 import { AlbumService } from 'src/services/album.service';
 import { albumStub } from 'test/fixtures/album.stub';
 import { authStub } from 'test/fixtures/auth.stub';
@@ -141,6 +141,7 @@ describe(AlbumService.name, () => {
     it('creates album', async () => {
       mocks.album.create.mockResolvedValue(albumStub.empty);
       mocks.user.get.mockResolvedValue(userStub.user1);
+      mocks.user.getMetadata.mockResolvedValue([]);
       mocks.access.asset.checkOwnerAccess.mockResolvedValue(new Set(['123']));
 
       await sut.create(authStub.admin, {
@@ -155,7 +156,7 @@ describe(AlbumService.name, () => {
           ownerId: authStub.admin.user.id,
           albumName: albumStub.empty.albumName,
           description: albumStub.empty.description,
-
+          order: 'desc',
           albumThumbnailAssetId: '123',
         },
         ['123'],
@@ -163,6 +164,50 @@ describe(AlbumService.name, () => {
       );
 
       expect(mocks.user.get).toHaveBeenCalledWith('user-id', {});
+      expect(mocks.user.getMetadata).toHaveBeenCalledWith(authStub.admin.user.id);
+      expect(mocks.access.asset.checkOwnerAccess).toHaveBeenCalledWith(authStub.admin.user.id, new Set(['123']), false);
+      expect(mocks.event.emit).toHaveBeenCalledWith('album.invite', {
+        id: albumStub.empty.id,
+        userId: 'user-id',
+      });
+    });
+
+    it('creates album with assetOrder from user preferences', async () => {
+      mocks.album.create.mockResolvedValue(albumStub.empty);
+      mocks.user.get.mockResolvedValue(userStub.user1);
+      mocks.user.getMetadata.mockResolvedValue([
+        {
+          key: UserMetadataKey.PREFERENCES,
+          value: {
+            albums: {
+              defaultAssetOrder: AssetOrder.ASC,
+            },
+          },
+        },
+      ]);
+      mocks.access.asset.checkOwnerAccess.mockResolvedValue(new Set(['123']));
+
+      await sut.create(authStub.admin, {
+        albumName: 'Empty album',
+        albumUsers: [{ userId: 'user-id', role: AlbumUserRole.EDITOR }],
+        description: '',
+        assetIds: ['123'],
+      });
+
+      expect(mocks.album.create).toHaveBeenCalledWith(
+        {
+          ownerId: authStub.admin.user.id,
+          albumName: albumStub.empty.albumName,
+          description: albumStub.empty.description,
+          order: 'asc',
+          albumThumbnailAssetId: '123',
+        },
+        ['123'],
+        [{ userId: 'user-id', role: AlbumUserRole.EDITOR }],
+      );
+
+      expect(mocks.user.get).toHaveBeenCalledWith('user-id', {});
+      expect(mocks.user.getMetadata).toHaveBeenCalledWith(authStub.admin.user.id);
       expect(mocks.access.asset.checkOwnerAccess).toHaveBeenCalledWith(authStub.admin.user.id, new Set(['123']), false);
       expect(mocks.event.emit).toHaveBeenCalledWith('album.invite', {
         id: albumStub.empty.id,
@@ -185,6 +230,7 @@ describe(AlbumService.name, () => {
     it('should only add assets the user is allowed to access', async () => {
       mocks.user.get.mockResolvedValue(userStub.user1);
       mocks.album.create.mockResolvedValue(albumStub.oneAsset);
+      mocks.user.getMetadata.mockResolvedValue([]);
       mocks.access.asset.checkOwnerAccess.mockResolvedValue(new Set(['asset-1']));
 
       await sut.create(authStub.admin, {
@@ -198,7 +244,7 @@ describe(AlbumService.name, () => {
           ownerId: authStub.admin.user.id,
           albumName: 'Test album',
           description: '',
-
+          order: 'desc',
           albumThumbnailAssetId: 'asset-1',
         },
         ['asset-1'],

server/src/services/album.service.ts

@@ -19,6 +19,7 @@ import { Permission } from 'src/enum';
 import { AlbumAssetCount, AlbumInfoOptions } from 'src/repositories/album.repository';
 import { BaseService } from 'src/services/base.service';
 import { addAssets, removeAssets } from 'src/utils/asset.util';
+import { getPreferences } from 'src/utils/preferences';
 
 @Injectable()
 export class AlbumService extends BaseService {
@@ -106,12 +107,15 @@ export class AlbumService extends BaseService {
     });
     const assetIds = [...allowedAssetIdsSet].map((id) => id);
 
+    const userMetadata = await this.userRepository.getMetadata(auth.user.id);
+
     const album = await this.albumRepository.create(
       {
         ownerId: auth.user.id,
         albumName: dto.albumName,
         description: dto.description,
         albumThumbnailAssetId: assetIds[0] || null,
+        order: getPreferences(userMetadata).albums.defaultAssetOrder,
       },
       assetIds,
       albumUsers,

server/src/types.ts

@@ -1,6 +1,7 @@
 import { SystemConfig } from 'src/config';
 import { VECTOR_EXTENSIONS } from 'src/constants';
 import {
+  AssetOrder,
   AssetType,
   DatabaseSslMode,
   ExifOrientation,
@@ -467,6 +468,9 @@ export type UserMetadataItem<T extends keyof UserMetadata = UserMetadataKey> = {
 };
 
 export interface UserPreferences {
+  albums: {
+    defaultAssetOrder: AssetOrder;
+  };
   folders: {
     enabled: boolean;
     sidebarWeb: boolean;

server/src/utils/preferences.ts

@@ -1,12 +1,15 @@
 import _ from 'lodash';
 import { UserPreferencesUpdateDto } from 'src/dtos/user-preferences.dto';
-import { UserMetadataKey } from 'src/enum';
+import { AssetOrder, UserMetadataKey } from 'src/enum';
 import { DeepPartial, UserMetadataItem, UserPreferences } from 'src/types';
 import { HumanReadableSize } from 'src/utils/bytes';
 import { getKeysDeep } from 'src/utils/misc';
 
 const getDefaultPreferences = (): UserPreferences => {
   return {
+    albums: {
+      defaultAssetOrder: AssetOrder.DESC,
+    },
     folders: {
       enabled: false,
       sidebarWeb: false,

web/src/lib/components/user-settings-page/feature-settings.svelte

@@ -4,14 +4,18 @@
     NotificationType,
   } from '$lib/components/shared-components/notification/notification';
   import SettingAccordion from '$lib/components/shared-components/settings/setting-accordion.svelte';
+  import SettingSelect from '$lib/components/shared-components/settings/setting-select.svelte';
   import SettingSwitch from '$lib/components/shared-components/settings/setting-switch.svelte';
   import { preferences } from '$lib/stores/user.store';
-  import { updateMyPreferences } from '@immich/sdk';
+  import { AssetOrder, updateMyPreferences } from '@immich/sdk';
   import { Button } from '@immich/ui';
   import { t } from 'svelte-i18n';
   import { fade } from 'svelte/transition';
   import { handleError } from '../../utils/handle-error';
 
+  // Albums
+  let defaultAssetOrder = $state($preferences?.albums?.defaultAssetOrder ?? AssetOrder.Desc);
+
   // Folders
   let foldersEnabled = $state($preferences?.folders?.enabled ?? false);
   let foldersSidebar = $state($preferences?.folders?.sidebarWeb ?? false);
@@ -41,6 +45,7 @@
     try {
       const data = await updateMyPreferences({
         userPreferencesUpdateDto: {
+          albums: { defaultAssetOrder },
           folders: { enabled: foldersEnabled, sidebarWeb: foldersSidebar },
           memories: { enabled: memoriesEnabled },
           people: { enabled: peopleEnabled, sidebarWeb: peopleSidebar },
@@ -68,6 +73,20 @@
   <div in:fade={{ duration: 500 }}>
     <form autocomplete="off" {onsubmit}>
       <div class="ms-4 mt-4 flex flex-col">
+        <SettingAccordion key="albums" title={$t('albums')} subtitle={$t('albums_feature_description')}>
+          <div class="ms-4 mt-6">
+            <SettingSelect
+              label={$t('albums_default_sort_order')}
+              desc={$t('albums_default_sort_order_description')}
+              options={[
+                { value: AssetOrder.Asc, text: $t('oldest_first') },
+                { value: AssetOrder.Desc, text: $t('newest_first') },
+              ]}
+              bind:value={defaultAssetOrder}
+            />
+          </div>
+        </SettingAccordion>
+
         <SettingAccordion key="folders" title={$t('folders')} subtitle={$t('folders_feature_description')}>
           <div class="ms-4 mt-6">
             <SettingSwitch title={$t('enable')} bind:checked={foldersEnabled} />

web/src/test-data/factories/preferences-factory.ts

@@ -1,7 +1,10 @@
-import type { UserPreferencesResponseDto } from '@immich/sdk';
+import { AssetOrder, type UserPreferencesResponseDto } from '@immich/sdk';
 import { Sync } from 'factory.ts';
 
 export const preferencesFactory = Sync.makeFactory<UserPreferencesResponseDto>({
+  albums: {
+    defaultAssetOrder: AssetOrder.Desc,
+  },
   cast: {
     gCastEnabled: false,
   },