feat: shared links custom URL (#19999)

* feat: custom url for shared links

* feat: use a separate route and query param

---------

Co-authored-by: Jason Rasmussen <jason@rasm.me>

i18n/en.json

@@ -725,6 +725,7 @@
   "current_server_address": "Current server address",
   "custom_locale": "Custom Locale",
   "custom_locale_description": "Format dates and numbers based on the language and the region",
+  "custom_url": "Custom URL",
   "daily_title_text_date": "E, MMM dd",
   "daily_title_text_date_year": "E, MMM dd, yyyy",
   "dark": "Dark",
@@ -1172,7 +1173,6 @@
   "light": "Light",
   "like_deleted": "Like deleted",
   "link_motion_video": "Link motion video",
-  "link_options": "Link options",
   "link_to_oauth": "Link to OAuth",
   "linked_oauth_account": "Linked OAuth account",
   "list": "List",
@@ -1745,6 +1745,7 @@
   "shared_link_clipboard_copied_massage": "Copied to clipboard",
   "shared_link_clipboard_text": "Link: {link}\nPassword: {password}",
   "shared_link_create_error": "Error while creating shared link",
+  "shared_link_custom_url_description": "Access this shared link with a custom URL",
   "shared_link_edit_description_hint": "Enter the share description",
   "shared_link_edit_expire_after_option_day": "1 day",
   "shared_link_edit_expire_after_option_days": "{count} days",
@@ -1770,6 +1771,7 @@
   "shared_link_info_chip_metadata": "EXIF",
   "shared_link_manage_links": "Manage Shared links",
   "shared_link_options": "Shared link options",
+  "shared_link_password_description": "Require a password to access this shared link",
   "shared_links": "Shared links",
   "shared_links_description": "Share photos and videos with a link",
   "shared_photos_and_videos_count": "{assetCount, plural, other {# shared photos & videos.}}",

mobile/openapi/lib/api/albums_api.dart

@@ -24,7 +24,9 @@ class AlbumsApi {
   /// * [BulkIdsDto] bulkIdsDto (required):
   ///
   /// * [String] key:
-  Future<Response> addAssetsToAlbumWithHttpInfo(String id, BulkIdsDto bulkIdsDto, { String? key, }) async {
+  ///
+  /// * [String] slug:
+  Future<Response> addAssetsToAlbumWithHttpInfo(String id, BulkIdsDto bulkIdsDto, { String? key, String? slug, }) async {
     // ignore: prefer_const_declarations
     final apiPath = r'/albums/{id}/assets'
       .replaceAll('{id}', id);
@@ -39,6 +41,9 @@ class AlbumsApi {
     if (key != null) {
       queryParams.addAll(_queryParams('', 'key', key));
     }
+    if (slug != null) {
+      queryParams.addAll(_queryParams('', 'slug', slug));
+    }
 
     const contentTypes = <String>['application/json'];
 
@@ -61,8 +66,10 @@ class AlbumsApi {
   /// * [BulkIdsDto] bulkIdsDto (required):
   ///
   /// * [String] key:
-  Future<List<BulkIdResponseDto>?> addAssetsToAlbum(String id, BulkIdsDto bulkIdsDto, { String? key, }) async {
+  ///
-    final response = await addAssetsToAlbumWithHttpInfo(id, bulkIdsDto,  key: key, );
+  /// * [String] slug:
+  Future<List<BulkIdResponseDto>?> addAssetsToAlbum(String id, BulkIdsDto bulkIdsDto, { String? key, String? slug, }) async {
+    final response = await addAssetsToAlbumWithHttpInfo(id, bulkIdsDto,  key: key, slug: slug, );
     if (response.statusCode >= HttpStatus.badRequest) {
       throw ApiException(response.statusCode, await _decodeBodyBytes(response));
     }
@@ -225,8 +232,10 @@ class AlbumsApi {
   ///
   /// * [String] key:
   ///
+  /// * [String] slug:
+  ///
   /// * [bool] withoutAssets:
-  Future<Response> getAlbumInfoWithHttpInfo(String id, { String? key, bool? withoutAssets, }) async {
+  Future<Response> getAlbumInfoWithHttpInfo(String id, { String? key, String? slug, bool? withoutAssets, }) async {
     // ignore: prefer_const_declarations
     final apiPath = r'/albums/{id}'
       .replaceAll('{id}', id);
@@ -241,6 +250,9 @@ class AlbumsApi {
     if (key != null) {
       queryParams.addAll(_queryParams('', 'key', key));
     }
+    if (slug != null) {
+      queryParams.addAll(_queryParams('', 'slug', slug));
+    }
     if (withoutAssets != null) {
       queryParams.addAll(_queryParams('', 'withoutAssets', withoutAssets));
     }
@@ -265,9 +277,11 @@ class AlbumsApi {
   ///
   /// * [String] key:
   ///
+  /// * [String] slug:
+  ///
   /// * [bool] withoutAssets:
-  Future<AlbumResponseDto?> getAlbumInfo(String id, { String? key, bool? withoutAssets, }) async {
+  Future<AlbumResponseDto?> getAlbumInfo(String id, { String? key, String? slug, bool? withoutAssets, }) async {
-    final response = await getAlbumInfoWithHttpInfo(id,  key: key, withoutAssets: withoutAssets, );
+    final response = await getAlbumInfoWithHttpInfo(id,  key: key, slug: slug, withoutAssets: withoutAssets, );
     if (response.statusCode >= HttpStatus.badRequest) {
       throw ApiException(response.statusCode, await _decodeBodyBytes(response));
     }

mobile/openapi/lib/api/assets_api.dart

@@ -173,7 +173,9 @@ class AssetsApi {
   /// * [String] id (required):
   ///
   /// * [String] key:
-  Future<Response> downloadAssetWithHttpInfo(String id, { String? key, }) async {
+  ///
+  /// * [String] slug:
+  Future<Response> downloadAssetWithHttpInfo(String id, { String? key, String? slug, }) async {
     // ignore: prefer_const_declarations
     final apiPath = r'/assets/{id}/original'
       .replaceAll('{id}', id);
@@ -188,6 +190,9 @@ class AssetsApi {
     if (key != null) {
       queryParams.addAll(_queryParams('', 'key', key));
     }
+    if (slug != null) {
+      queryParams.addAll(_queryParams('', 'slug', slug));
+    }
 
     const contentTypes = <String>[];
 
@@ -208,8 +213,10 @@ class AssetsApi {
   /// * [String] id (required):
   ///
   /// * [String] key:
-  Future<MultipartFile?> downloadAsset(String id, { String? key, }) async {
+  ///
-    final response = await downloadAssetWithHttpInfo(id,  key: key, );
+  /// * [String] slug:
+  Future<MultipartFile?> downloadAsset(String id, { String? key, String? slug, }) async {
+    final response = await downloadAssetWithHttpInfo(id,  key: key, slug: slug, );
     if (response.statusCode >= HttpStatus.badRequest) {
       throw ApiException(response.statusCode, await _decodeBodyBytes(response));
     }
@@ -289,7 +296,9 @@ class AssetsApi {
   /// * [String] id (required):
   ///
   /// * [String] key:
-  Future<Response> getAssetInfoWithHttpInfo(String id, { String? key, }) async {
+  ///
+  /// * [String] slug:
+  Future<Response> getAssetInfoWithHttpInfo(String id, { String? key, String? slug, }) async {
     // ignore: prefer_const_declarations
     final apiPath = r'/assets/{id}'
       .replaceAll('{id}', id);
@@ -304,6 +313,9 @@ class AssetsApi {
     if (key != null) {
       queryParams.addAll(_queryParams('', 'key', key));
     }
+    if (slug != null) {
+      queryParams.addAll(_queryParams('', 'slug', slug));
+    }
 
     const contentTypes = <String>[];
 
@@ -324,8 +336,10 @@ class AssetsApi {
   /// * [String] id (required):
   ///
   /// * [String] key:
-  Future<AssetResponseDto?> getAssetInfo(String id, { String? key, }) async {
+  ///
-    final response = await getAssetInfoWithHttpInfo(id,  key: key, );
+  /// * [String] slug:
+  Future<AssetResponseDto?> getAssetInfo(String id, { String? key, String? slug, }) async {
+    final response = await getAssetInfoWithHttpInfo(id,  key: key, slug: slug, );
     if (response.statusCode >= HttpStatus.badRequest) {
       throw ApiException(response.statusCode, await _decodeBodyBytes(response));
     }
@@ -469,7 +483,9 @@ class AssetsApi {
   /// * [String] id (required):
   ///
   /// * [String] key:
-  Future<Response> playAssetVideoWithHttpInfo(String id, { String? key, }) async {
+  ///
+  /// * [String] slug:
+  Future<Response> playAssetVideoWithHttpInfo(String id, { String? key, String? slug, }) async {
     // ignore: prefer_const_declarations
     final apiPath = r'/assets/{id}/video/playback'
       .replaceAll('{id}', id);
@@ -484,6 +500,9 @@ class AssetsApi {
     if (key != null) {
       queryParams.addAll(_queryParams('', 'key', key));
     }
+    if (slug != null) {
+      queryParams.addAll(_queryParams('', 'slug', slug));
+    }
 
     const contentTypes = <String>[];
 
@@ -504,8 +523,10 @@ class AssetsApi {
   /// * [String] id (required):
   ///
   /// * [String] key:
-  Future<MultipartFile?> playAssetVideo(String id, { String? key, }) async {
+  ///
-    final response = await playAssetVideoWithHttpInfo(id,  key: key, );
+  /// * [String] slug:
+  Future<MultipartFile?> playAssetVideo(String id, { String? key, String? slug, }) async {
+    final response = await playAssetVideoWithHttpInfo(id,  key: key, slug: slug, );
     if (response.statusCode >= HttpStatus.badRequest) {
       throw ApiException(response.statusCode, await _decodeBodyBytes(response));
     }
@@ -541,10 +562,12 @@ class AssetsApi {
   ///
   /// * [String] key:
   ///
+  /// * [String] slug:
+  ///
   /// * [String] duration:
   ///
   /// * [String] filename:
-  Future<Response> replaceAssetWithHttpInfo(String id, MultipartFile assetData, String deviceAssetId, String deviceId, DateTime fileCreatedAt, DateTime fileModifiedAt, { String? key, String? duration, String? filename, }) async {
+  Future<Response> replaceAssetWithHttpInfo(String id, MultipartFile assetData, String deviceAssetId, String deviceId, DateTime fileCreatedAt, DateTime fileModifiedAt, { String? key, String? slug, String? duration, String? filename, }) async {
     // ignore: prefer_const_declarations
     final apiPath = r'/assets/{id}/original'
       .replaceAll('{id}', id);
@@ -559,6 +582,9 @@ class AssetsApi {
     if (key != null) {
       queryParams.addAll(_queryParams('', 'key', key));
     }
+    if (slug != null) {
+      queryParams.addAll(_queryParams('', 'slug', slug));
+    }
 
     const contentTypes = <String>['multipart/form-data'];
 
@@ -628,11 +654,13 @@ class AssetsApi {
   ///
   /// * [String] key:
   ///
+  /// * [String] slug:
+  ///
   /// * [String] duration:
   ///
   /// * [String] filename:
-  Future<AssetMediaResponseDto?> replaceAsset(String id, MultipartFile assetData, String deviceAssetId, String deviceId, DateTime fileCreatedAt, DateTime fileModifiedAt, { String? key, String? duration, String? filename, }) async {
+  Future<AssetMediaResponseDto?> replaceAsset(String id, MultipartFile assetData, String deviceAssetId, String deviceId, DateTime fileCreatedAt, DateTime fileModifiedAt, { String? key, String? slug, String? duration, String? filename, }) async {
-    final response = await replaceAssetWithHttpInfo(id, assetData, deviceAssetId, deviceId, fileCreatedAt, fileModifiedAt,  key: key, duration: duration, filename: filename, );
+    final response = await replaceAssetWithHttpInfo(id, assetData, deviceAssetId, deviceId, fileCreatedAt, fileModifiedAt,  key: key, slug: slug, duration: duration, filename: filename, );
     if (response.statusCode >= HttpStatus.badRequest) {
       throw ApiException(response.statusCode, await _decodeBodyBytes(response));
     }
@@ -791,6 +819,8 @@ class AssetsApi {
   ///
   /// * [String] key:
   ///
+  /// * [String] slug:
+  ///
   /// * [String] xImmichChecksum:
   ///   sha1 checksum that can be used for duplicate detection before the file is uploaded
   ///
@@ -805,7 +835,7 @@ class AssetsApi {
   /// * [MultipartFile] sidecarData:
   ///
   /// * [AssetVisibility] visibility:
-  Future<Response> uploadAssetWithHttpInfo(MultipartFile assetData, String deviceAssetId, String deviceId, DateTime fileCreatedAt, DateTime fileModifiedAt, { String? key, String? xImmichChecksum, String? duration, String? filename, bool? isFavorite, String? livePhotoVideoId, MultipartFile? sidecarData, AssetVisibility? visibility, }) async {
+  Future<Response> uploadAssetWithHttpInfo(MultipartFile assetData, String deviceAssetId, String deviceId, DateTime fileCreatedAt, DateTime fileModifiedAt, { String? key, String? slug, String? xImmichChecksum, String? duration, String? filename, bool? isFavorite, String? livePhotoVideoId, MultipartFile? sidecarData, AssetVisibility? visibility, }) async {
     // ignore: prefer_const_declarations
     final apiPath = r'/assets';
 
@@ -819,6 +849,9 @@ class AssetsApi {
     if (key != null) {
       queryParams.addAll(_queryParams('', 'key', key));
     }
+    if (slug != null) {
+      queryParams.addAll(_queryParams('', 'slug', slug));
+    }
 
     if (xImmichChecksum != null) {
       headerParams[r'x-immich-checksum'] = parameterToString(xImmichChecksum);
@@ -903,6 +936,8 @@ class AssetsApi {
   ///
   /// * [String] key:
   ///
+  /// * [String] slug:
+  ///
   /// * [String] xImmichChecksum:
   ///   sha1 checksum that can be used for duplicate detection before the file is uploaded
   ///
@@ -917,8 +952,8 @@ class AssetsApi {
   /// * [MultipartFile] sidecarData:
   ///
   /// * [AssetVisibility] visibility:
-  Future<AssetMediaResponseDto?> uploadAsset(MultipartFile assetData, String deviceAssetId, String deviceId, DateTime fileCreatedAt, DateTime fileModifiedAt, { String? key, String? xImmichChecksum, String? duration, String? filename, bool? isFavorite, String? livePhotoVideoId, MultipartFile? sidecarData, AssetVisibility? visibility, }) async {
+  Future<AssetMediaResponseDto?> uploadAsset(MultipartFile assetData, String deviceAssetId, String deviceId, DateTime fileCreatedAt, DateTime fileModifiedAt, { String? key, String? slug, String? xImmichChecksum, String? duration, String? filename, bool? isFavorite, String? livePhotoVideoId, MultipartFile? sidecarData, AssetVisibility? visibility, }) async {
-    final response = await uploadAssetWithHttpInfo(assetData, deviceAssetId, deviceId, fileCreatedAt, fileModifiedAt,  key: key, xImmichChecksum: xImmichChecksum, duration: duration, filename: filename, isFavorite: isFavorite, livePhotoVideoId: livePhotoVideoId, sidecarData: sidecarData, visibility: visibility, );
+    final response = await uploadAssetWithHttpInfo(assetData, deviceAssetId, deviceId, fileCreatedAt, fileModifiedAt,  key: key, slug: slug, xImmichChecksum: xImmichChecksum, duration: duration, filename: filename, isFavorite: isFavorite, livePhotoVideoId: livePhotoVideoId, sidecarData: sidecarData, visibility: visibility, );
     if (response.statusCode >= HttpStatus.badRequest) {
       throw ApiException(response.statusCode, await _decodeBodyBytes(response));
     }
@@ -940,7 +975,9 @@ class AssetsApi {
   /// * [String] key:
   ///
   /// * [AssetMediaSize] size:
-  Future<Response> viewAssetWithHttpInfo(String id, { String? key, AssetMediaSize? size, }) async {
+  ///
+  /// * [String] slug:
+  Future<Response> viewAssetWithHttpInfo(String id, { String? key, AssetMediaSize? size, String? slug, }) async {
     // ignore: prefer_const_declarations
     final apiPath = r'/assets/{id}/thumbnail'
       .replaceAll('{id}', id);
@@ -958,6 +995,9 @@ class AssetsApi {
     if (size != null) {
       queryParams.addAll(_queryParams('', 'size', size));
     }
+    if (slug != null) {
+      queryParams.addAll(_queryParams('', 'slug', slug));
+    }
 
     const contentTypes = <String>[];
 
@@ -980,8 +1020,10 @@ class AssetsApi {
   /// * [String] key:
   ///
   /// * [AssetMediaSize] size:
-  Future<MultipartFile?> viewAsset(String id, { String? key, AssetMediaSize? size, }) async {
+  ///
-    final response = await viewAssetWithHttpInfo(id,  key: key, size: size, );
+  /// * [String] slug:
+  Future<MultipartFile?> viewAsset(String id, { String? key, AssetMediaSize? size, String? slug, }) async {
+    final response = await viewAssetWithHttpInfo(id,  key: key, size: size, slug: slug, );
     if (response.statusCode >= HttpStatus.badRequest) {
       throw ApiException(response.statusCode, await _decodeBodyBytes(response));
     }

mobile/openapi/lib/api/download_api.dart

@@ -22,7 +22,9 @@ class DownloadApi {
   /// * [AssetIdsDto] assetIdsDto (required):
   ///
   /// * [String] key:
-  Future<Response> downloadArchiveWithHttpInfo(AssetIdsDto assetIdsDto, { String? key, }) async {
+  ///
+  /// * [String] slug:
+  Future<Response> downloadArchiveWithHttpInfo(AssetIdsDto assetIdsDto, { String? key, String? slug, }) async {
     // ignore: prefer_const_declarations
     final apiPath = r'/download/archive';
 
@@ -36,6 +38,9 @@ class DownloadApi {
     if (key != null) {
       queryParams.addAll(_queryParams('', 'key', key));
     }
+    if (slug != null) {
+      queryParams.addAll(_queryParams('', 'slug', slug));
+    }
 
     const contentTypes = <String>['application/json'];
 
@@ -56,8 +61,10 @@ class DownloadApi {
   /// * [AssetIdsDto] assetIdsDto (required):
   ///
   /// * [String] key:
-  Future<MultipartFile?> downloadArchive(AssetIdsDto assetIdsDto, { String? key, }) async {
+  ///
-    final response = await downloadArchiveWithHttpInfo(assetIdsDto,  key: key, );
+  /// * [String] slug:
+  Future<MultipartFile?> downloadArchive(AssetIdsDto assetIdsDto, { String? key, String? slug, }) async {
+    final response = await downloadArchiveWithHttpInfo(assetIdsDto,  key: key, slug: slug, );
     if (response.statusCode >= HttpStatus.badRequest) {
       throw ApiException(response.statusCode, await _decodeBodyBytes(response));
     }
@@ -77,7 +84,9 @@ class DownloadApi {
   /// * [DownloadInfoDto] downloadInfoDto (required):
   ///
   /// * [String] key:
-  Future<Response> getDownloadInfoWithHttpInfo(DownloadInfoDto downloadInfoDto, { String? key, }) async {
+  ///
+  /// * [String] slug:
+  Future<Response> getDownloadInfoWithHttpInfo(DownloadInfoDto downloadInfoDto, { String? key, String? slug, }) async {
     // ignore: prefer_const_declarations
     final apiPath = r'/download/info';
 
@@ -91,6 +100,9 @@ class DownloadApi {
     if (key != null) {
       queryParams.addAll(_queryParams('', 'key', key));
     }
+    if (slug != null) {
+      queryParams.addAll(_queryParams('', 'slug', slug));
+    }
 
     const contentTypes = <String>['application/json'];
 
@@ -111,8 +123,10 @@ class DownloadApi {
   /// * [DownloadInfoDto] downloadInfoDto (required):
   ///
   /// * [String] key:
-  Future<DownloadResponseDto?> getDownloadInfo(DownloadInfoDto downloadInfoDto, { String? key, }) async {
+  ///
-    final response = await getDownloadInfoWithHttpInfo(downloadInfoDto,  key: key, );
+  /// * [String] slug:
+  Future<DownloadResponseDto?> getDownloadInfo(DownloadInfoDto downloadInfoDto, { String? key, String? slug, }) async {
+    final response = await getDownloadInfoWithHttpInfo(downloadInfoDto,  key: key, slug: slug, );
     if (response.statusCode >= HttpStatus.badRequest) {
       throw ApiException(response.statusCode, await _decodeBodyBytes(response));
     }

mobile/openapi/lib/api/shared_links_api.dart

@@ -24,7 +24,9 @@ class SharedLinksApi {
   /// * [AssetIdsDto] assetIdsDto (required):
   ///
   /// * [String] key:
-  Future<Response> addSharedLinkAssetsWithHttpInfo(String id, AssetIdsDto assetIdsDto, { String? key, }) async {
+  ///
+  /// * [String] slug:
+  Future<Response> addSharedLinkAssetsWithHttpInfo(String id, AssetIdsDto assetIdsDto, { String? key, String? slug, }) async {
     // ignore: prefer_const_declarations
     final apiPath = r'/shared-links/{id}/assets'
       .replaceAll('{id}', id);
@@ -39,6 +41,9 @@ class SharedLinksApi {
     if (key != null) {
       queryParams.addAll(_queryParams('', 'key', key));
     }
+    if (slug != null) {
+      queryParams.addAll(_queryParams('', 'slug', slug));
+    }
 
     const contentTypes = <String>['application/json'];
 
@@ -61,8 +66,10 @@ class SharedLinksApi {
   /// * [AssetIdsDto] assetIdsDto (required):
   ///
   /// * [String] key:
-  Future<List<AssetIdsResponseDto>?> addSharedLinkAssets(String id, AssetIdsDto assetIdsDto, { String? key, }) async {
+  ///
-    final response = await addSharedLinkAssetsWithHttpInfo(id, assetIdsDto,  key: key, );
+  /// * [String] slug:
+  Future<List<AssetIdsResponseDto>?> addSharedLinkAssets(String id, AssetIdsDto assetIdsDto, { String? key, String? slug, }) async {
+    final response = await addSharedLinkAssetsWithHttpInfo(id, assetIdsDto,  key: key, slug: slug, );
     if (response.statusCode >= HttpStatus.badRequest) {
       throw ApiException(response.statusCode, await _decodeBodyBytes(response));
     }
@@ -187,8 +194,10 @@ class SharedLinksApi {
   ///
   /// * [String] password:
   ///
+  /// * [String] slug:
+  ///
   /// * [String] token:
-  Future<Response> getMySharedLinkWithHttpInfo({ String? key, String? password, String? token, }) async {
+  Future<Response> getMySharedLinkWithHttpInfo({ String? key, String? password, String? slug, String? token, }) async {
     // ignore: prefer_const_declarations
     final apiPath = r'/shared-links/me';
 
@@ -205,6 +214,9 @@ class SharedLinksApi {
     if (password != null) {
       queryParams.addAll(_queryParams('', 'password', password));
     }
+    if (slug != null) {
+      queryParams.addAll(_queryParams('', 'slug', slug));
+    }
     if (token != null) {
       queryParams.addAll(_queryParams('', 'token', token));
     }
@@ -229,9 +241,11 @@ class SharedLinksApi {
   ///
   /// * [String] password:
   ///
+  /// * [String] slug:
+  ///
   /// * [String] token:
-  Future<SharedLinkResponseDto?> getMySharedLink({ String? key, String? password, String? token, }) async {
+  Future<SharedLinkResponseDto?> getMySharedLink({ String? key, String? password, String? slug, String? token, }) async {
-    final response = await getMySharedLinkWithHttpInfo( key: key, password: password, token: token, );
+    final response = await getMySharedLinkWithHttpInfo( key: key, password: password, slug: slug, token: token, );
     if (response.statusCode >= HttpStatus.badRequest) {
       throw ApiException(response.statusCode, await _decodeBodyBytes(response));
     }
@@ -341,7 +355,9 @@ class SharedLinksApi {
   /// * [AssetIdsDto] assetIdsDto (required):
   ///
   /// * [String] key:
-  Future<Response> removeSharedLinkAssetsWithHttpInfo(String id, AssetIdsDto assetIdsDto, { String? key, }) async {
+  ///
+  /// * [String] slug:
+  Future<Response> removeSharedLinkAssetsWithHttpInfo(String id, AssetIdsDto assetIdsDto, { String? key, String? slug, }) async {
     // ignore: prefer_const_declarations
     final apiPath = r'/shared-links/{id}/assets'
       .replaceAll('{id}', id);
@@ -356,6 +372,9 @@ class SharedLinksApi {
     if (key != null) {
       queryParams.addAll(_queryParams('', 'key', key));
     }
+    if (slug != null) {
+      queryParams.addAll(_queryParams('', 'slug', slug));
+    }
 
     const contentTypes = <String>['application/json'];
 
@@ -378,8 +397,10 @@ class SharedLinksApi {
   /// * [AssetIdsDto] assetIdsDto (required):
   ///
   /// * [String] key:
-  Future<List<AssetIdsResponseDto>?> removeSharedLinkAssets(String id, AssetIdsDto assetIdsDto, { String? key, }) async {
+  ///
-    final response = await removeSharedLinkAssetsWithHttpInfo(id, assetIdsDto,  key: key, );
+  /// * [String] slug:
+  Future<List<AssetIdsResponseDto>?> removeSharedLinkAssets(String id, AssetIdsDto assetIdsDto, { String? key, String? slug, }) async {
+    final response = await removeSharedLinkAssetsWithHttpInfo(id, assetIdsDto,  key: key, slug: slug, );
     if (response.statusCode >= HttpStatus.badRequest) {
       throw ApiException(response.statusCode, await _decodeBodyBytes(response));
     }

mobile/openapi/lib/api/timeline_api.dart

@@ -39,6 +39,8 @@ class TimelineApi {
   /// * [String] personId:
   ///   Filter assets containing a specific person (face recognition)
   ///
+  /// * [String] slug:
+  ///
   /// * [String] tagId:
   ///   Filter assets with a specific tag
   ///
@@ -53,7 +55,7 @@ class TimelineApi {
   ///
   /// * [bool] withStacked:
   ///   Include stacked assets in the response. When true, only primary assets from stacks are returned.
-  Future<Response> getTimeBucketWithHttpInfo(String timeBucket, { String? albumId, bool? isFavorite, bool? isTrashed, String? key, AssetOrder? order, String? personId, String? tagId, String? userId, AssetVisibility? visibility, bool? withPartners, bool? withStacked, }) async {
+  Future<Response> getTimeBucketWithHttpInfo(String timeBucket, { String? albumId, bool? isFavorite, bool? isTrashed, String? key, AssetOrder? order, String? personId, String? slug, String? tagId, String? userId, AssetVisibility? visibility, bool? withPartners, bool? withStacked, }) async {
     // ignore: prefer_const_declarations
     final apiPath = r'/timeline/bucket';
 
@@ -82,6 +84,9 @@ class TimelineApi {
     if (personId != null) {
       queryParams.addAll(_queryParams('', 'personId', personId));
     }
+    if (slug != null) {
+      queryParams.addAll(_queryParams('', 'slug', slug));
+    }
     if (tagId != null) {
       queryParams.addAll(_queryParams('', 'tagId', tagId));
     }
@@ -135,6 +140,8 @@ class TimelineApi {
   /// * [String] personId:
   ///   Filter assets containing a specific person (face recognition)
   ///
+  /// * [String] slug:
+  ///
   /// * [String] tagId:
   ///   Filter assets with a specific tag
   ///
@@ -149,8 +156,8 @@ class TimelineApi {
   ///
   /// * [bool] withStacked:
   ///   Include stacked assets in the response. When true, only primary assets from stacks are returned.
-  Future<TimeBucketAssetResponseDto?> getTimeBucket(String timeBucket, { String? albumId, bool? isFavorite, bool? isTrashed, String? key, AssetOrder? order, String? personId, String? tagId, String? userId, AssetVisibility? visibility, bool? withPartners, bool? withStacked, }) async {
+  Future<TimeBucketAssetResponseDto?> getTimeBucket(String timeBucket, { String? albumId, bool? isFavorite, bool? isTrashed, String? key, AssetOrder? order, String? personId, String? slug, String? tagId, String? userId, AssetVisibility? visibility, bool? withPartners, bool? withStacked, }) async {
-    final response = await getTimeBucketWithHttpInfo(timeBucket,  albumId: albumId, isFavorite: isFavorite, isTrashed: isTrashed, key: key, order: order, personId: personId, tagId: tagId, userId: userId, visibility: visibility, withPartners: withPartners, withStacked: withStacked, );
+    final response = await getTimeBucketWithHttpInfo(timeBucket,  albumId: albumId, isFavorite: isFavorite, isTrashed: isTrashed, key: key, order: order, personId: personId, slug: slug, tagId: tagId, userId: userId, visibility: visibility, withPartners: withPartners, withStacked: withStacked, );
     if (response.statusCode >= HttpStatus.badRequest) {
       throw ApiException(response.statusCode, await _decodeBodyBytes(response));
     }
@@ -184,6 +191,8 @@ class TimelineApi {
   /// * [String] personId:
   ///   Filter assets containing a specific person (face recognition)
   ///
+  /// * [String] slug:
+  ///
   /// * [String] tagId:
   ///   Filter assets with a specific tag
   ///
@@ -198,7 +207,7 @@ class TimelineApi {
   ///
   /// * [bool] withStacked:
   ///   Include stacked assets in the response. When true, only primary assets from stacks are returned.
-  Future<Response> getTimeBucketsWithHttpInfo({ String? albumId, bool? isFavorite, bool? isTrashed, String? key, AssetOrder? order, String? personId, String? tagId, String? userId, AssetVisibility? visibility, bool? withPartners, bool? withStacked, }) async {
+  Future<Response> getTimeBucketsWithHttpInfo({ String? albumId, bool? isFavorite, bool? isTrashed, String? key, AssetOrder? order, String? personId, String? slug, String? tagId, String? userId, AssetVisibility? visibility, bool? withPartners, bool? withStacked, }) async {
     // ignore: prefer_const_declarations
     final apiPath = r'/timeline/buckets';
 
@@ -227,6 +236,9 @@ class TimelineApi {
     if (personId != null) {
       queryParams.addAll(_queryParams('', 'personId', personId));
     }
+    if (slug != null) {
+      queryParams.addAll(_queryParams('', 'slug', slug));
+    }
     if (tagId != null) {
       queryParams.addAll(_queryParams('', 'tagId', tagId));
     }
@@ -276,6 +288,8 @@ class TimelineApi {
   /// * [String] personId:
   ///   Filter assets containing a specific person (face recognition)
   ///
+  /// * [String] slug:
+  ///
   /// * [String] tagId:
   ///   Filter assets with a specific tag
   ///
@@ -290,8 +304,8 @@ class TimelineApi {
   ///
   /// * [bool] withStacked:
   ///   Include stacked assets in the response. When true, only primary assets from stacks are returned.
-  Future<List<TimeBucketsResponseDto>?> getTimeBuckets({ String? albumId, bool? isFavorite, bool? isTrashed, String? key, AssetOrder? order, String? personId, String? tagId, String? userId, AssetVisibility? visibility, bool? withPartners, bool? withStacked, }) async {
+  Future<List<TimeBucketsResponseDto>?> getTimeBuckets({ String? albumId, bool? isFavorite, bool? isTrashed, String? key, AssetOrder? order, String? personId, String? slug, String? tagId, String? userId, AssetVisibility? visibility, bool? withPartners, bool? withStacked, }) async {
-    final response = await getTimeBucketsWithHttpInfo( albumId: albumId, isFavorite: isFavorite, isTrashed: isTrashed, key: key, order: order, personId: personId, tagId: tagId, userId: userId, visibility: visibility, withPartners: withPartners, withStacked: withStacked, );
+    final response = await getTimeBucketsWithHttpInfo( albumId: albumId, isFavorite: isFavorite, isTrashed: isTrashed, key: key, order: order, personId: personId, slug: slug, tagId: tagId, userId: userId, visibility: visibility, withPartners: withPartners, withStacked: withStacked, );
     if (response.statusCode >= HttpStatus.badRequest) {
       throw ApiException(response.statusCode, await _decodeBodyBytes(response));
     }

mobile/openapi/lib/model/shared_link_create_dto.dart

@@ -21,6 +21,7 @@ class SharedLinkCreateDto {
     this.expiresAt,
     this.password,
     this.showMetadata = true,
+    this.slug,
     required this.type,
   });
 
@@ -44,26 +45,16 @@ class SharedLinkCreateDto {
 
   List<String> assetIds;
 
-  ///
-  /// 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.
-  ///
   String? description;
 
   DateTime? expiresAt;
 
-  ///
-  /// 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.
-  ///
   String? password;
 
   bool showMetadata;
 
+  String? slug;
+
   SharedLinkType type;
 
   @override
@@ -76,6 +67,7 @@ class SharedLinkCreateDto {
     other.expiresAt == expiresAt &&
     other.password == password &&
     other.showMetadata == showMetadata &&
+    other.slug == slug &&
     other.type == type;
 
   @override
@@ -89,10 +81,11 @@ class SharedLinkCreateDto {
     (expiresAt == null ? 0 : expiresAt!.hashCode) +
     (password == null ? 0 : password!.hashCode) +
     (showMetadata.hashCode) +
+    (slug == null ? 0 : slug!.hashCode) +
     (type.hashCode);
 
   @override
-  String toString() => 'SharedLinkCreateDto[albumId=$albumId, allowDownload=$allowDownload, allowUpload=$allowUpload, assetIds=$assetIds, description=$description, expiresAt=$expiresAt, password=$password, showMetadata=$showMetadata, type=$type]';
+  String toString() => 'SharedLinkCreateDto[albumId=$albumId, allowDownload=$allowDownload, allowUpload=$allowUpload, assetIds=$assetIds, description=$description, expiresAt=$expiresAt, password=$password, showMetadata=$showMetadata, slug=$slug, type=$type]';
 
   Map<String, dynamic> toJson() {
     final json = <String, dynamic>{};
@@ -124,6 +117,11 @@ class SharedLinkCreateDto {
     //  json[r'password'] = null;
     }
       json[r'showMetadata'] = this.showMetadata;
+    if (this.slug != null) {
+      json[r'slug'] = this.slug;
+    } else {
+    //  json[r'slug'] = null;
+    }
       json[r'type'] = this.type;
     return json;
   }
@@ -147,6 +145,7 @@ class SharedLinkCreateDto {
         expiresAt: mapDateTime(json, r'expiresAt', r''),
         password: mapValueOfType<String>(json, r'password'),
         showMetadata: mapValueOfType<bool>(json, r'showMetadata') ?? true,
+        slug: mapValueOfType<String>(json, r'slug'),
         type: SharedLinkType.fromJson(json[r'type'])!,
       );
     }

mobile/openapi/lib/model/shared_link_edit_dto.dart

@@ -20,6 +20,7 @@ class SharedLinkEditDto {
     this.expiresAt,
     this.password,
     this.showMetadata,
+    this.slug,
   });
 
   ///
@@ -47,22 +48,10 @@ class SharedLinkEditDto {
   ///
   bool? changeExpiryTime;
 
-  ///
-  /// 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.
-  ///
   String? description;
 
   DateTime? expiresAt;
 
-  ///
-  /// 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.
-  ///
   String? password;
 
   ///
@@ -73,6 +62,8 @@ class SharedLinkEditDto {
   ///
   bool? showMetadata;
 
+  String? slug;
+
   @override
   bool operator ==(Object other) => identical(this, other) || other is SharedLinkEditDto &&
     other.allowDownload == allowDownload &&
@@ -81,7 +72,8 @@ class SharedLinkEditDto {
     other.description == description &&
     other.expiresAt == expiresAt &&
     other.password == password &&
-    other.showMetadata == showMetadata;
+    other.showMetadata == showMetadata &&
+    other.slug == slug;
 
   @override
   int get hashCode =>
@@ -92,10 +84,11 @@ class SharedLinkEditDto {
     (description == null ? 0 : description!.hashCode) +
     (expiresAt == null ? 0 : expiresAt!.hashCode) +
     (password == null ? 0 : password!.hashCode) +
-    (showMetadata == null ? 0 : showMetadata!.hashCode);
+    (showMetadata == null ? 0 : showMetadata!.hashCode) +
+    (slug == null ? 0 : slug!.hashCode);
 
   @override
-  String toString() => 'SharedLinkEditDto[allowDownload=$allowDownload, allowUpload=$allowUpload, changeExpiryTime=$changeExpiryTime, description=$description, expiresAt=$expiresAt, password=$password, showMetadata=$showMetadata]';
+  String toString() => 'SharedLinkEditDto[allowDownload=$allowDownload, allowUpload=$allowUpload, changeExpiryTime=$changeExpiryTime, description=$description, expiresAt=$expiresAt, password=$password, showMetadata=$showMetadata, slug=$slug]';
 
   Map<String, dynamic> toJson() {
     final json = <String, dynamic>{};
@@ -134,6 +127,11 @@ class SharedLinkEditDto {
     } else {
     //  json[r'showMetadata'] = null;
     }
+    if (this.slug != null) {
+      json[r'slug'] = this.slug;
+    } else {
+    //  json[r'slug'] = null;
+    }
     return json;
   }
 
@@ -153,6 +151,7 @@ class SharedLinkEditDto {
         expiresAt: mapDateTime(json, r'expiresAt', r''),
         password: mapValueOfType<String>(json, r'password'),
         showMetadata: mapValueOfType<bool>(json, r'showMetadata'),
+        slug: mapValueOfType<String>(json, r'slug'),
       );
     }
     return null;

mobile/openapi/lib/model/shared_link_response_dto.dart

@@ -24,6 +24,7 @@ class SharedLinkResponseDto {
     required this.key,
     required this.password,
     required this.showMetadata,
+    required this.slug,
     this.token,
     required this.type,
     required this.userId,
@@ -57,6 +58,8 @@ class SharedLinkResponseDto {
 
   bool showMetadata;
 
+  String? slug;
+
   String? token;
 
   SharedLinkType type;
@@ -76,6 +79,7 @@ class SharedLinkResponseDto {
     other.key == key &&
     other.password == password &&
     other.showMetadata == showMetadata &&
+    other.slug == slug &&
     other.token == token &&
     other.type == type &&
     other.userId == userId;
@@ -94,12 +98,13 @@ class SharedLinkResponseDto {
     (key.hashCode) +
     (password == null ? 0 : password!.hashCode) +
     (showMetadata.hashCode) +
+    (slug == null ? 0 : slug!.hashCode) +
     (token == null ? 0 : token!.hashCode) +
     (type.hashCode) +
     (userId.hashCode);
 
   @override
-  String toString() => 'SharedLinkResponseDto[album=$album, allowDownload=$allowDownload, allowUpload=$allowUpload, assets=$assets, createdAt=$createdAt, description=$description, expiresAt=$expiresAt, id=$id, key=$key, password=$password, showMetadata=$showMetadata, token=$token, type=$type, userId=$userId]';
+  String toString() => 'SharedLinkResponseDto[album=$album, allowDownload=$allowDownload, allowUpload=$allowUpload, assets=$assets, createdAt=$createdAt, description=$description, expiresAt=$expiresAt, id=$id, key=$key, password=$password, showMetadata=$showMetadata, slug=$slug, token=$token, type=$type, userId=$userId]';
 
   Map<String, dynamic> toJson() {
     final json = <String, dynamic>{};
@@ -130,6 +135,11 @@ class SharedLinkResponseDto {
     //  json[r'password'] = null;
     }
       json[r'showMetadata'] = this.showMetadata;
+    if (this.slug != null) {
+      json[r'slug'] = this.slug;
+    } else {
+    //  json[r'slug'] = null;
+    }
     if (this.token != null) {
       json[r'token'] = this.token;
     } else {
@@ -160,6 +170,7 @@ class SharedLinkResponseDto {
         key: mapValueOfType<String>(json, r'key')!,
         password: mapValueOfType<String>(json, r'password'),
         showMetadata: mapValueOfType<bool>(json, r'showMetadata')!,
+        slug: mapValueOfType<String>(json, r'slug'),
         token: mapValueOfType<String>(json, r'token'),
         type: SharedLinkType.fromJson(json[r'type'])!,
         userId: mapValueOfType<String>(json, r'userId')!,
@@ -220,6 +231,7 @@ class SharedLinkResponseDto {
     'key',
     'password',
     'showMetadata',
+    'slug',
     'type',
     'userId',
   };

open-api/immich-openapi-specs.json

@@ -956,6 +956,14 @@
               "type": "string"
             }
           },
+          {
+            "name": "slug",
+            "required": false,
+            "in": "query",
+            "schema": {
+              "type": "string"
+            }
+          },
           {
             "name": "withoutAssets",
             "required": false,
@@ -1116,6 +1124,14 @@
             "schema": {
               "type": "string"
             }
+          },
+          {
+            "name": "slug",
+            "required": false,
+            "in": "query",
+            "schema": {
+              "type": "string"
+            }
           }
         ],
         "requestBody": {
@@ -1550,6 +1566,14 @@
               "type": "string"
             }
           },
+          {
+            "name": "slug",
+            "required": false,
+            "in": "query",
+            "schema": {
+              "type": "string"
+            }
+          },
           {
             "name": "x-immich-checksum",
             "in": "header",
@@ -1929,6 +1953,14 @@
             "schema": {
               "type": "string"
             }
+          },
+          {
+            "name": "slug",
+            "required": false,
+            "in": "query",
+            "schema": {
+              "type": "string"
+            }
           }
         ],
         "responses": {
@@ -2029,6 +2061,14 @@
             "schema": {
               "type": "string"
             }
+          },
+          {
+            "name": "slug",
+            "required": false,
+            "in": "query",
+            "schema": {
+              "type": "string"
+            }
           }
         ],
         "responses": {
@@ -2079,6 +2119,14 @@
             "schema": {
               "type": "string"
             }
+          },
+          {
+            "name": "slug",
+            "required": false,
+            "in": "query",
+            "schema": {
+              "type": "string"
+            }
           }
         ],
         "requestBody": {
@@ -2151,6 +2199,14 @@
             "schema": {
               "$ref": "#/components/schemas/AssetMediaSize"
             }
+          },
+          {
+            "name": "slug",
+            "required": false,
+            "in": "query",
+            "schema": {
+              "type": "string"
+            }
           }
         ],
         "responses": {
@@ -2202,6 +2258,14 @@
             "schema": {
               "type": "string"
             }
+          },
+          {
+            "name": "slug",
+            "required": false,
+            "in": "query",
+            "schema": {
+              "type": "string"
+            }
           }
         ],
         "responses": {
@@ -2605,6 +2669,14 @@
             "schema": {
               "type": "string"
             }
+          },
+          {
+            "name": "slug",
+            "required": false,
+            "in": "query",
+            "schema": {
+              "type": "string"
+            }
           }
         ],
         "requestBody": {
@@ -2657,6 +2729,14 @@
             "schema": {
               "type": "string"
             }
+          },
+          {
+            "name": "slug",
+            "required": false,
+            "in": "query",
+            "schema": {
+              "type": "string"
+            }
           }
         ],
         "requestBody": {
@@ -6217,6 +6297,14 @@
               "type": "string"
             }
           },
+          {
+            "name": "slug",
+            "required": false,
+            "in": "query",
+            "schema": {
+              "type": "string"
+            }
+          },
           {
             "name": "token",
             "required": false,
@@ -6399,6 +6487,14 @@
             "schema": {
               "type": "string"
             }
+          },
+          {
+            "name": "slug",
+            "required": false,
+            "in": "query",
+            "schema": {
+              "type": "string"
+            }
           }
         ],
         "requestBody": {
@@ -6460,6 +6556,14 @@
             "schema": {
               "type": "string"
             }
+          },
+          {
+            "name": "slug",
+            "required": false,
+            "in": "query",
+            "schema": {
+              "type": "string"
+            }
           }
         ],
         "requestBody": {
@@ -7730,6 +7834,14 @@
               "type": "string"
             }
           },
+          {
+            "name": "slug",
+            "required": false,
+            "in": "query",
+            "schema": {
+              "type": "string"
+            }
+          },
           {
             "name": "tagId",
             "required": false,
@@ -7875,6 +7987,14 @@
               "type": "string"
             }
           },
+          {
+            "name": "slug",
+            "required": false,
+            "in": "query",
+            "schema": {
+              "type": "string"
+            }
+          },
           {
             "name": "tagId",
             "required": false,
@@ -13027,6 +13147,7 @@
             "type": "array"
           },
           "description": {
+            "nullable": true,
             "type": "string"
           },
           "expiresAt": {
@@ -13036,12 +13157,17 @@
             "type": "string"
           },
           "password": {
+            "nullable": true,
             "type": "string"
           },
           "showMetadata": {
             "default": true,
             "type": "boolean"
           },
+          "slug": {
+            "nullable": true,
+            "type": "string"
+          },
           "type": {
             "allOf": [
               {
@@ -13068,6 +13194,7 @@
             "type": "boolean"
           },
           "description": {
+            "nullable": true,
             "type": "string"
           },
           "expiresAt": {
@@ -13076,10 +13203,15 @@
             "type": "string"
           },
           "password": {
+            "nullable": true,
             "type": "string"
           },
           "showMetadata": {
             "type": "boolean"
+          },
+          "slug": {
+            "nullable": true,
+            "type": "string"
           }
         },
         "type": "object"
@@ -13127,6 +13259,10 @@
           "showMetadata": {
             "type": "boolean"
           },
+          "slug": {
+            "nullable": true,
+            "type": "string"
+          },
           "token": {
             "nullable": true,
             "type": "string"
@@ -13153,6 +13289,7 @@
           "key",
           "password",
           "showMetadata",
+          "slug",
           "type",
           "userId"
         ],

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

@@ -1199,6 +1199,7 @@ export type SharedLinkResponseDto = {
     key: string;
     password: string | null;
     showMetadata: boolean;
+    slug: string | null;
     token?: string | null;
     "type": SharedLinkType;
     userId: string;
@@ -1208,10 +1209,11 @@ export type SharedLinkCreateDto = {
     allowDownload?: boolean;
     allowUpload?: boolean;
     assetIds?: string[];
-    description?: string;
+    description?: string | null;
     expiresAt?: string | null;
-    password?: string;
+    password?: string | null;
     showMetadata?: boolean;
+    slug?: string | null;
     "type": SharedLinkType;
 };
 export type SharedLinkEditDto = {
@@ -1221,10 +1223,11 @@ export type SharedLinkEditDto = {
     Setting this flag and not sending expiryAt is considered as null instead.
     Clients that can send null values can ignore this. */
     changeExpiryTime?: boolean;
-    description?: string;
+    description?: string | null;
     expiresAt?: string | null;
-    password?: string;
+    password?: string | null;
     showMetadata?: boolean;
+    slug?: string | null;
 };
 export type AssetIdsResponseDto = {
     assetId: string;
@@ -1821,9 +1824,10 @@ export function deleteAlbum({ id }: {
         method: "DELETE"
     }));
 }
-export function getAlbumInfo({ id, key, withoutAssets }: {
+export function getAlbumInfo({ id, key, slug, withoutAssets }: {
     id: string;
     key?: string;
+    slug?: string;
     withoutAssets?: boolean;
 }, opts?: Oazapfts.RequestOpts) {
     return oazapfts.ok(oazapfts.fetchJson<{
@@ -1831,6 +1835,7 @@ export function getAlbumInfo({ id, key, withoutAssets }: {
         data: AlbumResponseDto;
     }>(`/albums/${encodeURIComponent(id)}${QS.query(QS.explode({
         key,
+        slug,
         withoutAssets
     }))}`, {
         ...opts
@@ -1862,16 +1867,18 @@ export function removeAssetFromAlbum({ id, bulkIdsDto }: {
         body: bulkIdsDto
     })));
 }
-export function addAssetsToAlbum({ id, key, bulkIdsDto }: {
+export function addAssetsToAlbum({ id, key, slug, bulkIdsDto }: {
     id: string;
     key?: string;
+    slug?: string;
     bulkIdsDto: BulkIdsDto;
 }, opts?: Oazapfts.RequestOpts) {
     return oazapfts.ok(oazapfts.fetchJson<{
         status: 200;
         data: BulkIdResponseDto[];
     }>(`/albums/${encodeURIComponent(id)}/assets${QS.query(QS.explode({
-        key
+        key,
+        slug
     }))}`, oazapfts.json({
         ...opts,
         method: "PUT",
@@ -1971,8 +1978,9 @@ export function deleteAssets({ assetBulkDeleteDto }: {
         body: assetBulkDeleteDto
     })));
 }
-export function uploadAsset({ key, xImmichChecksum, assetMediaCreateDto }: {
+export function uploadAsset({ key, slug, xImmichChecksum, assetMediaCreateDto }: {
     key?: string;
+    slug?: string;
     xImmichChecksum?: string;
     assetMediaCreateDto: AssetMediaCreateDto;
 }, opts?: Oazapfts.RequestOpts) {
@@ -1980,7 +1988,8 @@ export function uploadAsset({ key, xImmichChecksum, assetMediaCreateDto }: {
         status: 201;
         data: AssetMediaResponseDto;
     }>(`/assets${QS.query(QS.explode({
-        key
+        key,
+        slug
     }))}`, oazapfts.multipart({
         ...opts,
         method: "POST",
@@ -2082,15 +2091,17 @@ export function getAssetStatistics({ isFavorite, isTrashed, visibility }: {
         ...opts
     }));
 }
-export function getAssetInfo({ id, key }: {
+export function getAssetInfo({ id, key, slug }: {
     id: string;
     key?: string;
+    slug?: string;
 }, opts?: Oazapfts.RequestOpts) {
     return oazapfts.ok(oazapfts.fetchJson<{
         status: 200;
         data: AssetResponseDto;
     }>(`/assets/${encodeURIComponent(id)}${QS.query(QS.explode({
-        key
+        key,
+        slug
     }))}`, {
         ...opts
     }));
@@ -2108,15 +2119,17 @@ export function updateAsset({ id, updateAssetDto }: {
         body: updateAssetDto
     })));
 }
-export function downloadAsset({ id, key }: {
+export function downloadAsset({ id, key, slug }: {
     id: string;
     key?: string;
+    slug?: string;
 }, opts?: Oazapfts.RequestOpts) {
     return oazapfts.ok(oazapfts.fetchBlob<{
         status: 200;
         data: Blob;
     }>(`/assets/${encodeURIComponent(id)}/original${QS.query(QS.explode({
-        key
+        key,
+        slug
     }))}`, {
         ...opts
     }));
@@ -2124,46 +2137,52 @@ export function downloadAsset({ id, key }: {
 /**
  * replaceAsset
  */
-export function replaceAsset({ id, key, assetMediaReplaceDto }: {
+export function replaceAsset({ id, key, slug, assetMediaReplaceDto }: {
     id: string;
     key?: string;
+    slug?: string;
     assetMediaReplaceDto: AssetMediaReplaceDto;
 }, opts?: Oazapfts.RequestOpts) {
     return oazapfts.ok(oazapfts.fetchJson<{
         status: 200;
         data: AssetMediaResponseDto;
     }>(`/assets/${encodeURIComponent(id)}/original${QS.query(QS.explode({
-        key
+        key,
+        slug
     }))}`, oazapfts.multipart({
         ...opts,
         method: "PUT",
         body: assetMediaReplaceDto
     })));
 }
-export function viewAsset({ id, key, size }: {
+export function viewAsset({ id, key, size, slug }: {
     id: string;
     key?: string;
     size?: AssetMediaSize;
+    slug?: string;
 }, opts?: Oazapfts.RequestOpts) {
     return oazapfts.ok(oazapfts.fetchBlob<{
         status: 200;
         data: Blob;
     }>(`/assets/${encodeURIComponent(id)}/thumbnail${QS.query(QS.explode({
         key,
-        size
+        size,
+        slug
     }))}`, {
         ...opts
     }));
 }
-export function playAssetVideo({ id, key }: {
+export function playAssetVideo({ id, key, slug }: {
     id: string;
     key?: string;
+    slug?: string;
 }, opts?: Oazapfts.RequestOpts) {
     return oazapfts.ok(oazapfts.fetchBlob<{
         status: 200;
         data: Blob;
     }>(`/assets/${encodeURIComponent(id)}/video/playback${QS.query(QS.explode({
-        key
+        key,
+        slug
     }))}`, {
         ...opts
     }));
@@ -2272,30 +2291,34 @@ export function validateAccessToken(opts?: Oazapfts.RequestOpts) {
         method: "POST"
     }));
 }
-export function downloadArchive({ key, assetIdsDto }: {
+export function downloadArchive({ key, slug, assetIdsDto }: {
     key?: string;
+    slug?: string;
     assetIdsDto: AssetIdsDto;
 }, opts?: Oazapfts.RequestOpts) {
     return oazapfts.ok(oazapfts.fetchBlob<{
         status: 200;
         data: Blob;
     }>(`/download/archive${QS.query(QS.explode({
-        key
+        key,
+        slug
     }))}`, oazapfts.json({
         ...opts,
         method: "POST",
         body: assetIdsDto
     })));
 }
-export function getDownloadInfo({ key, downloadInfoDto }: {
+export function getDownloadInfo({ key, slug, downloadInfoDto }: {
     key?: string;
+    slug?: string;
     downloadInfoDto: DownloadInfoDto;
 }, opts?: Oazapfts.RequestOpts) {
     return oazapfts.ok(oazapfts.fetchJson<{
         status: 201;
         data: DownloadResponseDto;
     }>(`/download/info${QS.query(QS.explode({
-        key
+        key,
+        slug
     }))}`, oazapfts.json({
         ...opts,
         method: "POST",
@@ -3230,9 +3253,10 @@ export function createSharedLink({ sharedLinkCreateDto }: {
         body: sharedLinkCreateDto
     })));
 }
-export function getMySharedLink({ key, password, token }: {
+export function getMySharedLink({ key, password, slug, token }: {
     key?: string;
     password?: string;
+    slug?: string;
     token?: string;
 }, opts?: Oazapfts.RequestOpts) {
     return oazapfts.ok(oazapfts.fetchJson<{
@@ -3241,6 +3265,7 @@ export function getMySharedLink({ key, password, token }: {
     }>(`/shared-links/me${QS.query(QS.explode({
         key,
         password,
+        slug,
         token
     }))}`, {
         ...opts
@@ -3277,32 +3302,36 @@ export function updateSharedLink({ id, sharedLinkEditDto }: {
         body: sharedLinkEditDto
     })));
 }
-export function removeSharedLinkAssets({ id, key, assetIdsDto }: {
+export function removeSharedLinkAssets({ id, key, slug, assetIdsDto }: {
     id: string;
     key?: string;
+    slug?: string;
     assetIdsDto: AssetIdsDto;
 }, opts?: Oazapfts.RequestOpts) {
     return oazapfts.ok(oazapfts.fetchJson<{
         status: 200;
         data: AssetIdsResponseDto[];
     }>(`/shared-links/${encodeURIComponent(id)}/assets${QS.query(QS.explode({
-        key
+        key,
+        slug
     }))}`, oazapfts.json({
         ...opts,
         method: "DELETE",
         body: assetIdsDto
     })));
 }
-export function addSharedLinkAssets({ id, key, assetIdsDto }: {
+export function addSharedLinkAssets({ id, key, slug, assetIdsDto }: {
     id: string;
     key?: string;
+    slug?: string;
     assetIdsDto: AssetIdsDto;
 }, opts?: Oazapfts.RequestOpts) {
     return oazapfts.ok(oazapfts.fetchJson<{
         status: 200;
         data: AssetIdsResponseDto[];
     }>(`/shared-links/${encodeURIComponent(id)}/assets${QS.query(QS.explode({
-        key
+        key,
+        slug
     }))}`, oazapfts.json({
         ...opts,
         method: "PUT",
@@ -3611,13 +3640,14 @@ export function tagAssets({ id, bulkIdsDto }: {
         body: bulkIdsDto
     })));
 }
-export function getTimeBucket({ albumId, isFavorite, isTrashed, key, order, personId, tagId, timeBucket, userId, visibility, withPartners, withStacked }: {
+export function getTimeBucket({ albumId, isFavorite, isTrashed, key, order, personId, slug, tagId, timeBucket, userId, visibility, withPartners, withStacked }: {
     albumId?: string;
     isFavorite?: boolean;
     isTrashed?: boolean;
     key?: string;
     order?: AssetOrder;
     personId?: string;
+    slug?: string;
     tagId?: string;
     timeBucket: string;
     userId?: string;
@@ -3635,6 +3665,7 @@ export function getTimeBucket({ albumId, isFavorite, isTrashed, key, order, pers
         key,
         order,
         personId,
+        slug,
         tagId,
         timeBucket,
         userId,
@@ -3645,13 +3676,14 @@ export function getTimeBucket({ albumId, isFavorite, isTrashed, key, order, pers
         ...opts
     }));
 }
-export function getTimeBuckets({ albumId, isFavorite, isTrashed, key, order, personId, tagId, userId, visibility, withPartners, withStacked }: {
+export function getTimeBuckets({ albumId, isFavorite, isTrashed, key, order, personId, slug, tagId, userId, visibility, withPartners, withStacked }: {
     albumId?: string;
     isFavorite?: boolean;
     isTrashed?: boolean;
     key?: string;
     order?: AssetOrder;
     personId?: string;
+    slug?: string;
     tagId?: string;
     userId?: string;
     visibility?: AssetVisibility;
@@ -3668,6 +3700,7 @@ export function getTimeBuckets({ albumId, isFavorite, isTrashed, key, order, per
         key,
         order,
         personId,
+        slug,
         tagId,
         userId,
         visibility,

server/src/database.ts

@@ -192,6 +192,7 @@ export type SharedLink = {
   showExif: boolean;
   type: SharedLinkType;
   userId: string;
+  slug: string | null;
 };
 
 export type Album = Selectable<AlbumTable> & {

server/src/dtos/shared-link.dto.ts

@@ -22,13 +22,17 @@ export class SharedLinkCreateDto {
   @ValidateUUID({ optional: true })
   albumId?: string;
 
+  @Optional({ nullable: true, emptyToNull: true })
   @IsString()
-  @Optional()
+  description?: string | null;
-  description?: string;
 
+  @Optional({ nullable: true, emptyToNull: true })
   @IsString()
-  @Optional()
+  password?: string | null;
-  password?: string;
+
+  @Optional({ nullable: true, emptyToNull: true })
+  @IsString()
+  slug?: string | null;
 
   @ValidateDate({ optional: true, nullable: true })
   expiresAt?: Date | null = null;
@@ -44,16 +48,22 @@ export class SharedLinkCreateDto {
 }
 
 export class SharedLinkEditDto {
-  @Optional()
+  @Optional({ nullable: true, emptyToNull: true })
-  description?: string;
+  @IsString()
+  description?: string | null;
 
-  @Optional()
+  @Optional({ nullable: true, emptyToNull: true })
-  password?: string;
+  @IsString()
+  password?: string | null;
+
+  @Optional({ nullable: true, emptyToNull: true })
+  @IsString()
+  slug?: string | null;
 
   @Optional({ nullable: true })
   expiresAt?: Date | null;
 
-  @Optional()
+  @ValidateBoolean({ optional: true })
   allowUpload?: boolean;
 
   @ValidateBoolean({ optional: true })
@@ -99,6 +109,8 @@ export class SharedLinkResponseDto {
 
   allowDownload!: boolean;
   showMetadata!: boolean;
+
+  slug!: string | null;
 }
 
 export function mapSharedLink(sharedLink: SharedLink): SharedLinkResponseDto {
@@ -118,6 +130,7 @@ export function mapSharedLink(sharedLink: SharedLink): SharedLinkResponseDto {
     allowUpload: sharedLink.allowUpload,
     allowDownload: sharedLink.allowDownload,
     showMetadata: sharedLink.showExif,
+    slug: sharedLink.slug,
   };
 }
 
@@ -141,5 +154,6 @@ export function mapSharedLinkWithoutMetadata(sharedLink: SharedLink): SharedLink
     allowUpload: sharedLink.allowUpload,
     allowDownload: sharedLink.allowDownload,
     showMetadata: sharedLink.showExif,
+    slug: sharedLink.slug,
   };
 }

server/src/enum.ts

@@ -17,12 +17,14 @@ export enum ImmichHeader {
   UserToken = 'x-immich-user-token',
   SessionToken = 'x-immich-session-token',
   SharedLinkKey = 'x-immich-share-key',
+  SharedLinkSlug = 'x-immich-share-slug',
   Checksum = 'x-immich-checksum',
   Cid = 'x-immich-cid',
 }
 
 export enum ImmichQuery {
   SharedLinkKey = 'key',
+  SharedLinkSlug = 'slug',
   ApiKey = 'apiKey',
   SessionKey = 'sessionKey',
 }

server/src/middleware/auth.guard.ts

@@ -28,7 +28,10 @@ export const Authenticated = (options?: AuthenticatedOptions): MethodDecorator =
   ];
 
   if ((options as SharedLinkRoute)?.sharedLink) {
-    decorators.push(ApiQuery({ name: ImmichQuery.SharedLinkKey, type: String, required: false }));
+    decorators.push(
+      ApiQuery({ name: ImmichQuery.SharedLinkKey, type: String, required: false }),
+      ApiQuery({ name: ImmichQuery.SharedLinkSlug, type: String, required: false }),
+    );
   }
 
   return applyDecorators(...decorators);

server/src/queries/shared.link.repository.sql

@@ -188,9 +188,47 @@ from
   "shared_link"
   left join "album" on "album"."id" = "shared_link"."albumId"
 where
-  "shared_link"."key" = $1
+  "album"."deletedAt" is null
-  and "album"."deletedAt" is null
   and (
-    "shared_link"."type" = $2
+    "shared_link"."type" = $1
     or "album"."id" is not null
   )
+  and "shared_link"."key" = $2
+
+-- SharedLinkRepository.getBySlug
+select
+  "shared_link"."id",
+  "shared_link"."userId",
+  "shared_link"."expiresAt",
+  "shared_link"."showExif",
+  "shared_link"."allowUpload",
+  "shared_link"."allowDownload",
+  "shared_link"."password",
+  (
+    select
+      to_json(obj)
+    from
+      (
+        select
+          "user"."id",
+          "user"."name",
+          "user"."email",
+          "user"."isAdmin",
+          "user"."quotaUsageInBytes",
+          "user"."quotaSizeInBytes"
+        from
+          "user"
+        where
+          "user"."id" = "shared_link"."userId"
+      ) as obj
+  ) as "user"
+from
+  "shared_link"
+  left join "album" on "album"."id" = "shared_link"."albumId"
+where
+  "album"."deletedAt" is null
+  and (
+    "shared_link"."type" = $1
+    or "album"."id" is not null
+  )
+  and "shared_link"."slug" = $2

server/src/repositories/shared-link.repository.ts

@@ -173,10 +173,18 @@ export class SharedLinkRepository {
   }
 
   @GenerateSql({ params: [DummyValue.BUFFER] })
-  async getByKey(key: Buffer) {
+  getByKey(key: Buffer) {
+    return this.authBuilder().where('shared_link.key', '=', key).executeTakeFirst();
+  }
+
+  @GenerateSql({ params: [DummyValue.BUFFER] })
+  getBySlug(slug: string) {
+    return this.authBuilder().where('shared_link.slug', '=', slug).executeTakeFirst();
+  }
+
+  private authBuilder() {
     return this.db
       .selectFrom('shared_link')
-      .where('shared_link.key', '=', key)
       .leftJoin('album', 'album.id', 'shared_link.albumId')
       .where('album.deletedAt', 'is', null)
       .select((eb) => [
@@ -185,8 +193,7 @@ export class SharedLinkRepository {
           eb.selectFrom('user').select(columns.authUser).whereRef('user.id', '=', 'shared_link.userId'),
         ).as('user'),
       ])
-      .where((eb) => eb.or([eb('shared_link.type', '=', SharedLinkType.Individual), eb('album.id', 'is not', null)]))
+      .where((eb) => eb.or([eb('shared_link.type', '=', SharedLinkType.Individual), eb('album.id', 'is not', null)]));
-      .executeTakeFirst();
   }
 
   async create(entity: Insertable<SharedLinkTable> & { assetIds?: string[] }) {

server/src/schema/migrations/1753471866748-AddSharedLinkSlug.ts

@@ -0,0 +1,11 @@
+import { Kysely, sql } from 'kysely';
+
+export async function up(db: Kysely<any>): Promise<void> {
+  await sql`ALTER TABLE "shared_link" ADD "slug" character varying;`.execute(db);
+  await sql`ALTER TABLE "shared_link" ADD CONSTRAINT "shared_link_slug_uq" UNIQUE ("slug");`.execute(db);
+}
+
+export async function down(db: Kysely<any>): Promise<void> {
+  await sql`ALTER TABLE "shared_link" DROP CONSTRAINT "shared_link_slug_uq";`.execute(db);
+  await sql`ALTER TABLE "shared_link" DROP COLUMN "slug";`.execute(db);
+}

server/src/schema/tables/shared-link.table.ts

@@ -48,4 +48,7 @@ export class SharedLinkTable {
 
   @Column({ type: 'character varying', nullable: true })
   password!: string | null;
+
+  @Column({ type: 'character varying', nullable: true, unique: true })
+  slug!: string | null;
 }

server/src/services/api.service.ts

@@ -80,7 +80,7 @@ export class ApiService {
       if (shareMatches) {
         try {
           const key = shareMatches[1];
-          const auth = await this.authService.validateSharedLink(key);
+          const auth = await this.authService.validateSharedLinkKey(key);
           const meta = await this.sharedLinkService.getMetadataTags(
             auth,
             request.host ? `${request.protocol}://${request.host}` : undefined,

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

@@ -322,15 +322,18 @@ describe(AuthService.name, () => {
       mocks.sharedLink.getByKey.mockResolvedValue(sharedLink);
       mocks.user.get.mockResolvedValue(user);
 
+      const buffer = sharedLink.key;
+      const key = buffer.toString('base64url');
+
       await expect(
         sut.authenticate({
-          headers: { 'x-immich-share-key': sharedLink.key.toString('base64url') },
+          headers: { 'x-immich-share-key': key },
           queryParams: {},
           metadata: { adminRoute: false, sharedLinkRoute: true, uri: 'test' },
         }),
       ).resolves.toEqual({ user, sharedLink });
 
-      expect(mocks.sharedLink.getByKey).toHaveBeenCalledWith(sharedLink.key);
+      expect(mocks.sharedLink.getByKey).toHaveBeenCalledWith(buffer);
     });
 
     it('should accept a hex key', async () => {
@@ -340,15 +343,50 @@ describe(AuthService.name, () => {
       mocks.sharedLink.getByKey.mockResolvedValue(sharedLink);
       mocks.user.get.mockResolvedValue(user);
 
+      const buffer = sharedLink.key;
+      const key = buffer.toString('hex');
+
       await expect(
         sut.authenticate({
-          headers: { 'x-immich-share-key': sharedLink.key.toString('hex') },
+          headers: { 'x-immich-share-key': key },
           queryParams: {},
           metadata: { adminRoute: false, sharedLinkRoute: true, uri: 'test' },
         }),
       ).resolves.toEqual({ user, sharedLink });
 
-      expect(mocks.sharedLink.getByKey).toHaveBeenCalledWith(sharedLink.key);
+      expect(mocks.sharedLink.getByKey).toHaveBeenCalledWith(buffer);
+    });
+  });
+
+  describe('validate - shared link slug', () => {
+    it('should not accept a non-existent slug', async () => {
+      mocks.sharedLink.getBySlug.mockResolvedValue(void 0);
+
+      await expect(
+        sut.authenticate({
+          headers: { 'x-immich-share-slug': 'slug' },
+          queryParams: {},
+          metadata: { adminRoute: false, sharedLinkRoute: true, uri: 'test' },
+        }),
+      ).rejects.toBeInstanceOf(UnauthorizedException);
+    });
+
+    it('should accept a valid slug', async () => {
+      const user = factory.userAdmin();
+      const sharedLink = { ...sharedLinkStub.valid, slug: 'slug-123', user } as any;
+
+      mocks.sharedLink.getBySlug.mockResolvedValue(sharedLink);
+      mocks.user.get.mockResolvedValue(user);
+
+      await expect(
+        sut.authenticate({
+          headers: { 'x-immich-share-slug': 'slug-123' },
+          queryParams: {},
+          metadata: { adminRoute: false, sharedLinkRoute: true, uri: 'test' },
+        }),
+      ).resolves.toEqual({ user, sharedLink });
+
+      expect(mocks.sharedLink.getBySlug).toHaveBeenCalledWith('slug-123');
     });
   });
 

server/src/services/auth.service.ts

@@ -6,7 +6,7 @@ import { IncomingHttpHeaders } from 'node:http';
 import { join } from 'node:path';
 import { LOGIN_URL, MOBILE_REDIRECT, SALT_ROUNDS } from 'src/constants';
 import { StorageCore } from 'src/cores/storage.core';
-import { UserAdmin } from 'src/database';
+import { AuthSharedLink, AuthUser, UserAdmin } from 'src/database';
 import {
   AuthDto,
   AuthStatusResponseDto,
@@ -196,6 +196,7 @@ export class AuthService extends BaseService {
 
   private async validate({ headers, queryParams }: Omit<ValidateRequest, 'metadata'>): Promise<AuthDto> {
     const shareKey = (headers[ImmichHeader.SharedLinkKey] || queryParams[ImmichQuery.SharedLinkKey]) as string;
+    const shareSlug = (headers[ImmichHeader.SharedLinkSlug] || queryParams[ImmichQuery.SharedLinkSlug]) as string;
     const session = (headers[ImmichHeader.UserToken] ||
       headers[ImmichHeader.SessionToken] ||
       queryParams[ImmichQuery.SessionKey] ||
@@ -204,7 +205,11 @@ export class AuthService extends BaseService {
     const apiKey = (headers[ImmichHeader.ApiKey] || queryParams[ImmichQuery.ApiKey]) as string;
 
     if (shareKey) {
-      return this.validateSharedLink(shareKey);
+      return this.validateSharedLinkKey(shareKey);
+    }
+
+    if (shareSlug) {
+      return this.validateSharedLinkSlug(shareSlug);
     }
 
     if (session) {
@@ -403,18 +408,33 @@ export class AuthService extends BaseService {
     return cookies[ImmichCookie.OAuthCodeVerifier] || null;
   }
 
-  async validateSharedLink(key: string | string[]): Promise<AuthDto> {
+  async validateSharedLinkKey(key: string | string[]): Promise<AuthDto> {
     key = Array.isArray(key) ? key[0] : key;
 
     const bytes = Buffer.from(key, key.length === 100 ? 'hex' : 'base64url');
     const sharedLink = await this.sharedLinkRepository.getByKey(bytes);
-    if (sharedLink?.user && (!sharedLink.expiresAt || new Date(sharedLink.expiresAt) > new Date())) {
+    if (!this.isValidSharedLink(sharedLink)) {
-      return {
+      throw new UnauthorizedException('Invalid share key');
-        user: sharedLink.user,
-        sharedLink,
-      };
     }
-    throw new UnauthorizedException('Invalid share key');
+
+    return { user: sharedLink.user, sharedLink };
+  }
+
+  async validateSharedLinkSlug(slug: string | string[]): Promise<AuthDto> {
+    slug = Array.isArray(slug) ? slug[0] : slug;
+
+    const sharedLink = await this.sharedLinkRepository.getBySlug(slug);
+    if (!this.isValidSharedLink(sharedLink)) {
+      throw new UnauthorizedException('Invalid share slug');
+    }
+
+    return { user: sharedLink.user, sharedLink };
+  }
+
+  private isValidSharedLink(
+    sharedLink?: AuthSharedLink & { user: AuthUser | null },
+  ): sharedLink is AuthSharedLink & { user: AuthUser } {
+    return !!sharedLink?.user && (!sharedLink.expiresAt || new Date(sharedLink.expiresAt) > new Date());
   }
 
   private async validateApiKey(key: string): Promise<AuthDto> {

server/src/services/shared-link.service.spec.ts

@@ -136,6 +136,7 @@ describe(SharedLinkService.name, () => {
         allowUpload: true,
         description: null,
         expiresAt: null,
+        slug: null,
         showExif: true,
         key: Buffer.from('random-bytes', 'utf8'),
       });
@@ -163,6 +164,7 @@ describe(SharedLinkService.name, () => {
         userId: authStub.admin.user.id,
         albumId: null,
         allowDownload: true,
+        slug: null,
         allowUpload: true,
         assetIds: [assetStub.image.id],
         description: null,
@@ -199,6 +201,7 @@ describe(SharedLinkService.name, () => {
         description: null,
         expiresAt: null,
         showExif: false,
+        slug: null,
         key: Buffer.from('random-bytes', 'utf8'),
       });
     });
@@ -223,6 +226,7 @@ describe(SharedLinkService.name, () => {
       expect(mocks.sharedLink.get).toHaveBeenCalledWith(authStub.user1.user.id, sharedLinkStub.valid.id);
       expect(mocks.sharedLink.update).toHaveBeenCalledWith({
         id: sharedLinkStub.valid.id,
+        slug: null,
         userId: authStub.user1.user.id,
         allowDownload: false,
       });
@@ -277,6 +281,7 @@ describe(SharedLinkService.name, () => {
       expect(mocks.sharedLink.update).toHaveBeenCalled();
       expect(mocks.sharedLink.update).toHaveBeenCalledWith({
         ...sharedLinkStub.individual,
+        slug: null,
         assetIds: ['asset-3'],
       });
     });

server/src/services/shared-link.service.ts

@@ -1,4 +1,5 @@
 import { BadRequestException, ForbiddenException, Injectable, UnauthorizedException } from '@nestjs/common';
+import { PostgresError } from 'postgres';
 import { SharedLink } from 'src/database';
 import { AssetIdErrorReason, AssetIdsResponseDto } from 'src/dtos/asset-ids.response.dto';
 import { AssetIdsDto } from 'src/dtos/asset.dto';
@@ -64,36 +65,53 @@ export class SharedLinkService extends BaseService {
       }
     }
 
-    const sharedLink = await this.sharedLinkRepository.create({
+    try {
-      key: this.cryptoRepository.randomBytes(50),
+      const sharedLink = await this.sharedLinkRepository.create({
-      userId: auth.user.id,
+        key: this.cryptoRepository.randomBytes(50),
-      type: dto.type,
+        userId: auth.user.id,
-      albumId: dto.albumId || null,
+        type: dto.type,
-      assetIds: dto.assetIds,
+        albumId: dto.albumId || null,
-      description: dto.description || null,
+        assetIds: dto.assetIds,
-      password: dto.password,
+        description: dto.description || null,
-      expiresAt: dto.expiresAt || null,
+        password: dto.password,
-      allowUpload: dto.allowUpload ?? true,
+        expiresAt: dto.expiresAt || null,
-      allowDownload: dto.showMetadata === false ? false : (dto.allowDownload ?? true),
+        allowUpload: dto.allowUpload ?? true,
-      showExif: dto.showMetadata ?? true,
+        allowDownload: dto.showMetadata === false ? false : (dto.allowDownload ?? true),
-    });
+        showExif: dto.showMetadata ?? true,
+        slug: dto.slug || null,
+      });
 
-    return this.mapToSharedLink(sharedLink, { withExif: true });
+      return this.mapToSharedLink(sharedLink, { withExif: true });
+    } catch (error) {
+      this.handleError(error);
+    }
+  }
+
+  private handleError(error: unknown): never {
+    if ((error as PostgresError).constraint_name === 'shared_link_slug_uq') {
+      throw new BadRequestException('Shared link with this slug already exists');
+    }
+    throw error;
   }
 
   async update(auth: AuthDto, id: string, dto: SharedLinkEditDto) {
     await this.findOrFail(auth.user.id, id);
-    const sharedLink = await this.sharedLinkRepository.update({
+    try {
-      id,
+      const sharedLink = await this.sharedLinkRepository.update({
-      userId: auth.user.id,
+        id,
-      description: dto.description,
+        userId: auth.user.id,
-      password: dto.password,
+        description: dto.description,
-      expiresAt: dto.changeExpiryTime && !dto.expiresAt ? null : dto.expiresAt,
+        password: dto.password,
-      allowUpload: dto.allowUpload,
+        expiresAt: dto.changeExpiryTime && !dto.expiresAt ? null : dto.expiresAt,
-      allowDownload: dto.allowDownload,
+        allowUpload: dto.allowUpload,
-      showExif: dto.showMetadata,
+        allowDownload: dto.allowDownload,
-    });
+        showExif: dto.showMetadata,
-    return this.mapToSharedLink(sharedLink, { withExif: true });
+        slug: dto.slug || null,
+      });
+      return this.mapToSharedLink(sharedLink, { withExif: true });
+    } catch (error) {
+      this.handleError(error);
+    }
   }
 
   async remove(auth: AuthDto, id: string): Promise<void> {

server/test/fixtures/shared-link.stub.ts

@@ -118,6 +118,7 @@ export const sharedLinkStub = {
     description: null,
     assets: [assetStub.image],
     password: 'password',
+    slug: null,
   }),
   valid: Object.freeze({
     id: '123',
@@ -135,6 +136,7 @@ export const sharedLinkStub = {
     password: null,
     assets: [] as MapAsset[],
     album: null,
+    slug: null,
   }),
   expired: Object.freeze({
     id: '123',
@@ -152,6 +154,7 @@ export const sharedLinkStub = {
     albumId: null,
     assets: [] as MapAsset[],
     album: null,
+    slug: null,
   }),
   readonlyNoExif: Object.freeze({
     id: '123',
@@ -166,6 +169,7 @@ export const sharedLinkStub = {
     description: null,
     password: null,
     assets: [],
+    slug: null,
     albumId: 'album-123',
     album: {
       id: 'album-123',
@@ -266,6 +270,7 @@ export const sharedLinkStub = {
     allowUpload: true,
     allowDownload: true,
     showExif: true,
+    slug: null,
     description: null,
     password: 'password',
     assets: [],
@@ -288,6 +293,7 @@ export const sharedLinkResponseStub = {
     showMetadata: true,
     type: SharedLinkType.Album,
     userId: 'admin_id',
+    slug: null,
   }),
   expired: Object.freeze<SharedLinkResponseDto>({
     album: undefined,
@@ -303,6 +309,7 @@ export const sharedLinkResponseStub = {
     showMetadata: true,
     type: SharedLinkType.Album,
     userId: 'admin_id',
+    slug: null,
   }),
   readonlyNoMetadata: Object.freeze<SharedLinkResponseDto>({
     id: '123',
@@ -316,6 +323,7 @@ export const sharedLinkResponseStub = {
     allowUpload: false,
     allowDownload: false,
     showMetadata: false,
+    slug: null,
     album: { ...albumResponse, startDate: assetResponse.localDateTime, endDate: assetResponse.localDateTime },
     assets: [{ ...assetResponseWithoutMetadata, exifInfo: undefined }],
   }),

web/src/lib/components/album-page/albums-list.svelte

@@ -369,7 +369,7 @@
 
         if (sharedLink) {
           handleSharedLinkCreated(albumToShare);
-          await modalManager.show(QrCodeModal, { title: $t('view_link'), value: makeSharedLinkUrl(sharedLink.key) });
+          await modalManager.show(QrCodeModal, { title: $t('view_link'), value: makeSharedLinkUrl(sharedLink) });
         }
         return;
       }

web/src/lib/components/asset-viewer/actions/download-action.svelte

@@ -16,7 +16,7 @@
 
   let { asset, menuItem = false }: Props = $props();
 
-  const onDownloadFile = async () => downloadFile(await getAssetInfo({ id: asset.id, key: authManager.key }));
+  const onDownloadFile = async () => downloadFile(await getAssetInfo({ ...authManager.params, id: asset.id }));
 </script>
 
 <svelte:document use:shortcut={{ shortcut: { key: 'd', shift: true }, onShortcut: onDownloadFile }} />

web/src/lib/components/asset-viewer/actions/share-action.svelte

@@ -17,7 +17,7 @@
     const sharedLink = await modalManager.show(SharedLinkCreateModal, { assetIds: [asset.id] });
 
     if (sharedLink) {
-      await modalManager.show(QrCodeModal, { title: $t('view_link'), value: makeSharedLinkUrl(sharedLink.key) });
+      await modalManager.show(QrCodeModal, { title: $t('view_link'), value: makeSharedLinkUrl(sharedLink) });
     }
   };
 </script>

web/src/lib/components/asset-viewer/asset-viewer.svelte

@@ -111,7 +111,7 @@
   let zoomToggle = $state(() => void 0);
 
   const refreshStack = async () => {
-    if (authManager.key) {
+    if (authManager.isSharedLink) {
       return;
     }
 
@@ -191,7 +191,7 @@
   });
 
   const handleGetAllAlbums = async () => {
-    if (authManager.key) {
+    if (authManager.isSharedLink) {
       return;
     }
 

web/src/lib/components/asset-viewer/detail-panel-star-rating.svelte

@@ -25,7 +25,7 @@
   };
 </script>
 
-{#if !authManager.key && $preferences?.ratings.enabled}
+{#if !authManager.isSharedLink && $preferences?.ratings.enabled}
   <section class="px-4 pt-2">
     <StarRating {rating} readOnly={!isOwner} onRating={(rating) => handlePromiseError(handleChangeRating(rating))} />
   </section>

web/src/lib/components/asset-viewer/detail-panel-tags.svelte

@@ -37,7 +37,7 @@
 
 <svelte:document use:shortcut={{ shortcut: { key: 't' }, onShortcut: handleAddTag }} />
 
-{#if isOwner && !authManager.key}
+{#if isOwner && !authManager.isSharedLink}
   <section class="px-4 mt-4">
     <div class="flex h-10 w-full items-center justify-between text-sm">
       <h2>{$t('tags').toUpperCase()}</h2>

web/src/lib/components/asset-viewer/detail-panel.svelte

@@ -85,7 +85,7 @@
 
   const handleNewAsset = async (newAsset: AssetResponseDto) => {
     // TODO: check if reloading asset data is necessary
-    if (newAsset.id && !authManager.key) {
+    if (newAsset.id && !authManager.isSharedLink) {
       const data = await getAssetInfo({ id: asset.id });
       people = data?.people || [];
       unassignedFaces = data?.unassignedFaces || [];
@@ -195,7 +195,7 @@
   <DetailPanelDescription {asset} {isOwner} />
   <DetailPanelRating {asset} {isOwner} />
 
-  {#if !authManager.key && isOwner}
+  {#if !authManager.isSharedLink && isOwner}
     <section class="px-4 pt-4 text-sm">
       <div class="flex h-10 w-full items-center justify-between">
         <h2>{$t('people').toUpperCase()}</h2>

web/src/lib/components/asset-viewer/image-panorama-viewer.svelte

@@ -14,7 +14,7 @@
   const { asset }: Props = $props();
 
   const loadAssetData = async (id: string) => {
-    const data = await viewAsset({ id, size: AssetMediaSize.Preview, key: authManager.key });
+    const data = await viewAsset({ ...authManager.params, id, size: AssetMediaSize.Preview });
     return URL.createObjectURL(data);
   };
 </script>

web/src/lib/components/assets/thumbnail/thumbnail.svelte

@@ -270,13 +270,13 @@
         {/if}
 
         <!-- Favorite asset star -->
-        {#if !authManager.key && asset.isFavorite}
+        {#if !authManager.isSharedLink && asset.isFavorite}
           <div class="absolute bottom-2 start-2">
             <Icon path={mdiHeart} size="24" class="text-white" />
           </div>
         {/if}
 
-        {#if !authManager.key && showArchiveIcon && asset.visibility === AssetVisibility.Archive}
+        {#if !authManager.isSharedLink && showArchiveIcon && asset.visibility === AssetVisibility.Archive}
           <div class={['absolute start-2', asset.isFavorite ? 'bottom-10' : 'bottom-2']}>
             <Icon path={mdiArchiveArrowDownOutline} size="24" class="text-white" />
           </div>

web/src/lib/components/memory-page/memory-viewer.svelte

@@ -69,7 +69,7 @@
   let paused = $state(false);
   let current = $state<MemoryAsset | undefined>(undefined);
   let currentMemoryAssetFull = $derived.by(async () =>
-    current?.asset ? await getAssetInfo({ id: current.asset.id, key: authManager.key }) : undefined,
+    current?.asset ? await getAssetInfo({ ...authManager.params, id: current.asset.id }) : undefined,
   );
   let currentTimelineAssets = $derived(current?.memory.assets.map((asset) => toTimelineAsset(asset)) || []);
 

web/src/lib/components/pages/SharedLinkErrorPage.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+  import { page } from '$app/state';
+</script>
+
+<svelte:head>
+  <title>Oops! Error - Immich</title>
+</svelte:head>
+
+<section class="flex flex-col px-4 h-dvh w-dvw place-content-center place-items-center">
+  <h1 class="py-10 text-4xl text-immich-primary dark:text-immich-dark-primary">Page not found :/</h1>
+  {#if page.error?.message}
+    <h2 class="text-xl text-immich-fg dark:text-immich-dark-fg">{page.error.message}</h2>
+  {/if}
+</section>

web/src/lib/components/pages/SharedLinkPage.svelte

@@ -0,0 +1,108 @@
+<script lang="ts">
+  import AlbumViewer from '$lib/components/album-page/album-viewer.svelte';
+  import IndividualSharedViewer from '$lib/components/share-page/individual-shared-viewer.svelte';
+  import ControlAppBar from '$lib/components/shared-components/control-app-bar.svelte';
+  import ImmichLogoSmallLink from '$lib/components/shared-components/immich-logo-small-link.svelte';
+  import PasswordField from '$lib/components/shared-components/password-field.svelte';
+  import ThemeButton from '$lib/components/shared-components/theme-button.svelte';
+  import { assetViewingStore } from '$lib/stores/asset-viewing.store';
+  import { user } from '$lib/stores/user.store';
+  import { setSharedLink } from '$lib/utils';
+  import { handleError } from '$lib/utils/handle-error';
+  import { navigate } from '$lib/utils/navigation';
+  import { getMySharedLink, SharedLinkType, type AssetResponseDto, type SharedLinkResponseDto } from '@immich/sdk';
+  import { Button } from '@immich/ui';
+  import { tick } from 'svelte';
+  import { t } from 'svelte-i18n';
+
+  type Props = {
+    data: {
+      meta: {
+        title: string;
+        description?: string;
+        imageUrl?: string;
+      };
+
+      sharedLink?: SharedLinkResponseDto;
+      key?: string;
+      slug?: string;
+      asset?: AssetResponseDto;
+      passwordRequired?: boolean;
+    };
+  };
+
+  const { data }: Props = $props();
+
+  let { gridScrollTarget } = assetViewingStore;
+  let { sharedLink, passwordRequired, key, slug, meta } = $state(data);
+  let { title, description } = $state(meta);
+  let isOwned = $derived($user ? $user.id === sharedLink?.userId : false);
+  let password = $state('');
+
+  const handlePasswordSubmit = async () => {
+    try {
+      sharedLink = await getMySharedLink({ password, key, slug });
+      setSharedLink(sharedLink);
+      passwordRequired = false;
+      title = (sharedLink.album ? sharedLink.album.albumName : $t('public_share')) + ' - Immich';
+      description =
+        sharedLink.description ||
+        $t('shared_photos_and_videos_count', { values: { assetCount: sharedLink.assets.length } });
+      await tick();
+      await navigate(
+        { targetRoute: 'current', assetId: null, assetGridRouteSearchParams: $gridScrollTarget },
+        { forceNavigate: true, replaceState: true },
+      );
+    } catch (error) {
+      handleError(error, $t('errors.unable_to_get_shared_link'));
+    }
+  };
+
+  const onsubmit = async (event: Event) => {
+    event.preventDefault();
+    await handlePasswordSubmit();
+  };
+</script>
+
+<svelte:head>
+  <title>{title}</title>
+  <meta name="description" content={description} />
+</svelte:head>
+{#if passwordRequired}
+  <main
+    class="relative h-dvh overflow-hidden px-6 max-md:pt-(--navbar-height-md) pt-(--navbar-height) sm:px-12 md:px-24 lg:px-40"
+  >
+    <div class="flex flex-col items-center justify-center mt-20">
+      <div class="text-2xl font-bold text-immich-primary dark:text-immich-dark-primary">{$t('password_required')}</div>
+      <div class="mt-4 text-lg text-immich-primary dark:text-immich-dark-primary">
+        {$t('sharing_enter_password')}
+      </div>
+      <div class="mt-4">
+        <form class="flex gap-x-2" novalidate {onsubmit}>
+          <PasswordField autocomplete="off" bind:password placeholder="Password" />
+          <Button type="submit">{$t('submit')}</Button>
+        </form>
+      </div>
+    </div>
+  </main>
+  <header>
+    <ControlAppBar showBackButton={false}>
+      {#snippet leading()}
+        <ImmichLogoSmallLink />
+      {/snippet}
+
+      {#snippet trailing()}
+        <ThemeButton />
+      {/snippet}
+    </ControlAppBar>
+  </header>
+{/if}
+
+{#if !passwordRequired && sharedLink?.type == SharedLinkType.Album}
+  <AlbumViewer {sharedLink} />
+{/if}
+{#if !passwordRequired && sharedLink?.type == SharedLinkType.Individual}
+  <div class="immich-scrollbar">
+    <IndividualSharedViewer {sharedLink} {isOwned} />
+  </div>
+{/if}

web/src/lib/components/photos-page/actions/create-shared-link.svelte

@@ -15,7 +15,7 @@
     });
 
     if (sharedLink) {
-      await modalManager.show(QrCodeModal, { title: $t('view_link'), value: makeSharedLinkUrl(sharedLink.key) });
+      await modalManager.show(QrCodeModal, { title: $t('view_link'), value: makeSharedLinkUrl(sharedLink) });
     }
   };
 </script>

web/src/lib/components/photos-page/actions/download-action.svelte

@@ -4,11 +4,11 @@
   import { authManager } from '$lib/managers/auth-manager.svelte';
   import { downloadArchive, downloadFile } from '$lib/utils/asset-utils';
   import { getAssetInfo } from '@immich/sdk';
+  import { IconButton } from '@immich/ui';
   import { mdiCloudDownloadOutline, mdiFileDownloadOutline, mdiFolderDownloadOutline } from '@mdi/js';
   import { t } from 'svelte-i18n';
   import MenuOption from '../../shared-components/context-menu/menu-option.svelte';
   import { getAssetControlContext } from '../asset-select-control-bar.svelte';
-  import { IconButton } from '@immich/ui';
 
   interface Props {
     filename?: string;
@@ -23,7 +23,7 @@
     const assets = [...getAssets()];
     if (assets.length === 1) {
       clearSelect();
-      let asset = await getAssetInfo({ id: assets[0].id, key: authManager.key });
+      let asset = await getAssetInfo({ ...authManager.params, id: assets[0].id });
       await downloadFile(asset);
       return;
     }

web/src/lib/components/photos-page/actions/link-live-photo-action.svelte

@@ -1,15 +1,15 @@
 <script lang="ts">
   import { getAssetControlContext } from '$lib/components/photos-page/asset-select-control-bar.svelte';
-  import type { TimelineAsset } from '$lib/managers/timeline-manager/types';
   import { authManager } from '$lib/managers/auth-manager.svelte';
+  import type { TimelineAsset } from '$lib/managers/timeline-manager/types';
   import type { OnLink, OnUnlink } from '$lib/utils/actions';
   import { handleError } from '$lib/utils/handle-error';
   import { toTimelineAsset } from '$lib/utils/timeline-util';
   import { getAssetInfo, updateAsset } from '@immich/sdk';
+  import { IconButton } from '@immich/ui';
   import { mdiLinkOff, mdiMotionPlayOutline, mdiTimerSand } from '@mdi/js';
   import { t } from 'svelte-i18n';
   import MenuOption from '../../shared-components/context-menu/menu-option.svelte';
-  import { IconButton } from '@immich/ui';
 
   interface Props {
     onLink: OnLink;
@@ -59,7 +59,7 @@
     try {
       loading = true;
       const stillResponse = await updateAsset({ id: still.id, updateAssetDto: { livePhotoVideoId: null } });
-      const motionResponse = await getAssetInfo({ id: motionId, key: authManager.key });
+      const motionResponse = await getAssetInfo({ ...authManager.params, id: motionId });
       onUnlink({ still: toTimelineAsset(stillResponse), motion: toTimelineAsset(motionResponse) });
       clearSelect();
     } catch (error) {

web/src/lib/components/photos-page/actions/remove-from-shared-link.svelte

@@ -29,11 +29,11 @@
 
     try {
       const results = await removeSharedLinkAssets({
+        ...authManager.params,
         id: sharedLink.id,
         assetIdsDto: {
           assetIds: [...getAssets()].map((asset) => asset.id),
         },
-        key: authManager.key,
       });
 
       for (const result of results) {

web/src/lib/components/photos-page/asset-grid.svelte

@@ -443,7 +443,7 @@
 
     if (laterAsset) {
       const preloadAsset = await timelineManager.getLaterAsset(laterAsset);
-      const asset = await getAssetInfo({ id: laterAsset.id, key: authManager.key });
+      const asset = await getAssetInfo({ ...authManager.params, id: laterAsset.id });
       assetViewingStore.setAsset(asset, preloadAsset ? [preloadAsset] : []);
       await navigate({ targetRoute: 'current', assetId: laterAsset.id });
     }
@@ -458,7 +458,7 @@
 
     if (earlierAsset) {
       const preloadAsset = await timelineManager.getEarlierAsset(earlierAsset);
-      const asset = await getAssetInfo({ id: earlierAsset.id, key: authManager.key });
+      const asset = await getAssetInfo({ ...authManager.params, id: earlierAsset.id });
       assetViewingStore.setAsset(asset, preloadAsset ? [preloadAsset] : []);
       await navigate({ targetRoute: 'current', assetId: earlierAsset.id });
     }
@@ -471,7 +471,7 @@
     const randomAsset = await timelineManager.getRandomAsset();
 
     if (randomAsset) {
-      const asset = await getAssetInfo({ id: randomAsset.id, key: authManager.key });
+      const asset = await getAssetInfo({ ...authManager.params, id: randomAsset.id });
       assetViewingStore.setAsset(asset);
       await navigate({ targetRoute: 'current', assetId: randomAsset.id });
       return asset;
@@ -869,7 +869,7 @@
   style:margin-right={(usingMobileDevice ? 0 : scrubberWidth) + 'px'}
   tabindex="-1"
   bind:clientHeight={timelineManager.viewportHeight}
-  bind:clientWidth={null, (v) => ((timelineManager.viewportWidth = v), updateSlidingWindow())}
+  bind:clientWidth={null, (v: number) => ((timelineManager.viewportWidth = v), updateSlidingWindow())}
   bind:this={element}
   onscroll={() => (handleTimelineScroll(), updateSlidingWindow(), updateIsScrolling())}
 >

web/src/lib/components/share-page/individual-shared-viewer.svelte

@@ -4,8 +4,8 @@
   import ImmichLogoSmallLink from '$lib/components/shared-components/immich-logo-small-link.svelte';
   import { AppRoute, AssetAction } from '$lib/constants';
   import { authManager } from '$lib/managers/auth-manager.svelte';
-  import { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
   import type { Viewport } from '$lib/managers/timeline-manager/types';
+  import { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
   import { dragAndDropFilesStore } from '$lib/stores/drag-and-drop-files.store';
   import { handlePromiseError } from '$lib/utils';
   import { cancelMultiselect, downloadArchive } from '$lib/utils/asset-utils';
@@ -13,6 +13,7 @@
   import { handleError } from '$lib/utils/handle-error';
   import { toTimelineAsset } from '$lib/utils/timeline-util';
   import { addSharedLinkAssets, getAssetInfo, type SharedLinkResponseDto } from '@immich/sdk';
+  import { IconButton } from '@immich/ui';
   import { mdiArrowLeft, mdiFileImagePlusOutline, mdiFolderDownloadOutline, mdiSelectAll } from '@mdi/js';
   import { t } from 'svelte-i18n';
   import AssetViewer from '../asset-viewer/asset-viewer.svelte';
@@ -22,7 +23,6 @@
   import ControlAppBar from '../shared-components/control-app-bar.svelte';
   import GalleryViewer from '../shared-components/gallery-viewer/gallery-viewer.svelte';
   import { NotificationType, notificationController } from '../shared-components/notification/notification';
-  import { IconButton } from '@immich/ui';
 
   interface Props {
     sharedLink: SharedLinkResponseDto;
@@ -54,11 +54,11 @@
         ? openFileUploadDialog()
         : fileUploadHandler({ files }));
       const data = await addSharedLinkAssets({
+        ...authManager.params,
         id: sharedLink.id,
         assetIdsDto: {
           assetIds: results.filter((id) => !!id) as string[],
         },
-        key: authManager.key,
       });
 
       const added = data.filter((item) => item.success).length;
@@ -145,7 +145,7 @@
       <GalleryViewer {assets} {assetInteraction} {viewport} />
     </section>
   {:else if assets.length === 1}
-    {#await getAssetInfo({ id: assets[0].id, key: authManager.key }) then asset}
+    {#await getAssetInfo({ ...authManager.params, id: assets[0].id }) then asset}
       <AssetViewer
         {asset}
         showCloseButton={false}

web/src/lib/components/shared-components/drag-and-drop-upload-overlay.svelte

@@ -126,7 +126,7 @@
     }
 
     const filesArray: File[] = Array.from<File>(files);
-    if (authManager.key) {
+    if (authManager.isSharedLink) {
       dragAndDropFilesStore.set({ isDragging: true, files: filesArray });
     } else {
       await fileUploadHandler({ files: filesArray, albumId, isLockedAssets: isInLockedFolder });

web/src/lib/components/sharedlinks-page/actions/shared-link-copy.svelte

@@ -14,7 +14,7 @@
   let { link, menuItem = false }: Props = $props();
 
   const handleCopy = async () => {
-    await copyToClipboard(makeSharedLinkUrl(link.key));
+    await copyToClipboard(makeSharedLinkUrl(link));
   };
 </script>
 

web/src/lib/components/sharedlinks-page/shared-link-card.svelte

@@ -1,16 +1,16 @@
 <script lang="ts">
   import Badge from '$lib/components/elements/badge.svelte';
+  import ButtonContextMenu from '$lib/components/shared-components/context-menu/button-context-menu.svelte';
+  import SharedLinkCopy from '$lib/components/sharedlinks-page/actions/shared-link-copy.svelte';
+  import SharedLinkDelete from '$lib/components/sharedlinks-page/actions/shared-link-delete.svelte';
+  import SharedLinkEdit from '$lib/components/sharedlinks-page/actions/shared-link-edit.svelte';
   import ShareCover from '$lib/components/sharedlinks-page/covers/share-cover.svelte';
   import { AppRoute } from '$lib/constants';
   import { locale } from '$lib/stores/preferences.store';
   import { SharedLinkType, type SharedLinkResponseDto } from '@immich/sdk';
+  import { mdiDotsVertical } from '@mdi/js';
   import { DateTime, type ToRelativeUnit } from 'luxon';
   import { t } from 'svelte-i18n';
-  import SharedLinkDelete from '$lib/components/sharedlinks-page/actions/shared-link-delete.svelte';
-  import SharedLinkEdit from '$lib/components/sharedlinks-page/actions/shared-link-edit.svelte';
-  import SharedLinkCopy from '$lib/components/sharedlinks-page/actions/shared-link-copy.svelte';
-  import ButtonContextMenu from '$lib/components/shared-components/context-menu/button-context-menu.svelte';
-  import { mdiDotsVertical } from '@mdi/js';
 
   interface Props {
     link: SharedLinkResponseDto;
@@ -91,6 +91,9 @@
         {#if link.password}
           <Badge rounded="full"><span class="text-xs px-1">{$t('password')}</span></Badge>
         {/if}
+        {#if link.slug}
+          <Badge rounded="full"><span class="text-xs px-1">{$t('custom_url')}</span></Badge>
+        {/if}
       </div>
     </div>
   </svelte:element>

web/src/lib/managers/auth-manager.svelte.ts

@@ -6,7 +6,8 @@ import { isSharedLinkRoute } from '$lib/utils/navigation';
 import { logout } from '@immich/sdk';
 
 class AuthManager {
-  key = $derived(isSharedLinkRoute(page.route?.id) ? page.params.key : undefined);
+  isSharedLink = $derived(isSharedLinkRoute(page.route?.id));
+  params = $derived(this.isSharedLink ? { key: page.params.key, slug: page.params.slug } : {});
 
   async logout() {
     let redirectUri;

web/src/lib/managers/timeline-manager/internal/load-support.svelte.ts

@@ -18,12 +18,11 @@ export async function loadFromTimeBuckets(
   }
 
   const timeBucket = toISOYearMonthUTC(monthGroup.yearMonth);
-  const key = authManager.key;
   const bucketResponse = await getTimeBucket(
     {
+      ...authManager.params,
       ...options,
       timeBucket,
-      key,
     },
     { signal },
   );
@@ -35,9 +34,9 @@ export async function loadFromTimeBuckets(
   if (options.timelineAlbumId) {
     const albumAssets = await getTimeBucket(
       {
+        ...authManager.params,
         albumId: options.timelineAlbumId,
         timeBucket,
-        key,
       },
       { signal },
     );

web/src/lib/managers/timeline-manager/timeline-manager.svelte.ts

@@ -288,8 +288,8 @@ export class TimelineManager {
 
   async #initializeMonthGroups() {
     const timebuckets = await getTimeBuckets({
+      ...authManager.params,
       ...this.#options,
-      key: authManager.key,
     });
 
     this.months = timebuckets.map((timeBucket) => {
@@ -423,7 +423,7 @@ export class TimelineManager {
     if (monthGroup) {
       return monthGroup;
     }
-    const asset = toTimelineAsset(await getAssetInfo({ id, key: authManager.key }));
+    const asset = toTimelineAsset(await getAssetInfo({ ...authManager.params, id }));
     if (!asset || this.isExcluded(asset)) {
       return;
     }

web/src/lib/modals/AlbumShareModal.svelte

@@ -32,7 +32,7 @@
 
   let sharedLinkUrl = $state('');
   const handleViewQrCode = (sharedLink: SharedLinkResponseDto) => {
-    sharedLinkUrl = makeSharedLinkUrl(sharedLink.key);
+    sharedLinkUrl = makeSharedLinkUrl(sharedLink);
   };
 
   const roleOptions: Array<{ title: string; value: AlbumUserRole | 'none'; icon?: string }> = [

web/src/lib/modals/SharedLinkCreateModal.svelte

@@ -1,16 +1,13 @@
 <script lang="ts">
   import SettingSelect from '$lib/components/shared-components/settings/setting-select.svelte';
-  import { SettingInputFieldType } from '$lib/constants';
   import { locale } from '$lib/stores/preferences.store';
   import { handleError } from '$lib/utils/handle-error';
   import { SharedLinkType, createSharedLink, updateSharedLink, type SharedLinkResponseDto } from '@immich/sdk';
-  import { Button, Modal, ModalBody, ModalFooter } from '@immich/ui';
+  import { Button, Field, Input, Modal, ModalBody, ModalFooter, PasswordInput, Switch, Text } from '@immich/ui';
   import { mdiLink } from '@mdi/js';
   import { DateTime, Duration } from 'luxon';
   import { t } from 'svelte-i18n';
   import { NotificationType, notificationController } from '../components/shared-components/notification/notification';
-  import SettingInputField from '../components/shared-components/settings/setting-input-field.svelte';
-  import SettingSwitch from '../components/shared-components/settings/setting-switch.svelte';
 
   interface Props {
     onClose: (sharedLink?: SharedLinkResponseDto) => void;
@@ -28,8 +25,8 @@
   let showMetadata = $state(true);
   let expirationOption: number = $state(0);
   let password = $state('');
+  let slug = $state('');
   let shouldChangeExpirationTime = $state(false);
-  let enablePassword = $state(false);
 
   const expirationOptions: [number, Intl.RelativeTimeFormatUnit][] = [
     [30, 'minutes'],
@@ -63,17 +60,15 @@
     if (editingLink.description) {
       description = editingLink.description;
     }
-    if (editingLink.password) {
+
-      password = editingLink.password;
+    password = editingLink.password ?? '';
-    }
+    slug = editingLink.slug ?? '';
     allowUpload = editingLink.allowUpload;
     allowDownload = editingLink.allowDownload;
     showMetadata = editingLink.showMetadata;
 
     albumId = editingLink.album?.id;
     assetIds = editingLink.assets.map(({ id }) => id);
-
-    enablePassword = !!editingLink.password;
   }
 
   const handleCreateSharedLink = async () => {
@@ -91,6 +86,7 @@
           password,
           allowDownload,
           showMetadata,
+          slug,
         },
       });
       onClose(data);
@@ -111,11 +107,12 @@
         id: editingLink.id,
         sharedLinkEditDto: {
           description,
-          password: enablePassword ? password : '',
+          password: password ?? null,
           expiresAt: shouldChangeExpirationTime ? expirationDate : undefined,
           allowUpload,
           allowDownload,
           showMetadata,
+          slug: slug.trim() ?? null,
         },
       });
 
@@ -165,63 +162,51 @@
       {/if}
     {/if}
 
-    <div class="mb-2 mt-4">
+    <div class="flex flex-col gap-4 mt-4">
-      <p class="text-xs">{$t('link_options').toUpperCase()}</p>
+      <div>
-    </div>
+        <Field label={$t('custom_url')} description={$t('shared_link_custom_url_description')}>
-    <div class="rounded-lg bg-gray-100 p-4 dark:bg-black/40 overflow-y-auto">
+          <Input bind:value={slug} placeholder="immich-10000" />
-      <div class="flex flex-col">
+        </Field>
-        <div class="mb-2">
+        {#if slug}
-          <SettingInputField
+          <Text size="tiny" color="muted" class="pt-2">/s/{encodeURIComponent(slug)}</Text>
-            inputType={SettingInputFieldType.TEXT}
-            label={$t('description')}
-            bind:value={description}
-          />
-        </div>
-
-        <div class="mb-2">
-          <SettingInputField
-            inputType={SettingInputFieldType.TEXT}
-            label={$t('password')}
-            bind:value={password}
-            disabled={!enablePassword}
-          />
-        </div>
-
-        <div class="my-3">
-          <SettingSwitch bind:checked={enablePassword} title={$t('require_password')} />
-        </div>
-
-        <div class="my-3">
-          <SettingSwitch bind:checked={showMetadata} title={$t('show_metadata')} />
-        </div>
-
-        <div class="my-3">
-          <SettingSwitch
-            bind:checked={allowDownload}
-            title={$t('allow_public_user_to_download')}
-            disabled={!showMetadata}
-          />
-        </div>
-
-        <div class="my-3">
-          <SettingSwitch bind:checked={allowUpload} title={$t('allow_public_user_to_upload')} />
-        </div>
-
-        {#if editingLink}
-          <div class="my-3">
-            <SettingSwitch bind:checked={shouldChangeExpirationTime} title={$t('change_expiration_time')} />
-          </div>
         {/if}
-        <div class="mt-3">
-          <SettingSelect
-            bind:value={expirationOption}
-            options={expiredDateOptions}
-            label={$t('expire_after')}
-            disabled={editingLink && !shouldChangeExpirationTime}
-            number={true}
-          />
-        </div>
       </div>
+
+      <Field label={$t('password')} description={$t('shared_link_password_description')}>
+        <PasswordInput bind:value={password} />
+      </Field>
+
+      <Field label={$t('description')}>
+        <Input bind:value={description} />
+      </Field>
+
+      <div class="mt-2">
+        <SettingSelect
+          bind:value={expirationOption}
+          options={expiredDateOptions}
+          label={$t('expire_after')}
+          disabled={editingLink && !shouldChangeExpirationTime}
+          number={true}
+        />
+      </div>
+
+      <Field label={$t('show_metadata')}>
+        <Switch bind:checked={showMetadata} />
+      </Field>
+
+      <Field label={$t('allow_public_user_to_download')} disabled={!showMetadata}>
+        <Switch bind:checked={allowDownload} />
+      </Field>
+
+      <Field label={$t('allow_public_user_to_upload')}>
+        <Switch bind:checked={allowUpload} />
+      </Field>
+
+      {#if editingLink}
+        <Field label={$t('change_expiration_time')}>
+          <Switch bind:checked={shouldChangeExpirationTime} />
+        </Field>
+      {/if}
     </div>
   </ModalBody>
 

web/src/lib/stores/asset-viewing.store.ts

@@ -19,7 +19,7 @@ function createAssetViewingStore() {
   };
 
   const setAssetId = async (id: string): Promise<AssetResponseDto> => {
-    const asset = await getAssetInfo({ id, key: authManager.key });
+    const asset = await getAssetInfo({ ...authManager.params, id });
     setAsset(asset);
     return asset;
   };

web/src/lib/utils.ts

@@ -184,7 +184,7 @@ export const getAssetOriginalUrl = (options: string | AssetUrlOptions) => {
     options = { id: options };
   }
   const { id, cacheKey } = options;
-  return createUrl(getAssetOriginalPath(id), { key: authManager.key, c: cacheKey });
+  return createUrl(getAssetOriginalPath(id), { ...authManager.params, c: cacheKey });
 };
 
 export const getAssetThumbnailUrl = (options: string | (AssetUrlOptions & { size?: AssetMediaSize })) => {
@@ -192,7 +192,7 @@ export const getAssetThumbnailUrl = (options: string | (AssetUrlOptions & { size
     options = { id: options };
   }
   const { id, size, cacheKey } = options;
-  return createUrl(getAssetThumbnailPath(id), { size, key: authManager.key, c: cacheKey });
+  return createUrl(getAssetThumbnailPath(id), { ...authManager.params, size, c: cacheKey });
 };
 
 export const getAssetPlaybackUrl = (options: string | AssetUrlOptions) => {
@@ -200,7 +200,7 @@ export const getAssetPlaybackUrl = (options: string | AssetUrlOptions) => {
     options = { id: options };
   }
   const { id, cacheKey } = options;
-  return createUrl(getAssetPlaybackPath(id), { key: authManager.key, c: cacheKey });
+  return createUrl(getAssetPlaybackPath(id), { ...authManager.params, c: cacheKey });
 };
 
 export const getProfileImageUrl = (user: UserResponseDto) =>
@@ -257,8 +257,9 @@ export const copyToClipboard = async (secret: string) => {
   }
 };
 
-export const makeSharedLinkUrl = (key: string) => {
+export const makeSharedLinkUrl = (sharedLink: SharedLinkResponseDto) => {
-  return new URL(`share/${key}`, get(serverConfig).externalDomain || globalThis.location.origin).href;
+  const path = sharedLink.slug ? `s/${sharedLink.slug}` : `share/${sharedLink.key}`;
+  return new URL(path, get(serverConfig).externalDomain || globalThis.location.origin).href;
 };
 
 export const oauth = {

web/src/lib/utils/asset-utils.ts

@@ -13,6 +13,7 @@ import { downloadRequest, withError } from '$lib/utils';
 import { getByteUnitString } from '$lib/utils/byte-units';
 import { getFormatter } from '$lib/utils/i18n';
 import { navigate } from '$lib/utils/navigation';
+import { asQueryString } from '$lib/utils/shared-links';
 import {
   addAssetsToAlbum as addAssets,
   AssetVisibility,
@@ -42,11 +43,11 @@ import { handleError } from './handle-error';
 
 export const addAssetsToAlbum = async (albumId: string, assetIds: string[], showNotification = true) => {
   const result = await addAssets({
+    ...authManager.params,
     id: albumId,
     bulkIdsDto: {
       ids: assetIds,
     },
-    key: authManager.key,
   });
   const count = result.filter(({ success }) => success).length;
   const duplicateErrorCount = result.filter(({ error }) => error === 'duplicate').length;
@@ -155,7 +156,7 @@ export const downloadArchive = async (fileName: string, options: Omit<DownloadIn
   const $preferences = get<UserPreferencesResponseDto | undefined>(preferences);
   const dto = { ...options, archiveSize: $preferences?.download.archiveSize };
 
-  const [error, downloadInfo] = await withError(() => getDownloadInfo({ downloadInfoDto: dto, key: authManager.key }));
+  const [error, downloadInfo] = await withError(() => getDownloadInfo({ ...authManager.params, downloadInfoDto: dto }));
   if (error) {
     const $t = get(t);
     handleError(error, $t('errors.unable_to_download_files'));
@@ -170,7 +171,7 @@ export const downloadArchive = async (fileName: string, options: Omit<DownloadIn
     const archive = downloadInfo.archives[index];
     const suffix = downloadInfo.archives.length > 1 ? `+${index + 1}` : '';
     const archiveName = fileName.replace('.zip', `${suffix}-${DateTime.now().toFormat('yyyyLLdd_HHmmss')}.zip`);
-    const key = authManager.key;
+    const queryParams = asQueryString(authManager.params);
 
     let downloadKey = `${archiveName} `;
     if (downloadInfo.archives.length > 1) {
@@ -184,7 +185,7 @@ export const downloadArchive = async (fileName: string, options: Omit<DownloadIn
       // TODO use sdk once it supports progress events
       const { data } = await downloadRequest({
         method: 'POST',
-        url: getBaseUrl() + '/download/archive' + (key ? `?key=${key}` : ''),
+        url: getBaseUrl() + '/download/archive' + (queryParams ? `?${queryParams}` : ''),
         data: { assetIds: archive.assetIds },
         signal: abort.signal,
         onDownloadProgress: (event) => downloadManager.update(downloadKey, event.loaded),
@@ -217,7 +218,7 @@ export const downloadFile = async (asset: AssetResponseDto) => {
   };
 
   if (asset.livePhotoVideoId) {
-    const motionAsset = await getAssetInfo({ id: asset.livePhotoVideoId, key: authManager.key });
+    const motionAsset = await getAssetInfo({ ...authManager.params, id: asset.livePhotoVideoId });
     if (!isAndroidMotionVideo(motionAsset) || get(preferences)?.download.includeEmbeddedVideos) {
       assets.push({
         filename: motionAsset.originalFileName,
@@ -227,16 +228,16 @@ export const downloadFile = async (asset: AssetResponseDto) => {
     }
   }
 
+  const queryParams = asQueryString(authManager.params);
+
   for (const { filename, id } of assets) {
     try {
-      const key = authManager.key;
-
       notificationController.show({
         type: NotificationType.Info,
         message: $t('downloading_asset_filename', { values: { filename: asset.originalFileName } }),
       });
 
-      downloadUrl(getBaseUrl() + `/assets/${id}/original` + (key ? `?key=${key}` : ''), filename);
+      downloadUrl(getBaseUrl() + `/assets/${id}/original` + (queryParams ? `?${queryParams}` : ''), filename);
     } catch (error) {
       handleError(error, $t('errors.error_downloading', { values: { filename } }));
     }

web/src/lib/utils/file-uploader.ts

@@ -5,6 +5,7 @@ import { uploadAssetsStore } from '$lib/stores/upload';
 import { uploadRequest } from '$lib/utils';
 import { addAssetsToAlbum } from '$lib/utils/asset-utils';
 import { ExecutorQueue } from '$lib/utils/executor-queue';
+import { asQueryString } from '$lib/utils/shared-links';
 import {
   Action,
   AssetMediaStatus,
@@ -152,8 +153,7 @@ async function fileUploader({
     }
 
     let responseData: { id: string; status: AssetMediaStatus; isTrashed?: boolean } | undefined;
-    const key = authManager.key;
+    if (crypto?.subtle?.digest && !authManager.isSharedLink) {
-    if (crypto?.subtle?.digest && !key) {
       uploadAssetsStore.updateItem(deviceAssetId, { message: $t('asset_hashing') });
       await tick();
       try {
@@ -179,10 +179,12 @@ async function fileUploader({
     }
 
     if (!responseData) {
+      const queryParams = asQueryString(authManager.params);
+
       uploadAssetsStore.updateItem(deviceAssetId, { message: $t('asset_uploading') });
       if (replaceAssetId) {
         const response = await uploadRequest<AssetMediaResponseDto>({
-          url: getBaseUrl() + getAssetOriginalPath(replaceAssetId) + (key ? `?key=${key}` : ''),
+          url: getBaseUrl() + getAssetOriginalPath(replaceAssetId) + (queryParams ? `?${queryParams}` : ''),
           method: 'PUT',
           data: formData,
           onUploadProgress: (event) => uploadAssetsStore.updateProgress(deviceAssetId, event.loaded, event.total),
@@ -190,7 +192,7 @@ async function fileUploader({
         responseData = response.data;
       } else {
         const response = await uploadRequest<AssetMediaResponseDto>({
-          url: getBaseUrl() + '/assets' + (key ? `?key=${key}` : ''),
+          url: getBaseUrl() + '/assets' + (queryParams ? `?${queryParams}` : ''),
           data: formData,
           onUploadProgress: (event) => uploadAssetsStore.updateProgress(deviceAssetId, event.loaded, event.total),
         });

web/src/lib/utils/navigation.ts

@@ -13,7 +13,8 @@ export const isExternalUrl = (url: string): boolean => {
 };
 
 export const isPhotosRoute = (route?: string | null) => !!route?.startsWith('/(user)/photos/[[assetId=id]]');
-export const isSharedLinkRoute = (route?: string | null) => !!route?.startsWith('/(user)/share/[key]');
+export const isSharedLinkRoute = (route?: string | null) =>
+  !!route?.startsWith('/(user)/share/[key]') || !!route?.startsWith('/(user)/s/[slug]');
 export const isSearchRoute = (route?: string | null) => !!route?.startsWith('/(user)/search');
 export const isAlbumsRoute = (route?: string | null) => !!route?.startsWith('/(user)/albums/[albumId=id]');
 export const isPeopleRoute = (route?: string | null) => !!route?.startsWith('/(user)/people/[personId]');

web/src/lib/utils/shared-links.ts

@@ -0,0 +1,58 @@
+import { getAssetThumbnailUrl, setSharedLink } from '$lib/utils';
+import { authenticate } from '$lib/utils/auth';
+import { getFormatter } from '$lib/utils/i18n';
+import { getAssetInfoFromParam } from '$lib/utils/navigation';
+import { getMySharedLink, isHttpError } from '@immich/sdk';
+
+export const asQueryString = ({ slug, key }: { slug?: string; key?: string }) => {
+  const params = new URLSearchParams();
+  if (slug) {
+    params.set('slug', slug);
+  }
+
+  if (key) {
+    params.set('key', key);
+  }
+
+  return params.toString();
+};
+
+export const loadSharedLink = async ({ url, params }: { url: URL; params: { key?: string; slug?: string } }) => {
+  const { key, slug } = params;
+  await authenticate(url, { public: true });
+
+  const common = { key, slug };
+
+  const $t = await getFormatter();
+
+  try {
+    const [sharedLink, asset] = await Promise.all([getMySharedLink({ key, slug }), getAssetInfoFromParam(params)]);
+    setSharedLink(sharedLink);
+    const assetCount = sharedLink.assets.length;
+    const assetId = sharedLink.album?.albumThumbnailAssetId || sharedLink.assets[0]?.id;
+    const assetPath = assetId ? getAssetThumbnailUrl(assetId) : '/feature-panel.png';
+
+    return {
+      ...common,
+      sharedLink,
+      asset,
+      meta: {
+        title: sharedLink.album ? sharedLink.album.albumName : $t('public_share'),
+        description: sharedLink.description || $t('shared_photos_and_videos_count', { values: { assetCount } }),
+        imageUrl: assetPath,
+      },
+    };
+  } catch (error) {
+    if (isHttpError(error) && error.data.message === 'Invalid password') {
+      return {
+        ...common,
+        passwordRequired: true,
+        meta: {
+          title: $t('password_required'),
+        },
+      };
+    }
+
+    throw error;
+  }
+};

web/src/routes/(user)/albums/[albumId=id]/[[photos=photos]]/[[assetId=id]]/+page.svelte

@@ -402,9 +402,8 @@
 
   const handleShareLink = async () => {
     const sharedLink = await modalManager.show(SharedLinkCreateModal, { albumId: album.id });
-
     if (sharedLink) {
-      await modalManager.show(QrCodeModal, { title: $t('view_link'), value: makeSharedLinkUrl(sharedLink.key) });
+      await modalManager.show(QrCodeModal, { title: $t('view_link'), value: makeSharedLinkUrl(sharedLink) });
     }
   };
 

web/src/routes/(user)/s/[slug]/+error.svelte

@@ -0,0 +1,5 @@
+<script lang="ts">
+  import SharedLinkErrorPage from '$lib/components/pages/SharedLinkErrorPage.svelte';
+</script>
+
+<SharedLinkErrorPage />

web/src/routes/(user)/s/[slug]/[[photos=photos]]/[[assetId=id]]/+page.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+  import SharedLinkPage from '$lib/components/pages/SharedLinkPage.svelte';
+  import type { PageData } from './$types';
+
+  type Props = {
+    data: PageData;
+  };
+
+  let { data }: Props = $props();
+</script>
+
+<SharedLinkPage {data} />

web/src/routes/(user)/s/[slug]/[[photos=photos]]/[[assetId=id]]/+page.ts

@@ -0,0 +1,4 @@
+import { loadSharedLink } from '$lib/utils/shared-links';
+import type { PageLoad } from './$types';
+
+export const load = (async ({ params, url }) => loadSharedLink({ params, url })) satisfies PageLoad;

web/src/routes/(user)/share/[key]/+error.svelte

@@ -1,14 +1,5 @@
 <script lang="ts">
-  import { page } from '$app/state';
+  import SharedLinkErrorPage from '$lib/components/pages/SharedLinkErrorPage.svelte';
 </script>
 
-<svelte:head>
+<SharedLinkErrorPage />
-  <title>Oops! Error - Immich</title>
-</svelte:head>
-
-<section class="flex flex-col px-4 h-dvh w-dvw place-content-center place-items-center">
-  <h1 class="py-10 text-4xl text-immich-primary dark:text-immich-dark-primary">Page not found :/</h1>
-  {#if page.error?.message}
-    <h2 class="text-xl text-immich-fg dark:text-immich-dark-fg">{page.error.message}</h2>
-  {/if}
-</section>

web/src/routes/(user)/share/[key]/[[photos=photos]]/[[assetId=id]]/+page.svelte

@@ -1,97 +1,12 @@
 <script lang="ts">
-  import AlbumViewer from '$lib/components/album-page/album-viewer.svelte';
+  import SharedLinkPage from '$lib/components/pages/SharedLinkPage.svelte';
-  import IndividualSharedViewer from '$lib/components/share-page/individual-shared-viewer.svelte';
-  import ControlAppBar from '$lib/components/shared-components/control-app-bar.svelte';
-  import ImmichLogoSmallLink from '$lib/components/shared-components/immich-logo-small-link.svelte';
-  import PasswordField from '$lib/components/shared-components/password-field.svelte';
-  import ThemeButton from '$lib/components/shared-components/theme-button.svelte';
-  import { assetViewingStore } from '$lib/stores/asset-viewing.store';
-  import { user } from '$lib/stores/user.store';
-  import { setSharedLink } from '$lib/utils';
-  import { handleError } from '$lib/utils/handle-error';
-  import { navigate } from '$lib/utils/navigation';
-  import { getMySharedLink, SharedLinkType } from '@immich/sdk';
-  import { Button } from '@immich/ui';
-  import { tick } from 'svelte';
-  import { t } from 'svelte-i18n';
   import type { PageData } from './$types';
 
-  interface Props {
+  type Props = {
     data: PageData;
-  }
+  };
 
   let { data }: Props = $props();
-
-  let { gridScrollTarget } = assetViewingStore;
-  let { sharedLink, passwordRequired, sharedLinkKey: key, meta } = $state(data);
-  let { title, description } = $state(meta);
-  let isOwned = $derived($user ? $user.id === sharedLink?.userId : false);
-  let password = $state('');
-
-  const handlePasswordSubmit = async () => {
-    try {
-      sharedLink = await getMySharedLink({ password, key });
-      setSharedLink(sharedLink);
-      passwordRequired = false;
-      title = (sharedLink.album ? sharedLink.album.albumName : $t('public_share')) + ' - Immich';
-      description =
-        sharedLink.description ||
-        $t('shared_photos_and_videos_count', { values: { assetCount: sharedLink.assets.length } });
-      await tick();
-      await navigate(
-        { targetRoute: 'current', assetId: null, assetGridRouteSearchParams: $gridScrollTarget },
-        { forceNavigate: true, replaceState: true },
-      );
-    } catch (error) {
-      handleError(error, $t('errors.unable_to_get_shared_link'));
-    }
-  };
-
-  const onsubmit = async (event: Event) => {
-    event.preventDefault();
-    await handlePasswordSubmit();
-  };
 </script>
 
-<svelte:head>
+<SharedLinkPage {data} />
-  <title>{title}</title>
-  <meta name="description" content={description} />
-</svelte:head>
-{#if passwordRequired}
-  <main
-    class="relative h-dvh overflow-hidden px-6 max-md:pt-(--navbar-height-md) pt-(--navbar-height) sm:px-12 md:px-24 lg:px-40"
-  >
-    <div class="flex flex-col items-center justify-center mt-20">
-      <div class="text-2xl font-bold text-immich-primary dark:text-immich-dark-primary">{$t('password_required')}</div>
-      <div class="mt-4 text-lg text-immich-primary dark:text-immich-dark-primary">
-        {$t('sharing_enter_password')}
-      </div>
-      <div class="mt-4">
-        <form class="flex gap-x-2" novalidate {onsubmit}>
-          <PasswordField autocomplete="off" bind:password placeholder="Password" />
-          <Button type="submit">{$t('submit')}</Button>
-        </form>
-      </div>
-    </div>
-  </main>
-  <header>
-    <ControlAppBar showBackButton={false}>
-      {#snippet leading()}
-        <ImmichLogoSmallLink />
-      {/snippet}
-
-      {#snippet trailing()}
-        <ThemeButton />
-      {/snippet}
-    </ControlAppBar>
-  </header>
-{/if}
-
-{#if !passwordRequired && sharedLink?.type == SharedLinkType.Album}
-  <AlbumViewer {sharedLink} />
-{/if}
-{#if !passwordRequired && sharedLink?.type == SharedLinkType.Individual}
-  <div class="immich-scrollbar">
-    <IndividualSharedViewer {sharedLink} {isOwned} />
-  </div>
-{/if}

web/src/routes/(user)/share/[key]/[[photos=photos]]/[[assetId=id]]/+page.ts

@@ -1,44 +1,4 @@
-import { getAssetThumbnailUrl, setSharedLink } from '$lib/utils';
+import { loadSharedLink } from '$lib/utils/shared-links';
-import { authenticate } from '$lib/utils/auth';
-import { getFormatter } from '$lib/utils/i18n';
-import { getAssetInfoFromParam } from '$lib/utils/navigation';
-import { getMySharedLink, isHttpError } from '@immich/sdk';
 import type { PageLoad } from './$types';
 
-export const load = (async ({ params, url }) => {
+export const load = (async ({ params, url }) => loadSharedLink({ params, url })) satisfies PageLoad;
-  const { key } = params;
-  await authenticate(url, { public: true });
-
-  const $t = await getFormatter();
-
-  try {
-    const [sharedLink, asset] = await Promise.all([getMySharedLink({ key }), getAssetInfoFromParam(params)]);
-    setSharedLink(sharedLink);
-    const assetCount = sharedLink.assets.length;
-    const assetId = sharedLink.album?.albumThumbnailAssetId || sharedLink.assets[0]?.id;
-    const assetPath = assetId ? getAssetThumbnailUrl(assetId) : '/feature-panel.png';
-
-    return {
-      sharedLink,
-      sharedLinkKey: key,
-      asset,
-      meta: {
-        title: sharedLink.album ? sharedLink.album.albumName : $t('public_share'),
-        description: sharedLink.description || $t('shared_photos_and_videos_count', { values: { assetCount } }),
-        imageUrl: assetPath,
-      },
-    };
-  } catch (error) {
-    if (isHttpError(error) && error.data.message === 'Invalid password') {
-      return {
-        passwordRequired: true,
-        sharedLinkKey: key,
-        meta: {
-          title: $t('password_required'),
-        },
-      };
-    }
-
-    throw error;
-  }
-}) satisfies PageLoad;

web/src/test-data/factories/shared-link-factory.ts

@@ -16,4 +16,5 @@ export const sharedLinkFactory = Sync.makeFactory<SharedLinkResponseDto>({
   allowUpload: Sync.each(() => faker.datatype.boolean()),
   allowDownload: Sync.each(() => faker.datatype.boolean()),
   showMetadata: Sync.each(() => faker.datatype.boolean()),
+  slug: null,
 });