feat: rework photo-viewer/asset-viewer - introduce adaptive-image.svelte

preload thumbs and previews

cli/package.json

@@ -20,7 +20,7 @@
     "@types/lodash-es": "^4.17.12",
     "@types/micromatch": "^4.0.9",
     "@types/mock-fs": "^4.13.1",
-    "@types/node": "^24.10.4",
+    "@types/node": "^24.10.8",
     "@vitest/coverage-v8": "^3.0.0",
     "byte-size": "^9.0.0",
     "cli-progress": "^3.12.0",

e2e/package.json

@@ -27,7 +27,7 @@
     "@playwright/test": "^1.44.1",
     "@socket.io/component-emitter": "^3.1.2",
     "@types/luxon": "^3.4.2",
-    "@types/node": "^24.10.4",
+    "@types/node": "^24.10.8",
     "@types/pg": "^8.15.1",
     "@types/pngjs": "^6.0.4",
     "@types/supertest": "^6.0.2",

e2e/src/generators/timeline/rest-response.ts

@@ -348,6 +348,7 @@ export function toAssetResponseDto(asset: MockTimelineAsset, owner?: UserRespons
     checksum: asset.checksum,
     width: exifInfo.exifImageWidth ?? 1,
     height: exifInfo.exifImageHeight ?? 1,
+    isEdited: false,
   };
 }
 

e2e/src/web/specs/photo-viewer.e2e-spec.ts

@@ -1,10 +1,7 @@
 import { AssetMediaResponseDto, LoginResponseDto } from '@immich/sdk';
-import { Page, expect, test } from '@playwright/test';
+import { expect, test } from '@playwright/test';
 import { utils } from 'src/utils';
 
-function imageLocator(page: Page) {
-  return page.getByAltText('Image taken').locator('visible=true');
-}
 test.describe('Photo Viewer', () => {
   let admin: LoginResponseDto;
   let asset: AssetMediaResponseDto;
@@ -26,31 +23,32 @@ test.describe('Photo Viewer', () => {
 
   test('loads original photo when zoomed', async ({ page }) => {
     await page.goto(`/photos/${asset.id}`);
-    await expect.poll(async () => await imageLocator(page).getAttribute('src')).toContain('thumbnail');
-    const box = await imageLocator(page).boundingBox();
+    await expect(page.getByTestId('thumbnail')).toHaveAttribute('src', /thumbnail/);
+    const box = await page.getByTestId('thumbnail').boundingBox();
     expect(box).toBeTruthy();
     const { x, y, width, height } = box!;
     await page.mouse.move(x + width / 2, y + height / 2);
     await page.mouse.wheel(0, -1);
-    await expect.poll(async () => await imageLocator(page).getAttribute('src')).toContain('original');
+    await expect(page.getByTestId('original')).toBeInViewport();
+    await expect(page.getByTestId('original')).toHaveAttribute('src', /original/);
   });
 
   test('loads fullsize image when zoomed and original is web-incompatible', async ({ page }) => {
     await page.goto(`/photos/${rawAsset.id}`);
-    await expect.poll(async () => await imageLocator(page).getAttribute('src')).toContain('thumbnail');
-    const box = await imageLocator(page).boundingBox();
+    await expect(page.getByTestId('thumbnail')).toHaveAttribute('src', /thumbnail/);
+    const box = await page.getByTestId('thumbnail').boundingBox();
     expect(box).toBeTruthy();
     const { x, y, width, height } = box!;
     await page.mouse.move(x + width / 2, y + height / 2);
     await page.mouse.wheel(0, -1);
-    await expect.poll(async () => await imageLocator(page).getAttribute('src')).toContain('fullsize');
+    await expect(page.getByTestId('original')).toHaveAttribute('src', /fullsize/);
   });
 
   test('reloads photo when checksum changes', async ({ page }) => {
     await page.goto(`/photos/${asset.id}`);
-    await expect.poll(async () => await imageLocator(page).getAttribute('src')).toContain('thumbnail');
-    const initialSrc = await imageLocator(page).getAttribute('src');
+    await expect(page.getByTestId('thumbnail')).toHaveAttribute('src', /thumbnail/);
+    const initialSrc = await page.getByTestId('thumbnail').getAttribute('src');
     await utils.replaceAsset(admin.accessToken, asset.id);
-    await expect.poll(async () => await imageLocator(page).getAttribute('src')).not.toBe(initialSrc);
+    await expect(page.getByTestId('preview')).not.toHaveAttribute('src', initialSrc!);
   });
 });

i18n/en.json

@@ -603,7 +603,7 @@
   "backup_album_selection_page_select_albums": "Select albums",
   "backup_album_selection_page_selection_info": "Selection Info",
   "backup_album_selection_page_total_assets": "Total unique assets",
-  "backup_albums_sync": "Backup albums synchronization",
+  "backup_albums_sync": "Backup Albums Synchronization",
   "backup_all": "All",
   "backup_background_service_backup_failed_message": "Failed to backup assets. Retrying…",
   "backup_background_service_complete_notification": "Asset backup complete",
@@ -998,9 +998,11 @@
   "error_getting_places": "Error getting places",
   "error_loading_image": "Error loading image",
   "error_loading_partners": "Error loading partners: {error}",
+  "error_retrieving_asset_information": "Error retrieving asset information",
   "error_saving_image": "Error: {error}",
   "error_tag_face_bounding_box": "Error tagging face - cannot get bounding box coordinates",
   "error_title": "Error - Something went wrong",
+  "error_while_navigating": "Error while navigating to asset",
   "errors": {
     "cannot_navigate_next_asset": "Cannot navigate to the next asset",
     "cannot_navigate_previous_asset": "Cannot navigate to previous asset",
@@ -2257,7 +2259,7 @@
   "url": "URL",
   "usage": "Usage",
   "use_biometric": "Use biometric",
-  "use_current_connection": "use current connection",
+  "use_current_connection": "Use current connection",
   "use_custom_date_range": "Use custom date range instead",
   "user": "User",
   "user_has_been_deleted": "This user has been deleted.",

mise.toml

@@ -3,7 +3,7 @@ experimental_monorepo_root = true
 [tools]
 node = "24.13.0"
 flutter = "3.35.7"
-pnpm = "10.27.0"
+pnpm = "10.28.0"
 terragrunt = "0.93.10"
 opentofu = "1.10.7"
 java = "25.0.1"

mobile/android/app/src/main/AndroidManifest.xml

@@ -117,6 +117,9 @@
         <data
           android:host="my.immich.app"
           android:pathPrefix="/memories/" />
+        <data
+          android:host="my.immich.app"
+          android:path="/memory" />
         <data
           android:host="my.immich.app"
           android:pathPrefix="/photos/" />

mobile/lib/pages/common/settings.page.dart

@@ -92,7 +92,7 @@ class _MobileLayout extends StatelessWidget {
                 ],
         )
         .toList();
-    return ListView(padding: const EdgeInsets.only(top: 10.0, bottom: 16), children: [...settings]);
+    return ListView(padding: const EdgeInsets.only(top: 10.0, bottom: 60), children: [...settings]);
   }
 }
 
@@ -142,7 +142,7 @@ class SettingsSubPage extends StatelessWidget {
     context.locale;
     return Scaffold(
       appBar: AppBar(centerTitle: false, title: Text(section.title).tr()),
-      body: section.widget,
+      body: Padding(padding: const EdgeInsets.only(bottom: 60.0), child: section.widget),
     );
   }
 }

mobile/lib/pages/settings/sync_status.page.dart

@@ -18,6 +18,7 @@ class SyncStatusPage extends StatelessWidget {
           splashRadius: 24,
           icon: const Icon(Icons.arrow_back_ios_rounded),
         ),
+        centerTitle: false,
       ),
       body: const SyncStatusAndActions(),
     );

mobile/lib/presentation/widgets/album/album_selector.widget.dart

@@ -311,18 +311,17 @@ class _SortButtonState extends ConsumerState<_SortButton> {
                   : const Icon(Icons.abc, color: Colors.transparent),
               onPressed: () => onMenuTapped(sortMode),
               style: ButtonStyle(
-                padding: WidgetStateProperty.all(const EdgeInsets.fromLTRB(16, 16, 32, 16)),
+                padding: WidgetStateProperty.all(const EdgeInsets.fromLTRB(12, 12, 24, 12)),
                 backgroundColor: WidgetStateProperty.all(
                   albumSortOption == sortMode ? context.colorScheme.primary : Colors.transparent,
                 ),
                 shape: WidgetStateProperty.all(
-                  const RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(24))),
+                  const RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(12))),
                 ),
               ),
               child: Text(
                 sortMode.label.t(context: context),
-                style: context.textTheme.titleSmall?.copyWith(
-                  fontWeight: FontWeight.w600,
+                style: context.textTheme.labelLarge?.copyWith(
                   color: albumSortOption == sortMode
                       ? context.colorScheme.onPrimary
                       : context.colorScheme.onSurface.withAlpha(185),
@@ -350,10 +349,7 @@ class _SortButtonState extends ConsumerState<_SortButton> {
               ),
               Text(
                 albumSortOption.label.t(context: context),
-                style: context.textTheme.bodyLarge?.copyWith(
-                  fontWeight: FontWeight.w500,
-                  color: context.colorScheme.onSurface.withAlpha(225),
-                ),
+                style: context.textTheme.labelLarge?.copyWith(color: context.colorScheme.onSurface.withAlpha(225)),
               ),
               isSorting
                   ? SizedBox(

mobile/lib/presentation/widgets/asset_viewer/bottom_sheet.widget.dart

@@ -10,6 +10,7 @@ import 'package:immich_mobile/domain/models/asset/base_asset.model.dart';
 import 'package:immich_mobile/domain/models/exif.model.dart';
 import 'package:immich_mobile/extensions/build_context_extensions.dart';
 import 'package:immich_mobile/extensions/duration_extensions.dart';
+import 'package:immich_mobile/extensions/theme_extensions.dart';
 import 'package:immich_mobile/extensions/translate_extensions.dart';
 import 'package:immich_mobile/presentation/widgets/album/album_tile.dart';
 import 'package:immich_mobile/presentation/widgets/asset_viewer/asset_viewer.state.dart';
@@ -164,11 +165,8 @@ class _AssetDetailBottomSheet extends ConsumerWidget {
           children: [
             if (albums.isNotEmpty)
               SheetTile(
-                title: 'appears_in'.t(context: context).toUpperCase(),
-                titleStyle: context.textTheme.labelMedium?.copyWith(
-                  color: context.textTheme.labelMedium?.color?.withAlpha(200),
-                  fontWeight: FontWeight.w600,
-                ),
+                title: 'appears_in'.t(context: context),
+                titleStyle: context.textTheme.labelLarge?.copyWith(color: context.colorScheme.onSurfaceSecondary),
               ),
             Padding(
               padding: const EdgeInsets.only(left: 24),
@@ -224,9 +222,7 @@ class _AssetDetailBottomSheet extends ConsumerWidget {
                 color: context.textTheme.labelLarge?.color,
               ),
               subtitle: _getFileInfo(asset, exifInfo),
-              subtitleStyle: context.textTheme.labelMedium?.copyWith(
-                color: context.textTheme.labelMedium?.color?.withAlpha(200),
-              ),
+              subtitleStyle: context.textTheme.bodyMedium?.copyWith(color: context.colorScheme.onSurfaceSecondary),
             );
           },
         );
@@ -241,9 +237,7 @@ class _AssetDetailBottomSheet extends ConsumerWidget {
             color: context.textTheme.labelLarge?.color,
           ),
           subtitle: _getFileInfo(asset, exifInfo),
-          subtitleStyle: context.textTheme.labelMedium?.copyWith(
-            color: context.textTheme.labelMedium?.color?.withAlpha(200),
-          ),
+          subtitleStyle: context.textTheme.bodyMedium?.copyWith(color: context.colorScheme.onSurfaceSecondary),
         );
       }
     }
@@ -262,11 +256,8 @@ class _AssetDetailBottomSheet extends ConsumerWidget {
         const SheetLocationDetails(),
         // Details header
         SheetTile(
-          title: 'details'.t(context: context).toUpperCase(),
-          titleStyle: context.textTheme.labelMedium?.copyWith(
-            color: context.textTheme.labelMedium?.color?.withAlpha(200),
-            fontWeight: FontWeight.w600,
-          ),
+          title: 'details'.t(context: context),
+          titleStyle: context.textTheme.labelLarge?.copyWith(color: context.colorScheme.onSurfaceSecondary),
         ),
         // File info
         buildFileInfoTile(),
@@ -278,9 +269,7 @@ class _AssetDetailBottomSheet extends ConsumerWidget {
             titleStyle: context.textTheme.labelLarge,
             leading: Icon(Icons.camera_alt_outlined, size: 24, color: context.textTheme.labelLarge?.color),
             subtitle: _getCameraInfoSubtitle(exifInfo),
-            subtitleStyle: context.textTheme.labelMedium?.copyWith(
-              color: context.textTheme.labelMedium?.color?.withAlpha(200),
-            ),
+            subtitleStyle: context.textTheme.bodyMedium?.copyWith(color: context.colorScheme.onSurfaceSecondary),
           ),
         ],
         // Lens info
@@ -291,15 +280,13 @@ class _AssetDetailBottomSheet extends ConsumerWidget {
             titleStyle: context.textTheme.labelLarge,
             leading: Icon(Icons.camera_outlined, size: 24, color: context.textTheme.labelLarge?.color),
             subtitle: _getLensInfoSubtitle(exifInfo),
-            subtitleStyle: context.textTheme.labelMedium?.copyWith(
-              color: context.textTheme.labelMedium?.color?.withAlpha(200),
-            ),
+            subtitleStyle: context.textTheme.bodyMedium?.copyWith(color: context.colorScheme.onSurfaceSecondary),
           ),
         ],
         // Appears in (Albums)
         Padding(padding: const EdgeInsets.only(top: 16.0), child: _buildAppearsInList(ref, context)),
         // padding at the bottom to avoid cut-off
-        const SizedBox(height: 30),
+        const SizedBox(height: 60),
       ],
     );
   }

mobile/lib/presentation/widgets/asset_viewer/bottom_sheet/sheet_location_details.widget.dart

@@ -4,6 +4,7 @@ import 'package:immich_mobile/constants/enums.dart';
 import 'package:immich_mobile/domain/models/asset/base_asset.model.dart';
 import 'package:immich_mobile/domain/models/exif.model.dart';
 import 'package:immich_mobile/extensions/build_context_extensions.dart';
+import 'package:immich_mobile/extensions/theme_extensions.dart';
 import 'package:immich_mobile/extensions/translate_extensions.dart';
 import 'package:immich_mobile/presentation/widgets/asset_viewer/sheet_tile.widget.dart';
 import 'package:immich_mobile/providers/infrastructure/action.provider.dart';
@@ -77,11 +78,8 @@ class _SheetLocationDetailsState extends ConsumerState<SheetLocationDetails> {
         crossAxisAlignment: CrossAxisAlignment.start,
         children: [
           SheetTile(
-            title: 'location'.t(context: context).toUpperCase(),
-            titleStyle: context.textTheme.labelMedium?.copyWith(
-              color: context.textTheme.labelMedium?.color?.withAlpha(200),
-              fontWeight: FontWeight.w600,
-            ),
+            title: 'location'.t(context: context),
+            titleStyle: context.textTheme.labelLarge?.copyWith(color: context.colorScheme.onSurfaceSecondary),
             trailing: hasCoordinates ? const Icon(Icons.edit_location_alt, size: 20) : null,
             onTap: editLocation,
           ),
@@ -105,9 +103,7 @@ class _SheetLocationDetailsState extends ConsumerState<SheetLocationDetails> {
                     ),
                   Text(
                     coordinates,
-                    style: context.textTheme.labelMedium?.copyWith(
-                      color: context.textTheme.labelMedium?.color?.withAlpha(200),
-                    ),
+                    style: context.textTheme.bodySmall?.copyWith(color: context.colorScheme.onSurfaceSecondary),
                   ),
                 ],
               ),

mobile/lib/presentation/widgets/asset_viewer/bottom_sheet/sheet_people_details.widget.dart

@@ -4,6 +4,7 @@ import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:immich_mobile/domain/models/asset/base_asset.model.dart';
 import 'package:immich_mobile/domain/models/person.model.dart';
 import 'package:immich_mobile/extensions/build_context_extensions.dart';
+import 'package:immich_mobile/extensions/theme_extensions.dart';
 import 'package:immich_mobile/extensions/translate_extensions.dart';
 import 'package:immich_mobile/presentation/widgets/people/person_edit_name_modal.widget.dart';
 import 'package:immich_mobile/providers/infrastructure/asset_viewer/current_asset.provider.dart';
