properly reload settings

Sometimes the current asset won't update when deleted, or it won't
refresh until an event (like showing details) happens.

.github/workflows/check-openapi.yml

@@ -24,7 +24,7 @@ jobs:
           persist-credentials: false
 
       - name: Check for breaking API changes
-        uses: oasdiff/oasdiff-action/breaking@65fef71494258f00f911d7a71edb0482c5378899 # v0.0.30
+        uses: oasdiff/oasdiff-action/breaking@748daafaf3aac877a36307f842a48d55db938ac8 # v0.0.31
         with:
           base: https://raw.githubusercontent.com/${{ github.repository }}/main/open-api/immich-openapi-specs.json
           revision: open-api/immich-openapi-specs.json

.github/workflows/cli.yml

@@ -42,10 +42,10 @@ jobs:
           token: ${{ steps.token.outputs.token }}
 
       - name: Setup pnpm
-        uses: pnpm/action-setup@41ff72655975bd51cab0327fa583b6e92b6d3061 # v4.2.0
+        uses: pnpm/action-setup@b906affcce14559ad1aafd4ab0e942779e9f58b1 # v4.3.0
 
       - name: Setup Node
-        uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
+        uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f # v6.3.0
         with:
           node-version-file: './cli/.nvmrc'
           registry-url: 'https://registry.npmjs.org'

.github/workflows/codeql-analysis.yml

@@ -57,7 +57,7 @@ jobs:
 
       # Initializes the CodeQL tools for scanning.
       - name: Initialize CodeQL
-        uses: github/codeql-action/init@89a39a4e59826350b863aa6b6252a07ad50cf83e # v4.32.4
+        uses: github/codeql-action/init@0d579ffd059c29b07949a3cce3983f0780820c98 # v4.32.6
         with:
           languages: ${{ matrix.language }}
           # If you wish to specify custom queries, you can do so here or in a config file.
@@ -70,7 +70,7 @@ jobs:
       # Autobuild attempts to build any compiled languages  (C/C++, C#, or Java).
       # If this step fails, then you should remove it and run the build manually (see below)
       - name: Autobuild
-        uses: github/codeql-action/autobuild@89a39a4e59826350b863aa6b6252a07ad50cf83e # v4.32.4
+        uses: github/codeql-action/autobuild@0d579ffd059c29b07949a3cce3983f0780820c98 # v4.32.6
 
       # ℹ️ Command-line programs to run using the OS shell.
       # 📚 See https://docs.github.com/en/actions/using-workflows/workflow-syntax-for-github-actions#jobsjob_idstepsrun
@@ -83,6 +83,6 @@ jobs:
       #   ./location_of_script_within_repo/buildscript.sh
 
       - name: Perform CodeQL Analysis
-        uses: github/codeql-action/analyze@89a39a4e59826350b863aa6b6252a07ad50cf83e # v4.32.4
+        uses: github/codeql-action/analyze@0d579ffd059c29b07949a3cce3983f0780820c98 # v4.32.6
         with:
           category: '/language:${{matrix.language}}'

.github/workflows/docs-build.yml

@@ -67,10 +67,10 @@ jobs:
           fetch-depth: 0
 
       - name: Setup pnpm
-        uses: pnpm/action-setup@41ff72655975bd51cab0327fa583b6e92b6d3061 # v4.2.0
+        uses: pnpm/action-setup@b906affcce14559ad1aafd4ab0e942779e9f58b1 # v4.3.0
 
       - name: Setup Node
-        uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
+        uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f # v6.3.0
         with:
           node-version-file: './docs/.nvmrc'
           cache: 'pnpm'

.github/workflows/fix-format.yml

@@ -29,10 +29,10 @@ jobs:
           persist-credentials: true
 
       - name: Setup pnpm
-        uses: pnpm/action-setup@41ff72655975bd51cab0327fa583b6e92b6d3061 # v4.2.0
+        uses: pnpm/action-setup@b906affcce14559ad1aafd4ab0e942779e9f58b1 # v4.3.0
 
       - name: Setup Node
-        uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
+        uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f # v6.3.0
         with:
           node-version-file: './server/.nvmrc'
           cache: 'pnpm'

.github/workflows/prepare-release.yml

@@ -63,13 +63,13 @@ jobs:
           ref: main
 
       - name: Install uv
-        uses: astral-sh/setup-uv@eac588ad8def6316056a12d4907a9d4d84ff7a3b # v7.3.0
+        uses: astral-sh/setup-uv@6ee6290f1cbc4156c0bdd66691b2c144ef8df19a # v7.4.0
 
       - name: Setup pnpm
-        uses: pnpm/action-setup@41ff72655975bd51cab0327fa583b6e92b6d3061 # v4.2.0
+        uses: pnpm/action-setup@b906affcce14559ad1aafd4ab0e942779e9f58b1 # v4.3.0
 
       - name: Setup Node
-        uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
+        uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f # v6.3.0
         with:
           node-version-file: './server/.nvmrc'
           cache: 'pnpm'

.github/workflows/sdk.yml

@@ -30,10 +30,10 @@ jobs:
           token: ${{ steps.token.outputs.token }}
 
       - name: Setup pnpm
-        uses: pnpm/action-setup@41ff72655975bd51cab0327fa583b6e92b6d3061 # v4.2.0
+        uses: pnpm/action-setup@b906affcce14559ad1aafd4ab0e942779e9f58b1 # v4.3.0
 
       # Setup .npmrc file to publish to npm
-      - uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
+      - uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f # v6.3.0
         with:
           node-version-file: './open-api/typescript-sdk/.nvmrc'
           registry-url: 'https://registry.npmjs.org'

.github/workflows/test.yml

@@ -75,9 +75,9 @@ jobs:
           token: ${{ steps.token.outputs.token }}
 
       - name: Setup pnpm
-        uses: pnpm/action-setup@41ff72655975bd51cab0327fa583b6e92b6d3061 # v4.2.0
+        uses: pnpm/action-setup@b906affcce14559ad1aafd4ab0e942779e9f58b1 # v4.3.0
       - name: Setup Node
-        uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
+        uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f # v6.3.0
         with:
           node-version-file: './server/.nvmrc'
           cache: 'pnpm'
@@ -119,9 +119,9 @@ jobs:
           persist-credentials: false
           token: ${{ steps.token.outputs.token }}
       - name: Setup pnpm
-        uses: pnpm/action-setup@41ff72655975bd51cab0327fa583b6e92b6d3061 # v4.2.0
+        uses: pnpm/action-setup@b906affcce14559ad1aafd4ab0e942779e9f58b1 # v4.3.0
       - name: Setup Node
-        uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
+        uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f # v6.3.0
         with:
           node-version-file: './cli/.nvmrc'
           cache: 'pnpm'
@@ -166,9 +166,9 @@ jobs:
           persist-credentials: false
           token: ${{ steps.token.outputs.token }}
       - name: Setup pnpm
-        uses: pnpm/action-setup@41ff72655975bd51cab0327fa583b6e92b6d3061 # v4.2.0
+        uses: pnpm/action-setup@b906affcce14559ad1aafd4ab0e942779e9f58b1 # v4.3.0
       - name: Setup Node
-        uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
+        uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f # v6.3.0
         with:
           node-version-file: './cli/.nvmrc'
           cache: 'pnpm'
@@ -208,9 +208,9 @@ jobs:
           persist-credentials: false
           token: ${{ steps.token.outputs.token }}
       - name: Setup pnpm
-        uses: pnpm/action-setup@41ff72655975bd51cab0327fa583b6e92b6d3061 # v4.2.0
+        uses: pnpm/action-setup@b906affcce14559ad1aafd4ab0e942779e9f58b1 # v4.3.0
       - name: Setup Node
-        uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
+        uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f # v6.3.0
         with:
           node-version-file: './web/.nvmrc'
           cache: 'pnpm'
@@ -252,9 +252,9 @@ jobs:
           persist-credentials: false
           token: ${{ steps.token.outputs.token }}
       - name: Setup pnpm
-        uses: pnpm/action-setup@41ff72655975bd51cab0327fa583b6e92b6d3061 # v4.2.0
+        uses: pnpm/action-setup@b906affcce14559ad1aafd4ab0e942779e9f58b1 # v4.3.0
       - name: Setup Node
-        uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
+        uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f # v6.3.0
         with:
           node-version-file: './web/.nvmrc'
           cache: 'pnpm'
@@ -290,9 +290,9 @@ jobs:
           persist-credentials: false
           token: ${{ steps.token.outputs.token }}
       - name: Setup pnpm
-        uses: pnpm/action-setup@41ff72655975bd51cab0327fa583b6e92b6d3061 # v4.2.0
+        uses: pnpm/action-setup@b906affcce14559ad1aafd4ab0e942779e9f58b1 # v4.3.0
       - name: Setup Node
-        uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
+        uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f # v6.3.0
         with:
           node-version-file: './web/.nvmrc'
           cache: 'pnpm'
@@ -338,9 +338,9 @@ jobs:
           persist-credentials: false
           token: ${{ steps.token.outputs.token }}
       - name: Setup pnpm
-        uses: pnpm/action-setup@41ff72655975bd51cab0327fa583b6e92b6d3061 # v4.2.0
+        uses: pnpm/action-setup@b906affcce14559ad1aafd4ab0e942779e9f58b1 # v4.3.0
       - name: Setup Node
-        uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
+        uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f # v6.3.0
         with:
           node-version-file: './e2e/.nvmrc'
           cache: 'pnpm'
@@ -385,9 +385,9 @@ jobs:
           submodules: 'recursive'
           token: ${{ steps.token.outputs.token }}
       - name: Setup pnpm
-        uses: pnpm/action-setup@41ff72655975bd51cab0327fa583b6e92b6d3061 # v4.2.0
+        uses: pnpm/action-setup@b906affcce14559ad1aafd4ab0e942779e9f58b1 # v4.3.0
       - name: Setup Node
-        uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
+        uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f # v6.3.0
         with:
           node-version-file: './server/.nvmrc'
           cache: 'pnpm'
@@ -424,9 +424,9 @@ jobs:
           submodules: 'recursive'
           token: ${{ steps.token.outputs.token }}
       - name: Setup pnpm
-        uses: pnpm/action-setup@41ff72655975bd51cab0327fa583b6e92b6d3061 # v4.2.0
+        uses: pnpm/action-setup@b906affcce14559ad1aafd4ab0e942779e9f58b1 # v4.3.0
       - name: Setup Node
-        uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
+        uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f # v6.3.0
         with:
           node-version-file: './e2e/.nvmrc'
           cache: 'pnpm'
@@ -496,9 +496,9 @@ jobs:
           submodules: 'recursive'
           token: ${{ steps.token.outputs.token }}
       - name: Setup pnpm
-        uses: pnpm/action-setup@41ff72655975bd51cab0327fa583b6e92b6d3061 # v4.2.0
+        uses: pnpm/action-setup@b906affcce14559ad1aafd4ab0e942779e9f58b1 # v4.3.0
       - name: Setup Node
-        uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
+        uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f # v6.3.0
         with:
           node-version-file: './e2e/.nvmrc'
           cache: 'pnpm'
@@ -620,7 +620,7 @@ jobs:
           persist-credentials: false
           token: ${{ steps.token.outputs.token }}
       - name: Install uv
-        uses: astral-sh/setup-uv@eac588ad8def6316056a12d4907a9d4d84ff7a3b # v7.3.0
+        uses: astral-sh/setup-uv@6ee6290f1cbc4156c0bdd66691b2c144ef8df19a # v7.4.0
         with:
           python-version: 3.11
       - name: Install dependencies
@@ -661,9 +661,9 @@ jobs:
           persist-credentials: false
           token: ${{ steps.token.outputs.token }}
       - name: Setup pnpm
-        uses: pnpm/action-setup@41ff72655975bd51cab0327fa583b6e92b6d3061 # v4.2.0
+        uses: pnpm/action-setup@b906affcce14559ad1aafd4ab0e942779e9f58b1 # v4.3.0
       - name: Setup Node
-        uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
+        uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f # v6.3.0
         with:
           node-version-file: './.github/.nvmrc'
           cache: 'pnpm'
