Merge branch 'main' into chore/album-remove-assets

* fix(mobile): app doesn't exit full-screen mode

* chore: rename restoreSystemUI to restoreEdgeToEdge

.github/workflows/test.yml

@@ -45,6 +45,8 @@ jobs:
               - 'server/**'
               - 'pnpm-lock.yaml'
               - 'mise.toml'
+              - 'packages/plugin-core/**'
+              - 'packages/plugin-sdk/**'
             cli:
               - 'packages/cli/**'
               - 'packages/sdk/**'

docker/example.env

@@ -10,7 +10,7 @@ DB_DATA_LOCATION=./postgres
 # TZ=Etc/UTC
 
 # The Immich version to use. You can pin this to a specific version like "v2.1.0"
-IMMICH_VERSION=v3
+IMMICH_VERSION=v2
 
 # Connection secret for postgres. You should change it to a random password
 # Please use only the characters `A-Za-z0-9`, without special characters or spaces

docs/docs/install/environment-variables.md

@@ -19,7 +19,7 @@ If this does not work, try running `docker compose up -d --force-recreate`.
 
 | Variable           | Description                     | Default | Containers               |
 | :----------------- | :------------------------------ | :-----: | :----------------------- |
-| `IMMICH_VERSION`   | Image tags                      |  `v3`   | server, machine learning |
+| `IMMICH_VERSION`   | Image tags                      |  `v2`   | server, machine learning |
 | `UPLOAD_LOCATION`  | Host path for uploads           |         | server                   |
 | `DB_DATA_LOCATION` | Host path for Postgres database |         | database                 |
 

docs/docs/install/upgrading.md

@@ -29,7 +29,7 @@ docker image prune
 ## Versioning Policy
 
 Immich follows [semantic versioning][semver], which tags releases in the format `<major>.<minor>.<patch>`. We intend for breaking changes to be limited to major version releases.
-You can configure your Docker image to point to the current major version by using a metatag, such as `:v3`.
+You can configure your Docker image to point to the current major version by using a metatag, such as `:v2`.
 
 Currently, we have no plans to backport patches to earlier versions. We encourage all users to run the most recent release of Immich.
 Switching back to an earlier version, even within the same minor release tag, is not supported.

i18n/en.json

@@ -1507,6 +1507,9 @@
   "notes": "Notes",
   "nothing_here_yet": "Nothing here yet",
   "notification_backup_reliability": "Enable notifications to improve background backup reliability",
+  "notification_enabled_list_tile_content": "Immich uses notifications for background backup. Manage them in your device settings.",
+  "notification_enabled_list_tile_open_button": "Open settings",
+  "notification_enabled_list_tile_title": "Notifications enabled",
   "notification_permission_dialog_content": "To enable notifications, go to Settings and select allow.",
   "notification_permission_list_tile_content": "Grant permission to enable notifications.",
   "notification_permission_list_tile_enable_button": "Enable Notifications",

mobile/lib/presentation/pages/drift_memory.page.dart

@@ -12,6 +12,7 @@ import 'package:immich_mobile/presentation/widgets/images/image_provider.dart';
 import 'package:immich_mobile/presentation/widgets/memory/memory_bottom_info.widget.dart';
 import 'package:immich_mobile/presentation/widgets/memory/memory_card.widget.dart';
 import 'package:immich_mobile/providers/haptic_feedback.provider.dart';
+import 'package:immich_mobile/utils/system_ui.utils.dart';
 import 'package:immich_mobile/widgets/memories/memory_epilogue.dart';
 import 'package:immich_mobile/widgets/memories/memory_progress_indicator.dart';
 
@@ -49,7 +50,7 @@ class DriftMemoryPage extends HookConsumerWidget {
       SystemChrome.setEnabledSystemUIMode(SystemUiMode.immersive);
       return () {
         // Clean up to normal edge to edge when we are done
-        SystemChrome.setEnabledSystemUIMode(SystemUiMode.edgeToEdge);
+        restoreEdgeToEdge();
       };
     });
 
@@ -328,7 +329,7 @@ class DriftMemoryPage extends HookConsumerWidget {
                               // turn off full screen mode here
                               // https://github.com/Milad-Akarie/auto_route_library/issues/1799
                               context.maybePop();
-                              SystemChrome.setEnabledSystemUIMode(SystemUiMode.edgeToEdge);
+                              restoreEdgeToEdge();
                             },
                             shape: const CircleBorder(),
                             color: Colors.white.withValues(alpha: 0.2),

mobile/lib/presentation/pages/drift_slideshow.page.dart

@@ -19,6 +19,7 @@ import 'package:immich_mobile/providers/asset_viewer/asset_viewer.provider.dart'
 import 'package:immich_mobile/providers/asset_viewer/video_player_provider.dart';
 import 'package:immich_mobile/providers/infrastructure/settings.provider.dart';
 import 'package:immich_mobile/routing/router.dart';