@@ -53,11 +54,8 @@ class _SheetPeopleDetailsState extends ConsumerState<SheetPeopleDetails> {
               Padding(
                 padding: const EdgeInsets.only(left: 16, top: 16, bottom: 16),
                 child: Text(
-                  "people".t(context: context).toUpperCase(),
-                  style: context.textTheme.labelMedium?.copyWith(
-                    color: context.textTheme.labelMedium?.color?.withAlpha(200),
-                    fontWeight: FontWeight.w600,
-                  ),
+                  "people".t(context: context),
+                  style: context.textTheme.labelLarge?.copyWith(color: context.colorScheme.onSurfaceSecondary),
                 ),
               ),
               SizedBox(

mobile/lib/theme/theme_data.dart

@@ -61,7 +61,12 @@ ThemeData getThemeData({required ColorScheme colorScheme, required Locale locale
       ),
     ),
     chipTheme: const ChipThemeData(side: BorderSide.none),
-    sliderTheme: const SliderThemeData(thumbShape: RoundSliderThumbShape(enabledThumbRadius: 7), trackHeight: 2.0),
+    sliderTheme: const SliderThemeData(
+      thumbShape: RoundSliderThumbShape(enabledThumbRadius: 7),
+      trackHeight: 2.0,
+      // ignore: deprecated_member_use
+      year2023: false,
+    ),
     bottomNavigationBarTheme: const BottomNavigationBarThemeData(type: BottomNavigationBarType.fixed),
     popupMenuTheme: const PopupMenuThemeData(
       shape: RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(10))),

mobile/lib/widgets/settings/asset_list_settings/asset_list_group_settings.dart

@@ -1,14 +1,14 @@
 import 'dart:async';
 
-import 'package:easy_localization/easy_localization.dart';
 import 'package:flutter/material.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/extensions/translate_extensions.dart';
 import 'package:immich_mobile/providers/app_settings.provider.dart';
 import 'package:immich_mobile/services/app_settings.service.dart';
 import 'package:immich_mobile/utils/hooks/app_settings_update_hook.dart';
 import 'package:immich_mobile/widgets/asset_grid/asset_grid_data_structure.dart';
+import 'package:immich_mobile/widgets/settings/setting_group_title.dart';
 import 'package:immich_mobile/widgets/settings/settings_radio_list_tile.dart';
-import 'package:immich_mobile/widgets/settings/settings_sub_title.dart';
 
 class GroupSettings extends HookConsumerWidget {
   const GroupSettings({super.key});
@@ -33,12 +33,24 @@ class GroupSettings extends HookConsumerWidget {
     return Column(
       crossAxisAlignment: CrossAxisAlignment.start,
       children: [
-        SettingsSubTitle(title: "asset_list_group_by_sub_title".tr()),
+        SettingGroupTitle(
+          title: "asset_list_group_by_sub_title".t(context: context),
+          icon: Icons.group_work_outlined,
+        ),
         SettingsRadioListTile(
           groups: [
-            SettingsRadioGroup(title: 'asset_list_layout_settings_group_by_month_day'.tr(), value: GroupAssetsBy.day),
-            SettingsRadioGroup(title: 'month'.tr(), value: GroupAssetsBy.month),
-            SettingsRadioGroup(title: 'asset_list_layout_settings_group_automatically'.tr(), value: GroupAssetsBy.auto),
+            SettingsRadioGroup(
+              title: 'asset_list_layout_settings_group_by_month_day'.t(context: context),
+              value: GroupAssetsBy.day,
+            ),
+            SettingsRadioGroup(
+              title: 'month'.t(context: context),
+              value: GroupAssetsBy.month,
+            ),
+            SettingsRadioGroup(
+              title: 'asset_list_layout_settings_group_automatically'.t(context: context),
+              value: GroupAssetsBy.auto,
+            ),
           ],
           groupBy: groupBy,
           onRadioChanged: changeGroupValue,

mobile/lib/widgets/settings/asset_list_settings/asset_list_layout_settings.dart

@@ -1,11 +1,12 @@
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flutter/material.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/extensions/translate_extensions.dart';
 import 'package:immich_mobile/providers/app_settings.provider.dart';
 import 'package:immich_mobile/services/app_settings.service.dart';
 import 'package:immich_mobile/utils/hooks/app_settings_update_hook.dart';
+import 'package:immich_mobile/widgets/settings/setting_group_title.dart';
 import 'package:immich_mobile/widgets/settings/settings_slider_list_tile.dart';
-import 'package:immich_mobile/widgets/settings/settings_sub_title.dart';
 import 'package:immich_mobile/widgets/settings/settings_switch_list_tile.dart';
 
 class LayoutSettings extends HookConsumerWidget {
@@ -19,10 +20,13 @@ class LayoutSettings extends HookConsumerWidget {
     return Column(
       crossAxisAlignment: CrossAxisAlignment.start,
       children: [
-        SettingsSubTitle(title: "asset_list_layout_sub_title".tr()),
+        SettingGroupTitle(
+          title: "asset_list_layout_sub_title".t(context: context),
+          icon: Icons.view_module_outlined,
+        ),
         SettingsSwitchListTile(
           valueNotifier: useDynamicLayout,
-          title: "asset_list_layout_settings_dynamic_layout_title".tr(),
+          title: "asset_list_layout_settings_dynamic_layout_title".t(context: context),
           onChanged: (_) => ref.invalidate(appSettingsServiceProvider),
         ),
         SettingsSliderListTile(

mobile/lib/widgets/settings/asset_viewer_settings/image_viewer_quality_setting.dart

@@ -1,10 +1,9 @@
-import 'package:easy_localization/easy_localization.dart';
 import 'package:flutter/material.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
-import 'package:immich_mobile/extensions/build_context_extensions.dart';
+import 'package:immich_mobile/extensions/translate_extensions.dart';
 import 'package:immich_mobile/providers/app_settings.provider.dart';
 import 'package:immich_mobile/services/app_settings.service.dart';
-import 'package:immich_mobile/widgets/settings/settings_sub_title.dart';
+import 'package:immich_mobile/widgets/settings/setting_group_title.dart';
 import 'package:immich_mobile/widgets/settings/settings_switch_list_tile.dart';
 import 'package:immich_mobile/utils/hooks/app_settings_update_hook.dart';
 
@@ -19,21 +18,21 @@ class ImageViewerQualitySetting extends HookConsumerWidget {
     return Column(
       crossAxisAlignment: CrossAxisAlignment.start,
       children: [
-        SettingsSubTitle(title: "setting_image_viewer_title".tr()),
-        ListTile(
-          contentPadding: const EdgeInsets.symmetric(horizontal: 20),
-          title: Text('setting_image_viewer_help', style: context.textTheme.bodyMedium).tr(),
+        SettingGroupTitle(
+          title: "photos".t(context: context),
+          icon: Icons.image_outlined,
+          subtitle: "setting_image_viewer_help".t(context: context),
         ),
         SettingsSwitchListTile(
           valueNotifier: isPreview,
-          title: "setting_image_viewer_preview_title".tr(),
-          subtitle: "setting_image_viewer_preview_subtitle".tr(),
+          title: "setting_image_viewer_preview_title".t(context: context),
+          subtitle: "setting_image_viewer_preview_subtitle".t(context: context),
           onChanged: (_) => ref.invalidate(appSettingsServiceProvider),
         ),
         SettingsSwitchListTile(
           valueNotifier: isOriginal,
-          title: "setting_image_viewer_original_title".tr(),
-          subtitle: "setting_image_viewer_original_subtitle".tr(),
+          title: "setting_image_viewer_original_title".t(context: context),
+          subtitle: "setting_image_viewer_original_subtitle".t(context: context),
           onChanged: (_) => ref.invalidate(appSettingsServiceProvider),
         ),
       ],

mobile/lib/widgets/settings/asset_viewer_settings/video_viewer_settings.dart

@@ -1,9 +1,9 @@
-import 'package:easy_localization/easy_localization.dart';
 import 'package:flutter/material.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/extensions/translate_extensions.dart';
 import 'package:immich_mobile/providers/app_settings.provider.dart';
 import 'package:immich_mobile/services/app_settings.service.dart';
-import 'package:immich_mobile/widgets/settings/settings_sub_title.dart';
+import 'package:immich_mobile/widgets/settings/setting_group_title.dart';
 import 'package:immich_mobile/widgets/settings/settings_switch_list_tile.dart';
 import 'package:immich_mobile/utils/hooks/app_settings_update_hook.dart';
 
@@ -19,23 +19,26 @@ class VideoViewerSettings extends HookConsumerWidget {
     return Column(
       crossAxisAlignment: CrossAxisAlignment.start,
       children: [
-        SettingsSubTitle(title: "videos".tr()),
+        SettingGroupTitle(
+          title: "videos".t(context: context),
+          icon: Icons.video_camera_back_outlined,
+        ),
         SettingsSwitchListTile(
           valueNotifier: useAutoPlayVideo,
-          title: "setting_video_viewer_auto_play_title".tr(),
-          subtitle: "setting_video_viewer_auto_play_subtitle".tr(),
+          title: "setting_video_viewer_auto_play_title".t(context: context),
+          subtitle: "setting_video_viewer_auto_play_subtitle".t(context: context),
           onChanged: (_) => ref.invalidate(appSettingsServiceProvider),
         ),
         SettingsSwitchListTile(
           valueNotifier: useLoopVideo,
-          title: "setting_video_viewer_looping_title".tr(),
-          subtitle: "loop_videos_description".tr(),
+          title: "setting_video_viewer_looping_title".t(context: context),
+          subtitle: "loop_videos_description".t(context: context),
           onChanged: (_) => ref.invalidate(appSettingsServiceProvider),
         ),
         SettingsSwitchListTile(
           valueNotifier: useOriginalVideo,
-          title: "setting_video_viewer_original_video_title".tr(),
-          subtitle: "setting_video_viewer_original_video_subtitle".tr(),
+          title: "setting_video_viewer_original_video_title".t(context: context),
+          subtitle: "setting_video_viewer_original_video_subtitle".t(context: context),
           onChanged: (_) => ref.invalidate(appSettingsServiceProvider),
         ),
       ],

mobile/lib/widgets/settings/backup_settings/drift_backup_settings.dart

@@ -16,6 +16,8 @@ import 'package:immich_mobile/providers/backup/backup_album.provider.dart';
 import 'package:immich_mobile/providers/infrastructure/platform.provider.dart';
 import 'package:immich_mobile/providers/user.provider.dart';
 import 'package:immich_mobile/services/app_settings.service.dart';
+import 'package:immich_mobile/widgets/settings/setting_group_title.dart';
+import 'package:immich_mobile/widgets/settings/setting_list_tile.dart';
 import 'package:immich_mobile/widgets/settings/settings_sub_page_scaffold.dart';
 
 class DriftBackupSettings extends ConsumerWidget {
@@ -25,36 +27,25 @@ class DriftBackupSettings extends ConsumerWidget {
   Widget build(BuildContext context, WidgetRef ref) {
     return SettingsSubPageScaffold(
       settings: [
-        Padding(
-          padding: const EdgeInsets.only(left: 16.0),
-          child: Text(
-            "network_requirements".t(context: context).toUpperCase(),
-            style: context.textTheme.labelSmall?.copyWith(color: context.colorScheme.onSurface.withValues(alpha: 0.7)),
-          ),
+        SettingGroupTitle(
+          title: "network_requirements".t(context: context),
+          icon: Icons.cell_tower,
         ),
         const _UseWifiForUploadVideosButton(),
         const _UseWifiForUploadPhotosButton(),
         if (CurrentPlatform.isAndroid) ...[
           const Divider(),
-          Padding(
-            padding: const EdgeInsets.only(left: 16.0),
-            child: Text(
-              "background_options".t(context: context).toUpperCase(),
-              style: context.textTheme.labelSmall?.copyWith(
-                color: context.colorScheme.onSurface.withValues(alpha: 0.7),
-              ),
-            ),
+          SettingGroupTitle(
+            title: "background_options".t(context: context),
+            icon: Icons.charging_station_rounded,
           ),
           const _BackupOnlyWhenChargingButton(),
           const _BackupDelaySlider(),
         ],
         const Divider(),
-        Padding(
-          padding: const EdgeInsets.only(left: 16.0),
-          child: Text(
-            "backup_albums_sync".t(context: context).toUpperCase(),
-            style: context.textTheme.labelSmall?.copyWith(color: context.colorScheme.onSurface.withValues(alpha: 0.7)),
-          ),
+        SettingGroupTitle(
+          title: "backup_albums_sync".t(context: context),
+          icon: Icons.sync,
         ),
         const _AlbumSyncActionButton(),
       ],
@@ -105,81 +96,67 @@ class _AlbumSyncActionButtonState extends ConsumerState<_AlbumSyncActionButton>
 
   @override
   Widget build(BuildContext context) {
-    return ListView(
-      shrinkWrap: true,
-      children: [
-        StreamBuilder(
-          stream: Store.watch(StoreKey.syncAlbums),
-          initialData: Store.tryGet(StoreKey.syncAlbums) ?? false,
-          builder: (context, snapshot) {
-            final albumSyncEnable = snapshot.data ?? false;
-            return Column(
-              children: [
-                ListTile(
-                  title: Text(
-                    "sync_albums".t(context: context),
-                    style: context.textTheme.titleMedium?.copyWith(color: context.primaryColor),
-                  ),
-                  subtitle: Text(
-                    "sync_upload_album_setting_subtitle".t(context: context),
-                    style: context.textTheme.labelLarge,
-                  ),
-                  trailing: Switch(
-                    value: albumSyncEnable,
-                    onChanged: (bool newValue) async {
-                      await ref.read(appSettingsServiceProvider).setSetting(AppSettingsEnum.syncAlbums, newValue);
+    return Padding(
+      padding: const EdgeInsets.only(left: 8.0),
+      child: ListView(
+        shrinkWrap: true,
+        children: [
+          StreamBuilder(
+            stream: Store.watch(StoreKey.syncAlbums),
+            initialData: Store.tryGet(StoreKey.syncAlbums) ?? false,
+            builder: (context, snapshot) {
+              final albumSyncEnable = snapshot.data ?? false;
+              return Column(
+                children: [
+                  SettingListTile(
+                    title: "sync_albums".t(context: context),
+                    subtitle: "sync_upload_album_setting_subtitle".t(context: context),
+                    trailing: Switch(
+                      value: albumSyncEnable,
+                      onChanged: (bool newValue) async {
+                        await ref.read(appSettingsServiceProvider).setSetting(AppSettingsEnum.syncAlbums, newValue);
 
-                      if (newValue == true) {
-                        await _manageLinkedAlbums();
-                      }
-                    },
+                        if (newValue == true) {
+                          await _manageLinkedAlbums();
+                        }
+                      },
+                    ),
                   ),
-                ),
-                AnimatedSize(
-                  duration: const Duration(milliseconds: 300),
-                  curve: Curves.easeInOut,
-                  child: AnimatedOpacity(
-                    duration: const Duration(milliseconds: 200),
-                    opacity: albumSyncEnable ? 1.0 : 0.0,
-                    child: albumSyncEnable
-                        ? ListTile(
-                            onTap: _manualSyncAlbums,
-                            contentPadding: const EdgeInsets.only(left: 32, right: 16),
-                            title: Text(
-                              "organize_into_albums".t(context: context),
-                              style: context.textTheme.titleSmall?.copyWith(
-                                color: context.colorScheme.onSurface,
-                                fontWeight: FontWeight.normal,
-                              ),
-                            ),
-                            subtitle: Text(
-                              "organize_into_albums_description".t(context: context),
-                              style: context.textTheme.bodyMedium?.copyWith(
-                                color: context.colorScheme.onSurface.withValues(alpha: 0.7),
-                              ),
-                            ),
-                            trailing: isAlbumSyncInProgress
-                                ? const SizedBox(
-                                    width: 32,
-                                    height: 32,
-                                    child: CircularProgressIndicator.adaptive(strokeWidth: 2),
-                                  )
-                                : IconButton(
-                                    onPressed: _manualSyncAlbums,
-                                    icon: const Icon(Icons.sync_rounded),
-                                    color: context.colorScheme.onSurface.withValues(alpha: 0.7),
-                                    iconSize: 20,
-                                    constraints: const BoxConstraints(minWidth: 32, minHeight: 32),
-                                  ),
-                          )
-                        : const SizedBox.shrink(),
+                  AnimatedSize(
+                    duration: const Duration(milliseconds: 300),
+                    curve: Curves.easeInOut,
+                    child: AnimatedOpacity(
+                      duration: const Duration(milliseconds: 200),
+                      opacity: albumSyncEnable ? 1.0 : 0.0,
+                      child: albumSyncEnable
+                          ? SettingListTile(
+                              onTap: _manualSyncAlbums,
+                              contentPadding: const EdgeInsets.only(left: 32, right: 16),
+                              title: "organize_into_albums".t(context: context),
+                              subtitle: "organize_into_albums_description".t(context: context),
+                              trailing: isAlbumSyncInProgress
+                                  ? const SizedBox(
+                                      width: 32,
+                                      height: 32,
+                                      child: CircularProgressIndicator.adaptive(strokeWidth: 2),
+                                    )
+                                  : IconButton(
+                                      onPressed: _manualSyncAlbums,
+                                      icon: const Icon(Icons.sync_rounded),
+                                      color: context.colorScheme.onSurface.withValues(alpha: 0.7),
+                                      iconSize: 20,
+                                      constraints: const BoxConstraints(minWidth: 32, minHeight: 32),
+                                    ),
+                            )
+                          : const SizedBox.shrink(),
+                    ),
                   ),
-                ),
-              ],
-            );
-          },
-        ),
-      ],
+                ],
+              );
+            },
+          ),
+        ],
+      ),
     );
   }
 }
@@ -222,24 +199,24 @@ class _SettingsSwitchTileState extends ConsumerState<_SettingsSwitchTile> {
 
   @override
   Widget build(BuildContext context) {
-    return ListTile(
-      title: Text(
-        widget.titleKey.t(context: context),
-        style: context.textTheme.titleMedium?.copyWith(color: context.primaryColor),
-      ),
-      subtitle: Text(widget.subtitleKey.t(context: context), style: context.textTheme.labelLarge),
-      trailing: StreamBuilder(
-        stream: valueStream,
-        initialData: Store.tryGet(widget.appSettingsEnum.storeKey) ?? widget.appSettingsEnum.defaultValue,
-        builder: (context, snapshot) {
-          final value = snapshot.data ?? false;
-          return Switch(
-            value: value,
-            onChanged: (bool newValue) async {
-              await ref.read(appSettingsServiceProvider).setSetting(widget.appSettingsEnum, newValue);
-            },
-          );
-        },
+    return Padding(
+      padding: const EdgeInsets.only(left: 8.0),
+      child: SettingListTile(
+        title: widget.titleKey.t(context: context),
+        subtitle: widget.subtitleKey.t(context: context),
+        trailing: StreamBuilder(
+          stream: valueStream,
+          initialData: Store.tryGet(widget.appSettingsEnum.storeKey) ?? widget.appSettingsEnum.defaultValue,
+          builder: (context, snapshot) {
+            final value = snapshot.data ?? false;
+            return Switch(
+              value: value,
+              onChanged: (bool newValue) async {
+                await ref.read(appSettingsServiceProvider).setSetting(widget.appSettingsEnum, newValue);
+              },
+            );
+          },
+        ),
       ),
     );
   }
@@ -354,7 +331,7 @@ class _BackupDelaySliderState extends ConsumerState<_BackupDelaySlider> {
             'backup_controller_page_background_delay'.tr(
               namedArgs: {'duration': formatBackupDelaySliderValue(currentValue)},
             ),
-            style: context.textTheme.titleMedium?.copyWith(color: context.primaryColor),
+            style: context.textTheme.bodyLarge?.copyWith(fontWeight: FontWeight.w500),
           ),
         ),
         Slider(

mobile/lib/widgets/settings/beta_sync_settings/entity_count_tile.dart

@@ -34,33 +34,36 @@ class EntityCountTile extends StatelessWidget {
         children: [
           // Icon and Label
           Row(
-            mainAxisAlignment: MainAxisAlignment.start,
+            mainAxisAlignment: MainAxisAlignment.center,
             children: [
-              Icon(icon, color: context.primaryColor),
-              const SizedBox(width: 8),
+              Icon(icon, color: context.primaryColor, size: 14),
+              const SizedBox(width: 4),
               Flexible(
                 child: Text(
                   label,
-                  style: TextStyle(color: context.primaryColor, fontWeight: FontWeight.bold, fontSize: 16),
+                  style: TextStyle(color: context.primaryColor, fontWeight: FontWeight.w500),
                 ),
               ),
             ],
           ),
           // Number
           const Spacer(),
-          RichText(
-            text: TextSpan(
-              style: const TextStyle(fontSize: 18, fontFamily: 'GoogleSansCode', fontWeight: FontWeight.w600),
-              children: [
-                TextSpan(
-                  text: zeroPadding(count, maxDigits),
-                  style: TextStyle(color: context.colorScheme.onSurfaceSecondary.withAlpha(75)),
-                ),
-                TextSpan(
-                  text: count.toString(),
-                  style: TextStyle(color: context.primaryColor),
-                ),
-              ],
+          Padding(
+            padding: const EdgeInsets.only(top: 8.0),
+            child: RichText(
+              text: TextSpan(
+                style: const TextStyle(fontSize: 18, fontFamily: 'GoogleSansCode'),
+                children: [
+                  TextSpan(
+                    text: zeroPadding(count, maxDigits),
+                    style: TextStyle(color: context.colorScheme.onSurfaceSecondary.withAlpha(75)),
+                  ),
+                  TextSpan(
+                    text: count.toString(),
+                    style: TextStyle(color: context.colorScheme.onSurface),
+                  ),
+                ],
+              ),
             ),
           ),
         ],

mobile/lib/widgets/settings/beta_sync_settings/sync_status_and_actions.dart

@@ -16,6 +16,8 @@ import 'package:immich_mobile/providers/infrastructure/trash_sync.provider.dart'
 import 'package:immich_mobile/providers/sync_status.provider.dart';
 import 'package:immich_mobile/services/app_settings.service.dart';
 import 'package:immich_mobile/widgets/settings/beta_sync_settings/entity_count_tile.dart';
+import 'package:immich_mobile/widgets/settings/setting_group_title.dart';
+import 'package:immich_mobile/widgets/settings/setting_list_tile.dart';
 import 'package:path/path.dart' as path;
 import 'package:path_provider/path_provider.dart';
 import 'package:share_plus/share_plus.dart';
@@ -112,48 +114,39 @@ class SyncStatusAndActions extends HookConsumerWidget {
       padding: const EdgeInsets.only(top: 16, bottom: 96),
       children: [
         const _SyncStatsCounts(),
-        const Divider(height: 1, indent: 16, endIndent: 16),
-        const SizedBox(height: 24),
-        _SectionHeaderText(text: "jobs".t(context: context)),
-        ListTile(
-          title: Text(
-            "sync_local".t(context: context),
-            style: const TextStyle(fontWeight: FontWeight.w500),
-          ),
-          subtitle: Text("tap_to_run_job".t(context: context)),
+        const Divider(height: 10),
+        const SizedBox(height: 16),
+        SettingGroupTitle(title: "jobs".t(context: context)),
+        SettingListTile(
+          title: "sync_local".t(context: context),
+          subtitle: "tap_to_run_job".t(context: context),
           leading: const Icon(Icons.sync),
           trailing: _SyncStatusIcon(status: ref.watch(syncStatusProvider).localSyncStatus),
           onTap: () {
             ref.read(backgroundSyncProvider).syncLocal(full: true);
           },
         ),
-        ListTile(
-          title: Text(
-            "sync_remote".t(context: context),
-            style: const TextStyle(fontWeight: FontWeight.w500),
-          ),
-          subtitle: Text("tap_to_run_job".t(context: context)),
+        SettingListTile(
+          title: "sync_remote".t(context: context),
+          subtitle: "tap_to_run_job".t(context: context),
           leading: const Icon(Icons.cloud_sync),
           trailing: _SyncStatusIcon(status: ref.watch(syncStatusProvider).remoteSyncStatus),
           onTap: () {
             ref.read(backgroundSyncProvider).syncRemote();
           },
         ),
-        ListTile(
-          title: Text(
-            "hash_asset".t(context: context),
-            style: const TextStyle(fontWeight: FontWeight.w500),
-          ),
+        SettingListTile(
+          title: "hash_asset".t(context: context),
           leading: const Icon(Icons.tag),
-          subtitle: Text("tap_to_run_job".t(context: context)),
+          subtitle: "tap_to_run_job".t(context: context),
           trailing: _SyncStatusIcon(status: ref.watch(syncStatusProvider).hashJobStatus),
           onTap: () {
             ref.read(backgroundSyncProvider).hashAssets();
           },
         ),
-        const Divider(height: 1, indent: 16, endIndent: 16),
-        const SizedBox(height: 24),
-        _SectionHeaderText(text: "actions".t(context: context)),
+        const Divider(height: 1),
+        const SizedBox(height: 16),
+        SettingGroupTitle(title: "actions".t(context: context)),
         ListTile(
           title: Text(
             "clear_file_cache".t(context: context),
@@ -202,26 +195,6 @@ class _SyncStatusIcon extends StatelessWidget {
   }
 }
 
-class _SectionHeaderText extends StatelessWidget {
-  final String text;
-
-  const _SectionHeaderText({required this.text});
-
-  @override
-  Widget build(BuildContext context) {
-    return Padding(
-      padding: const EdgeInsets.only(left: 16.0),
-      child: Text(
-        text.toUpperCase(),
-        style: context.textTheme.labelLarge?.copyWith(
-          fontWeight: FontWeight.w500,
-          color: context.colorScheme.onSurface.withAlpha(200),
-        ),
-      ),
-    );
-  }
-}
-
 class _SyncStatsCounts extends ConsumerWidget {
   const _SyncStatsCounts();
 
@@ -279,9 +252,9 @@ class _SyncStatsCounts extends ConsumerWidget {
           mainAxisAlignment: MainAxisAlignment.start,
           crossAxisAlignment: CrossAxisAlignment.start,
           children: [
-            _SectionHeaderText(text: "assets".t(context: context)),
+            SettingGroupTitle(title: "assets".t(context: context)),
             Padding(
-              padding: const EdgeInsets.fromLTRB(16, 8, 16, 16),
+              padding: const EdgeInsets.fromLTRB(16, 0, 16, 16),
               // 1. Wrap in IntrinsicHeight
               child: IntrinsicHeight(
                 child: Flex(
@@ -309,9 +282,9 @@ class _SyncStatsCounts extends ConsumerWidget {
                 ),
               ),
             ),
-            _SectionHeaderText(text: "albums".t(context: context)),
+            SettingGroupTitle(title: "albums".t(context: context)),
             Padding(
-              padding: const EdgeInsets.fromLTRB(16, 8, 16, 16),
+              padding: const EdgeInsets.fromLTRB(16, 0, 16, 16),
               child: IntrinsicHeight(
                 child: Flex(
                   direction: Axis.horizontal,
@@ -337,9 +310,9 @@ class _SyncStatsCounts extends ConsumerWidget {
                 ),
               ),
             ),
-            _SectionHeaderText(text: "other".t(context: context)),
+            SettingGroupTitle(title: "other".t(context: context)),
             Padding(
-              padding: const EdgeInsets.fromLTRB(16, 8, 16, 16),
+              padding: const EdgeInsets.fromLTRB(16, 0, 16, 16),
               child: IntrinsicHeight(
                 child: Flex(
                   direction: Axis.horizontal,
@@ -368,7 +341,7 @@ class _SyncStatsCounts extends ConsumerWidget {
             // To be removed once the experimental feature is stable
             if (CurrentPlatform.isAndroid &&
                 appSettingsService.getSetting<bool>(AppSettingsEnum.manageLocalMediaAndroid)) ...[
-              _SectionHeaderText(text: "trash".t(context: context)),
+              SettingGroupTitle(title: "trash".t(context: context)),
               Consumer(
                 builder: (context, ref, _) {
                   final counts = ref.watch(trashedAssetsCountProvider);

mobile/lib/widgets/settings/beta_timeline_list_tile.dart

@@ -9,6 +9,7 @@ import 'package:immich_mobile/providers/app_settings.provider.dart';
 import 'package:immich_mobile/providers/auth.provider.dart';
 import 'package:immich_mobile/routing/router.dart';
 import 'package:immich_mobile/services/app_settings.service.dart';
+import 'package:immich_mobile/widgets/settings/setting_list_tile.dart';
 
 class BetaTimelineListTile extends ConsumerWidget {
   const BetaTimelineListTile({super.key});
@@ -56,8 +57,8 @@ class BetaTimelineListTile extends ConsumerWidget {
 
     return Padding(
       padding: const EdgeInsets.only(left: 4.0),
-      child: ListTile(
-        title: Text("new_timeline".t(context: context)),
+      child: SettingListTile(
+        title: "new_timeline".t(context: context),
         trailing: Switch.adaptive(
           value: betaTimelineValue,
           onChanged: onSwitchChanged,

mobile/lib/widgets/settings/free_up_space_settings.dart

@@ -142,7 +142,9 @@ class _FreeUpSpaceSettingsState extends ConsumerState<FreeUpSpaceSettings> {
     final state = ref.watch(cleanupProvider);
     final hasDate = state.selectedDate != null;
     final hasAssets = _hasScanned && state.assetsToDelete.isNotEmpty;
-
+    final subtitleStyle = context.textTheme.bodyMedium!.copyWith(
+      color: context.textTheme.bodyMedium!.color!.withAlpha(215),
+    );
     StepStyle styleForState(StepState stepState, {bool isDestructive = false}) {
       switch (stepState) {
         case StepState.complete:
@@ -214,10 +216,7 @@ class _FreeUpSpaceSettingsState extends ConsumerState<FreeUpSpaceSettings> {
                   borderRadius: const BorderRadius.all(Radius.circular(12)),
                   border: Border.all(color: context.primaryColor.withValues(alpha: 0.25)),
                 ),
-                child: Text(
-                  'free_up_space_description'.t(context: context),
-                  style: context.textTheme.labelLarge?.copyWith(fontSize: 15),
-                ),
+                child: Text('free_up_space_description'.t(context: context), style: context.textTheme.bodyMedium),
               ),
             ),
 
@@ -256,7 +255,7 @@ class _FreeUpSpaceSettingsState extends ConsumerState<FreeUpSpaceSettings> {
                   content: Column(
                     crossAxisAlignment: CrossAxisAlignment.stretch,
                     children: [
-                      Text('cutoff_date_description'.t(context: context), style: context.textTheme.labelLarge),
+                      Text('cutoff_date_description'.t(context: context), style: subtitleStyle),
                       const SizedBox(height: 16),
                       GridView.count(
                         shrinkWrap: true,
@@ -352,7 +351,7 @@ class _FreeUpSpaceSettingsState extends ConsumerState<FreeUpSpaceSettings> {
                   content: Column(
                     crossAxisAlignment: CrossAxisAlignment.stretch,
                     children: [
-                      Text('cleanup_filter_description'.t(context: context), style: context.textTheme.labelLarge),
+                      Text('cleanup_filter_description'.t(context: context), style: subtitleStyle),
                       const SizedBox(height: 16),
                       SegmentedButton<AssetFilterType>(
                         segments: [
@@ -381,10 +380,15 @@ class _FreeUpSpaceSettingsState extends ConsumerState<FreeUpSpaceSettings> {
                       const SizedBox(height: 16),
                       SwitchListTile(
                         contentPadding: EdgeInsets.zero,
-                        title: Text('keep_favorites'.t(context: context), style: context.textTheme.titleSmall),
+                        title: Text(
+                          'keep_favorites'.t(context: context),
+                          style: context.textTheme.bodyLarge!.copyWith(fontWeight: FontWeight.w500, height: 1.5),
+                        ),
                         subtitle: Text(
                           'keep_favorites_description'.t(context: context),
-                          style: context.textTheme.labelLarge,
+                          style: context.textTheme.bodyMedium!.copyWith(
+                            color: context.textTheme.bodyMedium!.color!.withAlpha(215),
+                          ),
                         ),
                         value: state.keepFavorites,
                         onChanged: (value) {
@@ -435,10 +439,7 @@ class _FreeUpSpaceSettingsState extends ConsumerState<FreeUpSpaceSettings> {
                       : null,
                   content: Column(
                     children: [
-                      Text(
-                        'cleanup_step3_description'.t(context: context),
-                        style: context.textTheme.labelLarge?.copyWith(fontSize: 15),
-                      ),
+                      Text('cleanup_step3_description'.t(context: context), style: subtitleStyle),
                       if (CurrentPlatform.isIOS) ...[
                         const SizedBox(height: 12),
                         Container(

mobile/lib/widgets/settings/networking_settings/endpoint_input.dart

@@ -117,7 +117,7 @@ class EndpointInputState extends ConsumerState<EndpointInput> {
           autovalidateMode: AutovalidateMode.onUserInteraction,
           validator: validateUrl,
           keyboardType: TextInputType.url,
-          style: const TextStyle(fontFamily: 'GoogleSansCode', fontWeight: FontWeight.w600, fontSize: 14),
+          style: const TextStyle(fontFamily: 'GoogleSansCode', fontSize: 14),
           decoration: InputDecoration(
             hintText: 'http(s)://immich.domain.com',
             contentPadding: const EdgeInsets.all(16),

mobile/lib/widgets/settings/networking_settings/external_network_preference.dart

@@ -1,12 +1,12 @@
 import 'dart:convert';
 
-import 'package:easy_localization/easy_localization.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_hooks/flutter_hooks.dart' hide Store;
 import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:immich_mobile/domain/models/store.model.dart';
 import 'package:immich_mobile/entities/store.entity.dart';
 import 'package:immich_mobile/extensions/build_context_extensions.dart';
+import 'package:immich_mobile/extensions/translate_extensions.dart';
 import 'package:immich_mobile/models/auth/auxilary_endpoint.model.dart';
 import 'package:immich_mobile/widgets/settings/networking_settings/endpoint_input.dart';
 
@@ -103,7 +103,7 @@ class ExternalNetworkPreference extends HookConsumerWidget {
               children: [
                 Padding(
                   padding: const EdgeInsets.symmetric(vertical: 4.0, horizontal: 24),
-                  child: Text("external_network_sheet_info".tr(), style: context.textTheme.bodyMedium),
+                  child: Text("external_network_sheet_info".t(context: context), style: context.textTheme.bodyMedium),
                 ),
                 const SizedBox(height: 4),
                 Divider(color: context.colorScheme.surfaceContainerHighest),
@@ -135,7 +135,7 @@ class ExternalNetworkPreference extends HookConsumerWidget {
                     height: 48,
                     child: OutlinedButton.icon(
                       icon: const Icon(Icons.add),
-                      label: Text('add_endpoint'.tr().toUpperCase()),
+                      label: Text('add_endpoint'.t(context: context)),
                       onPressed: enabled
                           ? () {
                               entries.value = [

mobile/lib/widgets/settings/networking_settings/local_network_preference.dart

@@ -5,6 +5,7 @@ import 'package:flutter/material.dart';
 import 'package:flutter_hooks/flutter_hooks.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:immich_mobile/extensions/build_context_extensions.dart';
+import 'package:immich_mobile/extensions/translate_extensions.dart';
 import 'package:immich_mobile/providers/auth.provider.dart';
 import 'package:immich_mobile/providers/network.provider.dart';
 
@@ -167,13 +168,12 @@ class LocalNetworkPreference extends HookConsumerWidget {
                       enabled: enabled,
                       contentPadding: const EdgeInsets.only(left: 24, right: 8),
                       leading: const Icon(Icons.lan_rounded),
-                      title: Text("server_endpoint".tr()),
+                      title: Text("server_endpoint".t(context: context)),
                       subtitle: localEndpointText.value.isEmpty
                           ? const Text("http://local-ip:2283")
                           : Text(
                               localEndpointText.value,
                               style: context.textTheme.labelLarge?.copyWith(
-                                fontWeight: FontWeight.bold,
                                 color: enabled ? context.primaryColor : context.colorScheme.onSurface.withAlpha(100),
                                 fontFamily: 'GoogleSansCode',
                               ),
@@ -190,7 +190,7 @@ class LocalNetworkPreference extends HookConsumerWidget {
                         height: 48,
                         child: OutlinedButton.icon(
                           icon: const Icon(Icons.wifi_find_rounded),
-                          label: Text('use_current_connection'.tr().toUpperCase()),
+                          label: Text('use_current_connection'.t(context: context)),
                           onPressed: enabled ? autofillCurrentNetwork : null,
                         ),
                       ),

mobile/lib/widgets/settings/networking_settings/networking_settings.dart

@@ -3,6 +3,7 @@ import 'package:flutter/material.dart';
 import 'package:flutter_hooks/flutter_hooks.dart' hide Store;
 import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:immich_mobile/extensions/build_context_extensions.dart';
+import 'package:immich_mobile/extensions/translate_extensions.dart';
 import 'package:immich_mobile/models/auth/auxilary_endpoint.model.dart';
 import 'package:immich_mobile/providers/network.provider.dart';
 import 'package:immich_mobile/services/app_settings.service.dart';
@@ -10,6 +11,7 @@ import 'package:immich_mobile/utils/hooks/app_settings_update_hook.dart';
 import 'package:immich_mobile/utils/url_helper.dart';
 import 'package:immich_mobile/widgets/settings/networking_settings/external_network_preference.dart';
 import 'package:immich_mobile/widgets/settings/networking_settings/local_network_preference.dart';
+import 'package:immich_mobile/widgets/settings/setting_group_title.dart';
 import 'package:immich_mobile/widgets/settings/settings_switch_list_tile.dart';
 
 class NetworkingSettings extends HookConsumerWidget {
@@ -87,12 +89,10 @@ class NetworkingSettings extends HookConsumerWidget {
     return ListView(
       padding: const EdgeInsets.only(bottom: 96),
       children: <Widget>[
-        Padding(
-          padding: const EdgeInsets.only(top: 8, left: 16, bottom: 8),
-          child: NetworkPreferenceTitle(
-            title: "current_server_address".tr().toUpperCase(),
-            icon: (currentEndpoint?.startsWith('https') ?? false) ? Icons.https_outlined : Icons.http_outlined,
-          ),
+        const SizedBox(height: 8),
+        SettingGroupTitle(
+          title: "current_server_address".t(context: context),
+          icon: (currentEndpoint?.startsWith('https') ?? false) ? Icons.https_outlined : Icons.http_outlined,
         ),
         Padding(
           padding: const EdgeInsets.symmetric(horizontal: 8),
@@ -108,12 +108,7 @@ class NetworkingSettings extends HookConsumerWidget {
                   : const Icon(Icons.circle_outlined),
               title: Text(
                 currentEndpoint ?? "--",
-                style: TextStyle(
-                  fontSize: 16,
-                  fontFamily: 'GoogleSansCode',
-                  fontWeight: FontWeight.bold,
-                  color: context.primaryColor,
-                ),
+                style: TextStyle(fontSize: 14, fontFamily: 'GoogleSansCode', color: context.primaryColor),
               ),
             ),
           ),
@@ -128,14 +123,16 @@ class NetworkingSettings extends HookConsumerWidget {
           title: "automatic_endpoint_switching_title".tr(),
           subtitle: "automatic_endpoint_switching_subtitle".tr(),
         ),
-        Padding(
-          padding: const EdgeInsets.only(top: 8, left: 16, bottom: 16),
-          child: NetworkPreferenceTitle(title: "local_network".tr().toUpperCase(), icon: Icons.home_outlined),
+        const SizedBox(height: 8),
+        SettingGroupTitle(
+          title: "local_network".t(context: context),
+          icon: Icons.home_outlined,
         ),
         LocalNetworkPreference(enabled: featureEnabled.value),
-        Padding(
-          padding: const EdgeInsets.only(top: 32, left: 16, bottom: 16),
-          child: NetworkPreferenceTitle(title: "external_network".tr().toUpperCase(), icon: Icons.dns_outlined),
+        const SizedBox(height: 16),
+        SettingGroupTitle(
+          title: "external_network".t(context: context),
+          icon: Icons.dns_outlined,
         ),
         ExternalNetworkPreference(enabled: featureEnabled.value),
       ],
@@ -143,30 +140,6 @@ class NetworkingSettings extends HookConsumerWidget {
   }
 }
 
-class NetworkPreferenceTitle extends StatelessWidget {
-  const NetworkPreferenceTitle({super.key, required this.icon, required this.title});
-
-  final IconData icon;
-  final String title;
-
-  @override
-  Widget build(BuildContext context) {
-    return Row(
-      children: [
-        Icon(icon, color: context.colorScheme.onSurface.withAlpha(150)),
-        const SizedBox(width: 8),
-        Text(
-          title,
-          style: context.textTheme.displaySmall?.copyWith(
-            color: context.colorScheme.onSurface.withAlpha(200),
-            fontWeight: FontWeight.w500,
-          ),
-        ),
-      ],
-    );
-  }
-}
-
 class NetworkStatusIcon extends StatelessWidget {
   const NetworkStatusIcon({super.key, required this.status, this.enabled = true}) : super();
 
@@ -175,10 +148,10 @@ class NetworkStatusIcon extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return AnimatedSwitcher(duration: const Duration(milliseconds: 200), child: _buildIcon(context));
+    return AnimatedSwitcher(duration: const Duration(milliseconds: 200), child: buildIcon(context));
   }
 
-  Widget _buildIcon(BuildContext context) => switch (status) {
+  Widget buildIcon(BuildContext context) => switch (status) {
     AuxCheckStatus.loading => Padding(
       padding: const EdgeInsets.only(left: 4.0),
       child: SizedBox(

mobile/lib/widgets/settings/preference_settings/haptic_setting.dart

@@ -1,9 +1,9 @@
-import 'package:easy_localization/easy_localization.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_hooks/flutter_hooks.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/extensions/translate_extensions.dart';
 import 'package:immich_mobile/services/app_settings.service.dart';
-import 'package:immich_mobile/widgets/settings/settings_sub_title.dart';
+import 'package:immich_mobile/widgets/settings/setting_group_title.dart';
 import 'package:immich_mobile/widgets/settings/settings_switch_list_tile.dart';
 import 'package:immich_mobile/utils/hooks/app_settings_update_hook.dart';
 
@@ -22,10 +22,13 @@ class HapticSetting extends HookConsumerWidget {
     return Column(
       crossAxisAlignment: CrossAxisAlignment.start,
       children: [
-        SettingsSubTitle(title: "haptic_feedback_title".tr()),
+        SettingGroupTitle(
+          title: "haptic_feedback_title".t(context: context),
+          icon: Icons.vibration_outlined,
+        ),
         SettingsSwitchListTile(
           valueNotifier: isHapticFeedbackEnabled,
-          title: 'haptic_feedback_switch'.tr(),
+          title: 'enabled'.t(context: context),
           onChanged: onHapticFeedbackChange,
         ),
       ],

mobile/lib/widgets/settings/preference_settings/theme_setting.dart

@@ -1,12 +1,12 @@
-import 'package:easy_localization/easy_localization.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_hooks/flutter_hooks.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:immich_mobile/extensions/build_context_extensions.dart';
+import 'package:immich_mobile/extensions/translate_extensions.dart';
 import 'package:immich_mobile/providers/theme.provider.dart';
 import 'package:immich_mobile/services/app_settings.service.dart';
 import 'package:immich_mobile/widgets/settings/preference_settings/primary_color_setting.dart';
-import 'package:immich_mobile/widgets/settings/settings_sub_title.dart';
+import 'package:immich_mobile/widgets/settings/setting_group_title.dart';
 import 'package:immich_mobile/widgets/settings/settings_switch_list_tile.dart';
 import 'package:immich_mobile/utils/hooks/app_settings_update_hook.dart';
 
@@ -74,23 +74,26 @@ class ThemeSetting extends HookConsumerWidget {
     return Column(
       crossAxisAlignment: CrossAxisAlignment.start,
       children: [
-        SettingsSubTitle(title: "theme".tr()),
+        SettingGroupTitle(
+          title: "theme".t(context: context),
+          icon: Icons.color_lens_outlined,
+        ),
         SettingsSwitchListTile(
           valueNotifier: isSystemTheme,
-          title: 'theme_setting_system_theme_switch'.tr(),
+          title: 'theme_setting_system_theme_switch'.t(context: context),
           onChanged: onSystemThemeChange,
         ),
         if (currentTheme.value != ThemeMode.system)
           SettingsSwitchListTile(
             valueNotifier: isDarkTheme,
-            title: 'map_settings_dark_mode'.tr(),
+            title: 'map_settings_dark_mode'.t(context: context),
             onChanged: onThemeChange,
           ),
         const PrimaryColorSetting(),
         SettingsSwitchListTile(
           valueNotifier: applyThemeToBackgroundProvider,
-          title: "theme_setting_colorful_interface_title".tr(),
-          subtitle: 'theme_setting_colorful_interface_subtitle'.tr(),
+          title: "theme_setting_colorful_interface_title".t(context: context),
+          subtitle: 'theme_setting_colorful_interface_subtitle'.t(context: context),
           onChanged: onSurfaceColorSettingChange,
         ),
       ],

mobile/lib/widgets/settings/setting_group_title.dart

@@ -0,0 +1,39 @@
+import 'package:flutter/widgets.dart';
+import 'package:immich_mobile/extensions/build_context_extensions.dart';
+import 'package:immich_mobile/extensions/theme_extensions.dart';
+
+class SettingGroupTitle extends StatelessWidget {
+  final String title;
+  final String? subtitle;
+  final IconData? icon;
+  final EdgeInsetsGeometry? contentPadding;
+
+  const SettingGroupTitle({super.key, required this.title, this.icon, this.subtitle, this.contentPadding});
+
+  @override
+  Widget build(BuildContext context) {
+    return Padding(
+      padding: contentPadding ?? const EdgeInsets.only(left: 20.0, right: 20.0, bottom: 8.0),
+      child: Column(
+        children: [
+          Row(
+            children: [
+              if (icon != null) ...[
+                Icon(icon, color: context.colorScheme.onSurfaceSecondary, size: 20),
+                const SizedBox(width: 8),
+              ],
+              Text(title, style: context.textTheme.labelLarge?.copyWith(color: context.colorScheme.onSurfaceSecondary)),
+            ],
+          ),
+          if (subtitle != null) ...[
+            const SizedBox(height: 8),
+            Text(
+              subtitle!,
+              style: context.textTheme.bodyMedium!.copyWith(color: context.colorScheme.onSurface.withAlpha(200)),
+            ),
+          ],
+        ],
+      ),
+    );
+  }
+}

mobile/lib/widgets/settings/setting_list_tile.dart

@@ -0,0 +1,38 @@
+import 'package:flutter/material.dart';
+import 'package:immich_mobile/extensions/build_context_extensions.dart';
+
+class SettingListTile extends StatelessWidget {
+  final String title;
+  final String? subtitle;
+  final Widget? leading;
+  final Widget? trailing;
+  final VoidCallback? onTap;
+  final EdgeInsetsGeometry? contentPadding;
+
+  const SettingListTile({
+    required this.title,
+    this.subtitle,
+    this.leading,
+    this.trailing,
+    this.onTap,
+    this.contentPadding,
+    super.key,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return ListTile(
+      title: Text(title, style: context.textTheme.bodyLarge!.copyWith(fontWeight: FontWeight.w500, height: 1.5)),
+      subtitle: subtitle != null
+          ? Text(
+              subtitle!,
+              style: context.textTheme.bodyMedium!.copyWith(color: context.textTheme.bodyMedium!.color!.withAlpha(215)),
+            )
+          : null,
+      leading: leading,
+      trailing: trailing,
+      onTap: onTap,
+      contentPadding: contentPadding,
+    );
+  }
+}

mobile/lib/widgets/settings/settings_card.dart

@@ -36,11 +36,8 @@ class SettingsCard extends StatelessWidget {
             padding: const EdgeInsets.all(16.0),
             child: Icon(icon, color: context.primaryColor),
           ),
-          title: Text(
-            title,
-            style: context.textTheme.titleMedium!.copyWith(fontWeight: FontWeight.w600, color: context.primaryColor),
-          ),
-          subtitle: Text(subtitle, style: context.textTheme.labelLarge),
+          title: Text(title, style: context.textTheme.titleMedium!.copyWith(color: context.primaryColor)),
+          subtitle: Text(subtitle, style: context.textTheme.bodyMedium),
           onTap: () => context.pushRoute(settingRoute),
         ),
       ),

mobile/lib/widgets/settings/settings_sub_page_scaffold.dart

@@ -9,13 +9,11 @@ class SettingsSubPageScaffold extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return ListView.separated(
-      padding: const EdgeInsets.symmetric(vertical: 20),
+      padding: const EdgeInsets.symmetric(vertical: 16),
       itemCount: settings.length,
       itemBuilder: (ctx, index) => settings[index],
       separatorBuilder: (context, index) => showDivider
-          ? const Column(
-              children: [SizedBox(height: 5), Divider(height: 10, indent: 15, endIndent: 15), SizedBox(height: 15)],
-            )
+          ? const Column(children: [SizedBox(height: 5), Divider(height: 10), SizedBox(height: 15)])
           : const SizedBox(height: 10),
     );
   }

open-api/typescript-sdk/package.json

@@ -19,7 +19,7 @@
     "@oazapfts/runtime": "^1.0.2"
   },
   "devDependencies": {
-    "@types/node": "^24.10.4",
+    "@types/node": "^24.10.8",
     "typescript": "^5.3.3"
   },
   "repository": {

package.json

@@ -3,7 +3,7 @@
   "version": "0.0.1",
   "description": "Monorepo for Immich",
   "private": true,
-  "packageManager": "pnpm@10.27.0+sha512.72d699da16b1179c14ba9e64dc71c9a40988cbdc65c264cb0e489db7de917f20dcf4d64d8723625f2969ba52d4b7e2a1170682d9ac2a5dcaeaab732b7e16f04a",
+  "packageManager": "pnpm@10.28.0+sha512.05df71d1421f21399e053fde567cea34d446fa02c76571441bfc1c7956e98e363088982d940465fd34480d4d90a0668bc12362f8aa88000a64e83d0b0e47be48",
   "engines": {
     "pnpm": ">=10.0.0"
   }

server/package.json

@@ -45,14 +45,14 @@
     "@nestjs/websockets": "^11.0.4",
     "@opentelemetry/api": "^1.9.0",
     "@opentelemetry/context-async-hooks": "^2.0.0",
-    "@opentelemetry/exporter-prometheus": "^0.208.0",
-    "@opentelemetry/instrumentation-http": "^0.208.0",
-    "@opentelemetry/instrumentation-ioredis": "^0.57.0",
-    "@opentelemetry/instrumentation-nestjs-core": "^0.55.0",
-    "@opentelemetry/instrumentation-pg": "^0.61.0",
+    "@opentelemetry/exporter-prometheus": "^0.210.0",
+    "@opentelemetry/instrumentation-http": "^0.210.0",
+    "@opentelemetry/instrumentation-ioredis": "^0.58.0",
+    "@opentelemetry/instrumentation-nestjs-core": "^0.56.0",
+    "@opentelemetry/instrumentation-pg": "^0.62.0",
     "@opentelemetry/resources": "^2.0.1",
     "@opentelemetry/sdk-metrics": "^2.0.1",
-    "@opentelemetry/sdk-node": "^0.208.0",
+    "@opentelemetry/sdk-node": "^0.210.0",
     "@opentelemetry/semantic-conventions": "^1.34.0",
     "@react-email/components": "^0.5.0",
     "@react-email/render": "^1.1.2",
@@ -135,7 +135,7 @@
     "@types/luxon": "^3.6.2",
     "@types/mock-fs": "^4.13.1",
     "@types/multer": "^2.0.0",
-    "@types/node": "^24.10.4",
+    "@types/node": "^24.10.8",
     "@types/nodemailer": "^7.0.0",
     "@types/picomatch": "^4.0.0",
     "@types/pngjs": "^6.0.5",

web/package.json

@@ -71,7 +71,7 @@
     "@sveltejs/adapter-static": "^3.0.8",
     "@sveltejs/enhanced-img": "^0.9.0",
     "@sveltejs/kit": "^2.27.1",
-    "@sveltejs/vite-plugin-svelte": "6.2.3",
+    "@sveltejs/vite-plugin-svelte": "6.2.4",
     "@tailwindcss/vite": "^4.1.7",
     "@testing-library/jest-dom": "^6.4.2",
     "@testing-library/svelte": "^5.2.8",

web/src/lib/actions/image-loader.svelte.ts

@@ -0,0 +1,196 @@
+import { cancelImageUrl } from '$lib/utils/sw-messaging';
+import type { ClassValue } from 'svelte/elements';
+
+/**
+ * Converts a ClassValue to a string suitable for className assignment.
+ * Handles strings, arrays, and objects similar to how clsx works.
+ */
+function classValueToString(value: ClassValue | undefined): string {
+  if (!value) {
+    return '';
+  }
+  if (typeof value === 'string') {
+    return value;
+  }
+  if (Array.isArray(value)) {
+    return value
+      .map((v) => classValueToString(v))
+      .filter(Boolean)
+      .join(' ');
+  }
+  // Object/dictionary case
+  return Object.entries(value)
+    .filter(([, v]) => v)
+    .map(([k]) => k)
+    .join(' ');
+}
+
+export interface ImageLoaderProperties {
+  imgClass?: ClassValue;
+  alt?: string;
+  draggable?: boolean;
+  role?: string;
+  style?: string;
+  title?: string | null;
+  loading?: 'lazy' | 'eager';
+  dataAttributes?: Record<string, string>;
+}
+export interface ImageSourceProperty {
+  src: string | undefined;
+}
+export interface ImageLoaderCallbacks {
+  onStart?: () => void;
+  onLoad?: () => void;
+  onError?: (error: Error) => void;
+  onElementCreated?: (element: HTMLImageElement) => void;
+}
+
+const updateImageAttributes = (img: HTMLImageElement, params: ImageLoaderProperties) => {
+  if (params.alt !== undefined) {
+    img.alt = params.alt;
+  }
+  if (params.draggable !== undefined) {
+    img.draggable = params.draggable;
+  }
+  if (params.imgClass) {
+    img.className = classValueToString(params.imgClass);
+  }
+  if (params.role) {
+    img.role = params.role;
+  }
+  if (params.style !== undefined) {
+    img.setAttribute('style', params.style);
+  }
+  if (params.title !== undefined && params.title !== null) {
+    img.title = params.title;
+  }
+  if (params.loading !== undefined) {
+    img.loading = params.loading;
+  }
+  if (params.dataAttributes) {
+    for (const [key, value] of Object.entries(params.dataAttributes)) {
+      img.setAttribute(key, value);
+    }
+  }
+};
+
+const cleanupImageElement = (
+  imgElement: HTMLImageElement,
+  currentSrc: string | undefined,
+  handleLoad: () => void,
+  handleError: () => void,
+) => {
+  cancelImageUrl(currentSrc);
+  if (imgElement) {
+    imgElement.removeEventListener('load', handleLoad);
+    imgElement.removeEventListener('error', handleError);
+    imgElement.remove();
+  }
+};
+
+const createImageElement = (
+  src: string | undefined,
+  properties: ImageLoaderProperties,
+  onLoad: () => void,
+  onError: () => void,
+  onStart?: () => void,
+  onElementCreated?: (imgElement: HTMLImageElement) => void,
+) => {
+  if (!src) {
+    return undefined;
+  }
+  const img = document.createElement('img');
+  updateImageAttributes(img, properties);
+
+  img.addEventListener('load', onLoad);
+  img.addEventListener('error', onError);
+
+  onStart?.();
+
+  if (src) {
+    img.src = src;
+    onElementCreated?.(img);
+  }
+
+  return img;
+};
+
+export function loadImage(
+  src: string,
+  properties: ImageLoaderProperties,
+  onLoad: () => void,
+  onError: () => void,
+  onStart?: () => void,
+) {
+  const img = createImageElement(src, properties, onLoad, onError, onStart);
+  if (!img) {
+    return () => void 0;
+  }
+  return () => cleanupImageElement(img, src, onLoad, onError);
+}
+
+export type LoadImageFunction = typeof loadImage;
+
+/**
+ * 1. Creates and appends an <img> element to the parent
+ * 2. Coordinates with service worker before src triggers fetch
+ * 3. Adds load/error listeners
+ * 4. Cancels SW request when element is removed from DOM
+ */
+export function imageLoader(
+  node: HTMLElement,
+  params: ImageSourceProperty & ImageLoaderProperties & ImageLoaderCallbacks,
+) {
+  let currentSrc = params.src;
+  let currentCallbacks = params;
+  let imgElement: HTMLImageElement | undefined = undefined;
+
+  const handleLoad = () => {
+    currentCallbacks.onLoad?.();
+  };
+
+  const handleError = () => {
+    currentCallbacks.onError?.(new Error(`Failed to load image: ${currentSrc}`));
+  };
+
+  const handleElementCreated = (img: HTMLImageElement) => {
+    if (img) {
+      node.append(img);
+      currentCallbacks.onElementCreated?.(img);
+    }
+  };
+
+  const createImage = () => {
+    imgElement = createImageElement(currentSrc, params, handleLoad, handleError, params.onStart, handleElementCreated);
+  };
+  createImage();
+
+  return {
+    update(newParams: ImageSourceProperty & ImageLoaderProperties & ImageLoaderCallbacks) {
+      // If src changed, recreate the image element
+      if (newParams.src !== currentSrc) {
+        cleanupImageElement(imgElement!, currentSrc, handleLoad, handleError);
+
+        currentSrc = newParams.src;
+        currentCallbacks = newParams;
+
+        createImage();
+        return;
+      }
+
+      currentCallbacks = newParams;
+
+      if (!imgElement) {
+        return;
+      }
+
+      updateImageAttributes(imgElement, newParams);
+    },
+
+    destroy() {
+      if (imgElement) {
+        cleanupImageElement(imgElement, currentSrc, handleLoad, handleError);
+      }
+    },
+  };
+}

web/src/lib/actions/zoom-image.ts

@@ -1,48 +1,42 @@
 import { photoZoomState } from '$lib/stores/zoom-image.store';
-import { useZoomImageWheel } from '@zoom-image/svelte';
+import { createZoomImageWheel } from '@zoom-image/core';
 import { get } from 'svelte/store';
 
 export const zoomImageAction = (node: HTMLElement, options?: { disabled?: boolean }) => {
-  const { createZoomImage, zoomImageState, setZoomImageState } = useZoomImageWheel();
-
-  createZoomImage(node, {
+  const state = get(photoZoomState);
+  const zoomInstance = createZoomImageWheel(node, {
     maxZoom: 10,
+    initialState: state,
   });
 
-  const state = get(photoZoomState);
-  if (state) {
-    setZoomImageState(state);
-  }
+  const unsubscribes = [
+    photoZoomState.subscribe((state) => zoomInstance.setState(state)),
+    zoomInstance.subscribe(({ state }) => {
+      photoZoomState.set(state);
+    }),
+  ];
 
-  // Store original event handlers so we can prevent them when disabled
-  const wheelHandler = (event: WheelEvent) => {
+  const stopIfDisabled = (event: Event) => {
     if (options?.disabled) {
       event.stopImmediatePropagation();
     }
   };
 
-  const pointerDownHandler = (event: PointerEvent) => {
-    if (options?.disabled) {
-      event.stopImmediatePropagation();
-    }
-  };
-
-  // Add handlers at capture phase with higher priority
-  node.addEventListener('wheel', wheelHandler, { capture: true });
-  node.addEventListener('pointerdown', pointerDownHandler, { capture: true });
-
-  const unsubscribes = [photoZoomState.subscribe(setZoomImageState), zoomImageState.subscribe(photoZoomState.set)];
+  node.addEventListener('wheel', stopIfDisabled, { capture: true });
+  node.addEventListener('pointerdown', stopIfDisabled, { capture: true });
 
+  node.style.overflow = 'visible';
   return {
     update(newOptions?: { disabled?: boolean }) {
       options = newOptions;
     },
     destroy() {
-      node.removeEventListener('wheel', wheelHandler, { capture: true });
-      node.removeEventListener('pointerdown', pointerDownHandler, { capture: true });
       for (const unsubscribe of unsubscribes) {
         unsubscribe();
       }
+      node.removeEventListener('wheel', stopIfDisabled, { capture: true });
+      node.removeEventListener('pointerdown', stopIfDisabled, { capture: true });
+      zoomInstance.cleanup();
     },
   };
 };

web/src/lib/components/BreadcrumbActionPage.svelte

@@ -3,9 +3,11 @@
   import {
     Breadcrumbs,
     Button,
+    Container,
     ContextMenuButton,
     HStack,
     MenuItemType,
+    Scrollable,
     isMenuItemType,
     type BreadcrumbItem,
   } from '@immich/ui';
@@ -53,5 +55,7 @@
       <ContextMenuButton aria-label={$t('open')} items={actions} class="md:hidden" />
     {/if}
   </div>
-  {@render children?.()}
+  <Scrollable class="grow">
+    <Container class="p-2 pb-16" {children} />
+  </Scrollable>
 </div>

web/src/lib/components/PageContent.svelte

@@ -1,17 +0,0 @@
-<script lang="ts">
-  import { Container, Scrollable, type Size } from '@immich/ui';
-  import type { Snippet } from 'svelte';
-
-  type Props = {
-    size?: Size;
-    center?: boolean;
-    children?: Snippet;
-    class?: string;
-  };
-
-  const { size, center, class: className, children }: Props = $props();
-</script>
-
-<Scrollable class="grow">
-  <Container {size} {center} {children} class="p-2 pb-16 {className ?? ''}" />
-</Scrollable>

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

@@ -0,0 +1,246 @@
+<script lang="ts">
+  import { imageLoader } from '$lib/actions/image-loader.svelte';
+  import { thumbhash } from '$lib/actions/thumbhash';
+  import { zoomImageAction } from '$lib/actions/zoom-image';
+  import BrokenAsset from '$lib/components/assets/broken-asset.svelte';
+  import { SlideshowLook, SlideshowState } from '$lib/stores/slideshow.store';
+  import { photoZoomState, photoZoomTransform, resetZoomState } from '$lib/stores/zoom-image.store';
+  import { AdaptiveImageLoader } from '$lib/utils/adaptive-image-loader.svelte';
+  import { getDimensions } from '$lib/utils/asset-utils';
+  import { scaleToFit } from '$lib/utils/layout-utils';
+  import { getAltText } from '$lib/utils/thumbnail-util';
+  import { toTimelineAsset } from '$lib/utils/timeline-util';
+  import type { AssetResponseDto, SharedLinkResponseDto } from '@immich/sdk';
+  import { LoadingSpinner } from '@immich/ui';
+  import { onDestroy, untrack, type Snippet } from 'svelte';
+
+  interface Props {
+    asset: AssetResponseDto;
+    sharedLink?: SharedLinkResponseDto;
+    zoomDisabled?: boolean;
+    imageClass?: string;
+    container: {
+      width: number;
+      height: number;
+    };
+    slideshowState: SlideshowState;
+    slideshowLook: SlideshowLook;
+    onImageReady?: () => void;
+    onError?: () => void;
+    imgElement?: HTMLImageElement;
+    overlays?: Snippet;
+  }
+
+  let {
+    imgElement = $bindable<HTMLImageElement | undefined>(),
+    asset,
+    sharedLink,
+    zoomDisabled = false,
+    imageClass = '',
+    container,
+    slideshowState,
+    slideshowLook,
+    onImageReady,
+    onError,
+    overlays,
+  }: Props = $props();
+
+  let previousLoader = $state<AdaptiveImageLoader>();
+  let previousAssetId: string | undefined;
+  let previousSharedLinkId: string | undefined;
+
+  const adaptiveImageLoader = $derived.by(() => {
+    if (previousAssetId === asset.id && previousSharedLinkId === sharedLink?.id) {
+      return previousLoader!;
+    }
+
+    return untrack(() => {
+      previousAssetId = asset.id;
+      previousSharedLinkId = sharedLink?.id;
+
+      previousLoader?.destroy();
+      resetZoomState();
+      const loader = new AdaptiveImageLoader(asset, sharedLink, {
+        currentZoomFn: () => $photoZoomState.currentZoom,
+        onImageReady,
+        onError,
+      });
+      previousLoader = loader;
+      return loader;
+    });
+  });
+  onDestroy(() => adaptiveImageLoader.destroy());
+
+  const imageDimensions = $derived.by(() => {
+    if ((asset.width ?? 0) > 0 && (asset.height ?? 0) > 0) {
+      return { width: asset.width!, height: asset.height! };
+    }
+
+    if (asset.exifInfo?.exifImageHeight && asset.exifInfo.exifImageWidth) {
+      return getDimensions(asset.exifInfo) as { width: number; height: number };
+    }
+
+    return { width: 1, height: 1 };
+  });
+
+  const scaledDimensions = $derived(scaleToFit(imageDimensions, container));
+
+  const renderDimensions = $derived.by(() => {
+    const { width, height } = scaledDimensions;
+    return {
+      width: width + 'px',
+      height: height + 'px',
+      left: (container.width - width) / 2 + 'px',
+      top: (container.height - height) / 2 + 'px',
+    };
+  });
+
+  const loadState = $derived(adaptiveImageLoader.adaptiveLoaderState);
+  const imageAltText = $derived(loadState.previewUrl ? $getAltText(toTimelineAsset(asset)) : '');
+  const thumbnailUrl = $derived(loadState.thumbnailUrl);
+  const previewUrl = $derived(loadState.previewUrl);
+  const originalUrl = $derived(loadState.originalUrl);
+  const showSpinner = $derived(!asset.thumbhash && loadState.quality === 'basic');
+  const showBrokenAsset = $derived(loadState.hasError && loadState.quality !== 'loading-original');
+
+  // Effect: Upgrade to original when user zooms in
+  $effect(() => {
+    if ($photoZoomState.currentZoom > 1 && loadState.quality === 'preview') {
+      void adaptiveImageLoader.triggerOriginal();
+    }
+  });
+  let thumbnailElement = $state<HTMLImageElement>();
+  let previewElement = $state<HTMLImageElement>();
+  let originalElement = $state<HTMLImageElement>();
+
+  // Effect: Synchronize highest quality element as main imgElement
+  $effect(() => {
+    imgElement = originalElement ?? previewElement ?? thumbnailElement;
+  });
+</script>
+
+<div
+  class="relative h-full w-full"
+  style:left={renderDimensions.left}
+  style:top={renderDimensions.top}
+  style:width={renderDimensions.width}
+  style:height={renderDimensions.height}
+>
+  {#if asset.thumbhash}
+    <!-- Thumbhash / spinner layer  -->
+    <div style:transform-origin="0px 0px" style:transform={$photoZoomTransform} class="h-full w-full absolute">
+      <canvas use:thumbhash={{ base64ThumbHash: asset.thumbhash }} class="h-full w-full absolute -z-2"></canvas>
+    </div>
+  {:else if showSpinner}
+    <div id="spinner" class="absolute flex h-full items-center justify-center">
+      <LoadingSpinner />
+    </div>
+  {/if}
+
+  <div
+    use:imageLoader={{
+      src: thumbnailUrl,
+      onStart: () => adaptiveImageLoader.onThumbnailStart(),
+      onLoad: () => adaptiveImageLoader.onThumbnailLoad(),
+      onError: () => adaptiveImageLoader.onThumbnailError(),
+      onElementCreated: (el) => (thumbnailElement = el),
+      imgClass: ['absolute h-full', 'w-full'],
+      alt: '',
+      role: 'presentation',
+      dataAttributes: {
+        'data-testid': 'thumbnail',
+      },
+    }}
+  ></div>
+
+  {#if showBrokenAsset}
+    <div class="h-full w-full absolute">
+      <BrokenAsset class="text-xl h-full w-full" />
+    </div>
+  {:else}
+    <!-- Slideshow blurred background -->
+    {#if thumbnailUrl && slideshowState !== SlideshowState.None && slideshowLook === SlideshowLook.BlurredBackground}
+      <img
+        src={thumbnailUrl}
+        alt=""
+        role="presentation"
+        class="-z-1 absolute top-0 start-0 object-cover h-full w-full blur-lg"
+        draggable="false"
+      />
+    {/if}
+
+    <div
+      class="absolute top-0"
+      style:transform-origin="0px 0px"
+      style:transform={$photoZoomTransform}
+      style:width={renderDimensions.width}
+      style:height={renderDimensions.height}
+    >
+      <div
+        use:imageLoader={{
+          src: previewUrl,
+          onStart: () => adaptiveImageLoader.onPreviewStart(),
+          onLoad: () => adaptiveImageLoader.onPreviewLoad(),
+          onError: () => adaptiveImageLoader.onPreviewError(),
+          onElementCreated: (el) => (previewElement = el),
+          imgClass: ['h-full', 'w-full', { imageClass }],
+          alt: imageAltText,
+          draggable: false,
+          dataAttributes: {
+            'data-testid': 'preview',
+          },
+        }}
+      ></div>
+
+      {@render overlays?.()}
+    </div>
+
+    <div
+      class="absolute top-0"
+      style:transform-origin="0px 0px"
+      style:transform={$photoZoomTransform}
+      style:width={renderDimensions.width}
+      style:height={renderDimensions.height}
+    >
+      <div
+        use:imageLoader={{
+          src: originalUrl,
+          onStart: () => adaptiveImageLoader.onOriginalStart(),
+          onLoad: () => adaptiveImageLoader.onOriginalLoad(),
+          onError: () => adaptiveImageLoader.onOriginalError(),
+          onElementCreated: (el) => (originalElement = el),
+          imgClass: ['h-full', 'w-full', { imageClass }],
+          alt: imageAltText,
+          draggable: false,
+          dataAttributes: {
+            'data-testid': 'original',
+          },
+        }}
+      ></div>
+
+      {@render overlays?.()}
+    </div>
+
+    <!-- Use placeholder empty image to zoomImage so it can monitor mouse-wheel events and update zoom state -->
+    <div
+      class="absolute top-0"
+      use:zoomImageAction={{ disabled: zoomDisabled }}
+      style:width={renderDimensions.width}
+      style:height={renderDimensions.height}
+    >
+      <img alt="" class="absolute h-full w-full hidden" draggable="false" />
+    </div>
+  {/if}
+</div>
+
+<style>
+  @keyframes delayedVisibility {
+    to {
+      visibility: visible;
+    }
+  }
+  #spinner {
+    visibility: hidden;
+    animation: 0s linear 0.4s forwards delayedVisibility;
+  }
+</style>

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

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { goto } from '$app/navigation';
   import { focusTrap } from '$lib/actions/focus-trap';
+  import { loadImage } from '$lib/actions/image-loader.svelte';
   import type { Action, OnAction, PreAction } from '$lib/components/asset-viewer/actions/action';
   import NextAssetAction from '$lib/components/asset-viewer/actions/next-asset-action.svelte';
   import PreviousAssetAction from '$lib/components/asset-viewer/actions/previous-asset-action.svelte';
@@ -11,25 +12,25 @@
   import { assetViewerManager } from '$lib/managers/asset-viewer-manager.svelte';
   import { authManager } from '$lib/managers/auth-manager.svelte';
   import { editManager, EditToolType } from '$lib/managers/edit/edit-manager.svelte';
-  import { preloadManager } from '$lib/managers/PreloadManager.svelte';
+  import { eventManager } from '$lib/managers/event-manager.svelte';
   import { Route } from '$lib/route';
   import { assetViewingStore } from '$lib/stores/asset-viewing.store';
   import { ocrManager } from '$lib/stores/ocr.svelte';
   import { alwaysLoadOriginalVideo } from '$lib/stores/preferences.store';
   import { SlideshowNavigation, SlideshowState, slideshowStore } from '$lib/stores/slideshow.store';
   import { user } from '$lib/stores/user.store';
-  import { getAssetJobMessage, getAssetUrl, getSharedLink, handlePromiseError } from '$lib/utils';
+  import { getAssetJobMessage, getSharedLink, handlePromiseError } from '$lib/utils';
   import type { OnUndoDelete } from '$lib/utils/actions';
+  import { AdaptiveImageLoader } from '$lib/utils/adaptive-image-loader.svelte';
   import { navigateToAsset } from '$lib/utils/asset-utils';
   import { handleError } from '$lib/utils/handle-error';
   import { InvocationTracker } from '$lib/utils/invocationTracker';
   import { SlideshowHistory } from '$lib/utils/slideshow-history';
-  import { preloadImageUrl } from '$lib/utils/sw-messaging';
+
   import { toTimelineAsset } from '$lib/utils/timeline-util';
   import {
     AssetJobName,
     AssetTypeEnum,
-    getAllAlbums,
     getAssetInfo,
     getStack,
     runAssetJobs,
@@ -98,7 +99,6 @@
     stopProgress: stopSlideshowProgress,
     slideshowNavigation,
     slideshowState,
-    slideshowTransition,
   } = slideshowStore;
   const stackThumbnailSize = 60;
   const stackSelectedThumbnailSize = 65;
@@ -106,12 +106,11 @@
   const asset = $derived(cursor.current);
   const nextAsset = $derived(cursor.nextAsset);
   const previousAsset = $derived(cursor.previousAsset);
-  let appearsInAlbums: AlbumResponseDto[] = $state([]);
+
   let sharedLink = getSharedLink();
   let previewStackedAsset: AssetResponseDto | undefined = $state();
   let isShowEditor = $state(false);
   let fullscreenElement = $state<Element>();
-  let unsubscribes: (() => void)[] = [];
   let stack: StackResponseDto | null = $state(null);
 
   let zoomToggle = $state(() => void 0);
@@ -126,93 +125,138 @@
       return;
     }
 
-    if (asset.stack) {
-      stack = await getStack({ id: asset.stack.id });
+    if (!asset.stack) {
+      return;
     }
 
+    stack = await getStack({ id: asset.stack.id });
+
     if (!stack?.assets.some(({ id }) => id === asset.id)) {
       stack = null;
     }
 
-    untrack(() => {
-      if (stack && stack?.assets.length > 1) {
-        preloadImageUrl(getAssetUrl({ asset: stack.assets[1] }));
-      }
-    });
+    if (stack?.assets[1]) {
+      untrack(() => {
+        const loader = new AdaptiveImageLoader(stack!.assets[1], undefined, undefined, loadImage);
+        loader.start();
+      });
+    }
   };
 
   const handleFavorite = async () => {
-    if (album && album.isActivityEnabled) {
-      try {
-        await activityManager.toggleLike();
-      } catch (error) {
-        handleError(error, $t('errors.unable_to_change_favorite'));
-      }
-    }
-  };
-
-  onMount(async () => {
-    unsubscribes.push(
-      slideshowState.subscribe((value) => {
-        if (value === SlideshowState.PlaySlideshow) {
-          slideshowHistory.reset();
-          slideshowHistory.queue(toTimelineAsset(asset));
-          handlePromiseError(handlePlaySlideshow());
-        } else if (value === SlideshowState.StopSlideshow) {
-          handlePromiseError(handleStopSlideshow());
-        }
-      }),
-      slideshowNavigation.subscribe((value) => {
-        if (value === SlideshowNavigation.Shuffle) {
-          slideshowHistory.reset();
-          slideshowHistory.queue(toTimelineAsset(asset));
-        }
-      }),
-    );
-
-    if (!sharedLink) {
-      await handleGetAllAlbums();
-    }
-  });
-
-  onDestroy(() => {
-    for (const unsubscribe of unsubscribes) {
-      unsubscribe();
-    }
-
-    activityManager.reset();
-  });
-
-  const handleGetAllAlbums = async () => {
-    if (authManager.isSharedLink) {
+    if (!album || !album.isActivityEnabled) {
       return;
     }
 
     try {
-      appearsInAlbums = await getAllAlbums({ assetId: asset.id });
+      await activityManager.toggleLike();
     } catch (error) {
-      console.error('Error getting album that asset belong to', error);
+      handleError(error, $t('errors.unable_to_change_favorite'));
     }
   };
 
+  onMount(() => {
+    const slideshowStateUnsubscribe = slideshowState.subscribe((value) => {
+      if (value === SlideshowState.PlaySlideshow) {
+        slideshowHistory.reset();
+        slideshowHistory.queue(toTimelineAsset(asset));
+        handlePromiseError(handlePlaySlideshow());
+      } else if (value === SlideshowState.StopSlideshow) {
+        handlePromiseError(handleStopSlideshow());
+      }
+    });
+
+    const slideshowNavigationUnsubscribe = slideshowNavigation.subscribe((value) => {
+      if (value === SlideshowNavigation.Shuffle) {
+        slideshowHistory.reset();
+        slideshowHistory.queue(toTimelineAsset(asset));
+      }
+    });
+
+    return () => {
+      slideshowStateUnsubscribe();
+      slideshowNavigationUnsubscribe();
+    };
+  });
+
+  onDestroy(() => {
+    activityManager.reset();
+
+    destroyNextPreloader();
+    destroyPreviousPreloader();
+  });
+
   const closeViewer = () => {
     onClose?.(asset);
   };
 
   const closeEditor = async () => {
     if (editManager.hasAppliedEdits) {
-      console.log(asset);
       const refreshedAsset = await getAssetInfo({ id: asset.id });
-      console.log(refreshedAsset);
       onAssetChange?.(refreshedAsset);
       assetViewingStore.setAsset(refreshedAsset);
     }
     isShowEditor = false;
   };
 
-  const tracker = new InvocationTracker();
+  let nextPreloader: AdaptiveImageLoader | undefined;
+  let previousPreloader: AdaptiveImageLoader | undefined;
 
-  const navigateAsset = (order?: 'previous' | 'next', e?: Event) => {
+  const startPreloader = (asset: AssetResponseDto | undefined) => {
+    if (!asset) {
+      return;
+    }
+    const loader = new AdaptiveImageLoader(asset, undefined, undefined, loadImage);
+    loader.start();
+    return loader;
+  };
+
+  const destroyPreviousPreloader = () => {
+    previousPreloader?.destroy();
+    previousPreloader = undefined;
+  };
+
+  const destroyNextPreloader = () => {
+    nextPreloader?.destroy();
+    nextPreloader = undefined;
+  };
+
+  const cancelPreloadsBeforeNavigation = (direction: 'previous' | 'next') => {
+    if (direction === 'next') {
+      destroyPreviousPreloader();
+      return;
+    }
+    destroyNextPreloader();
+  };
+
+  const updatePreloadsAfterNavigation = (oldCursor: AssetCursor, newCursor: AssetCursor) => {
+    const movedForward = newCursor.current.id === oldCursor.nextAsset?.id;
+    const movedBackward = newCursor.current.id === oldCursor.previousAsset?.id;
+
+    const shouldDestroyPrevious = movedForward || !movedBackward;
+    const shouldDestroyNext = movedBackward || !movedForward;
+
+    if (shouldDestroyPrevious) {
+      destroyPreviousPreloader();
+    }
+
+    if (shouldDestroyNext) {
+      destroyNextPreloader();
+    }
+
+    if (movedForward) {
+      nextPreloader = startPreloader(newCursor.nextAsset);
+    } else if (movedBackward) {
+      previousPreloader = startPreloader(newCursor.previousAsset);
+    } else {
+      // Non-adjacent navigation (e.g., slideshow random)
+      previousPreloader = startPreloader(newCursor.previousAsset);
+      nextPreloader = startPreloader(newCursor.nextAsset);
+    }
+  };
+
+  const tracker = new InvocationTracker();
+  const navigateAsset = (order?: 'previous' | 'next') => {
     if (!order) {
       if ($slideshowState === SlideshowState.PlaySlideshow) {
         order = $slideshowNavigation === SlideshowNavigation.AscendingOrder ? 'previous' : 'next';
@@ -221,12 +265,12 @@
       }
     }
 
-    e?.stopPropagation();
-    preloadManager.cancel(asset);
     if (tracker.isActive()) {
       return;
     }
 
+    cancelPreloadsBeforeNavigation(order);
+
     void tracker.invoke(async () => {
       let hasNext = false;
 
@@ -244,14 +288,16 @@
           order === 'previous' ? await navigateToAsset(cursor.previousAsset) : await navigateToAsset(cursor.nextAsset);
       }
 
-      if ($slideshowState === SlideshowState.PlaySlideshow) {
-        if (hasNext) {
-          $restartSlideshowProgress = true;
-        } else {
-          await handleStopSlideshow();
-        }
+      if ($slideshowState !== SlideshowState.PlaySlideshow) {
+        return;
       }
-    });
+
+      if (hasNext) {
+        $restartSlideshowProgress = true;
+      } else {
+        await handleStopSlideshow();
+      }
+    }, $t('error_while_navigating'));
   };
 
   const showEditor = () => {
@@ -318,7 +364,7 @@
   const handleAction = async (action: Action) => {
     switch (action.type) {
       case AssetAction.ADD_TO_ALBUM: {
-        await handleGetAllAlbums();
+        eventManager.emit('AlbumAddAssets');
         break;
       }
       case AssetAction.REMOVE_ASSET_FROM_STACK: {
@@ -373,21 +419,42 @@
 
   const refresh = async () => {
     await refreshStack();
-    await handleGetAllAlbums();
     ocrManager.clear();
-    if (!sharedLink) {
-      if (previewStackedAsset) {
-        await ocrManager.getAssetOcr(previewStackedAsset.id);
-      }
-      await ocrManager.getAssetOcr(asset.id);
+    if (sharedLink) {
+      return;
     }
+
+    if (previewStackedAsset) {
+      await ocrManager.getAssetOcr(previewStackedAsset.id);
+    }
+    await ocrManager.getAssetOcr(asset.id);
   };
   $effect(() => {
     // eslint-disable-next-line @typescript-eslint/no-unused-expressions
     asset;
     untrack(() => handlePromiseError(refresh()));
-    preloadManager.preload(cursor.nextAsset);
-    preloadManager.preload(cursor.previousAsset);
+  });
+
+  let lastCursor = $state<AssetCursor>();
+
+  $effect(() => {
+    if (cursor.current.id === lastCursor?.current.id) {
+      return;
+    }
+    if (lastCursor) {
+      // After navigation completes, reconcile preloads with full state information
+      updatePreloadsAfterNavigation(lastCursor, cursor);
+    }
+    if (!lastCursor && cursor) {
+      // "first time" load, start preloads
+      if (cursor.nextAsset) {
+        nextPreloader = startPreloader(cursor.nextAsset);
+      }
+      if (cursor.previousAsset) {
+        previousPreloader = startPreloader(cursor.previousAsset);
+      }
+    }
+    lastCursor = cursor;
   });
 
   const onAssetReplace = async ({ oldAssetId, newAssetId }: { oldAssetId: string; newAssetId: string }) => {
@@ -498,15 +565,7 @@
   <!-- Asset Viewer -->
   <div class="z-[-1] relative col-start-1 col-span-4 row-start-1 row-span-full">
     {#if viewerKind === 'StackPhotoViewer'}
-      <PhotoViewer
-        bind:zoomToggle
-        bind:copyImage
-        cursor={{ ...cursor, current: previewStackedAsset! }}
-        onPreviousAsset={() => navigateAsset('previous')}
-        onNextAsset={() => navigateAsset('next')}
-        haveFadeTransition={false}
-        {sharedLink}
-      />
+      <PhotoViewer bind:zoomToggle bind:copyImage cursor={{ ...cursor, current: previewStackedAsset! }} {sharedLink} />
     {:else if viewerKind === 'StackVideoViewer'}
       <VideoViewer
         assetId={previewStackedAsset!.id}
@@ -536,15 +595,7 @@
     {:else if viewerKind === 'CropArea'}
       <CropArea {asset} />
     {:else if viewerKind === 'PhotoViewer'}
-      <PhotoViewer
-        bind:zoomToggle
-        bind:copyImage
-        {cursor}
-        onPreviousAsset={() => navigateAsset('previous')}
-        onNextAsset={() => navigateAsset('next')}
-        {sharedLink}
-        haveFadeTransition={$slideshowState !== SlideshowState.None && $slideshowTransition}
-      />
+      <PhotoViewer bind:zoomToggle bind:copyImage {cursor} {sharedLink} />
     {:else if viewerKind === 'VideoViewer'}
       <VideoViewer
         assetId={asset.id}
@@ -592,7 +643,7 @@
       class="row-start-1 row-span-4 w-90 overflow-y-auto transition-all dark:border-l dark:border-s-immich-dark-gray bg-light"
       translate="yes"
     >
-      <DetailPanel {asset} currentAlbum={album} albums={appearsInAlbums} />
+      <DetailPanel {asset} currentAlbum={album} />
     </div>
   {/if}
 

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

@@ -7,6 +7,7 @@
   import { timeToLoadTheMap } from '$lib/constants';
   import { assetViewerManager } from '$lib/managers/asset-viewer-manager.svelte';
   import { authManager } from '$lib/managers/auth-manager.svelte';
+  import { eventManager } from '$lib/managers/event-manager.svelte';
   import { featureFlagsManager } from '$lib/managers/feature-flags-manager.svelte';
   import AssetChangeDateModal from '$lib/modals/AssetChangeDateModal.svelte';
   import { Route } from '$lib/route';
@@ -17,9 +18,16 @@
   import { getAssetThumbnailUrl, getPeopleThumbnailUrl } from '$lib/utils';
   import { delay, getDimensions } from '$lib/utils/asset-utils';
   import { getByteUnitString } from '$lib/utils/byte-units';
+  import { handleError } from '$lib/utils/handle-error';
   import { fromISODateTime, fromISODateTimeUTC, toTimelineAsset } from '$lib/utils/timeline-util';
   import { getParentPath } from '$lib/utils/tree-utils';
-  import { AssetMediaSize, getAssetInfo, type AlbumResponseDto, type AssetResponseDto } from '@immich/sdk';
+  import {
+    AssetMediaSize,
+    getAllAlbums,
+    getAssetInfo,
+    type AlbumResponseDto,
+    type AssetResponseDto,
+  } from '@immich/sdk';
   import { Icon, IconButton, LoadingSpinner, modalManager } from '@immich/ui';
   import {
     mdiCalendar,
@@ -34,6 +42,7 @@
     mdiPlus,
   } from '@mdi/js';
   import { DateTime } from 'luxon';
+  import { onDestroy, untrack } from 'svelte';
   import { t } from 'svelte-i18n';
   import { slide } from 'svelte/transition';
   import ImageThumbnail from '../assets/thumbnail/image-thumbnail.svelte';
@@ -43,11 +52,10 @@
 
   interface Props {
     asset: AssetResponseDto;
-    albums?: AlbumResponseDto[];
     currentAlbum?: AlbumResponseDto | null;
   }
 
-  let { asset, albums = [], currentAlbum = null }: Props = $props();
+  let { asset, currentAlbum = null }: Props = $props();
 
   let showAssetPath = $state(false);
   let showEditFaces = $state(false);
@@ -74,14 +82,43 @@
   let previousId: string | undefined = $state();
   let previousRoute = $derived(currentAlbum?.id ? Route.viewAlbum(currentAlbum) : Route.photos());
 
+  let albums = $state<AlbumResponseDto[]>([]);
+
+  const refreshAlbums = async () => {
+    if (authManager.isSharedLink) {
+      return;
+    }
+
+    try {
+      albums = await getAllAlbums({ assetId: asset.id });
+    } catch (error) {
+      handleError(error, 'Error getting asset album membership');
+    }
+  };
+
+  eventManager.on('AlbumAddAssets', () => void refreshAlbums());
+  onDestroy(() => {
+    eventManager.off('AlbumAddAssets', () => void refreshAlbums());
+  });
+
+  $effect(() => {
+    // eslint-disable-next-line @typescript-eslint/no-unused-expressions
+    asset;
+    untrack(() => void refreshAlbums());
+  });
+
   $effect(() => {
     if (!previousId) {
       previousId = asset.id;
+      return;
     }
-    if (asset.id !== previousId) {
-      showEditFaces = false;
-      previousId = asset.id;
+
+    if (asset.id === previousId) {
+      return;
     }
+
+    showEditFaces = false;
+    previousId = asset.id;
   });
 
   const getMegapixel = (width: number, height: number): number | undefined => {

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

@@ -1,51 +1,40 @@
 <script lang="ts">
   import { shortcuts } from '$lib/actions/shortcut';
-  import { zoomImageAction } from '$lib/actions/zoom-image';
+  import AdaptiveImage from '$lib/components/asset-viewer/adaptive-image.svelte';
   import FaceEditor from '$lib/components/asset-viewer/face-editor/face-editor.svelte';
   import OcrBoundingBox from '$lib/components/asset-viewer/ocr-bounding-box.svelte';
-  import BrokenAsset from '$lib/components/assets/broken-asset.svelte';
-  import { assetViewerFadeDuration } from '$lib/constants';
   import { castManager } from '$lib/managers/cast-manager.svelte';
-  import { preloadManager } from '$lib/managers/PreloadManager.svelte';
   import { photoViewerImgElement } from '$lib/stores/assets-store.svelte';
   import { isFaceEditMode } from '$lib/stores/face-edit.svelte';
   import { ocrManager } from '$lib/stores/ocr.svelte';
   import { boundingBoxesArray } from '$lib/stores/people.store';
-  import { SlideshowLook, SlideshowState, slideshowLookCssMapping, slideshowStore } from '$lib/stores/slideshow.store';
+  import { SlideshowState, slideshowLookCssMapping, slideshowStore } from '$lib/stores/slideshow.store';
   import { photoZoomState } from '$lib/stores/zoom-image.store';
-  import { getAssetUrl, targetImageSize as getTargetImageSize, handlePromiseError } from '$lib/utils';
+  import { handlePromiseError } from '$lib/utils';
   import { canCopyImageToClipboard, copyImageToClipboard } from '$lib/utils/asset-utils';
   import { handleError } from '$lib/utils/handle-error';
   import { getOcrBoundingBoxes } from '$lib/utils/ocr-utils';
   import { getBoundingBox } from '$lib/utils/people-utils';
-  import { getAltText } from '$lib/utils/thumbnail-util';
-  import { toTimelineAsset } from '$lib/utils/timeline-util';
-  import { AssetMediaSize, type SharedLinkResponseDto } from '@immich/sdk';
-  import { LoadingSpinner, toastManager } from '@immich/ui';
-  import { onDestroy, untrack } from 'svelte';
-  import { useSwipe, type SwipeCustomEvent } from 'svelte-gestures';
+  import { type SharedLinkResponseDto } from '@immich/sdk';
+  import { toastManager } from '@immich/ui';
+  import { onDestroy } from 'svelte';
   import { t } from 'svelte-i18n';
-  import { fade } from 'svelte/transition';
   import type { AssetCursor } from './asset-viewer.svelte';
 
   interface Props {
     cursor: AssetCursor;
-    element?: HTMLDivElement | undefined;
-    haveFadeTransition?: boolean;
-    sharedLink?: SharedLinkResponseDto | undefined;
-    onPreviousAsset?: (() => void) | null;
-    onNextAsset?: (() => void) | null;
+    element?: HTMLDivElement;
+    sharedLink?: SharedLinkResponseDto;
+    onReady?: () => void;
     copyImage?: () => Promise<void>;
-    zoomToggle?: (() => void) | null;
+    zoomToggle?: () => void;
   }
 
   let {
     cursor,
     element = $bindable(),
-    haveFadeTransition = true,
-    sharedLink = undefined,
-    onPreviousAsset = null,
-    onNextAsset = null,
+    sharedLink,
+    onReady,
     copyImage = $bindable(),
     zoomToggle = $bindable(),
   }: Props = $props();
@@ -53,20 +42,6 @@
   const { slideshowState, slideshowLook } = slideshowStore;
   const asset = $derived(cursor.current);
 
-  let imageLoaded: boolean = $state(false);
-  let originalImageLoaded: boolean = $state(false);
-  let imageError: boolean = $state(false);
-
-  let loader = $state<HTMLImageElement>();
-
-  photoZoomState.set({
-    currentRotation: 0,
-    currentZoom: 1,
-    enable: true,
-    currentPositionX: 0,
-    currentPositionY: 0,
-  });
-
   onDestroy(() => {
     $boundingBoxesArray = [];
   });
@@ -115,29 +90,11 @@
     handlePromiseError(copyImage());
   };
 
-  const onSwipe = (event: SwipeCustomEvent) => {
-    if ($photoZoomState.currentZoom > 1) {
-      return;
-    }
-
-    if (ocrManager.showOverlay) {
-      return;
-    }
-
-    if (onNextAsset && event.detail.direction === 'left') {
-      onNextAsset();
-    }
-
-    if (onPreviousAsset && event.detail.direction === 'right') {
-      onPreviousAsset();
-    }
-  };
-
-  const targetImageSize = $derived(getTargetImageSize(asset, originalImageLoaded || $photoZoomState.currentZoom > 1));
+  let currentPreviewUrl = $state<string>();
 
   $effect(() => {
-    if (imageLoaderUrl) {
-      void cast(imageLoaderUrl);
+    if (currentPreviewUrl) {
+      void cast(currentPreviewUrl);
     }
   });
 
@@ -155,35 +112,11 @@
     }
   };
 
-  const onload = () => {
-    imageLoaded = true;
-    originalImageLoaded = targetImageSize === AssetMediaSize.Fullsize || targetImageSize === 'original';
-  };
-
-  const onerror = () => {
-    imageError = imageLoaded = true;
-  };
-
-  onDestroy(() => preloadManager.cancelPreloadUrl(imageLoaderUrl));
-
-  let imageLoaderUrl = $derived(
-    getAssetUrl({ asset, sharedLink, forceOriginal: originalImageLoaded || $photoZoomState.currentZoom > 1 }),
-  );
-
   let containerWidth = $state(0);
   let containerHeight = $state(0);
-
-  let lastUrl: string | undefined;
-
-  $effect(() => {
-    if (lastUrl && lastUrl !== imageLoaderUrl) {
-      untrack(() => {
-        imageLoaded = false;
-        originalImageLoaded = false;
-        imageError = false;
-      });
-    }
-    lastUrl = imageLoaderUrl;
+  const container = $derived({
+    width: containerWidth,
+    height: containerHeight,
   });
 </script>
 
@@ -193,49 +126,28 @@
     { shortcut: { key: 's' }, onShortcut: onPlaySlideshow, preventDefault: true },
     { shortcut: { key: 'c', ctrl: true }, onShortcut: onCopyShortcut, preventDefault: false },
     { shortcut: { key: 'c', meta: true }, onShortcut: onCopyShortcut, preventDefault: false },
-    { shortcut: { key: 'z' }, onShortcut: zoomToggle, preventDefault: false },
   ]}
 />
-{#if imageError}
-  <div id="broken-asset" class="h-full w-full">
-    <BrokenAsset class="text-xl h-full w-full" />
-  </div>
-{/if}
-<img bind:this={loader} style="display:none" src={imageLoaderUrl} alt="" aria-hidden="true" {onload} {onerror} />
+
 <div
   bind:this={element}
   class="relative h-full w-full select-none"
   bind:clientWidth={containerWidth}
   bind:clientHeight={containerHeight}
 >
-  {#if !imageLoaded}
-    <div id="spinner" class="flex h-full items-center justify-center">
-      <LoadingSpinner />
-    </div>
-  {:else if !imageError}
-    <div
-      use:zoomImageAction={{ disabled: isOcrActive }}
-      {...useSwipe(onSwipe)}
-      class="h-full w-full"
-      transition:fade={{ duration: haveFadeTransition ? assetViewerFadeDuration : 0 }}
-    >
-      {#if $slideshowState !== SlideshowState.None && $slideshowLook === SlideshowLook.BlurredBackground}
-        <img
-          src={imageLoaderUrl}
-          alt=""
-          class="-z-1 absolute top-0 start-0 object-cover h-full w-full blur-lg"
-          draggable="false"
-        />
-      {/if}
-      <img
-        bind:this={$photoViewerImgElement}
-        src={imageLoaderUrl}
-        alt={$getAltText(toTimelineAsset(asset))}
-        class="h-full w-full {$slideshowState === SlideshowState.None
-          ? 'object-contain'
-          : slideshowLookCssMapping[$slideshowLook]}"
-        draggable="false"
-      />
+  <AdaptiveImage
+    {asset}
+    {sharedLink}
+    {container}
+    zoomDisabled={isOcrActive}
+    imageClass={$slideshowState === SlideshowState.None ? 'object-contain' : slideshowLookCssMapping[$slideshowLook]}
+    slideshowState={$slideshowState}
+    slideshowLook={$slideshowLook}
+    onImageReady={() => onReady?.()}
+    onError={() => onReady?.()}
+    bind:imgElement={$photoViewerImgElement}
+  >
+    {#snippet overlays()}
       <!-- eslint-disable-next-line svelte/require-each-key -->
       {#each getBoundingBox($boundingBoxesArray, $photoZoomState, $photoViewerImgElement) as boundingbox}
         <div
@@ -247,23 +159,10 @@
       {#each ocrBoxes as ocrBox (ocrBox.id)}
         <OcrBoundingBox {ocrBox} />
       {/each}
-    </div>
+    {/snippet}
+  </AdaptiveImage>
 
-    {#if isFaceEditMode.value}
-      <FaceEditor htmlElement={$photoViewerImgElement} {containerWidth} {containerHeight} assetId={asset.id} />
-    {/if}
+  {#if isFaceEditMode.value}
+    <FaceEditor htmlElement={$photoViewerImgElement} {containerWidth} {containerHeight} assetId={asset.id} />
   {/if}
 </div>
-
-<style>
-  @keyframes delayedVisibility {
-    to {
-      visibility: visible;
-    }
-  }
-  #broken-asset,
-  #spinner {
-    visibility: hidden;
-    animation: 0s linear 0.4s forwards delayedVisibility;
-  }
-</style>

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

@@ -1,9 +1,8 @@
 <script lang="ts">
+  import { imageLoader } from '$lib/actions/image-loader.svelte';
   import BrokenAsset from '$lib/components/assets/broken-asset.svelte';
-  import { preloadManager } from '$lib/managers/PreloadManager.svelte';
   import { Icon } from '@immich/ui';
   import { mdiEyeOffOutline } from '@mdi/js';
-  import type { ActionReturn } from 'svelte/action';
   import type { ClassValue } from 'svelte/elements';
 
   interface Props {
@@ -54,16 +53,6 @@
     onComplete?.(true);
   };
 
-  function mount(elem: HTMLImageElement): ActionReturn {
-    if (elem.complete) {
-      loaded = true;
-      onComplete?.(false);
-    }
-    return {
-      destroy: () => preloadManager.cancelPreloadUrl(url),
-    };
-  }
-
   let optionalClasses = $derived(
     [
       curve && 'rounded-xl',
@@ -76,26 +65,28 @@
       .filter(Boolean)
       .join(' '),
   );
+
+  let style = $derived(
+    `width: ${widthStyle}; height: ${heightStyle ?? ''}; filter: ${hidden ? 'grayscale(50%)' : 'none'}; opacity: ${hidden ? '0.5' : '1'};`,
+  );
 </script>
 
 {#if errored}
   <BrokenAsset class={optionalClasses} width={widthStyle} height={heightStyle} />
 {:else}
-  <img
-    use:mount
-    onload={setLoaded}
-    onerror={setErrored}
-    style:width={widthStyle}
-    style:height={heightStyle}
-    style:filter={hidden ? 'grayscale(50%)' : 'none'}
-    style:opacity={hidden ? '0.5' : '1'}
-    src={url}
-    alt={loaded || errored ? altText : ''}
-    {title}
-    class={['object-cover', optionalClasses, imageClass]}
-    draggable="false"
-    loading={preload ? 'eager' : 'lazy'}
-  />
+  <div
+    use:imageLoader={{
+      src: url,
+      onLoad: setLoaded,
+      onError: setErrored,
+      imgClass: ['object-cover', optionalClasses, imageClass],
+      style,
+      alt: loaded || errored ? altText : '',
+      draggable: false,
+      title,
+      loading: preload ? 'eager' : 'lazy',
+    }}
+  ></div>
 {/if}
 
 {#if hidden}

web/src/lib/components/layouts/AdminPageLayout.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
   import BreadcrumbActionPage from '$lib/components/BreadcrumbActionPage.svelte';
-  import PageContent from '$lib/components/PageContent.svelte';
   import NavigationBar from '$lib/components/shared-components/navigation-bar/navigation-bar.svelte';
   import BottomInfo from '$lib/components/shared-components/side-bar/bottom-info.svelte';
   import { Route } from '$lib/route';
@@ -36,12 +35,12 @@
       <NavbarItem title={$t('server_stats')} href={Route.systemStatistics()} icon={mdiServer} />
     </div>
 
-    <div class="pe-6">
+    <div class="mb-2 me-4">
       <BottomInfo />
     </div>
   </AppShellSidebar>
 
   <BreadcrumbActionPage {breadcrumbs} {actions}>
-    <PageContent {children} />
+    {@render children?.()}
   </BreadcrumbActionPage>
 </AppShell>

web/src/lib/components/layouts/UserPageLayout.svelte

@@ -1,42 +0,0 @@
-<script lang="ts">
-  import BreadcrumbActionPage from '$lib/components/BreadcrumbActionPage.svelte';
-  import NavigationBar from '$lib/components/shared-components/navigation-bar/navigation-bar.svelte';
-  import BottomInfo from '$lib/components/shared-components/side-bar/bottom-info.svelte';
-  import UserSidebar from '$lib/components/shared-components/side-bar/user-sidebar.svelte';
-  import { sidebarStore } from '$lib/stores/sidebar.svelte';
-  import type { HeaderButtonActionItem } from '$lib/types';
-  import { AppShell, AppShellHeader, AppShellSidebar, MenuItemType, type BreadcrumbItem } from '@immich/ui';
-  import type { Snippet } from 'svelte';
-
-  type Props = {
-    title: string;
-    breadcrumbs?: BreadcrumbItem[];
-    actions?: Array<HeaderButtonActionItem | MenuItemType>;
-    sidebar?: Snippet;
-    children?: Snippet;
-  };
-
-  let { title, breadcrumbs = [], actions, sidebar, children }: Props = $props();
-</script>
-
-<AppShell>
-  <AppShellHeader>
-    <NavigationBar noBorder />
-  </AppShellHeader>
-  <AppShellSidebar bind:open={sidebarStore.isOpen} border={false} class="h-full flex flex-col justify-between gap-2">
-    {#if sidebar}
-      {@render sidebar()}
-    {:else}
-      <div class="flex flex-col pt-8 pe-6 gap-1">
-        <UserSidebar />
-      </div>
-
-      <div class="pe-6">
-        <BottomInfo />
-      </div>
-    {/if}
-  </AppShellSidebar>
-  <BreadcrumbActionPage breadcrumbs={[{ title }, ...breadcrumbs]} {actions}>
-    {@render children?.()}
-  </BreadcrumbActionPage>
-</AppShell>

web/src/lib/components/layouts/user-page-layout.svelte

@@ -1,10 +1,11 @@
+<script lang="ts" module>
+  export const headerId = 'user-page-header';
+</script>
+
 <script lang="ts">
   import { useActions, type ActionArray } from '$lib/actions/use-actions';
   import NavigationBar from '$lib/components/shared-components/navigation-bar/navigation-bar.svelte';
-  import BottomInfo from '$lib/components/shared-components/side-bar/bottom-info.svelte';
   import UserSidebar from '$lib/components/shared-components/side-bar/user-sidebar.svelte';
-  import Sidebar from '$lib/components/sidebar/sidebar.svelte';
-  import { headerId } from '$lib/constants';
   import type { HeaderButtonActionItem } from '$lib/types';
   import { openFileUploadDialog } from '$lib/utils/file-uploader';
   import { Button, ContextMenuButton, HStack, isMenuItemType, type MenuItemType } from '@immich/ui';
@@ -60,10 +61,7 @@
   {#if sidebar}
     {@render sidebar()}
   {:else}
-    <Sidebar ariaLabel={$t('primary')}>
-      <UserSidebar />
-      <BottomInfo />
-    </Sidebar>
+    <UserSidebar />
   {/if}
 
   <main class="relative">

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

@@ -4,8 +4,12 @@
   import StorageSpace from './storage-space.svelte';
 </script>
 
-<div class="mt-auto flex flex-col gap-2 mb-4">
+<div class="mt-auto">
   <StorageSpace />
-  <PurchaseInfo />
+</div>
+
+<PurchaseInfo />
+
+<div class="mb-6 mt-2">
   <ServerStatus />
 </div>

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

@@ -1,5 +1,7 @@
 <script lang="ts">
+  import BottomInfo from '$lib/components/shared-components/side-bar/bottom-info.svelte';
   import RecentAlbums from '$lib/components/shared-components/side-bar/recent-albums.svelte';
+  import Sidebar from '$lib/components/sidebar/sidebar.svelte';
   import { featureFlagsManager } from '$lib/managers/feature-flags-manager.svelte';
   import { Route } from '$lib/route';
   import { recentAlbumsDropdown } from '$lib/stores/preferences.store';
@@ -34,67 +36,71 @@
   import { fly } from 'svelte/transition';
 </script>
 
-<NavbarItem title={$t('photos')} href={Route.photos()} icon={mdiImageMultipleOutline} activeIcon={mdiImageMultiple} />
+<Sidebar ariaLabel={$t('primary')}>
+  <NavbarItem title={$t('photos')} href={Route.photos()} icon={mdiImageMultipleOutline} activeIcon={mdiImageMultiple} />
 
-{#if featureFlagsManager.value.search}
-  <NavbarItem title={$t('explore')} href={Route.explore()} icon={mdiMagnify} />
-{/if}
+  {#if featureFlagsManager.value.search}
+    <NavbarItem title={$t('explore')} href={Route.explore()} icon={mdiMagnify} />
+  {/if}
 
-{#if featureFlagsManager.value.map}
-  <NavbarItem title={$t('map')} href={Route.map()} icon={mdiMapOutline} activeIcon={mdiMap} />
-{/if}
+  {#if featureFlagsManager.value.map}
+    <NavbarItem title={$t('map')} href={Route.map()} icon={mdiMapOutline} activeIcon={mdiMap} />
+  {/if}
 
-{#if $preferences.people.enabled && $preferences.people.sidebarWeb}
-  <NavbarItem title={$t('people')} href={Route.people()} icon={mdiAccountOutline} activeIcon={mdiAccount} />
-{/if}
+  {#if $preferences.people.enabled && $preferences.people.sidebarWeb}
+    <NavbarItem title={$t('people')} href={Route.people()} icon={mdiAccountOutline} activeIcon={mdiAccount} />
+  {/if}
 
-{#if $preferences.sharedLinks.enabled && $preferences.sharedLinks.sidebarWeb}
-  <NavbarItem title={$t('shared_links')} href={Route.sharedLinks()} icon={mdiLink} />
-{/if}
+  {#if $preferences.sharedLinks.enabled && $preferences.sharedLinks.sidebarWeb}
+    <NavbarItem title={$t('shared_links')} href={Route.sharedLinks()} icon={mdiLink} />
+  {/if}
 
-<NavbarItem
-  title={$t('sharing')}
-  href={Route.sharing()}
-  icon={mdiAccountMultipleOutline}
-  activeIcon={mdiAccountMultiple}
-/>
+  <NavbarItem
+    title={$t('sharing')}
+    href={Route.sharing()}
+    icon={mdiAccountMultipleOutline}
+    activeIcon={mdiAccountMultiple}
+  />
 
-<NavbarGroup title={$t('library')} size="tiny" />
+  <NavbarGroup title={$t('library')} size="tiny" />
 
-<NavbarItem title={$t('favorites')} href={Route.favorites()} icon={mdiHeartOutline} activeIcon={mdiHeart} />
+  <NavbarItem title={$t('favorites')} href={Route.favorites()} icon={mdiHeartOutline} activeIcon={mdiHeart} />
 
-<NavbarItem
-  title={$t('albums')}
-  href={Route.albums()}
-  icon={{ icon: mdiImageAlbum, flipped: true }}
-  bind:expanded={$recentAlbumsDropdown}
->
-  {#snippet items()}
-    <span in:fly={{ y: -20 }} class="hidden md:block">
-      <RecentAlbums />
-    </span>
-  {/snippet}
-</NavbarItem>
+  <NavbarItem
+    title={$t('albums')}
+    href={Route.albums()}
+    icon={{ icon: mdiImageAlbum, flipped: true }}
+    bind:expanded={$recentAlbumsDropdown}
+  >
+    {#snippet items()}
+      <span in:fly={{ y: -20 }} class="hidden md:block">
+        <RecentAlbums />
+      </span>
+    {/snippet}
+  </NavbarItem>
 
-{#if $preferences.tags.enabled && $preferences.tags.sidebarWeb}
-  <NavbarItem title={$t('tags')} href={Route.tags()} icon={{ icon: mdiTagMultipleOutline, flipped: true }} />
-{/if}
+  {#if $preferences.tags.enabled && $preferences.tags.sidebarWeb}
+    <NavbarItem title={$t('tags')} href={Route.tags()} icon={{ icon: mdiTagMultipleOutline, flipped: true }} />
+  {/if}
 
-{#if $preferences.folders.enabled && $preferences.folders.sidebarWeb}
-  <NavbarItem title={$t('folders')} href={Route.folders()} icon={{ icon: mdiFolderOutline, flipped: true }} />
-{/if}
+  {#if $preferences.folders.enabled && $preferences.folders.sidebarWeb}
+    <NavbarItem title={$t('folders')} href={Route.folders()} icon={{ icon: mdiFolderOutline, flipped: true }} />
+  {/if}
 
-<NavbarItem title={$t('utilities')} href={Route.utilities()} icon={mdiToolboxOutline} activeIcon={mdiToolbox} />
+  <NavbarItem title={$t('utilities')} href={Route.utilities()} icon={mdiToolboxOutline} activeIcon={mdiToolbox} />
 
-<NavbarItem
-  title={$t('archive')}
-  href={Route.archive()}
-  icon={mdiArchiveArrowDownOutline}
-  activeIcon={mdiArchiveArrowDown}
-/>
+  <NavbarItem
+    title={$t('archive')}
+    href={Route.archive()}
+    icon={mdiArchiveArrowDownOutline}
+    activeIcon={mdiArchiveArrowDown}
+  />
 
-<NavbarItem title={$t('locked_folder')} href={Route.locked()} icon={mdiLockOutline} activeIcon={mdiLock} />
+  <NavbarItem title={$t('locked_folder')} href={Route.locked()} icon={mdiLockOutline} activeIcon={mdiLock} />
 
-{#if featureFlagsManager.value.trash}
-  <NavbarItem title={$t('trash')} href={Route.trash()} icon={mdiTrashCanOutline} activeIcon={mdiTrashCan} />
-{/if}
+  {#if featureFlagsManager.value.trash}
+    <NavbarItem title={$t('trash')} href={Route.trash()} icon={mdiTrashCanOutline} activeIcon={mdiTrashCan} />
+  {/if}
+
+  <BottomInfo />
+</Sidebar>

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

@@ -11,10 +11,12 @@
   import { handlePromiseError } from '$lib/utils';
   import { updateStackedAssetInTimeline, updateUnstackedAssetInTimeline } from '$lib/utils/actions';
   import { navigateToAsset } from '$lib/utils/asset-utils';
+  import { handleErrorAsync } from '$lib/utils/handle-error';
   import { navigate } from '$lib/utils/navigation';
   import { toTimelineAsset } from '$lib/utils/timeline-util';
   import { type AlbumResponseDto, type AssetResponseDto, type PersonResponseDto, getAssetInfo } from '@immich/sdk';
   import { onDestroy, onMount, untrack } from 'svelte';
+  import { t } from 'svelte-i18n';
 
   let { asset: viewingAsset, gridScrollTarget } = assetViewingStore;
 
@@ -38,28 +40,27 @@
     person,
   }: Props = $props();
 
-  const getNextAsset = async (currentAsset: AssetResponseDto, preload: boolean = true) => {
-    const earlierTimelineAsset = await timelineManager.getEarlierAsset(currentAsset);
-    if (earlierTimelineAsset) {
-      const asset = await assetCacheManager.getAsset({ ...authManager.params, id: earlierTimelineAsset.id });
-      if (preload) {
-        // also pre-cache an extra one, to pre-cache these assetInfos for the next nav after this one is complete
-        void getNextAsset(asset, false);
-      }
-      return asset;
-    }
+  const getAsset = (id: string) => {
+    return handleErrorAsync(
+      () => assetCacheManager.getAsset({ ...authManager.params, id }),
+      $t('error_retrieving_asset_information'),
+    );
   };
 
-  const getPreviousAsset = async (currentAsset: AssetResponseDto, preload: boolean = true) => {
-    const laterTimelineAsset = await timelineManager.getLaterAsset(currentAsset);
-    if (laterTimelineAsset) {
-      const asset = await assetCacheManager.getAsset({ ...authManager.params, id: laterTimelineAsset.id });
-      if (preload) {
-        // also pre-cache an extra one, to pre-cache these assetInfos for the next nav after this one is complete
-        void getPreviousAsset(asset, false);
-      }
-      return asset;
+  const getNextAsset = async (currentAsset: AssetResponseDto) => {
+    const earlierTimelineAsset = await timelineManager.getEarlierAsset(currentAsset);
+    if (!earlierTimelineAsset) {
+      return;
     }
+    return getAsset(earlierTimelineAsset.id);
+  };
+
+  const getPreviousAsset = async (currentAsset: AssetResponseDto) => {
+    const laterTimelineAsset = await timelineManager.getLaterAsset(currentAsset);
+    if (!laterTimelineAsset) {
+      return;
+    }
+    return getAsset(laterTimelineAsset.id);
   };
 
   let assetCursor = $state<AssetCursor>({
@@ -87,10 +88,12 @@
 
   const handleRandom = async () => {
     const randomAsset = await timelineManager.getRandomAsset();
-    if (randomAsset) {
-      await navigate({ targetRoute: 'current', assetId: randomAsset.id });
-      return { id: randomAsset.id };
+    if (!randomAsset) {
+      return;
     }
+
+    await navigate({ targetRoute: 'current', assetId: randomAsset.id });
+    return { id: randomAsset.id };
   };
 
   const handleClose = async (asset: { id: string }) => {
@@ -180,12 +183,14 @@
   };
   const handleUndoDelete = async (assets: TimelineAsset[]) => {
     timelineManager.upsertAssets(assets);
-    if (assets.length > 0) {
-      const restoredAsset = assets[0];
-      const asset = await getAssetInfo({ ...authManager.params, id: restoredAsset.id });
-      assetViewingStore.setAsset(asset);
-      await navigate({ targetRoute: 'current', assetId: restoredAsset.id });
+    if (assets.length === 0) {
+      return;
     }
+
+    const restoredAsset = assets[0];
+    const asset = await getAssetInfo({ ...authManager.params, id: restoredAsset.id });
+    assetViewingStore.setAsset(asset);
+    await navigate({ targetRoute: 'current', assetId: restoredAsset.id });
   };
 
   const handleUpdateOrUpload = (asset: AssetResponseDto) => {

web/src/lib/components/utilities-page/utilities-menu.svelte

@@ -0,0 +1,57 @@
+<script lang="ts">
+  import AppDownloadModal from '$lib/modals/AppDownloadModal.svelte';
+  import ObtainiumConfigModal from '$lib/modals/ObtainiumConfigModal.svelte';
+  import { Route } from '$lib/route';
+  import { Icon, modalManager } from '@immich/ui';
+  import {
+    mdiCellphoneArrowDownVariant,
+    mdiContentDuplicate,
+    mdiCrosshairsGps,
+    mdiImageSizeSelectLarge,
+    mdiLinkEdit,
+    mdiStateMachine,
+  } from '@mdi/js';
+  import { t } from 'svelte-i18n';
+
+  const links = [
+    { href: Route.duplicatesUtility(), icon: mdiContentDuplicate, label: $t('review_duplicates') },
+    { href: Route.largeFileUtility(), icon: mdiImageSizeSelectLarge, label: $t('review_large_files') },
+    { href: Route.geolocationUtility(), icon: mdiCrosshairsGps, label: $t('manage_geolocation') },
+    { href: Route.workflows(), icon: mdiStateMachine, label: $t('workflows') },
+  ];
+</script>
+
+<div class="border border-gray-300 dark:border-immich-dark-gray rounded-3xl pt-1 pb-6 dark:text-white">
+  <p class="uppercase text-xs font-medium p-4">{$t('organize_your_library')}</p>
+
+  {#each links as link (link.href)}
+    <a href={link.href} class="w-full hover:bg-gray-100 dark:hover:bg-immich-dark-gray flex items-center gap-4 p-4">
+      <span><Icon icon={link.icon} class="text-primary" size="24" /> </span>
+      {link.label}
+    </a>
+  {/each}
+</div>
+<br />
+<div class="border border-gray-300 dark:border-immich-dark-gray rounded-3xl pt-1 pb-6 dark:text-white">
+  <p class="uppercase text-xs font-medium p-4">{$t('download')}</p>
+  <button
+    type="button"
+    onclick={() => modalManager.show(ObtainiumConfigModal, {})}
+    class="w-full hover:bg-gray-100 dark:hover:bg-immich-dark-gray flex items-center gap-4 p-4"
+  >
+    <span>
+      <Icon icon={mdiLinkEdit} class="text-immich-primary dark:text-immich-dark-primary" size="24" />
+    </span>
+    {$t('obtainium_configurator')}
+  </button>
+  <button
+    type="button"
+    onclick={() => modalManager.show(AppDownloadModal, {})}
+    class="w-full hover:bg-gray-100 dark:hover:bg-immich-dark-gray flex items-center gap-4 p-4"
+  >
+    <span>
+      <Icon icon={mdiCellphoneArrowDownVariant} class="text-immich-primary dark:text-immich-dark-primary" size="24" />
+    </span>
+    {$t('app_download_links')}
+  </button>
+</div>

web/src/lib/constants.ts

@@ -397,5 +397,3 @@ export enum ToggleVisibility {
 }
 
 export const assetViewerFadeDuration: number = 150;
-
-export const headerId = 'user-page-header';

web/src/lib/managers/ImageManager.svelte.ts

@@ -0,0 +1,41 @@
+import { getAssetUrlForKind, ImageKinds, type ImageKind } from '$lib/utils';
+import { cancelImageUrl } from '$lib/utils/sw-messaging';
+import { type AssetResponseDto } from '@immich/sdk';
+
+class ImageManager {
+  preload(asset: AssetResponseDto | undefined, kind: ImageKind = 'preview') {
+    if (!asset) {
+      return;
+    }
+
+    const url = getAssetUrlForKind(asset, kind);
+    if (!url) {
+      return;
+    }
+
+    const img = new Image();
+    img.src = url;
+  }
+
+  cancel(asset: AssetResponseDto | undefined, kind: ImageKind | 'all' = 'preview') {
+    if (!asset) {
+      return;
+    }
+
+    const kinds = kind === 'all' ? (Object.keys(ImageKinds) as ImageKind[]) : [kind];
+    for (const k of kinds) {
+      const url = getAssetUrlForKind(asset, k);
+      if (url) {
+        cancelImageUrl(url);
+      }
+    }
+  }
+
+  cancelPreloadUrl(url: string | undefined) {
+    if (url) {
+      cancelImageUrl(url);
+    }
+  }
+}
+
+export const imageManager = new ImageManager();

web/src/lib/managers/PreloadManager.svelte.ts

@@ -1,38 +0,0 @@
-import { getAssetUrl } from '$lib/utils';
-import { cancelImageUrl, preloadImageUrl } from '$lib/utils/sw-messaging';
-import { AssetTypeEnum, type AssetResponseDto } from '@immich/sdk';
-
-class PreloadManager {
-  preload(asset: AssetResponseDto | undefined) {
-    if (globalThis.isSecureContext) {
-      preloadImageUrl(getAssetUrl({ asset }));
-      return;
-    }
-    if (!asset || asset.type !== AssetTypeEnum.Image) {
-      return;
-    }
-    const img = new Image();
-    const url = getAssetUrl({ asset });
-    if (!url) {
-      return;
-    }
-    img.src = url;
-  }
-
-  cancel(asset: AssetResponseDto | undefined) {
-    if (!globalThis.isSecureContext || !asset) {
-      return;
-    }
-    const url = getAssetUrl({ asset });
-    cancelImageUrl(url);
-  }
-
-  cancelPreloadUrl(url: string | undefined) {
-    if (!globalThis.isSecureContext) {
-      return;
-    }
-    cancelImageUrl(url);
-  }
-}
-
-export const preloadManager = new PreloadManager();

web/src/lib/stores/assets-store.svelte.ts

@@ -1,4 +1,4 @@
 import { writable } from 'svelte/store';
 
-export const photoViewerImgElement = writable<HTMLImageElement | null>(null);
+export const photoViewerImgElement = writable<HTMLImageElement>();
 export const isSelectingAllAssets = writable(false);

web/src/lib/stores/zoom-image.store.ts

@@ -1,4 +1,25 @@
 import type { ZoomImageWheelState } from '@zoom-image/core';
-import { writable } from 'svelte/store';
+import { derived, writable } from 'svelte/store';
 
-export const photoZoomState = writable<ZoomImageWheelState>();
+export const photoZoomState = writable<ZoomImageWheelState>({
+  currentRotation: 0,
+  currentZoom: 1,
+  enable: true,
+  currentPositionX: 0,
+  currentPositionY: 0,
+});
+
+export const photoZoomTransform = derived(
+  photoZoomState,
+  ($state) => `translate(${$state.currentPositionX}px,${$state.currentPositionY}px) scale(${$state.currentZoom})`,
+);
+
+export const resetZoomState = () => {
+  photoZoomState.set({
+    currentRotation: 0,
+    currentZoom: 1,
+    enable: true,
+    currentPositionX: 0,
+    currentPositionY: 0,
+  });
+};

web/src/lib/utils.ts

@@ -31,6 +31,15 @@ import { mdiCogRefreshOutline, mdiDatabaseRefreshOutline, mdiHeadSyncOutline, md
 import { init, register, t } from 'svelte-i18n';
 import { derived, get } from 'svelte/store';
 
+export const ImageKinds = {
+  thumbnail: true,
+  preview: true,
+  fullsize: true,
+  original: true,
+} as const;
+
+export type ImageKind = keyof typeof ImageKinds;
+
 interface DownloadRequestOptions<T = unknown> {
   method?: 'GET' | 'POST' | 'PUT' | 'DELETE';
   url: string;
@@ -195,18 +204,32 @@ const createUrl = (path: string, parameters?: Record<string, unknown>) => {
 
 type AssetUrlOptions = { id: string; cacheKey?: string | null; edited?: boolean };
 
+export const getAssetUrlForKind = (asset: AssetResponseDto, kind: ImageKind) => {
+  switch (kind) {
+    case 'preview': {
+      return getAssetThumbnailUrl({ id: asset.id, size: AssetMediaSize.Preview, cacheKey: asset.thumbhash });
+    }
+    case 'thumbnail': {
+      return getAssetThumbnailUrl({ id: asset.id, size: AssetMediaSize.Thumbnail, cacheKey: asset.thumbhash });
+    }
+    case 'fullsize': {
+      return getAssetThumbnailUrl({ id: asset.id, size: AssetMediaSize.Fullsize, cacheKey: asset.thumbhash });
+    }
+    case 'original': {
+      return getAssetOriginalUrl({ id: asset.id, cacheKey: asset.thumbhash });
+    }
+  }
+};
+
 export const getAssetUrl = ({
   asset,
   sharedLink,
   forceOriginal = false,
 }: {
-  asset: AssetResponseDto | undefined;
+  asset: AssetResponseDto;
   sharedLink?: SharedLinkResponseDto;
   forceOriginal?: boolean;
 }) => {
-  if (!asset) {
-    return;
-  }
   const id = asset.id;
   const cacheKey = asset.thumbhash;
   if (sharedLink && (!sharedLink.allowDownload || !sharedLink.showMetadata)) {

web/src/lib/utils/adaptive-image-loader.svelte.ts

@@ -0,0 +1,202 @@
+import type { LoadImageFunction } from '$lib/actions/image-loader.svelte';
+import { imageManager } from '$lib/managers/ImageManager.svelte';
+import { getAssetUrl, getAssetUrlForKind } from '$lib/utils';
+import { type AssetResponseDto, type SharedLinkResponseDto } from '@immich/sdk';
+
+/**
+ * Quality levels for progressive image loading
+ */
+type ImageQuality =
+  | 'basic'
+  | 'loading-thumbnail'
+  | 'thumbnail'
+  | 'loading-preview'
+  | 'preview'
+  | 'loading-original'
+  | 'original';
+
+export interface ImageLoaderState {
+  previewUrl?: string;
+  thumbnailUrl?: string;
+  originalUrl?: string;
+  quality: ImageQuality;
+  hasError: boolean;
+  thumbnailImage: ImageStatus;
+  previewImage: ImageStatus;
+  originalImage: ImageStatus;
+}
+enum ImageStatus {
+  Unloaded = 'Unloaded',
+  Success = 'Success',
+  Error = 'Error',
+}
+
+/**
+ * Coordinates adaptive loading of a single asset image:
+ * thumbhash → thumbnail → preview → original (on zoom)
+ *
+ */
+export class AdaptiveImageLoader {
+  private state = $state<ImageLoaderState>({
+    quality: 'basic',
+    hasError: false,
+    thumbnailImage: ImageStatus.Unloaded,
+    previewImage: ImageStatus.Unloaded,
+    originalImage: ImageStatus.Unloaded,
+  });
+
+  private readonly currentZoomFn?: () => number;
+  private readonly onImageReady?: () => void;
+  private readonly onError?: () => void;
+  private readonly imageLoader?: LoadImageFunction;
+  private readonly destroyFunctions: (() => void)[] = [];
+  readonly thumbnailUrl: string;
+  readonly previewUrl: string;
+  readonly originalUrl: string;
+  asset: AssetResponseDto;
+  constructor(
+    asset: AssetResponseDto,
+    sharedLink: SharedLinkResponseDto | undefined,
+    callbacks?: {
+      currentZoomFn: () => number;
+      onImageReady?: () => void;
+      onError?: () => void;
+    },
+    imageLoader?: LoadImageFunction,
+  ) {
+    this.asset = asset;
+    this.currentZoomFn = callbacks?.currentZoomFn;
+    this.onImageReady = callbacks?.onImageReady;
+    this.onError = callbacks?.onError;
+    this.imageLoader = imageLoader;
+
+    this.thumbnailUrl = getAssetUrlForKind(asset, 'thumbnail');
+    this.previewUrl = getAssetUrl({ asset, sharedLink });
+    this.originalUrl = getAssetUrl({ asset, sharedLink, forceOriginal: true });
+    this.state.thumbnailUrl = this.thumbnailUrl;
+  }
+
+  start() {
+    if (!this.imageLoader) {
+      throw new Error('Start requires imageLoader to be specified');
+    }
+    this.destroyFunctions.push(
+      this.imageLoader(
+        this.thumbnailUrl,
+        {},
+        () => this.onThumbnailLoad(),
+        () => this.onThumbnailError(),
+        () => this.onThumbnailStart(),
+      ),
+    );
+  }
+
+  get adaptiveLoaderState(): ImageLoaderState {
+    return this.state;
+  }
+
+  onThumbnailStart() {
+    this.state.quality = 'loading-thumbnail';
+  }
+
+  onThumbnailLoad() {
+    this.state.quality = 'thumbnail';
+    this.state.thumbnailImage = ImageStatus.Success;
+    this.onImageReady?.();
+    this.triggerMainImage();
+  }
+
+  onThumbnailError() {
+    this.state.thumbnailUrl = undefined;
+    this.state.thumbnailImage = ImageStatus.Error;
+    this.triggerMainImage();
+  }
+
+  triggerMainImage() {
+    const wantsOriginal = (this.currentZoomFn?.() ?? 1) > 1;
+    return wantsOriginal ? this.triggerOriginal() : this.triggerPreview();
+  }
+
+  triggerPreview() {
+    if (!this.previewUrl) {
+      // no preview, try original?
+      this.triggerOriginal();
+      return false;
+    }
+    this.state.previewUrl = this.previewUrl;
+    if (this.imageLoader) {
+      this.destroyFunctions.push(
+        this.imageLoader(
+          this.previewUrl,
+          {},
+          () => this.onPreviewLoad(),
+          () => this.onPreviewError(),
+          () => this.onPreviewStart(),
+        ),
+      );
+    }
+  }
+
+  onPreviewStart() {
+    this.state.quality = 'loading-preview';
+  }
+
+  onPreviewLoad() {
+    this.state.quality = 'preview';
+    this.state.previewImage = ImageStatus.Success;
+    this.onImageReady?.();
+  }
+
+  onPreviewError() {
+    this.state.previewImage = ImageStatus.Error;
+    this.state.previewUrl = undefined;
+    // TODO: maybe try original, but only if preview's error isnt due to cancelation
+  }
+
+  triggerOriginal() {
+    if (!this.originalUrl) {
+      this.onError?.();
+      return false;
+    }
+    this.state.originalUrl = this.originalUrl;
+
+    if (this.imageLoader) {
+      this.destroyFunctions.push(
+        this.imageLoader(
+          this.originalUrl,
+          {},
+          () => this.onOriginalLoad(),
+          () => this.onOriginalError(),
+          () => this.onOriginalStart(),
+        ),
+      );
+    }
+  }
+
+  onOriginalStart() {
+    this.state.quality = 'loading-original';
+  }
+
+  onOriginalLoad() {
+    this.state.quality = 'original';
+    this.state.originalImage = ImageStatus.Success;
+    this.onImageReady?.();
+  }
+
+  onOriginalError() {
+    this.state.originalImage = ImageStatus.Error;
+    this.state.originalUrl = undefined;
+  }
+
+  destroy(): void {
+    if (this.imageLoader) {
+      for (const destroy of this.destroyFunctions) {
+        destroy();
+      }
+      return;
+    }
+    imageManager.cancelPreloadUrl(this.thumbnailUrl);
+    imageManager.cancelPreloadUrl(this.previewUrl);
+    imageManager.cancelPreloadUrl(this.originalUrl);
+  }
+}

web/src/lib/utils/handle-error.ts

@@ -19,12 +19,17 @@ export function getServerErrorMessage(error: unknown) {
   return data?.message || error.message;
 }
 
-export function handleError(error: unknown, message: string) {
-  if ((error as Error)?.name === 'AbortError') {
+export function standardizeError(error: unknown) {
+  return error instanceof Error ? error : new Error(String(error));
+}
+
+export function handleError(error: unknown, localizedMessage: string) {
+  const standardizedError = standardizeError(error);
+  if (standardizedError.name === 'AbortError') {
     return;
   }
 
-  console.error(`[handleError]: ${message}`, error, (error as Error)?.stack);
+  console.error(`[handleError]: ${standardizedError}`, error, standardizedError.stack);
 
   try {
     let serverMessage = getServerErrorMessage(error);
@@ -32,13 +37,22 @@ export function handleError(error: unknown, message: string) {
       serverMessage = `${String(serverMessage).slice(0, 75)}\n(Immich Server Error)`;
     }
 
-    const errorMessage = serverMessage || message;
+    const errorMessage = serverMessage || localizedMessage;
 
     toastManager.danger(errorMessage);
 
     return errorMessage;
   } catch (error) {
     console.error(error);
-    return message;
+    return localizedMessage;
+  }
+}
+
+export async function handleErrorAsync<T>(fn: () => Promise<T>, localizedMessage: string): Promise<T | undefined> {
+  try {
+    return await fn();
+  } catch (error: unknown) {
+    handleError(error, localizedMessage);
+    return undefined;
   }
 }

web/src/lib/utils/invocationTracker.ts

@@ -1,3 +1,5 @@
+import { handleError } from '$lib/utils/handle-error';
+
 /**
  * Tracks the state of asynchronous invocations to handle race conditions and stale operations.
  * This class helps manage concurrent operations by tracking which invocations are active
@@ -51,10 +53,12 @@ export class InvocationTracker {
     return this.invocationsStarted !== this.invocationsEnded;
   }
 
-  async invoke<T>(invocable: () => Promise<T>) {
+  async invoke<T>(invocable: () => Promise<T>, localizedMessage: string) {
     const invocation = this.startInvocation();
     try {
       return await invocable();
+    } catch (error: unknown) {
+      handleError(error, localizedMessage);
     } finally {
       invocation.endInvocation();
     }

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

@@ -129,3 +129,19 @@ export type CommonPosition = {
   width: number;
   height: number;
 };
+
+// Scales dimensions to fit within a container (like object-fit: contain)
+export const scaleToFit = (
+  dimensions: { width: number; height: number },
+  container: { width: number; height: number },
+) => {
+  const scaleX = container.width / dimensions.width;
+  const scaleY = container.height / dimensions.height;
+
+  const scale = Math.min(scaleX, scaleY);
+
+  return {
+    width: dimensions.width * scale,
+    height: dimensions.height * scale,
+  };
+};

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

@@ -24,11 +24,11 @@ export interface boundingBox {
 export const getBoundingBox = (
   faces: Faces[],
   zoom: ZoomImageWheelState,
-  photoViewer: HTMLImageElement | null,
+  photoViewer: HTMLImageElement | undefined,
 ): boundingBox[] => {
   const boxes: boundingBox[] = [];
 
-  if (photoViewer === null) {
+  if (!photoViewer) {
     return boxes;
   }
   const clientHeight = photoViewer.clientHeight;
@@ -93,7 +93,7 @@ export const zoomImageToBase64 = async (
 
     image = img;
   }
-  if (image === null) {
+  if (!image) {
     return null;
   }
   const { boundingBoxX1: x1, boundingBoxX2: x2, boundingBoxY1: y1, boundingBoxY2: y2, imageWidth, imageHeight } = face;
@@ -121,11 +121,9 @@ export const zoomImageToBase64 = async (
   canvas.height = faceHeight;
 
   const context = canvas.getContext('2d');
-  if (context) {
-    context.drawImage(faceImage, coordinates.x1, coordinates.y1, faceWidth, faceHeight, 0, 0, faceWidth, faceHeight);
-
-    return canvas.toDataURL();
-  } else {
+  if (!context) {
     return null;
   }
+  context.drawImage(faceImage, coordinates.x1, coordinates.y1, faceWidth, faceHeight, 0, 0, faceWidth, faceHeight);
+  return canvas.toDataURL();
 };

web/src/lib/utils/sw-messaging.ts

@@ -1,14 +1,24 @@
-const broadcast = new BroadcastChannel('immich');
+import { ServiceWorkerMessenger } from './sw-messenger';
+
+const messenger = new ServiceWorkerMessenger();
+
+let isServiceWorkerEnabled = true;
+
+messenger.onAckTimeout(() => {
+  if (!isServiceWorkerEnabled) {
+    return;
+  }
+  console.error('[ServiceWorker] No communication detected. Auto-disabled service worker.');
+  isServiceWorkerEnabled = false;
+});
+
+const isValidSwContext = (url: string | undefined | null): url is string => {
+  return globalThis.isSecureContext && isServiceWorkerEnabled && !!url;
+};
 
 export function cancelImageUrl(url: string | undefined | null) {
-  if (!url) {
+  if (!isValidSwContext(url)) {
     return;
   }
-  broadcast.postMessage({ type: 'cancel', url });
-}
-export function preloadImageUrl(url: string | undefined | null) {
-  if (!url) {
-    return;
-  }
-  broadcast.postMessage({ type: 'preload', url });
+  void messenger.send('cancel', { url });
 }

web/src/lib/utils/sw-messenger.ts

@@ -0,0 +1,157 @@
+/**
+ * Low-level protocol for communicating with the service worker via postMessage.
+ *
+ * Protocol:
+ * 1. Main thread sends request: { type: string, requestId: string, ...data }
+ * 2. SW sends ack: { type: 'ack', requestId: string }
+ * 3. SW sends response (optional): { type: 'response', requestId: string, result?: any, error?: string }
+ */
+
+interface PendingRequest {
+  resolveAck: () => void;
+  resolveResponse?: (result: unknown) => void;
+  rejectResponse?: (error: Error) => void;
+  ackTimeout: ReturnType<typeof setTimeout>;
+  ackReceived: boolean;
+}
+
+export class ServiceWorkerMessenger {
+  readonly #pendingRequests = new Map<string, PendingRequest>();
+  readonly #ackTimeoutMs: number;
+  #requestCounter = 0;
+  #onTimeout?: (type: string, data: Record<string, unknown>) => void;
+  #messageHandler?: (event: MessageEvent) => void;
+
+  constructor(ackTimeoutMs = 5000) {
+    this.#ackTimeoutMs = ackTimeoutMs;
+
+    // Listen for messages from the service worker
+    if ('serviceWorker' in navigator) {
+      this.#messageHandler = (event) => {
+        this.#handleMessage(event.data);
+      };
+      navigator.serviceWorker.addEventListener('message', this.#messageHandler);
+    }
+  }
+
+  #handleMessage(data: unknown) {
+    if (typeof data !== 'object' || data === null) {
+      return;
+    }
+
+    const message = data as { requestId?: string; type?: string; error?: string; result?: unknown };
+    const requestId = message.requestId;
+    if (!requestId) {
+      return;
+    }
+
+    const pending = this.#pendingRequests.get(requestId);
+    if (!pending) {
+      return;
+    }
+
+    if (message.type === 'ack') {
+      pending.ackReceived = true;
+      clearTimeout(pending.ackTimeout);
+      pending.resolveAck();
+      return;
+    }
+
+    if (message.type === 'response') {
+      clearTimeout(pending.ackTimeout);
+      this.#pendingRequests.delete(requestId);
+
+      if (message.error) {
+        pending.rejectResponse?.(new Error(message.error));
+        return;
+      }
+
+      pending.resolveResponse?.(message.result);
+    }
+  }
+
+  /**
+   * Set a callback to be invoked when an ack timeout occurs.
+   * This can be used to detect and disable faulty service workers.
+   */
+  onAckTimeout(callback: (type: string, data: Record<string, unknown>) => void): void {
+    this.#onTimeout = callback;
+  }
+
+  /**
+   * Send a message to the service worker.
+   * - send(): waits for ack, resolves when acknowledged
+   * - request(): waits for response, throws on error/timeout
+   */
+  #sendInternal<T>(type: string, data: Record<string, unknown>, waitForResponse: boolean): Promise<T> {
+    const requestId = `${type}-${++this.#requestCounter}-${Date.now()}`;
+
+    const promise = new Promise<T>((resolve, reject) => {
+      const ackTimeout = setTimeout(() => {
+        const pending = this.#pendingRequests.get(requestId);
+        if (pending && !pending.ackReceived) {
+          this.#pendingRequests.delete(requestId);
+          console.warn(`[ServiceWorker] ${type} request not acknowledged:`, data);
+          this.#onTimeout?.(type, data);
+          // Only reject if we're waiting for a response
+          if (waitForResponse) {
+            reject(new Error(`Service worker did not acknowledge ${type} request`));
+          } else {
+            resolve(undefined as T);
+          }
+        }
+      }, this.#ackTimeoutMs);
+
+      this.#pendingRequests.set(requestId, {
+        resolveAck: waitForResponse ? () => {} : () => resolve(undefined as T),
+        resolveResponse: waitForResponse ? (result: unknown) => resolve(result as T) : undefined,
+        rejectResponse: waitForResponse ? reject : undefined,
+        ackTimeout,
+        ackReceived: false,
+      });
+
+      // Send message to the active service worker
+      // Feature detection is done in constructor and at call sites (sw-messaging.ts:isValidSwContext)
+      // eslint-disable-next-line compat/compat
+      navigator.serviceWorker.controller?.postMessage({
+        type,
+        requestId,
+        ...data,
+      });
+    });
+
+    return promise;
+  }
+
+  /**
+   * Send a one-way message to the service worker.
+   * Returns a promise that resolves after the service worker acknowledges receipt.
+   * Resolves even if no ack is received within the timeout period.
+   */
+  send(type: string, data: Record<string, unknown>): Promise<void> {
+    return this.#sendInternal<void>(type, data, false);
+  }
+
+  /**
+   * Send a request and wait for ack + response.
+   * Returns a promise that resolves with the response data or rejects on error/timeout.
+   */
+  request<T = void>(type: string, data: Record<string, unknown>): Promise<T> {
+    return this.#sendInternal<T>(type, data, true);
+  }
+
+  /**
+   * Clean up pending requests and remove event listener
+   */
+  close(): void {
+    for (const pending of this.#pendingRequests.values()) {
+      clearTimeout(pending.ackTimeout);
+    }
+    this.#pendingRequests.clear();
+
+    if (this.#messageHandler && 'serviceWorker' in navigator) {
+      navigator.serviceWorker.removeEventListener('message', this.#messageHandler);
+      this.#messageHandler = undefined;
+    }
+  }
+}

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

@@ -1,29 +1,28 @@
 <script lang="ts">
   import { goto } from '$app/navigation';
-  import UserPageLayout from '$lib/components/layouts/UserPageLayout.svelte';
-  import PageContent from '$lib/components/PageContent.svelte';
+  import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
   import LicenseActivationSuccess from '$lib/components/shared-components/purchasing/purchase-activation-success.svelte';
   import LicenseContent from '$lib/components/shared-components/purchasing/purchase-content.svelte';
   import SupporterBadge from '$lib/components/shared-components/side-bar/supporter-badge.svelte';
   import { Route } from '$lib/route';
   import { purchaseStore } from '$lib/stores/purchase.store';
-  import { Alert, Stack } from '@immich/ui';
+  import { Alert, Container, Stack } from '@immich/ui';
   import { mdiAlertCircleOutline } from '@mdi/js';
   import { t } from 'svelte-i18n';
   import type { PageData } from './$types';
 
-  type Props = {
+  interface Props {
     data: PageData;
-  };
+  }
 
   let { data }: Props = $props();
   let showLicenseActivated = $state(false);
   const { isPurchased } = purchaseStore;
 </script>
 
-<UserPageLayout title={data.meta.title}>
-  <PageContent size="medium" center class="pt-10">
-    <Stack gap={4}>
+<UserPageLayout title={$t('buy')}>
+  <Container size="medium" center>
+    <Stack gap={4} class="mt-4">
       {#if data.isActivated === false}
         <Alert icon={mdiAlertCircleOutline} color="danger" title={$t('purchase_failed_activation')} />
       {/if}
@@ -42,5 +41,5 @@
         />
       {/if}
     </Stack>
-  </PageContent>
+  </Container>
 </UserPageLayout>

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

@@ -1,7 +1,6 @@
 <script lang="ts">
   import ImageThumbnail from '$lib/components/assets/thumbnail/image-thumbnail.svelte';
-  import UserPageLayout from '$lib/components/layouts/UserPageLayout.svelte';
-  import PageContent from '$lib/components/PageContent.svelte';
+  import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
   import EmptyPlaceholder from '$lib/components/shared-components/empty-placeholder.svelte';
   import SingleGridRow from '$lib/components/shared-components/single-grid-row.svelte';
   import { Route } from '$lib/route';
@@ -14,9 +13,9 @@
   import { t } from 'svelte-i18n';
   import type { PageData } from './$types';
 
-  type Props = {
+  interface Props {
     data: PageData;
-  };
+  }
 
   let { data }: Props = $props();
 
@@ -42,76 +41,74 @@
 </script>
 
 <UserPageLayout title={data.meta.title}>
-  <PageContent>
-    {#if hasPeople}
-      <div class="mb-6 mt-2">
-        <div class="flex justify-between">
-          <p class="mb-4 font-medium dark:text-immich-dark-fg">{$t('people')}</p>
-          <a
-            href={Route.people()}
-            class="pe-4 text-sm font-medium hover:text-immich-primary dark:text-immich-dark-fg dark:hover:text-immich-dark-primary"
-            draggable="false">{$t('view_all')}</a
-          >
-        </div>
-        <SingleGridRow class="grid grid-flow-col md:grid-auto-fill-28 grid-auto-fill-20 gap-x-4">
-          {#snippet children({ itemCount })}
-            {#each people.slice(0, itemCount) as person (person.id)}
-              <a href={Route.viewPerson(person)} class="text-center relative">
-                <ImageThumbnail
-                  circle
-                  shadow
-                  url={getPeopleThumbnailUrl(person)}
-                  altText={person.name}
-                  widthStyle="100%"
-                />
-                {#if person.isFavorite}
-                  <div class="absolute top-2 start-2">
-                    <Icon icon={mdiHeart} size="24" class="text-white" />
-                  </div>
-                {/if}
-                <p class="mt-2 text-ellipsis text-sm font-medium dark:text-white">{person.name}</p>
-              </a>
-            {/each}
-          {/snippet}
-        </SingleGridRow>
+  {#if hasPeople}
+    <div class="mb-6 mt-2">
+      <div class="flex justify-between">
+        <p class="mb-4 font-medium dark:text-immich-dark-fg">{$t('people')}</p>
+        <a
+          href={Route.people()}
+          class="pe-4 text-sm font-medium hover:text-immich-primary dark:text-immich-dark-fg dark:hover:text-immich-dark-primary"
+          draggable="false">{$t('view_all')}</a
+        >
       </div>
-    {/if}
-
-    {#if places.length > 0}
-      <div class="mb-6 mt-2">
-        <div class="flex justify-between">
-          <p class="mb-4 font-medium dark:text-immich-dark-fg">{$t('places')}</p>
-          <a
-            href={Route.places()}
-            class="pe-4 text-sm font-medium hover:text-immich-primary dark:text-immich-dark-fg dark:hover:text-immich-dark-primary"
-            draggable="false">{$t('view_all')}</a
-          >
-        </div>
-        <SingleGridRow class="grid grid-flow-col md:grid-auto-fill-36 grid-auto-fill-28 gap-x-4">
-          {#snippet children({ itemCount })}
-            {#each places.slice(0, itemCount) as item (item.data.id)}
-              <a class="relative" href={Route.search({ city: item.value })} draggable="false">
-                <div class="flex justify-center overflow-hidden rounded-xl brightness-75 filter">
-                  <img
-                    src={getAssetThumbnailUrl({ id: item.data.id, size: AssetMediaSize.Thumbnail })}
-                    alt={item.value}
-                    class="object-cover aspect-square w-full"
-                  />
+      <SingleGridRow class="grid grid-flow-col md:grid-auto-fill-28 grid-auto-fill-20 gap-x-4">
+        {#snippet children({ itemCount })}
+          {#each people.slice(0, itemCount) as person (person.id)}
+            <a href={Route.viewPerson(person)} class="text-center relative">
+              <ImageThumbnail
+                circle
+                shadow
+                url={getPeopleThumbnailUrl(person)}
+                altText={person.name}
+                widthStyle="100%"
+              />
+              {#if person.isFavorite}
+                <div class="absolute top-2 start-2">
+                  <Icon icon={mdiHeart} size="24" class="text-white" />
                 </div>
-                <span
-                  class="absolute bottom-2 w-full text-ellipsis px-1 text-center text-sm font-medium capitalize text-white backdrop-blur-[1px] hover:cursor-pointer"
-                >
-                  {item.value}
-                </span>
-              </a>
-            {/each}
-          {/snippet}
-        </SingleGridRow>
-      </div>
-    {/if}
+              {/if}
+              <p class="mt-2 text-ellipsis text-sm font-medium dark:text-white">{person.name}</p>
+            </a>
+          {/each}
+        {/snippet}
+      </SingleGridRow>
+    </div>
+  {/if}
 
-    {#if !hasPeople && places.length === 0}
-      <EmptyPlaceholder text={$t('no_explore_results_message')} class="mt-10 mx-auto" />
-    {/if}
-  </PageContent>
+  {#if places.length > 0}
+    <div class="mb-6 mt-2">
+      <div class="flex justify-between">
+        <p class="mb-4 font-medium dark:text-immich-dark-fg">{$t('places')}</p>
+        <a
+          href={Route.places()}
+          class="pe-4 text-sm font-medium hover:text-immich-primary dark:text-immich-dark-fg dark:hover:text-immich-dark-primary"
+          draggable="false">{$t('view_all')}</a
+        >
+      </div>
+      <SingleGridRow class="grid grid-flow-col md:grid-auto-fill-36 grid-auto-fill-28 gap-x-4">
+        {#snippet children({ itemCount })}
+          {#each places.slice(0, itemCount) as item (item.data.id)}
+            <a class="relative" href={Route.search({ city: item.value })} draggable="false">
+              <div class="flex justify-center overflow-hidden rounded-xl brightness-75 filter">
+                <img
+                  src={getAssetThumbnailUrl({ id: item.data.id, size: AssetMediaSize.Thumbnail })}
+                  alt={item.value}
+                  class="object-cover aspect-square w-full"
+                />
+              </div>
+              <span
+                class="absolute bottom-2 w-full text-ellipsis px-1 text-center text-sm font-medium capitalize text-white backdrop-blur-[1px] hover:cursor-pointer"
+              >
+                {item.value}
+              </span>
+            </a>
+          {/each}
+        {/snippet}
+      </SingleGridRow>
+    </div>
+  {/if}
+
+  {#if !hasPeople && places.length === 0}
+    <EmptyPlaceholder text={$t('no_explore_results_message')} class="mt-10 mx-auto" />
+  {/if}
 </UserPageLayout>

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

@@ -1,6 +1,6 @@
 <script lang="ts">
   import { afterNavigate, goto, invalidateAll } from '$app/navigation';
-  import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
+  import UserPageLayout, { headerId } from '$lib/components/layouts/user-page-layout.svelte';
   import ButtonContextMenu from '$lib/components/shared-components/context-menu/button-context-menu.svelte';
   import GalleryViewer from '$lib/components/shared-components/gallery-viewer/gallery-viewer.svelte';
   import Breadcrumbs from '$lib/components/shared-components/tree/breadcrumbs.svelte';
@@ -19,7 +19,6 @@
   import FavoriteAction from '$lib/components/timeline/actions/FavoriteAction.svelte';
   import TagAction from '$lib/components/timeline/actions/TagAction.svelte';
   import AssetSelectControlBar from '$lib/components/timeline/AssetSelectControlBar.svelte';
-  import { headerId } from '$lib/constants';
   import SkipLink from '$lib/elements/SkipLink.svelte';
   import type { Viewport } from '$lib/managers/timeline-manager/types';
   import { Route } from '$lib/route';

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

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { goto } from '$app/navigation';
   import type { AssetCursor } from '$lib/components/asset-viewer/asset-viewer.svelte';
-  import UserPageLayout from '$lib/components/layouts/UserPageLayout.svelte';
+  import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
   import { timeToLoadTheMap } from '$lib/constants';
   import Portal from '$lib/elements/Portal.svelte';
   import { authManager } from '$lib/managers/auth-manager.svelte';

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

@@ -1,8 +1,7 @@
 <script lang="ts">
   import empty2Url from '$lib/assets/empty-2.svg';
   import Albums from '$lib/components/album-page/albums-list.svelte';
-  import UserPageLayout from '$lib/components/layouts/UserPageLayout.svelte';
-  import PageContent from '$lib/components/PageContent.svelte';
+  import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
   import EmptyPlaceholder from '$lib/components/shared-components/empty-placeholder.svelte';
   import UserAvatar from '$lib/components/shared-components/user-avatar.svelte';
   import { Route } from '$lib/route';
@@ -40,7 +39,7 @@
 </script>
 
 <UserPageLayout title={data.meta.title} actions={[CreateAlbum, ViewSharedLinks]}>
-  <PageContent>
+  <div class="flex flex-col">
     {#if data.partners.length > 0}
       <div class="mb-6 mt-2">
         <div>
@@ -85,5 +84,5 @@
         </Albums>
       </div>
     </div>
-  </PageContent>
+  </div>
 </UserPageLayout>

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

@@ -1,11 +1,12 @@
 <script lang="ts">
   import { goto } from '$app/navigation';
   import OnEvents from '$lib/components/OnEvents.svelte';
-  import UserPageLayout from '$lib/components/layouts/UserPageLayout.svelte';
+  import UserPageLayout, { headerId } from '$lib/components/layouts/user-page-layout.svelte';
   import ButtonContextMenu from '$lib/components/shared-components/context-menu/button-context-menu.svelte';
   import Breadcrumbs from '$lib/components/shared-components/tree/breadcrumbs.svelte';
   import TreeItemThumbnails from '$lib/components/shared-components/tree/tree-item-thumbnails.svelte';
   import TreeItems from '$lib/components/shared-components/tree/tree-items.svelte';
+  import Sidebar from '$lib/components/sidebar/sidebar.svelte';
   import AssetSelectControlBar from '$lib/components/timeline/AssetSelectControlBar.svelte';
   import Timeline from '$lib/components/timeline/Timeline.svelte';
   import AddToAlbum from '$lib/components/timeline/actions/AddToAlbumAction.svelte';
@@ -20,7 +21,7 @@
   import SelectAllAssets from '$lib/components/timeline/actions/SelectAllAction.svelte';
   import SetVisibilityAction from '$lib/components/timeline/actions/SetVisibilityAction.svelte';
   import TagAction from '$lib/components/timeline/actions/TagAction.svelte';
-  import { AssetAction, headerId } from '$lib/constants';
+  import { AssetAction } from '$lib/constants';
   import SkipLink from '$lib/elements/SkipLink.svelte';
   import { TimelineManager } from '$lib/managers/timeline-manager/timeline-manager.svelte';
   import { Route } from '$lib/route';
@@ -29,14 +30,13 @@
   import { preferences, user } from '$lib/stores/user.store';
   import { joinPaths, TreeNode } from '$lib/utils/tree-utils';
   import { getAllTags, type TagResponseDto } from '@immich/sdk';
-  import { NavbarGroup } from '@immich/ui';
   import { mdiDotsVertical, mdiPlus, mdiTag, mdiTagMultiple } from '@mdi/js';
   import { t } from 'svelte-i18n';
   import type { PageData } from './$types';
 
-  type Props = {
+  interface Props {
     data: PageData;
-  };
+  }
 
   let { data }: Props = $props();
 
@@ -79,17 +79,20 @@
 
 <UserPageLayout title={data.meta.title} actions={[Create, Update, Delete]}>
   {#snippet sidebar()}
-    <SkipLink target={`#${headerId}`} text={$t('skip_to_tags')} breakpoint="md" />
-    <section class="me-6">
-      <NavbarGroup title={$t('explorer')} />
-      <div class="h-full">
-        <TreeItems icons={{ default: mdiTag, active: mdiTag }} {tree} active={tag.path} {getLink} />
-      </div>
-    </section>
+    <Sidebar>
+      <SkipLink target={`#${headerId}`} text={$t('skip_to_tags')} breakpoint="md" />
+      <section>
+        <div class="uppercase text-xs ps-4 mb-2 dark:text-white">{$t('explorer')}</div>
+        <div class="h-full">
+          <TreeItems icons={{ default: mdiTag, active: mdiTag }} {tree} active={tag.path} {getLink} />
+        </div>
+      </section>
+    </Sidebar>
   {/snippet}
 
   <Breadcrumbs node={tag} icon={mdiTagMultiple} title={$t('tags')} {getLink} />
-  <div class="p-2 h-full w-full">
+
+  <section class="mt-2 h-[calc(100%-(--spacing(20)))] overflow-auto immich-scrollbar">
     {#if tag.hasAssets}
       <Timeline
         enableRouting={true}
@@ -105,7 +108,7 @@
     {:else}
       <TreeItemThumbnails items={tag.children} icon={mdiTag} onClick={handleNavigation} />
     {/if}
-  </div>
+  </section>
 </UserPageLayout>
 
 <section>

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

@@ -1,39 +1,31 @@
 <script lang="ts">
   import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
-  import PageContent from '$lib/components/PageContent.svelte';
   import UserSettingsList from '$lib/components/user-settings-page/user-settings-list.svelte';
   import ShortcutsModal from '$lib/modals/ShortcutsModal.svelte';
-  import { CommandPaletteDefaultProvider, modalManager, type ActionItem } from '@immich/ui';
+  import { Container, IconButton, modalManager } from '@immich/ui';
   import { mdiKeyboard } from '@mdi/js';
   import { t } from 'svelte-i18n';
   import type { PageData } from './$types';
 
-  type Props = {
+  interface Props {
     data: PageData;
-  };
+  }
 
   let { data }: Props = $props();
-
-  let open = $state(false);
-
-  const Shortcuts = $derived<ActionItem>({
-    title: $t('show_keyboard_shortcuts'),
-    icon: mdiKeyboard,
-    onAction: async () => {
-      if (!open) {
-        open = true;
-        await modalManager.show(ShortcutsModal, {});
-        open = false;
-      }
-    },
-    shortcuts: [{ key: '?', shift: true }],
-  });
 </script>
 
-<CommandPaletteDefaultProvider name={data.meta.title} actions={[Shortcuts]} />
-
-<UserPageLayout title={data.meta.title} actions={[Shortcuts]}>
-  <PageContent size="medium" center>
+<UserPageLayout title={data.meta.title}>
+  {#snippet buttons()}
+    <IconButton
+      shape="round"
+      color="secondary"
+      variant="ghost"
+      icon={mdiKeyboard}
+      aria-label={$t('show_keyboard_shortcuts')}
+      onclick={() => modalManager.show(ShortcutsModal, {})}
+    />
+  {/snippet}
+  <Container size="medium" center>
     <UserSettingsList keys={data.keys} sessions={data.sessions} />
-  </PageContent>
+  </Container>
 </UserPageLayout>

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

@@ -1,27 +1,7 @@
 <script lang="ts">
-  import UserPageLayout from '$lib/components/layouts/UserPageLayout.svelte';
-  import PageContent from '$lib/components/PageContent.svelte';
-  import AppDownloadModal from '$lib/modals/AppDownloadModal.svelte';
-  import ObtainiumConfigModal from '$lib/modals/ObtainiumConfigModal.svelte';
-  import { Route } from '$lib/route';
-  import { Icon, modalManager } from '@immich/ui';
-  import {
-    mdiCellphoneArrowDownVariant,
-    mdiContentDuplicate,
-    mdiCrosshairsGps,
-    mdiImageSizeSelectLarge,
-    mdiLinkEdit,
-    mdiStateMachine,
-  } from '@mdi/js';
-  import { t } from 'svelte-i18n';
+  import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
   import type { PageData } from './$types';
-
-  const links = [
-    { href: Route.duplicatesUtility(), icon: mdiContentDuplicate, label: $t('review_duplicates') },
-    { href: Route.largeFileUtility(), icon: mdiImageSizeSelectLarge, label: $t('review_large_files') },
-    { href: Route.geolocationUtility(), icon: mdiCrosshairsGps, label: $t('manage_geolocation') },
-    { href: Route.workflows(), icon: mdiStateMachine, label: $t('workflows') },
-  ];
+  import UtilitiesMenu from '$lib/components/utilities-page/utilities-menu.svelte';
 
   interface Props {
     data: PageData;
@@ -31,44 +11,9 @@
 </script>
 
 <UserPageLayout title={data.meta.title}>
-  <PageContent center size="small" class="pt-10">
-    <div class="border border-gray-300 dark:border-immich-dark-gray rounded-3xl pt-1 pb-6 dark:text-white">
-      <p class="uppercase text-xs font-medium p-4">{$t('organize_your_library')}</p>
-
-      {#each links as link (link.href)}
-        <a href={link.href} class="w-full hover:bg-gray-100 dark:hover:bg-immich-dark-gray flex items-center gap-4 p-4">
-          <span><Icon icon={link.icon} class="text-primary" size="24" /> </span>
-          {link.label}
-        </a>
-      {/each}
+  <div class="w-full max-w-xl m-auto">
+    <div class="mt-5">
+      <UtilitiesMenu />
     </div>
-    <br />
-    <div class="border border-gray-300 dark:border-immich-dark-gray rounded-3xl pt-1 pb-6 dark:text-white">
-      <p class="uppercase text-xs font-medium p-4">{$t('download')}</p>
-      <button
-        type="button"
-        onclick={() => modalManager.show(ObtainiumConfigModal, {})}
-        class="w-full hover:bg-gray-100 dark:hover:bg-immich-dark-gray flex items-center gap-4 p-4"
-      >
-        <span>
-          <Icon icon={mdiLinkEdit} class="text-immich-primary dark:text-immich-dark-primary" size="24" />
-        </span>
-        {$t('obtainium_configurator')}
-      </button>
-      <button
-        type="button"
-        onclick={() => modalManager.show(AppDownloadModal, {})}
-        class="w-full hover:bg-gray-100 dark:hover:bg-immich-dark-gray flex items-center gap-4 p-4"
-      >
-        <span>
-          <Icon
-            icon={mdiCellphoneArrowDownVariant}
-            class="text-immich-primary dark:text-immich-dark-primary"
-            size="24"
-          />
-        </span>
-        {$t('app_download_links')}
-      </button>
-    </div>
-  </PageContent>
+  </div>
 </UserPageLayout>

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

@@ -1,7 +1,6 @@
 <script lang="ts">
   import type { Action } from '$lib/components/asset-viewer/actions/action';
-  import UserPageLayout from '$lib/components/layouts/UserPageLayout.svelte';
-  import PageContent from '$lib/components/PageContent.svelte';
+  import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
   import LargeAssetData from '$lib/components/utilities-page/large-assets/large-asset-data.svelte';
   import Portal from '$lib/elements/Portal.svelte';
   import { assetViewingStore } from '$lib/stores/asset-viewing.store';
@@ -55,20 +54,18 @@
   });
 </script>
 
-<UserPageLayout title={data.meta.title}>
-  <PageContent>
-    <div class="grid gap-2 grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6">
-      {#if assets && data.assets.length > 0}
-        {#each assets as asset (asset.id)}
-          <LargeAssetData {asset} {onViewAsset} />
-        {/each}
-      {:else}
-        <p class="text-center text-lg dark:text-white flex place-items-center place-content-center">
-          {$t('no_assets_to_show')}
-        </p>
-      {/if}
-    </div>
-  </PageContent>
+<UserPageLayout title={data.meta.title} scrollbar={true}>
+  <div class="grid gap-2 grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6">
+    {#if assets && data.assets.length > 0}
+      {#each assets as asset (asset.id)}
+        <LargeAssetData {asset} {onViewAsset} />
+      {/each}
+    {:else}
+      <p class="text-center text-lg dark:text-white flex place-items-center place-content-center">
+        {$t('no_assets_to_show')}
+      </p>
+    {/if}
+  </div>
 </UserPageLayout>
 
 {#if $showAssetViewer}

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

@@ -1,9 +1,8 @@
 <script lang="ts">
   import { goto } from '$app/navigation';
   import emptyWorkflows from '$lib/assets/empty-workflows.svg';
-  import UserPageLayout from '$lib/components/layouts/UserPageLayout.svelte';
+  import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
   import OnEvents from '$lib/components/OnEvents.svelte';
-  import PageContent from '$lib/components/PageContent.svelte';
   import EmptyPlaceholder from '$lib/components/shared-components/empty-placeholder.svelte';
   import { Route } from '$lib/route';
   import {
@@ -152,128 +151,131 @@
   </span>
 {/snippet}
 
-<UserPageLayout title={data.meta.title} actions={[Create]}>
-  <PageContent center size="large" class="pt-10">
-    {#if workflows.length === 0}
-      <EmptyPlaceholder
-        title={$t('create_first_workflow')}
-        text={$t('workflows_help_text')}
-        onClick={() => Create.onAction(Create)}
-        src={emptyWorkflows}
-        class="mt-10 mx-auto"
-      />
-    {:else}
-      <div class="grid gap-6">
-        {#each workflows as workflow (workflow.id)}
-          <Card class="border border-light-200">
-            <CardHeader
-              class={`flex flex-row px-8 py-6 gap-4 sm:items-center sm:gap-6 ${
-                workflow.enabled
-                  ? 'bg-linear-to-r from-green-50 to-white dark:from-green-800/50 dark:to-green-950/45'
-                  : 'bg-neutral-50 dark:bg-neutral-900'
-              }`}
-            >
-              <div class="flex-1">
-                <div class="flex items-center gap-3">
-                  <span class="rounded-full {workflow.enabled ? 'h-3 w-3 bg-success' : 'h-3 w-3 rounded-full bg-muted'}"
-                  ></span>
-                  <CardTitle>{workflow.name}</CardTitle>
-                </div>
-                <CardDescription class="mt-1 text-sm">
-                  {workflow.description || $t('workflows_help_text')}
-                </CardDescription>
-              </div>
-
-              <div class="flex items-center gap-4">
-                <div class="text-right hidden sm:block">
-                  <Text size="tiny">{$t('created_at')}</Text>
-                  <Text size="small" fontWeight="medium">
-                    {formatTimestamp(workflow.createdAt)}
-                  </Text>
-                </div>
-                <IconButton
-                  shape="round"
-                  variant="ghost"
-                  color="secondary"
-                  icon={mdiDotsVertical}
-                  aria-label={$t('menu')}
-                  onclick={(event: MouseEvent) => showWorkflowMenu(event, workflow)}
-                />
-              </div>
-            </CardHeader>
-
-            <CardBody class="space-y-6">
-              <div class="grid gap-4 md:grid-cols-3">
-                <!-- Trigger Section -->
-                <div class="rounded-2xl border p-4 bg-light-50 border-light-200">
-                  <div class="mb-3">
-                    <Text class="text-xs uppercase tracking-widest" color="muted" fontWeight="semi-bold"
-                      >{$t('trigger')}</Text
-                    >
+<UserPageLayout title={data.meta.title} actions={[Create]} scrollbar={false}>
+  <section class="flex place-content-center sm:mx-4">
+    <section class="w-full pb-28 sm:w-5/6 md:w-4xl">
+      {#if workflows.length === 0}
+        <EmptyPlaceholder
+          title={$t('create_first_workflow')}
+          text={$t('workflows_help_text')}
+          onClick={() => Create.onAction(Create)}
+          src={emptyWorkflows}
+          class="mt-10 mx-auto"
+        />
+      {:else}
+        <div class="my-6 grid gap-6">
+          {#each workflows as workflow (workflow.id)}
+            <Card class="border border-light-200">
+              <CardHeader
+                class={`flex flex-row px-8 py-6 gap-4 sm:items-center sm:gap-6 ${
+                  workflow.enabled
+                    ? 'bg-linear-to-r from-green-50 to-white dark:from-green-800/50 dark:to-green-950/45'
+                    : 'bg-neutral-50 dark:bg-neutral-900'
+                }`}
+              >
+                <div class="flex-1">
+                  <div class="flex items-center gap-3">
+                    <span
+                      class="rounded-full {workflow.enabled ? 'h-3 w-3 bg-success' : 'h-3 w-3 rounded-full bg-muted'}"
+                    ></span>
+                    <CardTitle>{workflow.name}</CardTitle>
                   </div>
-                  {@render chipItem(getTriggerLabel(workflow.triggerType))}
+                  <CardDescription class="mt-1 text-sm">
+                    {workflow.description || $t('workflows_help_text')}
+                  </CardDescription>
                 </div>
 
-                <!-- Filters Section -->
-                <div class="rounded-2xl border p-4 bg-light-50 border-light-200">
-                  <div class="mb-3">
-                    <Text class="text-xs uppercase tracking-widest" color="muted" fontWeight="semi-bold"
-                      >{$t('filters')}</Text
-                    >
+                <div class="flex items-center gap-4">
+                  <div class="text-right hidden sm:block">
+                    <Text size="tiny">{$t('created_at')}</Text>
+                    <Text size="small" fontWeight="medium">
+                      {formatTimestamp(workflow.createdAt)}
+                    </Text>
                   </div>
-                  <div class="flex flex-wrap gap-2">
-                    {#if workflow.filters.length === 0}
-                      <span class="text-sm text-light-600">
-                        {$t('no_filters_added')}
-                      </span>
-                    {:else}
-                      {#each workflow.filters as workflowFilter (workflowFilter.id)}
-                        {@render chipItem(getFilterLabel(workflowFilter.pluginFilterId))}
-                      {/each}
-                    {/if}
-                  </div>
-                </div>
-
-                <!-- Actions Section -->
-                <div class="rounded-2xl border p-4 bg-light-50 border-light-200">
-                  <div class="mb-3">
-                    <Text class="text-xs uppercase tracking-widest" color="muted" fontWeight="semi-bold"
-                      >{$t('actions')}</Text
-                    >
-                  </div>
-
-                  <div>
-                    {#if workflow.actions.length === 0}
-                      <span class="text-sm text-light-600">
-                        {$t('no_actions_added')}
-                      </span>
-                    {:else}
-                      <div class="flex flex-wrap gap-2">
-                        {#each workflow.actions as workflowAction (workflowAction.id)}
-                          {@render chipItem(getActionLabel(workflowAction.pluginActionId))}
-                        {/each}
-                      </div>
-                    {/if}
-                  </div>
-                </div>
-              </div>
-
-              {#if expandedWorkflows.has(workflow.id)}
-                <VStack gap={2} class="w-full rounded-2xl border bg-light-50 p-4 border-light-200 ">
-                  <CodeBlock code={getJson(workflow)} lineNumbers />
-                  <Button
-                    leadingIcon={mdiClose}
-                    fullWidth
+                  <IconButton
+                    shape="round"
                     variant="ghost"
                     color="secondary"
-                    onclick={() => toggleShowingSchema(workflow.id)}>{$t('close')}</Button
-                  >
-                </VStack>
-              {/if}
-            </CardBody>
-          </Card>
-        {/each}
-      </div>
-    {/if}
-  </PageContent>
+                    icon={mdiDotsVertical}
+                    aria-label={$t('menu')}
+                    onclick={(event: MouseEvent) => showWorkflowMenu(event, workflow)}
+                  />
+                </div>
+              </CardHeader>
+
+              <CardBody class="space-y-6">
+                <div class="grid gap-4 md:grid-cols-3">
+                  <!-- Trigger Section -->
+                  <div class="rounded-2xl border p-4 bg-light-50 border-light-200">
+                    <div class="mb-3">
+                      <Text class="text-xs uppercase tracking-widest" color="muted" fontWeight="semi-bold"
+                        >{$t('trigger')}</Text
+                      >
+                    </div>
+                    {@render chipItem(getTriggerLabel(workflow.triggerType))}
+                  </div>
+
+                  <!-- Filters Section -->
+                  <div class="rounded-2xl border p-4 bg-light-50 border-light-200">
+                    <div class="mb-3">
+                      <Text class="text-xs uppercase tracking-widest" color="muted" fontWeight="semi-bold"
+                        >{$t('filters')}</Text
+                      >
+                    </div>
+                    <div class="flex flex-wrap gap-2">
+                      {#if workflow.filters.length === 0}
+                        <span class="text-sm text-light-600">
+                          {$t('no_filters_added')}
+                        </span>
+                      {:else}
+                        {#each workflow.filters as workflowFilter (workflowFilter.id)}
+                          {@render chipItem(getFilterLabel(workflowFilter.pluginFilterId))}
+                        {/each}
+                      {/if}
+                    </div>
+                  </div>
+
+                  <!-- Actions Section -->
+                  <div class="rounded-2xl border p-4 bg-light-50 border-light-200">
+                    <div class="mb-3">
+                      <Text class="text-xs uppercase tracking-widest" color="muted" fontWeight="semi-bold"
+                        >{$t('actions')}</Text
+                      >
+                    </div>
+
+                    <div>
+                      {#if workflow.actions.length === 0}
+                        <span class="text-sm text-light-600">
+                          {$t('no_actions_added')}
+                        </span>
+                      {:else}
+                        <div class="flex flex-wrap gap-2">
+                          {#each workflow.actions as workflowAction (workflowAction.id)}
+                            {@render chipItem(getActionLabel(workflowAction.pluginActionId))}
+                          {/each}
+                        </div>
+                      {/if}
+                    </div>
+                  </div>
+                </div>
+
+                {#if expandedWorkflows.has(workflow.id)}
+                  <VStack gap={2} class="w-full rounded-2xl border bg-light-50 p-4 border-light-200 ">
+                    <CodeBlock code={getJson(workflow)} lineNumbers />
+                    <Button
+                      leadingIcon={mdiClose}
+                      fullWidth
+                      variant="ghost"
+                      color="secondary"
+                      onclick={() => toggleShowingSchema(workflow.id)}>{$t('close')}</Button
+                    >
+                  </VStack>
+                {/if}
+              </CardBody>
+            </Card>
+          {/each}
+        </div>
+      {/if}
+    </section>
+  </section>
 </UserPageLayout>

web/src/service-worker/broadcast-channel.ts

@@ -1,25 +0,0 @@
-import { handleCancel, handlePreload } from './request';
-
-export const installBroadcastChannelListener = () => {
-  const broadcast = new BroadcastChannel('immich');
-  // eslint-disable-next-line  unicorn/prefer-add-event-listener
-  broadcast.onmessage = (event) => {
-    if (!event.data) {
-      return;
-    }
-
-    const url = new URL(event.data.url, event.origin);
-
-    switch (event.data.type) {
-      case 'preload': {
-        handlePreload(url);
-        break;
-      }
-
-      case 'cancel': {
-        handleCancel(url);
-        break;
-      }
-    }
-  };
-};

web/src/service-worker/cache.ts

@@ -1,42 +0,0 @@
-import { version } from '$service-worker';
-
-const CACHE = `cache-${version}`;
-
-let _cache: Cache | undefined;
-const getCache = async () => {
-  if (_cache) {
-    return _cache;
-  }
-  _cache = await caches.open(CACHE);
-  return _cache;
-};
-
-export const get = async (key: string) => {
-  const cache = await getCache();
-  if (!cache) {
-    return;
-  }
-
-  return cache.match(key);
-};
-
-export const put = async (key: string, response: Response) => {
-  if (response.status !== 200) {
-    return;
-  }
-
-  const cache = await getCache();
-  if (!cache) {
-    return;
-  }
-
-  cache.put(key, response.clone());
-};
-
-export const prune = async () => {
-  for (const key of await caches.keys()) {
-    if (key !== CACHE) {
-      await caches.delete(key);
-    }
-  }
-};

web/src/service-worker/index.ts

@@ -2,9 +2,9 @@
 /// <reference no-default-lib="true"/>
 /// <reference lib="esnext" />
 /// <reference lib="webworker" />
-import { installBroadcastChannelListener } from './broadcast-channel';
-import { prune } from './cache';
-import { handleRequest } from './request';
+
+import { installMessageListener } from './messaging';
+import { handleFetch as handleAssetFetch } from './request';
 
 const ASSET_REQUEST_REGEX = /^\/api\/assets\/[a-f0-9-]+\/(original|thumbnail)/;
 
@@ -12,12 +12,10 @@ const sw = globalThis as unknown as ServiceWorkerGlobalScope;
 
 const handleActivate = (event: ExtendableEvent) => {
   event.waitUntil(sw.clients.claim());
-  event.waitUntil(prune());
 };
 
 const handleInstall = (event: ExtendableEvent) => {
   event.waitUntil(sw.skipWaiting());
-  // do not preload app resources
 };
 
 const handleFetch = (event: FetchEvent): void => {
@@ -28,7 +26,7 @@ const handleFetch = (event: FetchEvent): void => {
   // Cache requests for thumbnails
   const url = new URL(event.request.url);
   if (url.origin === self.location.origin && ASSET_REQUEST_REGEX.test(url.pathname)) {
-    event.respondWith(handleRequest(event.request));
+    event.respondWith(handleAssetFetch(event.request));
     return;
   }
 };
@@ -36,4 +34,4 @@ const handleFetch = (event: FetchEvent): void => {
 sw.addEventListener('install', handleInstall, { passive: true });
 sw.addEventListener('activate', handleActivate, { passive: true });
 sw.addEventListener('fetch', handleFetch, { passive: true });
-installBroadcastChannelListener();
+installMessageListener();

web/src/service-worker/messaging.ts

@@ -0,0 +1,53 @@
+/// <reference types="@sveltejs/kit" />
+/// <reference no-default-lib="true"/>
+/// <reference lib="esnext" />
+/// <reference lib="webworker" />
+
+import { handleCancel } from './request';
+
+const sw = globalThis as unknown as ServiceWorkerGlobalScope;
+
+/**
+ * Send acknowledgment for a request
+ */
+function sendAck(client: Client, requestId: string) {
+  client.postMessage({
+    type: 'ack',
+    requestId,
+  });
+}
+
+/**
+ * Handle 'cancel' request: cancel a pending request
+ */
+const handleCancelRequest = (client: Client, url: URL, requestId: string) => {
+  sendAck(client, requestId);
+  handleCancel(url);
+};
+
+export const installMessageListener = () => {
+  sw.addEventListener('message', (event) => {
+    if (!event.data?.requestId || !event.data?.type) {
+      return;
+    }
+
+    const requestId = event.data.requestId;
+
+    switch (event.data.type) {
+      case 'cancel': {
+        const url = event.data.url ? new URL(event.data.url, self.location.origin) : undefined;
+        if (!url) {
+          return;
+        }
+
+        const client = event.source;
+        if (!client) {
+          return;
+        }
+
+        handleCancelRequest(client, url, requestId);
+        break;
+      }
+    }
+  });
+};

web/src/service-worker/request.ts

@@ -1,73 +1,68 @@
-import { get, put } from './cache';
+/// <reference types="@sveltejs/kit" />
+/// <reference no-default-lib="true"/>
+/// <reference lib="esnext" />
+/// <reference lib="webworker" />
 
-const pendingRequests = new Map<string, AbortController>();
-
-const isURL = (request: URL | RequestInfo): request is URL => (request as URL).href !== undefined;
-const isRequest = (request: RequestInfo): request is Request => (request as Request).url !== undefined;
-
-const assertResponse = (response: Response) => {
-  if (!(response instanceof Response)) {
-    throw new TypeError('Fetch did not return a valid Response object');
-  }
+type PendingRequest = {
+  controller: AbortController;
+  promise: Promise<Response>;
+  cleanupTimeout?: ReturnType<typeof setTimeout>;
 };
 
-const getCacheKey = (request: URL | Request) => {
-  if (isURL(request)) {
-    return request.toString();
+const pendingRequests = new Map<string, PendingRequest>();
+
+const getRequestKey = (request: URL | Request): string => (request instanceof URL ? request.href : request.url);
+
+const CANCELATION_MESSAGE = 'Request canceled by application';
+const CLEANUP_TIMEOUT_MS = 5 * 60 * 1000; // 5 minutes
+
+export const handleFetch = (request: URL | Request): Promise<Response> => {
+  const requestKey = getRequestKey(request);
+  const existing = pendingRequests.get(requestKey);
+
+  if (existing) {
+    // Clone the response since response bodies can only be read once
+    // Each caller gets an independent clone they can consume
+    return existing.promise.then((response) => response.clone());
   }
 
-  if (isRequest(request)) {
-    return request.url;
-  }
+  const pendingRequest: PendingRequest = {
+    controller: new AbortController(),
+    promise: undefined as unknown as Promise<Response>,
+  };
+  pendingRequests.set(requestKey, pendingRequest);
 
-  throw new Error(`Invalid request: ${request}`);
-};
+  // NOTE: fetch returns after headers received, not the body
+  pendingRequest.promise = fetch(request, { signal: pendingRequest.controller.signal })
+    .catch((error: unknown) => {
+      const standardError = error instanceof Error ? error : new Error(String(error));
+      if (standardError.name === 'AbortError' || standardError.message === CANCELATION_MESSAGE) {
+        // dummy response avoids network errors in the console for these requests
+        return new Response(undefined, { status: 204 });
+      }
+      throw standardError;
+    })
+    .finally(() => {
+      // Schedule cleanup after timeout to allow response body streaming to complete
+      const cleanupTimeout = setTimeout(() => {
+        pendingRequests.delete(requestKey);
+      }, CLEANUP_TIMEOUT_MS);
+      pendingRequest.cleanupTimeout = cleanupTimeout;
+    });
 
-export const handlePreload = async (request: URL | Request) => {
-  try {
-    return await handleRequest(request);
-  } catch (error) {
-    console.error(`Preload failed: ${error}`);
-  }
-};
-
-export const handleRequest = async (request: URL | Request) => {
-  const cacheKey = getCacheKey(request);
-  const cachedResponse = await get(cacheKey);
-  if (cachedResponse) {
-    return cachedResponse;
-  }
-
-  try {
-    const cancelToken = new AbortController();
-    pendingRequests.set(cacheKey, cancelToken);
-    const response = await fetch(request, { signal: cancelToken.signal });
-
-    assertResponse(response);
-    put(cacheKey, response);
-
-    return response;
-  } catch (error) {
-    if (error.name === 'AbortError') {
-      // dummy response avoids network errors in the console for these requests
-      return new Response(undefined, { status: 204 });
-    }
-
-    console.log('Not an abort error', error);
-
-    throw error;
-  } finally {
-    pendingRequests.delete(cacheKey);
-  }
+  // Clone for the first caller to keep the original response unconsumed for future callers
+  return pendingRequest.promise.then((response) => response.clone());
 };
 
 export const handleCancel = (url: URL) => {
-  const cacheKey = getCacheKey(url);
-  const pendingRequest = pendingRequests.get(cacheKey);
-  if (!pendingRequest) {
-    return;
-  }
+  const requestKey = getRequestKey(url);
 
-  pendingRequest.abort();
-  pendingRequests.delete(cacheKey);
+  const pendingRequest = pendingRequests.get(requestKey);
+  if (pendingRequest) {
+    pendingRequest.controller.abort(CANCELATION_MESSAGE);
+    if (pendingRequest.cleanupTimeout) {
+      clearTimeout(pendingRequest.cleanupTimeout);
+    }
+    pendingRequests.delete(requestKey);
+  }
 };