@@ -712,9 +712,9 @@ jobs:
           persist-credentials: false
           token: ${{ steps.token.outputs.token }}
       - name: Setup pnpm
-        uses: pnpm/action-setup@41ff72655975bd51cab0327fa583b6e92b6d3061 # v4.2.0
+        uses: pnpm/action-setup@b906affcce14559ad1aafd4ab0e942779e9f58b1 # v4.3.0
       - name: Setup Node
-        uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
+        uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f # v6.3.0
         with:
           node-version-file: './server/.nvmrc'
           cache: 'pnpm'
@@ -774,9 +774,9 @@ jobs:
           persist-credentials: false
           token: ${{ steps.token.outputs.token }}
       - name: Setup pnpm
-        uses: pnpm/action-setup@41ff72655975bd51cab0327fa583b6e92b6d3061 # v4.2.0
+        uses: pnpm/action-setup@b906affcce14559ad1aafd4ab0e942779e9f58b1 # v4.3.0
       - name: Setup Node
-        uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
+        uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f # v6.3.0
         with:
           node-version-file: './server/.nvmrc'
           cache: 'pnpm'

i18n/en.json

@@ -1651,6 +1651,7 @@
   "only_favorites": "Only favorites",
   "open": "Open",
   "open_calendar": "Open calendar",
+  "open_in_browser": "Open in browser",
   "open_in_map_view": "Open in map view",
   "open_in_openstreetmap": "Open in OpenStreetMap",
   "open_the_search_filters": "Open the search filters",

mobile/lib/presentation/widgets/action_buttons/archive_action_button.widget.dart