+import 'package:immich_mobile/utils/system_ui.utils.dart';
 import 'package:immich_mobile/widgets/common/immich_loading_indicator.dart';
 import 'package:immich_mobile/widgets/photo_view/photo_view.dart';
 import 'package:wakelock_plus/wakelock_plus.dart';
@@ -76,7 +77,7 @@ class _DriftSlideshowPageState extends ConsumerState<DriftSlideshowPage> with Si
     _pageController.dispose();
     _crossfadeController.dispose();
     unawaited(WakelockPlus.disable());
-    SystemChrome.setEnabledSystemUIMode(SystemUiMode.edgeToEdge);
+    unawaited(restoreEdgeToEdge());
     super.dispose();
   }
 
@@ -255,7 +256,7 @@ class _DriftSlideshowPageState extends ConsumerState<DriftSlideshowPage> with Si
   }
 
   void _onTapUp() async {
-    await SystemChrome.setEnabledSystemUIMode(_showAppBar ? SystemUiMode.immersive : SystemUiMode.edgeToEdge);
+    await (_showAppBar ? SystemChrome.setEnabledSystemUIMode(SystemUiMode.immersive) : restoreEdgeToEdge());
 
     WidgetsBinding.instance.addPostFrameCallback((_) {
       setState(() {

mobile/lib/presentation/widgets/asset_viewer/asset_viewer.page.dart

@@ -23,6 +23,7 @@ import 'package:immich_mobile/providers/asset_viewer/asset_viewer.provider.dart'
 import 'package:immich_mobile/providers/cast.provider.dart';
 import 'package:immich_mobile/providers/infrastructure/current_album.provider.dart';
 import 'package:immich_mobile/providers/infrastructure/timeline.provider.dart';
+import 'package:immich_mobile/utils/system_ui.utils.dart';
 import 'package:immich_mobile/widgets/photo_view/photo_view.dart';
 
 @RoutePage()
@@ -128,7 +129,7 @@ class _AssetViewerState extends ConsumerState<AssetViewer> {
     _reloadSubscription?.cancel();
     _stackChildrenKeepAlive?.close();
 
-    SystemChrome.setEnabledSystemUIMode(SystemUiMode.edgeToEdge);
+    unawaited(restoreEdgeToEdge());
 
     super.dispose();
   }
@@ -251,10 +252,8 @@ class _AssetViewerState extends ConsumerState<AssetViewer> {
   }
 
   void _setSystemUIMode(bool controls, bool details) {
-    final mode = !controls || (CurrentPlatform.isIOS && details)
-        ? SystemUiMode.immersiveSticky
-        : SystemUiMode.edgeToEdge;
-    unawaited(SystemChrome.setEnabledSystemUIMode(mode));
+    final immersive = !controls || (CurrentPlatform.isIOS && details);
+    unawaited(immersive ? SystemChrome.setEnabledSystemUIMode(SystemUiMode.immersiveSticky) : restoreEdgeToEdge());
   }
 
   @override

mobile/lib/utils/system_ui.utils.dart

@@ -0,0 +1,14 @@
+import 'dart:async';
+
+import 'package:flutter/services.dart';
+
+/// Restore the system bars and return to edge-to-edge layout.
+///
+/// On Android 15+/API 36 edge-to-edge is enforced, so calling
+/// setEnabledSystemUIMode(edgeToEdge) does NOT re-show bars that an immersive
+/// mode (immersive / immersiveSticky) previously hid. Explicitly request all
+/// overlays first, then return to edge-to-edge layout.
+Future<void> restoreEdgeToEdge() async {
+  await SystemChrome.setEnabledSystemUIMode(SystemUiMode.manual, overlays: SystemUiOverlay.values);
+  await SystemChrome.setEnabledSystemUIMode(SystemUiMode.edgeToEdge);
+}

mobile/lib/widgets/settings/notification_setting.dart

@@ -48,6 +48,14 @@ class NotificationSetting extends HookConsumerWidget {
                   showPermissionsDialog();
                 }
               }),
+        )
+      else
+        SettingsButtonListTile(
+          icon: Icons.notifications_active_outlined,
+          title: 'notification_enabled_list_tile_title'.tr(),
+          subtileText: 'notification_enabled_list_tile_content'.tr(),
+          buttonText: 'notification_enabled_list_tile_open_button'.tr(),
+          onButtonTap: () => openAppSettings(),
         ),
     ];
 

packages/plugin-core/manifest.json

@@ -222,7 +222,16 @@
       "name": "assetLock",
       "title": "Move to locked folder",
       "description": "Change visibility to locked",
-      "types": ["AssetV1"]
+      "types": ["AssetV1"],
+      "schema": {
+        "properties": {
+          "inverse": {
+            "title": "Inverse",
+            "description": "When true will unarchive any archived assets",
+            "type": "boolean"
+          }
+        }
+      }
     },
     {
       "name": "assetTimeline",

packages/plugin-core/package.json

@@ -5,7 +5,7 @@
   "main": "src/index.ts",
   "scripts": {
     "build": "pnpm build:tsc && pnpm build:wasm",
-    "build:tsc": "tsc --noEmit && node esbuild.js",
+    "build:tsc": "mkdir -p dist && echo \"type Manifest = $(cat manifest.json); \nexport default Manifest;\" > dist/manifest.d.ts && tsc --noEmit && node esbuild.js",
     "build:wasm": "extism-js dist/index.js -i src/index.d.ts -o dist/plugin.wasm"
   },
   "keywords": [],

packages/plugin-core/src/index.d.ts

@@ -22,6 +22,6 @@ declare module 'main' {
   export function assetArchive(): I32;
   export function assetLock(): I32;
   export function assetTimeline(): I32;
-  export function assetTrash(): I32;
+  // export function assetTrash(): I32;
   export function assetAddToAlbums(): I32;
 }

packages/plugin-core/src/index.ts

@@ -1,13 +1,11 @@
-import { wrapper } from '@immich/plugin-sdk';
-import { AssetTypeEnum, AssetVisibility, WorkflowType } from '@immich/sdk';
+import { getWrapper } from '@immich/plugin-sdk';
+import { AssetVisibility } from '@immich/sdk';
+import type manifestType from '../dist/manifest';
+
+const wrapper = getWrapper<manifestType>();
 
-type AssetFileFilterConfig = {
-  pattern: string;
-  matchType?: 'contains' | 'exact' | 'regex' | 'startsWith';
-  caseSensitive?: boolean;
-};
 export const assetFileFilter = () => {
-  return wrapper<WorkflowType.AssetV1, AssetFileFilterConfig>(({ data, config }) => {
+  return wrapper<'assetFileFilter'>(({ data, config }) => {
     const { pattern, matchType = 'contains', caseSensitive = false } = config;
 
     const { asset } = data;
@@ -43,7 +41,7 @@ export const assetFileFilter = () => {
 };
 
 export const assetMissingTimeZoneFilter = () => {
-  return wrapper<WorkflowType.AssetV1, { inverse?: boolean }>(({ config, data }) => {
+  return wrapper<'assetMissingTimeZoneFilter'>(({ config, data }) => {
     const hasTimeZone = !!data.asset?.exifInfo?.timeZone;
     const needsTimeZone = config.inverse ? true : false;
     return { workflow: { continue: hasTimeZone === needsTimeZone } };
@@ -51,13 +49,7 @@ export const assetMissingTimeZoneFilter = () => {
 };
 
 export const assetLocationFilter = () => {
-  return wrapper<
-    WorkflowType.AssetV1,
-    {
-      region?: { country?: string; state?: string; city?: string };
-      coordinate?: { latitude?: string; longitude?: string; radius?: number };
-    }
-  >(({ config, data }) => {
+  return wrapper<'assetLocationFilter'>(({ config, data }) => {
     if (
       (config.region?.country && config.region.country !== data.asset.exifInfo?.country) ||
       (config.region?.state && config.region.state !== data.asset.exifInfo?.state) ||
@@ -96,13 +88,13 @@ export const assetLocationFilter = () => {
 };
 
 export const assetTypeFilter = () => {
-  return wrapper<WorkflowType.AssetV1, { allowedTypes: AssetTypeEnum[] }>(({ config, data }) => {
+  return wrapper<'assetTypeFilter'>(({ config, data }) => {
     return { workflow: { continue: config.allowedTypes.includes(data.asset.type) } };
   });
 };
 
 export const assetFavorite = () => {
-  return wrapper<WorkflowType.AssetV1, { inverse?: boolean }>(({ config, data }) => {
+  return wrapper<'assetFavorite'>(({ config, data }) => {
     const target = config.inverse ? false : true;
     if (target !== data.asset.isFavorite) {
       return {
@@ -115,13 +107,13 @@ export const assetFavorite = () => {
 };
 
 export const assetVisibility = () => {
-  return wrapper<WorkflowType.AssetV1, { visibility: AssetVisibility }>(({ config }) => ({
-    changes: { asset: { visibility: config.visibility } },
+  return wrapper<'assetVisibility'>(({ config }) => ({
+    changes: { asset: { visibility: config.visibility as AssetVisibility } },
   }));
 };
 
 export const assetArchive = () => {
-  return wrapper<WorkflowType.AssetV1, { inverse?: boolean }>(({ config, data }) => {
+  return wrapper<'assetArchive'>(({ config, data }) => {
     if (!config.inverse && data.asset.visibility !== AssetVisibility.Archive) {
       return { changes: { asset: { visibility: AssetVisibility.Archive } } };
     }
@@ -135,7 +127,7 @@ export const assetArchive = () => {
 };
 
 export const assetLock = () => {
-  return wrapper<WorkflowType.AssetV1, { inverse?: boolean }>(({ config, data }) => {
+  return wrapper<'assetLock'>(({ config, data }) => {
     if (!config.inverse && data.asset.visibility !== AssetVisibility.Locked) {
       return { changes: { asset: { visibility: AssetVisibility.Locked } } };
     }
@@ -148,13 +140,13 @@ export const assetLock = () => {
   });
 };
 
-export const assetTrash = () => {
-  // TODO use trash/untrash host functions
-  return wrapper<WorkflowType.AssetV1, { inverse?: boolean }>(() => ({}));
-};
+// export const assetTrash = () => {
+//   // TODO use trash/untrash host functions
+//   return wrapper<WorkflowType.AssetV1, { inverse?: boolean }>(() => ({}));
+// };
 
 export const assetAddToAlbums = () => {
-  return wrapper<WorkflowType.AssetV1, { albumIds: string[]; albumName?: string }>(({ config, data, functions }) => {
+  return wrapper<'assetAddToAlbums'>(({ config, data, functions }) => {
     const assetId = data.asset.id;
 
     if (config.albumIds.length === 0) {

packages/plugin-sdk/src/sdk.ts

@@ -1,53 +1,104 @@
 import type { WorkflowType } from '@immich/sdk';
 import { hostFunctions } from 'src/host-functions.js';
 import type {
-  ConfigValue,
   WorkflowEventPayload,
   WorkflowResponse,
   WorkflowStepConfig,
 } from 'src/types.js';
 
-export const wrapper = <
-  T extends WorkflowType,
-  TConfig extends ConfigValue = ConfigValue,
->(
-  fn: (
-    payload: WorkflowEventPayload<T, TConfig> & {
-      functions: ReturnType<typeof hostFunctions>;
-    },
-  ) => WorkflowResponse<T> | undefined,
-) => {
-  const input = Host.inputString();
-
-  try {
-    const payload = JSON.parse(input) as WorkflowEventPayload<T, TConfig>;
-    const event = {
-      ...payload,
-      functions: hostFunctions(payload.workflow.authToken),
-    };
-
-    const eventConfigBefore = JSON.stringify(event.config);
-
-    console.debug(
-      `Inputs: trigger=${event.trigger}, event=${event.type}, config=${eventConfigBefore}`,
-    );
-
-    const response = fn(event) ?? {};
-
-    // if config changed, notify host
-    const eventConfigAfter = JSON.stringify(event.config);
-    if (!response.config && eventConfigBefore !== eventConfigAfter) {
-      response.config = event.config as WorkflowStepConfig;
-    }
-
-    console.debug(
-      `Outputs: workflow=${JSON.stringify(response.workflow)}, changes=${JSON.stringify(response.changes)}, data=${JSON.stringify(response.data)}, config=${JSON.stringify(response.config)}`,
-    );
-
-    const output = JSON.stringify(response);
-    Host.outputString(output);
-  } catch (error: Error | any) {
-    console.error(`Unhandled plugin exception: ${error.message || error}`);
-    throw error;
-  }
+type Property = {
+  type: 'string' | 'boolean' | 'number';
+  array?: boolean;
+  enum?: string[];
+} & {
+  type: 'object';
+  properties: { [K: string]: Property };
+  required?: string[];
 };
+
+type RequiredProperties<
+  Properties extends { [K: string]: unknown },
+  Required extends string[] | undefined,
+  RequiredKeys extends string = Required extends undefined
+    ? never
+    : NonNullable<Required>[number],
+> = {
+  properties: Pick<Properties, RequiredKeys> &
+    Partial<Omit<Properties, RequiredKeys>>;
+};
+
+type GetConfigType<T extends Property> = 'enum' extends keyof T
+  ? NonNullable<T['enum']>[number]
+  : T['type'] extends 'boolean'
+    ? boolean
+    : T['type'] extends 'number'
+      ? number
+      : T['type'] extends 'string'
+        ? string
+        : T['type'] extends 'object'
+          ? ConfigValue<T>
+          : never;
+
+type ConfigValue<
+  T extends { properties: { [K: string]: Property }; required?: string[] },
+  Properties extends { [K: string]: Property } = T['properties'],
+> = T extends never
+  ? never
+  : RequiredProperties<
+      {
+        [K in keyof Properties]: Properties[K]['array'] extends true
+          ? Array<GetConfigType<Properties[K]>>
+          : GetConfigType<Properties[K]>;
+      },
+      'required' extends keyof T ? T['required'] : undefined
+    >['properties'];
+
+export const getWrapper =
+  <T extends Record<string, any>>() =>
+  <
+    K extends T['methods'][number]['name'],
+    L extends WorkflowType = (T['methods'][number] & {
+      name: K;
+    })['types'][number],
+    TConfig = ConfigValue<(T['methods'][number] & { name: K })['schema']>,
+  >(
+    fn: (
+      payload: WorkflowEventPayload<L, TConfig> & {
+        functions: ReturnType<typeof hostFunctions>;
+      },
+    ) => WorkflowResponse<L> | undefined,
+  ) => {
+    const input = Host.inputString();
+
+    try {
+      const payload = JSON.parse(input) as WorkflowEventPayload<K, TConfig>;
+      const event = {
+        ...payload,
+        functions: hostFunctions(payload.workflow.authToken),
+      };
+
+      const eventConfigBefore = JSON.stringify(event.config);
+
+      console.debug(
+        `Inputs: trigger=${event.trigger}, event=${event.type}, config=${eventConfigBefore}`,
+      );
+
+      const response = fn(event) ?? {};
+
+      // if config changed, notify host
+      const eventConfigAfter = JSON.stringify(event.config);
+      if (!response.config && eventConfigBefore !== eventConfigAfter) {
+        response.config = event.config as WorkflowStepConfig;
+      }
+
+      console.debug(
+        `Outputs: workflow=${JSON.stringify(response.workflow)}, changes=${JSON.stringify(response.changes)}, data=${JSON.stringify(response.data)}, config=${JSON.stringify(response.config)}`,
+      );
+
+      const output = JSON.stringify(response);
+      Host.outputString(output);
+    } catch (error: Error | any) {
+      console.error(`Unhandled plugin exception: ${error.message || error}`);
+      throw error;
+    }
+  };

server/src/repositories/plugin.repository.ts

@@ -224,6 +224,7 @@ export class PluginRepository {
                 error: (message) => logger.error(message),
               } as Console,
               logLevel: asExtismLogLevel(logger.getLogLevel()),
+              enableWasiOutput: true,
             },
           ),
         destroy: (plugin) => plugin.close(),

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

@@ -71,7 +71,6 @@
     onAction?: OnAction;
     onUndoDelete?: OnUndoDelete;
     onClose?: (assetId: string) => void;
-    onRemoveFromAlbum?: (assetIds: string[]) => void;
     onRandom?: () => Promise<{ id: string } | undefined>;
   }
 
@@ -87,7 +86,6 @@
     onAction,
     onUndoDelete,
     onClose,
-    onRemoveFromAlbum,
     onRandom,
   }: Props = $props();
 
@@ -503,7 +501,6 @@
         onAction={handleAction}
         {onUndoDelete}
         onClose={onClose ? () => onClose(stack?.primaryAssetId ?? asset.id) : undefined}
-        {onRemoveFromAlbum}
         {isPlayingOriginalVideo}
         {setPlayOriginalVideo}
       />

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

@@ -14,7 +14,6 @@
   import UnstackAction from '$lib/components/asset-viewer/actions/UnstackAction.svelte';
   import LoadingDots from '$lib/components/LoadingDots.svelte';
   import ButtonContextMenu from '$lib/components/shared-components/context-menu/ButtonContextMenu.svelte';
-  import RemoveFromAlbumAction from '$lib/components/timeline/actions/RemoveFromAlbumAction.svelte';
   import { assetViewerManager } from '$lib/managers/asset-viewer-manager.svelte';
   import { authManager } from '$lib/managers/auth-manager.svelte';
   import { languageManager } from '$lib/managers/language-manager.svelte';
@@ -38,34 +37,31 @@
 
   interface Props {
     asset: AssetResponseDto;
-    album?: AlbumResponseDto | null;
+    album?: AlbumResponseDto;
     person?: PersonResponseDto | null;
     stack?: StackResponseDto | null;
     preAction: PreAction;
     onAction: OnAction;
     onUndoDelete?: OnUndoDelete;
     onClose?: () => void;
-    onRemoveFromAlbum?: (assetIds: string[]) => void;
     isPlayingOriginalVideo: boolean;
     setPlayOriginalVideo: (value: boolean) => void;
   }
 
   let {
     asset,
-    album = null,
+    album,
     person = null,
     stack = null,
     preAction,
     onAction,
     onUndoDelete = undefined,
     onClose,
-    onRemoveFromAlbum,
     isPlayingOriginalVideo = false,
     setPlayOriginalVideo,
   }: Props = $props();
 
   const isOwner = $derived(authManager.authenticated && asset.ownerId === authManager.user.id);
-  const isAlbumOwner = $derived(authManager.authenticated && album?.albumUsers[0].user.id === authManager.user.id);
   const isLocked = $derived(asset.visibility === AssetVisibility.Locked);
 
   const { Cast } = $derived(getGlobalActions($t));
@@ -85,7 +81,7 @@
     onAction: () => setPlayOriginalVideo(!isPlayingOriginalVideo),
   });
 
-  const Actions = $derived(getAssetActions($t, { ...asset, stackPrimaryAssetId: stack?.primaryAssetId }));
+  const Actions = $derived(getAssetActions($t, { ...asset, stackPrimaryAssetId: stack?.primaryAssetId }, album));
   const sharedLink = getSharedLink();
 </script>
 
@@ -146,9 +142,7 @@
         {/if}
 
         <ActionMenuItem action={Actions.AddToAlbum} />
-        {#if album && (isOwner || isAlbumOwner)}
-          <RemoveFromAlbumAction {album} onRemove={onRemoveFromAlbum} assetIds={[asset.id]} menuItem />
-        {/if}
+        <ActionMenuItem action={Actions.RemoveFromAlbum} />
 
         {#if isOwner}
           <AddToStackAction {asset} {stack} {onAction} />

web/src/lib/components/timeline/TimelineAssetViewer.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import type { Action } from '$lib/components/asset-viewer/actions/action';
   import type { AssetCursor } from '$lib/components/asset-viewer/AssetViewer.svelte';
+  import OnEvents from '$lib/components/OnEvents.svelte';
   import { AssetAction } from '$lib/constants';
   import { assetViewerManager } from '$lib/managers/asset-viewer-manager.svelte';
   import { assetCacheManager } from '$lib/managers/AssetCacheManager.svelte';
@@ -106,7 +107,11 @@
     });
   };
 
-  const handleRemoveFromAlbum = async (assetIds: string[]) => {
+  const onAlbumRemoveAssets = async ({ assetIds, albumIds }: { assetIds: string[]; albumIds: string[] }) => {
+    if (!album || !albumIds.includes(album.id)) {
+      return;
+    }
+
     timelineManager.removeAssets(assetIds);
 
     if (!assetIds.includes(assetCursor.current.id)) {
@@ -234,6 +239,8 @@
   });
 </script>
 
+<OnEvents {onAlbumRemoveAssets} />
+
 {#await import('$lib/components/asset-viewer/AssetViewer.svelte') then { default: AssetViewer }}
   <AssetViewer
     {withStacked}
@@ -251,7 +258,6 @@
     }}
     onUndoDelete={handleUndoDelete}
     onRandom={handleRandom}
-    onRemoveFromAlbum={handleRemoveFromAlbum}
     onClose={handleClose}
   />
 {/await}

web/src/lib/components/timeline/actions/RemoveFromAlbumAction.svelte

@@ -1,61 +0,0 @@
-<script lang="ts">
-  import MenuOption from '$lib/components/shared-components/context-menu/MenuOption.svelte';
-  import { assetMultiSelectManager } from '$lib/managers/asset-multi-select-manager.svelte';
-  import { handleError } from '$lib/utils/handle-error';
-  import { getAlbumInfo, removeAssetFromAlbum, type AlbumResponseDto } from '@immich/sdk';
-  import { IconButton, modalManager, toastManager } from '@immich/ui';
-  import { mdiDeleteOutline, mdiImageRemoveOutline } from '@mdi/js';
-  import { t } from 'svelte-i18n';
-
-  interface Props {
-    album: AlbumResponseDto;
-    onRemove: ((assetIds: string[]) => void) | undefined;
-    assetIds?: string[];
-    menuItem?: boolean;
-  }
-
-  let { album = $bindable(), onRemove, assetIds, menuItem = false }: Props = $props();
-
-  const removeFromAlbum = async () => {
-    const ids = assetIds ?? assetMultiSelectManager.assets.map(({ id }) => id) ?? [];
-
-    const isConfirmed = await modalManager.showDialog({
-      prompt: $t('remove_assets_album_confirmation', { values: { count: ids.length } }),
-    });
-
-    if (!isConfirmed) {
-      return;
-    }
-
-    try {
-      const results = await removeAssetFromAlbum({
-        id: album.id,
-        bulkIdsDto: { ids },
-      });
-
-      album = await getAlbumInfo({ id: album.id });
-
-      onRemove?.(ids);
-
-      const count = results.filter(({ success }) => success).length;
-      toastManager.primary($t('assets_removed_count', { values: { count } }));
-
-      assetMultiSelectManager.clear();
-    } catch (error) {
-      handleError(error, $t('errors.error_removing_assets_from_album'));
-    }
-  };
-</script>
-
-{#if menuItem}
-  <MenuOption text={$t('remove_from_album')} icon={mdiImageRemoveOutline} onClick={removeFromAlbum} />
-{:else}
-  <IconButton
-    shape="round"
-    color="secondary"
-    variant="ghost"
-    aria-label={$t('remove_from_album')}
-    icon={mdiDeleteOutline}
-    onclick={removeFromAlbum}
-  />
-{/if}

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

@@ -40,6 +40,7 @@ export type Events = {
   AssetsTag: [string[]];
 
   AlbumAddAssets: [{ assetIds: string[]; albumIds: string[] }];
+  AlbumRemoveAssets: [{ assetIds: string[]; albumIds: string[] }];
   AlbumCreate: [AlbumResponseDto];
   AlbumUpdate: [AlbumResponseDto];
   AlbumDelete: [AlbumResponseDto];

web/src/lib/services/asset.service.ts

@@ -4,8 +4,10 @@ import {
   AssetTypeEnum,
   AssetVisibility,
   getAssetInfo,
+  removeAssetFromAlbum,
   runAssetJobs,
   updateAsset,
+  type AlbumResponseDto,
   type AssetJobsDto,
   type AssetResponseDto,
 } from '@immich/sdk';
@@ -24,6 +26,7 @@ import {
   mdiHeart,
   mdiHeartOutline,
   mdiImageRefreshOutline,
+  mdiImageRemoveOutline,
   mdiImageSearch,
   mdiInformationOutline,
   mdiMagnifyMinusOutline,
@@ -55,8 +58,9 @@ import { downloadUrl } from '$lib/utils';
 import { handleError } from '$lib/utils/handle-error';
 import { getFormatter } from '$lib/utils/i18n';
 
-export const getAssetBulkActions = ($t: MessageFormatter) => {
+export const getAssetBulkActions = ($t: MessageFormatter, album?: AlbumResponseDto) => {
   const ownedAssets = assetMultiSelectManager.ownedAssets;
+  const isAlbumOwner = album?.albumUsers[0].user.id === authManager.user.id;
 
   const onAction = async (name: AssetJobName) => {
     await handleRunAssetJob({ name, assetIds: ownedAssets.map(({ id }) => id) });
@@ -71,6 +75,17 @@ export const getAssetBulkActions = ($t: MessageFormatter) => {
       modalManager.show(AssetAddToAlbumModal, { assetIds: assetMultiSelectManager.assets.map((asset) => asset.id) }),
   };
 
+  const RemoveFromAlbum: ActionItem = {
+    title: $t('remove_from_album'),
+    icon: mdiImageRemoveOutline,
+    $if: () => !!album && (isAlbumOwner || assetMultiSelectManager.isAllUserOwned),
+    onAction: () =>
+      handleBulkRemoveAssetsFromAlbum(
+        assetMultiSelectManager.assets.map((asset) => asset.id),
+        album!,
+      ),
+  };
+
   const RefreshFacesJob: ActionItem = {
     title: $t('refresh_faces'),
     icon: mdiHeadSyncOutline,
@@ -96,13 +111,25 @@ export const getAssetBulkActions = ($t: MessageFormatter) => {
     $if: () => ownedAssets.every((asset) => asset.isVideo),
   };
 
-  return { AddToAlbum, RefreshFacesJob, RefreshMetadataJob, RegenerateThumbnailJob, TranscodeVideoJob };
+  return {
+    AddToAlbum,
+    RemoveFromAlbum,
+    RefreshFacesJob,
+    RefreshMetadataJob,
+    RegenerateThumbnailJob,
+    TranscodeVideoJob,
+  };
 };
 
-export const getAssetActions = ($t: MessageFormatter, asset: AssetResponseDto & { stackPrimaryAssetId?: string }) => {
+export const getAssetActions = (
+  $t: MessageFormatter,
+  asset: AssetResponseDto & { stackPrimaryAssetId?: string },
+  album?: AlbumResponseDto,
+) => {
   const sharedLink = getSharedLink();
   const authUser = authManager.authenticated ? authManager.user : undefined;
   const isOwner = !!(authUser && authUser.id === asset.ownerId);
+  const isAlbumOwner = !!(authUser && authUser.id === album?.albumUsers[0].user.id);
   const smartSearchEnabled = featureFlagsManager.value.smartSearch;
 
   const Share: ActionItem = {
@@ -181,6 +208,13 @@ export const getAssetActions = ($t: MessageFormatter, asset: AssetResponseDto &
     onAction: () => modalManager.show(AssetAddToAlbumModal, { assetIds: [asset.id] }),
   };
 
+  const RemoveFromAlbum: ActionItem = {
+    title: $t('remove_from_album'),
+    icon: mdiImageRemoveOutline,
+    $if: () => !!album && (isOwner || isAlbumOwner),
+    onAction: () => handleRemoveAssetsFromAlbum([asset.id], album!),
+  };
+
   const Offline: ActionItem = {
     title: $t('asset_offline'),
     icon: mdiAlertOutline,
@@ -310,6 +344,7 @@ export const getAssetActions = ($t: MessageFormatter, asset: AssetResponseDto &
     StopMotionPhoto,
     PlaySlideshow,
     AddToAlbum,
+    RemoveFromAlbum,
     ZoomIn,
     ZoomOut,
     Copy,
@@ -400,6 +435,39 @@ const handleUnfavorite = async (asset: AssetResponseDto) => {
   }
 };
 
+const handleBulkRemoveAssetsFromAlbum = async (assetIds: string[], album: AlbumResponseDto) => {
+  const $t = await getFormatter();
+
+  const isConfirmed = await modalManager.showDialog({
+    prompt: $t('remove_assets_album_confirmation', { values: { count: assetIds.length } }),
+  });
+
+  if (!isConfirmed) {
+    return;
+  }
+
+  await handleRemoveAssetsFromAlbum(assetIds, album);
+  assetMultiSelectManager.clear();
+};
+
+const handleRemoveAssetsFromAlbum = async (assetIds: string[], album: AlbumResponseDto) => {
+  const $t = await getFormatter();
+
+  try {
+    const results = await removeAssetFromAlbum({
+      id: album.id,
+      bulkIdsDto: { ids: assetIds },
+    });
+
+    const count = results.filter(({ success }) => success).length;
+
+    toastManager.primary($t('assets_removed_count', { values: { count } }));
+    eventManager.emit('AlbumRemoveAssets', { assetIds, albumIds: [album.id] });
+  } catch (error) {
+    handleError(error, $t('errors.error_removing_assets_from_album'));
+  }
+};
+
 const getAssetJobMessage = ($t: MessageFormatter, job: AssetJobName) => {
   const messages: Record<AssetJobName, string> = {
     [AssetJobName.RefreshFaces]: $t('refreshing_faces'),

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

@@ -19,7 +19,6 @@
   import DeleteAssets from '$lib/components/timeline/actions/DeleteAssetsAction.svelte';
   import DownloadAction from '$lib/components/timeline/actions/DownloadAction.svelte';
   import FavoriteAction from '$lib/components/timeline/actions/FavoriteAction.svelte';
-  import RemoveFromAlbum from '$lib/components/timeline/actions/RemoveFromAlbumAction.svelte';
   import SelectAllAssets from '$lib/components/timeline/actions/SelectAllAction.svelte';
   import SetVisibilityAction from '$lib/components/timeline/actions/SetVisibilityAction.svelte';
   import TagAction from '$lib/components/timeline/actions/TagAction.svelte';
@@ -78,6 +77,7 @@
   import type { PageData } from './$types';
   import AlbumDescription from './AlbumDescription.svelte';
   import AlbumTitle from './AlbumTitle.svelte';
+  import ActionMenuItem from '$lib/components/ActionMenuItem.svelte';
 
   interface Props {
     data: PageData;
@@ -156,6 +156,12 @@
     assetMultiSelectManager.clear();
   };
 
+  const onAlbumRemoveAssets = async ({ assetIds, albumIds }: { assetIds: string[]; albumIds: string[] }) => {
+    if (albumIds.includes(album.id)) {
+      await handleRemoveAssets(assetIds);
+    }
+  };
+
   const handleRemoveAssets = async (assetIds: string[]) => {
     timelineManager.removeAssets(assetIds);
     await refreshAlbum();
@@ -206,7 +212,7 @@
     }
   });
 
-  let album = $derived(data.album);
+  let album = $state(data.album);
   let albumId = $derived(album.id);
 
   const containsEditors = $derived(album?.shared && album.albumUsers.some(({ role }) => role === AlbumUserRole.Editor));
@@ -330,6 +336,7 @@
   onSharedLinkDelete={refreshAlbum}
   {onAlbumDelete}
   {onAlbumAddAssets}
+  {onAlbumRemoveAssets}
   {onAlbumShare}
   {onAlbumUserUpdate}
   onAlbumUserDelete={refreshAlbum}
@@ -453,7 +460,7 @@
 
     {#if assetMultiSelectManager.selectionActive}
       <AssetSelectControlBar>
-        {@const Actions = getAssetBulkActions($t)}
+        {@const Actions = getAssetBulkActions($t, album)}
         <CommandPaletteDefaultProvider name={$t('assets')} actions={Object.values(Actions)} />
         <CreateSharedLink />
         <SelectAllAssets {timelineManager} assetInteraction={assetMultiSelectManager} />
@@ -489,9 +496,7 @@
             <TagAction menuItem />
           {/if}
 
-          {#if isOwned || assetMultiSelectManager.isAllUserOwned}
-            <RemoveFromAlbum menuItem bind:album onRemove={handleRemoveAssets} />
-          {/if}
+          <ActionMenuItem action={Actions.RemoveFromAlbum} />
           {#if assetMultiSelectManager.isAllUserOwned}
             <DeleteAssets menuItem onAssetDelete={handleRemoveAssets} onUndoDelete={handleUndoRemoveAssets} />
           {/if}