Merge branch 'main' of github.com:immich-app/immich into dev/smart-album

2023-08-11 11:48:24 -05:00 · 2023-08-11 11:48:24 -05:00 · 3c3de8b2af
commit 3c3de8b2af
parent fa8ce261d8 5cd13227ad
49 changed files with 1035 additions and 868 deletions
--- a/cli/src/api/open-api/api.ts
+++ b/cli/src/api/open-api/api.ts
@ -216,6 +216,18 @@ export interface AlbumResponseDto {
     * @memberof AlbumResponseDto
     */
    'description': string;
+    /**
+     * 
+     * @type {string}
+     * @memberof AlbumResponseDto
+     */
+    'endDate'?: string;
+    /**
+     * 
+     * @type {boolean}
+     * @memberof AlbumResponseDto
+     */
+    'hasSharedLink': boolean;
    /**
     * 
     * @type {string}
@ -252,6 +264,12 @@ export interface AlbumResponseDto {
     * @memberof AlbumResponseDto
     */
    'sharedUsers': Array<UserResponseDto>;
+    /**
+     * 
+     * @type {string}
+     * @memberof AlbumResponseDto
+     */
+    'startDate'?: string;
    /**
     * 
     * @type {string}
@ -3899,11 +3917,12 @@ export const AlbumApiAxiosParamCreator = function (configuration?: Configuration
        /**
         * 
         * @param {string} id 
+         * @param {boolean} [withoutAssets] 
         * @param {string} [key] 
         * @param {*} [options] Override http request option.
         * @throws {RequiredError}
         */
-        getAlbumInfo: async (id: string, key?: string, options: AxiosRequestConfig = {}): Promise<RequestArgs> => {
+        getAlbumInfo: async (id: string, withoutAssets?: boolean, key?: string, options: AxiosRequestConfig = {}): Promise<RequestArgs> => {
            // verify required parameter 'id' is not null or undefined
            assertParamExists('getAlbumInfo', 'id', id)
            const localVarPath = `/album/{id}`
@ -3928,6 +3947,10 @@ export const AlbumApiAxiosParamCreator = function (configuration?: Configuration
            // http bearer authentication required
            await setBearerAuthToObject(localVarHeaderParameter, configuration)

+            if (withoutAssets !== undefined) {
+                localVarQueryParameter['withoutAssets'] = withoutAssets;
+            }
+
            if (key !== undefined) {
                localVarQueryParameter['key'] = key;
            }
@ -4198,12 +4221,13 @@ export const AlbumApiFp = function(configuration?: Configuration) {
        /**
         * 
         * @param {string} id 
+         * @param {boolean} [withoutAssets] 
         * @param {string} [key] 
         * @param {*} [options] Override http request option.
         * @throws {RequiredError}
         */
-        async getAlbumInfo(id: string, key?: string, options?: AxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise<AlbumResponseDto>> {
-            const localVarAxiosArgs = await localVarAxiosParamCreator.getAlbumInfo(id, key, options);
+        async getAlbumInfo(id: string, withoutAssets?: boolean, key?: string, options?: AxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise<AlbumResponseDto>> {
+            const localVarAxiosArgs = await localVarAxiosParamCreator.getAlbumInfo(id, withoutAssets, key, options);
            return createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration);
        },
        /**
@ -4311,7 +4335,7 @@ export const AlbumApiFactory = function (configuration?: Configuration, basePath
         * @throws {RequiredError}
         */
        getAlbumInfo(requestParameters: AlbumApiGetAlbumInfoRequest, options?: AxiosRequestConfig): AxiosPromise<AlbumResponseDto> {
-            return localVarFp.getAlbumInfo(requestParameters.id, requestParameters.key, options).then((request) => request(axios, basePath));
+            return localVarFp.getAlbumInfo(requestParameters.id, requestParameters.withoutAssets, requestParameters.key, options).then((request) => request(axios, basePath));
        },
        /**
         * 
@ -4442,6 +4466,13 @@ export interface AlbumApiGetAlbumInfoRequest {
     */
    readonly id: string

+    /**
+     * 
+     * @type {boolean}
+     * @memberof AlbumApiGetAlbumInfo
+     */
+    readonly withoutAssets?: boolean
+
    /**
     * 
     * @type {string}
@ -4603,7 +4634,7 @@ export class AlbumApi extends BaseAPI {
     * @memberof AlbumApi
     */
    public getAlbumInfo(requestParameters: AlbumApiGetAlbumInfoRequest, options?: AxiosRequestConfig) {
-        return AlbumApiFp(this.configuration).getAlbumInfo(requestParameters.id, requestParameters.key, options).then((request) => request(this.axios, this.basePath));
+        return AlbumApiFp(this.configuration).getAlbumInfo(requestParameters.id, requestParameters.withoutAssets, requestParameters.key, options).then((request) => request(this.axios, this.basePath));
    }

    /**
--- a/docker/example.env
+++ b/docker/example.env
@ -1,116 +1,19 @@
-###################################################################################
-# Database
-###################################################################################
+# You can find documentation for all the supported env variables at https://immich.app/docs/install/environment-variables

-# NOTE: The following four database variables support Docker secrets by adding a *_FILE suffix to the variable name
-# See the docker-compose documentation on secrets for additional details: https://docs.docker.com/compose/compose-file/compose-file-v3/#secrets
+# The location where your uploaded files are stored
+UPLOAD_LOCATION=./library
+
+# The Immich version to use. You can pin this to a specific version like "v1.71.0"
+IMMICH_VERSION=release
+
+# Connection secrets for postgres and typesense. You should change these to random passwords
+TYPESENSE_API_KEY=some-random-text
+DB_PASSWORD=postgres
+
+# The values below this line do not need to be changed
+###################################################################################
 DB_HOSTNAME=immich_postgres
 DB_USERNAME=postgres
-DB_PASSWORD=postgres
 DB_DATABASE_NAME=immich

-# Optional Database settings:
-# DB_PORT=5432
-
-###################################################################################
-# Redis
-###################################################################################
-
 REDIS_HOSTNAME=immich_redis
-
-# REDIS_URL will be used to pass custom options to ioredis.
-# Example for Sentinel
-# {"sentinels":[{"host":"redis-sentinel-node-0","port":26379},{"host":"redis-sentinel-node-1","port":26379},{"host":"redis-sentinel-node-2","port":26379}],"name":"redis-sentinel"}
-# REDIS_URL=ioredis://eyJzZW50aW5lbHMiOlt7Imhvc3QiOiJyZWRpcy1zZW50aW5lbDEiLCJwb3J0IjoyNjM3OX0seyJob3N0IjoicmVkaXMtc2VudGluZWwyIiwicG9ydCI6MjYzNzl9XSwibmFtZSI6Im15bWFzdGVyIn0=
-
-# Optional Redis settings:
-
-# Note: these parameters are not automatically passed to the Redis Container
-# to do so, please edit the docker-compose.yml file as well. Redis is not configured
-# via environment variables, only redis.conf or the command line
-
-# REDIS_PORT=6379
-# REDIS_DBINDEX=0
-# REDIS_USERNAME=
-# REDIS_PASSWORD=
-# REDIS_SOCKET=
-
-###################################################################################
-# Upload File Location
-#
-# This is the location where uploaded files are stored.
-###################################################################################
-
-UPLOAD_LOCATION=absolute_location_on_your_machine_where_you_want_to_store_the_backup
-
-
-###################################################################################
-# Typesense
-###################################################################################
-TYPESENSE_API_KEY=some-random-text
-# TYPESENSE_ENABLED=false
-# TYPESENSE_URL uses base64 encoding for the nodes json.
-# Example JSON that was used:
-# [
-#      { "host": "typesense-1.example.net", "port": "443", "protocol": "https" },
-#      { "host": "typesense-2.example.net", "port": "443", "protocol": "https" },
-#      { "host": "typesense-3.example.net", "port": "443", "protocol": "https" },
-# ]
-# TYPESENSE_URL=ha://WwogIHsgImhvc3QiOiAidHlwZXNlbnNlLTEuZXhhbXBsZS5uZXQiLCAicG9ydCI6ICI0NDMiLCAicHJvdG9jb2wiOiAiaHR0cHMiIH0sCiAgeyAiaG9zdCI6ICJ0eXBlc2Vuc2UtMi5leGFtcGxlLm5ldCIsICJwb3J0IjogIjQ0MyIsICJwcm90b2NvbCI6ICJodHRwcyIgfSwKICB7ICJob3N0IjogInR5cGVzZW5zZS0zLmV4YW1wbGUubmV0IiwgInBvcnQiOiAiNDQzIiwgInByb3RvY29sIjogImh0dHBzIiB9Cl0=
-
-###################################################################################
-# Reverse Geocoding
-#
-# Reverse geocoding is done locally which has a small impact on memory usage
-# This memory usage can be altered by changing the REVERSE_GEOCODING_PRECISION variable
-# This ranges from 0-3 with 3 being the most precise
-# 3 - Cities > 500 population: ~200MB RAM
-# 2 - Cities > 1000 population: ~150MB RAM
-# 1 - Cities > 5000 population: ~80MB RAM
-# 0 - Cities > 15000 population: ~40MB RAM
-####################################################################################
-
-# DISABLE_REVERSE_GEOCODING=false
-# REVERSE_GEOCODING_PRECISION=3
-
-####################################################################################
-# WEB - Optional
-#
-# Custom message on the login page, should be written in HTML form.
-# For example:
-# PUBLIC_LOGIN_PAGE_MESSAGE="This is a demo instance of Immich.<br><br>Email: <i>demo@demo.de</i><br>Password: <i>demo</i>"
-####################################################################################
-
-PUBLIC_LOGIN_PAGE_MESSAGE=
-
-####################################################################################
-# Alternative Service Addresses - Optional
-#
-# This is an advanced feature for users who may be running their immich services on different hosts.
-# It will not change which address or port that services bind to within their containers, but it will change where other services look for their peers.
-# Note: immich-microservices is bound to 3002, but no references are made
-####################################################################################
-
-IMMICH_WEB_URL=http://immich-web:3000
-IMMICH_SERVER_URL=http://immich-server:3001
-IMMICH_MACHINE_LEARNING_URL=http://immich-machine-learning:3003
-
-####################################################################################
-# Alternative API's External Address - Optional
-#
-# This is an advanced feature used to control the public server endpoint returned to clients during Well-known discovery.
-# You should only use this if you want mobile apps to access the immich API over a custom URL. Do not include trailing slash.
-# NOTE: At this time, the web app will not be affected by this setting and will continue to use the relative path: /api
-# Examples: http://localhost:3001, http://immich-api.example.com, etc
-####################################################################################
-
-#IMMICH_API_URL_EXTERNAL=http://localhost:3001
-
-###################################################################################
-# Immich Version - Optional
-#
-# This allows all immich docker images to be pinned to a specific version. By default,
-# the version is "release" but could be a specific version, like "v1.59.0".
-###################################################################################
-
-#IMMICH_VERSION=
--- a/mobile/openapi/doc/AlbumApi.md
+++ b/mobile/openapi/doc/AlbumApi.md
@ -298,7 +298,7 @@ This endpoint does not need any parameter.
 [[Back to top]](#) [[Back to API list]](../README.md#documentation-for-api-endpoints) [[Back to Model list]](../README.md#documentation-for-models) [[Back to README]](../README.md)

 # **getAlbumInfo**
-> AlbumResponseDto getAlbumInfo(id, key)
+> AlbumResponseDto getAlbumInfo(id, withoutAssets, key)



@ -322,10 +322,11 @@ import 'package:openapi/api.dart';

 final api_instance = AlbumApi();
 final id = 38400000-8cf0-11bd-b23e-10b96e4ef00d; // String | 
+final withoutAssets = true; // bool | 
 final key = key_example; // String | 

 try {
-    final result = api_instance.getAlbumInfo(id, key);
+    final result = api_instance.getAlbumInfo(id, withoutAssets, key);
    print(result);
 } catch (e) {
    print('Exception when calling AlbumApi->getAlbumInfo: $e\n');
@ -337,6 +338,7 @@ try {
 Name | Type | Description  | Notes
 ------------- | ------------- | ------------- | -------------
 **id** | **String**|  | 
+ **withoutAssets** | **bool**|  | [optional] 
 **key** | **String**|  | [optional] 

 ### Return type
--- a/mobile/openapi/doc/AlbumResponseDto.md
+++ b/mobile/openapi/doc/AlbumResponseDto.md
@ -14,12 +14,15 @@ Name | Type | Description | Notes
 **assets** | [**List<AssetResponseDto>**](AssetResponseDto.md) |  | [default to const []]
 **createdAt** | [**DateTime**](DateTime.md) |  | 
 **description** | **String** |  | 
+**endDate** | [**DateTime**](DateTime.md) |  | [optional] 
+**hasSharedLink** | **bool** |  | 
 **id** | **String** |  | 
 **lastModifiedAssetTimestamp** | [**DateTime**](DateTime.md) |  | [optional] 
 **owner** | [**UserResponseDto**](UserResponseDto.md) |  | 
 **ownerId** | **String** |  | 
 **shared** | **bool** |  | 
 **sharedUsers** | [**List<UserResponseDto>**](UserResponseDto.md) |  | [default to const []]
+**startDate** | [**DateTime**](DateTime.md) |  | [optional] 
 **updatedAt** | [**DateTime**](DateTime.md) |  | 

 [[Back to Model list]](../README.md#documentation-for-models) [[Back to API list]](../README.md#documentation-for-api-endpoints) [[Back to README]](../README.md)
--- a/mobile/openapi/lib/api/album_api.dart
+++ b/mobile/openapi/lib/api/album_api.dart
@ -264,8 +264,10 @@ class AlbumApi {
  ///
  /// * [String] id (required):
  ///
+  /// * [bool] withoutAssets:
+  ///
  /// * [String] key:
-  Future<Response> getAlbumInfoWithHttpInfo(String id, { String? key, }) async {
+  Future<Response> getAlbumInfoWithHttpInfo(String id, { bool? withoutAssets, String? key, }) async {
    // ignore: prefer_const_declarations
    final path = r'/album/{id}'
      .replaceAll('{id}', id);
@ -277,6 +279,9 @@ class AlbumApi {
    final headerParams = <String, String>{};
    final formParams = <String, String>{};

+    if (withoutAssets != null) {
+      queryParams.addAll(_queryParams('', 'withoutAssets', withoutAssets));
+    }
    if (key != null) {
      queryParams.addAll(_queryParams('', 'key', key));
    }
@ -299,9 +304,11 @@ class AlbumApi {
  ///
  /// * [String] id (required):
  ///
+  /// * [bool] withoutAssets:
+  ///
  /// * [String] key:
-  Future<AlbumResponseDto?> getAlbumInfo(String id, { String? key, }) async {
-    final response = await getAlbumInfoWithHttpInfo(id,  key: key, );
+  Future<AlbumResponseDto?> getAlbumInfo(String id, { bool? withoutAssets, String? key, }) async {
+    final response = await getAlbumInfoWithHttpInfo(id,  withoutAssets: withoutAssets, key: key, );
    if (response.statusCode >= HttpStatus.badRequest) {
      throw ApiException(response.statusCode, await _decodeBodyBytes(response));
    }
--- a/mobile/openapi/lib/model/album_response_dto.dart
+++ b/mobile/openapi/lib/model/album_response_dto.dart
@ -19,12 +19,15 @@ class AlbumResponseDto {
    this.assets = const [],
    required this.createdAt,
    required this.description,
+    this.endDate,
+    required this.hasSharedLink,
    required this.id,
    this.lastModifiedAssetTimestamp,
    required this.owner,
    required this.ownerId,
    required this.shared,
    this.sharedUsers = const [],
+    this.startDate,
    required this.updatedAt,
  });

@ -40,6 +43,16 @@ class AlbumResponseDto {

  String description;

+  ///
+  /// Please note: This property should have been non-nullable! Since the specification file
+  /// does not include a default value (using the "default:" property), however, the generated
+  /// source code must fall back to having a nullable type.
+  /// Consider adding a "default:" property in the specification file to hide this note.
+  ///
+  DateTime? endDate;
+
+  bool hasSharedLink;
+
  String id;

  ///
@ -58,6 +71,14 @@ class AlbumResponseDto {

  List<UserResponseDto> sharedUsers;

+  ///
+  /// Please note: This property should have been non-nullable! Since the specification file
+  /// does not include a default value (using the "default:" property), however, the generated
+  /// source code must fall back to having a nullable type.
+  /// Consider adding a "default:" property in the specification file to hide this note.
+  ///
+  DateTime? startDate;
+
  DateTime updatedAt;

  @override
@ -68,12 +89,15 @@ class AlbumResponseDto {
     other.assets == assets &&
     other.createdAt == createdAt &&
     other.description == description &&
+     other.endDate == endDate &&
+     other.hasSharedLink == hasSharedLink &&
     other.id == id &&
     other.lastModifiedAssetTimestamp == lastModifiedAssetTimestamp &&
     other.owner == owner &&
     other.ownerId == ownerId &&
     other.shared == shared &&
     other.sharedUsers == sharedUsers &&
+     other.startDate == startDate &&
     other.updatedAt == updatedAt;

  @override
@ -85,16 +109,19 @@ class AlbumResponseDto {
    (assets.hashCode) +
    (createdAt.hashCode) +
    (description.hashCode) +
+    (endDate == null ? 0 : endDate!.hashCode) +
+    (hasSharedLink.hashCode) +
    (id.hashCode) +
    (lastModifiedAssetTimestamp == null ? 0 : lastModifiedAssetTimestamp!.hashCode) +
    (owner.hashCode) +
    (ownerId.hashCode) +
    (shared.hashCode) +
    (sharedUsers.hashCode) +
+    (startDate == null ? 0 : startDate!.hashCode) +
    (updatedAt.hashCode);

  @override
-  String toString() => 'AlbumResponseDto[albumName=$albumName, albumThumbnailAssetId=$albumThumbnailAssetId, assetCount=$assetCount, assets=$assets, createdAt=$createdAt, description=$description, id=$id, lastModifiedAssetTimestamp=$lastModifiedAssetTimestamp, owner=$owner, ownerId=$ownerId, shared=$shared, sharedUsers=$sharedUsers, updatedAt=$updatedAt]';
+  String toString() => 'AlbumResponseDto[albumName=$albumName, albumThumbnailAssetId=$albumThumbnailAssetId, assetCount=$assetCount, assets=$assets, createdAt=$createdAt, description=$description, endDate=$endDate, hasSharedLink=$hasSharedLink, id=$id, lastModifiedAssetTimestamp=$lastModifiedAssetTimestamp, owner=$owner, ownerId=$ownerId, shared=$shared, sharedUsers=$sharedUsers, startDate=$startDate, updatedAt=$updatedAt]';

  Map<String, dynamic> toJson() {
    final json = <String, dynamic>{};
@ -108,6 +135,12 @@ class AlbumResponseDto {
      json[r'assets'] = this.assets;
      json[r'createdAt'] = this.createdAt.toUtc().toIso8601String();
      json[r'description'] = this.description;
+    if (this.endDate != null) {
+      json[r'endDate'] = this.endDate!.toUtc().toIso8601String();
+    } else {
+    //  json[r'endDate'] = null;
+    }
+      json[r'hasSharedLink'] = this.hasSharedLink;
      json[r'id'] = this.id;
    if (this.lastModifiedAssetTimestamp != null) {
      json[r'lastModifiedAssetTimestamp'] = this.lastModifiedAssetTimestamp!.toUtc().toIso8601String();
@ -118,6 +151,11 @@ class AlbumResponseDto {
      json[r'ownerId'] = this.ownerId;
      json[r'shared'] = this.shared;
      json[r'sharedUsers'] = this.sharedUsers;
+    if (this.startDate != null) {
+      json[r'startDate'] = this.startDate!.toUtc().toIso8601String();
+    } else {
+    //  json[r'startDate'] = null;
+    }
      json[r'updatedAt'] = this.updatedAt.toUtc().toIso8601String();
    return json;
  }
@ -136,12 +174,15 @@ class AlbumResponseDto {
        assets: AssetResponseDto.listFromJson(json[r'assets']),
        createdAt: mapDateTime(json, r'createdAt', '')!,
        description: mapValueOfType<String>(json, r'description')!,
+        endDate: mapDateTime(json, r'endDate', ''),
+        hasSharedLink: mapValueOfType<bool>(json, r'hasSharedLink')!,
        id: mapValueOfType<String>(json, r'id')!,
        lastModifiedAssetTimestamp: mapDateTime(json, r'lastModifiedAssetTimestamp', ''),
        owner: UserResponseDto.fromJson(json[r'owner'])!,
        ownerId: mapValueOfType<String>(json, r'ownerId')!,
        shared: mapValueOfType<bool>(json, r'shared')!,
        sharedUsers: UserResponseDto.listFromJson(json[r'sharedUsers']),
+        startDate: mapDateTime(json, r'startDate', ''),
        updatedAt: mapDateTime(json, r'updatedAt', '')!,
      );
    }
@ -196,6 +237,7 @@ class AlbumResponseDto {
    'assets',
    'createdAt',
    'description',
+    'hasSharedLink',
    'id',
    'owner',
    'ownerId',
--- a/mobile/openapi/test/album_api_test.dart
+++ b/mobile/openapi/test/album_api_test.dart
@ -42,7 +42,7 @@ void main() {
      // TODO
    });

-    //Future<AlbumResponseDto> getAlbumInfo(String id, { String key }) async
+    //Future<AlbumResponseDto> getAlbumInfo(String id, { bool withoutAssets, String key }) async
    test('test getAlbumInfo', () async {
      // TODO
    });
--- a/mobile/openapi/test/album_response_dto_test.dart
+++ b/mobile/openapi/test/album_response_dto_test.dart
@ -46,6 +46,16 @@ void main() {
      // TODO
    });

+    // DateTime endDate
+    test('to test the property `endDate`', () async {
+      // TODO
+    });
+
+    // bool hasSharedLink
+    test('to test the property `hasSharedLink`', () async {
+      // TODO
+    });
+
    // String id
    test('to test the property `id`', () async {
      // TODO
@ -76,6 +86,11 @@ void main() {
      // TODO
    });

+    // DateTime startDate
+    test('to test the property `startDate`', () async {
+      // TODO
+    });
+
    // DateTime updatedAt
    test('to test the property `updatedAt`', () async {
      // TODO
--- a/server/immich-openapi-specs.json
+++ b/server/immich-openapi-specs.json
@ -173,6 +173,14 @@
              "type": "string"
            }
          },
+          {
+            "name": "withoutAssets",
+            "required": false,
+            "in": "query",
+            "schema": {
+              "type": "boolean"
+            }
+          },
          {
            "name": "key",
            "required": false,
@ -4931,6 +4939,13 @@
          "description": {
            "type": "string"
          },
+          "endDate": {
+            "format": "date-time",
+            "type": "string"
+          },
+          "hasSharedLink": {
+            "type": "boolean"
+          },
          "id": {
            "type": "string"
          },
@ -4959,6 +4974,10 @@
            },
            "type": "array"
          },
+          "startDate": {
+            "format": "date-time",
+            "type": "string"
+          },
          "updatedAt": {
            "format": "date-time",
            "type": "string"
@ -4975,6 +4994,7 @@
          "albumThumbnailAssetId",
          "shared",
          "sharedUsers",
+          "hasSharedLink",
          "assets",
          "owner",
          "rules"
--- a/server/src/domain/album/album-response.dto.ts
+++ b/server/src/domain/album/album-response.dto.ts
@ -14,15 +14,18 @@ export class AlbumResponseDto {
  albumThumbnailAssetId!: string | null;
  shared!: boolean;
  sharedUsers!: UserResponseDto[];
+  hasSharedLink!: boolean;
  assets!: AssetResponseDto[];
  owner!: UserResponseDto;
  @ApiProperty({ type: 'integer' })
  assetCount!: number;
  lastModifiedAssetTimestamp?: Date;
+  startDate?: Date;
+  endDate?: Date;
  rules!: RuleResponseDto[];
 }

-const _map = (entity: AlbumEntity, withAssets: boolean): AlbumResponseDto => {
+export const mapAlbum = (entity: AlbumEntity, withAssets: boolean): AlbumResponseDto => {
  const sharedUsers: UserResponseDto[] = [];

  entity.sharedUsers?.forEach((user) => {
@ -30,6 +33,11 @@ const _map = (entity: AlbumEntity, withAssets: boolean): AlbumResponseDto => {
    sharedUsers.push(userDto);
  });

+  const assets = entity.assets || [];
+
+  const hasSharedLink = entity.sharedLinks?.length > 0;
+  const hasSharedUser = sharedUsers.length > 0;
+
  return {
    albumName: entity.albumName,
    description: entity.description,
@ -40,15 +48,18 @@ const _map = (entity: AlbumEntity, withAssets: boolean): AlbumResponseDto => {
    ownerId: entity.ownerId,
    owner: mapUser(entity.owner),
    sharedUsers,
-    shared: sharedUsers.length > 0 || entity.sharedLinks?.length > 0,
-    assets: withAssets ? entity.assets?.map((asset) => mapAsset(asset)) || [] : [],
+    shared: hasSharedUser || hasSharedLink,
+    hasSharedLink,
+    startDate: assets.at(0)?.fileCreatedAt || undefined,
+    endDate: assets.at(-1)?.fileCreatedAt || undefined,
+    assets: (withAssets ? assets : []).map((asset) => mapAsset(asset)),
    assetCount: entity.assets?.length || 0,
    rules: entity.rules?.map((rule) => ({ key: rule.key, value: rule.value, ownerId: rule.ownerId })) || [],
  };
 };

-export const mapAlbum = (entity: AlbumEntity) => _map(entity, true);
-export const mapAlbumExcludeAssetInfo = (entity: AlbumEntity) => _map(entity, false);
+export const mapAlbumWithAssets = (entity: AlbumEntity) => mapAlbum(entity, true);
+export const mapAlbumWithoutAssets = (entity: AlbumEntity) => mapAlbum(entity, false);

 export class AlbumCountResponseDto {
  @ApiProperty({ type: 'integer' })
--- a/server/src/domain/album/album.service.spec.ts
+++ b/server/src/domain/album/album.service.spec.ts
@ -181,6 +181,9 @@ describe(AlbumService.name, () => {
        ownerId: 'admin_id',
        shared: false,
        sharedUsers: [],
+        startDate: undefined,
+        endDate: undefined,
+        hasSharedLink: false,
        updatedAt: expect.anything(),
      });

@ -427,7 +430,7 @@ describe(AlbumService.name, () => {
      albumMock.getById.mockResolvedValue(albumStub.oneAsset);
      accessMock.album.hasOwnerAccess.mockResolvedValue(true);

-      await sut.get(authStub.admin, albumStub.oneAsset.id);
+      await sut.get(authStub.admin, albumStub.oneAsset.id, {});

      expect(albumMock.getById).toHaveBeenCalledWith(albumStub.oneAsset.id);
      expect(accessMock.album.hasOwnerAccess).toHaveBeenCalledWith(authStub.admin.id, albumStub.oneAsset.id);
@ -437,7 +440,7 @@ describe(AlbumService.name, () => {
      albumMock.getById.mockResolvedValue(albumStub.oneAsset);
      accessMock.album.hasSharedLinkAccess.mockResolvedValue(true);

-      await sut.get(authStub.adminSharedLink, 'album-123');
+      await sut.get(authStub.adminSharedLink, 'album-123', {});

      expect(albumMock.getById).toHaveBeenCalledWith('album-123');
      expect(accessMock.album.hasSharedLinkAccess).toHaveBeenCalledWith(
@ -450,7 +453,7 @@ describe(AlbumService.name, () => {
      albumMock.getById.mockResolvedValue(albumStub.oneAsset);
      accessMock.album.hasSharedAlbumAccess.mockResolvedValue(true);

-      await sut.get(authStub.user1, 'album-123');
+      await sut.get(authStub.user1, 'album-123', {});

      expect(albumMock.getById).toHaveBeenCalledWith('album-123');
      expect(accessMock.album.hasSharedAlbumAccess).toHaveBeenCalledWith(authStub.user1.id, 'album-123');
@ -460,7 +463,7 @@ describe(AlbumService.name, () => {
      accessMock.album.hasOwnerAccess.mockResolvedValue(false);
      accessMock.album.hasSharedAlbumAccess.mockResolvedValue(false);

-      await expect(sut.get(authStub.admin, 'album-123')).rejects.toBeInstanceOf(BadRequestException);
+      await expect(sut.get(authStub.admin, 'album-123', {})).rejects.toBeInstanceOf(BadRequestException);

      expect(accessMock.album.hasOwnerAccess).toHaveBeenCalledWith(authStub.admin.id, 'album-123');
      expect(accessMock.album.hasSharedAlbumAccess).toHaveBeenCalledWith(authStub.admin.id, 'album-123');
--- a/server/src/domain/album/album.service.ts
+++ b/server/src/domain/album/album.service.ts
@ -1,13 +1,19 @@
 import { AlbumEntity, AssetEntity, RuleEntity, UserEntity } from '@app/infra/entities';
 import { BadRequestException, Inject, Injectable } from '@nestjs/common';
 import { AccessCore, IAccessRepository, Permission } from '../access';
-import { BulkIdErrorReason, BulkIdResponseDto, BulkIdsDto, IAssetRepository, mapAsset } from '../asset';
+import { BulkIdErrorReason, BulkIdResponseDto, BulkIdsDto, IAssetRepository } from '../asset';
 import { AuthUserDto } from '../auth';
 import { IJobRepository, JobName } from '../job';
 import { IUserRepository } from '../user';
-import { AlbumCountResponseDto, AlbumResponseDto, mapAlbum } from './album-response.dto';
+import {
+  AlbumCountResponseDto,
+  AlbumResponseDto,
+  mapAlbum,
+  mapAlbumWithAssets,
+  mapAlbumWithoutAssets,
+} from './album-response.dto';
 import { IAlbumRepository } from './album.repository';
-import { AddUsersDto, CreateAlbumDto, CreateRuleDto, GetAlbumsDto, UpdateAlbumDto } from './dto';
+import { AddUsersDto, AlbumInfoDto, CreateAlbumDto, CreateRuleDto, GetAlbumsDto, UpdateAlbumDto } from './dto';
 import { IRuleRepository } from './rule.repository';

@Injectable()
@ -68,21 +74,19 @@ export class AlbumService {
      albums.map(async (album) => {
        const lastModifiedAsset = await this.assetRepository.getLastUpdatedAssetForAlbumId(album.id);
        return {
-          ...album,
-          assets: album?.assets?.map(mapAsset),
-          sharedLinks: undefined, // Don't return shared links
-          shared: album.sharedLinks?.length > 0 || album.sharedUsers?.length > 0,
+          ...mapAlbumWithoutAssets(album),
+          sharedLinks: undefined,
          assetCount: albumsAssetCountObj[album.id],
          lastModifiedAssetTimestamp: lastModifiedAsset?.fileModifiedAt,
-        } as AlbumResponseDto;
+        };
      }),
    );
  }

-  async get(authUser: AuthUserDto, id: string) {
+  async get(authUser: AuthUserDto, id: string, dto: AlbumInfoDto) {
    await this.access.requirePermission(authUser, Permission.ALBUM_READ, id);
    await this.albumRepository.updateThumbnails();
-    return mapAlbum(await this.findOrFail(id));
+    return mapAlbum(await this.findOrFail(id), !dto.withoutAssets);
  }

  async create(authUser: AuthUserDto, dto: CreateAlbumDto): Promise<AlbumResponseDto> {
@ -104,7 +108,7 @@ export class AlbumService {
    });

    await this.jobRepository.queue({ name: JobName.SEARCH_INDEX_ALBUM, data: { ids: [album.id] } });
-    return mapAlbum(album);
+    return mapAlbumWithAssets(album);
  }

  async update(authUser: AuthUserDto, id: string, dto: UpdateAlbumDto): Promise<AlbumResponseDto> {
@ -128,7 +132,7 @@ export class AlbumService {

    await this.jobRepository.queue({ name: JobName.SEARCH_INDEX_ALBUM, data: { ids: [updatedAlbum.id] } });

-    return mapAlbum(updatedAlbum);
+    return mapAlbumWithAssets(updatedAlbum);
  }

  async delete(authUser: AuthUserDto, id: string): Promise<void> {
@ -221,7 +225,7 @@ export class AlbumService {
    return results;
  }

-  async addUsers(authUser: AuthUserDto, id: string, dto: AddUsersDto) {
+  async addUsers(authUser: AuthUserDto, id: string, dto: AddUsersDto): Promise<AlbumResponseDto> {
    await this.access.requirePermission(authUser, Permission.ALBUM_SHARE, id);

    const album = await this.findOrFail(id);
@ -246,7 +250,7 @@ export class AlbumService {
        updatedAt: new Date(),
        sharedUsers: album.sharedUsers,
      })
-      .then(mapAlbum);
+      .then(mapAlbumWithAssets);
  }

  async removeUser(authUser: AuthUserDto, id: string, userId: string | 'me'): Promise<void> {
--- a/server/src/domain/album/dto/album.dto.ts
+++ b/server/src/domain/album/dto/album.dto.ts
@ -0,0 +1,10 @@
+import { Transform } from 'class-transformer';
+import { IsBoolean, IsOptional } from 'class-validator';
+import { toBoolean } from '../../domain.util';
+
+export class AlbumInfoDto {
+  @IsOptional()
+  @IsBoolean()
+  @Transform(toBoolean)
+  withoutAssets?: boolean;
+}
--- a/server/src/domain/album/dto/index.ts
+++ b/server/src/domain/album/dto/index.ts
@ -1,5 +1,6 @@
 export * from './album-add-users.dto';
 export * from './album-create.dto';
 export * from './album-update.dto';
+export * from './album.dto';
 export * from './get-albums.dto';
 export * from './rule.dto';
--- a/server/src/domain/asset/asset.repository.ts
+++ b/server/src/domain/asset/asset.repository.ts
@ -58,6 +58,7 @@ export interface TimeBucketOptions {
  isFavorite?: boolean;
  albumId?: string;
  personId?: string;
+  userId?: string;
 }

 export interface TimeBucketItem {
@ -82,6 +83,6 @@ export interface IAssetRepository {
  findLivePhotoMatch(options: LivePhotoSearchOptions): Promise<AssetEntity | null>;
  getMapMarkers(ownerId: string, options?: MapMarkerSearchOptions): Promise<MapMarker[]>;
  getStatistics(ownerId: string, options: AssetStatsOptions): Promise<AssetStats>;
-  getTimeBuckets(userId: string, options: TimeBucketOptions): Promise<TimeBucketItem[]>;
-  getByTimeBucket(userId: string, timeBucket: string, options: TimeBucketOptions): Promise<AssetEntity[]>;
+  getTimeBuckets(options: TimeBucketOptions): Promise<TimeBucketItem[]>;
+  getByTimeBucket(timeBucket: string, options: TimeBucketOptions): Promise<AssetEntity[]>;
 }
--- a/server/src/domain/asset/asset.service.ts
+++ b/server/src/domain/asset/asset.service.ts
@ -144,18 +144,24 @@ export class AssetService {
    return Promise.all(requests).then((results) => results.filter((result) => result.assets.length > 0));
  }

+  private async timeBucketChecks(authUser: AuthUserDto, dto: TimeBucketDto) {
+    if (dto.albumId) {
+      await this.access.requirePermission(authUser, Permission.ALBUM_READ, [dto.albumId]);
+    } else if (dto.userId) {
+      await this.access.requirePermission(authUser, Permission.LIBRARY_READ, [dto.userId]);
+    } else {
+      dto.userId = authUser.id;
+    }
+  }
+
  async getTimeBuckets(authUser: AuthUserDto, dto: TimeBucketDto): Promise<TimeBucketResponseDto[]> {
-    const { userId, ...options } = dto;
-    const targetId = userId || authUser.id;
-    await this.access.requirePermission(authUser, Permission.LIBRARY_READ, [targetId]);
-    return this.assetRepository.getTimeBuckets(targetId, options);
+    await this.timeBucketChecks(authUser, dto);
+    return this.assetRepository.getTimeBuckets(dto);
  }

  async getByTimeBucket(authUser: AuthUserDto, dto: TimeBucketAssetDto): Promise<AssetResponseDto[]> {
-    const { userId, timeBucket, ...options } = dto;
-    const targetId = userId || authUser.id;
-    await this.access.requirePermission(authUser, Permission.LIBRARY_READ, [targetId]);
-    const assets = await this.assetRepository.getByTimeBucket(targetId, timeBucket, options);
+    await this.timeBucketChecks(authUser, dto);
+    const assets = await this.assetRepository.getByTimeBucket(dto.timeBucket, dto);
    return assets.map(mapAsset);
  }

--- a/server/src/domain/search/search.service.ts
+++ b/server/src/domain/search/search.service.ts
@ -1,7 +1,7 @@
 import { AlbumEntity, AssetEntity, AssetFaceEntity } from '@app/infra/entities';
 import { BadRequestException, Inject, Injectable, Logger } from '@nestjs/common';
 import { ConfigService } from '@nestjs/config';
-import { mapAlbum } from '../album';
+import { mapAlbumWithAssets } from '../album';
 import { IAlbumRepository } from '../album/album.repository';
 import { AssetResponseDto, mapAsset } from '../asset';
 import { IAssetRepository } from '../asset/asset.repository';
@ -148,7 +148,7 @@ export class SearchService {
    const lookup = await this.getLookupMap(assets.items.map((asset) => asset.id));

    return {
-      albums: { ...albums, items: albums.items.map(mapAlbum) },
+      albums: { ...albums, items: albums.items.map(mapAlbumWithAssets) },
      assets: {
        ...assets,
        items: assets.items
--- a/server/src/domain/shared-link/shared-link-response.dto.ts
+++ b/server/src/domain/shared-link/shared-link-response.dto.ts
@ -1,7 +1,7 @@
 import { SharedLinkEntity, SharedLinkType } from '@app/infra/entities';
 import { ApiProperty } from '@nestjs/swagger';
 import _ from 'lodash';
-import { AlbumResponseDto, mapAlbumExcludeAssetInfo } from '../album';
+import { AlbumResponseDto, mapAlbumWithoutAssets } from '../album';
 import { AssetResponseDto, mapAsset, mapAssetWithoutExif } from '../asset';

 export class SharedLinkResponseDto {
@ -36,7 +36,7 @@ export function mapSharedLink(sharedLink: SharedLinkEntity): SharedLinkResponseD
    createdAt: sharedLink.createdAt,
    expiresAt: sharedLink.expiresAt,
    assets: assets.map(mapAsset),
-    album: sharedLink.album ? mapAlbumExcludeAssetInfo(sharedLink.album) : undefined,
+    album: sharedLink.album ? mapAlbumWithoutAssets(sharedLink.album) : undefined,
    allowUpload: sharedLink.allowUpload,
    allowDownload: sharedLink.allowDownload,
    showExif: sharedLink.showExif,
@ -58,7 +58,7 @@ export function mapSharedLinkWithNoExif(sharedLink: SharedLinkEntity): SharedLin
    createdAt: sharedLink.createdAt,
    expiresAt: sharedLink.expiresAt,
    assets: assets.map(mapAssetWithoutExif),
-    album: sharedLink.album ? mapAlbumExcludeAssetInfo(sharedLink.album) : undefined,
+    album: sharedLink.album ? mapAlbumWithoutAssets(sharedLink.album) : undefined,
    allowUpload: sharedLink.allowUpload,
    allowDownload: sharedLink.allowDownload,
    showExif: sharedLink.showExif,
--- a/server/src/immich/controllers/album.controller.ts
+++ b/server/src/immich/controllers/album.controller.ts
@ -1,15 +1,17 @@
 import {
  AddUsersDto,
  AlbumCountResponseDto,
+  AlbumInfoDto,
+  AlbumResponseDto,
  AlbumService,
  AuthUserDto,
  BulkIdResponseDto,
  BulkIdsDto,
  CreateAlbumDto as CreateDto,
  CreateRuleDto,
+  GetAlbumsDto,
  UpdateAlbumDto as UpdateDto,
 } from '@app/domain';
-import { GetAlbumsDto } from '@app/domain/album/dto/get-albums.dto';
 import { Body, Controller, Delete, Get, Param, Patch, Post, Put, Query } from '@nestjs/common';
 import { ApiTags } from '@nestjs/swagger';
 import { ParseMeUUIDPipe } from '../api-v1/validation/parse-me-uuid-pipe';
@ -41,8 +43,8 @@ export class AlbumController {

  @SharedLinkRoute()
  @Get(':id')
-  getAlbumInfo(@AuthUser() authUser: AuthUserDto, @Param() { id }: UUIDParamDto) {
-    return this.service.get(authUser, id);
+  getAlbumInfo(@AuthUser() authUser: AuthUserDto, @Param() { id }: UUIDParamDto, @Query() dto: AlbumInfoDto) {
+    return this.service.get(authUser, id, dto);
  }

  @Patch(':id')
@ -75,7 +77,11 @@ export class AlbumController {
  }

  @Put(':id/users')
-  addUsersToAlbum(@AuthUser() authUser: AuthUserDto, @Param() { id }: UUIDParamDto, @Body() dto: AddUsersDto) {
+  addUsersToAlbum(
+    @AuthUser() authUser: AuthUserDto,
+    @Param() { id }: UUIDParamDto,
+    @Body() dto: AddUsersDto,
+  ): Promise<AlbumResponseDto> {
    return this.service.addUsers(authUser, id, dto);
  }

--- a/server/src/infra/repositories/album.repository.ts
+++ b/server/src/infra/repositories/album.repository.ts
@ -183,6 +183,7 @@ export class AlbumRepository implements IAlbumRepository {
      relations: {
        owner: true,
        sharedUsers: true,
+        sharedLinks: true,
        assets: true,
        rules: true,
      },
--- a/server/src/infra/repositories/asset.repository.ts
+++ b/server/src/infra/repositories/asset.repository.ts
@ -366,10 +366,10 @@ export class AssetRepository implements IAssetRepository {
    return result;
  }

-  getTimeBuckets(userId: string, options: TimeBucketOptions): Promise<TimeBucketItem[]> {
+  getTimeBuckets(options: TimeBucketOptions): Promise<TimeBucketItem[]> {
    const truncateValue = truncateMap[options.size];

-    return this.getBuilder(userId, options)
+    return this.getBuilder(options)
      .select(`COUNT(asset.id)::int`, 'count')
      .addSelect(`date_trunc('${truncateValue}', "fileCreatedAt")`, 'timeBucket')
      .groupBy(`date_trunc('${truncateValue}', "fileCreatedAt")`)
@ -377,27 +377,30 @@ export class AssetRepository implements IAssetRepository {
      .getRawMany();
  }

-  getByTimeBucket(userId: string, timeBucket: string, options: TimeBucketOptions): Promise<AssetEntity[]> {
+  getByTimeBucket(timeBucket: string, options: TimeBucketOptions): Promise<AssetEntity[]> {
    const truncateValue = truncateMap[options.size];
-    return this.getBuilder(userId, options)
+    return this.getBuilder(options)
      .andWhere(`date_trunc('${truncateValue}', "fileCreatedAt") = :timeBucket`, { timeBucket })
      .orderBy('asset.fileCreatedAt', 'DESC')
      .getMany();
  }

-  private getBuilder(userId: string, options: TimeBucketOptions) {
-    const { isArchived, isFavorite, albumId, personId } = options;
+  private getBuilder(options: TimeBucketOptions) {
+    const { isArchived, isFavorite, albumId, personId, userId } = options;

    let builder = this.repository
      .createQueryBuilder('asset')
-      .where('asset.ownerId = :userId', { userId })
-      .andWhere('asset.isVisible = true')
+      .where('asset.isVisible = true')
      .leftJoinAndSelect('asset.exifInfo', 'exifInfo');

    if (albumId) {
      builder = builder.leftJoin('asset.albums', 'album').andWhere('album.id = :albumId', { albumId });
    }

+    if (userId) {
+      builder = builder.where('asset.ownerId = :userId', { userId });
+    }
+
    if (isArchived != undefined) {
      builder = builder.andWhere('asset.isArchived = :isArchived', { isArchived });
    }
--- a/server/test/e2e/album.e2e-spec.ts
+++ b/server/test/e2e/album.e2e-spec.ts
@ -197,6 +197,7 @@ describe(`${AlbumController.name} (e2e)`, () => {
        albumThumbnailAssetId: null,
        shared: false,
        sharedUsers: [],
+        hasSharedLink: false,
        assets: [],
        assetCount: 0,
        owner: expect.objectContaining({ email: user1.userEmail }),
--- a/server/test/fixtures/shared-link.stub.ts
+++ b/server/test/fixtures/shared-link.stub.ts
@ -77,6 +77,7 @@ const albumResponse: AlbumResponseDto = {
  owner: mapUser(userStub.admin),
  sharedUsers: [],
  shared: false,
+  hasSharedLink: false,
  assets: [],
  assetCount: 1,
 };
@ -278,7 +279,7 @@ export const sharedLinkResponseStub = {
    allowUpload: false,
    allowDownload: false,
    showExif: false,
-    album: albumResponse,
+    album: { ...albumResponse, startDate: assetResponse.fileCreatedAt, endDate: assetResponse.fileCreatedAt },
    assets: [{ ...assetResponse, exifInfo: undefined }],
  }),
 };
--- a/web/.prettierrc
+++ b/web/.prettierrc
@ -4,5 +4,6 @@
  "printWidth": 120,
  "semi": true,
  "organizeImportsSkipDestructiveCodeActions": true,
-  "plugins": ["prettier-plugin-svelte", "prettier-plugin-tailwindcss"]
+  "plugins": ["prettier-plugin-svelte", "prettier-plugin-tailwindcss"],
+  "pluginSearchDirs": false
 }
--- a/web/src/api/open-api/api.ts
+++ b/web/src/api/open-api/api.ts
@ -216,6 +216,18 @@ export interface AlbumResponseDto {
     * @memberof AlbumResponseDto
     */
    'description': string;
+    /**
+     * 
+     * @type {string}
+     * @memberof AlbumResponseDto
+     */
+    'endDate'?: string;
+    /**
+     * 
+     * @type {boolean}
+     * @memberof AlbumResponseDto
+     */
+    'hasSharedLink': boolean;
    /**
     * 
     * @type {string}
@ -252,6 +264,12 @@ export interface AlbumResponseDto {
     * @memberof AlbumResponseDto
     */
    'sharedUsers': Array<UserResponseDto>;
+    /**
+     * 
+     * @type {string}
+     * @memberof AlbumResponseDto
+     */
+    'startDate'?: string;
    /**
     * 
     * @type {string}
@ -3899,11 +3917,12 @@ export const AlbumApiAxiosParamCreator = function (configuration?: Configuration
        /**
         * 
         * @param {string} id 
+         * @param {boolean} [withoutAssets] 
         * @param {string} [key] 
         * @param {*} [options] Override http request option.
         * @throws {RequiredError}
         */
-        getAlbumInfo: async (id: string, key?: string, options: AxiosRequestConfig = {}): Promise<RequestArgs> => {
+        getAlbumInfo: async (id: string, withoutAssets?: boolean, key?: string, options: AxiosRequestConfig = {}): Promise<RequestArgs> => {
            // verify required parameter 'id' is not null or undefined
            assertParamExists('getAlbumInfo', 'id', id)
            const localVarPath = `/album/{id}`
@ -3928,6 +3947,10 @@ export const AlbumApiAxiosParamCreator = function (configuration?: Configuration
            // http bearer authentication required
            await setBearerAuthToObject(localVarHeaderParameter, configuration)

+            if (withoutAssets !== undefined) {
+                localVarQueryParameter['withoutAssets'] = withoutAssets;
+            }
+
            if (key !== undefined) {
                localVarQueryParameter['key'] = key;
            }
@ -4198,12 +4221,13 @@ export const AlbumApiFp = function(configuration?: Configuration) {
        /**
         * 
         * @param {string} id 
+         * @param {boolean} [withoutAssets] 
         * @param {string} [key] 
         * @param {*} [options] Override http request option.
         * @throws {RequiredError}
         */
-        async getAlbumInfo(id: string, key?: string, options?: AxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise<AlbumResponseDto>> {
-            const localVarAxiosArgs = await localVarAxiosParamCreator.getAlbumInfo(id, key, options);
+        async getAlbumInfo(id: string, withoutAssets?: boolean, key?: string, options?: AxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise<AlbumResponseDto>> {
+            const localVarAxiosArgs = await localVarAxiosParamCreator.getAlbumInfo(id, withoutAssets, key, options);
            return createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration);
        },
        /**
@ -4311,7 +4335,7 @@ export const AlbumApiFactory = function (configuration?: Configuration, basePath
         * @throws {RequiredError}
         */
        getAlbumInfo(requestParameters: AlbumApiGetAlbumInfoRequest, options?: AxiosRequestConfig): AxiosPromise<AlbumResponseDto> {
-            return localVarFp.getAlbumInfo(requestParameters.id, requestParameters.key, options).then((request) => request(axios, basePath));
+            return localVarFp.getAlbumInfo(requestParameters.id, requestParameters.withoutAssets, requestParameters.key, options).then((request) => request(axios, basePath));
        },
        /**
         * 
@ -4442,6 +4466,13 @@ export interface AlbumApiGetAlbumInfoRequest {
     */
    readonly id: string

+    /**
+     * 
+     * @type {boolean}
+     * @memberof AlbumApiGetAlbumInfo
+     */
+    readonly withoutAssets?: boolean
+
    /**
     * 
     * @type {string}
@ -4603,7 +4634,7 @@ export class AlbumApi extends BaseAPI {
     * @memberof AlbumApi
     */
    public getAlbumInfo(requestParameters: AlbumApiGetAlbumInfoRequest, options?: AxiosRequestConfig) {
-        return AlbumApiFp(this.configuration).getAlbumInfo(requestParameters.id, requestParameters.key, options).then((request) => request(this.axios, this.basePath));
+        return AlbumApiFp(this.configuration).getAlbumInfo(requestParameters.id, requestParameters.withoutAssets, requestParameters.key, options).then((request) => request(this.axios, this.basePath));
    }

    /**
--- a/web/src/lib/components/album-page/album-viewer.svelte
+++ b/web/src/lib/components/album-page/album-viewer.svelte
@ -1,90 +1,29 @@
 <script lang="ts">
  import { browser } from '$app/environment';
-  import { afterNavigate, goto } from '$app/navigation';
-  import { albumAssetSelectionStore } from '$lib/stores/album-asset-selection.store';
+  import { assetViewingStore } from '$lib/stores/asset-viewing.store';
  import { dragAndDropFilesStore } from '$lib/stores/drag-and-drop-files.store';
  import { locale } from '$lib/stores/preferences.store';
  import { fileUploadHandler, openFileUploadDialog } from '$lib/utils/file-uploader';
-  import {
-    AlbumResponseDto,
-    AssetResponseDto,
-    SharedLinkResponseDto,
-    SharedLinkType,
-    UserResponseDto,
-    api,
-  } from '@api';
+  import type { AlbumResponseDto, AssetResponseDto, SharedLinkResponseDto } from '@api';
  import { onDestroy, onMount } from 'svelte';
-  import ArrowLeft from 'svelte-material-icons/ArrowLeft.svelte';
-  import DeleteOutline from 'svelte-material-icons/DeleteOutline.svelte';
-  import DotsVertical from 'svelte-material-icons/DotsVertical.svelte';
  import FileImagePlusOutline from 'svelte-material-icons/FileImagePlusOutline.svelte';
  import FolderDownloadOutline from 'svelte-material-icons/FolderDownloadOutline.svelte';
-  import Plus from 'svelte-material-icons/Plus.svelte';
-  import ShareVariantOutline from 'svelte-material-icons/ShareVariantOutline.svelte';
-  import Button from '../elements/buttons/button.svelte';
+  import SelectAll from 'svelte-material-icons/SelectAll.svelte';
+  import { dateFormats } from '../../constants';
+  import { downloadArchive } from '../../utils/asset-utils';
  import CircleIconButton from '../elements/buttons/circle-icon-button.svelte';
  import DownloadAction from '../photos-page/actions/download-action.svelte';
-  import RemoveFromAlbum from '../photos-page/actions/remove-from-album.svelte';
  import AssetSelectControlBar from '../photos-page/asset-select-control-bar.svelte';
-  import UserAvatar from '../shared-components/user-avatar.svelte';
-  import ContextMenu from '../shared-components/context-menu/context-menu.svelte';
-  import MenuOption from '../shared-components/context-menu/menu-option.svelte';
  import ControlAppBar from '../shared-components/control-app-bar.svelte';
-  import CreateSharedLinkModal from '../shared-components/create-share-link-modal/create-shared-link-modal.svelte';
  import GalleryViewer from '../shared-components/gallery-viewer/gallery-viewer.svelte';
  import ImmichLogo from '../shared-components/immich-logo.svelte';
-  import SelectAll from 'svelte-material-icons/SelectAll.svelte';
-  import { NotificationType, notificationController } from '../shared-components/notification/notification';
  import ThemeButton from '../shared-components/theme-button.svelte';
-  import AssetSelection from './asset-selection.svelte';
-  import ShareInfoModal from './share-info-modal.svelte';
-  import ThumbnailSelection from './thumbnail-selection.svelte';
-  import UserSelectionModal from './user-selection-modal.svelte';
-  import ConfirmDialogue from '$lib/components/shared-components/confirm-dialogue.svelte';
-  import { handleError } from '../../utils/handle-error';
-  import { downloadArchive } from '../../utils/asset-utils';
-  import { assetViewingStore } from '$lib/stores/asset-viewing.store';
-  import EditDescriptionModal from './edit-description-modal.svelte';

  export let album: AlbumResponseDto;
-  export let sharedLink: SharedLinkResponseDto | undefined = undefined;
-
-  const { isAlbumAssetSelectionOpen } = albumAssetSelectionStore;
+  export let sharedLink: SharedLinkResponseDto;

  let { isViewing: showAssetViewer } = assetViewingStore;

-  let isShowAssetSelection = false;
-
-  let isShowShareLinkModal = false;
-
-  $: $isAlbumAssetSelectionOpen = isShowAssetSelection;
-  $: {
-    if (browser) {
-      if (isShowAssetSelection) {
-        document.body.style.overflow = 'hidden';
-      } else {
-        document.body.style.overflow = 'auto';
-      }
-    }
-  }
-  let isShowShareUserSelection = false;
-  let isEditingTitle = false;
-  let isCreatingSharedAlbum = false;
-  let isShowShareInfoModal = false;
-  let isShowAlbumOptions = false;
-  let isShowThumbnailSelection = false;
-  let isShowDeleteConfirmation = false;
-  let isEditingDescription = false;
-
-  let backUrl = '/albums';
-  let currentAlbumName = '';
-  let currentUser: UserResponseDto;
-  let titleInput: HTMLInputElement;
-  let contextMenuPosition = { x: 0, y: 0 };
-
-  $: isPublicShared = sharedLink;
-  $: isOwned = currentUser?.id == album.ownerId;
-
  dragAndDropFilesStore.subscribe((value) => {
    if (value.isDragging && value.files.length > 0) {
      fileUploadHandler(value.files, album.id, sharedLink?.key);
@ -94,32 +33,13 @@

  let multiSelectAsset: Set<AssetResponseDto> = new Set();
  $: isMultiSelectionMode = multiSelectAsset.size > 0;
-  $: isMultiSelectionUserOwned = Array.from(multiSelectAsset).every((asset) => asset.ownerId === currentUser?.id);
-
-  afterNavigate(({ from }) => {
-    backUrl = from?.url.pathname ?? '/albums';
-
-    if (from?.url.pathname === '/sharing' && album.sharedUsers.length === 0) {
-      isCreatingSharedAlbum = true;
-    }
-
-    if (from?.route.id === '/(user)/search') {
-      backUrl = from.url.href;
-    }
-  });
-
-  const albumDateFormat: Intl.DateTimeFormatOptions = {
-    month: 'short',
-    day: 'numeric',
-    year: 'numeric',
-  };

  const getDateRange = () => {
    const startDate = new Date(album.assets[0].fileCreatedAt);
    const endDate = new Date(album.assets[album.assetCount - 1].fileCreatedAt);

-    const startDateString = startDate.toLocaleDateString($locale, albumDateFormat);
-    const endDateString = endDate.toLocaleDateString($locale, albumDateFormat);
+    const startDateString = startDate.toLocaleDateString($locale, dateFormats.album);
+    const endDateString = endDate.toLocaleDateString($locale, dateFormats.album);

    // If the start and end date are the same, only show one date
    return startDateString === endDateString ? startDateString : `${startDateString} - ${endDateString}`;
@ -129,14 +49,6 @@

  onMount(async () => {
    document.addEventListener('keydown', onKeyboardPress);
-    currentAlbumName = album.albumName;
-
-    try {
-      const { data } = await api.userApi.getMyUserInfo();
-      currentUser = data;
-    } catch (e) {
-      console.log('Error [getMyUserInfo - album-viewer] ', e);
-    }
  });

  onDestroy(() => {
@ -151,302 +63,67 @@
        case 'Escape':
          if (isMultiSelectionMode) {
            multiSelectAsset = new Set();
-          } else {
-            goto(backUrl);
          }
          return;
      }
    }
  };

-  // Update Album Name
-  $: {
-    if (!isEditingTitle && currentAlbumName != album.albumName && isOwned) {
-      api.albumApi
-        .updateAlbumInfo({
-          id: album.id,
-          updateAlbumDto: {
-            albumName: album.albumName,
-          },
-        })
-        .then(() => {
-          currentAlbumName = album.albumName;
-        })
-        .catch((e) => {
-          console.error('Error [updateAlbumInfo] ', e);
-          notificationController.show({
-            type: NotificationType.Error,
-            message: "Error updating album's name, check console for more details",
-          });
-        });
-    }
-  }
-
-  const createAlbumHandler = async (event: CustomEvent) => {
-    const { assets }: { assets: AssetResponseDto[] } = event.detail;
-    try {
-      const { data: results } = await api.albumApi.addAssetsToAlbum({
-        id: album.id,
-        bulkIdsDto: { ids: assets.map((a) => a.id) },
-        key: sharedLink?.key,
-      });
-
-      const count = results.filter(({ success }) => success).length;
-      notificationController.show({
-        type: NotificationType.Info,
-        message: `Added ${count} asset${count === 1 ? '' : 's'}`,
-      });
-
-      const { data } = await api.albumApi.getAlbumInfo({ id: album.id });
-      album = data;
-
-      isShowAssetSelection = false;
-    } catch (e) {
-      handleError(e, 'Error creating album');
-    }
-  };
-
-  const addUserHandler = async (event: CustomEvent) => {
-    const { selectedUsers }: { selectedUsers: UserResponseDto[] } = event.detail;
-
-    try {
-      const { data } = await api.albumApi.addUsersToAlbum({
-        id: album.id,
-        addUsersDto: {
-          sharedUserIds: Array.from(selectedUsers).map((u) => u.id),
-        },
-      });
-
-      album = data;
-
-      isShowShareUserSelection = false;
-    } catch (e) {
-      console.error('Error [addUserHandler] ', e);
-      notificationController.show({
-        type: NotificationType.Error,
-        message: 'Error adding users to album, check console for more details',
-      });
-    }
-  };
-
-  const sharedUserDeletedHandler = async (event: CustomEvent) => {
-    const { userId }: { userId: string } = event.detail;
-
-    if (userId == 'me') {
-      isShowShareInfoModal = false;
-      goto(backUrl);
-      return;
-    }
-
-    try {
-      const { data } = await api.albumApi.getAlbumInfo({ id: album.id });
-
-      album = data;
-      isShowShareInfoModal = data.sharedUsers.length >= 1;
-    } catch (e) {
-      handleError(e, 'Error deleting share users');
-    }
-  };
-
-  const removeAlbum = async () => {
-    try {
-      await api.albumApi.deleteAlbum({ id: album.id });
-      goto(backUrl);
-    } catch (e) {
-      console.error('Error [userDeleteMenu] ', e);
-      notificationController.show({
-        type: NotificationType.Error,
-        message: 'Error deleting album, check console for more details',
-      });
-    } finally {
-      isShowDeleteConfirmation = false;
-    }
-  };
-
  const downloadAlbum = async () => {
    await downloadArchive(`${album.albumName}.zip`, { albumId: album.id }, sharedLink?.key);
  };

-  const showAlbumOptionsMenu = ({ x, y }: MouseEvent) => {
-    contextMenuPosition = { x, y };
-    isShowAlbumOptions = !isShowAlbumOptions;
-  };
-
-  const setAlbumThumbnailHandler = (event: CustomEvent) => {
-    const { asset }: { asset: AssetResponseDto } = event.detail;
-    try {
-      api.albumApi.updateAlbumInfo({
-        id: album.id,
-        updateAlbumDto: {
-          albumThumbnailAssetId: asset.id,
-        },
-      });
-    } catch (e) {
-      console.error('Error [setAlbumThumbnailHandler] ', e);
-      notificationController.show({
-        type: NotificationType.Error,
-        message: 'Error setting album thumbnail, check console for more details',
-      });
-    }
-
-    isShowThumbnailSelection = false;
-  };
-
-  const onSharedLinkClickHandler = () => {
-    isShowShareUserSelection = false;
-    isShowShareLinkModal = true;
-  };
-
  const handleSelectAll = () => {
    multiSelectAsset = new Set(album.assets);
  };
-
-  const descriptionUpdatedHandler = (description: string) => {
-    try {
-      api.albumApi.updateAlbumInfo({
-        id: album.id,
-        updateAlbumDto: {
-          description,
-        },
-      });
-
-      album.description = description;
-    } catch (e) {
-      console.error('Error [descriptionUpdatedHandler] ', e);
-      notificationController.show({
-        type: NotificationType.Error,
-        message: 'Error setting album description, check console for more details',
-      });
-    }
-
-    isEditingDescription = false;
-  };
 </script>

-<section class="bg-immich-bg dark:bg-immich-dark-bg" class:hidden={isShowThumbnailSelection}>
-  <!-- Multiselection mode app bar -->
+<section class="bg-immich-bg dark:bg-immich-dark-bg">
  {#if isMultiSelectionMode}
    <AssetSelectControlBar assets={multiSelectAsset} clearSelect={() => (multiSelectAsset = new Set())}>
      <CircleIconButton title="Select all" logo={SelectAll} on:click={handleSelectAll} />
-      {#if sharedLink?.allowDownload || !isPublicShared}
-        <DownloadAction filename="{album.albumName}.zip" sharedLinkKey={sharedLink?.key} />
-      {/if}
-      {#if isOwned || isMultiSelectionUserOwned}
-        <RemoveFromAlbum bind:album />
+      {#if sharedLink.allowDownload}
+        <DownloadAction filename="{album.albumName}.zip" sharedLinkKey={sharedLink.key} />
      {/if}
    </AssetSelectControlBar>
-  {/if}
-
-  <!-- Default app bar -->
-  {#if !isMultiSelectionMode}
-    <ControlAppBar
-      on:close-button-click={() => goto(backUrl)}
-      backIcon={ArrowLeft}
-      showBackButton={(!isPublicShared && isOwned) || (!isPublicShared && !isOwned) || (isPublicShared && isOwned)}
-    >
+  {:else}
+    <ControlAppBar showBackButton={false}>
      <svelte:fragment slot="leading">
-        {#if isPublicShared && !isOwned}
-          <a
-            data-sveltekit-preload-data="hover"
-            class="ml-6 flex place-items-center gap-2 hover:cursor-pointer"
-            href="https://immich.app"
-          >
-            <ImmichLogo height={30} width={30} />
-            <h1 class="font-immich-title text-lg text-immich-primary dark:text-immich-dark-primary">IMMICH</h1>
-          </a>
-        {/if}
+        <a
+          data-sveltekit-preload-data="hover"
+          class="ml-6 flex place-items-center gap-2 hover:cursor-pointer"
+          href="https://immich.app"
+        >
+          <ImmichLogo height={30} width={30} />
+          <h1 class="font-immich-title text-lg text-immich-primary dark:text-immich-dark-primary">IMMICH</h1>
+        </a>
      </svelte:fragment>

      <svelte:fragment slot="trailing">
-        {#if !isCreatingSharedAlbum}
-          {#if !sharedLink}
-            <CircleIconButton
-              title="Add Photos"
-              on:click={() => (isShowAssetSelection = true)}
-              logo={FileImagePlusOutline}
-            />
-          {:else if sharedLink?.allowUpload}
-            <CircleIconButton
-              title="Add Photos"
-              on:click={() => openFileUploadDialog(album.id, sharedLink?.key)}
-              logo={FileImagePlusOutline}
-            />
-          {/if}
-
-          {#if isOwned}
-            <CircleIconButton
-              title="Share"
-              on:click={() => (isShowShareUserSelection = true)}
-              logo={ShareVariantOutline}
-            />
-            <CircleIconButton
-              title="Remove album"
-              on:click={() => (isShowDeleteConfirmation = true)}
-              logo={DeleteOutline}
-            />
-          {/if}
+        {#if sharedLink.allowUpload}
+          <CircleIconButton
+            title="Add Photos"
+            on:click={() => openFileUploadDialog(album.id, sharedLink.key)}
+            logo={FileImagePlusOutline}
+          />
        {/if}

-        {#if album.assetCount > 0 && !isCreatingSharedAlbum}
-          {#if !isPublicShared || (isPublicShared && sharedLink?.allowDownload)}
-            <CircleIconButton title="Download" on:click={() => downloadAlbum()} logo={FolderDownloadOutline} />
-          {/if}
-
-          {#if !isPublicShared && isOwned}
-            <CircleIconButton title="Album options" on:click={showAlbumOptionsMenu} logo={DotsVertical}>
-              {#if isShowAlbumOptions}
-                <ContextMenu {...contextMenuPosition} on:outclick={() => (isShowAlbumOptions = false)}>
-                  <MenuOption
-                    on:click={() => {
-                      isShowThumbnailSelection = true;
-                      isShowAlbumOptions = false;
-                    }}
-                    text="Set album cover"
-                  />
-                </ContextMenu>
-              {/if}
-            </CircleIconButton>
-          {/if}
+        {#if album.assetCount > 0 && sharedLink.allowDownload}
+          <CircleIconButton title="Download" on:click={() => downloadAlbum()} logo={FolderDownloadOutline} />
        {/if}

-        {#if isPublicShared}
-          <ThemeButton />
-        {/if}
-
-        {#if isCreatingSharedAlbum && album.sharedUsers.length == 0}
-          <Button
-            size="sm"
-            rounded="lg"
-            disabled={album.assetCount == 0}
-            on:click={() => (isShowShareUserSelection = true)}
-          >
-            Share
-          </Button>
-        {/if}
+        <ThemeButton />
      </svelte:fragment>
    </ControlAppBar>
  {/if}

  <section class="my-[160px] flex flex-col px-6 sm:px-12 md:px-24 lg:px-40">
    <!-- ALBUM TITLE -->
-    <input
-      on:keydown={(e) => {
-        if (e.key == 'Enter') {
-          isEditingTitle = false;
-          titleInput.blur();
-        }
-      }}
-      on:focus={() => (isEditingTitle = true)}
-      on:blur={() => (isEditingTitle = false)}
-      class={`w-[99%] border-b-2 border-transparent text-6xl text-immich-primary outline-none transition-all dark:text-immich-dark-primary ${
-        isOwned ? 'hover:border-gray-400' : 'hover:border-transparent'
-      } bg-immich-bg focus:border-b-2 focus:border-immich-primary focus:outline-none dark:bg-immich-dark-bg dark:focus:border-immich-dark-primary dark:focus:bg-immich-dark-gray`}
-      type="text"
-      bind:value={album.albumName}
-      disabled={!isOwned}
-      bind:this={titleInput}
-      title="Edit Title"
-    />
+    <p
+      class="bg-immich-bg text-6xl text-immich-primary outline-none transition-all dark:bg-immich-dark-bg dark:text-immich-dark-primary"
+    >
+      {album.albumName}
+    </p>

    <!-- ALBUM SUMMARY -->
    {#if album.assetCount > 0}
@ -456,108 +133,12 @@
        <p>{album.assetCount} items</p>
      </span>
    {/if}
-    {#if album.shared}
-      <div class="my-6 flex gap-x-1">
-        {#each album.sharedUsers as user (user.id)}
-          <button on:click={() => (isShowShareInfoModal = true)}>
-            <UserAvatar {user} size="md" autoColor />
-          </button>
-        {/each}
-
-        <button
-          style:display={isOwned ? 'block' : 'none'}
-          on:click={() => (isShowShareUserSelection = true)}
-          title="Add more users"
-          class="flex h-12 w-12 place-content-center place-items-center rounded-full border bg-white text-3xl transition-colors hover:bg-gray-300"
-          >+</button
-        >
-      </div>
-    {/if}

    <!-- ALBUM DESCRIPTION -->
-    <button
-      class="mb-12 mt-6 w-full border-b-2 border-transparent pb-2 text-left text-lg font-medium transition-colors hover:border-b-2 dark:text-gray-300"
-      on:click={() => (isEditingDescription = true)}
-      class:hover:border-gray-400={isOwned}
-      disabled={!isOwned}
-      title="Edit description"
-    >
-      {album.description || 'Add description'}
-    </button>
+    <p class="mb-12 mt-6 w-full pb-2 text-left text-lg font-medium dark:text-gray-300">
+      {album.description}
+    </p>

-    {#if album.assetCount > 0 && !isShowAssetSelection}
-      <GalleryViewer assets={album.assets} {sharedLink} bind:selectedAssets={multiSelectAsset} />
-    {:else}
-      <!-- Album is empty - Show asset selectection buttons -->
-      <section id="empty-album" class=" mt-[200px] flex place-content-center place-items-center">
-        <div class="w-[300px]">
-          <p class="text-xs dark:text-immich-dark-fg">ADD PHOTOS</p>
-          <button
-            on:click={() => (isShowAssetSelection = true)}
-            class="mt-5 flex w-full place-items-center gap-6 rounded-md border bg-immich-bg px-8 py-8 text-immich-fg transition-all hover:bg-gray-100 hover:text-immich-primary dark:border-none dark:bg-immich-dark-gray dark:text-immich-dark-fg dark:hover:text-immich-dark-primary"
-          >
-            <span class="text-text-immich-primary dark:text-immich-dark-primary"><Plus size="24" /> </span>
-            <span class="text-lg">Select photos</span>
-          </button>
-        </div>
-      </section>
-    {/if}
+    <GalleryViewer assets={album.assets} {sharedLink} bind:selectedAssets={multiSelectAsset} />
  </section>
 </section>
-
-{#if isShowAssetSelection}
-  <AssetSelection
-    albumId={album.id}
-    assetsInAlbum={album.assets}
-    on:go-back={() => (isShowAssetSelection = false)}
-    on:create-album={createAlbumHandler}
-  />
-{/if}
-
-{#if isShowShareUserSelection}
-  <UserSelectionModal
-    {album}
-    on:close={() => (isShowShareUserSelection = false)}
-    on:add-user={addUserHandler}
-    on:sharedlinkclick={onSharedLinkClickHandler}
-    sharedUsersInAlbum={new Set(album.sharedUsers)}
-  />
-{/if}
-
-{#if isShowShareLinkModal}
-  <CreateSharedLinkModal on:close={() => (isShowShareLinkModal = false)} shareType={SharedLinkType.Album} {album} />
-{/if}
-
-{#if isShowShareInfoModal}
-  <ShareInfoModal on:close={() => (isShowShareInfoModal = false)} {album} on:user-deleted={sharedUserDeletedHandler} />
-{/if}
-
-{#if isShowThumbnailSelection}
-  <ThumbnailSelection
-    {album}
-    on:close={() => (isShowThumbnailSelection = false)}
-    on:thumbnail-selected={setAlbumThumbnailHandler}
-  />
-{/if}
-
-{#if isShowDeleteConfirmation}
-  <ConfirmDialogue
-    title="Delete Album"
-    confirmText="Delete"
-    on:confirm={removeAlbum}
-    on:cancel={() => (isShowDeleteConfirmation = false)}
-  >
-    <svelte:fragment slot="prompt">
-      <p>Are you sure you want to delete the album <b>{album.albumName}</b>?</p>
-      <p>If this album is shared, other users will not be able to access it anymore.</p>
-    </svelte:fragment>
-  </ConfirmDialogue>
-{/if}
-
-{#if isEditingDescription}
-  <EditDescriptionModal
-    {album}
-    on:close={() => (isEditingDescription = false)}
-    on:updated={({ detail: description }) => descriptionUpdatedHandler(description)}
-  />
-{/if}
--- a/web/src/lib/components/album-page/asset-selection.svelte
+++ b/web/src/lib/components/album-page/asset-selection.svelte
@ -1,74 +0,0 @@
-<script lang="ts">
-  import { createAssetInteractionStore } from '$lib/stores/asset-interaction.store';
-  import { AssetStore } from '$lib/stores/assets.store';
-  import { locale } from '$lib/stores/preferences.store';
-  import { openFileUploadDialog } from '$lib/utils/file-uploader';
-  import { TimeBucketSize, type AssetResponseDto } from '@api';
-  import { createEventDispatcher, onMount } from 'svelte';
-  import { quintOut } from 'svelte/easing';
-  import { fly } from 'svelte/transition';
-  import Button from '../elements/buttons/button.svelte';
-  import AssetGrid from '../photos-page/asset-grid.svelte';
-  import ControlAppBar from '../shared-components/control-app-bar.svelte';
-
-  const dispatch = createEventDispatcher();
-
-  const assetStore = new AssetStore({ size: TimeBucketSize.Month });
-  const assetInteractionStore = createAssetInteractionStore();
-  const { selectedAssets, assetsInAlbumState } = assetInteractionStore;
-
-  export let albumId: string;
-  export let assetsInAlbum: AssetResponseDto[];
-
-  onMount(() => {
-    $assetsInAlbumState = assetsInAlbum;
-  });
-
-  const addSelectedAssets = async () => {
-    dispatch('create-album', {
-      assets: Array.from($selectedAssets),
-    });
-
-    assetInteractionStore.clearMultiselect();
-  };
-  const handleSelectFromComputerClicked = async () => {
-    await openFileUploadDialog(albumId, '');
-    assetInteractionStore.clearMultiselect();
-    dispatch('go-back');
-  };
-</script>
-
-<section
-  transition:fly={{ y: 500, duration: 100, easing: quintOut }}
-  class="absolute left-0 top-0 z-[9999] h-full w-full bg-immich-bg dark:bg-immich-dark-bg"
->
-  <ControlAppBar
-    on:close-button-click={() => {
-      assetInteractionStore.clearMultiselect();
-      dispatch('go-back');
-    }}
-  >
-    <svelte:fragment slot="leading">
-      {#if $selectedAssets.size == 0}
-        <p class="text-lg dark:text-immich-dark-fg">Add to album</p>
-      {:else}
-        <p class="text-lg dark:text-immich-dark-fg">
-          {$selectedAssets.size.toLocaleString($locale)} selected
-        </p>
-      {/if}
-    </svelte:fragment>
-
-    <svelte:fragment slot="trailing">
-      <button
-        on:click={handleSelectFromComputerClicked}
-        class="rounded-lg px-6 py-2 text-sm font-medium text-immich-primary transition-all hover:bg-immich-primary/10 dark:text-immich-dark-primary dark:hover:bg-immich-dark-primary/25"
-      >
-        Select from computer
-      </button>
-      <Button size="sm" rounded="lg" disabled={$selectedAssets.size === 0} on:click={addSelectedAssets}>Done</Button>
-    </svelte:fragment>
-  </ControlAppBar>
-  <section class="grid h-screen bg-immich-bg pl-[70px] pt-[100px] dark:bg-immich-dark-bg">
-    <AssetGrid {assetStore} {assetInteractionStore} isSelectionMode={true} />
-  </section>
-</section>
--- a/web/src/lib/components/album-page/edit-description-modal.svelte
+++ b/web/src/lib/components/album-page/edit-description-modal.svelte
@ -31,7 +31,14 @@
      <div class="m-4 flex flex-col gap-2">
        <label class="immich-form-label" for="email">Description</label>
        <!-- svelte-ignore a11y-autofocus -->
-        <input class="immich-form-input" id="name" name="name" type="text" bind:value={description} autofocus />
+        <textarea
+          class="immich-form-input focus:outline-none"
+          id="name"
+          name="name"
+          rows="5"
+          bind:value={description}
+          autofocus
+        />
      </div>

      <div class="mt-8 flex w-full gap-4 px-4">
--- a/web/src/lib/components/album-page/share-info-modal.svelte
+++ b/web/src/lib/components/album-page/share-info-modal.svelte
@ -13,7 +13,10 @@

  export let album: AlbumResponseDto;

-  const dispatch = createEventDispatcher();
+  const dispatch = createEventDispatcher<{
+    remove: string;
+    close: void;
+  }>();

  let currentUser: UserResponseDto;
  let position = { x: 0, y: 0 };
@ -59,7 +62,7 @@

    try {
      await api.albumApi.removeUserFromAlbum({ id: album.id, userId });
-      dispatch('user-deleted', { userId });
+      dispatch('remove', userId);
      const message = userId === 'me' ? `Left ${album.albumName}` : `Removed ${selectedRemoveUser.firstName}`;
      notificationController.show({ type: NotificationType.Info, message });
    } catch (e) {
@ -79,6 +82,16 @@
    </svelte:fragment>

    <section class="immich-scrollbar max-h-[400px] overflow-y-auto pb-4">
+      <div class="flex w-full place-items-center justify-between gap-4 p-5">
+        <div class="flex place-items-center gap-4">
+          <UserAvatar user={album.owner} size="md" autoColor />
+          <p class="text-sm font-medium">{album.owner.firstName} {album.owner.lastName}</p>
+        </div>
+
+        <div id="icon-{album.owner.id}" class="flex place-items-center">
+          <p class="text-sm">Owner</p>
+        </div>
+      </div>
      {#each album.sharedUsers as user}
        <div
          class="flex w-full place-items-center justify-between gap-4 p-5 transition-colors hover:bg-gray-50 dark:hover:bg-gray-700"
@ -88,7 +101,7 @@
            <p class="text-sm font-medium">{user.firstName} {user.lastName}</p>
          </div>

-          <div id={`icon-${user.id}`} class="flex place-items-center">
+          <div id="icon-{user.id}" class="flex place-items-center">
            {#if isOwned}
              <div>
                <CircleIconButton
--- a/web/src/lib/components/album-page/user-selection-modal.svelte
+++ b/web/src/lib/components/album-page/user-selection-modal.svelte
@ -11,11 +11,14 @@
  import { AppRoute } from '$lib/constants';

  export let album: AlbumResponseDto;
-  export let sharedUsersInAlbum: Set<UserResponseDto>;
  let users: UserResponseDto[] = [];
  let selectedUsers: UserResponseDto[] = [];

-  const dispatch = createEventDispatcher();
+  const dispatch = createEventDispatcher<{
+    select: UserResponseDto[];
+    share: void;
+    close: void;
+  }>();
  let sharedLinks: SharedLinkResponseDto[] = [];
  onMount(async () => {
    await getSharedLinks();
@ -25,7 +28,7 @@
    users = data.filter((user) => !(user.deletedAt || user.id === album.ownerId));

    // Remove the existed shared users from the album
-    sharedUsersInAlbum.forEach((sharedUser) => {
+    album.sharedUsers.forEach((sharedUser) => {
      users = users.filter((user) => user.id !== sharedUser.id);
    });
  });
@ -36,7 +39,7 @@
    sharedLinks = data.filter((link) => link.album?.id === album.id);
  };

-  const selectUser = (user: UserResponseDto) => {
+  const handleSelect = (user: UserResponseDto) => {
    if (selectedUsers.includes(user)) {
      selectedUsers = selectedUsers.filter((selectedUser) => selectedUser.id !== user.id);
    } else {
@ -44,13 +47,9 @@
    }
  };

-  const deselectUser = (user: UserResponseDto) => {
+  const handleUnselect = (user: UserResponseDto) => {
    selectedUsers = selectedUsers.filter((selectedUser) => selectedUser.id !== user.id);
  };
-
-  const onSharedLinkClick = () => {
-    dispatch('sharedlinkclick');
-  };
 </script>

 <BaseModal on:close={() => dispatch('close')}>
@ -69,7 +68,7 @@
        {#each selectedUsers as user}
          {#key user.id}
            <button
-              on:click={() => deselectUser(user)}
+              on:click={() => handleUnselect(user)}
              class="flex place-items-center gap-1 rounded-full border border-gray-400 p-1 transition-colors hover:bg-gray-200 dark:hover:bg-gray-700"
            >
              <UserAvatar {user} size="sm" autoColor />
@ -86,7 +85,7 @@
      <div class="my-4">
        {#each users as user}
          <button
-            on:click={() => selectUser(user)}
+            on:click={() => handleSelect(user)}
            class="flex w-full place-items-center gap-4 px-5 py-4 transition-all hover:bg-gray-200 dark:hover:bg-gray-700"
          >
            {#if selectedUsers.includes(user)}
@ -118,7 +117,7 @@

    {#if selectedUsers.length > 0}
      <div class="flex place-content-end p-5">
-        <Button size="sm" rounded="lg" on:click={() => dispatch('add-user', { selectedUsers })}>Add</Button>
+        <Button size="sm" rounded="lg" on:click={() => dispatch('select', selectedUsers)}>Add</Button>
      </div>
    {/if}
  </div>
@ -127,7 +126,7 @@
  <div id="shared-buttons" class="my-4 flex place-content-center place-items-center justify-around">
    <button
      class="flex flex-col place-content-center place-items-center gap-2 hover:cursor-pointer"
-      on:click={onSharedLinkClick}
+      on:click={() => dispatch('share')}
    >
      <Link size={24} />
      <p class="text-sm">Create link</p>
--- a/web/src/lib/components/photos-page/actions/create-shared-link.svelte
+++ b/web/src/lib/components/photos-page/actions/create-shared-link.svelte
@ -1,7 +1,6 @@
 <script lang="ts">
  import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
  import CreateSharedLinkModal from '$lib/components/shared-components/create-share-link-modal/create-shared-link-modal.svelte';
-  import { SharedLinkType } from '@api';
  import ShareVariantOutline from 'svelte-material-icons/ShareVariantOutline.svelte';
  import { getAssetControlContext } from '../asset-select-control-bar.svelte';

@ -12,9 +11,5 @@
 <CircleIconButton title="Share" logo={ShareVariantOutline} on:click={() => (showModal = true)} />

 {#if showModal}
-  <CreateSharedLinkModal
-    sharedAssets={Array.from(getAssets())}
-    shareType={SharedLinkType.Individual}
-    on:close={() => (showModal = false)}
-  />
+  <CreateSharedLinkModal assetIds={Array.from(getAssets()).map(({ id }) => id)} on:close={() => (showModal = false)} />
 {/if}
--- a/web/src/lib/components/photos-page/actions/remove-from-album.svelte
+++ b/web/src/lib/components/photos-page/actions/remove-from-album.svelte
@ -10,6 +10,7 @@
  import ConfirmDialogue from '$lib/components/shared-components/confirm-dialogue.svelte';

  export let album: AlbumResponseDto;
+  export let onRemove: ((assetIds: string[]) => void) | undefined = undefined;

  const { getAssets, clearSelect } = getAssetControlContext();

@ -17,14 +18,17 @@

  const removeFromAlbum = async () => {
    try {
+      const ids = Array.from(getAssets()).map((a) => a.id);
      const { data: results } = await api.albumApi.removeAssetFromAlbum({
        id: album.id,
-        bulkIdsDto: { ids: Array.from(getAssets()).map((a) => a.id) },
+        bulkIdsDto: { ids },
      });

      const { data } = await api.albumApi.getAlbumInfo({ id: album.id });
      album = data;

+      onRemove?.(ids);
+
      const count = results.filter(({ success }) => success).length;
      notificationController.show({
        type: NotificationType.Info,
--- a/web/src/lib/components/photos-page/actions/select-all-assets.svelte
+++ b/web/src/lib/components/photos-page/actions/select-all-assets.svelte
@ -20,7 +20,7 @@
      for (const bucket of assetGridState.buckets) {
        await assetStore.loadBucket(bucket.bucketDate, BucketPosition.Unknown);
        for (const asset of bucket.assets) {
-          assetInteractionStore.addAssetToMultiselectGroup(asset);
+          assetInteractionStore.selectAsset(asset);
        }
      }

--- a/web/src/lib/components/photos-page/asset-date-group.svelte
+++ b/web/src/lib/components/photos-page/asset-date-group.svelte
@ -25,10 +25,14 @@
  export let assetStore: AssetStore;
  export let assetInteractionStore: AssetInteractionStore;

-  const { selectedGroup, selectedAssets, assetsInAlbumState, assetSelectionCandidates, isMultiSelectState } =
-    assetInteractionStore;
+  const { selectedGroup, selectedAssets, assetSelectionCandidates, isMultiSelectState } = assetInteractionStore;

-  const dispatch = createEventDispatcher();
+  const dispatch = createEventDispatcher<{
+    select: { title: string; assets: AssetResponseDto[] };
+    selectAssets: AssetResponseDto;
+    selectAssetCandidates: AssetResponseDto | null;
+    shift: { heightDelta: number };
+  }>();

  let isMouseOverGroup = false;
  let actualBucketHeight: number;
@ -86,64 +90,44 @@
    return width;
  };

-  const assetClickHandler = (
-    asset: AssetResponseDto,
-    assetsInDateGroup: AssetResponseDto[],
-    dateGroupTitle: string,
-  ) => {
+  const assetClickHandler = (asset: AssetResponseDto, assetsInDateGroup: AssetResponseDto[], groupTitle: string) => {
    if (isSelectionMode || $isMultiSelectState) {
-      assetSelectHandler(asset, assetsInDateGroup, dateGroupTitle);
+      assetSelectHandler(asset, assetsInDateGroup, groupTitle);
      return;
    }

    assetViewingStore.setAssetId(asset.id);
  };

-  const selectAssetGroupHandler = (selectAssetGroupHandler: AssetResponseDto[], dateGroupTitle: string) => {
-    if ($selectedGroup.has(dateGroupTitle)) {
-      assetInteractionStore.removeGroupFromMultiselectGroup(dateGroupTitle);
-      selectAssetGroupHandler.forEach((asset) => {
-        assetInteractionStore.removeAssetFromMultiselectGroup(asset);
-      });
-    } else {
-      assetInteractionStore.addGroupToMultiselectGroup(dateGroupTitle);
-      selectAssetGroupHandler.forEach((asset) => {
-        assetInteractionStore.addAssetToMultiselectGroup(asset);
-      });
-    }
-  };
+  const handleSelectGroup = (title: string, assets: AssetResponseDto[]) => dispatch('select', { title, assets });

-  const assetSelectHandler = (
-    asset: AssetResponseDto,
-    assetsInDateGroup: AssetResponseDto[],
-    dateGroupTitle: string,
-  ) => {
-    dispatch('selectAssets', { asset });
+  const assetSelectHandler = (asset: AssetResponseDto, assetsInDateGroup: AssetResponseDto[], groupTitle: string) => {
+    dispatch('selectAssets', asset);

    // Check if all assets are selected in a group to toggle the group selection's icon
    let selectedAssetsInGroupCount = assetsInDateGroup.filter((asset) => $selectedAssets.has(asset)).length;

    // if all assets are selected in a group, add the group to selected group
    if (selectedAssetsInGroupCount == assetsInDateGroup.length) {
-      assetInteractionStore.addGroupToMultiselectGroup(dateGroupTitle);
+      assetInteractionStore.addGroupToMultiselectGroup(groupTitle);
    } else {
-      assetInteractionStore.removeGroupFromMultiselectGroup(dateGroupTitle);
+      assetInteractionStore.removeGroupFromMultiselectGroup(groupTitle);
    }
  };

-  const assetMouseEventHandler = (dateGroupTitle: string, asset: AssetResponseDto | null) => {
+  const assetMouseEventHandler = (groupTitle: string, asset: AssetResponseDto | null) => {
    // Show multi select icon on hover on date group
-    hoveredDateGroup = dateGroupTitle;
+    hoveredDateGroup = groupTitle;

    if ($isMultiSelectState) {
-      dispatch('selectAssetCandidates', { asset });
+      dispatch('selectAssetCandidates', asset);
    }
  };
 </script>

 <section id="asset-group-by-date" class="flex flex-wrap gap-x-12" bind:clientHeight={actualBucketHeight}>
-  {#each assetsGroupByDate as assetsInDateGroup, groupIndex (assetsInDateGroup[0].id)}
-    {@const dateGroupTitle = formatGroupTitle(DateTime.fromISO(assetsInDateGroup[0].fileCreatedAt).startOf('day'))}
+  {#each assetsGroupByDate as groupAssets, groupIndex (groupAssets[0].id)}
+    {@const groupTitle = formatGroupTitle(DateTime.fromISO(groupAssets[0].fileCreatedAt).startOf('day'))}
    <!-- Asset Group By Date -->

    <!-- svelte-ignore a11y-no-static-element-interactions -->
@ -151,11 +135,11 @@
      class="mt-5 flex flex-col"
      on:mouseenter={() => {
        isMouseOverGroup = true;
-        assetMouseEventHandler(dateGroupTitle, null);
+        assetMouseEventHandler(groupTitle, null);
      }}
      on:mouseleave={() => {
        isMouseOverGroup = false;
-        assetMouseEventHandler(dateGroupTitle, null);
+        assetMouseEventHandler(groupTitle, null);
      }}
    >
      <!-- Date group title -->
@ -163,14 +147,14 @@
        class="mb-2 flex h-6 place-items-center text-xs font-medium text-immich-fg dark:text-immich-dark-fg md:text-sm"
        style="width: {geometry[groupIndex].containerWidth}px"
      >
-        {#if !singleSelect && ((hoveredDateGroup == dateGroupTitle && isMouseOverGroup) || $selectedGroup.has(dateGroupTitle))}
+        {#if !singleSelect && ((hoveredDateGroup == groupTitle && isMouseOverGroup) || $selectedGroup.has(groupTitle))}
          <div
            transition:fly={{ x: -24, duration: 200, opacity: 0.5 }}
            class="inline-block px-2 hover:cursor-pointer"
-            on:click={() => selectAssetGroupHandler(assetsInDateGroup, dateGroupTitle)}
-            on:keydown={() => selectAssetGroupHandler(assetsInDateGroup, dateGroupTitle)}
+            on:click={() => handleSelectGroup(groupTitle, groupAssets)}
+            on:keydown={() => handleSelectGroup(groupTitle, groupAssets)}
          >
-            {#if $selectedGroup.has(dateGroupTitle)}
+            {#if $selectedGroup.has(groupTitle)}
              <CheckCircle size="24" color="#4250af" />
            {:else}
              <CircleOutline size="24" color="#757575" />
@ -178,8 +162,8 @@
          </div>
        {/if}

-        <span class="truncate first-letter:capitalize" title={dateGroupTitle}>
-          {dateGroupTitle}
+        <span class="truncate first-letter:capitalize" title={groupTitle}>
+          {groupTitle}
        </span>
      </p>

@ -188,7 +172,7 @@
        class="relative"
        style="height: {geometry[groupIndex].containerHeight}px;width: {geometry[groupIndex].containerWidth}px"
      >
-        {#each assetsInDateGroup as asset, index (asset.id)}
+        {#each groupAssets as asset, index (asset.id)}
          {@const box = geometry[groupIndex].boxes[index]}
          <div
            class="absolute"
@ -197,12 +181,12 @@
            <Thumbnail
              {asset}
              {groupIndex}
-              on:click={() => assetClickHandler(asset, assetsInDateGroup, dateGroupTitle)}
-              on:select={() => assetSelectHandler(asset, assetsInDateGroup, dateGroupTitle)}
-              on:mouse-event={() => assetMouseEventHandler(dateGroupTitle, asset)}
-              selected={$selectedAssets.has(asset) || $assetsInAlbumState.some(({ id }) => id === asset.id)}
+              on:click={() => assetClickHandler(asset, groupAssets, groupTitle)}
+              on:select={() => assetSelectHandler(asset, groupAssets, groupTitle)}
+              on:mouse-event={() => assetMouseEventHandler(groupTitle, asset)}
+              selected={$selectedAssets.has(asset) || $assetStore.albumAssets.has(asset.id)}
              selectionCandidate={$assetSelectionCandidates.has(asset)}
-              disabled={$assetsInAlbumState.some(({ id }) => id === asset.id)}
+              disabled={$assetStore.albumAssets.has(asset.id)}
              thumbnailWidth={box.width}
              thumbnailHeight={box.height}
            />
--- a/web/src/lib/components/photos-page/asset-grid.svelte
+++ b/web/src/lib/components/photos-page/asset-grid.svelte
@ -1,6 +1,12 @@
 <script lang="ts">
+  import { browser } from '$app/environment';
+  import { goto } from '$app/navigation';
+  import { AppRoute, AssetAction } from '$lib/constants';
+  import type { AssetInteractionStore } from '$lib/stores/asset-interaction.store';
  import { assetViewingStore } from '$lib/stores/asset-viewing.store';
+  import { BucketPosition, type AssetStore, type Viewport } from '$lib/stores/assets.store';
  import { locale } from '$lib/stores/preferences.store';
+  import { isSearchEnabled } from '$lib/stores/search.store';
  import { formatGroupTitle, splitBucketIntoDateGroups } from '$lib/utils/timeline-util';
  import type { AssetResponseDto } from '@api';
  import { DateTime } from 'luxon';
@ -9,15 +15,8 @@
  import IntersectionObserver from '../asset-viewer/intersection-observer.svelte';
  import Portal from '../shared-components/portal/portal.svelte';
  import Scrollbar from '../shared-components/scrollbar/scrollbar.svelte';
-  import AssetDateGroup from './asset-date-group.svelte';
-
-  import { browser } from '$app/environment';
-  import { goto } from '$app/navigation';
-  import { AppRoute, AssetAction } from '$lib/constants';
-  import type { AssetInteractionStore } from '$lib/stores/asset-interaction.store';
-  import { BucketPosition, type AssetStore, type Viewport } from '$lib/stores/assets.store';
-  import { isSearchEnabled } from '$lib/stores/search.store';
  import ShowShortcuts from '../shared-components/show-shortcuts.svelte';
+  import AssetDateGroup from './asset-date-group.svelte';

  export let isSelectionMode = false;
  export let singleSelect = false;
@ -25,7 +24,8 @@
  export let assetInteractionStore: AssetInteractionStore;
  export let removeAction: AssetAction | null = null;

-  const { assetSelectionCandidates, assetSelectionStart, selectedAssets, isMultiSelectState } = assetInteractionStore;
+  const { assetSelectionCandidates, assetSelectionStart, selectedGroup, selectedAssets, isMultiSelectState } =
+    assetInteractionStore;
  const viewport: Viewport = { width: 0, height: 0 };
  let { isViewing: showAssetViewer, asset: viewingAsset } = assetViewingStore;
  let element: HTMLElement;
@ -45,6 +45,10 @@
    if (browser) {
      document.removeEventListener('keydown', onKeyboardPress);
    }
+
+    if ($showAssetViewer) {
+      $showAssetViewer = false;
+    }
  });

  const handleKeyboardPress = (event: KeyboardEvent) => {
@ -71,6 +75,12 @@
    }
  };

+  const handleSelectAsset = (asset: AssetResponseDto) => {
+    if (!assetStore.albumAssets.has(asset.id)) {
+      assetInteractionStore.selectAsset(asset);
+    }
+  };
+
  function intersectedHandler(event: CustomEvent) {
    const el = event.detail.container as HTMLElement;
    const target = el.firstChild as HTMLElement;
@ -166,16 +176,28 @@
    selectAssetCandidates(lastAssetMouseEvent);
  }

-  const handleSelectAssetCandidates = (e: CustomEvent) => {
-    const asset = e.detail.asset;
+  const handleSelectAssetCandidates = (asset: AssetResponseDto | null) => {
    if (asset) {
      selectAssetCandidates(asset);
    }
    lastAssetMouseEvent = asset;
  };

-  const handleSelectAssets = async (e: CustomEvent) => {
-    const asset = e.detail.asset as AssetResponseDto;
+  const handleGroupSelect = (group: string, assets: AssetResponseDto[]) => {
+    if ($selectedGroup.has(group)) {
+      assetInteractionStore.removeGroupFromMultiselectGroup(group);
+      for (const asset of assets) {
+        assetInteractionStore.removeAssetFromMultiselectGroup(asset);
+      }
+    } else {
+      assetInteractionStore.addGroupToMultiselectGroup(group);
+      for (const asset of assets) {
+        handleSelectAsset(asset);
+      }
+    }
+  };
+
+  const handleSelectAssets = async (asset: AssetResponseDto) => {
    if (!asset) {
      return;
    }
@ -184,6 +206,7 @@

    if (singleSelect) {
      element.scrollTop = 0;
+      return;
    }

    const rangeSelection = $assetSelectionCandidates.size > 0;
@ -197,9 +220,9 @@
      assetInteractionStore.removeAssetFromMultiselectGroup(asset);
    } else {
      for (const candidate of $assetSelectionCandidates || []) {
-        assetInteractionStore.addAssetToMultiselectGroup(candidate);
+        handleSelectAsset(candidate);
      }
-      assetInteractionStore.addAssetToMultiselectGroup(asset);
+      handleSelectAsset(asset);
    }

    assetInteractionStore.clearAssetSelectionCandidates();
@ -224,7 +247,7 @@
          if (deselect) {
            assetInteractionStore.removeAssetFromMultiselectGroup(asset);
          } else {
-            assetInteractionStore.addAssetToMultiselectGroup(asset);
+            handleSelectAsset(asset);
          }
        }
      }
@ -293,7 +316,7 @@
 <!-- Right margin MUST be equal to the width of immich-scrubbable-scrollbar -->
 <section
  id="asset-grid"
-  class="scrollbar-hidden ml-4 mr-[60px] h-full overflow-y-auto pb-4"
+  class="scrollbar-hidden ml-4 mr-[60px] h-full overflow-y-auto pb-[60px]"
  bind:clientHeight={viewport.height}
  bind:clientWidth={viewport.width}
  bind:this={element}
@ -318,9 +341,10 @@
                {assetInteractionStore}
                {isSelectionMode}
                {singleSelect}
+                on:select={({ detail: group }) => handleGroupSelect(group.title, group.assets)}
                on:shift={handleScrollTimeline}
-                on:selectAssetCandidates={handleSelectAssetCandidates}
-                on:selectAssets={handleSelectAssets}
+                on:selectAssetCandidates={({ detail: asset }) => handleSelectAssetCandidates(asset)}
+                on:selectAssets={({ detail: asset }) => handleSelectAssets(asset)}
                assets={bucket.assets}
                bucketDate={bucket.bucketDate}
                bucketHeight={bucket.bucketHeight}
--- a/web/src/lib/components/shared-components/create-share-link-modal/create-shared-link-modal.svelte
+++ b/web/src/lib/components/shared-components/create-share-link-modal/create-shared-link-modal.svelte
@ -5,7 +5,7 @@
  import SettingSwitch from '$lib/components/admin-page/settings/setting-switch.svelte';
  import Button from '$lib/components/elements/buttons/button.svelte';
  import { handleError } from '$lib/utils/handle-error';
-  import { AlbumResponseDto, api, AssetResponseDto, SharedLinkResponseDto, SharedLinkType } from '@api';
+  import { api, SharedLinkResponseDto, SharedLinkType } from '@api';
  import { createEventDispatcher, onMount } from 'svelte';
  import Link from 'svelte-material-icons/Link.svelte';
  import BaseModal from '../base-modal.svelte';
@ -13,9 +13,8 @@
  import DropdownButton from '../dropdown-button.svelte';
  import { notificationController, NotificationType } from '../notification/notification';

-  export let shareType: SharedLinkType;
-  export let sharedAssets: AssetResponseDto[] = [];
-  export let album: AlbumResponseDto | undefined = undefined;
+  export let albumId: string | undefined = undefined;
+  export let assetIds: string[] = [];
  export let editingLink: SharedLinkResponseDto | undefined = undefined;

  let sharedLink: string | null = null;
@ -33,6 +32,8 @@
    options: ['Never', '30 minutes', '1 hour', '6 hours', '1 day', '7 days', '30 days'],
  };

+  $: shareType = albumId ? SharedLinkType.Album : SharedLinkType.Individual;
+
  onMount(async () => {
    if (editingLink) {
      if (editingLink.description) {
@ -41,6 +42,9 @@
      allowUpload = editingLink.allowUpload;
      allowDownload = editingLink.allowDownload;
      showExif = editingLink.showExif;
+
+      albumId = editingLink.album?.id;
+      assetIds = editingLink.assets.map(({ id }) => id);
    }

    const module = await import('copy-image-clipboard');
@ -56,8 +60,8 @@
      const { data } = await api.sharedLinkApi.createSharedLink({
        sharedLinkCreateDto: {
          type: shareType,
-          albumId: album ? album.id : undefined,
-          assetIds: sharedAssets.map((a) => a.id),
+          albumId,
+          assetIds,
          expiresAt: expirationDate,
          allowUpload,
          description,
@ -151,7 +155,7 @@
  </svelte:fragment>

  <section class="mx-6 mb-6">
-    {#if shareType == SharedLinkType.Album}
+    {#if shareType === SharedLinkType.Album}
      {#if !editingLink}
        <div>Let anyone with the link see photos and people in this album.</div>
      {:else}
@ -163,7 +167,7 @@
      {/if}
    {/if}

-    {#if shareType == SharedLinkType.Individual}
+    {#if shareType === SharedLinkType.Individual}
      {#if !editingLink}
        <div>Let anyone with the link see the selected photo(s)</div>
      {:else}
--- a/web/src/lib/components/shared-components/navigation-bar/account-info-panel.svelte
+++ b/web/src/lib/components/shared-components/navigation-bar/account-info-panel.svelte
@ -22,7 +22,7 @@
  <div
    class="mx-4 mt-4 flex flex-col items-center justify-center gap-4 rounded-3xl bg-white p-4 dark:bg-immich-dark-primary/10"
  >
-    <UserAvatar size="lg" {user} />
+    <UserAvatar size="xl" {user} />

    <div>
      <p class="text-center text-lg font-medium text-immich-primary dark:text-immich-dark-primary">
--- a/web/src/lib/components/shared-components/navigation-bar/navigation-bar.svelte
+++ b/web/src/lib/components/shared-components/navigation-bar/navigation-bar.svelte
@ -110,7 +110,7 @@
            on:mouseleave={() => (shouldShowAccountInfo = false)}
            on:click={() => (shouldShowAccountInfoPanel = !shouldShowAccountInfoPanel)}
          >
-            <UserAvatar {user} size="md" showTitle={false} interactive />
+            <UserAvatar {user} size="lg" showTitle={false} interactive />
          </button>

          {#if shouldShowAccountInfo && !shouldShowAccountInfoPanel}
--- a/web/src/lib/components/shared-components/user-avatar.svelte
+++ b/web/src/lib/components/shared-components/user-avatar.svelte
@ -1,6 +1,6 @@
 <script lang="ts" context="module">
  export type Color = 'primary' | 'pink' | 'red' | 'yellow' | 'blue' | 'green';
-  export type Size = 'full' | 'sm' | 'md' | 'lg';
+  export type Size = 'full' | 'sm' | 'md' | 'lg' | 'xl';
 </script>

 <script lang="ts">
@ -28,8 +28,9 @@
  const sizeClasses: Record<Size, string> = {
    full: 'w-full h-full',
    sm: 'w-7 h-7',
-    md: 'w-12 h-12',
-    lg: 'w-20 h-20',
+    md: 'w-10 h-10',
+    lg: 'w-12 h-12',
+    xl: 'w-20 h-20',
  };

  // Get color based on the user UUID.
@ -69,6 +70,7 @@
      class="flex h-full w-full select-none items-center justify-center"
      class:text-xs={size === 'sm'}
      class:text-lg={size === 'lg'}
+      class:text-xl={size === 'xl'}
      class:font-medium={!autoColor}
      class:font-semibold={autoColor}
    >
--- a/web/src/lib/components/user-settings-page/partner-selection-modal.svelte
+++ b/web/src/lib/components/user-settings-page/partner-selection-modal.svelte
@ -56,7 +56,7 @@
              >✓</span
            >
          {:else}
-            <UserAvatar {user} size="md" autoColor />
+            <UserAvatar {user} size="lg" autoColor />
          {/if}

          <div class="text-left">
--- a/web/src/lib/constants.ts
+++ b/web/src/lib/constants.ts
@ -43,3 +43,11 @@ export enum ProjectionType {
  CYLINDER = 'CYLINDER',
  NONE = 'NONE',
 }
+
+export const dateFormats = {
+  album: <Intl.DateTimeFormatOptions>{
+    month: 'short',
+    day: 'numeric',
+    year: 'numeric',
+  },
+};
--- a/web/src/lib/stores/asset-interaction.store.ts
+++ b/web/src/lib/stores/asset-interaction.store.ts
@ -1,8 +1,8 @@
+import type { AssetResponseDto } from '@api';
 import { derived, writable } from 'svelte/store';
-import type { AssetResponseDto } from '../../api/open-api';

 export interface AssetInteractionStore {
-  addAssetToMultiselectGroup: (asset: AssetResponseDto) => void;
+  selectAsset: (asset: AssetResponseDto) => void;
  removeAssetFromMultiselectGroup: (asset: AssetResponseDto) => void;
  addGroupToMultiselectGroup: (group: string) => void;
  removeGroupFromMultiselectGroup: (group: string) => void;
@ -13,13 +13,6 @@ export interface AssetInteractionStore {
  isMultiSelectState: {
    subscribe: (run: (value: boolean) => void, invalidate?: (value?: boolean) => void) => () => void;
  };
-  assetsInAlbumState: {
-    subscribe: (
-      run: (value: AssetResponseDto[]) => void,
-      invalidate?: (value?: AssetResponseDto[]) => void,
-    ) => () => void;
-    set: (value: AssetResponseDto[]) => void;
-  };
  selectedAssets: {
    subscribe: (
      run: (value: Set<AssetResponseDto>) => void,
@ -46,11 +39,9 @@ export interface AssetInteractionStore {
 export function createAssetInteractionStore(): AssetInteractionStore {
  let _selectedAssets: Set<AssetResponseDto>;
  let _selectedGroup: Set<string>;
-  let _assetsInAlbums: AssetResponseDto[];
  let _assetSelectionCandidates: Set<AssetResponseDto>;
  let _assetSelectionStart: AssetResponseDto | null;

-  const assetsInAlbumStoreState = writable<AssetResponseDto[]>([]);
  // Selected assets
  const selectedAssets = writable<Set<AssetResponseDto>>(new Set());
  // Selected date groups
@ -72,10 +63,6 @@ export function createAssetInteractionStore(): AssetInteractionStore {
    _selectedGroup = group;
  });

-  assetsInAlbumStoreState.subscribe((assets) => {
-    _assetsInAlbums = assets;
-  });
-
  assetSelectionCandidates.subscribe((assets) => {
    _assetSelectionCandidates = assets;
  });
@ -84,12 +71,7 @@ export function createAssetInteractionStore(): AssetInteractionStore {
    _assetSelectionStart = asset;
  });

-  const addAssetToMultiselectGroup = (asset: AssetResponseDto) => {
-    // Not select if in album already
-    if (_assetsInAlbums.find((a) => a.id === asset.id)) {
-      return;
-    }
-
+  const selectAsset = (asset: AssetResponseDto) => {
    _selectedAssets.add(asset);
    selectedAssets.set(_selectedAssets);
  };
@ -128,7 +110,6 @@ export function createAssetInteractionStore(): AssetInteractionStore {
    // Multi-selection
    _selectedAssets.clear();
    _selectedGroup.clear();
-    _assetsInAlbums = [];

    // Range selection
    _assetSelectionCandidates.clear();
@ -136,13 +117,12 @@ export function createAssetInteractionStore(): AssetInteractionStore {

    selectedAssets.set(_selectedAssets);
    selectedGroup.set(_selectedGroup);
-    assetsInAlbumStoreState.set(_assetsInAlbums);
    assetSelectionCandidates.set(_assetSelectionCandidates);
    assetSelectionStart.set(_assetSelectionStart);
  };

  return {
-    addAssetToMultiselectGroup,
+    selectAsset,
    removeAssetFromMultiselectGroup,
    addGroupToMultiselectGroup,
    removeGroupFromMultiselectGroup,
@ -153,10 +133,6 @@ export function createAssetInteractionStore(): AssetInteractionStore {
    isMultiSelectState: {
      subscribe: isMultiSelectStoreState.subscribe,
    },
-    assetsInAlbumState: {
-      subscribe: assetsInAlbumStoreState.subscribe,
-      set: assetsInAlbumStoreState.set,
-    },
    selectedAssets: {
      subscribe: selectedAssets.subscribe,
    },
--- a/web/src/lib/stores/assets.store.ts
+++ b/web/src/lib/stores/assets.store.ts
@ -43,14 +43,21 @@ export class AssetStore {
  timelineHeight = 0;
  buckets: AssetBucket[] = [];
  assets: AssetResponseDto[] = [];
+  albumAssets: Set<string> = new Set();

-  constructor(private options: AssetStoreOptions) {
+  constructor(private options: AssetStoreOptions, private albumId?: string) {
    this.store$.set(this);
  }

  subscribe = this.store$.subscribe;

  async init(viewport: Viewport) {
+    this.timelineHeight = 0;
+    this.buckets = [];
+    this.assets = [];
+    this.assetToBucket = {};
+    this.albumAssets = new Set();
+
    const { data: buckets } = await api.assetApi.getTimeBuckets(this.options);

    this.buckets = buckets.map((bucket) => {
@ -104,6 +111,22 @@ export class AssetStore {
        { signal: bucket.cancelToken.signal },
      );

+      if (this.albumId) {
+        const { data: albumAssets } = await api.assetApi.getByTimeBucket(
+          {
+            albumId: this.albumId,
+            timeBucket: bucketDate,
+            size: this.options.size,
+            key: this.options.key,
+          },
+          { signal: bucket.cancelToken.signal },
+        );
+
+        for (const asset of albumAssets) {
+          this.albumAssets.add(asset.id);
+        }
+      }
+
      bucket.assets = assets;
      this.emit(true);
    } catch (error) {
--- a/web/src/lib/utils/asset-utils.ts
+++ b/web/src/lib/utils/asset-utils.ts
@ -10,13 +10,10 @@ export const addAssetsToAlbum = async (
 ): Promise<BulkIdResponseDto[]> =>
  api.albumApi.addAssetsToAlbum({ id: albumId, bulkIdsDto: { ids: assetIds }, key }).then(({ data: results }) => {
    const count = results.filter(({ success }) => success).length;
-    if (count > 0) {
-      // This might be 0 if the user tries to add an asset that is already in the album
-      notificationController.show({
-        type: NotificationType.Info,
-        message: `Added ${count} asset${count === 1 ? '' : 's'}`,
-      });
-    }
+    notificationController.show({
+      type: NotificationType.Info,
+      message: `Added ${count} asset${count === 1 ? '' : 's'}`,
+    });

    return results;
  });
--- a/web/src/routes/(user)/albums/[albumId]/+page.server.ts
+++ b/web/src/routes/(user)/albums/[albumId]/+page.server.ts
@ -7,12 +7,12 @@ export const load = (async ({ params, locals: { api, user } }) => {
    throw redirect(302, AppRoute.AUTH_LOGIN);
  }

-  const albumId = params['albumId'];
-
  try {
-    const { data: album } = await api.albumApi.getAlbumInfo({ id: albumId });
+    const { data: album } = await api.albumApi.getAlbumInfo({ id: params.albumId, withoutAssets: true });
+
    return {
      album,
+      user,
      meta: {
        title: album.albumName,
      },
--- a/web/src/routes/(user)/albums/[albumId]/+page.svelte
+++ b/web/src/routes/(user)/albums/[albumId]/+page.svelte
@ -1,10 +1,535 @@
 <script lang="ts">
-  import AlbumViewer from '$lib/components/album-page/album-viewer.svelte';
+  import { afterNavigate, goto } from '$app/navigation';
+  import EditDescriptionModal from '$lib/components/album-page/edit-description-modal.svelte';
+  import ShareInfoModal from '$lib/components/album-page/share-info-modal.svelte';
+  import UserSelectionModal from '$lib/components/album-page/user-selection-modal.svelte';
+  import Button from '$lib/components/elements/buttons/button.svelte';
+  import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
+  import AddToAlbum from '$lib/components/photos-page/actions/add-to-album.svelte';
+  import CreateSharedLink from '$lib/components/photos-page/actions/create-shared-link.svelte';
+  import DownloadAction from '$lib/components/photos-page/actions/download-action.svelte';
+  import FavoriteAction from '$lib/components/photos-page/actions/favorite-action.svelte';
+  import RemoveFromAlbum from '$lib/components/photos-page/actions/remove-from-album.svelte';
+  import SelectAllAssets from '$lib/components/photos-page/actions/select-all-assets.svelte';
+  import AssetGrid from '$lib/components/photos-page/asset-grid.svelte';
+  import AssetSelectContextMenu from '$lib/components/photos-page/asset-select-context-menu.svelte';
+  import AssetSelectControlBar from '$lib/components/photos-page/asset-select-control-bar.svelte';
+  import ConfirmDialogue from '$lib/components/shared-components/confirm-dialogue.svelte';
+  import ContextMenu from '$lib/components/shared-components/context-menu/context-menu.svelte';
+  import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
+  import ControlAppBar from '$lib/components/shared-components/control-app-bar.svelte';
+  import CreateSharedLinkModal from '$lib/components/shared-components/create-share-link-modal/create-shared-link-modal.svelte';
+  import {
+    NotificationType,
+    notificationController,
+  } from '$lib/components/shared-components/notification/notification';
+  import UserAvatar from '$lib/components/shared-components/user-avatar.svelte';
+  import { AppRoute, dateFormats } from '$lib/constants';
+  import { createAssetInteractionStore } from '$lib/stores/asset-interaction.store';
+  import { assetViewingStore } from '$lib/stores/asset-viewing.store';
+  import { AssetStore } from '$lib/stores/assets.store';
+  import { locale } from '$lib/stores/preferences.store';
+  import { downloadArchive } from '$lib/utils/asset-utils';
+  import { openFileUploadDialog } from '$lib/utils/file-uploader';
+  import { handleError } from '$lib/utils/handle-error';
+  import { TimeBucketSize, UserResponseDto, api } from '@api';
+  import ArrowLeft from 'svelte-material-icons/ArrowLeft.svelte';
+  import DeleteOutline from 'svelte-material-icons/DeleteOutline.svelte';
+  import DotsVertical from 'svelte-material-icons/DotsVertical.svelte';
+  import FileImagePlusOutline from 'svelte-material-icons/FileImagePlusOutline.svelte';
+  import FolderDownloadOutline from 'svelte-material-icons/FolderDownloadOutline.svelte';
+  import Link from 'svelte-material-icons/Link.svelte';
+  import Plus from 'svelte-material-icons/Plus.svelte';
+  import ShareVariantOutline from 'svelte-material-icons/ShareVariantOutline.svelte';
  import type { PageData } from './$types';

  export let data: PageData;
+
+  let album = data.album;
+  $: album = data.album;
+
+  enum ViewMode {
+    CONFIRM_DELETE = 'confirm-delete',
+    LINK_SHARING = 'link-sharing',
+    SELECT_USERS = 'select-users',
+    SELECT_THUMBNAIL = 'select-thumbnail',
+    SELECT_ASSETS = 'select-assets',
+    ALBUM_OPTIONS = 'album-options',
+    VIEW_USERS = 'view-users',
+    VIEW = 'view',
+  }
+
+  let backUrl: string = AppRoute.ALBUMS;
+  let viewMode = ViewMode.VIEW;
+  let titleInput: HTMLInputElement;
+  let isEditingDescription = false;
+  let isCreatingSharedAlbum = false;
+  let currentAlbumName = '';
+  let contextMenuPosition: { x: number; y: number } = { x: 0, y: 0 };
+
+  const assetStore = new AssetStore({ size: TimeBucketSize.Month, albumId: album.id });
+  const assetInteractionStore = createAssetInteractionStore();
+  const { isMultiSelectState, selectedAssets } = assetInteractionStore;
+
+  const timelineStore = new AssetStore({ size: TimeBucketSize.Month, isArchived: false }, album.id);
+  const timelineInteractionStore = createAssetInteractionStore();
+  const { selectedAssets: timelineSelected } = timelineInteractionStore;
+
+  $: isOwned = data.user.id == album.ownerId;
+  $: isAllUserOwned = Array.from($selectedAssets).every((asset) => asset.ownerId === data.user.id);
+  $: isAllFavorite = Array.from($selectedAssets).every((asset) => asset.isFavorite);
+
+  afterNavigate(({ from }) => {
+    assetViewingStore.showAssetViewer(false);
+
+    let url: string | undefined = from?.url.pathname;
+
+    if (from?.route.id === '/(user)/search') {
+      url = from.url.href;
+    }
+
+    if (from?.route.id === '/(user)/albums/[albumId]') {
+      url = AppRoute.ALBUMS;
+    }
+
+    backUrl = url || AppRoute.ALBUMS;
+
+    if (backUrl === AppRoute.SHARING && album.sharedUsers.length === 0) {
+      isCreatingSharedAlbum = true;
+    }
+  });
+
+  const refreshAlbum = async () => {
+    const { data } = await api.albumApi.getAlbumInfo({ id: album.id, withoutAssets: false });
+    album = data;
+  };
+
+  const getDateRange = () => {
+    const { startDate, endDate } = album;
+
+    let start = '';
+    let end = '';
+
+    if (startDate) {
+      start = new Date(startDate).toLocaleDateString($locale, dateFormats.album);
+    }
+
+    if (endDate) {
+      end = new Date(endDate).toLocaleDateString($locale, dateFormats.album);
+    }
+
+    if (startDate && endDate && start !== end) {
+      return `${start} - ${end}`;
+    }
+
+    if (start) {
+      return start;
+    }
+
+    return '';
+  };
+
+  const handleAddAssets = async () => {
+    const assetIds = Array.from($timelineSelected).map((asset) => asset.id);
+
+    try {
+      const { data: results } = await api.albumApi.addAssetsToAlbum({
+        id: album.id,
+        bulkIdsDto: { ids: assetIds },
+      });
+
+      const count = results.filter(({ success }) => success).length;
+      notificationController.show({
+        type: NotificationType.Info,
+        message: `Added ${count} asset${count === 1 ? '' : 's'}`,
+      });
+
+      await refreshAlbum();
+
+      timelineInteractionStore.clearMultiselect();
+      viewMode = ViewMode.VIEW;
+    } catch (error) {
+      handleError(error, 'Error adding assets to album');
+    }
+  };
+
+  const handleRemoveAssets = (assetIds: string[]) => {
+    for (const assetId of assetIds) {
+      assetStore.removeAsset(assetId);
+    }
+  };
+
+  const handleCloseSelectAssets = () => {
+    viewMode = ViewMode.VIEW;
+    timelineInteractionStore.clearMultiselect();
+  };
+
+  const handleOpenAlbumOptions = ({ x, y }: MouseEvent) => {
+    contextMenuPosition = { x, y };
+    viewMode = ViewMode.ALBUM_OPTIONS;
+  };
+
+  const handleSelectFromComputer = async () => {
+    await openFileUploadDialog(album.id, '');
+    timelineInteractionStore.clearMultiselect();
+    viewMode = ViewMode.VIEW;
+  };
+
+  const handleAddUsers = async (users: UserResponseDto[]) => {
+    try {
+      const { data } = await api.albumApi.addUsersToAlbum({
+        id: album.id,
+        addUsersDto: {
+          sharedUserIds: Array.from(users).map(({ id }) => id),
+        },
+      });
+
+      album = data;
+
+      viewMode = ViewMode.VIEW;
+    } catch (error) {
+      handleError(error, 'Error adding users to album');
+    }
+  };
+
+  const handleRemoveUser = async (userId: string) => {
+    if (userId == 'me' || userId === data.user.id) {
+      goto(backUrl);
+      return;
+    }
+
+    try {
+      await refreshAlbum();
+      viewMode = album.sharedUsers.length > 1 ? ViewMode.SELECT_USERS : ViewMode.VIEW;
+    } catch (e) {
+      handleError(e, 'Error deleting share users');
+    }
+  };
+
+  const handleDownloadAlbum = async () => {
+    await downloadArchive(`${album.albumName}.zip`, { albumId: album.id });
+  };
+
+  const handleRemoveAlbum = async () => {
+    try {
+      await api.albumApi.deleteAlbum({ id: album.id });
+      goto(backUrl);
+    } catch (error) {
+      handleError(error, 'Unable to remove album');
+    } finally {
+      viewMode = ViewMode.VIEW;
+    }
+  };
+
+  const handleUpdateThumbnail = async (assetId: string) => {
+    if (viewMode !== ViewMode.SELECT_THUMBNAIL) {
+      return;
+    }
+
+    viewMode = ViewMode.VIEW;
+    assetInteractionStore.clearMultiselect();
+
+    try {
+      await api.albumApi.updateAlbumInfo({
+        id: album.id,
+        updateAlbumDto: {
+          albumThumbnailAssetId: assetId,
+        },
+      });
+
+      notificationController.show({ type: NotificationType.Info, message: 'Updated album cover' });
+    } catch (error) {
+      handleError(error, 'Unable to update album cover');
+    }
+  };
+
+  const handleUpdateName = async () => {
+    if (currentAlbumName === album.albumName) {
+      return;
+    }
+
+    try {
+      await api.albumApi.updateAlbumInfo({
+        id: album.id,
+        updateAlbumDto: {
+          albumName: album.albumName,
+        },
+      });
+      currentAlbumName = album.albumName;
+    } catch (error) {
+      handleError(error, 'Unable to update album name');
+    }
+  };
+
+  const handleUpdateDescription = (description: string) => {
+    try {
+      api.albumApi.updateAlbumInfo({
+        id: album.id,
+        updateAlbumDto: {
+          description,
+        },
+      });
+
+      album.description = description;
+      isEditingDescription = false;
+    } catch (error) {
+      handleError(error, 'Error updating album description');
+    }
+  };
 </script>

-<div class="immich-scrollbar">
-  <AlbumViewer album={data.album} />
-</div>
+<header>
+  {#if $isMultiSelectState}
+    <AssetSelectControlBar assets={$selectedAssets} clearSelect={() => assetInteractionStore.clearMultiselect()}>
+      <CreateSharedLink />
+      <SelectAllAssets {assetStore} {assetInteractionStore} />
+      <AssetSelectContextMenu icon={Plus} title="Add">
+        <AddToAlbum />
+        <AddToAlbum shared />
+      </AssetSelectContextMenu>
+      {#if isOwned || isAllUserOwned}
+        <RemoveFromAlbum bind:album onRemove={(assetIds) => handleRemoveAssets(assetIds)} />
+      {/if}
+      <AssetSelectContextMenu icon={DotsVertical} title="Menu">
+        {#if isAllUserOwned}
+          <FavoriteAction menuItem removeFavorite={isAllFavorite} />
+        {/if}
+        <DownloadAction menuItem filename="{album.albumName}.zip" />
+      </AssetSelectContextMenu>
+    </AssetSelectControlBar>
+  {:else}
+    {#if viewMode === ViewMode.VIEW || viewMode === ViewMode.ALBUM_OPTIONS}
+      <ControlAppBar showBackButton backIcon={ArrowLeft} on:close-button-click={() => goto(backUrl)}>
+        <svelte:fragment slot="trailing">
+          <CircleIconButton
+            title="Add Photos"
+            on:click={() => (viewMode = ViewMode.SELECT_ASSETS)}
+            logo={FileImagePlusOutline}
+          />
+
+          {#if isOwned}
+            <CircleIconButton
+              title="Share"
+              on:click={() => (viewMode = ViewMode.SELECT_USERS)}
+              logo={ShareVariantOutline}
+            />
+            <CircleIconButton
+              title="Remove album"
+              on:click={() => (viewMode = ViewMode.CONFIRM_DELETE)}
+              logo={DeleteOutline}
+            />
+          {/if}
+
+          {#if album.assetCount > 0}
+            <CircleIconButton title="Download" on:click={handleDownloadAlbum} logo={FolderDownloadOutline} />
+
+            {#if isOwned}
+              <CircleIconButton title="Album options" on:click={handleOpenAlbumOptions} logo={DotsVertical}>
+                {#if viewMode === ViewMode.ALBUM_OPTIONS}
+                  <ContextMenu {...contextMenuPosition} on:outclick={() => (viewMode = ViewMode.VIEW)}>
+                    <MenuOption on:click={() => (viewMode = ViewMode.SELECT_THUMBNAIL)} text="Set album cover" />
+                  </ContextMenu>
+                {/if}
+              </CircleIconButton>
+            {/if}
+          {/if}
+
+          {#if isCreatingSharedAlbum && album.sharedUsers.length === 0}
+            <Button
+              size="sm"
+              rounded="lg"
+              disabled={album.assetCount == 0}
+              on:click={() => (viewMode = ViewMode.SELECT_USERS)}
+            >
+              Share
+            </Button>
+          {/if}
+        </svelte:fragment>
+      </ControlAppBar>
+    {/if}
+
+    {#if viewMode === ViewMode.SELECT_ASSETS}
+      <ControlAppBar on:close-button-click={handleCloseSelectAssets}>
+        <svelte:fragment slot="leading">
+          <p class="text-lg dark:text-immich-dark-fg">
+            {#if $timelineSelected.size == 0}
+              Add to album
+            {:else}
+              {$timelineSelected.size.toLocaleString($locale)} selected
+            {/if}
+          </p>
+        </svelte:fragment>
+
+        <svelte:fragment slot="trailing">
+          <button
+            on:click={handleSelectFromComputer}
+            class="rounded-lg px-6 py-2 text-sm font-medium text-immich-primary transition-all hover:bg-immich-primary/10 dark:text-immich-dark-primary dark:hover:bg-immich-dark-primary/25"
+          >
+            Select from computer
+          </button>
+          <Button size="sm" rounded="lg" disabled={$timelineSelected.size === 0} on:click={handleAddAssets}>Done</Button
+          >
+        </svelte:fragment>
+      </ControlAppBar>
+    {/if}
+
+    {#if viewMode === ViewMode.SELECT_THUMBNAIL}
+      <ControlAppBar on:close-button-click={() => (viewMode = ViewMode.VIEW)}>
+        <svelte:fragment slot="leading">Select Album Cover</svelte:fragment>
+      </ControlAppBar>
+    {/if}
+  {/if}
+</header>
+
+<main
+  class="relative h-screen overflow-hidden bg-immich-bg px-6 pt-[var(--navbar-height)] dark:bg-immich-dark-bg sm:px-12 md:px-24 lg:px-40"
+>
+  {#if viewMode === ViewMode.SELECT_ASSETS}
+    <AssetGrid assetStore={timelineStore} assetInteractionStore={timelineInteractionStore} isSelectionMode={true} />
+  {:else}
+    <AssetGrid
+      {assetStore}
+      {assetInteractionStore}
+      isSelectionMode={viewMode === ViewMode.SELECT_THUMBNAIL}
+      singleSelect={viewMode === ViewMode.SELECT_THUMBNAIL}
+      on:select={({ detail: asset }) => handleUpdateThumbnail(asset.id)}
+    >
+      {#if viewMode !== ViewMode.SELECT_THUMBNAIL}
+        <!-- ALBUM TITLE -->
+        <section class="pt-24">
+          <input
+            on:keydown={(e) => e.key == 'Enter' && titleInput.blur()}
+            on:blur={handleUpdateName}
+            class="w-[99%] border-b-2 border-transparent text-6xl text-immich-primary outline-none transition-all dark:text-immich-dark-primary {isOwned
+              ? 'hover:border-gray-400'
+              : 'hover:border-transparent'} bg-immich-bg focus:border-b-2 focus:border-immich-primary focus:outline-none dark:bg-immich-dark-bg dark:focus:border-immich-dark-primary dark:focus:bg-immich-dark-gray"
+            type="text"
+            bind:value={album.albumName}
+            disabled={!isOwned}
+            bind:this={titleInput}
+            title="Edit Title"
+          />
+
+          <!-- ALBUM SUMMARY -->
+          {#if album.assetCount > 0}
+            <span class="my-4 flex gap-2 text-sm font-medium text-gray-500" data-testid="album-details">
+              <p class="">{getDateRange()}</p>
+              <p>·</p>
+              <p>{album.assetCount} items</p>
+            </span>
+          {/if}
+
+          <!-- ALBUM SHARING -->
+          {#if album.sharedUsers.length > 0 || (album.hasSharedLink && isOwned)}
+            <div class="my-6 flex gap-x-1">
+              <!-- link -->
+              {#if album.hasSharedLink && isOwned}
+                <CircleIconButton
+                  backgroundColor="#d3d3d3"
+                  forceDark
+                  size="20"
+                  logo={Link}
+                  on:click={() => (viewMode = ViewMode.LINK_SHARING)}
+                />
+              {/if}
+
+              <!-- owner -->
+              <button on:click={() => (viewMode = ViewMode.VIEW_USERS)}>
+                <UserAvatar user={album.owner} size="md" autoColor />
+              </button>
+
+              <!-- users -->
+              {#each album.sharedUsers as user (user.id)}
+                <button on:click={() => (viewMode = ViewMode.VIEW_USERS)}>
+                  <UserAvatar {user} size="md" autoColor />
+                </button>
+              {/each}
+
+              {#if isOwned}
+                <CircleIconButton
+                  backgroundColor="#d3d3d3"
+                  forceDark
+                  size="20"
+                  logo={Plus}
+                  on:click={() => (viewMode = ViewMode.SELECT_USERS)}
+                  title="Add more users"
+                />
+              {/if}
+            </div>
+          {/if}
+
+          <!-- ALBUM DESCRIPTION -->
+          {#if isOwned || album.description}
+            <button
+              class="mb-12 mt-6 w-full border-b-2 border-transparent pb-2 text-left text-lg font-medium transition-colors hover:border-b-2 dark:text-gray-300"
+              on:click={() => (isEditingDescription = true)}
+              class:hover:border-gray-400={isOwned}
+              disabled={!isOwned}
+              title="Edit description"
+            >
+              {album.description || 'Add description'}
+            </button>
+          {/if}
+        </section>
+      {/if}
+
+      {#if album.assetCount === 0}
+        <section id="empty-album" class=" mt-[200px] flex place-content-center place-items-center">
+          <div class="w-[300px]">
+            <p class="text-xs dark:text-immich-dark-fg">ADD PHOTOS</p>
+            <button
+              on:click={() => (viewMode = ViewMode.SELECT_ASSETS)}
+              class="mt-5 flex w-full place-items-center gap-6 rounded-md border bg-immich-bg px-8 py-8 text-immich-fg transition-all hover:bg-gray-100 hover:text-immich-primary dark:border-none dark:bg-immich-dark-gray dark:text-immich-dark-fg dark:hover:text-immich-dark-primary"
+            >
+              <span class="text-text-immich-primary dark:text-immich-dark-primary"><Plus size="24" /> </span>
+              <span class="text-lg">Select photos</span>
+            </button>
+          </div>
+        </section>
+      {/if}
+    </AssetGrid>
+  {/if}
+</main>
+
+{#if viewMode === ViewMode.SELECT_USERS}
+  <UserSelectionModal
+    {album}
+    on:select={({ detail: users }) => handleAddUsers(users)}
+    on:share={() => (viewMode = ViewMode.LINK_SHARING)}
+    on:close={() => (viewMode = ViewMode.VIEW)}
+  />
+{/if}
+
+{#if viewMode === ViewMode.LINK_SHARING}
+  <CreateSharedLinkModal albumId={album.id} on:close={() => (viewMode = ViewMode.VIEW)} />
+{/if}
+
+{#if viewMode === ViewMode.VIEW_USERS}
+  <ShareInfoModal
+    on:close={() => (viewMode = ViewMode.VIEW)}
+    {album}
+    on:remove={({ detail: userId }) => handleRemoveUser(userId)}
+  />
+{/if}
+
+{#if viewMode === ViewMode.CONFIRM_DELETE}
+  <ConfirmDialogue
+    title="Delete Album"
+    confirmText="Delete"
+    on:confirm={handleRemoveAlbum}
+    on:cancel={() => (viewMode = ViewMode.VIEW)}
+  >
+    <svelte:fragment slot="prompt">
+      <p>Are you sure you want to delete the album <b>{album.albumName}</b>?</p>
+      <p>If this album is shared, other users will not be able to access it anymore.</p>
+    </svelte:fragment>
+  </ConfirmDialogue>
+{/if}
+
+{#if isEditingDescription}
+  <EditDescriptionModal
+    {album}
+    on:close={() => (isEditingDescription = false)}
+    on:updated={({ detail: description }) => handleUpdateDescription(description)}
+  />
+{/if}
--- a/web/src/routes/(user)/sharing/+page.svelte
+++ b/web/src/routes/(user)/sharing/+page.svelte
@ -68,7 +68,7 @@
              href="/partners/{partner.id}"
              class="flex gap-4 rounded-lg px-5 py-4 transition-all hover:bg-gray-200 dark:hover:bg-gray-700"
            >
-              <UserAvatar user={partner} size="md" autoColor />
+              <UserAvatar user={partner} size="lg" autoColor />
              <div class="text-left">
                <p class="text-immich-fg dark:text-immich-dark-fg">
                  {partner.firstName}
--- a/web/src/routes/(user)/sharing/sharedlinks/+page.svelte
+++ b/web/src/routes/(user)/sharing/sharedlinks/+page.svelte
@ -85,12 +85,7 @@
 </section>

 {#if editSharedLink}
-  <CreateSharedLinkModal
-    editingLink={editSharedLink}
-    shareType={editSharedLink.type}
-    album={editSharedLink.album}
-    on:close={handleEditDone}
-  />
+  <CreateSharedLinkModal editingLink={editSharedLink} on:close={handleEditDone} />
 {/if}

 {#if deleteLinkId}
--- a/web/src/test-data/factories/album-factory.ts
+++ b/web/src/test-data/factories/album-factory.ts
@ -16,4 +16,5 @@ export const albumFactory = Sync.makeFactory<AlbumResponseDto>({
  owner: userFactory.build(),
  shared: false,
  sharedUsers: [],
+  hasSharedLink: false,
 });