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",

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;