feat(web): shared link filters (#15948)

i18n/en.json

@@ -436,6 +436,7 @@
   "back_close_deselect": "Back, close, or deselect",
   "backward": "Backward",
   "birthdate_saved": "Date of birth saved successfully",
+  "show_shared_links": "Show shared links",
   "birthdate_set_description": "Date of birth is used to calculate the age of this person at the time of a photo.",
   "blurred_background": "Blurred background",
   "bugs_and_feature_requests": "Bugs & Feature Requests",
@@ -804,6 +805,7 @@
   "include_shared_albums": "Include shared albums",
   "include_shared_partner_assets": "Include shared partner assets",
   "individual_share": "Individual share",
+  "individual_shares": "Individual shares",
   "info": "Info",
   "interval": {
     "day_at_onepm": "Every day at 1pm",
@@ -1172,6 +1174,7 @@
   "shared_from_partner": "Photos from {partner}",
   "shared_link_options": "Shared link options",
   "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.}}",
   "shared_with_partner": "Shared with {partner}",
   "sharing": "Sharing",

mobile/openapi/README.md

@@ -408,6 +408,8 @@ Class | Method | HTTP request | Description
  - [SharedLinkEditDto](doc//SharedLinkEditDto.md)
  - [SharedLinkResponseDto](doc//SharedLinkResponseDto.md)
  - [SharedLinkType](doc//SharedLinkType.md)
+ - [SharedLinksResponse](doc//SharedLinksResponse.md)
+ - [SharedLinksUpdate](doc//SharedLinksUpdate.md)
  - [SignUpDto](doc//SignUpDto.md)
  - [SmartSearchDto](doc//SmartSearchDto.md)
  - [SourceType](doc//SourceType.md)

mobile/openapi/lib/api.dart

@@ -221,6 +221,8 @@ part 'model/shared_link_create_dto.dart';
 part 'model/shared_link_edit_dto.dart';
 part 'model/shared_link_response_dto.dart';
 part 'model/shared_link_type.dart';
+part 'model/shared_links_response.dart';
+part 'model/shared_links_update.dart';
 part 'model/sign_up_dto.dart';
 part 'model/smart_search_dto.dart';
 part 'model/source_type.dart';

mobile/openapi/lib/api_client.dart

@@ -496,6 +496,10 @@ class ApiClient {
           return SharedLinkResponseDto.fromJson(value);
         case 'SharedLinkType':
           return SharedLinkTypeTypeTransformer().decode(value);
+        case 'SharedLinksResponse':
+          return SharedLinksResponse.fromJson(value);
+        case 'SharedLinksUpdate':
+          return SharedLinksUpdate.fromJson(value);
         case 'SignUpDto':
           return SignUpDto.fromJson(value);
         case 'SmartSearchDto':

mobile/openapi/lib/model/shared_links_response.dart

@@ -0,0 +1,107 @@
+//
+// AUTO-GENERATED FILE, DO NOT MODIFY!
+//
+// @dart=2.18
+
+// ignore_for_file: unused_element, unused_import
+// ignore_for_file: always_put_required_named_parameters_first
+// ignore_for_file: constant_identifier_names
+// ignore_for_file: lines_longer_than_80_chars
+
+part of openapi.api;
+
+class SharedLinksResponse {
+  /// Returns a new [SharedLinksResponse] instance.
+  SharedLinksResponse({
+    this.enabled = true,
+    this.sidebarWeb = false,
+  });
+
+  bool enabled;
+
+  bool sidebarWeb;
+
+  @override
+  bool operator ==(Object other) => identical(this, other) || other is SharedLinksResponse &&
+    other.enabled == enabled &&
+    other.sidebarWeb == sidebarWeb;
+
+  @override
+  int get hashCode =>
+    // ignore: unnecessary_parenthesis
+    (enabled.hashCode) +
+    (sidebarWeb.hashCode);
+
+  @override
+  String toString() => 'SharedLinksResponse[enabled=$enabled, sidebarWeb=$sidebarWeb]';
+
+  Map<String, dynamic> toJson() {
+    final json = <String, dynamic>{};
+      json[r'enabled'] = this.enabled;
+      json[r'sidebarWeb'] = this.sidebarWeb;
+    return json;
+  }
+
+  /// Returns a new [SharedLinksResponse] instance and imports its values from
+  /// [value] if it's a [Map], null otherwise.
+  // ignore: prefer_constructors_over_static_methods
+  static SharedLinksResponse? fromJson(dynamic value) {
+    upgradeDto(value, "SharedLinksResponse");
+    if (value is Map) {
+      final json = value.cast<String, dynamic>();
+
+      return SharedLinksResponse(
+        enabled: mapValueOfType<bool>(json, r'enabled')!,
+        sidebarWeb: mapValueOfType<bool>(json, r'sidebarWeb')!,
+      );
+    }
+    return null;
+  }
+
+  static List<SharedLinksResponse> listFromJson(dynamic json, {bool growable = false,}) {
+    final result = <SharedLinksResponse>[];
+    if (json is List && json.isNotEmpty) {
+      for (final row in json) {
+        final value = SharedLinksResponse.fromJson(row);
+        if (value != null) {
+          result.add(value);
+        }
+      }
+    }
+    return result.toList(growable: growable);
+  }
+
+  static Map<String, SharedLinksResponse> mapFromJson(dynamic json) {
+    final map = <String, SharedLinksResponse>{};
+    if (json is Map && json.isNotEmpty) {
+      json = json.cast<String, dynamic>(); // ignore: parameter_assignments
+      for (final entry in json.entries) {
+        final value = SharedLinksResponse.fromJson(entry.value);
+        if (value != null) {
+          map[entry.key] = value;
+        }
+      }
+    }
+    return map;
+  }
+
+  // maps a json object with a list of SharedLinksResponse-objects as value to a dart map
+  static Map<String, List<SharedLinksResponse>> mapListFromJson(dynamic json, {bool growable = false,}) {
+    final map = <String, List<SharedLinksResponse>>{};
+    if (json is Map && json.isNotEmpty) {
+      // ignore: parameter_assignments
+      json = json.cast<String, dynamic>();
+      for (final entry in json.entries) {
+        map[entry.key] = SharedLinksResponse.listFromJson(entry.value, growable: growable,);
+      }
+    }
+    return map;
+  }
+
+  /// The list of required keys that must be present in a JSON.
+  static const requiredKeys = <String>{
+    'enabled',
+    'sidebarWeb',
+  };
+}
+

mobile/openapi/lib/model/shared_links_update.dart

@@ -0,0 +1,125 @@
+//
+// AUTO-GENERATED FILE, DO NOT MODIFY!
+//
+// @dart=2.18
+
+// ignore_for_file: unused_element, unused_import
+// ignore_for_file: always_put_required_named_parameters_first
+// ignore_for_file: constant_identifier_names
+// ignore_for_file: lines_longer_than_80_chars
+
+part of openapi.api;
+
+class SharedLinksUpdate {
+  /// Returns a new [SharedLinksUpdate] instance.
+  SharedLinksUpdate({
+    this.enabled,
+    this.sidebarWeb,
+  });
+
+  ///
+  /// 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.
+  ///
+  bool? enabled;
+
+  ///
+  /// 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.
+  ///
+  bool? sidebarWeb;
+
+  @override
+  bool operator ==(Object other) => identical(this, other) || other is SharedLinksUpdate &&
+    other.enabled == enabled &&
+    other.sidebarWeb == sidebarWeb;
+
+  @override
+  int get hashCode =>
+    // ignore: unnecessary_parenthesis
+    (enabled == null ? 0 : enabled!.hashCode) +
+    (sidebarWeb == null ? 0 : sidebarWeb!.hashCode);
+
+  @override
+  String toString() => 'SharedLinksUpdate[enabled=$enabled, sidebarWeb=$sidebarWeb]';
+
+  Map<String, dynamic> toJson() {
+    final json = <String, dynamic>{};
+    if (this.enabled != null) {
+      json[r'enabled'] = this.enabled;
+    } else {
+    //  json[r'enabled'] = null;
+    }
+    if (this.sidebarWeb != null) {
+      json[r'sidebarWeb'] = this.sidebarWeb;
+    } else {
+    //  json[r'sidebarWeb'] = null;
+    }
+    return json;
+  }
+
+  /// Returns a new [SharedLinksUpdate] instance and imports its values from
+  /// [value] if it's a [Map], null otherwise.
+  // ignore: prefer_constructors_over_static_methods
+  static SharedLinksUpdate? fromJson(dynamic value) {
+    upgradeDto(value, "SharedLinksUpdate");
+    if (value is Map) {
+      final json = value.cast<String, dynamic>();
+
+      return SharedLinksUpdate(
+        enabled: mapValueOfType<bool>(json, r'enabled'),
+        sidebarWeb: mapValueOfType<bool>(json, r'sidebarWeb'),
+      );
+    }
+    return null;
+  }
+
+  static List<SharedLinksUpdate> listFromJson(dynamic json, {bool growable = false,}) {
+    final result = <SharedLinksUpdate>[];
+    if (json is List && json.isNotEmpty) {
+      for (final row in json) {
+        final value = SharedLinksUpdate.fromJson(row);
+        if (value != null) {
+          result.add(value);
+        }
+      }
+    }
+    return result.toList(growable: growable);
+  }
+
+  static Map<String, SharedLinksUpdate> mapFromJson(dynamic json) {
+    final map = <String, SharedLinksUpdate>{};
+    if (json is Map && json.isNotEmpty) {
+      json = json.cast<String, dynamic>(); // ignore: parameter_assignments
+      for (final entry in json.entries) {
+        final value = SharedLinksUpdate.fromJson(entry.value);
+        if (value != null) {
+          map[entry.key] = value;
+        }
+      }
+    }
+    return map;
+  }
+
+  // maps a json object with a list of SharedLinksUpdate-objects as value to a dart map
+  static Map<String, List<SharedLinksUpdate>> mapListFromJson(dynamic json, {bool growable = false,}) {
+    final map = <String, List<SharedLinksUpdate>>{};
+    if (json is Map && json.isNotEmpty) {
+      // ignore: parameter_assignments
+      json = json.cast<String, dynamic>();
+      for (final entry in json.entries) {
+        map[entry.key] = SharedLinksUpdate.listFromJson(entry.value, growable: growable,);
+      }
+    }
+    return map;
+  }
+
+  /// The list of required keys that must be present in a JSON.
+  static const requiredKeys = <String>{
+  };
+}
+

mobile/openapi/lib/model/user_preferences_response_dto.dart

@@ -21,6 +21,7 @@ class UserPreferencesResponseDto {
     required this.people,
     required this.purchase,
     required this.ratings,
+    required this.sharedLinks,
     required this.tags,
   });
 
@@ -40,6 +41,8 @@ class UserPreferencesResponseDto {
 
   RatingsResponse ratings;
 
+  SharedLinksResponse sharedLinks;
+
   TagsResponse tags;
 
   @override
@@ -52,6 +55,7 @@ class UserPreferencesResponseDto {
     other.people == people &&
     other.purchase == purchase &&
     other.ratings == ratings &&
+    other.sharedLinks == sharedLinks &&
     other.tags == tags;
 
   @override
@@ -65,10 +69,11 @@ class UserPreferencesResponseDto {
     (people.hashCode) +
     (purchase.hashCode) +
     (ratings.hashCode) +
+    (sharedLinks.hashCode) +
     (tags.hashCode);
 
   @override
-  String toString() => 'UserPreferencesResponseDto[avatar=$avatar, download=$download, emailNotifications=$emailNotifications, folders=$folders, memories=$memories, people=$people, purchase=$purchase, ratings=$ratings, tags=$tags]';
+  String toString() => 'UserPreferencesResponseDto[avatar=$avatar, download=$download, emailNotifications=$emailNotifications, folders=$folders, memories=$memories, people=$people, purchase=$purchase, ratings=$ratings, sharedLinks=$sharedLinks, tags=$tags]';
 
   Map<String, dynamic> toJson() {
     final json = <String, dynamic>{};
@@ -80,6 +85,7 @@ class UserPreferencesResponseDto {
       json[r'people'] = this.people;
       json[r'purchase'] = this.purchase;
       json[r'ratings'] = this.ratings;
+      json[r'sharedLinks'] = this.sharedLinks;
       json[r'tags'] = this.tags;
     return json;
   }
@@ -101,6 +107,7 @@ class UserPreferencesResponseDto {
         people: PeopleResponse.fromJson(json[r'people'])!,
         purchase: PurchaseResponse.fromJson(json[r'purchase'])!,
         ratings: RatingsResponse.fromJson(json[r'ratings'])!,
+        sharedLinks: SharedLinksResponse.fromJson(json[r'sharedLinks'])!,
         tags: TagsResponse.fromJson(json[r'tags'])!,
       );
     }
@@ -157,6 +164,7 @@ class UserPreferencesResponseDto {
     'people',
     'purchase',
     'ratings',
+    'sharedLinks',
     'tags',
   };
 }

mobile/openapi/lib/model/user_preferences_update_dto.dart

@@ -21,6 +21,7 @@ class UserPreferencesUpdateDto {
     this.people,
     this.purchase,
     this.ratings,
+    this.sharedLinks,
     this.tags,
   });
 
@@ -88,6 +89,14 @@ class UserPreferencesUpdateDto {
   ///
   RatingsUpdate? ratings;
 
+  ///
+  /// 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.
+  ///
+  SharedLinksUpdate? sharedLinks;
+
   ///
   /// 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
@@ -106,6 +115,7 @@ class UserPreferencesUpdateDto {
     other.people == people &&
     other.purchase == purchase &&
     other.ratings == ratings &&
+    other.sharedLinks == sharedLinks &&
     other.tags == tags;
 
   @override
@@ -119,10 +129,11 @@ class UserPreferencesUpdateDto {
     (people == null ? 0 : people!.hashCode) +
     (purchase == null ? 0 : purchase!.hashCode) +
     (ratings == null ? 0 : ratings!.hashCode) +
+    (sharedLinks == null ? 0 : sharedLinks!.hashCode) +
     (tags == null ? 0 : tags!.hashCode);
 
   @override
-  String toString() => 'UserPreferencesUpdateDto[avatar=$avatar, download=$download, emailNotifications=$emailNotifications, folders=$folders, memories=$memories, people=$people, purchase=$purchase, ratings=$ratings, tags=$tags]';
+  String toString() => 'UserPreferencesUpdateDto[avatar=$avatar, download=$download, emailNotifications=$emailNotifications, folders=$folders, memories=$memories, people=$people, purchase=$purchase, ratings=$ratings, sharedLinks=$sharedLinks, tags=$tags]';
 
   Map<String, dynamic> toJson() {
     final json = <String, dynamic>{};
@@ -166,6 +177,11 @@ class UserPreferencesUpdateDto {
     } else {
     //  json[r'ratings'] = null;
     }
+    if (this.sharedLinks != null) {
+      json[r'sharedLinks'] = this.sharedLinks;
+    } else {
+    //  json[r'sharedLinks'] = null;
+    }
     if (this.tags != null) {
       json[r'tags'] = this.tags;
     } else {
@@ -191,6 +207,7 @@ class UserPreferencesUpdateDto {
         people: PeopleUpdate.fromJson(json[r'people']),
         purchase: PurchaseUpdate.fromJson(json[r'purchase']),
         ratings: RatingsUpdate.fromJson(json[r'ratings']),
+        sharedLinks: SharedLinksUpdate.fromJson(json[r'sharedLinks']),
         tags: TagsUpdate.fromJson(json[r'tags']),
       );
     }

open-api/immich-openapi-specs.json

@@ -11514,6 +11514,34 @@
         ],
         "type": "string"
       },
+      "SharedLinksResponse": {
+        "properties": {
+          "enabled": {
+            "default": true,
+            "type": "boolean"
+          },
+          "sidebarWeb": {
+            "default": false,
+            "type": "boolean"
+          }
+        },
+        "required": [
+          "enabled",
+          "sidebarWeb"
+        ],
+        "type": "object"
+      },
+      "SharedLinksUpdate": {
+        "properties": {
+          "enabled": {
+            "type": "boolean"
+          },
+          "sidebarWeb": {
+            "type": "boolean"
+          }
+        },
+        "type": "object"
+      },
       "SignUpDto": {
         "properties": {
           "email": {
@@ -13160,6 +13188,9 @@
           "ratings": {
             "$ref": "#/components/schemas/RatingsResponse"
           },
+          "sharedLinks": {
+            "$ref": "#/components/schemas/SharedLinksResponse"
+          },
           "tags": {
             "$ref": "#/components/schemas/TagsResponse"
           }
@@ -13173,6 +13204,7 @@
           "people",
           "purchase",
           "ratings",
+          "sharedLinks",
           "tags"
         ],
         "type": "object"
@@ -13203,6 +13235,9 @@
           "ratings": {
             "$ref": "#/components/schemas/RatingsUpdate"
           },
+          "sharedLinks": {
+            "$ref": "#/components/schemas/SharedLinksUpdate"
+          },
           "tags": {
             "$ref": "#/components/schemas/TagsUpdate"
           }

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

@@ -113,6 +113,10 @@ export type PurchaseResponse = {
 export type RatingsResponse = {
     enabled: boolean;
 };
+export type SharedLinksResponse = {
+    enabled: boolean;
+    sidebarWeb: boolean;
+};
 export type TagsResponse = {
     enabled: boolean;
     sidebarWeb: boolean;
@@ -126,6 +130,7 @@ export type UserPreferencesResponseDto = {
     people: PeopleResponse;
     purchase: PurchaseResponse;
     ratings: RatingsResponse;
+    sharedLinks: SharedLinksResponse;
     tags: TagsResponse;
 };
 export type AvatarUpdate = {
@@ -158,6 +163,10 @@ export type PurchaseUpdate = {
 export type RatingsUpdate = {
     enabled?: boolean;
 };
+export type SharedLinksUpdate = {
+    enabled?: boolean;
+    sidebarWeb?: boolean;
+};
 export type TagsUpdate = {
     enabled?: boolean;
     sidebarWeb?: boolean;
@@ -171,6 +180,7 @@ export type UserPreferencesUpdateDto = {
     people?: PeopleUpdate;
     purchase?: PurchaseUpdate;
     ratings?: RatingsUpdate;
+    sharedLinks?: SharedLinksUpdate;
     tags?: TagsUpdate;
 };
 export type AlbumUserResponseDto = {

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

@@ -38,6 +38,14 @@ class PeopleUpdate {
   sidebarWeb?: boolean;
 }
 
+class SharedLinksUpdate {
+  @ValidateBoolean({ optional: true })
+  enabled?: boolean;
+
+  @ValidateBoolean({ optional: true })
+  sidebarWeb?: boolean;
+}
+
 class TagsUpdate {
   @ValidateBoolean({ optional: true })
   enabled?: boolean;
@@ -98,6 +106,11 @@ export class UserPreferencesUpdateDto {
   @Type(() => RatingsUpdate)
   ratings?: RatingsUpdate;
 
+  @Optional()
+  @ValidateNested()
+  @Type(() => SharedLinksUpdate)
+  sharedLinks?: SharedLinksUpdate;
+
   @Optional()
   @ValidateNested()
   @Type(() => TagsUpdate)
@@ -152,6 +165,11 @@ class TagsResponse {
   sidebarWeb: boolean = true;
 }
 
+class SharedLinksResponse {
+  enabled: boolean = true;
+  sidebarWeb: boolean = false;
+}
+
 class EmailNotificationsResponse {
   enabled!: boolean;
   albumInvite!: boolean;
@@ -175,6 +193,7 @@ export class UserPreferencesResponseDto implements UserPreferences {
   memories!: MemoriesResponse;
   people!: PeopleResponse;
   ratings!: RatingsResponse;
+  sharedLinks!: SharedLinksResponse;
   tags!: TagsResponse;
   avatar!: AvatarResponse;
   emailNotifications!: EmailNotificationsResponse;

server/src/entities/user-metadata.entity.ts

@@ -34,6 +34,10 @@ export interface UserPreferences {
   ratings: {
     enabled: boolean;
   };
+  sharedLinks: {
+    enabled: boolean;
+    sidebarWeb: boolean;
+  };
   tags: {
     enabled: boolean;
     sidebarWeb: boolean;
@@ -74,6 +78,10 @@ export const getDefaultPreferences = (user: { email: string }): UserPreferences
       enabled: true,
       sidebarWeb: false,
     },
+    sharedLinks: {
+      enabled: true,
+      sidebarWeb: false,
+    },
     ratings: {
       enabled: false,
     },

web/src/lib/components/elements/group-tab.svelte

@@ -3,12 +3,13 @@
 
   interface Props {
     filters: string[];
+    labels?: string[];
     selected: string;
     label: string;
     onSelect: (selected: string) => void;
   }
 
-  let { filters, selected, label, onSelect }: Props = $props();
+  let { filters, selected, label, labels, onSelect }: Props = $props();
 
   const id = `group-tab-${generateId()}`;
 </script>
@@ -32,7 +33,7 @@
         for="{id}-{index}"
         class="flex h-full cursor-pointer items-center px-4 text-sm hover:bg-gray-300 group-first-of-type:rounded-s-2xl group-last-of-type:rounded-e-2xl peer-checked:bg-gray-300 dark:hover:bg-gray-800 peer-checked:dark:bg-gray-700"
       >
-        {filter}
+        {labels?.[index] ?? filter}
       </label>
     </div>
   {/each}

web/src/lib/components/shared-components/side-bar/side-bar.svelte

@@ -21,6 +21,7 @@
     mdiToolboxOutline,
     mdiFolderOutline,
     mdiTagMultipleOutline,
+    mdiLink,
   } from '@mdi/js';
   import SideBarSection from './side-bar-section.svelte';
   import SideBarLink from './side-bar-link.svelte';
@@ -72,6 +73,10 @@
       />
     {/if}
 
+    {#if $preferences.sharedLinks.enabled && $preferences.sharedLinks.sidebarWeb}
+      <SideBarLink title={$t('shared_links')} routeId="/(user)/shared-links" icon={mdiLink} />
+    {/if}
+
     <SideBarLink
       title={$t('sharing')}
       routeId="/(user)/sharing"

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

@@ -1,15 +1,22 @@
 <script lang="ts">
+  import { goto } from '$app/navigation';
   import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
   import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
+  import { AppRoute } from '$lib/constants';
+  import type { SharedLinkResponseDto } from '@immich/sdk';
   import { mdiCircleEditOutline } from '@mdi/js';
   import { t } from 'svelte-i18n';
 
   interface Props {
     menuItem?: boolean;
-    onEdit: () => void;
+    sharedLink: SharedLinkResponseDto;
   }
 
-  let { menuItem = false, onEdit }: Props = $props();
+  let { sharedLink, menuItem = false }: Props = $props();
+
+  const onEdit = async () => {
+    await goto(`${AppRoute.SHARED_LINKS}/${sharedLink.id}`);
+  };
 </script>
 
 {#if menuItem}

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

@@ -15,10 +15,9 @@
   interface Props {
     link: SharedLinkResponseDto;
     onDelete: () => void;
-    onEdit: () => void;
   }
 
-  let { link, onDelete, onEdit }: Props = $props();
+  let { link, onDelete }: Props = $props();
 
   let now = DateTime.now();
   let expiresAt = $derived(link.expiresAt ? DateTime.fromISO(link.expiresAt) : undefined);
@@ -95,10 +94,9 @@
       </div>
     </div>
   </svelte:element>
-
   <div class="flex flex-auto flex-col place-content-center place-items-end text-end ms-4">
     <div class="sm:flex hidden">
-      <SharedLinkEdit {onEdit} />
+      <SharedLinkEdit sharedLink={link} />
       <SharedLinkCopy {link} />
       <SharedLinkDelete {onDelete} />
     </div>
@@ -112,7 +110,7 @@
         padding="3"
         hideContent
       >
-        <SharedLinkEdit menuItem {onEdit} />
+        <SharedLinkEdit menuItem sharedLink={link} />
         <SharedLinkCopy menuItem {link} />
         <SharedLinkDelete menuItem {onDelete} />
       </ButtonContextMenu>

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

@@ -27,6 +27,10 @@
   // Ratings
   let ratingsEnabled = $state($preferences?.ratings?.enabled ?? false);
 
+  // Shared links
+  let sharedLinksEnabled = $state($preferences?.sharedLinks?.enabled ?? true);
+  let sharedLinkSidebar = $state($preferences?.sharedLinks?.sidebarWeb ?? false);
+
   // Tags
   let tagsEnabled = $state($preferences?.tags?.enabled ?? false);
   let tagsSidebar = $state($preferences?.tags?.sidebarWeb ?? false);
@@ -39,6 +43,7 @@
           memories: { enabled: memoriesEnabled },
           people: { enabled: peopleEnabled, sidebarWeb: peopleSidebar },
           ratings: { enabled: ratingsEnabled },
+          sharedLinks: { enabled: sharedLinksEnabled, sidebarWeb: sharedLinkSidebar },
           tags: { enabled: tagsEnabled, sidebarWeb: tagsSidebar },
         },
       });
@@ -104,6 +109,21 @@
           </div>
         </SettingAccordion>
 
+        <SettingAccordion key="shared-links" title={$t('shared_links')} subtitle={$t('shared_links_description')}>
+          <div class="ml-4 mt-6">
+            <SettingSwitch title={$t('enable')} bind:checked={sharedLinksEnabled} />
+          </div>
+          {#if sharedLinksEnabled}
+            <div class="ml-4 mt-6">
+              <SettingSwitch
+                title={$t('sidebar')}
+                subtitle={$t('sidebar_display_description')}
+                bind:checked={sharedLinkSidebar}
+              />
+            </div>
+          {/if}
+        </SettingAccordion>
+
         <SettingAccordion key="tags" title={$t('tags')} subtitle={$t('tag_feature_description')}>
           <div class="ml-4 mt-6">
             <SettingSwitch title={$t('enable')} bind:checked={tagsEnabled} />

web/src/lib/constants.ts

@@ -30,7 +30,7 @@ export enum AppRoute {
   EXPLORE = '/explore',
   SHARE = '/share',
   SHARING = '/sharing',
-  SHARED_LINKS = '/sharing/sharedlinks',
+  SHARED_LINKS = '/shared-links',
   SEARCH = '/search',
   MAP = '/map',
   USER_SETTINGS = '/user-settings',

web/src/routes/(user)/shared-links/[[id=id]]/+page.svelte

@@ -0,0 +1,119 @@
+<script lang="ts">
+  import { goto } from '$app/navigation';
+  import { page } from '$app/state';
+  import GroupTab from '$lib/components/elements/group-tab.svelte';
+  import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
+  import CreateSharedLinkModal from '$lib/components/shared-components/create-share-link-modal/create-shared-link-modal.svelte';
+  import { dialogController } from '$lib/components/shared-components/dialog/dialog';
+  import {
+    notificationController,
+    NotificationType,
+  } from '$lib/components/shared-components/notification/notification';
+  import SharedLinkCard from '$lib/components/sharedlinks-page/shared-link-card.svelte';
+  import { AppRoute } from '$lib/constants';
+  import { handleError } from '$lib/utils/handle-error';
+  import { getAllSharedLinks, removeSharedLink, SharedLinkType, type SharedLinkResponseDto } from '@immich/sdk';
+  import { onMount } from 'svelte';
+  import { t } from 'svelte-i18n';
+  import type { PageData } from './$types';
+
+  type Props = {
+    data: PageData;
+  };
+
+  const { data }: Props = $props();
+
+  let sharedLinks: SharedLinkResponseDto[] = $state([]);
+  let sharedLink = $derived(sharedLinks.find(({ id }) => id === page.params.id));
+
+  const refresh = async () => {
+    sharedLinks = await getAllSharedLinks();
+  };
+
+  onMount(async () => {
+    await refresh();
+  });
+
+  const handleDeleteLink = async (id: string) => {
+    const isConfirmed = await dialogController.show({
+      title: $t('delete_shared_link'),
+      prompt: $t('confirm_delete_shared_link'),
+      confirmText: $t('delete'),
+    });
+
+    if (!isConfirmed) {
+      return;
+    }
+
+    try {
+      await removeSharedLink({ id });
+      notificationController.show({ message: $t('deleted_shared_link'), type: NotificationType.Info });
+      await refresh();
+    } catch (error) {
+      handleError(error, $t('errors.unable_to_delete_shared_link'));
+    }
+  };
+
+  const handleEditDone = async () => {
+    await refresh();
+    await goto(AppRoute.SHARED_LINKS);
+  };
+
+  type Filter = 'all' | 'album' | 'individual';
+
+  const filterMap: Record<Filter, string> = {
+    all: $t('all'),
+    album: $t('albums'),
+    individual: $t('individual_shares'),
+  };
+
+  let filters = Object.keys(filterMap);
+  let labels = Object.values(filterMap);
+
+  const getActiveTab = (url: URL) => {
+    const filter = url.searchParams.get('filter');
+    return filter && filters.includes(filter) ? filter : 'all';
+  };
+
+  let selectedTab = $derived(getActiveTab(page.url));
+  const handleSelectTab = async (value: string) => {
+    await goto(`${AppRoute.SHARED_LINKS}?filter=${value}`);
+  };
+
+  let filteredSharedLinks = $derived(
+    sharedLinks.filter(
+      ({ type }) =>
+        selectedTab === 'all' ||
+        (type === SharedLinkType.Album && selectedTab === 'album') ||
+        (type === SharedLinkType.Individual && selectedTab === 'individual'),
+    ),
+  );
+</script>
+
+<UserPageLayout title={data.meta.title}>
+  {#snippet buttons()}
+    <div class="hidden xl:block h-10">
+      <GroupTab label={$t('show_shared_links')} {filters} {labels} selected={selectedTab} onSelect={handleSelectTab} />
+    </div>
+  {/snippet}
+
+  <div>
+    {#if sharedLinks.length === 0}
+      <div
+        class="flex place-content-center place-items-center rounded-lg bg-gray-100 dark:bg-immich-dark-gray dark:text-immich-gray p-12"
+      >
+        <p>{$t('you_dont_have_any_shared_links')}</p>
+      </div>
+    {:else}
+      <div class="flex flex-col gap-2">
+        {#each filteredSharedLinks as link (link.id)}
+          <SharedLinkCard {link} onDelete={() => handleDeleteLink(link.id)} />
+        {/each}
+      </div>
+    {/if}
+
+    {#if sharedLink}
+      <CreateSharedLinkModal editingLink={sharedLink} onClose={handleEditDone} />
+    {/if}
+  </div>
+</UserPageLayout>

web/src/routes/(user)/shared-links/[[id=id]]/+page.ts

@@ -0,0 +1,14 @@
+import { authenticate } from '$lib/utils/auth';
+import { getFormatter } from '$lib/utils/i18n';
+import type { PageLoad } from './$types';
+
+export const load = (async () => {
+  await authenticate();
+  const $t = await getFormatter();
+
+  return {
+    meta: {
+      title: $t('shared_links'),
+    },
+  };
+}) satisfies PageLoad;

web/src/routes/(user)/sharing/sharedlinks/+page.svelte

@@ -1,89 +0,0 @@
-<script lang="ts">
-  import { goto, afterNavigate } from '$app/navigation';
-  import ControlAppBar from '$lib/components/shared-components/control-app-bar.svelte';
-  import CreateSharedLinkModal from '$lib/components/shared-components/create-share-link-modal/create-shared-link-modal.svelte';
-  import {
-    notificationController,
-    NotificationType,
-  } from '$lib/components/shared-components/notification/notification';
-  import SharedLinkCard from '$lib/components/sharedlinks-page/shared-link-card.svelte';
-  import { AppRoute } from '$lib/constants';
-  import { handleError } from '$lib/utils/handle-error';
-  import { getAllSharedLinks, removeSharedLink, type SharedLinkResponseDto } from '@immich/sdk';
-  import { mdiArrowLeft } from '@mdi/js';
-  import { onMount } from 'svelte';
-  import { dialogController } from '$lib/components/shared-components/dialog/dialog';
-  import { t } from 'svelte-i18n';
-
-  let sharedLinks: SharedLinkResponseDto[] = $state([]);
-  let editSharedLink: SharedLinkResponseDto | null = $state(null);
-
-  const refresh = async () => {
-    sharedLinks = await getAllSharedLinks();
-  };
-
-  onMount(async () => {
-    await refresh();
-  });
-
-  const handleDeleteLink = async (id: string) => {
-    const isConfirmed = await dialogController.show({
-      title: $t('delete_shared_link'),
-      prompt: $t('confirm_delete_shared_link'),
-      confirmText: $t('delete'),
-    });
-
-    if (!isConfirmed) {
-      return;
-    }
-
-    try {
-      await removeSharedLink({ id });
-      notificationController.show({ message: $t('deleted_shared_link'), type: NotificationType.Info });
-      await refresh();
-    } catch (error) {
-      handleError(error, $t('errors.unable_to_delete_shared_link'));
-    }
-  };
-
-  const handleEditDone = async () => {
-    await refresh();
-    editSharedLink = null;
-  };
-
-  let backUrl: string = AppRoute.SHARING;
-
-  afterNavigate(({ from }) => {
-    let url: string | undefined = from?.url?.pathname;
-    backUrl = url || AppRoute.SHARING;
-  });
-</script>
-
-<ControlAppBar backIcon={mdiArrowLeft} onClose={() => goto(backUrl)}>
-  {#snippet leading()}
-    {$t('shared_links')}
-  {/snippet}
-</ControlAppBar>
-
-<section class="mt-[120px] flex flex-col pb-[120px] container max-w-screen-lg mx-auto px-3">
-  <div class="mb-4 dark:text-immich-gray">
-    <p>{$t('manage_shared_links')}</p>
-  </div>
-  {#if sharedLinks.length === 0}
-    <div
-      class="flex place-content-center place-items-center rounded-lg bg-gray-100 dark:bg-immich-dark-gray dark:text-immich-gray p-12"
-    >
-      <p>{$t('you_dont_have_any_shared_links')}</p>
-    </div>
-  {:else}
-    <div class="flex flex-col">
-      {#each sharedLinks as link (link.id)}
-        <SharedLinkCard {link} onDelete={() => handleDeleteLink(link.id)} onEdit={() => (editSharedLink = link)} />
-      {/each}
-    </div>
-  {/if}
-</section>
-
-{#if editSharedLink}
-  <CreateSharedLinkModal editingLink={editSharedLink} onClose={handleEditDone} />
-{/if}

web/src/routes/(user)/sharing/sharedlinks/+page.ts

@@ -1,14 +1,7 @@
-import { authenticate } from '$lib/utils/auth';
+import { AppRoute } from '$lib/constants';
-import { getFormatter } from '$lib/utils/i18n';
+import { redirect } from '@sveltejs/kit';
 import type { PageLoad } from './$types';
 
-export const load = (async () => {
+export const load = (() => {
-  await authenticate();
+  redirect(307, AppRoute.SHARED_LINKS);
-  const $t = await getFormatter();
-
-  return {
-    meta: {
-      title: $t('shared_links'),
-    },
-  };
 }) satisfies PageLoad;