@@ -14,13 +14,13 @@ import 'package:immich_mobile/widgets/common/immich_toast.dart';
 Future<void> performArchiveAction(BuildContext context, WidgetRef ref, {required ActionSource source}) async {
   if (!context.mounted) return;
 
-  final result = await ref.read(actionProvider.notifier).archive(source);
-  ref.read(multiSelectProvider.notifier).reset();
-
   if (source == ActionSource.viewer) {
     EventStream.shared.emit(const ViewerReloadAssetEvent());
   }
 
+  final result = await ref.read(actionProvider.notifier).archive(source);
+  ref.read(multiSelectProvider.notifier).reset();
+
   final successMessage = 'archive_action_prompt'.t(context: context, args: {'count': result.count.toString()});
 
   if (context.mounted) {

mobile/lib/presentation/widgets/action_buttons/delete_action_button.widget.dart

@@ -57,13 +57,13 @@ class DeleteActionButton extends ConsumerWidget {
       if (confirm != true) return;
     }
 
-    final result = await ref.read(actionProvider.notifier).trashRemoteAndDeleteLocal(source);
-    ref.read(multiSelectProvider.notifier).reset();
-
     if (source == ActionSource.viewer) {
       EventStream.shared.emit(const ViewerReloadAssetEvent());
     }
 
+    final result = await ref.read(actionProvider.notifier).trashRemoteAndDeleteLocal(source);
+    ref.read(multiSelectProvider.notifier).reset();
+
     final successMessage = 'delete_action_prompt'.t(context: context, args: {'count': result.count.toString()});
 
     if (context.mounted) {

mobile/lib/presentation/widgets/action_buttons/delete_permanent_action_button.widget.dart

@@ -35,13 +35,13 @@ class DeletePermanentActionButton extends ConsumerWidget {
         false;
     if (!confirm) return;
 
-    final result = await ref.read(actionProvider.notifier).deleteRemoteAndLocal(source);
-    ref.read(multiSelectProvider.notifier).reset();
-
     if (source == ActionSource.viewer) {
       EventStream.shared.emit(const ViewerReloadAssetEvent());
     }
 
+    final result = await ref.read(actionProvider.notifier).deleteRemoteAndLocal(source);
+    ref.read(multiSelectProvider.notifier).reset();
+
     final successMessage = 'delete_permanently_action_prompt'.t(
       context: context,
       args: {'count': result.count.toString()},

mobile/lib/presentation/widgets/action_buttons/move_to_lock_folder_action_button.widget.dart

@@ -14,13 +14,13 @@ import 'package:immich_mobile/widgets/common/immich_toast.dart';
 Future<void> performMoveToLockFolderAction(BuildContext context, WidgetRef ref, {required ActionSource source}) async {
   if (!context.mounted) return;
 
-  final result = await ref.read(actionProvider.notifier).moveToLockFolder(source);
-  ref.read(multiSelectProvider.notifier).reset();
-
   if (source == ActionSource.viewer) {
     EventStream.shared.emit(const ViewerReloadAssetEvent());
   }
 
+  final result = await ref.read(actionProvider.notifier).moveToLockFolder(source);
+  ref.read(multiSelectProvider.notifier).reset();
+
   final successMessage = 'move_to_lock_folder_action_prompt'.t(
     context: context,
     args: {'count': result.count.toString()},

mobile/lib/presentation/widgets/action_buttons/open_in_browser_action_button.widget.dart

@@ -0,0 +1,61 @@
+import 'package:flutter/material.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/domain/models/store.model.dart';
+import 'package:immich_mobile/domain/services/timeline.service.dart';
+import 'package:immich_mobile/entities/store.entity.dart';
+import 'package:immich_mobile/extensions/translate_extensions.dart';
+import 'package:immich_mobile/presentation/widgets/action_buttons/base_action_button.widget.dart';
+import 'package:url_launcher/url_launcher.dart';
+
+class OpenInBrowserActionButton extends ConsumerWidget {
+  final String remoteId;
+  final TimelineOrigin origin;
+  final bool iconOnly;
+  final bool menuItem;
+  final Color? iconColor;
+
+  const OpenInBrowserActionButton({
+    super.key,
+    required this.remoteId,
+    required this.origin,
+    this.iconOnly = false,
+    this.menuItem = false,
+    this.iconColor,
+  });
+
+  void _onTap() async {
+    final serverEndpoint = Store.get(StoreKey.serverEndpoint).replaceFirst('/api', '');
+
+    String originPath = '';
+    switch (origin) {
+      case TimelineOrigin.favorite:
+        originPath = '/favorites';
+        break;
+      case TimelineOrigin.trash:
+        originPath = '/trash';
+        break;
+      case TimelineOrigin.archive:
+        originPath = '/archive';
+        break;
+      default:
+        break;
+    }
+
+    final url = '$serverEndpoint$originPath/photos/$remoteId';
+    if (await canLaunchUrl(Uri.parse(url))) {
+      await launchUrl(Uri.parse(url), mode: LaunchMode.externalApplication);
+    }
+  }
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    return BaseActionButton(
+      label: 'open_in_browser'.t(context: context),
+      iconData: Icons.open_in_browser,
+      iconColor: iconColor,
+      iconOnly: iconOnly,
+      menuItem: menuItem,
+      onPressed: _onTap,
+    );
+  }
+}

mobile/lib/presentation/widgets/action_buttons/remove_from_album_action_button.widget.dart

@@ -29,13 +29,13 @@ class RemoveFromAlbumActionButton extends ConsumerWidget {
       return;
     }
 
-    final result = await ref.read(actionProvider.notifier).removeFromAlbum(source, albumId);
-    ref.read(multiSelectProvider.notifier).reset();
-
     if (source == ActionSource.viewer) {
       EventStream.shared.emit(const ViewerReloadAssetEvent());
     }
 
+    final result = await ref.read(actionProvider.notifier).removeFromAlbum(source, albumId);
+    ref.read(multiSelectProvider.notifier).reset();
+
     final successMessage = 'remove_from_album_action_prompt'.t(
       context: context,
       args: {'count': result.count.toString()},

mobile/lib/presentation/widgets/action_buttons/trash_action_button.widget.dart

@@ -25,13 +25,13 @@ class TrashActionButton extends ConsumerWidget {
       return;
     }
 
-    final result = await ref.read(actionProvider.notifier).trash(source);
-    ref.read(multiSelectProvider.notifier).reset();
-
     if (source == ActionSource.viewer) {
       EventStream.shared.emit(const ViewerReloadAssetEvent());
     }
 
+    final result = await ref.read(actionProvider.notifier).trash(source);
+    ref.read(multiSelectProvider.notifier).reset();
+
     final successMessage = 'trash_action_prompt'.t(context: context, args: {'count': result.count.toString()});
 
     if (context.mounted) {

mobile/lib/presentation/widgets/action_buttons/unarchive_action_button.widget.dart

@@ -16,13 +16,13 @@ import 'package:immich_mobile/domain/utils/event_stream.dart';
 Future<void> performUnArchiveAction(BuildContext context, WidgetRef ref, {required ActionSource source}) async {
   if (!context.mounted) return;
 
-  final result = await ref.read(actionProvider.notifier).unArchive(source);
-  ref.read(multiSelectProvider.notifier).reset();
-
   if (source == ActionSource.viewer) {
     EventStream.shared.emit(const ViewerReloadAssetEvent());
   }
 
+  final result = await ref.read(actionProvider.notifier).unArchive(source);
+  ref.read(multiSelectProvider.notifier).reset();
+
   final successMessage = 'unarchive_action_prompt'.t(context: context, args: {'count': result.count.toString()});
 
   if (context.mounted) {

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

@@ -81,19 +81,17 @@ class _AssetViewerState extends ConsumerState<AssetViewer> {
   late final _preloader = AssetPreloader(timelineService: ref.read(timelineServiceProvider), mounted: () => mounted);
 
   late int _currentPage = widget.initialIndex;
+  late int _totalAssets = ref.read(timelineServiceProvider).totalAssets;
 
   StreamSubscription? _reloadSubscription;
   KeepAliveLink? _stackChildrenKeepAlive;
 
-  bool _assetReloadRequested = false;
-
   void _onTapNavigate(int direction) {
     final page = _pageController.page?.toInt();
     if (page == null) return;
     final target = page + direction;
-    final maxPage = ref.read(timelineServiceProvider).totalAssets - 1;
+    final maxPage = _totalAssets - 1;
     if (target >= 0 && target <= maxPage) {
-      _currentPage = target;
       _pageController.jumpToPage(target);
       _onAssetChanged(target);
     }
@@ -141,7 +139,6 @@ class _AssetViewerState extends ConsumerState<AssetViewer> {
 
     final page = _pageController.page?.round();
     if (page != null && page != _currentPage) {
-      _currentPage = page;
       _onAssetChanged(page);
     }
     return false;
@@ -153,8 +150,9 @@ class _AssetViewerState extends ConsumerState<AssetViewer> {
   }
 
   void _onAssetChanged(int index) async {
-    final timelineService = ref.read(timelineServiceProvider);
-    final asset = await timelineService.getAssetAsync(index);
+    _currentPage = index;
+
+    final asset = await ref.read(timelineServiceProvider).getAssetAsync(index);
     if (asset == null) return;
 
     AssetViewer._setAsset(ref, asset);
@@ -193,11 +191,20 @@ class _AssetViewerState extends ConsumerState<AssetViewer> {
       case TimelineReloadEvent():
         _onTimelineReloadEvent();
       case ViewerReloadAssetEvent():
-        _assetReloadRequested = true;
+        _onViewerReloadEvent();
       default:
     }
   }
 
+  void _onViewerReloadEvent() {
+    if (_totalAssets <= 1) return;
+
+    final index = _pageController.page?.round() ?? 0;
+    final target = index >= _totalAssets - 1 ? index - 1 : index + 1;
+    _pageController.animateToPage(target, duration: Durations.medium1, curve: Curves.easeInOut);
+    _onAssetChanged(target);
+  }
+
   void _onTimelineReloadEvent() {
     final timelineService = ref.read(timelineServiceProvider);
     final totalAssets = timelineService.totalAssets;
@@ -207,43 +214,24 @@ class _AssetViewerState extends ConsumerState<AssetViewer> {
       return;
     }
 
-    var index = _pageController.page?.round() ?? 0;
     final currentAsset = ref.read(assetViewerProvider).currentAsset;
-    if (currentAsset != null) {
-      final newIndex = timelineService.getIndex(currentAsset.heroTag);
-      if (newIndex != null && newIndex != index) {
-        index = newIndex;
-        _currentPage = index;
-        _pageController.jumpToPage(index);
-      }
-    }
+    final assetIndex = currentAsset != null ? timelineService.getIndex(currentAsset.heroTag) : null;
+    final index = (assetIndex ?? _currentPage).clamp(0, totalAssets - 1);
 
-    if (index >= totalAssets) {
-      index = totalAssets - 1;
-      _currentPage = index;
+    if (index != _currentPage) {
       _pageController.jumpToPage(index);
+      _onAssetChanged(index);
+    } else if (currentAsset != null && assetIndex == null) {
+      _onAssetChanged(index);
     }
 
-    if (_assetReloadRequested) {
-      _assetReloadRequested = false;
-      _onAssetReloadEvent(index);
+    if (_totalAssets != totalAssets) {
+      setState(() {
+        _totalAssets = totalAssets;
+      });
     }
   }
 
-  void _onAssetReloadEvent(int index) async {
-    final timelineService = ref.read(timelineServiceProvider);
-
-    final newAsset = await timelineService.getAssetAsync(index);
-    if (newAsset == null) return;
-
-    final currentAsset = ref.read(assetViewerProvider).currentAsset;
-
-    // Do not reload if the asset has not changed
-    if (newAsset.heroTag == currentAsset?.heroTag) return;
-
-    _onAssetChanged(index);
-  }
-
   void _setSystemUIMode(bool controls, bool details) {
     final mode = !controls || (CurrentPlatform.isIOS && details)
         ? SystemUiMode.immersiveSticky
@@ -301,7 +289,7 @@ class _AssetViewerState extends ConsumerState<AssetViewer> {
                     : CurrentPlatform.isIOS
                     ? const FastScrollPhysics()
                     : const FastClampingScrollPhysics(),
-                itemCount: ref.read(timelineServiceProvider).totalAssets,
+                itemCount: _totalAssets,
                 itemBuilder: (context, index) =>
                     AssetPage(index: index, heroOffset: _heroOffset, onTapNavigate: _onTapNavigate),
               ),

mobile/lib/utils/action_button.utils.dart

@@ -18,6 +18,7 @@ import 'package:immich_mobile/presentation/widgets/action_buttons/delete_permane
 import 'package:immich_mobile/presentation/widgets/action_buttons/download_action_button.widget.dart';
 import 'package:immich_mobile/presentation/widgets/action_buttons/like_activity_action_button.widget.dart';
 import 'package:immich_mobile/presentation/widgets/action_buttons/move_to_lock_folder_action_button.widget.dart';
+import 'package:immich_mobile/presentation/widgets/action_buttons/open_in_browser_action_button.widget.dart';
 import 'package:immich_mobile/presentation/widgets/action_buttons/remove_from_album_action_button.widget.dart';
 import 'package:immich_mobile/presentation/widgets/action_buttons/remove_from_lock_folder_action_button.widget.dart';
 import 'package:immich_mobile/presentation/widgets/action_buttons/set_album_cover.widget.dart';
@@ -75,6 +76,7 @@ enum ActionButtonType {
   viewInTimeline,
   download,
   upload,
+  openInBrowser,
   unstack,
   archive,
   unarchive,
@@ -149,6 +151,7 @@ enum ActionButtonType {
         context.isOwner && //
             !context.isInLockedView && //
             context.isStacked,
+      ActionButtonType.openInBrowser => context.asset.hasRemote && !context.isInLockedView,
       ActionButtonType.likeActivity =>
         !context.isInLockedView &&
             context.currentAlbum != null &&
@@ -236,6 +239,13 @@ enum ActionButtonType {
       ),
       ActionButtonType.likeActivity => LikeActivityActionButton(iconOnly: iconOnly, menuItem: menuItem),
       ActionButtonType.unstack => UnStackActionButton(source: context.source, iconOnly: iconOnly, menuItem: menuItem),
+      ActionButtonType.openInBrowser => OpenInBrowserActionButton(
+        remoteId: context.asset.remoteId!,
+        origin: context.timelineOrigin,
+        iconOnly: iconOnly,
+        menuItem: menuItem,
+        iconColor: context.originalTheme?.iconTheme.color,
+      ),
       ActionButtonType.similarPhotos => SimilarPhotosActionButton(
         assetId: (context.asset as RemoteAsset).id,
         iconOnly: iconOnly,

server/src/maintenance/maintenance-worker.controller.ts

@@ -20,7 +20,7 @@ import {
   MaintenanceStatusResponseDto,
   SetMaintenanceModeDto,
 } from 'src/dtos/maintenance.dto';
-import { ServerConfigDto, ServerVersionResponseDto } from 'src/dtos/server.dto';
+import { ServerConfigDto, ServerPingResponse, ServerVersionResponseDto } from 'src/dtos/server.dto';
 import { ImmichCookie } from 'src/enum';
 import { MaintenanceRoute } from 'src/maintenance/maintenance-auth.guard';
 import { MaintenanceWorkerService } from 'src/maintenance/maintenance-worker.service';
@@ -52,6 +52,11 @@ export class MaintenanceWorkerController {
     return this.service.getSystemConfig();
   }
 
+  @Get('server/ping')
+  pingServer(): ServerPingResponse {
+    return this.service.ping();
+  }
+
   @Get('server/version')
   getServerVersion(): ServerVersionResponseDto {
     return this.service.getVersion();

server/src/maintenance/maintenance-worker.service.ts

@@ -12,7 +12,7 @@ import {
   MaintenanceStatusResponseDto,
   SetMaintenanceModeDto,
 } from 'src/dtos/maintenance.dto';
-import { ServerConfigDto, ServerVersionResponseDto } from 'src/dtos/server.dto';
+import { ServerConfigDto, ServerPingResponse, ServerVersionResponseDto } from 'src/dtos/server.dto';
 import { DatabaseLock, ImmichCookie, MaintenanceAction, SystemMetadataKey } from 'src/enum';
 import { MaintenanceHealthRepository } from 'src/maintenance/maintenance-health.repository';
 import { MaintenanceWebsocketRepository } from 'src/maintenance/maintenance-websocket.repository';
@@ -121,6 +121,10 @@ export class MaintenanceWorkerService {
     return ServerVersionResponseDto.fromSemVer(serverVersion);
   }
 
+  ping(): ServerPingResponse {
+    return { res: 'pong' };
+  }
+
   /**
    * {@link _ApiService.ssr}
    */

server/src/middleware/file-upload.interceptor.ts

@@ -3,13 +3,16 @@ import { PATH_METADATA } from '@nestjs/common/constants';
 import { Reflector } from '@nestjs/core';
 import { transformException } from '@nestjs/platform-express/multer/multer/multer.utils';
 import { NextFunction, RequestHandler } from 'express';
-import multer, { StorageEngine, diskStorage } from 'multer';
+import multer from 'multer';
 import { createHash, randomUUID } from 'node:crypto';
+import { join } from 'node:path';
+import { pipeline } from 'node:stream';
 import { Observable } from 'rxjs';
 import { UploadFieldName } from 'src/dtos/asset-media.dto';
 import { RouteKey } from 'src/enum';
 import { AuthRequest } from 'src/middleware/auth.guard';
 import { LoggingRepository } from 'src/repositories/logging.repository';
+import { StorageRepository } from 'src/repositories/storage.repository';
 import { AssetMediaService } from 'src/services/asset-media.service';
 import { ImmichFile, UploadFile, UploadFiles } from 'src/types';
 import { asUploadRequest, mapToUploadFile } from 'src/utils/asset.util';
@@ -26,8 +29,6 @@ export function getFiles(files: UploadFiles) {
   };
 }
 
-type DiskStorageCallback = (error: Error | null, result: string) => void;
-
 type ImmichMulterFile = Express.Multer.File & { uuid: string };
 
 interface Callback<T> {
@@ -35,34 +36,21 @@ interface Callback<T> {
   (error: null, result: T): void;
 }
 
-const callbackify = <T>(target: (...arguments_: any[]) => T, callback: Callback<T>) => {
-  try {
-    return callback(null, target());
-  } catch (error: Error | any) {
-    return callback(error);
-  }
-};
-
 @Injectable()
 export class FileUploadInterceptor implements NestInterceptor {
   private handlers: {
     userProfile: RequestHandler;
     assetUpload: RequestHandler;
   };
-  private defaultStorage: StorageEngine;
 
   constructor(
     private reflect: Reflector,
     private assetService: AssetMediaService,
+    private storageRepository: StorageRepository,
     private logger: LoggingRepository,
   ) {
     this.logger.setContext(FileUploadInterceptor.name);
 
-    this.defaultStorage = diskStorage({
-      filename: this.filename.bind(this),
-      destination: this.destination.bind(this),
-    });
-
     const instance = multer({
       fileFilter: this.fileFilter.bind(this),
       storage: {
@@ -99,60 +87,60 @@ export class FileUploadInterceptor implements NestInterceptor {
   }
 
   private fileFilter(request: AuthRequest, file: Express.Multer.File, callback: multer.FileFilterCallback) {
-    return callbackify(() => this.assetService.canUploadFile(asUploadRequest(request, file)), callback);
-  }
-
-  private filename(request: AuthRequest, file: Express.Multer.File, callback: DiskStorageCallback) {
-    return callbackify(
-      () => this.assetService.getUploadFilename(asUploadRequest(request, file)),
-      callback as Callback<string>,
-    );
-  }
-
-  private destination(request: AuthRequest, file: Express.Multer.File, callback: DiskStorageCallback) {
-    return callbackify(
-      () => this.assetService.getUploadFolder(asUploadRequest(request, file)),
-      callback as Callback<string>,
-    );
+    try {
+      callback(null, this.assetService.canUploadFile(asUploadRequest(request, file)));
+    } catch (error: Error | any) {
+      callback(error);
+    }
   }
 
   private handleFile(request: AuthRequest, file: Express.Multer.File, callback: Callback<Partial<ImmichFile>>) {
-    (file as ImmichMulterFile).uuid = randomUUID();
-
     request.on('error', (error) => {
       this.logger.warn('Request error while uploading file, cleaning up', error);
       this.assetService.onUploadError(request, file).catch(this.logger.error);
     });
 
-    if (!this.isAssetUploadFile(file)) {
-      this.defaultStorage._handleFile(request, file, callback);
-      return;
-    }
+    try {
+      (file as ImmichMulterFile).uuid = randomUUID();
 
-    const hash = createHash('sha1');
-    file.stream.on('data', (chunk) => hash.update(chunk));
-    this.defaultStorage._handleFile(request, file, (error, info) => {
-      if (error) {
-        hash.destroy();
-        callback(error);
-      } else {
-        callback(null, { ...info, checksum: hash.digest() });
-      }
-    });
+      const uploadRequest = asUploadRequest(request, file);
+
+      const path = join(
+        this.assetService.getUploadFolder(uploadRequest),
+        this.assetService.getUploadFilename(uploadRequest),
+      );
+
+      const writeStream = this.storageRepository.createWriteStream(path);
+      const hash = file.fieldname === UploadFieldName.ASSET_DATA ? createHash('sha1') : null;
+
+      let size = 0;
+
+      file.stream.on('data', (chunk) => {
+        hash?.update(chunk);
+        size += chunk.length;
+      });
+
+      pipeline(file.stream, writeStream, (error) => {
+        if (error) {
+          hash?.destroy();
+          return callback(error);
+        }
+        callback(null, {
+          path,
+          size,
+          checksum: hash?.digest(),
+        });
+      });
+    } catch (error: Error | any) {
+      callback(error);
+    }
   }
 
-  private removeFile(request: AuthRequest, file: Express.Multer.File, callback: (error: Error | null) => void) {
-    this.defaultStorage._removeFile(request, file, callback);
-  }
-
-  private isAssetUploadFile(file: Express.Multer.File) {
-    switch (file.fieldname as UploadFieldName) {
-      case UploadFieldName.ASSET_DATA: {
-        return true;
-      }
-    }
-
-    return false;
+  private removeFile(_request: AuthRequest, file: Express.Multer.File, callback: (error: Error | null) => void) {
+    this.storageRepository
+      .unlink(file.path)
+      .then(() => callback(null))
+      .catch(callback);
   }
 
   private getHandler(route: RouteKey) {

server/src/repositories/storage.repository.ts

@@ -63,7 +63,7 @@ export class StorageRepository {
   }
 
   createWriteStream(filepath: string): Writable {
-    return createWriteStream(filepath, { flags: 'w' });
+    return createWriteStream(filepath, { flags: 'w', flush: true });
   }
 
   createOrOverwriteFile(filepath: string, buffer: Buffer) {

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

@@ -330,7 +330,7 @@ describe(MetadataService.name, () => {
         duration: null,
         fileCreatedAt: asset.fileCreatedAt,
         fileModifiedAt: asset.fileModifiedAt,
-        localDateTime: asset.localDateTime,
+        localDateTime: asset.fileCreatedAt,
         width: null,
         height: null,
       });
@@ -360,7 +360,7 @@ describe(MetadataService.name, () => {
         duration: null,
         fileCreatedAt: asset.fileCreatedAt,
         fileModifiedAt: asset.fileModifiedAt,
-        localDateTime: asset.localDateTime,
+        localDateTime: asset.fileCreatedAt,
         width: null,
         height: null,
       });

server/test/factories/asset.factory.ts

@@ -19,7 +19,7 @@ import {
   UserLike,
 } from 'test/factories/types';
 import { UserFactory } from 'test/factories/user.factory';
-import { newDate, newSha1, newUuid, newUuidV7 } from 'test/small.factory';
+import { newSha1, newUuid, newUuidV7 } from 'test/small.factory';
 
 export class AssetFactory {
   #owner!: UserFactory;
@@ -43,10 +43,12 @@ export class AssetFactory {
 
     const originalFileName = dto.originalFileName ?? (dto.type === AssetType.Video ? `MOV_${id}.mp4` : `IMG_${id}.jpg`);
 
+    let now = Date.now();
+
     return new AssetFactory({
       id,
-      createdAt: newDate(),
-      updatedAt: newDate(),
+      createdAt: new Date(now++),
+      updatedAt: new Date(now++),
       deletedAt: null,
       updateId: newUuidV7(),
       status: AssetStatus.Active,
@@ -55,14 +57,14 @@ export class AssetFactory {
       deviceId: '',
       duplicateId: null,
       duration: null,
-      fileCreatedAt: newDate(),
-      fileModifiedAt: newDate(),
+      fileCreatedAt: new Date(now++),
+      fileModifiedAt: new Date(now++),
       isExternal: false,
       isFavorite: false,
       isOffline: false,
       libraryId: null,
       livePhotoVideoId: null,
-      localDateTime: newDate(),
+      localDateTime: new Date(now),
       originalFileName,
       originalPath: `/data/library/${originalFileName}`,
       ownerId: newUuid(),

web/src/lib/components/QueuePanel.svelte

@@ -112,7 +112,7 @@
 
       switch (dto.command) {
         case QueueCommand.Empty: {
-          toastManager.success($t('admin.cleared_jobs', { values: { job: item.title } }));
+          toastManager.primary($t('admin.cleared_jobs', { values: { job: item.title } }));
           break;
         }
       }

web/src/lib/components/admin-settings/AuthSettings.svelte

@@ -55,7 +55,7 @@
 
     try {
       await unlinkAllOAuthAccountsAdmin();
-      toastManager.success();
+      toastManager.primary();
     } catch (error) {
       handleError(error, $t('errors.something_went_wrong'));
     }

web/src/lib/components/admin-settings/NotificationSettings.svelte

@@ -45,7 +45,7 @@
         },
       });
 
-      toastManager.success($t('admin.notification_email_test_email_sent', { values: { email: $user.email } }));
+      toastManager.primary($t('admin.notification_email_test_email_sent', { values: { email: $user.email } }));
 
       if (!disabled) {
         await handleSystemConfigSave({ notifications: configToEdit.notifications });

web/src/lib/components/album-page/album-card-group.svelte

@@ -65,6 +65,7 @@
       {#each albums as album, index (album.id)}
         <a
           href={Route.viewAlbum(album)}
+          class="h-fit"
           animate:flip={{ duration: 400 }}
           oncontextmenu={(event) => oncontextmenu(event, album)}
         >

web/src/lib/components/album-page/album-title.svelte

@@ -4,6 +4,7 @@
   import { handleError } from '$lib/utils/handle-error';
   import { updateAlbumInfo } from '@immich/sdk';
   import { t } from 'svelte-i18n';
+  import { tv } from 'tailwind-variants';
 
   interface Props {
     id: string;
@@ -36,14 +37,22 @@
       return;
     }
   };
+
+  const styles = tv({
+    base: 'w-[99%] mb-2 border-b-2 border-transparent text-2xl md:text-4xl lg:text-6xl text-primary outline-none transition-all focus:border-b-2 focus:border-immich-primary focus:outline-none bg-light dark:focus:border-immich-dark-primary dark:focus:bg-immich-dark-gray placeholder:text-primary/90',
+    variants: {
+      isOwned: {
+        true: 'hover:border-gray-400',
+        false: 'hover:border-transparent',
+      },
+    },
+  });
 </script>
 
 <input
   use:shortcut={{ shortcut: { key: 'Enter' }, onShortcut: (e) => e.currentTarget.blur() }}
   onblur={handleUpdateName}
-  class="w-[99%] mb-2 border-b-2 border-transparent text-2xl md:text-4xl lg:text-6xl text-primary outline-none transition-all {isOwned
-    ? 'hover:border-gray-400'
-    : 'hover:border-transparent'} focus:border-b-2 focus:border-immich-primary focus:outline-none bg-light dark:focus:border-immich-dark-primary dark:focus:bg-immich-dark-gray placeholder:text-primary/90"
+  class={styles({ isOwned })}
   type="text"
   bind:value={newAlbumName}
   disabled={!isOwned}

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

@@ -40,7 +40,7 @@
         preAction({ type: AssetAction.DELETE, asset: timelineAsset });
         await deleteAssets({ assetBulkDeleteDto: { ids: [asset.id], force: true } });
         onAction({ type: AssetAction.DELETE, asset: timelineAsset });
-        toastManager.success($t('permanently_deleted_asset'));
+        toastManager.primary($t('permanently_deleted_asset'));
       } catch (error) {
         handleError(error, $t('errors.unable_to_delete_asset'));
       }

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

@@ -21,7 +21,7 @@
       await restoreAssets({ bulkIdsDto: { ids: [asset.id] } });
       asset.isTrashed = false;
       onAction({ type: AssetAction.RESTORE, asset: toTimelineAsset(asset) });
-      toastManager.success($t('restored_asset'));
+      toastManager.primary($t('restored_asset'));
     } catch (error) {
       handleError(error, $t('errors.unable_to_restore_assets'));
     }

web/src/lib/components/asset-viewer/actions/set-album-cover-action.svelte

@@ -23,7 +23,7 @@
         },
       });
       eventManager.emit('AlbumUpdate', response);
-      toastManager.success($t('album_cover_updated'));
+      toastManager.primary($t('album_cover_updated'));
     } catch (error) {
       handleError(error, $t('errors.unable_to_update_album_cover'));
     }

web/src/lib/components/asset-viewer/actions/set-person-featured-action.svelte

@@ -31,7 +31,7 @@
         person,
       });
 
-      toastManager.success($t('feature_photo_updated'));
+      toastManager.primary($t('feature_photo_updated'));
     } catch (error) {
       handleError(error, $t('errors.unable_to_set_feature_photo'));
     }

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

@@ -74,7 +74,7 @@
         [ReactionType.Comment]: $t('comment_deleted'),
         [ReactionType.Like]: $t('like_deleted'),
       };
-      toastManager.success(deleteMessages[reaction.type]);
+      toastManager.primary(deleteMessages[reaction.type]);
     } catch (error) {
       handleError(error, $t('errors.unable_to_remove_reaction'));
     }

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

@@ -22,7 +22,7 @@
     }
     try {
       await updateAsset({ id: asset.id, updateAssetDto: { description } });
-      toastManager.success($t('asset_description_updated'));
+      toastManager.primary($t('asset_description_updated'));
     } catch (error) {
       handleError(error, $t('cannot_update_the_description'));
     }

web/src/lib/components/faces-page/manage-people-visibility.svelte

@@ -67,7 +67,7 @@
         if (failCount > 0) {
           toastManager.warning($t('errors.unable_to_change_visibility', { values: { count: failCount } }));
         }
-        toastManager.success($t('visibility_changed', { values: { count: successCount } }));
+        toastManager.primary($t('visibility_changed', { values: { count: successCount } }));
       }
 
       for (const person of people) {

web/src/lib/components/faces-page/merge-face-selector.svelte

@@ -72,7 +72,7 @@
       });
       const mergedPerson = await getPerson({ id: person.id });
       const count = results.filter(({ success }) => success).length;
-      toastManager.success($t('merged_people_count', { values: { count } }));
+      toastManager.primary($t('merged_people_count', { values: { count } }));
       onMerge(mergedPerson);
     } catch (error) {
       handleError(error, $t('cannot_merge_people'));

web/src/lib/components/faces-page/person-side-panel.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import OnEvents from '$lib/components/OnEvents.svelte';
   import { timeBeforeShowLoadingSpinner } from '$lib/constants';
+  import { assetViewerManager } from '$lib/managers/asset-viewer-manager.svelte';
   import { eventManager } from '$lib/managers/event-manager.svelte';
   import { assetViewingStore } from '$lib/stores/asset-viewing.store';
   import { boundingBoxesArray } from '$lib/stores/people.store';
@@ -25,7 +26,6 @@
   import { fly } from 'svelte/transition';
   import ImageThumbnail from '../assets/thumbnail/image-thumbnail.svelte';
   import AssignFaceSidePanel from './assign-face-side-panel.svelte';
-  import { assetViewerManager } from '$lib/managers/asset-viewer-manager.svelte';
 
   interface Props {
     assetId: string;
@@ -126,7 +126,7 @@
           }
         }
 
-        toastManager.success($t('people_edits_count', { values: { count: numberOfChanges } }));
+        toastManager.primary($t('people_edits_count', { values: { count: numberOfChanges } }));
       } catch (error) {
         handleError(error, $t('errors.cant_apply_changes'));
       }

web/src/lib/components/faces-page/unmerge-face-selector.svelte

@@ -71,7 +71,7 @@
       disableButtons = true;
       const data = await createPerson({ personCreateDto: {} });
       await reassignFaces({ id: data.id, assetFaceUpdateDto: { data: selectedPeople } });
-      toastManager.success($t('reassigned_assets_to_new_person', { values: { count: assetIds.length } }));
+      toastManager.primary($t('reassigned_assets_to_new_person', { values: { count: assetIds.length } }));
     } catch (error) {
       handleError(error, $t('errors.unable_to_reassign_assets_new_person'));
     } finally {
@@ -88,7 +88,7 @@
       disableButtons = true;
       if (selectedPerson) {
         await reassignFaces({ id: selectedPerson.id, assetFaceUpdateDto: { data: selectedPeople } });
-        toastManager.success(
+        toastManager.primary(
           $t('reassigned_assets_to_existing_person', {
             values: { count: assetIds.length, name: selectedPerson.name || null },
           }),

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

@@ -63,8 +63,9 @@
   let playerInitialized = $state(false);
   let paused = $state(false);
   let current = $state<MemoryAsset | undefined>(undefined);
-  let currentMemoryAssetFull = $derived.by(async () =>
-    current?.asset ? await getAssetInfo({ ...authManager.params, id: current.asset.id }) : undefined,
+  const currentAssetId = $derived(current?.asset.id);
+  const currentMemoryAssetFull = $derived.by(async () =>
+    currentAssetId ? await getAssetInfo({ ...authManager.params, id: currentAssetId }) : undefined,
   );
   let currentTimelineAssets = $derived(current?.memory.assets ?? []);
   let viewerAssets = $derived([
@@ -205,7 +206,7 @@
     }
 
     await memoryStore.deleteMemory(current.memory.id);
-    toastManager.success($t('removed_memory'));
+    toastManager.primary($t('removed_memory'));
     init(page);
   };
 
@@ -216,7 +217,7 @@
 
     const newSavedState = !current.memory.isSaved;
     await memoryStore.updateMemorySaved(current.memory.id, newSavedState);
-    toastManager.success(newSavedState ? $t('added_to_favorites') : $t('removed_from_favorites'));
+    toastManager.primary(newSavedState ? $t('added_to_favorites') : $t('removed_from_favorites'));
     init(page);
   };
 
@@ -550,14 +551,18 @@
               </div>
 
               <div>
-                <IconButton
-                  href={Route.photos({ at: current.asset.id })}
-                  icon={mdiImageSearch}
-                  aria-label={$t('view_in_timeline')}
-                  color="secondary"
-                  variant="ghost"
-                  shape="round"
-                />
+                {#await currentMemoryAssetFull then asset}
+                  {#if asset}
+                    <IconButton
+                      href={Route.photos({ at: asset.stack?.primaryAssetId ?? asset.id })}
+                      icon={mdiImageSearch}
+                      aria-label={$t('view_in_timeline')}
+                      color="secondary"
+                      variant="ghost"
+                      shape="round"
+                    />
+                  {/if}
+                {/await}
               </div>
             </div>
             <!-- CONTROL BUTTONS -->

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

@@ -52,7 +52,7 @@
         ? openFileUploadDialog()
         : fileUploadHandler({ files }));
 
-      toastManager.success();
+      toastManager.primary();
     } catch (error) {
       handleError(error, $t('errors.unable_to_add_assets_to_shared_link'));
     }

web/src/lib/components/shared-components/search-bar/search-people-section.svelte

@@ -9,6 +9,7 @@
   import { mdiArrowRight, mdiClose } from '@mdi/js';
   import { t } from 'svelte-i18n';
   import type { SvelteSet } from 'svelte/reactivity';
+  import { tv } from 'tailwind-variants';
 
   interface Props {
     selectedPeople: SvelteSet<string>;
@@ -49,6 +50,16 @@
     const nameLower = name.toLowerCase();
     return name ? list.filter((p) => p.name.toLowerCase().includes(nameLower)) : list;
   };
+
+  const styles = tv({
+    base: 'flex flex-col items-center rounded-3xl border-2 hover:bg-subtle dark:hover:bg-immich-dark-primary/20 p-2 transition-all',
+    variants: {
+      selected: {
+        true: 'dark:border-slate-500 border-slate-400 bg-slate-200 dark:bg-slate-800 dark:text-white',
+        false: 'border-transparent',
+      },
+    },
+  });
 </script>
 
 {#await peoplePromise}
@@ -74,11 +85,7 @@
         {#each peopleList as person (person.id)}
           <button
             type="button"
-            class="flex flex-col items-center rounded-3xl border-2 hover:bg-subtle dark:hover:bg-immich-dark-primary/20 p-2 transition-all {selectedPeople.has(
-              person.id,
-            )
-              ? 'dark:border-slate-500 border-slate-400 bg-slate-200 dark:bg-slate-800 dark:text-white'
-              : 'border-transparent'}"
+            class={styles({ selected: selectedPeople.has(person.id) })}
             onclick={() => togglePersonSelection(person.id)}
           >
             <ImageThumbnail circle shadow url={getPeopleThumbnailUrl(person)} altText={person.name} widthStyle="100%" />

web/src/lib/components/shared-components/single-grid-row.svelte

@@ -5,7 +5,7 @@
     children?: import('svelte').Snippet<[{ itemCount: number }]>;
   }
 
-  let { class: className = '', itemCount = $bindable(1), children }: Props = $props();
+  let { class: className, itemCount = $bindable(1), children }: Props = $props();
 
   let container: HTMLElement | undefined = $state();
   let contentRect: DOMRectReadOnly | undefined = $state();

web/src/lib/components/shared-components/upload-panel.svelte

@@ -30,7 +30,7 @@
       if ($stats.errors > 0) {
         toastManager.danger($t('upload_errors', { values: { count: $stats.errors } }));
       } else if ($stats.success > 0) {
-        toastManager.success($t('upload_success'));
+        toastManager.primary($t('upload_success'));
       }
       if ($stats.duplicates > 0) {
         toastManager.warning($t('upload_skipped_duplicates', { values: { count: $stats.duplicates } }));

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

@@ -42,7 +42,7 @@
 
       onFavorite?.(ids, isFavorite);
 
-      toastManager.success(
+      toastManager.primary(
         isFavorite
           ? $t('added_to_favorites_count', { values: { count: ids.length } })
           : $t('removed_from_favorites_count', { values: { count: ids.length } }),

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

@@ -38,7 +38,7 @@
       onRemove?.(ids);
 
       const count = results.filter(({ success }) => success).length;
-      toastManager.success($t('assets_removed_count', { values: { count } }));
+      toastManager.primary($t('assets_removed_count', { values: { count } }));
 
       clearSelect();
     } catch (error) {

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

@@ -24,7 +24,7 @@
       const ids = [...getAssets()].map((a) => a.id);
       await restoreAssets({ bulkIdsDto: { ids } });
       onRestore?.(ids);
-      toastManager.success($t('assets_restored_count', { values: { count: ids.length } }));
+      toastManager.primary($t('assets_restored_count', { values: { count: ids.length } }));
       clearSelect();
     } catch (error) {
       handleError(error, $t('errors.unable_to_restore_assets'));

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

@@ -22,7 +22,7 @@
     try {
       await changePinCode({ pinCodeChangeDto: { pinCode: currentPinCode, newPinCode } });
       resetForm();
-      toastManager.success($t('pin_code_changed_successfully'));
+      toastManager.primary($t('pin_code_changed_successfully'));
     } catch (error) {
       handleError(error, $t('unable_to_change_pin_code'));
     } finally {

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

@@ -26,7 +26,7 @@
     isLoading = true;
     try {
       await setupPinCode({ pinCodeSetupDto: { pinCode: newPinCode } });
-      toastManager.success($t('pin_code_setup_successfully'));
+      toastManager.primary($t('pin_code_setup_successfully'));
       onCreated?.(newPinCode);
       resetForm();
     } catch (error) {

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

@@ -49,25 +49,22 @@
 
   const handleInput = (event: Event, index: number) => {
     const target = event.target as HTMLInputElement;
-    let currentPinValue = target.value;
+    const digits = target.value.replaceAll(/\D/g, '').slice(0, pinLength - index);
 
-    if (target.value.length > 1) {
-      currentPinValue = value.slice(0, 1);
-    }
-
-    if (Number.isNaN(Number(value))) {
+    if (digits.length === 0) {
       pinValues[index] = '';
-      target.value = '';
+      value = pinValues.join('').trim();
       return;
     }
 
-    pinValues[index] = currentPinValue;
+    for (let i = 0; i < digits.length; i++) {
+      pinValues[index + i] = digits[i];
+    }
 
     value = pinValues.join('').trim();
 
-    if (value && index < pinLength - 1) {
-      focusNext(index);
-    }
+    const lastFilledIndex = Math.min(index + digits.length, pinLength - 1);
+    pinCodeInputElements[lastFilledIndex]?.focus();
 
     if (value.length === pinLength) {
       onFilled?.(value);
@@ -104,12 +101,6 @@
         }
         return;
       }
-      default: {
-        if (Number.isNaN(Number(event.key))) {
-          event.preventDefault();
-        }
-        break;
-      }
     }
   }
 </script>
@@ -125,7 +116,6 @@
         {type}
         inputmode="numeric"
         pattern="[0-9]*"
-        maxlength="1"
         bind:this={pinCodeInputElements[index]}
         id="pin-code-{index}"
         class="h-12 w-10 rounded-xl border-2 border-suble dark:border-gray-700 text-center text-lg font-medium focus:border-immich-primary focus:ring-primary dark:focus:border-primary font-mono bg-white dark:bg-light"

web/src/lib/components/user-settings-page/device-list.svelte

@@ -25,7 +25,7 @@
 
     try {
       await deleteSession({ id: device.id });
-      toastManager.success($t('logged_out_device'));
+      toastManager.primary($t('logged_out_device'));
     } catch (error) {
       handleError(error, $t('errors.unable_to_log_out_device'));
     } finally {
@@ -41,7 +41,7 @@
 
     try {
       await deleteAllSessions();
-      toastManager.success($t('logged_out_all_devices'));
+      toastManager.primary($t('logged_out_all_devices'));
     } catch (error) {
       handleError(error, $t('errors.unable_to_log_out_all_devices'));
     } finally {

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

@@ -25,7 +25,7 @@
       });
       $preferences = newPreferences;
 
-      toastManager.success($t('saved_settings'));
+      toastManager.primary($t('saved_settings'));
     } catch (error) {
       handleError(error, $t('errors.unable_to_update_settings'));
     }

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

@@ -53,7 +53,7 @@
 
       $preferences = { ...data };
 
-      toastManager.success($t('saved_settings'));
+      toastManager.primary($t('saved_settings'));
     } catch (error) {
       handleError(error, $t('errors.unable_to_update_settings'));
     }

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

@@ -26,7 +26,7 @@
       $preferences.emailNotifications.albumInvite = data.emailNotifications.albumInvite;
       $preferences.emailNotifications.albumUpdate = data.emailNotifications.albumUpdate;
 
-      toastManager.success($t('saved_settings'));
+      toastManager.primary($t('saved_settings'));
     } catch (error) {
       handleError(error, $t('errors.unable_to_update_settings'));
     }

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

@@ -22,7 +22,7 @@
       try {
         loading = true;
         user = await oauth.link(globalThis.location);
-        toastManager.success($t('linked_oauth_account'));
+        toastManager.primary($t('linked_oauth_account'));
       } catch (error) {
         handleError(error, $t('errors.unable_to_link_oauth_account'));
       } finally {
@@ -36,7 +36,7 @@
   const handleUnlink = async () => {
     try {
       user = await oauth.unlink();
-      toastManager.success($t('unlinked_oauth_account'));
+      toastManager.primary($t('unlinked_oauth_account'));
     } catch (error) {
       handleError(error, $t('errors.unable_to_unlink_account'));
     }

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

@@ -23,7 +23,7 @@
       Object.assign(editedUser, data);
       $user = data;
 
-      toastManager.success($t('saved_profile'));
+      toastManager.primary($t('saved_profile'));
     } catch (error) {
       handleError(error, $t('errors.unable_to_save_profile'));
     }

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

@@ -10,7 +10,7 @@
   import { featureFlagsManager } from '$lib/managers/feature-flags-manager.svelte';
   import { user } from '$lib/stores/user.store';
   import { oauth } from '$lib/utils';
-  import { type ApiKeyResponseDto, type SessionResponseDto } from '@immich/sdk';
+  import { getApiKeys, type ApiKeyResponseDto, type SessionResponseDto } from '@immich/sdk';
   import {
     mdiAccountGroupOutline,
     mdiAccountOutline,
@@ -26,6 +26,7 @@
     mdiServerOutline,
     mdiTwoFactorAuthentication,
   } from '@mdi/js';
+  import { onMount } from 'svelte';
   import { t } from 'svelte-i18n';
   import SettingAccordionState from '../shared-components/settings/setting-accordion-state.svelte';
   import SettingAccordion from '../shared-components/settings/setting-accordion.svelte';
@@ -38,11 +39,16 @@
   import UserProfileSettings from './user-profile-settings.svelte';
 
   interface Props {
-    keys?: ApiKeyResponseDto[];
     sessions?: SessionResponseDto[];
   }
 
-  let { keys = $bindable([]), sessions = $bindable([]) }: Props = $props();
+  let { sessions = $bindable([]) }: Props = $props();
+
+  let keys: ApiKeyResponseDto[] = $state([]);
+
+  onMount(async () => {
+    keys = await getApiKeys();
+  });
 
   let oauthOpen =
     oauth.isCallback(globalThis.location) ||

web/src/lib/constants.ts

@@ -62,6 +62,7 @@ export enum SessionStorageKey {
 
 // TODO split into user settings vs system settings
 export enum OpenQueryParam {
+  API_KEYS = 'api-keys',
   OAUTH = 'oauth',
   JOB = 'job',
   STORAGE_TEMPLATE = 'storage-template',

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

@@ -142,7 +142,7 @@ export class EditManager {
 
       eventManager.emit('AssetEditsApplied', assetId);
 
-      toastManager.success(t('editor_edits_applied_success'));
+      toastManager.primary(t('editor_edits_applied_success'));
       this.hasAppliedEdits = true;
 
       return true;

web/src/lib/modals/AvatarEditModal.svelte

@@ -20,7 +20,7 @@
         await deleteProfileImage();
       }
 
-      toastManager.success($t('saved_profile'));
+      toastManager.primary($t('saved_profile'));
 
       $user = await updateMyUser({ userUpdateMeDto: { avatarColor: color } });
       onClose();

web/src/lib/modals/PersonMergeSuggestionModal.svelte

@@ -38,7 +38,7 @@
         id: personToBeMergedInto.id,
         mergePersonDto: { ids: [personToMerge.id] },
       });
-      toastManager.success($t('merge_people_successfully'));
+      toastManager.primary($t('merge_people_successfully'));
       onClose([personToMerge, personToBeMergedInto]);
     } catch (error) {
       handleError(error, $t('errors.unable_to_save_name'));

web/src/lib/modals/ProfileImageCropperModal.svelte

@@ -69,7 +69,7 @@
       }
       const file = new File([blob], 'profile-picture.png', { type: 'image/png' });
       const { profileImagePath, profileChangedAt } = await createProfileImage({ createProfileImageDto: { file } });
-      toastManager.success($t('profile_picture_set'));
+      toastManager.primary($t('profile_picture_set'));
       $user.profileImagePath = profileImagePath;
       $user.profileChangedAt = profileChangedAt;
 

web/src/lib/route.ts

@@ -116,6 +116,7 @@ export const Route = {
 
   // settings
   userSettings: (params?: { isOpen?: OpenQueryParam }) => '/user-settings' + asQueryString(params),
+  newApiKey: (params?: { permissions?: string }) => '/user-settings/new-api-key' + asQueryString(params),
 
   // system
   systemSettings: (params?: { isOpen?: OpenQueryParam }) => '/admin/system-settings' + asQueryString(params),

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

@@ -163,7 +163,7 @@ const notifyAddToAlbums = (
   } else if (results.error) {
     toastManager.warning($t('assets_cannot_be_added_to_albums', { values: { count: assetIds.length } }));
   } else {
-    toastManager.success(
+    toastManager.primary(
       $t('assets_added_to_albums_count', {
         values: { albumTotal: albumIds.length, assetTotal: assetIds.length },
       }),
@@ -269,7 +269,7 @@ export const handleDeleteAlbum = async (album: AlbumResponseDto, options?: { pro
     await deleteAlbum({ id: album.id });
     eventManager.emit('AlbumDelete', album);
     if (notify) {
-      toastManager.success();
+      toastManager.primary();
     }
     return true;
   } catch (error) {

web/src/lib/services/api-key.service.ts

@@ -1,6 +1,7 @@
+import { goto } from '$app/navigation';
 import { eventManager } from '$lib/managers/event-manager.svelte';
-import ApiKeyCreateModal from '$lib/modals/ApiKeyCreateModal.svelte';
 import ApiKeyUpdateModal from '$lib/modals/ApiKeyUpdateModal.svelte';
+import { Route } from '$lib/route';
 import { handleError } from '$lib/utils/handle-error';
 import { getFormatter } from '$lib/utils/i18n';
 import {
@@ -19,7 +20,7 @@ export const getApiKeysActions = ($t: MessageFormatter) => {
   const Create: ActionItem = {
     title: $t('new_api_key'),
     icon: mdiPlus,
-    onAction: () => modalManager.show(ApiKeyCreateModal, {}),
+    onAction: () => goto(Route.newApiKey()),
   };
 
   return { Create };
@@ -80,7 +81,7 @@ export const handleUpdateApiKey = async (apiKey: { id: string }, dto: ApiKeyUpda
   try {
     const response = await updateApiKey({ id: apiKey.id, apiKeyUpdateDto: dto });
     eventManager.emit('ApiKeyUpdate', response);
-    toastManager.success($t('saved_api_key'));
+    toastManager.primary($t('saved_api_key'));
     return true;
   } catch (error) {
     handleError(error, $t('errors.unable_to_save_api_key'));
@@ -98,7 +99,7 @@ export const handleDeleteApiKey = async (apiKey: ApiKeyResponseDto) => {
   try {
     await deleteApiKey({ id: apiKey.id });
     eventManager.emit('ApiKeyDelete', apiKey);
-    toastManager.success($t('removed_api_key', { values: { name: apiKey.name } }));
+    toastManager.primary($t('removed_api_key', { values: { name: apiKey.name } }));
   } catch (error) {
     handleError(error, $t('errors.unable_to_remove_api_key'));
   }

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

@@ -11,7 +11,7 @@ import { vitest } from 'vitest';
 
 vitest.mock('@immich/ui', () => ({
   toastManager: {
-    success: vitest.fn(),
+    primary: vitest.fn(),
   },
 }));
 
@@ -67,7 +67,7 @@ describe('AssetService', () => {
       const asset = assetFactory.build({ originalFileName: 'asset.heic' });
       await handleDownloadAsset(asset, { edited: false });
       expect($t).toHaveBeenNthCalledWith(1, 'downloading_asset_filename', { values: { filename: 'asset.heic' } });
-      expect(toastManager.success).toHaveBeenCalledWith('formatter');
+      expect(toastManager.primary).toHaveBeenCalledWith('formatter');
     });
 
     it('should use the motion asset originalFileName when showing toasts', async () => {
@@ -79,7 +79,7 @@ describe('AssetService', () => {
       await handleDownloadAsset(asset, { edited: false });
       expect($t).toHaveBeenNthCalledWith(1, 'downloading_asset_filename', { values: { filename: 'asset.heic' } });
       expect($t).toHaveBeenNthCalledWith(2, 'downloading_asset_filename', { values: { filename: 'asset.mov' } });
-      expect(toastManager.success).toHaveBeenCalledWith('formatter');
+      expect(toastManager.primary).toHaveBeenCalledWith('formatter');
     });
   });
 });

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

@@ -334,7 +334,7 @@ export const handleDownloadAsset = async (asset: AssetResponseDto, { edited }: {
     }
 
     try {
-      toastManager.success($t('downloading_asset_filename', { values: { filename } }));
+      toastManager.primary($t('downloading_asset_filename', { values: { filename } }));
       downloadUrl(
         getBaseUrl() +
           `/assets/${id}/original` +
@@ -352,7 +352,7 @@ const handleFavorite = async (asset: AssetResponseDto) => {
 
   try {
     const response = await updateAsset({ id: asset.id, updateAssetDto: { isFavorite: true } });
-    toastManager.success($t('added_to_favorites'));
+    toastManager.primary($t('added_to_favorites'));
     eventManager.emit('AssetUpdate', response);
   } catch (error) {
     handleError(error, $t('errors.unable_to_add_remove_favorites', { values: { favorite: asset.isFavorite } }));
@@ -364,7 +364,7 @@ const handleUnfavorite = async (asset: AssetResponseDto) => {
 
   try {
     const response = await updateAsset({ id: asset.id, updateAssetDto: { isFavorite: false } });
-    toastManager.success($t('removed_from_favorites'));
+    toastManager.primary($t('removed_from_favorites'));
     eventManager.emit('AssetUpdate', response);
   } catch (error) {
     handleError(error, $t('errors.unable_to_add_remove_favorites', { values: { favorite: asset.isFavorite } }));
@@ -387,7 +387,7 @@ const handleRunAssetJob = async (dto: AssetJobsDto) => {
 
   try {
     await runAssetJobs({ assetJobsDto: dto });
-    toastManager.success(getAssetJobMessage($t, dto.name));
+    toastManager.primary(getAssetJobMessage($t, dto.name));
   } catch (error) {
     handleError(error, $t('errors.unable_to_submit_job'));
   }

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

@@ -8,7 +8,7 @@ export const handleCreateJob = async (dto: JobCreateDto) => {
 
   try {
     await createJob({ jobCreateDto: dto });
-    toastManager.success($t('admin.job_created'));
+    toastManager.primary($t('admin.job_created'));
     return true;
   } catch (error) {
     handleError(error, $t('errors.unable_to_submit_job'));

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

@@ -161,7 +161,7 @@ export const handleCreateLibrary = async (dto: CreateLibraryDto) => {
   try {
     const library = await createLibrary({ createLibraryDto: dto });
     eventManager.emit('LibraryCreate', library);
-    toastManager.success($t('admin.library_created', { values: { library: library.name } }));
+    toastManager.primary($t('admin.library_created', { values: { library: library.name } }));
     return library;
   } catch (error) {
     handleError(error, $t('errors.unable_to_create_library'));
@@ -174,7 +174,7 @@ export const handleUpdateLibrary = async (library: LibraryResponseDto, dto: Upda
   try {
     const updatedLibrary = await updateLibrary({ id: library.id, updateLibraryDto: dto });
     eventManager.emit('LibraryUpdate', updatedLibrary);
-    toastManager.success($t('admin.library_updated'));
+    toastManager.primary($t('admin.library_updated'));
     return true;
   } catch (error) {
     handleError(error, $t('errors.unable_to_update_library'));
@@ -205,7 +205,7 @@ const handleDeleteLibrary = async (library: LibraryResponseDto) => {
   try {
     await deleteLibrary({ id: library.id });
     eventManager.emit('LibraryDelete', { id: library.id });
-    toastManager.success($t('admin.library_deleted'));
+    toastManager.primary($t('admin.library_deleted'));
   } catch (error) {
     handleError(error, $t('errors.unable_to_remove_library'));
   }
@@ -225,7 +225,7 @@ export const handleAddLibraryFolder = async (library: LibraryResponseDto, folder
       updateLibraryDto: { importPaths: [...library.importPaths, folder] },
     });
     eventManager.emit('LibraryUpdate', updatedLibrary);
-    toastManager.success($t('admin.library_updated'));
+    toastManager.primary($t('admin.library_updated'));
   } catch (error) {
     handleError(error, $t('errors.unable_to_update_library'));
     return false;
@@ -246,7 +246,7 @@ export const handleEditLibraryFolder = async (library: LibraryResponseDto, oldVa
   try {
     const updatedLibrary = await updateLibrary({ id: library.id, updateLibraryDto: { importPaths } });
     eventManager.emit('LibraryUpdate', updatedLibrary);
-    toastManager.success($t('admin.library_updated'));
+    toastManager.primary($t('admin.library_updated'));
   } catch (error) {
     handleError(error, $t('errors.unable_to_update_library'));
     return false;
@@ -273,7 +273,7 @@ const handleDeleteLibraryFolder = async (library: LibraryResponseDto, folder: st
       updateLibraryDto: { importPaths: library.importPaths.filter((path) => path !== folder) },
     });
     eventManager.emit('LibraryUpdate', updatedLibrary);
-    toastManager.success($t('admin.library_updated'));
+    toastManager.primary($t('admin.library_updated'));
   } catch (error) {
     handleError(error, $t('errors.unable_to_update_library'));
   }
@@ -293,7 +293,7 @@ export const handleAddLibraryExclusionPattern = async (library: LibraryResponseD
       updateLibraryDto: { exclusionPatterns: [...library.exclusionPatterns, exclusionPattern] },
     });
     eventManager.emit('LibraryUpdate', updatedLibrary);
-    toastManager.success($t('admin.library_updated'));
+    toastManager.primary($t('admin.library_updated'));
   } catch (error) {
     handleError(error, $t('errors.unable_to_update_library'));
     return false;
@@ -314,7 +314,7 @@ export const handleEditExclusionPattern = async (library: LibraryResponseDto, ol
   try {
     const updatedLibrary = await updateLibrary({ id: library.id, updateLibraryDto: { exclusionPatterns } });
     eventManager.emit('LibraryUpdate', updatedLibrary);
-    toastManager.success($t('admin.library_updated'));
+    toastManager.primary($t('admin.library_updated'));
   } catch (error) {
     handleError(error, $t('errors.unable_to_update_library'));
     return false;
@@ -339,7 +339,7 @@ const handleDeleteExclusionPattern = async (library: LibraryResponseDto, exclusi
       },
     });
     eventManager.emit('LibraryUpdate', updatedLibrary);
-    toastManager.success($t('admin.library_updated'));
+    toastManager.primary($t('admin.library_updated'));
   } catch (error) {
     handleError(error, $t('errors.unable_to_update_library'));
   }

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

@@ -57,7 +57,7 @@ const handleFavoritePerson = async (person: { id: string }) => {
   try {
     const response = await updatePerson({ id: person.id, personUpdateDto: { isFavorite: true } });
     eventManager.emit('PersonUpdate', response);
-    toastManager.success($t('added_to_favorites'));
+    toastManager.primary($t('added_to_favorites'));
   } catch (error) {
     handleError(error, $t('errors.unable_to_add_remove_favorites', { values: { favorite: false } }));
   }
@@ -69,7 +69,7 @@ const handleUnfavoritePerson = async (person: { id: string }) => {
   try {
     const response = await updatePerson({ id: person.id, personUpdateDto: { isFavorite: false } });
     eventManager.emit('PersonUpdate', response);
-    toastManager.success($t('removed_from_favorites'));
+    toastManager.primary($t('removed_from_favorites'));
   } catch (error) {
     handleError(error, $t('errors.unable_to_add_remove_favorites', { values: { favorite: false } }));
   }
@@ -80,7 +80,7 @@ const handleHidePerson = async (person: { id: string }) => {
 
   try {
     const response = await updatePerson({ id: person.id, personUpdateDto: { isHidden: true } });
-    toastManager.success($t('changed_visibility_successfully'));
+    toastManager.primary($t('changed_visibility_successfully'));
     eventManager.emit('PersonUpdate', response);
   } catch (error) {
     handleError(error, $t('errors.unable_to_hide_person'));
@@ -92,7 +92,7 @@ const handleShowPerson = async (person: { id: string }) => {
 
   try {
     const response = await updatePerson({ id: person.id, personUpdateDto: { isHidden: false } });
-    toastManager.success($t('changed_visibility_successfully'));
+    toastManager.primary($t('changed_visibility_successfully'));
     eventManager.emit('PersonUpdate', response);
   } catch (error) {
     handleError(error, $t('errors.something_went_wrong'));
@@ -104,7 +104,7 @@ export const handleUpdatePersonBirthDate = async (person: PersonResponseDto, bir
 
   try {
     const response = await updatePerson({ id: person.id, personUpdateDto: { birthDate } });
-    toastManager.success($t('date_of_birth_saved'));
+    toastManager.primary($t('date_of_birth_saved'));
     eventManager.emit('PersonUpdate', response);
     return true;
   } catch (error) {

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

@@ -129,7 +129,7 @@ export const handleEmptyQueue = async (queue: QueueResponseDto) => {
     await emptyQueue({ name: queue.name, queueDeleteDto: { failed: false } });
     const response = await getQueue({ name: queue.name });
     eventManager.emit('QueueUpdate', response);
-    toastManager.success($t('admin.cleared_jobs', { values: { job: item.title } }));
+    toastManager.primary($t('admin.cleared_jobs', { values: { job: item.title } }));
   } catch (error) {
     handleError(error, $t('errors.something_went_wrong'));
   }
@@ -155,7 +155,7 @@ const handleRemoveFailedJobs = async (queue: QueueResponseDto) => {
     await emptyQueue({ name: queue.name, queueDeleteDto: { failed: true } });
     const response = await getQueue({ name: queue.name });
     eventManager.emit('QueueUpdate', response);
-    toastManager.success();
+    toastManager.primary();
   } catch (error) {
     handleError(error, $t('errors.something_went_wrong'));
   }

web/src/lib/services/shared-link.service.ts

@@ -95,7 +95,7 @@ export const handleUpdateSharedLink = async (sharedLink: SharedLinkResponseDto,
     const response = await updateSharedLink({ id: sharedLink.id, sharedLinkEditDto: dto });
 
     eventManager.emit('SharedLinkUpdate', { album: sharedLink.album, ...response });
-    toastManager.success($t('saved'));
+    toastManager.primary($t('saved'));
 
     return true;
   } catch (error) {
@@ -118,7 +118,7 @@ const handleDeleteSharedLink = async (sharedLink: SharedLinkResponseDto) => {
   try {
     await removeSharedLink({ id: sharedLink.id });
     eventManager.emit('SharedLinkDelete', sharedLink);
-    toastManager.success($t('deleted_shared_link'));
+    toastManager.primary($t('deleted_shared_link'));
   } catch (error) {
     handleError(error, $t('errors.unable_to_delete_shared_link'));
   }
@@ -150,7 +150,7 @@ export const handleRemoveSharedLinkAssets = async (sharedLink: SharedLinkRespons
     }
 
     const count = results.filter((item) => item.success).length;
-    toastManager.success($t('assets_removed_count', { values: { count } }));
+    toastManager.primary($t('assets_removed_count', { values: { count } }));
     return true;
   } catch (error) {
     handleError(error, $t('errors.unable_to_remove_assets_from_shared_link'));

web/src/lib/services/system-config.service.ts

@@ -62,7 +62,7 @@ export const handleSystemConfigSave = async (update: Partial<SystemConfigDto>) =
     const newConfig = await updateConfig({ systemConfigDto });
 
     eventManager.emit('SystemConfigUpdate', newConfig);
-    toastManager.success($t('settings_saved'));
+    toastManager.primary($t('settings_saved'));
   } catch (error) {
     handleError(error, $t('errors.unable_to_save_settings'));
   }

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

@@ -42,7 +42,7 @@ export const handleCreateTag = async (tagValue: string) => {
       return;
     }
 
-    toastManager.success($t('tag_created', { values: { tag: tag.value } }));
+    toastManager.primary($t('tag_created', { values: { tag: tag.value } }));
     eventManager.emit('TagCreate', tag);
 
     return true;
@@ -61,7 +61,7 @@ export const handleUpdateTag = async (tag: TreeNode, dto: TagUpdateDto) => {
   try {
     const response = await updateTag({ id: tag.id, tagUpdateDto: dto });
 
-    toastManager.success($t('tag_updated', { values: { tag: tag.value } }));
+    toastManager.primary($t('tag_updated', { values: { tag: tag.value } }));
     eventManager.emit('TagUpdate', response);
 
     return true;
@@ -91,7 +91,7 @@ const handleDeleteTag = async (tag: TreeNode) => {
   try {
     await deleteTag({ id: tagId });
     eventManager.emit('TagDelete', tag);
-    toastManager.success();
+    toastManager.primary();
   } catch (error) {
     handleError(error, $t('errors.something_went_wrong'));
   }

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

@@ -31,7 +31,7 @@ export const handleEmptyTrash = async () => {
 
   try {
     const { count } = await emptyTrash();
-    toastManager.success($t('assets_permanently_deleted_count', { values: { count } }));
+    toastManager.primary($t('assets_permanently_deleted_count', { values: { count } }));
   } catch (error) {
     handleError(error, $t('errors.unable_to_empty_trash'));
   }
@@ -47,7 +47,7 @@ export const handleRestoreTrash = async () => {
 
   try {
     const { count } = await restoreTrash();
-    toastManager.success($t('assets_restored_count', { values: { count } }));
+    toastManager.primary($t('assets_restored_count', { values: { count } }));
   } catch (error) {
     handleError(error, $t('errors.unable_to_restore_trash'));
   }

web/src/lib/services/user-admin.service.ts

@@ -109,7 +109,7 @@ export const handleCreateUserAdmin = async (dto: UserAdminCreateDto) => {
   try {
     const response = await createUserAdmin({ userAdminCreateDto: dto });
     eventManager.emit('UserAdminCreate', response);
-    toastManager.success();
+    toastManager.primary();
     return response;
   } catch (error) {
     handleError(error, $t('errors.unable_to_create_user'));
@@ -122,7 +122,7 @@ export const handleUpdateUserAdmin = async (user: UserAdminResponseDto, dto: Use
   try {
     const response = await updateUserAdmin({ id: user.id, userAdminUpdateDto: dto });
     eventManager.emit('UserAdminUpdate', response);
-    toastManager.success();
+    toastManager.primary();
     return true;
   } catch (error) {
     handleError(error, $t('errors.unable_to_update_user'));
@@ -136,7 +136,7 @@ export const handleDeleteUserAdmin = async (user: UserAdminResponseDto, dto: Use
   try {
     const result = await deleteUserAdmin({ id: user.id, userAdminDeleteDto: dto });
     eventManager.emit('UserAdminDelete', result);
-    toastManager.success();
+    toastManager.primary();
     return true;
   } catch (error) {
     handleError(error, $t('errors.unable_to_delete_user'));
@@ -149,7 +149,7 @@ export const handleRestoreUserAdmin = async (user: UserAdminResponseDto) => {
   try {
     const response = await restoreUserAdmin({ id: user.id });
     eventManager.emit('UserAdminRestore', response);
-    toastManager.success();
+    toastManager.primary();
     return true;
   } catch (error) {
     handleError(error, $t('errors.unable_to_restore_user'));
@@ -190,7 +190,7 @@ const handleResetPasswordUserAdmin = async (user: UserAdminResponseDto) => {
     const dto = { password: generatePassword(), shouldChangePassword: true };
     const response = await updateUserAdmin({ id: user.id, userAdminUpdateDto: dto });
     eventManager.emit('UserAdminUpdate', response);
-    toastManager.success();
+    toastManager.primary();
     await modalManager.show(PasswordResetSuccessModal, { newPassword: dto.password });
   } catch (error) {
     handleError(error, $t('errors.unable_to_reset_password'));
@@ -208,7 +208,7 @@ const handleResetPinCodeUserAdmin = async (user: UserAdminResponseDto) => {
   try {
     const response = await updateUserAdmin({ id: user.id, userAdminUpdateDto: { pinCode: null } });
     eventManager.emit('UserAdminUpdate', response);
-    toastManager.success($t('pin_code_reset_successfully'));
+    toastManager.primary($t('pin_code_reset_successfully'));
   } catch (error) {
     handleError(error, $t('errors.unable_to_reset_pin_code'));
   }

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

@@ -39,7 +39,7 @@ export const handleResetPinCode = async (dto: PinCodeResetDto) => {
 
   try {
     await resetPinCode({ pinCodeResetDto: dto });
-    toastManager.success($t('pin_code_reset_successfully'));
+    toastManager.primary($t('pin_code_reset_successfully'));
     eventManager.emit('UserPinCodeReset');
     return true;
   } catch (error) {
@@ -52,7 +52,7 @@ export const handleChangePassword = async (dto: ChangePasswordDto) => {
 
   try {
     await changePassword({ changePasswordDto: dto });
-    toastManager.success($t('updated_password'));
+    toastManager.primary($t('updated_password'));
     return true;
   } catch (error) {
     handleError(error, $t('errors.unable_to_change_password'));

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

@@ -397,7 +397,7 @@ export const handleToggleWorkflowEnabled = async (
     });
 
     eventManager.emit('WorkflowUpdate', updated);
-    toastManager.success($t('workflow_updated'));
+    toastManager.primary($t('workflow_updated'));
     return updated;
   } catch (error) {
     handleError(error, $t('errors.unable_to_update_workflow'));
@@ -419,7 +419,7 @@ export const handleDeleteWorkflow = async (workflow: WorkflowResponseDto): Promi
   try {
     await deleteWorkflow({ id: workflow.id });
     eventManager.emit('WorkflowDelete', workflow);
-    toastManager.success($t('workflow_deleted'));
+    toastManager.primary($t('workflow_deleted'));
     return true;
   } catch (error) {
     handleError(error, $t('errors.unable_to_delete_workflow'));

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

@@ -49,7 +49,7 @@ export const tagAssets = async ({
 
   if (showNotification) {
     const $t = await getFormatter();
-    toastManager.success($t('tagged_assets', { values: { count: assetIds.length } }));
+    toastManager.primary($t('tagged_assets', { values: { count: assetIds.length } }));
   }
 
   return assetIds;
@@ -70,7 +70,7 @@ export const removeTag = async ({
 
   if (showNotification) {
     const $t = await getFormatter();
-    toastManager.success($t('removed_tagged_assets', { values: { count: assetIds.length } }));
+    toastManager.primary($t('removed_tagged_assets', { values: { count: assetIds.length } }));
   }
 
   return assetIds;
@@ -364,7 +364,7 @@ export const deleteStack = async (stackIds: string[]) => {
 
     await deleteStacks({ bulkIdsDto: { ids: [...ids] } });
 
-    toastManager.success($t('unstacked_assets_count', { values: { count } }));
+    toastManager.primary($t('unstacked_assets_count', { values: { count } }));
 
     const assets = stacks.flatMap((stack) => stack.assets);
     for (const asset of assets) {
@@ -385,7 +385,7 @@ export const keepThisDeleteOthers = async (keepAsset: AssetResponseDto, stack: S
     await deleteAssets({ assetBulkDeleteDto: { ids: assetsToDeleteIds } });
     await deleteStacks({ bulkIdsDto: { ids: [stack.id] } });
 
-    toastManager.success($t('kept_this_deleted_others', { values: { count: assetsToDeleteIds.length } }));
+    toastManager.primary($t('kept_this_deleted_others', { values: { count: assetsToDeleteIds.length } }));
 
     keepAsset.stack = null;
     return keepAsset;
@@ -440,7 +440,7 @@ export const toggleArchive = async (asset: AssetResponseDto) => {
     });
 
     asset.isArchived = data.isArchived;
-    toastManager.success(asset.isArchived ? $t(`added_to_archive`) : $t(`removed_from_archive`));
+    toastManager.primary(asset.isArchived ? $t(`added_to_archive`) : $t(`removed_from_archive`));
   } catch (error) {
     handleError(error, $t('errors.unable_to_add_remove_archive', { values: { archived: asset.isArchived } }));
   }
@@ -459,7 +459,7 @@ export const archiveAssets = async (assets: { id: string }[], visibility: AssetV
       });
     }
 
-    toastManager.success(
+    toastManager.primary(
       visibility === AssetVisibility.Archive
         ? $t('archived_count', { values: { count: ids.length } })
         : $t('unarchived_count', { values: { count: ids.length } }),

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

@@ -200,7 +200,7 @@
         },
       });
       eventManager.emit('AlbumUpdate', response);
-      toastManager.success($t('album_cover_updated'));
+      toastManager.primary($t('album_cover_updated'));
     } catch (error) {
       handleError(error, $t('errors.unable_to_update_album_cover'));
     }

web/src/routes/(user)/people/+page.svelte

@@ -157,7 +157,7 @@
             break;
           }
         }
-        toastManager.success($t('change_name_successfully'));
+        toastManager.primary($t('change_name_successfully'));
       } catch (error) {
         handleError(error, $t('errors.unable_to_save_name'));
       }
@@ -178,7 +178,7 @@
         return person;
       });
 
-      toastManager.success($t('changed_visibility_successfully'));
+      toastManager.primary($t('changed_visibility_successfully'));
     } catch (error) {
       handleError(error, $t('errors.unable_to_hide_person'));
     }
@@ -198,7 +198,7 @@
         return person;
       });
 
-      toastManager.success(updatedPerson.isFavorite ? $t('added_to_favorites') : $t('removed_from_favorites'));
+      toastManager.primary(updatedPerson.isFavorite ? $t('added_to_favorites') : $t('removed_from_favorites'));
     } catch (error) {
       handleError(error, $t('errors.unable_to_add_remove_favorites', { values: { favorite: detail.isFavorite } }));
     }

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

@@ -149,7 +149,7 @@
     }
     try {
       person = await updatePerson({ id: person.id, personUpdateDto: { featureFaceAssetId: asset.id } });
-      toastManager.success($t('feature_photo_updated'));
+      toastManager.primary($t('feature_photo_updated'));
     } catch (error) {
       handleError(error, $t('errors.unable_to_set_feature_photo'));
     }
@@ -210,7 +210,7 @@
 
     try {
       person = await updatePerson({ id: person.id, personUpdateDto: { name: personName } });
-      toastManager.success($t('change_name_successfully'));
+      toastManager.primary($t('change_name_successfully'));
     } catch (error) {
       handleError(error, $t('errors.unable_to_save_name'));
     }

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

@@ -67,7 +67,7 @@
   type SearchTerms = MetadataSearchDto & Pick<SmartSearchDto, 'query' | 'queryAssetId'>;
   let searchQuery = $derived(page.url.searchParams.get(QueryParameter.QUERY));
   let smartSearchEnabled = $derived(featureFlagsManager.value.smartSearch);
-  let terms = $derived(searchQuery ? JSON.parse(searchQuery) : {});
+  let terms = $derived<SearchTerms>(searchQuery ? JSON.parse(searchQuery) : {});
 
   $effect(() => {
     // we want this to *only* be reactive on `terms`
@@ -137,15 +137,13 @@
     const searchDto: SearchTerms = {
       page: nextPage,
       withExif: true,
-      isVisible: true,
-      language: $lang,
       ...terms,
     };
 
     try {
       const { albums, assets } =
         ('query' in searchDto || 'queryAssetId' in searchDto) && smartSearchEnabled
-          ? await searchSmart({ smartSearchDto: searchDto })
+          ? await searchSmart({ smartSearchDto: { ...searchDto, language: $lang } })
           : await searchAssets({ metadataSearchDto: searchDto });
 
       searchResultAlbums.push(...albums.items);
@@ -230,7 +228,7 @@
   const onAlbumAddAssets = ({ assetIds }: { assetIds: string[] }) => {
     cancelMultiselect(assetInteraction);
 
-    if (terms.isNotInAlbum.toString() == 'true') {
+    if (terms.isNotInAlbum) {
       const assetIdSet = new Set(assetIds);
       searchResultAssets = searchResultAssets.filter((asset) => !assetIdSet.has(asset.id));
     }

web/src/routes/(user)/user-settings/+layout.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+  import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
+  import { getKeyboardActions } from '$lib/services/keyboard.service';
+  import { Container } from '@immich/ui';
+  import type { Snippet } from 'svelte';
+  import { t } from 'svelte-i18n';
+  import type { PageData } from './$types';
+
+  type Props = {
+    children?: Snippet;
+    data: PageData;
+  };
+
+  let { children, data }: Props = $props();
+
+  const { KeyboardShortcuts } = $derived(getKeyboardActions($t));
+</script>
+
+<UserPageLayout title={data.meta.title} actions={[KeyboardShortcuts]}>
+  <Container size="medium" center>
+    {@render children?.()}
+  </Container>
+</UserPageLayout>

web/src/routes/(user)/user-settings/+layout.ts

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

web/src/routes/(user)/user-settings/+page.svelte

@@ -1,9 +1,5 @@
 <script lang="ts">
-  import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
   import UserSettingsList from '$lib/components/user-settings-page/user-settings-list.svelte';
-  import { getKeyboardActions } from '$lib/services/keyboard.service';
-  import { Container } from '@immich/ui';
-  import { t } from 'svelte-i18n';
   import type { PageData } from './$types';
 
   type Props = {
@@ -11,12 +7,6 @@
   };
 
   let { data }: Props = $props();
-
-  const { KeyboardShortcuts } = $derived(getKeyboardActions($t));
 </script>
 
-<UserPageLayout title={data.meta.title} actions={[KeyboardShortcuts]}>
-  <Container size="medium" center>
-    <UserSettingsList keys={data.keys} sessions={data.sessions} />
-  </Container>
-</UserPageLayout>
+<UserSettingsList sessions={data.sessions} />

web/src/routes/(user)/user-settings/+page.ts

@@ -1,20 +1,13 @@
 import { authenticate } from '$lib/utils/auth';
-import { getFormatter } from '$lib/utils/i18n';
-import { getApiKeys, getSessions } from '@immich/sdk';
+import { getSessions } from '@immich/sdk';
 import type { PageLoad } from './$types';
 
 export const load = (async ({ url }) => {
   await authenticate(url);
 
-  const keys = await getApiKeys();
   const sessions = await getSessions();
-  const $t = await getFormatter();
 
   return {
-    keys,
     sessions,
-    meta: {
-      title: $t('settings'),
-    },
   };
 }) satisfies PageLoad;

web/src/routes/(user)/user-settings/new-api-key/+page.svelte

@@ -0,0 +1,55 @@
+<script lang="ts">
+  import { goto } from '$app/navigation';
+  import { page } from '$app/state';
+  import ApiKeyPermissionsPicker from '$lib/components/ApiKeyPermissionsPicker.svelte';
+  import { OpenQueryParam } from '$lib/constants';
+  import ApiKeySecretModal from '$lib/modals/ApiKeySecretModal.svelte';
+  import { Route } from '$lib/route';
+  import { handleCreateApiKey } from '$lib/services/api-key.service';
+  import { Permission } from '@immich/sdk';
+  import { Field, FormModal, Input } from '@immich/ui';
+  import { mdiKeyVariant } from '@mdi/js';
+  import { t } from 'svelte-i18n';
+
+  const validPermissions = new Set(Object.values(Permission));
+  const queryPermissions = (page.url.searchParams.get('permissions') || '')
+    .split(' ')
+    .filter((x) => x !== '')
+    .map((value) => {
+      if (value === Permission.All || !validPermissions.has(value as Permission)) {
+        console.warn(`Invalid permission value: ${value}`);
+      }
+      return value as Permission;
+    });
+
+  let name = $state('API Key');
+  let selectedPermissions = $state<Permission[]>(queryPermissions);
+  const isAllPermissions = $derived(selectedPermissions.length === Object.keys(Permission).length - 1);
+
+  const onClose = async () => {
+    await goto(Route.userSettings({ isOpen: OpenQueryParam.API_KEYS }));
+  };
+
+  let secret: string | undefined = $state();
+
+  const onSubmit = async () => {
+    const permissions = isAllPermissions ? [Permission.All] : selectedPermissions;
+    const response = await handleCreateApiKey({ name, permissions });
+    if (response) {
+      secret = response.secret;
+    }
+  };
+</script>
+
+{#if !secret}
+  <FormModal title={$t('new_api_key')} icon={mdiKeyVariant} {onClose} {onSubmit} submitText={$t('create')} size="giant">
+    <div class="mb-4 flex flex-col gap-2">
+      <Field label={$t('name')}>
+        <Input bind:value={name} />
+      </Field>
+    </div>
+    <ApiKeyPermissionsPicker bind:selectedPermissions />
+  </FormModal>
+{:else}
+  <ApiKeySecretModal {secret} {onClose} />
+{/if}

web/src/routes/(user)/user-settings/new-api-key/+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 ({ url }) => {
+  await authenticate(url);
+  const $t = await getFormatter();
+
+  return {
+    meta: {
+      title: $t('settings'),
+    },
+  };
+}) satisfies PageLoad;

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

@@ -95,7 +95,7 @@
     const message = featureFlagsManager.value.trash
       ? $t('assets_moved_to_trash_count', { values: { count: trashedCount } })
       : $t('permanently_deleted_assets_count', { values: { count: trashedCount } });
-    toastManager.success(message);
+    toastManager.primary(message);
   };
 
   const handleResolve = async (duplicateId: string, duplicateAssetIds: string[], trashIds: string[]) => {
@@ -167,7 +167,7 @@
 
         duplicates = [];
 
-        toastManager.success($t('resolved_all_duplicates'));
+        toastManager.primary($t('resolved_all_duplicates'));
         page.url.searchParams.delete('index');
         await goto(Route.duplicatesUtility());
       },

web/src/routes/(user)/utilities/workflows/[workflowId]/+page.svelte

@@ -131,7 +131,7 @@
       previousWorkflow = updated;
       editWorkflow = updated;
 
-      toastManager.success($t('workflow_update_success'), {
+      toastManager.primary($t('workflow_update_success'), {
         closable: true,
       });
     } catch (error) {