Merge branch 'main' into push-qolzzzzxrvvn

.github/package.json

@@ -4,6 +4,6 @@
     "format:fix": "prettier --write ."
   },
   "devDependencies": {
-    "prettier": "^3.7.4"
+    "prettier": "^3.5.3"
   }
 }

.github/workflows/build-mobile.yml

@@ -222,7 +222,6 @@ jobs:
         uses: ruby/setup-ruby@v1
         with:
           ruby-version: '3.3'
-          bundler-cache: true
           working-directory: ./mobile/ios
 
       - name: Install CocoaPods dependencies
@@ -230,6 +229,13 @@ jobs:
         run: |
           pod install
 
+      - name: Install Fastlane
+        working-directory: ./mobile/ios
+        run: |
+          gem install bundler
+          bundle config set --local path 'vendor/bundle'
+          bundle install
+
       - name: Create API Key
         env:
           API_KEY_ID: ${{ secrets.APP_STORE_CONNECT_API_KEY_ID }}

cli/package.json

@@ -31,7 +31,7 @@
     "eslint-plugin-unicorn": "^62.0.0",
     "globals": "^16.0.0",
     "mock-fs": "^5.2.0",
-    "prettier": "^3.7.4",
+    "prettier": "^3.2.5",
     "prettier-plugin-organize-imports": "^4.0.0",
     "typescript": "^5.3.3",
     "typescript-eslint": "^8.28.0",

docker/docker-compose.dev.yml

@@ -58,6 +58,10 @@ services:
       IMMICH_THIRD_PARTY_BUG_FEATURE_URL: https://github.com/immich-app/immich/issues
       IMMICH_THIRD_PARTY_DOCUMENTATION_URL: https://docs.immich.app
       IMMICH_THIRD_PARTY_SUPPORT_URL: https://docs.immich.app/community-guides
+    ulimits:
+      nofile:
+        soft: 1048576
+        hard: 1048576
     ports:
       - 9230:9230
       - 9231:9231
@@ -96,6 +100,10 @@ services:
       - app-node_modules:/usr/src/app/node_modules
       - sveltekit:/usr/src/app/web/.svelte-kit
       - coverage:/usr/src/app/web/coverage
+    ulimits:
+      nofile:
+        soft: 1048576
+        hard: 1048576
     restart: unless-stopped
     depends_on:
       immich-server:

docs/docs/administration/reverse-proxy.md

@@ -32,6 +32,8 @@ server {
 
     # enable websockets: http://nginx.org/en/docs/http/websocket.html
     proxy_http_version 1.1;
+    proxy_set_header   Upgrade    $http_upgrade;
+    proxy_set_header   Connection "upgrade";
     proxy_redirect     off;
 
     # set timeout
@@ -41,8 +43,6 @@ server {
 
     location / {
         proxy_pass http://<backend_url>:2283;
-        proxy_set_header   Upgrade    $http_upgrade;
-        proxy_set_header   Connection "upgrade";
     }
 
     # useful when using Let's Encrypt http-01 challenge

docs/package.json

@@ -38,7 +38,7 @@
     "@docusaurus/module-type-aliases": "~3.9.0",
     "@docusaurus/tsconfig": "^3.7.0",
     "@docusaurus/types": "^3.7.0",
-    "prettier": "^3.7.4",
+    "prettier": "^3.2.4",
     "typescript": "^5.1.6"
   },
   "browserslist": {

e2e/package.json

@@ -36,14 +36,14 @@
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-prettier": "^5.1.3",
     "eslint-plugin-unicorn": "^62.0.0",
-    "exiftool-vendored": "^34.0.0",
+    "exiftool-vendored": "^33.0.0",
     "globals": "^16.0.0",
     "jose": "^5.6.3",
     "luxon": "^3.4.4",
     "oidc-provider": "^9.0.0",
     "pg": "^8.11.3",
     "pngjs": "^7.0.0",
-    "prettier": "^3.7.4",
+    "prettier": "^3.2.5",
     "prettier-plugin-organize-imports": "^4.0.0",
     "sharp": "^0.34.5",
     "socket.io-client": "^4.7.4",

i18n/en.json

@@ -78,6 +78,7 @@
     "exclusion_pattern_description": "Exclusion patterns lets you ignore files and folders when scanning your library. This is useful if you have folders that contain files you don't want to import, such as RAW files.",
     "export_config_as_json_description": "Download the current system config as a JSON file",
     "external_libraries_page_description": "Admin external library page",
+    "external_library_management": "External Library Management",
     "face_detection": "Face detection",
     "face_detection_description": "Detect the faces in assets using machine learning. For videos, only the thumbnail is considered. \"Refresh\" (re-)processes all assets. \"Reset\" additionally clears all current face data. \"Missing\" queues assets that haven't been processed yet. Detected faces will be queued for Facial Recognition after Face Detection is complete, grouping them into existing or new people.",
     "facial_recognition_job_description": "Group detected faces into people. This step runs after Face Detection is complete. \"Reset\" (re-)clusters all faces. \"Missing\" queues faces that don't have a person assigned.",
@@ -652,7 +653,6 @@
   "backup_options_page_title": "Backup options",
   "backup_setting_subtitle": "Manage background and foreground upload settings",
   "backup_settings_subtitle": "Manage upload settings",
-  "backup_upload_details_page_more_details": "Tap for more details",
   "backward": "Backward",
   "biometric_auth_enabled": "Biometric authentication enabled",
   "biometric_locked_out": "You are locked out of biometric authentication",
@@ -719,7 +719,6 @@
   "check_corrupt_asset_backup_button": "Perform check",
   "check_corrupt_asset_backup_description": "Run this check only over Wi-Fi and once all assets have been backed-up. The procedure might take a few minutes.",
   "check_logs": "Check Logs",
-  "checksum": "Checksum",
   "choose_matching_people_to_merge": "Choose matching people to merge",
   "city": "City",
   "clear": "Clear",
@@ -1168,7 +1167,6 @@
   "header_settings_header_name_input": "Header name",
   "header_settings_header_value_input": "Header value",
   "headers_settings_tile_title": "Custom proxy headers",
-  "height": "Height",
   "hi_user": "Hi {name} ({email})",
   "hide_all_people": "Hide all people",
   "hide_gallery": "Hide gallery",
@@ -1291,7 +1289,6 @@
   "local": "Local",
   "local_asset_cast_failed": "Unable to cast an asset that is not uploaded to the server",
   "local_assets": "Local Assets",
-  "local_id": "Local ID",
   "local_media_summary": "Local Media Summary",
   "local_network": "Local network",
   "local_network_sheet_info": "The app will connect to the server through this URL when using the specified Wi-Fi network",
@@ -2222,7 +2219,6 @@
   "week": "Week",
   "welcome": "Welcome",
   "welcome_to_immich": "Welcome to Immich",
-  "width": "Width",
   "wifi_name": "Wi-Fi Name",
   "workflow": "Workflow",
   "wrong_pin_code": "Wrong PIN code",

mobile/ios/Runner/Info.plist

@@ -137,7 +137,8 @@
 	<key>NSFaceIDUsageDescription</key>
 	<string>We need to use FaceID to allow access to your locked folder</string>
 	<key>NSLocalNetworkUsageDescription</key>
-	<string>We need local network permission to connect to the local server using IP address and allow the casting feature to work</string>
+	<string>We need local network permission to connect to the local server using IP address and
+      allow the casting feature to work</string>
 	<key>NSLocationAlwaysAndWhenInUseUsageDescription</key>
 	<string>We require this permission to access the local WiFi name for background upload mechanism</string>
 	<key>NSLocationUsageDescription</key>

mobile/lib/pages/backup/drift_upload_detail.page.dart

@@ -98,7 +98,7 @@ class DriftUploadDetailPage extends ConsumerWidget {
                             ),
                           ),
                         Text(
-                          "backup_upload_details_page_more_details".t(context: context),
+                          'Tap for more details',
                           style: context.textTheme.bodySmall?.copyWith(
                             color: context.colorScheme.onSurface.withValues(alpha: 0.6),
                           ),
@@ -239,20 +239,14 @@ class FileDetailDialog extends ConsumerWidget {
                   const SizedBox(height: 24),
                   if (asset != null) ...[
                     _buildInfoSection(context, [
-                      _buildInfoRow(context, "filename".t(context: context), path.basename(uploadStatus.filename)),
-                      _buildInfoRow(context, "local_id".t(context: context), asset.id),
-                      _buildInfoRow(
-                        context,
-                        "file_size".t(context: context),
-                        formatHumanReadableBytes(uploadStatus.fileSize, 2),
-                      ),
-                      if (asset.width != null) _buildInfoRow(context, "width".t(context: context), "${asset.width}px"),
-                      if (asset.height != null)
-                        _buildInfoRow(context, "height".t(context: context), "${asset.height}px"),
-                      _buildInfoRow(context, "created_at".t(context: context), asset.createdAt.toString()),
-                      _buildInfoRow(context, "updated_at".t(context: context), asset.updatedAt.toString()),
-                      if (asset.checksum != null)
-                        _buildInfoRow(context, "checksum".t(context: context), asset.checksum!),
+                      _buildInfoRow(context, "Filename", path.basename(uploadStatus.filename)),
+                      _buildInfoRow(context, "Local ID", asset.id),
+                      _buildInfoRow(context, "File Size", formatHumanReadableBytes(uploadStatus.fileSize, 2)),
+                      if (asset.width != null) _buildInfoRow(context, "Width", "${asset.width}px"),
+                      if (asset.height != null) _buildInfoRow(context, "Height", "${asset.height}px"),
+                      _buildInfoRow(context, "Created At", asset.createdAt.toString()),
+                      _buildInfoRow(context, "Updated At", asset.updatedAt.toString()),
+                      if (asset.checksum != null) _buildInfoRow(context, "Checksum", asset.checksum!),
                     ]),
                   ],
                 ],

mobile/lib/presentation/pages/dev/feat_in_development.page.dart

@@ -0,0 +1,173 @@
+import 'dart:async';
+
+import 'package:auto_route/auto_route.dart';
+import 'package:drift/drift.dart' hide Column;
+import 'package:easy_localization/easy_localization.dart';
+import 'package:flutter/material.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/domain/models/asset/base_asset.model.dart';
+import 'package:immich_mobile/providers/background_sync.provider.dart';
+import 'package:immich_mobile/providers/infrastructure/asset.provider.dart';
+import 'package:immich_mobile/providers/infrastructure/db.provider.dart';
+import 'package:immich_mobile/providers/infrastructure/platform.provider.dart';
+import 'package:immich_mobile/providers/user.provider.dart';
+import 'package:immich_mobile/routing/router.dart';
+import 'package:logging/logging.dart';
+
+final _features = [
+  _Feature(
+    name: 'Main Timeline',
+    icon: Icons.timeline_rounded,
+    onTap: (ctx, _) => ctx.pushRoute(const TabShellRoute()),
+  ),
+  _Feature(
+    name: 'Selection Mode Timeline',
+    icon: Icons.developer_mode_rounded,
+    onTap: (ctx, ref) async {
+      final user = ref.watch(currentUserProvider);
+      if (user == null) {
+        return Future.value();
+      }
+
+      final assets = await ref.read(remoteAssetRepositoryProvider).getSome(user.id);
+
+      final selectedAssets = await ctx.pushRoute<Set<BaseAsset>>(
+        DriftAssetSelectionTimelineRoute(lockedSelectionAssets: assets.toSet()),
+      );
+
+      Logger("FeaturesInDevelopment").fine("Selected ${selectedAssets?.length ?? 0} assets");
+
+      return Future.value();
+    },
+  ),
+  _Feature(name: '', icon: Icons.vertical_align_center_sharp, onTap: (_, __) => Future.value()),
+  _Feature(
+    name: 'Sync Local',
+    icon: Icons.photo_album_rounded,
+    onTap: (_, ref) => ref.read(backgroundSyncProvider).syncLocal(),
+  ),
+  _Feature(
+    name: 'Sync Local Full (1)',
+    icon: Icons.photo_library_rounded,
+    onTap: (_, ref) => ref.read(backgroundSyncProvider).syncLocal(full: true),
+  ),
+  _Feature(
+    name: 'Hash Local Assets (2)',
+    icon: Icons.numbers_outlined,
+    onTap: (_, ref) => ref.read(backgroundSyncProvider).hashAssets(),
+  ),
+  _Feature(
+    name: 'Sync Remote (3)',
+    icon: Icons.refresh_rounded,
+    onTap: (_, ref) => ref.read(backgroundSyncProvider).syncRemote(),
+  ),
+  _Feature(
+    name: 'WAL Checkpoint',
+    icon: Icons.save_rounded,
+    onTap: (_, ref) => ref.read(driftProvider).customStatement("pragma wal_checkpoint(truncate)"),
+  ),
+  _Feature(name: '', icon: Icons.vertical_align_center_sharp, onTap: (_, __) => Future.value()),
+  _Feature(
+    name: 'Clear Delta Checkpoint',
+    icon: Icons.delete_rounded,
+    onTap: (_, ref) => ref.read(nativeSyncApiProvider).clearSyncCheckpoint(),
+  ),
+  _Feature(
+    name: 'Clear Local Data',
+    style: const TextStyle(color: Colors.orange, fontWeight: FontWeight.bold),
+    icon: Icons.delete_forever_rounded,
+    onTap: (_, ref) async {
+      final db = ref.read(driftProvider);
+      await db.localAssetEntity.deleteAll();
+      await db.localAlbumEntity.deleteAll();
+      await db.localAlbumAssetEntity.deleteAll();
+    },
+  ),
+  _Feature(
+    name: 'Clear Remote Data',
+    style: const TextStyle(color: Colors.orange, fontWeight: FontWeight.bold),
+    icon: Icons.delete_sweep_rounded,
+    onTap: (_, ref) async {
+      final db = ref.read(driftProvider);
+      await db.remoteAssetEntity.deleteAll();
+      await db.remoteExifEntity.deleteAll();
+      await db.remoteAlbumEntity.deleteAll();
+      await db.remoteAlbumUserEntity.deleteAll();
+      await db.remoteAlbumAssetEntity.deleteAll();
+      await db.memoryEntity.deleteAll();
+      await db.memoryAssetEntity.deleteAll();
+      await db.stackEntity.deleteAll();
+      await db.personEntity.deleteAll();
+      await db.assetFaceEntity.deleteAll();
+    },
+  ),
+  _Feature(
+    name: 'Local Media Summary',
+    style: const TextStyle(color: Colors.indigo, fontWeight: FontWeight.bold),
+    icon: Icons.table_chart_rounded,
+    onTap: (ctx, _) => ctx.pushRoute(const LocalMediaSummaryRoute()),
+  ),
+  _Feature(
+    name: 'Remote Media Summary',
+    style: const TextStyle(color: Colors.indigo, fontWeight: FontWeight.bold),
+    icon: Icons.summarize_rounded,
+    onTap: (ctx, _) => ctx.pushRoute(const RemoteMediaSummaryRoute()),
+  ),
+  _Feature(
+    name: 'Reset Sqlite',
+    icon: Icons.table_view_rounded,
+    style: const TextStyle(color: Colors.red, fontWeight: FontWeight.bold),
+    onTap: (_, ref) async {
+      final drift = ref.read(driftProvider);
+      // ignore: invalid_use_of_protected_member, invalid_use_of_visible_for_testing_member
+      final migrator = drift.createMigrator();
+      for (final entity in drift.allSchemaEntities) {
+        await migrator.drop(entity);
+        await migrator.create(entity);
+      }
+    },
+  ),
+];
+
+@RoutePage()
+class FeatInDevPage extends StatelessWidget {
+  const FeatInDevPage({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: AppBar(title: Text('features_in_development'.tr()), centerTitle: true),
+      body: Column(
+        children: [
+          Flexible(
+            flex: 1,
+            child: ListView.builder(
+              itemBuilder: (_, index) {
+                final feat = _features[index];
+                return Consumer(
+                  builder: (ctx, ref, _) => ListTile(
+                    title: Text(feat.name, style: feat.style),
+                    trailing: Icon(feat.icon),
+                    visualDensity: VisualDensity.compact,
+                    onTap: () => unawaited(feat.onTap(ctx, ref)),
+                  ),
+                );
+              },
+              itemCount: _features.length,
+            ),
+          ),
+          const Divider(height: 0),
+        ],
+      ),
+    );
+  }
+}
+
+class _Feature {
+  const _Feature({required this.name, required this.icon, required this.onTap, this.style});
+
+  final String name;
+  final IconData icon;
+  final TextStyle? style;
+  final Future<void> Function(BuildContext, WidgetRef _) onTap;
+}

mobile/lib/presentation/pages/dev/ui_showcase.page.dart

@@ -1,51 +0,0 @@
-import 'package:auto_route/auto_route.dart';
-import 'package:flutter/material.dart';
-import 'package:immich_mobile/extensions/build_context_extensions.dart';
-import 'package:immich_ui/immich_ui.dart';
-
-List<Widget> _showcaseBuilder(Function(ImmichVariant variant, ImmichColor color) builder) {
-  final children = <Widget>[];
-
-  final items = [
-    (variant: ImmichVariant.filled, title: "Filled Variant"),
-    (variant: ImmichVariant.ghost, title: "Ghost Variant"),
-  ];
-
-  for (final (:variant, :title) in items) {
-    children.add(Text(title));
-    children.add(Row(spacing: 10, children: [for (var color in ImmichColor.values) builder(variant, color)]));
-  }
-
-  return children;
-}
-
-@RoutePage()
-class ImmichUIShowcasePage extends StatelessWidget {
-  const ImmichUIShowcasePage({super.key});
-
-  @override
-  Widget build(BuildContext context) {
-    return Scaffold(
-      appBar: AppBar(title: const Text('Immich UI Showcase')),
-      body: Padding(
-        padding: const EdgeInsets.all(20),
-        child: SingleChildScrollView(
-          child: Column(
-            spacing: 10,
-            mainAxisAlignment: MainAxisAlignment.start,
-            crossAxisAlignment: CrossAxisAlignment.start,
-            children: [
-              Text("IconButton", style: context.textTheme.titleLarge),
-              ..._showcaseBuilder(
-                (variant, color) =>
-                    ImmichIconButton(icon: Icons.favorite, color: color, variant: variant, onTap: () {}),
-              ),
-              Text("CloseButton", style: context.textTheme.titleLarge),
-              ..._showcaseBuilder((variant, color) => ImmichCloseButton(color: color, variant: variant, onTap: () {})),
-            ],
-          ),
-        ),
-      ),
-    );
-  }
-}

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

@@ -37,7 +37,7 @@ class DriftActivitiesPage extends HookConsumerWidget {
       child: Scaffold(
         appBar: AppBar(
           title: Text(album.name),
-          actions: [const LikeActivityActionButton(iconOnly: true)],
+          actions: [const LikeActivityActionButton(menuItem: true)],
           actionsPadding: const EdgeInsets.only(right: 8),
         ),
         body: activities.widgetWhen(

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

@@ -27,19 +27,8 @@ class _DriftCreateAlbumPageState extends ConsumerState<DriftCreateAlbumPage> {
   bool isAlbumTitleTextFieldFocus = false;
   Set<BaseAsset> selectedAssets = {};
 
-  @override
-  void initState() {
-    super.initState();
-    albumTitleController.addListener(_onTitleChanged);
-  }
-
-  void _onTitleChanged() {
-    setState(() {});
-  }
-
   @override
   void dispose() {
-    albumTitleController.removeListener(_onTitleChanged);
     albumTitleController.dispose();
     albumDescriptionController.dispose();
     albumTitleTextFieldFocusNode.dispose();

mobile/lib/presentation/pages/editing/drift_crop.page.dart

@@ -9,7 +9,6 @@ import 'package:immich_mobile/domain/models/asset/base_asset.model.dart';
 import 'package:immich_mobile/extensions/build_context_extensions.dart';
 import 'package:immich_mobile/routing/router.dart';
 import 'package:immich_mobile/utils/hooks/crop_controller_hook.dart';
-import 'package:immich_ui/immich_ui.dart';
 
 /// A widget for cropping an image.
 /// This widget uses [HookWidget] to manage its lifecycle and state. It allows
@@ -31,13 +30,11 @@ class DriftCropImagePage extends HookWidget {
       appBar: AppBar(
         backgroundColor: context.scaffoldBackgroundColor,
         title: Text("crop".tr()),
-        leading: const ImmichCloseButton(),
+        leading: CloseButton(color: context.primaryColor),
         actions: [
-          ImmichIconButton(
-            icon: Icons.done_rounded,
-            color: ImmichColor.primary,
-            variant: ImmichVariant.ghost,
-            onTap: () async {
+          IconButton(
+            icon: Icon(Icons.done_rounded, color: context.primaryColor, size: 24),
+            onPressed: () async {
               final croppedImage = await cropController.croppedImage();
               unawaited(context.pushRoute(DriftEditImageRoute(asset: asset, image: croppedImage, isEdited: true)));
             },
@@ -75,17 +72,17 @@ class DriftCropImagePage extends HookWidget {
                             child: Row(
                               mainAxisAlignment: MainAxisAlignment.spaceBetween,
                               children: [
-                                ImmichIconButton(
-                                  icon: Icons.rotate_left,
-                                  variant: ImmichVariant.ghost,
-                                  color: ImmichColor.secondary,
-                                  onTap: () => cropController.rotateLeft(),
+                                IconButton(
+                                  icon: Icon(Icons.rotate_left, color: context.themeData.iconTheme.color),
+                                  onPressed: () {
+                                    cropController.rotateLeft();
+                                  },
                                 ),
-                                ImmichIconButton(
-                                  icon: Icons.rotate_right,
-                                  variant: ImmichVariant.ghost,
-                                  color: ImmichColor.secondary,
-                                  onTap: () => cropController.rotateRight(),
+                                IconButton(
+                                  icon: Icon(Icons.rotate_right, color: context.themeData.iconTheme.color),
+                                  onPressed: () {
+                                    cropController.rotateRight();
+                                  },
                                 ),
                               ],
                             ),

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

@@ -21,36 +21,12 @@ import 'package:immich_mobile/presentation/widgets/bottom_sheet/base_bottom_shee
 
 enum AddToMenuItem { album, archive, unarchive, lockedFolder }
 
-class AddActionButton extends ConsumerStatefulWidget {
-  const AddActionButton({super.key, this.originalTheme});
+class AddActionButton extends ConsumerWidget {
+  const AddActionButton({super.key});
 
-  final ThemeData? originalTheme;
-
-  @override
-  ConsumerState<AddActionButton> createState() => _AddActionButtonState();
-}
-
-class _AddActionButtonState extends ConsumerState<AddActionButton> {
-  void _handleMenuSelection(AddToMenuItem selected) {
-    switch (selected) {
-      case AddToMenuItem.album:
-        _openAlbumSelector();
-        break;
-      case AddToMenuItem.archive:
-        performArchiveAction(context, ref, source: ActionSource.viewer);
-        break;
-      case AddToMenuItem.unarchive:
-        performUnArchiveAction(context, ref, source: ActionSource.viewer);
-        break;
-      case AddToMenuItem.lockedFolder:
-        performMoveToLockFolderAction(context, ref, source: ActionSource.viewer);
-        break;
-    }
-  }
-
-  List<Widget> _buildMenuChildren() {
+  Future<void> _showAddOptions(BuildContext context, WidgetRef ref) async {
     final asset = ref.read(currentAssetNotifier);
-    if (asset == null) return [];
+    if (asset == null) return;
 
     final user = ref.read(currentUserProvider);
     final isOwner = asset is RemoteAsset && asset.ownerId == user?.id;
@@ -59,57 +35,93 @@ class _AddActionButtonState extends ConsumerState<AddActionButton> {
     final hasRemote = asset is RemoteAsset;
     final showArchive = isOwner && !isInLockedView && hasRemote && !isArchived;
     final showUnarchive = isOwner && !isInLockedView && hasRemote && isArchived;
+    final menuItemHeight = 30.0;
 
-    return [
-      Padding(
-        padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
-        child: Text("add_to_bottom_bar".tr(), style: context.textTheme.labelMedium),
+    final List<PopupMenuEntry<AddToMenuItem>> items = [
+      PopupMenuItem(
+        enabled: false,
+        textStyle: context.textTheme.labelMedium,
+        height: 40,
+        child: Text("add_to_bottom_bar".tr()),
       ),
-      BaseActionButton(
-        iconData: Icons.photo_album_outlined,
-        label: "album".tr(),
-        menuItem: true,
-        onPressed: () => _handleMenuSelection(AddToMenuItem.album),
+      PopupMenuItem(
+        height: menuItemHeight,
+        value: AddToMenuItem.album,
+        child: ListTile(leading: const Icon(Icons.photo_album_outlined), title: Text("album".tr())),
       ),
-
+      const PopupMenuDivider(),
+      PopupMenuItem(enabled: false, textStyle: context.textTheme.labelMedium, height: 40, child: Text("move_to".tr())),
       if (isOwner) ...[
-        const Divider(),
-        Padding(
-          padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
-          child: Text("move_to".tr(), style: context.textTheme.labelMedium),
-        ),
         if (showArchive)
-          BaseActionButton(
-            iconData: Icons.archive_outlined,
-            label: "archive".tr(),
-            menuItem: true,
-            onPressed: () => _handleMenuSelection(AddToMenuItem.archive),
+          PopupMenuItem(
+            height: menuItemHeight,
+            value: AddToMenuItem.archive,
+            child: ListTile(leading: const Icon(Icons.archive_outlined), title: Text("archive".tr())),
           ),
         if (showUnarchive)
-          BaseActionButton(
-            iconData: Icons.unarchive_outlined,
-            label: "unarchive".tr(),
-            menuItem: true,
-            onPressed: () => _handleMenuSelection(AddToMenuItem.unarchive),
+          PopupMenuItem(
+            height: menuItemHeight,
+            value: AddToMenuItem.unarchive,
+            child: ListTile(leading: const Icon(Icons.unarchive_outlined), title: Text("unarchive".tr())),
           ),
-        BaseActionButton(
-          iconData: Icons.lock_outline,
-          label: "locked_folder".tr(),
-          menuItem: true,
-          onPressed: () => _handleMenuSelection(AddToMenuItem.lockedFolder),
+        PopupMenuItem(
+          height: menuItemHeight,
+          value: AddToMenuItem.lockedFolder,
+          child: ListTile(leading: const Icon(Icons.lock_outline), title: Text("locked_folder".tr())),
         ),
       ],
     ];
+
+    final AddToMenuItem? selected = await showMenu<AddToMenuItem>(
+      context: context,
+      color: context.themeData.scaffoldBackgroundColor,
+      position: _menuPosition(context),
+      items: items,
+      popUpAnimationStyle: AnimationStyle.noAnimation,
+    );
+
+    if (selected == null) {
+      return;
+    }
+
+    switch (selected) {
+      case AddToMenuItem.album:
+        _openAlbumSelector(context, ref);
+        break;
+      case AddToMenuItem.archive:
+        await performArchiveAction(context, ref, source: ActionSource.viewer);
+        break;
+      case AddToMenuItem.unarchive:
+        await performUnArchiveAction(context, ref, source: ActionSource.viewer);
+        break;
+      case AddToMenuItem.lockedFolder:
+        await performMoveToLockFolderAction(context, ref, source: ActionSource.viewer);
+        break;
+    }
   }
 
-  void _openAlbumSelector() {
+  RelativeRect _menuPosition(BuildContext context) {
+    final renderObject = context.findRenderObject();
+    if (renderObject is! RenderBox) {
+      return RelativeRect.fill;
+    }
+
+    final size = renderObject.size;
+    final position = renderObject.localToGlobal(Offset.zero);
+
+    return RelativeRect.fromLTRB(position.dx, position.dy - size.height - 200, position.dx + size.width, position.dy);
+  }
+
+  void _openAlbumSelector(BuildContext context, WidgetRef ref) {
     final currentAsset = ref.read(currentAssetNotifier);
     if (currentAsset == null) {
       ImmichToast.show(context: context, msg: "Cannot load asset information.", toastType: ToastType.error);
       return;
     }
 
-    final List<Widget> slivers = [AlbumSelector(onAlbumSelected: (album) => _addCurrentAssetToAlbum(album))];
+    final List<Widget> slivers = [
+      AlbumSelector(onAlbumSelected: (album) => _addCurrentAssetToAlbum(context, ref, album)),
+    ];
 
     showModalBottomSheet(
       context: context,
@@ -129,7 +141,7 @@ class _AddActionButtonState extends ConsumerState<AddActionButton> {
     );
   }
 
-  Future<void> _addCurrentAssetToAlbum(RemoteAlbum album) async {
+  Future<void> _addCurrentAssetToAlbum(BuildContext context, WidgetRef ref, RemoteAlbum album) async {
     final latest = ref.read(currentAssetNotifier);
 
     if (latest == null) {
@@ -162,38 +174,17 @@ class _AddActionButtonState extends ConsumerState<AddActionButton> {
   }
 
   @override
-  Widget build(BuildContext context) {
+  Widget build(BuildContext context, WidgetRef ref) {
     final asset = ref.watch(currentAssetNotifier);
     if (asset == null) {
       return const SizedBox.shrink();
     }
-
-    final themeData = widget.originalTheme ?? context.themeData;
-
-    return MenuAnchor(
-      consumeOutsideTap: true,
-      style: MenuStyle(
-        backgroundColor: WidgetStatePropertyAll(themeData.scaffoldBackgroundColor),
-        surfaceTintColor: const WidgetStatePropertyAll(Colors.grey),
-        elevation: const WidgetStatePropertyAll(4),
-        shape: const WidgetStatePropertyAll(
-          RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(12))),
-        ),
-        padding: const WidgetStatePropertyAll(EdgeInsets.symmetric(vertical: 6)),
-      ),
-      menuChildren: widget.originalTheme != null
-          ? [
-              Theme(
-                data: widget.originalTheme!,
-                child: Column(crossAxisAlignment: CrossAxisAlignment.start, children: _buildMenuChildren()),
-              ),
-            ]
-          : _buildMenuChildren(),
-      builder: (context, controller, child) {
+    return Builder(
+      builder: (buttonContext) {
         return BaseActionButton(
           iconData: Icons.add,
           label: "add_to_bottom_bar".tr(),
-          onPressed: () => controller.isOpen ? controller.close() : controller.open(),
+          onPressed: () => _showAddOptions(buttonContext, ref),
         );
       },
     );

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

@@ -1,8 +1,7 @@
 import 'package:flutter/material.dart';
-import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:immich_mobile/extensions/build_context_extensions.dart';
 
-class BaseActionButton extends ConsumerWidget {
+class BaseActionButton extends StatelessWidget {
   const BaseActionButton({
     super.key,
     required this.label,
@@ -12,7 +11,6 @@ class BaseActionButton extends ConsumerWidget {
     this.onLongPressed,
     this.maxWidth = 90.0,
     this.minWidth,
-    this.iconOnly = false,
     this.menuItem = false,
   });
 
@@ -21,42 +19,25 @@ class BaseActionButton extends ConsumerWidget {
   final Color? iconColor;
   final double maxWidth;
   final double? minWidth;
-
-  /// When true, renders only an IconButton without text label
-  final bool iconOnly;
-
-  /// When true, renders as a MenuItemButton for use in MenuAnchor menus
   final bool menuItem;
   final void Function()? onPressed;
   final void Function()? onLongPressed;
 
   @override
-  Widget build(BuildContext context, WidgetRef ref) {
+  Widget build(BuildContext context) {
     final miniWidth = minWidth ?? (context.isMobile ? context.width / 4.5 : 75.0);
     final iconTheme = IconTheme.of(context);
     final iconSize = iconTheme.size ?? 24.0;
     final iconColor = this.iconColor ?? iconTheme.color ?? context.themeData.iconTheme.color;
     final textColor = context.themeData.textTheme.labelLarge?.color;
 
-    if (iconOnly) {
+    if (menuItem) {
       return IconButton(
         onPressed: onPressed,
         icon: Icon(iconData, size: iconSize, color: iconColor),
       );
     }
 
-    if (menuItem) {
-      final theme = context.themeData;
-      final effectiveIconColor = iconColor ?? theme.iconTheme.color ?? theme.colorScheme.onSurfaceVariant;
-
-      return MenuItemButton(
-        style: MenuItemButton.styleFrom(alignment: Alignment.centerLeft, padding: const EdgeInsets.all(16)),
-        leadingIcon: Icon(iconData, color: effectiveIconColor),
-        onPressed: onPressed,
-        child: Text(label, style: theme.textTheme.labelLarge?.copyWith(fontSize: 16)),
-      );
-    }
-
     return ConstrainedBox(
       constraints: BoxConstraints(maxWidth: maxWidth),
       child: MaterialButton(

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

@@ -7,9 +7,8 @@ import 'package:immich_mobile/providers/cast.provider.dart';
 import 'package:immich_mobile/widgets/asset_viewer/cast_dialog.dart';
 
 class CastActionButton extends ConsumerWidget {
-  const CastActionButton({super.key, this.iconOnly = false, this.menuItem = false});
+  const CastActionButton({super.key, this.menuItem = true});
 
-  final bool iconOnly;
   final bool menuItem;
 
   @override
@@ -23,7 +22,6 @@ class CastActionButton extends ConsumerWidget {
       onPressed: () {
         showDialog(context: context, builder: (context) => const CastDialog());
       },
-      iconOnly: iconOnly,
       menuItem: menuItem,
     );
   }

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

@@ -10,9 +10,8 @@ import 'package:immich_mobile/providers/timeline/multiselect.provider.dart';
 
 class DownloadActionButton extends ConsumerWidget {
   final ActionSource source;
-  final bool iconOnly;
   final bool menuItem;
-  const DownloadActionButton({super.key, required this.source, this.iconOnly = false, this.menuItem = false});
+  const DownloadActionButton({super.key, required this.source, this.menuItem = false});
 
   void _onTap(BuildContext context, WidgetRef ref, BackgroundSyncManager backgroundSyncManager) async {
     if (!context.mounted) {
@@ -39,7 +38,6 @@ class DownloadActionButton extends ConsumerWidget {
       iconData: Icons.download,
       maxWidth: 95,
       label: "download".t(context: context),
-      iconOnly: iconOnly,
       menuItem: menuItem,
       onPressed: () => _onTap(context, ref, backgroundManager),
     );

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

@@ -10,10 +10,9 @@ import 'package:immich_mobile/widgets/common/immich_toast.dart';
 
 class FavoriteActionButton extends ConsumerWidget {
   final ActionSource source;
-  final bool iconOnly;
   final bool menuItem;
 
-  const FavoriteActionButton({super.key, required this.source, this.iconOnly = false, this.menuItem = false});
+  const FavoriteActionButton({super.key, required this.source, this.menuItem = false});
 
   void _onTap(BuildContext context, WidgetRef ref) async {
     if (!context.mounted) {
@@ -45,7 +44,6 @@ class FavoriteActionButton extends ConsumerWidget {
     return BaseActionButton(
       iconData: Icons.favorite_border_rounded,
       label: "favorite".t(context: context),
-      iconOnly: iconOnly,
       menuItem: menuItem,
       onPressed: () => _onTap(context, ref),
     );

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

@@ -12,9 +12,8 @@ import 'package:immich_mobile/providers/infrastructure/current_album.provider.da
 import 'package:immich_mobile/providers/user.provider.dart';
 
 class LikeActivityActionButton extends ConsumerWidget {
-  const LikeActivityActionButton({super.key, this.iconOnly = false, this.menuItem = false});
+  const LikeActivityActionButton({super.key, this.menuItem = false});
 
-  final bool iconOnly;
   final bool menuItem;
 
   @override
@@ -50,7 +49,6 @@ class LikeActivityActionButton extends ConsumerWidget {
           iconData: liked != null ? Icons.favorite : Icons.favorite_border,
           label: "like".t(context: context),
           onPressed: () => onTap(liked),
-          iconOnly: iconOnly,
           menuItem: menuItem,
         );
       },
@@ -59,7 +57,6 @@ class LikeActivityActionButton extends ConsumerWidget {
       loading: () => BaseActionButton(
         iconData: Icons.favorite_border,
         label: "like".t(context: context),
-        iconOnly: iconOnly,
         menuItem: menuItem,
       ),
       error: (error, stack) => Text('error_saving_image'.tr(args: [error.toString()])),

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

@@ -5,9 +5,8 @@ import 'package:immich_mobile/presentation/widgets/action_buttons/base_action_bu
 import 'package:immich_mobile/providers/asset_viewer/is_motion_video_playing.provider.dart';
 
 class MotionPhotoActionButton extends ConsumerWidget {
-  const MotionPhotoActionButton({super.key, this.iconOnly = false, this.menuItem = false});
+  const MotionPhotoActionButton({super.key, this.menuItem = true});
 
-  final bool iconOnly;
   final bool menuItem;
 
   @override
@@ -18,7 +17,6 @@ class MotionPhotoActionButton extends ConsumerWidget {
       iconData: isPlaying ? Icons.motion_photos_pause_outlined : Icons.play_circle_outline_rounded,
       label: "play_motion_photo".t(context: context),
       onPressed: ref.read(isPlayingMotionVideoProvider.notifier).toggle,
-      iconOnly: iconOnly,
       menuItem: menuItem,
     );
   }

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

@@ -10,10 +10,9 @@ import 'package:immich_mobile/widgets/common/immich_toast.dart';
 
 class UnFavoriteActionButton extends ConsumerWidget {
   final ActionSource source;
-  final bool iconOnly;
   final bool menuItem;
 
-  const UnFavoriteActionButton({super.key, required this.source, this.iconOnly = false, this.menuItem = false});
+  const UnFavoriteActionButton({super.key, required this.source, this.menuItem = false});
 
   void _onTap(BuildContext context, WidgetRef ref) async {
     if (!context.mounted) {
@@ -46,7 +45,6 @@ class UnFavoriteActionButton extends ConsumerWidget {
       iconData: Icons.favorite_rounded,
       label: "unfavorite".t(context: context),
       onPressed: () => _onTap(context, ref),
-      iconOnly: iconOnly,
       menuItem: menuItem,
     );
   }

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

@@ -38,13 +38,11 @@ class ViewerBottomBar extends ConsumerWidget {
       opacity = 0;
     }
 
-    final originalTheme = context.themeData;
-
     final actions = <Widget>[
       const ShareActionButton(source: ActionSource.viewer),
       if (asset.isLocalOnly) const UploadActionButton(source: ActionSource.viewer),
       if (asset.type == AssetType.image) const EditImageActionButton(),
-      if (asset.hasRemote) AddActionButton(originalTheme: originalTheme),
+      if (asset.hasRemote) const AddActionButton(),
 
       if (isOwner) ...[
         asset.isLocalOnly

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

@@ -4,19 +4,25 @@ import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:immich_mobile/constants/enums.dart';
 import 'package:immich_mobile/domain/models/asset/base_asset.model.dart';
 import 'package:immich_mobile/domain/models/events.model.dart';
+import 'package:immich_mobile/domain/services/timeline.service.dart';
 import 'package:immich_mobile/domain/utils/event_stream.dart';
 import 'package:immich_mobile/extensions/build_context_extensions.dart';
+import 'package:immich_mobile/extensions/translate_extensions.dart';
+import 'package:immich_mobile/presentation/widgets/action_buttons/cast_action_button.widget.dart';
+import 'package:immich_mobile/presentation/widgets/action_buttons/download_action_button.widget.dart';
 import 'package:immich_mobile/presentation/widgets/action_buttons/favorite_action_button.widget.dart';
 import 'package:immich_mobile/presentation/widgets/action_buttons/motion_photo_action_button.widget.dart';
 import 'package:immich_mobile/presentation/widgets/action_buttons/unfavorite_action_button.widget.dart';
 import 'package:immich_mobile/presentation/widgets/asset_viewer/asset_viewer.state.dart';
-import 'package:immich_mobile/presentation/widgets/asset_viewer/viewer_kebab_menu.widget.dart';
 import 'package:immich_mobile/providers/activity.provider.dart';
+import 'package:immich_mobile/providers/cast.provider.dart';
 import 'package:immich_mobile/providers/infrastructure/asset_viewer/current_asset.provider.dart';
 import 'package:immich_mobile/providers/infrastructure/current_album.provider.dart';
 import 'package:immich_mobile/providers/infrastructure/readonly_mode.provider.dart';
+import 'package:immich_mobile/providers/infrastructure/timeline.provider.dart';
 import 'package:immich_mobile/providers/routes.provider.dart';
 import 'package:immich_mobile/providers/user.provider.dart';
+import 'package:immich_mobile/routing/router.dart';
 
 class ViewerTopAppBar extends ConsumerWidget implements PreferredSizeWidget {
   const ViewerTopAppBar({super.key});
@@ -35,6 +41,15 @@ class ViewerTopAppBar extends ConsumerWidget implements PreferredSizeWidget {
     final isInLockedView = ref.watch(inLockedViewProvider);
     final isReadonlyModeEnabled = ref.watch(readonlyModeProvider);
 
+    final timelineOrigin = ref.read(timelineServiceProvider).origin;
+    final showViewInTimelineButton =
+        timelineOrigin != TimelineOrigin.main &&
+        timelineOrigin != TimelineOrigin.deepLink &&
+        timelineOrigin != TimelineOrigin.trash &&
+        timelineOrigin != TimelineOrigin.archive &&
+        timelineOrigin != TimelineOrigin.localAlbum &&
+        isOwner;
+
     final isShowingSheet = ref.watch(assetViewerProvider.select((state) => state.showingBottomSheet));
     int opacity = ref.watch(assetViewerProvider.select((state) => state.backgroundOpacity));
     final showControls = ref.watch(assetViewerProvider.select((s) => s.showingControls));
@@ -47,10 +62,11 @@ class ViewerTopAppBar extends ConsumerWidget implements PreferredSizeWidget {
       opacity = 0;
     }
 
-    final originalTheme = context.themeData;
+    final isCasting = ref.watch(castProvider.select((c) => c.isCasting));
 
     final actions = <Widget>[
-      if (asset.isMotionPhoto) const MotionPhotoActionButton(iconOnly: true),
+      if (asset.isRemoteOnly) const DownloadActionButton(source: ActionSource.viewer, menuItem: true),
+      if (isCasting || (asset.hasRemote)) const CastActionButton(menuItem: true),
       if (album != null && album.isActivityEnabled && album.isShared)
         IconButton(
           icon: const Icon(Icons.chat_outlined),
@@ -58,16 +74,28 @@ class ViewerTopAppBar extends ConsumerWidget implements PreferredSizeWidget {
             EventStream.shared.emit(const ViewerOpenBottomSheetEvent(activitiesMode: true));
           },
         ),
-
+      if (showViewInTimelineButton)
+        IconButton(
+          onPressed: () async {
+            await context.maybePop();
+            await context.navigateTo(const TabShellRoute(children: [MainTimelineRoute()]));
+            EventStream.shared.emit(ScrollToDateEvent(asset.createdAt));
+          },
+          icon: const Icon(Icons.image_search),
+          tooltip: 'view_in_timeline'.t(context: context),
+        ),
       if (asset.hasRemote && isOwner && !asset.isFavorite)
-        const FavoriteActionButton(source: ActionSource.viewer, iconOnly: true),
+        const FavoriteActionButton(source: ActionSource.viewer, menuItem: true),
       if (asset.hasRemote && isOwner && asset.isFavorite)
-        const UnFavoriteActionButton(source: ActionSource.viewer, iconOnly: true),
-
-      ViewerKebabMenu(originalTheme: originalTheme),
+        const UnFavoriteActionButton(source: ActionSource.viewer, menuItem: true),
+      if (asset.isMotionPhoto) const MotionPhotoActionButton(menuItem: true),
+      const _KebabMenu(),
     ];
 
-    final lockedViewActions = <Widget>[ViewerKebabMenu(originalTheme: originalTheme)];
+    final lockedViewActions = <Widget>[
+      if (isCasting || (asset.hasRemote)) const CastActionButton(menuItem: true),
+      const _KebabMenu(),
+    ];
 
     return IgnorePointer(
       ignoring: opacity < 255,
@@ -94,6 +122,20 @@ class ViewerTopAppBar extends ConsumerWidget implements PreferredSizeWidget {
   Size get preferredSize => const Size.fromHeight(60.0);
 }
 
+class _KebabMenu extends ConsumerWidget {
+  const _KebabMenu();
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    return IconButton(
+      onPressed: () {
+        EventStream.shared.emit(const ViewerOpenBottomSheetEvent());
+      },
+      icon: const Icon(Icons.more_vert_rounded),
+    );
+  }
+}
+
 class _AppBarBackButton extends ConsumerWidget {
   const _AppBarBackButton();
 

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

@@ -1,67 +0,0 @@
-import 'package:flutter/material.dart';
-import 'package:hooks_riverpod/hooks_riverpod.dart';
-import 'package:immich_mobile/domain/models/asset/base_asset.model.dart';
-import 'package:immich_mobile/extensions/build_context_extensions.dart';
-import 'package:immich_mobile/providers/cast.provider.dart';
-import 'package:immich_mobile/providers/infrastructure/asset_viewer/current_asset.provider.dart';
-import 'package:immich_mobile/providers/infrastructure/timeline.provider.dart';
-import 'package:immich_mobile/providers/user.provider.dart';
-import 'package:immich_mobile/utils/action_button.utils.dart';
-
-class ViewerKebabMenu extends ConsumerWidget {
-  const ViewerKebabMenu({super.key, this.originalTheme});
-
-  final ThemeData? originalTheme;
-
-  @override
-  Widget build(BuildContext context, WidgetRef ref) {
-    final asset = ref.watch(currentAssetNotifier);
-    if (asset == null) {
-      return const SizedBox.shrink();
-    }
-
-    final user = ref.watch(currentUserProvider);
-    final isOwner = asset is RemoteAsset && asset.ownerId == user?.id;
-    final isCasting = ref.watch(castProvider.select((c) => c.isCasting));
-    final timelineOrigin = ref.read(timelineServiceProvider).origin;
-
-    final kebabContext = ViewerKebabMenuButtonContext(
-      asset: asset,
-      isOwner: isOwner,
-      isCasting: isCasting,
-      timelineOrigin: timelineOrigin,
-      originalTheme: originalTheme,
-    );
-
-    final menuChildren = ViewerKebabMenuButtonBuilder.build(kebabContext, context, ref);
-
-    return MenuAnchor(
-      consumeOutsideTap: true,
-      style: MenuStyle(
-        backgroundColor: WidgetStatePropertyAll(context.themeData.scaffoldBackgroundColor),
-        surfaceTintColor: const WidgetStatePropertyAll(Colors.grey),
-        elevation: const WidgetStatePropertyAll(4),
-        shape: const WidgetStatePropertyAll(
-          RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(12))),
-        ),
-        padding: const WidgetStatePropertyAll(EdgeInsets.symmetric(vertical: 6)),
-      ),
-      menuChildren: [
-        ConstrainedBox(
-          constraints: const BoxConstraints(minWidth: 150),
-          child: Column(
-            mainAxisSize: MainAxisSize.min,
-            crossAxisAlignment: CrossAxisAlignment.stretch,
-            children: menuChildren,
-          ),
-        ),
-      ],
-      builder: (context, controller, child) {
-        return IconButton(
-          icon: const Icon(Icons.more_vert_rounded),
-          onPressed: () => controller.isOpen ? controller.close() : controller.open(),
-        );
-      },
-    );
-  }
-}

mobile/lib/presentation/widgets/timeline/timeline.widget.dart

@@ -324,11 +324,7 @@ class _SliverTimelineState extends ConsumerState<_SliverTimeline> {
           final topPadding = context.padding.top + (widget.appBar == null ? 0 : kToolbarHeight) + 10;
 
           const scrubberBottomPadding = 100.0;
-          const bottomSheetOpenModifier = 120.0;
-          final bottomPadding =
-              context.padding.bottom +
-              (widget.appBar == null ? 0 : scrubberBottomPadding) +
-              (isMultiSelectEnabled ? bottomSheetOpenModifier : 0);
+          final bottomPadding = context.padding.bottom + (widget.appBar == null ? 0 : scrubberBottomPadding);
 
           final grid = CustomScrollView(
             primary: true,
@@ -351,7 +347,7 @@ class _SliverTimelineState extends ConsumerState<_SliverTimeline> {
                   addRepaintBoundaries: false,
                 ),
               ),
-              SliverPadding(padding: EdgeInsets.only(bottom: bottomPadding)),
+              const SliverPadding(padding: EdgeInsets.only(bottom: scrubberBottomPadding)),
             ],
           );
 

mobile/lib/routing/router.dart

@@ -78,9 +78,9 @@ import 'package:immich_mobile/pages/search/recently_taken.page.dart';
 import 'package:immich_mobile/pages/search/search.page.dart';
 import 'package:immich_mobile/pages/settings/sync_status.page.dart';
 import 'package:immich_mobile/pages/share_intent/share_intent.page.dart';
+import 'package:immich_mobile/presentation/pages/dev/feat_in_development.page.dart';
 import 'package:immich_mobile/presentation/pages/dev/main_timeline.page.dart';
 import 'package:immich_mobile/presentation/pages/dev/media_stat.page.dart';
-import 'package:immich_mobile/presentation/pages/dev/ui_showcase.page.dart';
 import 'package:immich_mobile/presentation/pages/download_info.page.dart';
 import 'package:immich_mobile/presentation/pages/drift_activities.page.dart';
 import 'package:immich_mobile/presentation/pages/drift_album.page.dart';
@@ -167,7 +167,7 @@ class AppRouter extends RootStackRouter {
     AutoRoute(page: LoginRoute.page, guards: [_duplicateGuard]),
     AutoRoute(page: ChangePasswordRoute.page),
     AutoRoute(page: SearchRoute.page, guards: [_authGuard, _duplicateGuard], maintainState: false),
-    AutoRoute(
+    CustomRoute(
       page: TabControllerRoute.page,
       guards: [_authGuard, _duplicateGuard],
       children: [
@@ -176,8 +176,9 @@ class AppRouter extends RootStackRouter {
         AutoRoute(page: LibraryRoute.page, guards: [_authGuard, _duplicateGuard]),
         AutoRoute(page: AlbumsRoute.page, guards: [_authGuard, _duplicateGuard]),
       ],
+      transitionsBuilder: TransitionsBuilders.fadeIn,
     ),
-    AutoRoute(
+    CustomRoute(
       page: TabShellRoute.page,
       guards: [_authGuard, _duplicateGuard],
       children: [
@@ -186,6 +187,7 @@ class AppRouter extends RootStackRouter {
         AutoRoute(page: DriftLibraryRoute.page, guards: [_authGuard, _duplicateGuard]),
         AutoRoute(page: DriftAlbumsRoute.page, guards: [_authGuard, _duplicateGuard]),
       ],
+      transitionsBuilder: TransitionsBuilders.fadeIn,
     ),
     CustomRoute(
       page: GalleryViewerRoute.page,
@@ -286,6 +288,7 @@ class AppRouter extends RootStackRouter {
     AutoRoute(page: ShareIntentRoute.page, guards: [_authGuard, _duplicateGuard]),
     AutoRoute(page: LockedRoute.page, guards: [_authGuard, _lockedGuard, _duplicateGuard]),
     AutoRoute(page: PinAuthRoute.page, guards: [_authGuard, _duplicateGuard]),
+    AutoRoute(page: FeatInDevRoute.page, guards: [_authGuard, _duplicateGuard]),
     AutoRoute(page: LocalMediaSummaryRoute.page, guards: [_authGuard, _duplicateGuard]),
     AutoRoute(page: RemoteMediaSummaryRoute.page, guards: [_authGuard, _duplicateGuard]),
     AutoRoute(page: DriftBackupRoute.page, guards: [_authGuard, _duplicateGuard]),
@@ -337,7 +340,6 @@ class AppRouter extends RootStackRouter {
     AutoRoute(page: DriftBackupAssetDetailRoute.page, guards: [_authGuard, _duplicateGuard]),
     AutoRoute(page: AssetTroubleshootRoute.page, guards: [_authGuard, _duplicateGuard]),
     AutoRoute(page: DownloadInfoRoute.page, guards: [_authGuard, _duplicateGuard]),
-    AutoRoute(page: ImmichUIShowcaseRoute.page, guards: [_authGuard, _duplicateGuard]),
     // required to handle all deeplinks in deep_link.service.dart
     // auto_route_library#1722
     RedirectRoute(path: '*', redirectTo: '/'),

mobile/lib/routing/router.gr.dart

@@ -1648,6 +1648,22 @@ class FavoritesRoute extends PageRouteInfo<void> {
   );
 }
 
+/// generated route for
+/// [FeatInDevPage]
+class FeatInDevRoute extends PageRouteInfo<void> {
+  const FeatInDevRoute({List<PageRouteInfo>? children})
+    : super(FeatInDevRoute.name, initialChildren: children);
+
+  static const String name = 'FeatInDevRoute';
+
+  static PageInfo page = PageInfo(
+    name,
+    builder: (data) {
+      return const FeatInDevPage();
+    },
+  );
+}
+
 /// generated route for
 /// [FilterImagePage]
 class FilterImageRoute extends PageRouteInfo<FilterImageRouteArgs> {
@@ -1815,22 +1831,6 @@ class HeaderSettingsRoute extends PageRouteInfo<void> {
   );
 }
 
-/// generated route for
-/// [ImmichUIShowcasePage]
-class ImmichUIShowcaseRoute extends PageRouteInfo<void> {
-  const ImmichUIShowcaseRoute({List<PageRouteInfo>? children})
-    : super(ImmichUIShowcaseRoute.name, initialChildren: children);
-
-  static const String name = 'ImmichUIShowcaseRoute';
-
-  static PageInfo page = PageInfo(
-    name,
-    builder: (data) {
-      return const ImmichUIShowcasePage();
-    },
-  );
-}
-
 /// generated route for
 /// [LibraryPage]
 class LibraryRoute extends PageRouteInfo<void> {

mobile/lib/utils/action_button.utils.dart

@@ -1,18 +1,9 @@
-import 'package:auto_route/auto_route.dart';
-import 'package:easy_localization/easy_localization.dart';
-import 'package:flutter/material.dart';
-import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:flutter/widgets.dart';
 import 'package:immich_mobile/constants/enums.dart';
 import 'package:immich_mobile/domain/models/album/album.model.dart';
 import 'package:immich_mobile/domain/models/asset/base_asset.model.dart';
-import 'package:immich_mobile/domain/models/events.model.dart';
-import 'package:immich_mobile/domain/services/timeline.service.dart';
-import 'package:immich_mobile/domain/utils/event_stream.dart';
-import 'package:immich_mobile/extensions/translate_extensions.dart';
 import 'package:immich_mobile/presentation/widgets/action_buttons/advanced_info_action_button.widget.dart';
 import 'package:immich_mobile/presentation/widgets/action_buttons/archive_action_button.widget.dart';
-import 'package:immich_mobile/presentation/widgets/action_buttons/base_action_button.widget.dart';
-import 'package:immich_mobile/presentation/widgets/action_buttons/cast_action_button.widget.dart';
 import 'package:immich_mobile/presentation/widgets/action_buttons/delete_action_button.widget.dart';
 import 'package:immich_mobile/presentation/widgets/action_buttons/delete_local_action_button.widget.dart';
 import 'package:immich_mobile/presentation/widgets/action_buttons/delete_permanent_action_button.widget.dart';
@@ -28,7 +19,6 @@ import 'package:immich_mobile/presentation/widgets/action_buttons/trash_action_b
 import 'package:immich_mobile/presentation/widgets/action_buttons/unarchive_action_button.widget.dart';
 import 'package:immich_mobile/presentation/widgets/action_buttons/unstack_action_button.widget.dart';
 import 'package:immich_mobile/presentation/widgets/action_buttons/upload_action_button.widget.dart';
-import 'package:immich_mobile/routing/router.dart';
 
 class ActionButtonContext {
   final BaseAsset asset;
@@ -174,98 +164,3 @@ class ActionButtonBuilder {
     return _actionTypes.where((type) => type.shouldShow(context)).map((type) => type.buildButton(context)).toList();
   }
 }
-
-class ViewerKebabMenuButtonContext {
-  final BaseAsset asset;
-  final bool isOwner;
-  final bool isCasting;
-  final TimelineOrigin timelineOrigin;
-  final ThemeData? originalTheme;
-
-  const ViewerKebabMenuButtonContext({
-    required this.asset,
-    required this.isOwner,
-    required this.isCasting,
-    required this.timelineOrigin,
-    this.originalTheme,
-  });
-}
-
-enum ViewerKebabMenuButtonType {
-  openInfo,
-  viewInTimeline,
-  cast,
-  download;
-
-  /// Defines which group each button belongs to.
-  /// Buttons in the same group will be displayed together,
-  /// with dividers separating different groups.
-  int get group => switch (this) {
-    ViewerKebabMenuButtonType.openInfo => 0,
-    ViewerKebabMenuButtonType.viewInTimeline => 1,
-    ViewerKebabMenuButtonType.cast => 1,
-    ViewerKebabMenuButtonType.download => 1,
-  };
-
-  bool shouldShow(ViewerKebabMenuButtonContext context) {
-    return switch (this) {
-      ViewerKebabMenuButtonType.openInfo => true,
-      ViewerKebabMenuButtonType.viewInTimeline =>
-        context.timelineOrigin != TimelineOrigin.main &&
-            context.timelineOrigin != TimelineOrigin.deepLink &&
-            context.timelineOrigin != TimelineOrigin.trash &&
-            context.timelineOrigin != TimelineOrigin.archive &&
-            context.timelineOrigin != TimelineOrigin.localAlbum &&
-            context.isOwner,
-      ViewerKebabMenuButtonType.cast => context.isCasting || context.asset.hasRemote,
-      ViewerKebabMenuButtonType.download => context.asset.isRemoteOnly,
-    };
-  }
-
-  ConsumerWidget buildButton(ViewerKebabMenuButtonContext context, BuildContext buildContext) {
-    return switch (this) {
-      ViewerKebabMenuButtonType.openInfo => BaseActionButton(
-        label: 'info'.tr(),
-        iconData: Icons.info_outline,
-        iconColor: context.originalTheme?.iconTheme.color,
-        menuItem: true,
-        onPressed: () => EventStream.shared.emit(const ViewerOpenBottomSheetEvent()),
-      ),
-
-      ViewerKebabMenuButtonType.viewInTimeline => BaseActionButton(
-        label: 'view_in_timeline'.t(context: buildContext),
-        iconData: Icons.image_search,
-        iconColor: context.originalTheme?.iconTheme.color,
-        menuItem: true,
-        onPressed: () async {
-          await buildContext.maybePop();
-          await buildContext.navigateTo(const TabShellRoute(children: [MainTimelineRoute()]));
-          EventStream.shared.emit(ScrollToDateEvent(context.asset.createdAt));
-        },
-      ),
-      ViewerKebabMenuButtonType.cast => const CastActionButton(menuItem: true),
-      ViewerKebabMenuButtonType.download => const DownloadActionButton(source: ActionSource.viewer, menuItem: true),
-    };
-  }
-}
-
-class ViewerKebabMenuButtonBuilder {
-  static List<Widget> build(ViewerKebabMenuButtonContext context, BuildContext buildContext, WidgetRef ref) {
-    final visibleButtons = ViewerKebabMenuButtonType.values.where((type) => type.shouldShow(context)).toList();
-
-    if (visibleButtons.isEmpty) return [];
-
-    final List<Widget> result = [];
-    int? lastGroup;
-
-    for (final type in visibleButtons) {
-      if (lastGroup != null && type.group != lastGroup) {
-        result.add(const Divider(height: 1));
-      }
-      result.add(type.buildButton(context, buildContext).build(buildContext, ref));
-      lastGroup = type.group;
-    }
-
-    return result;
-  }
-}

mobile/lib/widgets/common/app_bar_dialog/server_update_notification.dart

@@ -53,18 +53,16 @@ class ServerUpdateNotification extends HookConsumerWidget {
         child: Row(
           mainAxisAlignment: MainAxisAlignment.center,
           children: [
-            Expanded(
-              child: Text(
-                serverInfoState.versionStatus.message,
-                textAlign: TextAlign.start,
-                maxLines: 3,
-                overflow: TextOverflow.ellipsis,
-                style: context.textTheme.labelLarge,
-              ),
+            Text(
+              serverInfoState.versionStatus.message,
+              textAlign: TextAlign.start,
+              maxLines: 3,
+              overflow: TextOverflow.ellipsis,
+              style: context.textTheme.labelLarge,
             ),
             if (serverInfoState.versionStatus == VersionStatus.serverOutOfDate ||
                 serverInfoState.versionStatus == VersionStatus.clientOutOfDate) ...[
-              const SizedBox(width: 8),
+              const Spacer(),
               TextButton(
                 onPressed: openUpdateLink,
                 style: TextButton.styleFrom(

mobile/lib/widgets/common/immich_app_bar.dart

@@ -155,8 +155,8 @@ class ImmichAppBar extends ConsumerWidget implements PreferredSizeWidget {
           ...actions!.map((action) => Padding(padding: const EdgeInsets.only(right: 16), child: action)),
         if (kDebugMode || kProfileMode)
           IconButton(
-            icon: const Icon(Icons.palette_rounded),
-            onPressed: () => context.pushRoute(const ImmichUIShowcaseRoute()),
+            icon: const Icon(Icons.science_rounded),
+            onPressed: () => context.pushRoute(const FeatInDevRoute()),
           ),
         if (isCasting)
           Padding(

mobile/lib/widgets/common/immich_sliver_app_bar.dart

@@ -74,8 +74,8 @@ class ImmichSliverAppBar extends ConsumerWidget {
             ...actions!.map((action) => Padding(padding: const EdgeInsets.only(right: 16), child: action)),
           if ((kDebugMode || kProfileMode) && !isReadonlyModeEnabled)
             IconButton(
-              icon: const Icon(Icons.palette_rounded),
-              onPressed: () => context.pushRoute(const ImmichUIShowcaseRoute()),
+              icon: const Icon(Icons.science_rounded),
+              onPressed: () => context.pushRoute(const FeatInDevRoute()),
             ),
           if (showUploadButton && !isReadonlyModeEnabled)
             const Padding(padding: EdgeInsets.only(right: 20), child: _BackupIndicator()),

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

@@ -2,27 +2,26 @@ import 'package:flutter/material.dart';
 import 'package:immich_mobile/extensions/build_context_extensions.dart';
 import 'package:immich_mobile/extensions/theme_extensions.dart';
 
-class EntityCountTile extends StatelessWidget {
+class EntitiyCountTile extends StatelessWidget {
   final int count;
   final String label;
   final IconData icon;
 
-  const EntityCountTile({super.key, required this.count, required this.label, required this.icon});
+  const EntitiyCountTile({super.key, required this.count, required this.label, required this.icon});
 
   String zeroPadding(int number, int targetWidth) {
     final numStr = number.toString();
     return numStr.length < targetWidth ? "0" * (targetWidth - numStr.length) : "";
   }
 
+  int calculateMaxDigits(double availableWidth) {
+    const double charWidth = 11.0;
+    return (availableWidth / charWidth).floor().clamp(1, 8);
+  }
+
   @override
   Widget build(BuildContext context) {
-    final screenWidth = MediaQuery.of(context).size.width;
-    final availableWidth = (screenWidth - 32 - 8) / 2;
-    const double charWidth = 11.0;
-    final maxDigits = ((availableWidth - 32) / charWidth).floor().clamp(1, 8);
-
     return Container(
-      height: double.infinity,
       padding: const EdgeInsets.all(16),
       decoration: BoxDecoration(
         color: context.colorScheme.surfaceContainerLow,
@@ -30,6 +29,7 @@ class EntityCountTile extends StatelessWidget {
         border: Border.all(width: 0.5, color: context.colorScheme.outline.withAlpha(25)),
       ),
       child: Column(
+        mainAxisSize: MainAxisSize.min,
         crossAxisAlignment: CrossAxisAlignment.center,
         children: [
           // Icon and Label
@@ -38,30 +38,33 @@ class EntityCountTile extends StatelessWidget {
             children: [
               Icon(icon, color: context.primaryColor),
               const SizedBox(width: 8),
-              Flexible(
-                child: Text(
-                  label,
-                  style: TextStyle(color: context.primaryColor, fontWeight: FontWeight.bold, fontSize: 16),
-                ),
+              Text(
+                label,
+                style: TextStyle(color: context.primaryColor, fontWeight: FontWeight.bold, fontSize: 16),
               ),
             ],
           ),
+          const SizedBox(height: 12),
           // Number
-          const Spacer(),
-          RichText(
-            text: TextSpan(
-              style: const TextStyle(fontSize: 18, fontFamily: 'OverpassMono', fontWeight: FontWeight.w600),
-              children: [
-                TextSpan(
-                  text: zeroPadding(count, maxDigits),
-                  style: TextStyle(color: context.colorScheme.onSurfaceSecondary.withAlpha(75)),
+          LayoutBuilder(
+            builder: (context, constraints) {
+              final maxDigits = calculateMaxDigits(constraints.maxWidth);
+              return RichText(
+                text: TextSpan(
+                  style: const TextStyle(fontSize: 18, fontFamily: 'OverpassMono', 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),
+                    ),
+                  ],
                 ),
-                TextSpan(
-                  text: count.toString(),
-                  style: TextStyle(color: context.primaryColor),
-                ),
-              ],
-            ),
+              );
+            },
           ),
         ],
       ),

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

@@ -282,87 +282,76 @@ class _SyncStatsCounts extends ConsumerWidget {
             _SectionHeaderText(text: "assets".t(context: context)),
             Padding(
               padding: const EdgeInsets.fromLTRB(16, 8, 16, 16),
-              // 1. Wrap in IntrinsicHeight
-              child: IntrinsicHeight(
-                child: Flex(
-                  direction: Axis.horizontal,
-                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
-                  // 2. Stretch children vertically to fill the IntrinsicHeight
-                  crossAxisAlignment: CrossAxisAlignment.stretch,
-                  spacing: 8.0,
-                  children: [
-                    Expanded(
-                      child: EntityCountTile(
-                        label: "local".t(context: context),
-                        count: localAssetCount,
-                        icon: Icons.smartphone,
-                      ),
+              child: Flex(
+                direction: Axis.horizontal,
+                mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                spacing: 8.0,
+                children: [
+                  Expanded(
+                    child: EntitiyCountTile(
+                      label: "local".t(context: context),
+                      count: localAssetCount,
+                      icon: Icons.smartphone,
                     ),
-                    Expanded(
-                      child: EntityCountTile(
-                        label: "remote".t(context: context),
-                        count: remoteAssetCount,
-                        icon: Icons.cloud,
-                      ),
+                  ),
+                  Expanded(
+                    child: EntitiyCountTile(
+                      label: "remote".t(context: context),
+                      count: remoteAssetCount,
+                      icon: Icons.cloud,
                     ),
-                  ],
-                ),
+                  ),
+                ],
               ),
             ),
             _SectionHeaderText(text: "albums".t(context: context)),
             Padding(
               padding: const EdgeInsets.fromLTRB(16, 8, 16, 16),
-              child: IntrinsicHeight(
-                child: Flex(
-                  direction: Axis.horizontal,
-                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
-                  crossAxisAlignment: CrossAxisAlignment.stretch, // Added
-                  spacing: 8.0,
-                  children: [
-                    Expanded(
-                      child: EntityCountTile(
-                        label: "local".t(context: context),
-                        count: localAlbumCount,
-                        icon: Icons.smartphone,
-                      ),
+              child: Flex(
+                direction: Axis.horizontal,
+                mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                spacing: 8.0,
+                children: [
+                  Expanded(
+                    child: EntitiyCountTile(
+                      label: "local".t(context: context),
+                      count: localAlbumCount,
+                      icon: Icons.smartphone,
                     ),
-                    Expanded(
-                      child: EntityCountTile(
-                        label: "remote".t(context: context),
-                        count: remoteAlbumCount,
-                        icon: Icons.cloud,
-                      ),
+                  ),
+                  Expanded(
+                    child: EntitiyCountTile(
+                      label: "remote".t(context: context),
+                      count: remoteAlbumCount,
+                      icon: Icons.cloud,
                     ),
-                  ],
-                ),
+                  ),
+                ],
               ),
             ),
             _SectionHeaderText(text: "other".t(context: context)),
             Padding(
               padding: const EdgeInsets.fromLTRB(16, 8, 16, 16),
-              child: IntrinsicHeight(
-                child: Flex(
-                  direction: Axis.horizontal,
-                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
-                  crossAxisAlignment: CrossAxisAlignment.stretch, // Added
-                  spacing: 8.0,
-                  children: [
-                    Expanded(
-                      child: EntityCountTile(
-                        label: "memories".t(context: context),
-                        count: memoryCount,
-                        icon: Icons.calendar_today,
-                      ),
+              child: Flex(
+                direction: Axis.horizontal,
+                mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                spacing: 8.0,
+                children: [
+                  Expanded(
+                    child: EntitiyCountTile(
+                      label: "memories".t(context: context),
+                      count: memoryCount,
+                      icon: Icons.calendar_today,
                     ),
-                    Expanded(
-                      child: EntityCountTile(
-                        label: "hashed_assets".t(context: context),
-                        count: localHashedCount,
-                        icon: Icons.tag,
-                      ),
+                  ),
+                  Expanded(
+                    child: EntitiyCountTile(
+                      label: "hashed_assets".t(context: context),
+                      count: localHashedCount,
+                      icon: Icons.tag,
                     ),
-                  ],
-                ),
+                  ),
+                ],
               ),
             ),
             // To be removed once the experimental feature is stable
@@ -375,29 +364,26 @@ class _SyncStatsCounts extends ConsumerWidget {
                   return counts.when(
                     data: (c) => Padding(
                       padding: const EdgeInsets.fromLTRB(16, 8, 16, 16),
-                      child: IntrinsicHeight(
-                        child: Flex(
-                          direction: Axis.horizontal,
-                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
-                          crossAxisAlignment: CrossAxisAlignment.stretch, // Added
-                          spacing: 8.0,
-                          children: [
-                            Expanded(
-                              child: EntityCountTile(
-                                label: "local".t(context: context),
-                                count: c.total,
-                                icon: Icons.delete_outline,
-                              ),
+                      child: Flex(
+                        direction: Axis.horizontal,
+                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                        spacing: 8.0,
+                        children: [
+                          Expanded(
+                            child: EntitiyCountTile(
+                              label: "local".t(context: context),
+                              count: c.total,
+                              icon: Icons.delete_outline,
                             ),
-                            Expanded(
-                              child: EntityCountTile(
-                                label: "hashed_assets".t(context: context),
-                                count: c.hashed,
-                                icon: Icons.tag,
-                              ),
+                          ),
+                          Expanded(
+                            child: EntitiyCountTile(
+                              label: "hashed_assets".t(context: context),
+                              count: c.hashed,
+                              icon: Icons.tag,
                             ),
-                          ],
-                        ),
+                          ),
+                        ],
                       ),
                     ),
                     loading: () => const CircularProgressIndicator(),

mobile/packages/ui/lib/immich_ui.dart

@@ -1,3 +0,0 @@
-export 'src/buttons/close_button.dart';
-export 'src/buttons/icon_button.dart';
-export 'src/types.dart';

mobile/packages/ui/lib/src/buttons/close_button.dart

@@ -1,25 +0,0 @@
-import 'package:flutter/material.dart';
-import 'package:immich_ui/src/buttons/icon_button.dart';
-import 'package:immich_ui/src/types.dart';
-
-class ImmichCloseButton extends StatelessWidget {
-  final VoidCallback? onTap;
-  final ImmichVariant variant;
-  final ImmichColor color;
-
-  const ImmichCloseButton({
-    super.key,
-    this.onTap,
-    this.color = ImmichColor.primary,
-    this.variant = ImmichVariant.ghost,
-  });
-
-  @override
-  Widget build(BuildContext context) => ImmichIconButton(
-        key: key,
-        icon: Icons.close,
-        color: color,
-        variant: variant,
-        onTap: onTap ?? () => Navigator.of(context).pop(),
-      );
-}

mobile/packages/ui/lib/src/buttons/icon_button.dart

@@ -1,48 +0,0 @@
-import 'package:flutter/material.dart';
-import 'package:immich_ui/src/types.dart';
-
-class ImmichIconButton extends StatelessWidget {
-  final IconData icon;
-  final VoidCallback onTap;
-  final ImmichVariant variant;
-  final ImmichColor color;
-
-  const ImmichIconButton({
-    super.key,
-    required this.icon,
-    required this.onTap,
-    this.color = ImmichColor.primary,
-    this.variant = ImmichVariant.filled,
-  });
-
-  @override
-  Widget build(BuildContext context) {
-    final background = switch (variant) {
-      ImmichVariant.filled => switch (color) {
-          ImmichColor.primary => Theme.of(context).colorScheme.primary,
-          ImmichColor.secondary => Theme.of(context).colorScheme.secondary,
-        },
-      ImmichVariant.ghost => Colors.transparent,
-    };
-
-    final foreground = switch (variant) {
-      ImmichVariant.filled => switch (color) {
-          ImmichColor.primary => Theme.of(context).colorScheme.onPrimary,
-          ImmichColor.secondary => Theme.of(context).colorScheme.onSecondary,
-        },
-      ImmichVariant.ghost => switch (color) {
-          ImmichColor.primary => Theme.of(context).colorScheme.primary,
-          ImmichColor.secondary => Theme.of(context).colorScheme.secondary,
-        },
-    };
-
-    return IconButton(
-      icon: Icon(icon),
-      onPressed: onTap,
-      style: IconButton.styleFrom(
-        backgroundColor: background,
-        foregroundColor: foreground,
-      ),
-    );
-  }
-}

mobile/packages/ui/lib/src/types.dart

@@ -1,9 +0,0 @@
-enum ImmichVariant {
-  filled,
-  ghost,
-}
-
-enum ImmichColor {
-  primary,
-  secondary,
-}

mobile/packages/ui/pubspec.lock

@@ -1,55 +0,0 @@
-# Generated by pub
-# See https://dart.dev/tools/pub/glossary#lockfile
-packages:
-  characters:
-    dependency: transitive
-    description:
-      name: characters
-      sha256: f71061c654a3380576a52b451dd5532377954cf9dbd272a78fc8479606670803
-      url: "https://pub.dev"
-    source: hosted
-    version: "1.4.0"
-  collection:
-    dependency: transitive
-    description:
-      name: collection
-      sha256: "2f5709ae4d3d59dd8f7cd309b4e023046b57d8a6c82130785d2b0e5868084e76"
-      url: "https://pub.dev"
-    source: hosted
-    version: "1.19.1"
-  flutter:
-    dependency: "direct main"
-    description: flutter
-    source: sdk
-    version: "0.0.0"
-  material_color_utilities:
-    dependency: transitive
-    description:
-      name: material_color_utilities
-      sha256: f7142bb1154231d7ea5f96bc7bde4bda2a0945d2806bb11670e30b850d56bdec
-      url: "https://pub.dev"
-    source: hosted
-    version: "0.11.1"
-  meta:
-    dependency: transitive
-    description:
-      name: meta
-      sha256: e3641ec5d63ebf0d9b41bd43201a66e3fc79a65db5f61fc181f04cd27aab950c
-      url: "https://pub.dev"
-    source: hosted
-    version: "1.16.0"
-  sky_engine:
-    dependency: transitive
-    description: flutter
-    source: sdk
-    version: "0.0.0"
-  vector_math:
-    dependency: transitive
-    description:
-      name: vector_math
-      sha256: d530bd74fea330e6e364cda7a85019c434070188383e1cd8d9777ee586914c5b
-      url: "https://pub.dev"
-    source: hosted
-    version: "2.2.0"
-sdks:
-  dart: ">=3.8.0-0 <4.0.0"

mobile/packages/ui/pubspec.yaml

@@ -1,12 +0,0 @@
-name: immich_ui
-publish_to: none
-
-environment:
-  sdk: '>=3.0.0 <4.0.0'
-
-dependencies:
-  flutter:
-    sdk: flutter
-
-flutter:
-  uses-material-design: true

mobile/pubspec.lock

@@ -1015,13 +1015,6 @@ packages:
       relative: true
     source: path
     version: "0.0.0"
-  immich_ui:
-    dependency: "direct main"
-    description:
-      path: "packages/ui"
-      relative: true
-    source: path
-    version: "0.0.0"
   integration_test:
     dependency: "direct dev"
     description: flutter

mobile/pubspec.yaml

@@ -43,8 +43,6 @@ dependencies:
   hooks_riverpod: ^2.6.1
   http: ^1.5.0
   image_picker: ^1.2.0
-  immich_ui:
-    path: './packages/ui'
   intl: ^0.20.2
   isar:
     git:

plugins/package-lock.json

@@ -15,9 +15,9 @@
       }
     },
     "node_modules/@esbuild/aix-ppc64": {
-      "version": "0.27.1",
-      "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.27.1.tgz",
-      "integrity": "sha512-HHB50pdsBX6k47S4u5g/CaLjqS3qwaOVE5ILsq64jyzgMhLuCuZ8rGzM9yhsAjfjkbgUPMzZEPa7DAp7yz6vuA==",
+      "version": "0.27.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.27.0.tgz",
+      "integrity": "sha512-KuZrd2hRjz01y5JK9mEBSD3Vj3mbCvemhT466rSuJYeE/hjuBrHfjjcjMdTm/sz7au+++sdbJZJmuBwQLuw68A==",
       "cpu": [
         "ppc64"
       ],
@@ -32,9 +32,9 @@
       }
     },
     "node_modules/@esbuild/android-arm": {
-      "version": "0.27.1",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.27.1.tgz",
-      "integrity": "sha512-kFqa6/UcaTbGm/NncN9kzVOODjhZW8e+FRdSeypWe6j33gzclHtwlANs26JrupOntlcWmB0u8+8HZo8s7thHvg==",
+      "version": "0.27.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.27.0.tgz",
+      "integrity": "sha512-j67aezrPNYWJEOHUNLPj9maeJte7uSMM6gMoxfPC9hOg8N02JuQi/T7ewumf4tNvJadFkvLZMlAq73b9uwdMyQ==",
       "cpu": [
         "arm"
       ],
@@ -49,9 +49,9 @@
       }
     },
     "node_modules/@esbuild/android-arm64": {
-      "version": "0.27.1",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.27.1.tgz",
-      "integrity": "sha512-45fuKmAJpxnQWixOGCrS+ro4Uvb4Re9+UTieUY2f8AEc+t7d4AaZ6eUJ3Hva7dtrxAAWHtlEFsXFMAgNnGU9uQ==",
+      "version": "0.27.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.27.0.tgz",
+      "integrity": "sha512-CC3vt4+1xZrs97/PKDkl0yN7w8edvU2vZvAFGD16n9F0Cvniy5qvzRXjfO1l94efczkkQE6g1x0i73Qf5uthOQ==",
       "cpu": [
         "arm64"
       ],
@@ -66,9 +66,9 @@
       }
     },
     "node_modules/@esbuild/android-x64": {
-      "version": "0.27.1",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.27.1.tgz",
-      "integrity": "sha512-LBEpOz0BsgMEeHgenf5aqmn/lLNTFXVfoWMUox8CtWWYK9X4jmQzWjoGoNb8lmAYml/tQ/Ysvm8q7szu7BoxRQ==",
+      "version": "0.27.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.27.0.tgz",
+      "integrity": "sha512-wurMkF1nmQajBO1+0CJmcN17U4BP6GqNSROP8t0X/Jiw2ltYGLHpEksp9MpoBqkrFR3kv2/te6Sha26k3+yZ9Q==",
       "cpu": [
         "x64"
       ],
@@ -83,9 +83,9 @@
       }
     },
     "node_modules/@esbuild/darwin-arm64": {
-      "version": "0.27.1",
-      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.27.1.tgz",
-      "integrity": "sha512-veg7fL8eMSCVKL7IW4pxb54QERtedFDfY/ASrumK/SbFsXnRazxY4YykN/THYqFnFwJ0aVjiUrVG2PwcdAEqQQ==",
+      "version": "0.27.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.27.0.tgz",
+      "integrity": "sha512-uJOQKYCcHhg07DL7i8MzjvS2LaP7W7Pn/7uA0B5S1EnqAirJtbyw4yC5jQ5qcFjHK9l6o/MX9QisBg12kNkdHg==",
       "cpu": [
         "arm64"
       ],
@@ -100,9 +100,9 @@
       }
     },
     "node_modules/@esbuild/darwin-x64": {
-      "version": "0.27.1",
-      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.27.1.tgz",
-      "integrity": "sha512-+3ELd+nTzhfWb07Vol7EZ+5PTbJ/u74nC6iv4/lwIU99Ip5uuY6QoIf0Hn4m2HoV0qcnRivN3KSqc+FyCHjoVQ==",
+      "version": "0.27.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.27.0.tgz",
+      "integrity": "sha512-8mG6arH3yB/4ZXiEnXof5MK72dE6zM9cDvUcPtxhUZsDjESl9JipZYW60C3JGreKCEP+p8P/72r69m4AZGJd5g==",
       "cpu": [
         "x64"
       ],
@@ -117,9 +117,9 @@
       }
     },
     "node_modules/@esbuild/freebsd-arm64": {
-      "version": "0.27.1",
-      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.27.1.tgz",
-      "integrity": "sha512-/8Rfgns4XD9XOSXlzUDepG8PX+AVWHliYlUkFI3K3GB6tqbdjYqdhcb4BKRd7C0BhZSoaCxhv8kTcBrcZWP+xg==",
+      "version": "0.27.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.27.0.tgz",
+      "integrity": "sha512-9FHtyO988CwNMMOE3YIeci+UV+x5Zy8fI2qHNpsEtSF83YPBmE8UWmfYAQg6Ux7Gsmd4FejZqnEUZCMGaNQHQw==",
       "cpu": [
         "arm64"
       ],
@@ -134,9 +134,9 @@
       }
     },
     "node_modules/@esbuild/freebsd-x64": {
-      "version": "0.27.1",
-      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.27.1.tgz",
-      "integrity": "sha512-GITpD8dK9C+r+5yRT/UKVT36h/DQLOHdwGVwwoHidlnA168oD3uxA878XloXebK4Ul3gDBBIvEdL7go9gCUFzQ==",
+      "version": "0.27.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.27.0.tgz",
+      "integrity": "sha512-zCMeMXI4HS/tXvJz8vWGexpZj2YVtRAihHLk1imZj4efx1BQzN76YFeKqlDr3bUWI26wHwLWPd3rwh6pe4EV7g==",
       "cpu": [
         "x64"
       ],
@@ -151,9 +151,9 @@
       }
     },
     "node_modules/@esbuild/linux-arm": {
-      "version": "0.27.1",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.27.1.tgz",
-      "integrity": "sha512-ieMID0JRZY/ZeCrsFQ3Y3NlHNCqIhTprJfDgSB3/lv5jJZ8FX3hqPyXWhe+gvS5ARMBJ242PM+VNz/ctNj//eA==",
+      "version": "0.27.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.27.0.tgz",
+      "integrity": "sha512-t76XLQDpxgmq2cNXKTVEB7O7YMb42atj2Re2Haf45HkaUpjM2J0UuJZDuaGbPbamzZ7bawyGFUkodL+zcE+jvQ==",
       "cpu": [
         "arm"
       ],
@@ -168,9 +168,9 @@
       }
     },
     "node_modules/@esbuild/linux-arm64": {
-      "version": "0.27.1",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.27.1.tgz",
-      "integrity": "sha512-W9//kCrh/6in9rWIBdKaMtuTTzNj6jSeG/haWBADqLLa9P8O5YSRDzgD5y9QBok4AYlzS6ARHifAb75V6G670Q==",
+      "version": "0.27.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.27.0.tgz",
+      "integrity": "sha512-AS18v0V+vZiLJyi/4LphvBE+OIX682Pu7ZYNsdUHyUKSoRwdnOsMf6FDekwoAFKej14WAkOef3zAORJgAtXnlQ==",
       "cpu": [
         "arm64"
       ],
@@ -185,9 +185,9 @@
       }
     },
     "node_modules/@esbuild/linux-ia32": {
-      "version": "0.27.1",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.27.1.tgz",
-      "integrity": "sha512-VIUV4z8GD8rtSVMfAj1aXFahsi/+tcoXXNYmXgzISL+KB381vbSTNdeZHHHIYqFyXcoEhu9n5cT+05tRv13rlw==",
+      "version": "0.27.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.27.0.tgz",
+      "integrity": "sha512-Mz1jxqm/kfgKkc/KLHC5qIujMvnnarD9ra1cEcrs7qshTUSksPihGrWHVG5+osAIQ68577Zpww7SGapmzSt4Nw==",
       "cpu": [
         "ia32"
       ],
@@ -202,9 +202,9 @@
       }
     },
     "node_modules/@esbuild/linux-loong64": {
-      "version": "0.27.1",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.27.1.tgz",
-      "integrity": "sha512-l4rfiiJRN7sTNI//ff65zJ9z8U+k6zcCg0LALU5iEWzY+a1mVZ8iWC1k5EsNKThZ7XCQ6YWtsZ8EWYm7r1UEsg==",
+      "version": "0.27.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.27.0.tgz",
+      "integrity": "sha512-QbEREjdJeIreIAbdG2hLU1yXm1uu+LTdzoq1KCo4G4pFOLlvIspBm36QrQOar9LFduavoWX2msNFAAAY9j4BDg==",
       "cpu": [
         "loong64"
       ],
@@ -219,9 +219,9 @@
       }
     },
     "node_modules/@esbuild/linux-mips64el": {
-      "version": "0.27.1",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.27.1.tgz",
-      "integrity": "sha512-U0bEuAOLvO/DWFdygTHWY8C067FXz+UbzKgxYhXC0fDieFa0kDIra1FAhsAARRJbvEyso8aAqvPdNxzWuStBnA==",
+      "version": "0.27.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.27.0.tgz",
+      "integrity": "sha512-sJz3zRNe4tO2wxvDpH/HYJilb6+2YJxo/ZNbVdtFiKDufzWq4JmKAiHy9iGoLjAV7r/W32VgaHGkk35cUXlNOg==",
       "cpu": [
         "mips64el"
       ],
@@ -236,9 +236,9 @@
       }
     },
     "node_modules/@esbuild/linux-ppc64": {
-      "version": "0.27.1",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.27.1.tgz",
-      "integrity": "sha512-NzdQ/Xwu6vPSf/GkdmRNsOfIeSGnh7muundsWItmBsVpMoNPVpM61qNzAVY3pZ1glzzAxLR40UyYM23eaDDbYQ==",
+      "version": "0.27.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.27.0.tgz",
+      "integrity": "sha512-z9N10FBD0DCS2dmSABDBb5TLAyF1/ydVb+N4pi88T45efQ/w4ohr/F/QYCkxDPnkhkp6AIpIcQKQ8F0ANoA2JA==",
       "cpu": [
         "ppc64"
       ],
@@ -253,9 +253,9 @@
       }
     },
     "node_modules/@esbuild/linux-riscv64": {
-      "version": "0.27.1",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.27.1.tgz",
-      "integrity": "sha512-7zlw8p3IApcsN7mFw0O1Z1PyEk6PlKMu18roImfl3iQHTnr/yAfYv6s4hXPidbDoI2Q0pW+5xeoM4eTCC0UdrQ==",
+      "version": "0.27.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.27.0.tgz",
+      "integrity": "sha512-pQdyAIZ0BWIC5GyvVFn5awDiO14TkT/19FTmFcPdDec94KJ1uZcmFs21Fo8auMXzD4Tt+diXu1LW1gHus9fhFQ==",
       "cpu": [
         "riscv64"
       ],
@@ -270,9 +270,9 @@
       }
     },
     "node_modules/@esbuild/linux-s390x": {
-      "version": "0.27.1",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.27.1.tgz",
-      "integrity": "sha512-cGj5wli+G+nkVQdZo3+7FDKC25Uh4ZVwOAK6A06Hsvgr8WqBBuOy/1s+PUEd/6Je+vjfm6stX0kmib5b/O2Ykw==",
+      "version": "0.27.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.27.0.tgz",
+      "integrity": "sha512-hPlRWR4eIDDEci953RI1BLZitgi5uqcsjKMxwYfmi4LcwyWo2IcRP+lThVnKjNtk90pLS8nKdroXYOqW+QQH+w==",
       "cpu": [
         "s390x"
       ],
@@ -287,9 +287,9 @@
       }
     },
     "node_modules/@esbuild/linux-x64": {
-      "version": "0.27.1",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.27.1.tgz",
-      "integrity": "sha512-z3H/HYI9MM0HTv3hQZ81f+AKb+yEoCRlUby1F80vbQ5XdzEMyY/9iNlAmhqiBKw4MJXwfgsh7ERGEOhrM1niMA==",
+      "version": "0.27.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.27.0.tgz",
+      "integrity": "sha512-1hBWx4OUJE2cab++aVZ7pObD6s+DK4mPGpemtnAORBvb5l/g5xFGk0vc0PjSkrDs0XaXj9yyob3d14XqvnQ4gw==",
       "cpu": [
         "x64"
       ],
@@ -304,9 +304,9 @@
       }
     },
     "node_modules/@esbuild/netbsd-arm64": {
-      "version": "0.27.1",
-      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-arm64/-/netbsd-arm64-0.27.1.tgz",
-      "integrity": "sha512-wzC24DxAvk8Em01YmVXyjl96Mr+ecTPyOuADAvjGg+fyBpGmxmcr2E5ttf7Im8D0sXZihpxzO1isus8MdjMCXQ==",
+      "version": "0.27.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-arm64/-/netbsd-arm64-0.27.0.tgz",
+      "integrity": "sha512-6m0sfQfxfQfy1qRuecMkJlf1cIzTOgyaeXaiVaaki8/v+WB+U4hc6ik15ZW6TAllRlg/WuQXxWj1jx6C+dfy3w==",
       "cpu": [
         "arm64"
       ],
@@ -321,9 +321,9 @@
       }
     },
     "node_modules/@esbuild/netbsd-x64": {
-      "version": "0.27.1",
-      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.27.1.tgz",
-      "integrity": "sha512-1YQ8ybGi2yIXswu6eNzJsrYIGFpnlzEWRl6iR5gMgmsrR0FcNoV1m9k9sc3PuP5rUBLshOZylc9nqSgymI+TYg==",
+      "version": "0.27.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.27.0.tgz",
+      "integrity": "sha512-xbbOdfn06FtcJ9d0ShxxvSn2iUsGd/lgPIO2V3VZIPDbEaIj1/3nBBe1AwuEZKXVXkMmpr6LUAgMkLD/4D2PPA==",
       "cpu": [
         "x64"
       ],
@@ -338,9 +338,9 @@
       }
     },
     "node_modules/@esbuild/openbsd-arm64": {
-      "version": "0.27.1",
-      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-arm64/-/openbsd-arm64-0.27.1.tgz",
-      "integrity": "sha512-5Z+DzLCrq5wmU7RDaMDe2DVXMRm2tTDvX2KU14JJVBN2CT/qov7XVix85QoJqHltpvAOZUAc3ndU56HSMWrv8g==",
+      "version": "0.27.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-arm64/-/openbsd-arm64-0.27.0.tgz",
+      "integrity": "sha512-fWgqR8uNbCQ/GGv0yhzttj6sU/9Z5/Sv/VGU3F5OuXK6J6SlriONKrQ7tNlwBrJZXRYk5jUhuWvF7GYzGguBZQ==",
       "cpu": [
         "arm64"
       ],
@@ -355,9 +355,9 @@
       }
     },
     "node_modules/@esbuild/openbsd-x64": {
-      "version": "0.27.1",
-      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.27.1.tgz",
-      "integrity": "sha512-Q73ENzIdPF5jap4wqLtsfh8YbYSZ8Q0wnxplOlZUOyZy7B4ZKW8DXGWgTCZmF8VWD7Tciwv5F4NsRf6vYlZtqg==",
+      "version": "0.27.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.27.0.tgz",
+      "integrity": "sha512-aCwlRdSNMNxkGGqQajMUza6uXzR/U0dIl1QmLjPtRbLOx3Gy3otfFu/VjATy4yQzo9yFDGTxYDo1FfAD9oRD2A==",
       "cpu": [
         "x64"
       ],
@@ -372,9 +372,9 @@
       }
     },
     "node_modules/@esbuild/openharmony-arm64": {
-      "version": "0.27.1",
-      "resolved": "https://registry.npmjs.org/@esbuild/openharmony-arm64/-/openharmony-arm64-0.27.1.tgz",
-      "integrity": "sha512-ajbHrGM/XiK+sXM0JzEbJAen+0E+JMQZ2l4RR4VFwvV9JEERx+oxtgkpoKv1SevhjavK2z2ReHk32pjzktWbGg==",
+      "version": "0.27.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/openharmony-arm64/-/openharmony-arm64-0.27.0.tgz",
+      "integrity": "sha512-nyvsBccxNAsNYz2jVFYwEGuRRomqZ149A39SHWk4hV0jWxKM0hjBPm3AmdxcbHiFLbBSwG6SbpIcUbXjgyECfA==",
       "cpu": [
         "arm64"
       ],
@@ -389,9 +389,9 @@
       }
     },
     "node_modules/@esbuild/sunos-x64": {
-      "version": "0.27.1",
-      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.27.1.tgz",
-      "integrity": "sha512-IPUW+y4VIjuDVn+OMzHc5FV4GubIwPnsz6ubkvN8cuhEqH81NovB53IUlrlBkPMEPxvNnf79MGBoz8rZ2iW8HA==",
+      "version": "0.27.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.27.0.tgz",
+      "integrity": "sha512-Q1KY1iJafM+UX6CFEL+F4HRTgygmEW568YMqDA5UV97AuZSm21b7SXIrRJDwXWPzr8MGr75fUZPV67FdtMHlHA==",
       "cpu": [
         "x64"
       ],
@@ -406,9 +406,9 @@
       }
     },
     "node_modules/@esbuild/win32-arm64": {
-      "version": "0.27.1",
-      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.27.1.tgz",
-      "integrity": "sha512-RIVRWiljWA6CdVu8zkWcRmGP7iRRIIwvhDKem8UMBjPql2TXM5PkDVvvrzMtj1V+WFPB4K7zkIGM7VzRtFkjdg==",
+      "version": "0.27.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.27.0.tgz",
+      "integrity": "sha512-W1eyGNi6d+8kOmZIwi/EDjrL9nxQIQ0MiGqe/AWc6+IaHloxHSGoeRgDRKHFISThLmsewZ5nHFvGFWdBYlgKPg==",
       "cpu": [
         "arm64"
       ],
@@ -423,9 +423,9 @@
       }
     },
     "node_modules/@esbuild/win32-ia32": {
-      "version": "0.27.1",
-      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.27.1.tgz",
-      "integrity": "sha512-2BR5M8CPbptC1AK5JbJT1fWrHLvejwZidKx3UMSF0ecHMa+smhi16drIrCEggkgviBwLYd5nwrFLSl5Kho96RQ==",
+      "version": "0.27.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.27.0.tgz",
+      "integrity": "sha512-30z1aKL9h22kQhilnYkORFYt+3wp7yZsHWus+wSKAJR8JtdfI76LJ4SBdMsCopTR3z/ORqVu5L1vtnHZWVj4cQ==",
       "cpu": [
         "ia32"
       ],
@@ -440,9 +440,9 @@
       }
     },
     "node_modules/@esbuild/win32-x64": {
-      "version": "0.27.1",
-      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.27.1.tgz",
-      "integrity": "sha512-d5X6RMYv6taIymSk8JBP+nxv8DQAMY6A51GPgusqLdK9wBz5wWIXy1KjTck6HnjE9hqJzJRdk+1p/t5soSbCtw==",
+      "version": "0.27.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.27.0.tgz",
+      "integrity": "sha512-aIitBcjQeyOhMTImhLZmtxfdOcuNRpwlPNmlFKPcHQYPhEssw75Cl1TSXJXpMkzaua9FUetx/4OQKq7eJul5Cg==",
       "cpu": [
         "x64"
       ],
@@ -467,9 +467,9 @@
       }
     },
     "node_modules/esbuild": {
-      "version": "0.27.1",
-      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.27.1.tgz",
-      "integrity": "sha512-yY35KZckJJuVVPXpvjgxiCuVEJT67F6zDeVTv4rizyPrfGBUpZQsvmxnN+C371c2esD/hNMjj4tpBhuueLN7aA==",
+      "version": "0.27.0",
+      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.27.0.tgz",
+      "integrity": "sha512-jd0f4NHbD6cALCyGElNpGAOtWxSq46l9X/sWB0Nzd5er4Kz2YTm+Vl0qKFT9KUJvD8+fiO8AvoHhFvEatfVixA==",
       "dev": true,
       "hasInstallScript": true,
       "license": "MIT",
@@ -480,32 +480,32 @@
         "node": ">=18"
       },
       "optionalDependencies": {
-        "@esbuild/aix-ppc64": "0.27.1",
-        "@esbuild/android-arm": "0.27.1",
-        "@esbuild/android-arm64": "0.27.1",
-        "@esbuild/android-x64": "0.27.1",
-        "@esbuild/darwin-arm64": "0.27.1",
-        "@esbuild/darwin-x64": "0.27.1",
-        "@esbuild/freebsd-arm64": "0.27.1",
-        "@esbuild/freebsd-x64": "0.27.1",
-        "@esbuild/linux-arm": "0.27.1",
-        "@esbuild/linux-arm64": "0.27.1",
-        "@esbuild/linux-ia32": "0.27.1",
-        "@esbuild/linux-loong64": "0.27.1",
-        "@esbuild/linux-mips64el": "0.27.1",
-        "@esbuild/linux-ppc64": "0.27.1",
-        "@esbuild/linux-riscv64": "0.27.1",
-        "@esbuild/linux-s390x": "0.27.1",
-        "@esbuild/linux-x64": "0.27.1",
-        "@esbuild/netbsd-arm64": "0.27.1",
-        "@esbuild/netbsd-x64": "0.27.1",
-        "@esbuild/openbsd-arm64": "0.27.1",
-        "@esbuild/openbsd-x64": "0.27.1",
-        "@esbuild/openharmony-arm64": "0.27.1",
-        "@esbuild/sunos-x64": "0.27.1",
-        "@esbuild/win32-arm64": "0.27.1",
-        "@esbuild/win32-ia32": "0.27.1",
-        "@esbuild/win32-x64": "0.27.1"
+        "@esbuild/aix-ppc64": "0.27.0",
+        "@esbuild/android-arm": "0.27.0",
+        "@esbuild/android-arm64": "0.27.0",
+        "@esbuild/android-x64": "0.27.0",
+        "@esbuild/darwin-arm64": "0.27.0",
+        "@esbuild/darwin-x64": "0.27.0",
+        "@esbuild/freebsd-arm64": "0.27.0",
+        "@esbuild/freebsd-x64": "0.27.0",
+        "@esbuild/linux-arm": "0.27.0",
+        "@esbuild/linux-arm64": "0.27.0",
+        "@esbuild/linux-ia32": "0.27.0",
+        "@esbuild/linux-loong64": "0.27.0",
+        "@esbuild/linux-mips64el": "0.27.0",
+        "@esbuild/linux-ppc64": "0.27.0",
+        "@esbuild/linux-riscv64": "0.27.0",
+        "@esbuild/linux-s390x": "0.27.0",
+        "@esbuild/linux-x64": "0.27.0",
+        "@esbuild/netbsd-arm64": "0.27.0",
+        "@esbuild/netbsd-x64": "0.27.0",
+        "@esbuild/openbsd-arm64": "0.27.0",
+        "@esbuild/openbsd-x64": "0.27.0",
+        "@esbuild/openharmony-arm64": "0.27.0",
+        "@esbuild/sunos-x64": "0.27.0",
+        "@esbuild/win32-arm64": "0.27.0",
+        "@esbuild/win32-ia32": "0.27.0",
+        "@esbuild/win32-x64": "0.27.0"
       }
     },
     "node_modules/typescript": {

server/Dockerfile

@@ -50,15 +50,13 @@ RUN --mount=type=cache,id=pnpm-cli,target=/buildcache/pnpm-store \
 
 FROM builder AS plugins
 
-ARG TARGETPLATFORM
-
 COPY --from=ghcr.io/jdx/mise:2025.11.3@sha256:ac26f5978c0e2783f3e68e58ce75eddb83e41b89bf8747c503bac2aa9baf22c5 /usr/local/bin/mise /usr/local/bin/mise
 
 WORKDIR /usr/src/app
 COPY ./plugins/mise.toml ./plugins/
 ENV MISE_TRUSTED_CONFIG_PATHS=/usr/src/app/plugins/mise.toml
 ENV MISE_DATA_DIR=/buildcache/mise
-RUN --mount=type=cache,id=mise-tools-${TARGETPLATFORM},target=/buildcache/mise \
+RUN --mount=type=cache,id=mise-tools,target=/buildcache/mise \
   mise install --cd plugins
 
 COPY ./plugins ./plugins/
@@ -68,7 +66,7 @@ RUN --mount=type=cache,id=pnpm-plugins,target=/buildcache/pnpm-store \
   --mount=type=bind,source=.pnpmfile.cjs,target=.pnpmfile.cjs \
   --mount=type=bind,source=pnpm-lock.yaml,target=pnpm-lock.yaml \
   --mount=type=bind,source=pnpm-workspace.yaml,target=pnpm-workspace.yaml \
-  --mount=type=cache,id=mise-tools-${TARGETPLATFORM},target=/buildcache/mise \
+  --mount=type=cache,id=mise-tools,target=/buildcache/mise \
   cd plugins && mise run build
 
 FROM ghcr.io/immich-app/base-server-prod:202511261514@sha256:c04c1c38dd90e53455b180aedf93c3c63474c8d20ffe2c6d7a3a61a2181e6d29

server/package.json

@@ -70,7 +70,7 @@
     "cookie": "^1.0.2",
     "cookie-parser": "^1.4.7",
     "cron": "4.3.3",
-    "exiftool-vendored": "^34.0.0",
+    "exiftool-vendored": "^33.0.0",
     "express": "^5.1.0",
     "fast-glob": "^3.3.2",
     "fluent-ffmpeg": "^2.1.2",
@@ -153,7 +153,7 @@
     "mock-fs": "^5.2.0",
     "node-gyp": "^12.0.0",
     "pngjs": "^7.0.0",
-    "prettier": "^3.7.4",
+    "prettier": "^3.0.2",
     "prettier-plugin-organize-imports": "^4.0.0",
     "sql-formatter": "^15.0.0",
     "supertest": "^7.1.0",

server/src/sql-tools/decorators/column.decorator.ts

@@ -2,7 +2,7 @@ import { asOptions } from 'src/sql-tools/helpers';
 import { register } from 'src/sql-tools/register';
 import { ColumnStorage, ColumnType, DatabaseEnum } from 'src/sql-tools/types';
 
-export type ColumnValue = null | boolean | string | number | Array<unknown> | object | Date | (() => string);
+export type ColumnValue = null | boolean | string | number | object | Date | (() => string);
 
 export type ColumnBaseOptions = {
   name?: string;

server/src/sql-tools/helpers.ts

@@ -39,10 +39,6 @@ export const fromColumnValue = (columnValue?: ColumnValue) => {
     return `'${value.toISOString()}'`;
   }
 
-  if (Array.isArray(value)) {
-    return "'{}'";
-  }
-
   return `'${String(value)}'`;
 };
 

server/src/sql-tools/schema-diff.spec.ts

@@ -394,20 +394,6 @@ describe(schemaDiff.name, () => {
 
         expect(diff.items).toEqual([]);
       });
-
-      it('should support arrays, ignoring types', () => {
-        const diff = schemaDiff(
-          fromColumn({ name: 'column1', type: 'character varying', isArray: true, default: "'{}'" }),
-          fromColumn({
-            name: 'column1',
-            type: 'character varying',
-            isArray: true,
-            default: "'{}'::character varying[]",
-          }),
-        );
-
-        expect(diff.items).toEqual([]);
-      });
     });
   });
 

server/test/sql-tools/column-default-array.stub.ts

@@ -1,40 +0,0 @@
-import { Column, DatabaseSchema, Table } from 'src/sql-tools';
-
-@Table()
-export class Table1 {
-  @Column({ type: 'character varying', array: true, default: [] })
-  column1!: string[];
-}
-
-export const description = 'should register a table with a column with a default value (array)';
-export const schema: DatabaseSchema = {
-  databaseName: 'postgres',
-  schemaName: 'public',
-  functions: [],
-  enums: [],
-  extensions: [],
-  parameters: [],
-  overrides: [],
-  tables: [
-    {
-      name: 'table1',
-      columns: [
-        {
-          name: 'column1',
-          tableName: 'table1',
-          type: 'character varying',
-          nullable: false,
-          isArray: true,
-          primary: false,
-          synchronize: true,
-          default: "'{}'",
-        },
-      ],
-      indexes: [],
-      triggers: [],
-      constraints: [],
-      synchronize: true,
-    },
-  ],
-  warnings: [],
-};

web/package.json

@@ -28,7 +28,7 @@
     "@formatjs/icu-messageformat-parser": "^2.9.8",
     "@immich/justified-layout-wasm": "^0.4.3",
     "@immich/sdk": "file:../open-api/typescript-sdk",
-    "@immich/ui": "^0.50.1",
+    "@immich/ui": "^0.49.2",
     "@mapbox/mapbox-gl-rtl-text": "0.2.3",
     "@mdi/js": "^7.4.47",
     "@photo-sphere-viewer/core": "^5.14.0",
@@ -61,6 +61,7 @@
     "svelte-maplibre": "^1.2.5",
     "svelte-persisted-store": "^0.12.0",
     "tabbable": "^6.2.0",
+    "three": "^0.179.1",
     "thumbhash": "^0.1.1",
     "uplot": "^1.6.32"
   },
@@ -83,6 +84,7 @@
     "@types/lodash-es": "^4.17.12",
     "@types/luxon": "^3.4.2",
     "@types/qrcode": "^1.5.5",
+    "@types/three": "^0.181.0",
     "@vitest/coverage-v8": "^3.0.0",
     "dotenv": "^17.0.0",
     "eslint": "^9.36.0",
@@ -93,12 +95,12 @@
     "factory.ts": "^1.4.1",
     "globals": "^16.0.0",
     "happy-dom": "^20.0.0",
-    "prettier": "^3.7.4",
+    "prettier": "^3.4.2",
     "prettier-plugin-organize-imports": "^4.0.0",
     "prettier-plugin-sort-json": "^4.1.1",
     "prettier-plugin-svelte": "^3.3.3",
     "rollup-plugin-visualizer": "^6.0.0",
-    "svelte": "5.45.5",
+    "svelte": "5.45.2",
     "svelte-check": "^4.1.5",
     "svelte-eslint-parser": "^1.3.3",
     "tailwindcss": "^4.1.7",

web/src/lib/components/HeaderActionButton.svelte

@@ -1,24 +0,0 @@
-<script lang="ts">
-  import type { HeaderButtonActionItem } from '$lib/types';
-  import { Button } from '@immich/ui';
-
-  type Props = {
-    action: HeaderButtonActionItem;
-  };
-
-  const { action }: Props = $props();
-  const { title, icon, color = 'secondary', onAction } = $derived(action);
-</script>
-
-{#if action.$if?.() ?? true}
-  <Button
-    variant="ghost"
-    size="small"
-    {color}
-    leadingIcon={icon}
-    onclick={() => onAction(action)}
-    title={action.data?.title}
-  >
-    {title}
-  </Button>
-{/if}

web/src/lib/components/HeaderButton.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+  import { type ActionItem, Button, Text } from '@immich/ui';
+
+  type Props = {
+    action: ActionItem;
+    title?: string;
+  };
+
+  const { action, title: titleAttr }: Props = $props();
+  const { title, icon, color = 'secondary', onAction } = $derived(action);
+</script>
+
+{#if action.$if?.() ?? true}
+  <Button variant="ghost" size="small" {color} leadingIcon={icon} onclick={() => onAction(action)} title={titleAttr}>
+    <Text class="hidden md:block">{title}</Text>
+  </Button>
+{/if}

web/src/lib/components/album-page/albums-table-row.svelte

@@ -32,7 +32,7 @@
 </script>
 
 <tr
-  class="flex w-full place-items-center border-3 border-transparent p-2 text-center even:bg-subtle/20 odd:bg-subtle/80 hover:cursor-pointer hover:border-immich-primary/75 odd:dark:bg-immich-dark-gray/75 even:dark:bg-immich-dark-gray/50 dark:hover:border-immich-dark-primary/75 md:px-5 md:py-2"
+  class="flex h-12 w-full place-items-center border-3 border-transparent p-2 text-center even:bg-subtle/20 odd:bg-subtle/80 hover:cursor-pointer hover:border-immich-primary/75 odd:dark:bg-immich-dark-gray/75 even:dark:bg-immich-dark-gray/50 dark:hover:border-immich-dark-primary/75 md:p-5"
   onclick={() => goto(resolve(`${AppRoute.ALBUMS}/${album.id}`))}
   {oncontextmenu}
 >

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

@@ -0,0 +1,426 @@
+<script lang="ts">
+  import { onDestroy, onMount } from 'svelte';
+  import * as THREE from 'three';
+  import { MapControls } from 'three/addons/controls/MapControls.js';
+
+  interface Props {
+    // Props
+    imageUrl?: string;
+
+    // Exported variables for external access
+    imageWidth?: number;
+    imageHeight?: number;
+    zoomPercent?: number;
+    cameraX?: number;
+    cameraY?: number;
+  }
+
+  let {
+    imageUrl = '',
+
+    imageWidth = $bindable(0),
+    imageHeight = $bindable(0),
+    zoomPercent = $bindable(100),
+    cameraX = $bindable(0),
+    cameraY = $bindable(0),
+  }: Props = $props();
+
+  // Internal state
+  let container: HTMLDivElement = $state();
+  let canvas: HTMLCanvasElement = $state();
+  let scene: THREE.Scene = $state();
+  let camera: THREE.OrthographicCamera;
+  let renderer: THREE.WebGLRenderer = $state();
+  let controls: MapControls;
+  let imageMesh: THREE.Mesh | null = null;
+  let initialZoom: number = 1;
+  let currentZoom: number = 1;
+
+  // Reactive statements
+  let canvasSize = $derived(
+    container ? `${renderer?.domElement.width || 0} × ${renderer?.domElement.height || 0}` : 'Not initialized',
+  );
+  let imageDims = $derived(imageWidth && imageHeight ? `${imageWidth} × ${imageHeight}` : 'Not loaded');
+
+  function initThreeJS() {
+    if (!container || !canvas) {
+      return;
+    }
+
+    // Create scene
+    scene = new THREE.Scene();
+    scene.background = new THREE.Color(0x00_00_00);
+
+    // Get initial canvas display size
+    const width = canvas.clientWidth;
+    const height = canvas.clientHeight;
+
+    // Create orthographic camera
+    const aspect = width / height;
+    const frustumSize = 1000;
+    camera = new THREE.OrthographicCamera(
+      (frustumSize * aspect) / -2,
+      (frustumSize * aspect) / 2,
+      frustumSize / 2,
+      frustumSize / -2,
+      0.1,
+      1000,
+    );
+    camera.position.z = 10;
+
+    // Create renderer
+    renderer = new THREE.WebGLRenderer({ canvas, antialias: true });
+    // Pass false to prevent setting inline styles - CSS handles display size
+    renderer.setSize(width, height, false);
+    // Cap pixel ratio at 2 for performance (most displays are 1x or 2x)
+    renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
+    // Use sRGB color space for correct color rendering (matches browser's <img> behavior)
+    renderer.outputColorSpace = THREE.SRGBColorSpace;
+
+    // Initialize MapControls - handles all pan/zoom/touch interactions
+    controls = new MapControls(camera, canvas);
+    controls.enableRotate = false; // Disable rotation for 2D viewing
+    controls.zoomToCursor = true; // Zoom toward mouse cursor
+    controls.screenSpacePanning = true; // Pan in screen space
+    controls.minZoom = 0.1; // Will be updated after image loads
+    controls.maxZoom = 20;
+    controls.zoomSpeed = 3; // Faster zoom response (default is 1)
+    controls.panSpeed = 3;
+    controls.enableDamping = true; // Disable damping for instant response
+    controls.dampingFactor = 0.1;
+
+    // Configure mouse buttons - LEFT button only for panning
+    controls.mouseButtons = {
+      LEFT: THREE.MOUSE.PAN,
+      MIDDLE: THREE.MOUSE.DOLLY,
+      RIGHT: undefined, // Disable right-click to allow context menu
+    };
+
+    controls.addEventListener('change', () => {
+      constrainPan(); // Constrain panning to keep image in viewport
+      updateExportedVars();
+    });
+  }
+
+  function checkAndHandleResize() {
+    if (!canvas || !renderer || !camera) {
+      return false;
+    }
+
+    // Get the actual display size of the canvas
+    const width = canvas.clientWidth;
+    const height = canvas.clientHeight;
+
+    // Check if the canvas drawing buffer size needs to be updated
+    const needsResize = canvas.width !== width || canvas.height !== height;
+
+    if (needsResize) {
+      // Update the drawing buffer size to match display size
+      // Pass false to prevent three.js from setting inline styles
+      renderer.setSize(width, height, false);
+
+      // Update camera aspect
+      const aspect = width / height;
+      const frustumSize = 1000;
+      camera.left = (frustumSize * aspect) / -2;
+      camera.right = (frustumSize * aspect) / 2;
+      camera.top = frustumSize / 2;
+      camera.bottom = frustumSize / -2;
+      camera.updateProjectionMatrix();
+
+      if (imageMesh && controls) {
+        // Preserve the user's zoom level during resize
+        const userZoomLevel = camera.zoom;
+
+        // Recalculate the mesh scale to fit the new frustum
+        const canvasAspect = width / height;
+        const imageAspect = imageWidth / imageHeight;
+        const newScale =
+          imageAspect > canvasAspect
+            ? (camera.right - camera.left) / imageWidth
+            : (camera.top - camera.bottom) / imageHeight;
+
+        // Update mesh scale to fit new viewport
+        imageMesh.scale.set(newScale, newScale, 1);
+
+        // Maintain user's zoom level
+        camera.zoom = userZoomLevel;
+        camera.updateProjectionMatrix();
+      }
+    }
+
+    return needsResize;
+  }
+
+  function constrainPan() {
+    if (!controls || !camera || !imageMesh) {
+      return;
+    }
+
+    // Get bounding box of the image mesh in world space
+    const bbox = new THREE.Box3().setFromObject(imageMesh);
+
+    // Calculate the visible area based on camera frustum (adjusted for zoom)
+    const viewWidth = (camera.right - camera.left) / camera.zoom;
+    const viewHeight = (camera.top - camera.bottom) / camera.zoom;
+
+    // Calculate image size in world space
+    const imageWidth = bbox.max.x - bbox.min.x;
+    const imageHeight = bbox.max.y - bbox.min.y;
+
+    // Calculate pan limits
+    // If image is smaller than view, center it (no panning)
+    // If image is larger than view, allow panning to see all parts
+    let minX, maxX, minY, maxY;
+
+    if (imageWidth <= viewWidth) {
+      // Image fits horizontally - center it
+      minX = maxX = 0;
+    } else {
+      // Image is larger - allow panning within bounds
+      const halfViewWidth = viewWidth / 2;
+      minX = bbox.min.x + halfViewWidth;
+      maxX = bbox.max.x - halfViewWidth;
+    }
+
+    if (imageHeight <= viewHeight) {
+      // Image fits vertically - center it
+      minY = maxY = 0;
+    } else {
+      // Image is larger - allow panning within bounds
+      const halfViewHeight = viewHeight / 2;
+      minY = bbox.min.y + halfViewHeight;
+      maxY = bbox.max.y - halfViewHeight;
+    }
+
+    // Clamp the camera position within bounds
+    camera.position.x = Math.max(minX, Math.min(maxX, camera.position.x));
+    camera.position.y = Math.max(minY, Math.min(maxY, camera.position.y));
+
+    // Clamp the controls target to match
+    controls.target.x = camera.position.x;
+    controls.target.y = camera.position.y;
+  }
+
+  function calculateInitialView() {
+    if (!imageMesh || !container || !camera || !controls) {
+      return;
+    }
+
+    const canvasAspect = container.clientWidth / container.clientHeight;
+    const imageAspect = imageWidth / imageHeight;
+
+    // Scale the mesh to fit within the frustum
+    // The frustum is 1000 units, so scale image to fit within that
+    let scale;
+    scale =
+      imageAspect > canvasAspect
+        ? (camera.right - camera.left) / imageWidth
+        : (camera.top - camera.bottom) / imageHeight;
+
+    // Apply scale to mesh so it fits in the viewport at zoom=1
+    imageMesh.scale.set(scale, scale, 1);
+
+    initialZoom = 1;
+    currentZoom = 1;
+
+    // Reset camera zoom to 1 (mesh is already scaled to fit)
+    camera.zoom = 1;
+    camera.updateProjectionMatrix();
+
+    // Center camera and controls target
+    camera.position.set(0, 0, 10);
+    controls.target.set(0, 0, 0);
+    controls.update();
+
+    // Set minimum zoom to prevent zooming out beyond initial fit
+    controls.minZoom = 1;
+
+    updateExportedVars();
+  }
+
+  function loadImage(url: string) {
+    if (!url || !scene) {
+      return;
+    }
+
+    const textureLoader = new THREE.TextureLoader();
+    textureLoader.setCrossOrigin('anonymous');
+
+    textureLoader.load(
+      url,
+      function (texture) {
+        imageWidth = texture.image.width;
+        imageHeight = texture.image.height;
+
+        // Configure texture for high quality zooming
+        texture.minFilter = THREE.LinearFilter; // Smooth when zoomed out
+        texture.magFilter = THREE.LinearFilter; // Smooth when zoomed in
+        texture.colorSpace = THREE.SRGBColorSpace; // Use sRGB color space to match browser rendering
+        texture.needsUpdate = true;
+
+        // Remove old mesh if exists
+        if (imageMesh) {
+          scene.remove(imageMesh);
+          imageMesh.geometry.dispose();
+          (imageMesh.material as THREE.Material).dispose();
+        }
+
+        // Create plane geometry with image dimensions
+        const geometry = new THREE.PlaneGeometry(imageWidth, imageHeight);
+        const material = new THREE.MeshBasicMaterial({
+          map: texture,
+          side: THREE.DoubleSide,
+        });
+
+        imageMesh = new THREE.Mesh(geometry, material);
+        scene.add(imageMesh);
+
+        calculateInitialView();
+      },
+      undefined,
+      function (error) {
+        console.error('Error loading image:', error);
+      },
+    );
+  }
+
+  function renderLoop() {
+    if (!renderer || !scene || !camera || !controls) {
+      return;
+    }
+
+    // Check and handle resize on every frame to prevent flickering
+    checkAndHandleResize();
+
+    // Update controls (handles damping/inertia)
+    controls.update();
+
+    // Render the scene
+    renderer.render(scene, camera);
+  }
+
+  function startRenderLoop() {
+    if (!renderer) {
+      return;
+    }
+    // Use Three.js's setAnimationLoop for better integration and XR support
+    renderer.setAnimationLoop(renderLoop);
+  }
+
+  function stopRenderLoop() {
+    if (!renderer) {
+      return;
+    }
+    // Pass null to stop the animation loop
+    renderer.setAnimationLoop(null);
+  }
+
+  function updateExportedVars() {
+    if (!camera) {
+      return;
+    }
+    // MapControls uses camera.zoom property
+    zoomPercent = Math.round((camera.zoom / initialZoom) * 100);
+    cameraX = Math.round(camera.position.x);
+    cameraY = Math.round(camera.position.y);
+  }
+
+  export function resetView() {
+    if (!camera || !controls) {
+      return;
+    }
+    // Reset camera zoom and position
+    camera.zoom = initialZoom;
+    camera.position.set(0, 0, 10);
+    camera.updateProjectionMatrix();
+    controls.target.set(0, 0, 0);
+    controls.update();
+  }
+
+  // Custom keyboard shortcuts (MapControls handles arrow keys, +/-, etc.)
+  function handleKeydown(e: KeyboardEvent) {
+    if (!camera || !controls) {
+      return;
+    }
+
+    switch (e.key) {
+      case 'r':
+      case 'R': {
+        e.preventDefault();
+        resetView();
+        break;
+      }
+      // MapControls automatically handles: arrow keys for pan, +/- for zoom
+    }
+  }
+
+  // Lifecycle
+  onMount(() => {
+    initThreeJS();
+
+    if (imageUrl) {
+      loadImage(imageUrl);
+    }
+
+    // Start the continuous render loop (handles resize checks automatically)
+    startRenderLoop();
+
+    // Keyboard events on document
+    document.addEventListener('keydown', handleKeydown);
+  });
+
+  onDestroy(() => {
+    // Cleanup
+    document.removeEventListener('keydown', handleKeydown);
+
+    // Stop the render loop
+    stopRenderLoop();
+
+    // Dispose controls
+    if (controls) {
+      controls.dispose();
+    }
+
+    if (imageMesh) {
+      imageMesh.geometry.dispose();
+      (imageMesh.material as THREE.Material).dispose();
+    }
+
+    if (renderer) {
+      renderer.dispose();
+    }
+  });
+
+  // Watch for imageUrl changes
+  $effect(() => {
+    if (imageUrl && scene) {
+      loadImage(imageUrl);
+    }
+  });
+</script>
+
+<div class="image-viewer-container h-full w-full" bind:this={container}>
+  <!-- MapControls handles all mouse/touch interactions automatically -->
+  <canvas bind:this={canvas}></canvas>
+</div>
+
+<style>
+  .image-viewer-container {
+    position: relative;
+    background: #222;
+    overflow: hidden;
+  }
+
+  canvas {
+    display: block;
+    width: 100%;
+    height: 100%;
+    touch-action: none;
+    cursor: grab;
+  }
+
+  canvas:active {
+    cursor: grabbing;
+  }
+</style>

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

@@ -2,6 +2,7 @@
   import { shortcuts } from '$lib/actions/shortcut';
   import { zoomImageAction } from '$lib/actions/zoom-image';
   import FaceEditor from '$lib/components/asset-viewer/face-editor/face-editor.svelte';
+  import ImageViewer from '$lib/components/asset-viewer/image-viewer.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';
@@ -158,7 +159,8 @@
   // when true, will force loading of the original image
   let forceUseOriginal: boolean = $derived(
     (asset.type === AssetTypeEnum.Image && asset.duration && !asset.duration.includes('0:00:00.000')) ||
-      $photoZoomState.currentZoom > 1,
+      $photoZoomState.currentZoom > 1 ||
+      true,
   );
 
   const targetImageSize = $derived.by(() => {
@@ -250,42 +252,44 @@
       <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}
+    <ImageViewer imageUrl={assetFileUrl}></ImageViewer>
+    <div style="display:none;">
+      <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={assetFileUrl}
+            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={assetFileUrl}
-          alt=""
-          class="-z-1 absolute top-0 start-0 object-cover h-full w-full blur-lg"
+          alt={$getAltText(toTimelineAsset(asset))}
+          class="h-full w-full {$slideshowState === SlideshowState.None
+            ? 'object-contain'
+            : slideshowLookCssMapping[$slideshowLook]}"
           draggable="false"
         />
-      {/if}
-      <img
-        bind:this={$photoViewerImgElement}
-        src={assetFileUrl}
-        alt={$getAltText(toTimelineAsset(asset))}
-        class="h-full w-full {$slideshowState === SlideshowState.None
-          ? 'object-contain'
-          : slideshowLookCssMapping[$slideshowLook]}"
-        draggable="false"
-      />
-      <!-- eslint-disable-next-line svelte/require-each-key -->
-      {#each getBoundingBox($boundingBoxesArray, $photoZoomState, $photoViewerImgElement) as boundingbox}
-        <div
-          class="absolute border-solid border-white border-3 rounded-lg"
-          style="top: {boundingbox.top}px; left: {boundingbox.left}px; height: {boundingbox.height}px; width: {boundingbox.width}px;"
-        ></div>
-      {/each}
+        <!-- eslint-disable-next-line svelte/require-each-key -->
+        {#each getBoundingBox($boundingBoxesArray, $photoZoomState, $photoViewerImgElement) as boundingbox}
+          <div
+            class="absolute border-solid border-white border-3 rounded-lg"
+            style="top: {boundingbox.top}px; left: {boundingbox.left}px; height: {boundingbox.height}px; width: {boundingbox.width}px;"
+          ></div>
+        {/each}
 
-      {#each ocrBoxes as ocrBox (ocrBox.id)}
-        <OcrBoundingBox {ocrBox} />
-      {/each}
+        {#each ocrBoxes as ocrBox (ocrBox.id)}
+          <OcrBoundingBox {ocrBox} />
+        {/each}
+      </div>
     </div>
-
     {#if isFaceEditMode.value}
       <FaceEditor htmlElement={$photoViewerImgElement} {containerWidth} {containerHeight} assetId={asset.id} />
     {/if}

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

@@ -126,7 +126,6 @@
 
   const onMouseLeave = () => {
     mouseOver = false;
-    onMouseEvent?.({ isMouseOver: false, selectedGroupIndex: groupIndex });
   };
 
   let timer: ReturnType<typeof setTimeout> | null = null;

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

@@ -1,33 +1,19 @@
 <script lang="ts">
   import PageContent from '$lib/components/layouts/PageContent.svelte';
+  import TitleLayout from '$lib/components/layouts/TitleLayout.svelte';
   import NavigationBar from '$lib/components/shared-components/navigation-bar/navigation-bar.svelte';
   import AdminSidebar from '$lib/sidebars/AdminSidebar.svelte';
   import { sidebarStore } from '$lib/stores/sidebar.svelte';
-  import type { HeaderButtonActionItem } from '$lib/types';
-  import {
-    AppShell,
-    AppShellHeader,
-    AppShellSidebar,
-    Breadcrumbs,
-    Button,
-    ContextMenuButton,
-    HStack,
-    MenuItemType,
-    Scrollable,
-    isMenuItemType,
-    type BreadcrumbItem,
-  } from '@immich/ui';
-  import { mdiSlashForward } from '@mdi/js';
+  import { AppShell, AppShellHeader, AppShellSidebar, Scrollable, type BreadcrumbItem } from '@immich/ui';
   import type { Snippet } from 'svelte';
-  import { t } from 'svelte-i18n';
 
   type Props = {
     breadcrumbs: BreadcrumbItem[];
-    actions?: Array<HeaderButtonActionItem | MenuItemType>;
+    buttons?: Snippet;
     children?: Snippet;
   };
 
-  let { breadcrumbs, actions = [], children }: Props = $props();
+  let { breadcrumbs, buttons, children }: Props = $props();
 </script>
 
 <AppShell>
@@ -38,37 +24,11 @@
     <AdminSidebar />
   </AppShellSidebar>
 
-  <div class="h-full flex flex-col">
-    <div class="flex h-16 w-full justify-between items-center border-b py-2 px-4 md:px-2">
-      <Breadcrumbs items={breadcrumbs} separator={mdiSlashForward} />
-
-      {#if actions.length > 0}
-        <div class="hidden md:block">
-          <HStack gap={0}>
-            {#each actions as action, i (i)}
-              {#if !isMenuItemType(action) && (action.$if?.() ?? true)}
-                <Button
-                  variant="ghost"
-                  size="small"
-                  color={action.color ?? 'secondary'}
-                  leadingIcon={action.icon}
-                  onclick={() => action.onAction(action)}
-                  title={action.data?.title}
-                >
-                  {action.title}
-                </Button>
-              {/if}
-            {/each}
-          </HStack>
-        </div>
-
-        <ContextMenuButton aria-label={$t('open')} items={actions} class="md:hidden" />
-      {/if}
-    </div>
+  <TitleLayout {breadcrumbs} {buttons}>
     <Scrollable class="grow">
       <PageContent>
         {@render children?.()}
       </PageContent>
     </Scrollable>
-  </div>
+  </TitleLayout>
 </AppShell>

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

@@ -0,0 +1,21 @@
+<script lang="ts">
+  import { Breadcrumbs, type BreadcrumbItem } from '@immich/ui';
+  import { mdiSlashForward } from '@mdi/js';
+  import type { Snippet } from 'svelte';
+
+  type Props = {
+    breadcrumbs: BreadcrumbItem[];
+    buttons?: Snippet;
+    children?: Snippet;
+  };
+
+  let { breadcrumbs, buttons, children }: Props = $props();
+</script>
+
+<div class="h-full flex flex-col">
+  <div class="flex h-16 w-full place-items-center justify-between border-b p-2">
+    <Breadcrumbs items={breadcrumbs} separator={mdiSlashForward} />
+    {@render buttons?.()}
+  </div>
+  {@render children?.()}
+</div>

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

@@ -28,7 +28,7 @@ export const getLibrariesActions = ($t: MessageFormatter, libraries: LibraryResp
     title: $t('scan_all_libraries'),
     type: $t('command'),
     icon: mdiSync,
-    onAction: () => handleScanAllLibraries(),
+    onAction: () => void handleScanAllLibraries(),
     shortcuts: { shift: true, key: 'r' },
     $if: () => libraries.length > 0,
   };
@@ -37,7 +37,7 @@ export const getLibrariesActions = ($t: MessageFormatter, libraries: LibraryResp
     title: $t('create_library'),
     type: $t('command'),
     icon: mdiPlusBoxOutline,
-    onAction: () => handleCreateLibrary(),
+    onAction: () => void handleCreateLibrary(),
     shortcuts: { shift: true, key: 'n' },
   };
 
@@ -49,7 +49,7 @@ export const getLibraryActions = ($t: MessageFormatter, library: LibraryResponse
     icon: mdiPencilOutline,
     type: $t('command'),
     title: $t('rename'),
-    onAction: () => modalManager.show(LibraryRenameModal, { library }),
+    onAction: () => void modalManager.show(LibraryRenameModal, { library }),
     shortcuts: { key: 'r' },
   };
 
@@ -58,7 +58,7 @@ export const getLibraryActions = ($t: MessageFormatter, library: LibraryResponse
     type: $t('command'),
     title: $t('delete'),
     color: 'danger',
-    onAction: () => handleDeleteLibrary(library),
+    onAction: () => void handleDeleteLibrary(library),
     shortcuts: { key: 'Backspace' },
   };
 
@@ -66,21 +66,21 @@ export const getLibraryActions = ($t: MessageFormatter, library: LibraryResponse
     icon: mdiPlusBoxOutline,
     type: $t('command'),
     title: $t('add'),
-    onAction: () => modalManager.show(LibraryFolderAddModal, { library }),
+    onAction: () => void modalManager.show(LibraryFolderAddModal, { library }),
   };
 
   const AddExclusionPattern: ActionItem = {
     icon: mdiPlusBoxOutline,
     type: $t('command'),
     title: $t('add'),
-    onAction: () => modalManager.show(LibraryExclusionPatternAddModal, { library }),
+    onAction: () => void modalManager.show(LibraryExclusionPatternAddModal, { library }),
   };
 
   const Scan: ActionItem = {
     icon: mdiSync,
     type: $t('command'),
     title: $t('scan_library'),
-    onAction: () => handleScanLibrary(library),
+    onAction: () => void handleScanLibrary(library),
     shortcuts: { shift: true, key: 'r' },
   };
 
@@ -92,14 +92,14 @@ export const getLibraryFolderActions = ($t: MessageFormatter, library: LibraryRe
     icon: mdiPencilOutline,
     type: $t('command'),
     title: $t('edit'),
-    onAction: () => modalManager.show(LibraryFolderEditModal, { folder, library }),
+    onAction: () => void modalManager.show(LibraryFolderEditModal, { folder, library }),
   };
 
   const Delete: ActionItem = {
     icon: mdiTrashCanOutline,
     type: $t('command'),
     title: $t('delete'),
-    onAction: () => handleDeleteLibraryFolder(library, folder),
+    onAction: () => void handleDeleteLibraryFolder(library, folder),
   };
 
   return { Edit, Delete };
@@ -114,14 +114,14 @@ export const getLibraryExclusionPatternActions = (
     icon: mdiPencilOutline,
     type: $t('command'),
     title: $t('edit'),
-    onAction: () => modalManager.show(LibraryExclusionPatternEditModal, { exclusionPattern, library }),
+    onAction: () => void modalManager.show(LibraryExclusionPatternEditModal, { exclusionPattern, library }),
   };
 
   const Delete: ActionItem = {
     icon: mdiTrashCanOutline,
     type: $t('command'),
     title: $t('delete'),
-    onAction: () => handleDeleteExclusionPattern(library, exclusionPattern),
+    onAction: () => void handleDeleteExclusionPattern(library, exclusionPattern),
   };
 
   return { Edit, Delete };
@@ -273,7 +273,7 @@ const handleDeleteLibraryFolder = async (library: LibraryResponseDto, folder: st
   });
 
   if (!confirmed) {
-    return;
+    return false;
   }
 
   try {
@@ -285,7 +285,10 @@ const handleDeleteLibraryFolder = async (library: LibraryResponseDto, folder: st
     toastManager.success($t('admin.library_updated'));
   } catch (error) {
     handleError(error, $t('errors.unable_to_update_library'));
+    return false;
   }
+
+  return true;
 };
 
 export const handleAddLibraryExclusionPattern = async (library: LibraryResponseDto, exclusionPattern: string) => {
@@ -342,8 +345,9 @@ const handleDeleteExclusionPattern = async (library: LibraryResponseDto, exclusi
   const $t = await getFormatter();
 
   const confirmed = await modalManager.showDialog({ prompt: $t('admin.library_remove_exclusion_pattern_prompt') });
+
   if (!confirmed) {
-    return;
+    return false;
   }
 
   try {
@@ -357,5 +361,8 @@ const handleDeleteExclusionPattern = async (library: LibraryResponseDto, exclusi
     toastManager.success($t('admin.library_updated'));
   } catch (error) {
     handleError(error, $t('errors.unable_to_update_library'));
+    return false;
   }
+
+  return true;
 };

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

@@ -1,20 +1,11 @@
 import { goto } from '$app/navigation';
 import { AppRoute } from '$lib/constants';
 import { eventManager } from '$lib/managers/event-manager.svelte';
-import { queueManager } from '$lib/managers/queue-manager.svelte';
 import JobCreateModal from '$lib/modals/JobCreateModal.svelte';
-import type { HeaderButtonActionItem } from '$lib/types';
+import { user } from '$lib/stores/user.store';
 import { handleError } from '$lib/utils/handle-error';
 import { getFormatter } from '$lib/utils/i18n';
-import {
-  emptyQueue,
-  getQueue,
-  QueueCommand,
-  QueueName,
-  runQueueCommandLegacy,
-  updateQueue,
-  type QueueResponseDto,
-} from '@immich/sdk';
+import { emptyQueue, getQueue, QueueName, updateQueue, type QueueResponseDto } from '@immich/sdk';
 import { modalManager, toastManager, type ActionItem, type IconLike } from '@immich/ui';
 import {
   mdiClose,
@@ -32,6 +23,7 @@ import {
   mdiPlay,
   mdiPlus,
   mdiStateMachine,
+  mdiSync,
   mdiTable,
   mdiTagFaces,
   mdiTrashCanOutline,
@@ -39,6 +31,7 @@ import {
   mdiVideo,
 } from '@mdi/js';
 import type { MessageFormatter } from 'svelte-i18n';
+import { get } from 'svelte/store';
 
 type QueueItem = {
   icon: IconLike;
@@ -46,17 +39,15 @@ type QueueItem = {
   subtitle?: string;
 };
 
-export const getQueuesActions = ($t: MessageFormatter, queues: QueueResponseDto[] | undefined) => {
-  const pausedQueues = (queues ?? []).filter(({ isPaused }) => isPaused).map(({ name }) => name);
-
-  const ResumePaused: HeaderButtonActionItem = {
-    title: $t('resume_paused_jobs', { values: { count: pausedQueues.length } }),
-    $if: () => pausedQueues.length > 0,
-    icon: mdiPlay,
-    onAction: () => handleResumePausedJobs(pausedQueues),
-    data: {
-      title: pausedQueues.join(', '),
-    },
+export const getQueuesActions = ($t: MessageFormatter) => {
+  const ViewQueues: ActionItem = {
+    title: $t('admin.queues'),
+    description: $t('admin.queues_page_description'),
+    icon: mdiSync,
+    type: $t('page'),
+    isGlobal: true,
+    $if: () => get(user)?.isAdmin,
+    onAction: () => goto(AppRoute.ADMIN_QUEUES),
   };
 
   const CreateJob: ActionItem = {
@@ -77,7 +68,7 @@ export const getQueuesActions = ($t: MessageFormatter, queues: QueueResponseDto[
     onAction: () => goto(`${AppRoute.ADMIN_SETTINGS}?isOpen=job`),
   };
 
-  return { ResumePaused, ManageConcurrency, CreateJob };
+  return { ViewQueues, ManageConcurrency, CreateJob };
 };
 
 export const getQueueActions = ($t: MessageFormatter, queue: QueueResponseDto) => {
@@ -135,19 +126,6 @@ export const handleEmptyQueue = async (queue: QueueResponseDto) => {
   }
 };
 
-const handleResumePausedJobs = async (queues: QueueName[]) => {
-  const $t = await getFormatter();
-
-  try {
-    for (const name of queues) {
-      await runQueueCommandLegacy({ name, queueCommandDto: { command: QueueCommand.Resume, force: false } });
-    }
-    await queueManager.refresh();
-  } catch (error) {
-    handleError(error, $t('admin.failed_job_command', { values: { command: 'resume', job: 'paused jobs' } }));
-  }
-};
-
 const handleRemoveFailedJobs = async (queue: QueueResponseDto) => {
   const $t = await getFormatter();
 

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

@@ -24,26 +24,26 @@ export const getSharedLinkActions = ($t: MessageFormatter, sharedLink: SharedLin
   const Edit: ActionItem = {
     title: $t('edit_link'),
     icon: mdiPencilOutline,
-    onAction: () => goto(`${AppRoute.SHARED_LINKS}/${sharedLink.id}`),
+    onAction: () => void goto(`${AppRoute.SHARED_LINKS}/${sharedLink.id}`),
   };
 
   const Delete: ActionItem = {
     title: $t('delete_link'),
     icon: mdiTrashCanOutline,
     color: 'danger',
-    onAction: () => handleDeleteSharedLink(sharedLink),
+    onAction: () => void handleDeleteSharedLink(sharedLink),
   };
 
   const Copy: ActionItem = {
     title: $t('copy_link'),
     icon: mdiContentCopy,
-    onAction: () => copyToClipboard(asUrl(sharedLink)),
+    onAction: () => void copyToClipboard(asUrl(sharedLink)),
   };
 
   const ViewQrCode: ActionItem = {
     title: $t('view_qr_code'),
     icon: mdiQrcode,
-    onAction: () => handleShowSharedLinkQrCode(sharedLink),
+    onAction: () => void handleShowSharedLinkQrCode(sharedLink),
   };
 
   return { Edit, Delete, Copy, ViewQrCode };
@@ -88,7 +88,7 @@ export const handleUpdateSharedLink = async (sharedLink: SharedLinkResponseDto,
   }
 };
 
-const handleDeleteSharedLink = async (sharedLink: SharedLinkResponseDto) => {
+export const handleDeleteSharedLink = async (sharedLink: SharedLinkResponseDto): Promise<boolean> => {
   const $t = await getFormatter();
   const success = await modalManager.showDialog({
     title: $t('delete_shared_link'),
@@ -96,15 +96,17 @@ const handleDeleteSharedLink = async (sharedLink: SharedLinkResponseDto) => {
     confirmText: $t('delete'),
   });
   if (!success) {
-    return;
+    return false;
   }
 
   try {
     await removeSharedLink({ id: sharedLink.id });
     eventManager.emit('SharedLinkDelete', sharedLink);
     toastManager.success($t('deleted_shared_link'));
+    return true;
   } catch (error) {
     handleError(error, $t('errors.unable_to_delete_shared_link'));
+    return false;
   }
 };
 

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

@@ -20,7 +20,7 @@ export const getSystemConfigActions = (
     description: $t('admin.copy_config_to_clipboard_description'),
     type: $t('command'),
     icon: mdiContentCopy,
-    onAction: () => handleCopyToClipboard(config),
+    onAction: () => void handleCopyToClipboard(config),
     shortcuts: { shift: true, key: 'c' },
   };
 

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

@@ -1,13 +1,11 @@
 import { goto } from '$app/navigation';
 import { eventManager } from '$lib/managers/event-manager.svelte';
-import { serverConfigManager } from '$lib/managers/server-config-manager.svelte';
 import PasswordResetSuccessModal from '$lib/modals/PasswordResetSuccessModal.svelte';
 import UserCreateModal from '$lib/modals/UserCreateModal.svelte';
 import UserDeleteConfirmModal from '$lib/modals/UserDeleteConfirmModal.svelte';
 import UserEditModal from '$lib/modals/UserEditModal.svelte';
 import UserRestoreConfirmModal from '$lib/modals/UserRestoreConfirmModal.svelte';
 import { user as authUser } from '$lib/stores/user.store';
-import type { HeaderButtonActionItem } from '$lib/types';
 import { handleError } from '$lib/utils/handle-error';
 import { getFormatter } from '$lib/utils/i18n';
 import {
@@ -30,7 +28,6 @@ import {
   mdiPlusBoxOutline,
   mdiTrashCanOutline,
 } from '@mdi/js';
-import { DateTime } from 'luxon';
 import type { MessageFormatter } from 'svelte-i18n';
 import { get } from 'svelte/store';
 
@@ -39,7 +36,7 @@ export const getUserAdminsActions = ($t: MessageFormatter) => {
     title: $t('create_user'),
     type: $t('command'),
     icon: mdiPlusBoxOutline,
-    onAction: () => modalManager.show(UserCreateModal, {}),
+    onAction: () => void modalManager.show(UserCreateModal, {}),
     shortcuts: { shift: true, key: 'n' },
   };
 
@@ -63,17 +60,11 @@ export const getUserAdminActions = ($t: MessageFormatter, user: UserAdminRespons
     shortcuts: { key: 'Backspace' },
   };
 
-  const getDeleteDate = (deletedAt: string): Date =>
-    DateTime.fromISO(deletedAt).plus({ days: serverConfigManager.value.userDeleteDelay }).toJSDate();
-
-  const Restore: HeaderButtonActionItem = {
+  const Restore: ActionItem = {
     icon: mdiDeleteRestore,
     title: $t('restore'),
     type: $t('command'),
     color: 'primary',
-    data: {
-      title: $t('admin.user_restore_scheduled_removal', { values: { date: getDeleteDate(user.deletedAt!) } }),
-    },
     $if: () => !!user.deletedAt && user.status === UserStatus.Deleted,
     onAction: () => modalManager.show(UserRestoreConfirmModal, { user }),
   };
@@ -83,14 +74,14 @@ export const getUserAdminActions = ($t: MessageFormatter, user: UserAdminRespons
     title: $t('reset_password'),
     type: $t('command'),
     $if: () => get(authUser).id !== user.id,
-    onAction: () => handleResetPasswordUserAdmin(user),
+    onAction: () => void handleResetPasswordUserAdmin(user),
   };
 
   const ResetPinCode: ActionItem = {
     icon: mdiLockSmart,
     type: $t('command'),
     title: $t('reset_pin_code'),
-    onAction: () => handleResetPinCodeUserAdmin(user),
+    onAction: () => void handleResetPinCodeUserAdmin(user),
   };
 
   return { Update, Delete, Restore, ResetPassword, ResetPinCode };
@@ -171,12 +162,12 @@ const generatePassword = (length: number = 16) => {
   return generatedPassword;
 };
 
-const handleResetPasswordUserAdmin = async (user: UserAdminResponseDto) => {
+export const handleResetPasswordUserAdmin = async (user: UserAdminResponseDto) => {
   const $t = await getFormatter();
   const prompt = $t('admin.confirm_user_password_reset', { values: { user: user.name } });
   const success = await modalManager.showDialog({ prompt });
   if (!success) {
-    return;
+    return false;
   }
 
   try {
@@ -185,24 +176,28 @@ const handleResetPasswordUserAdmin = async (user: UserAdminResponseDto) => {
     eventManager.emit('UserAdminUpdate', response);
     toastManager.success();
     await modalManager.show(PasswordResetSuccessModal, { newPassword: dto.password });
+    return true;
   } catch (error) {
     handleError(error, $t('errors.unable_to_reset_password'));
+    return false;
   }
 };
 
-const handleResetPinCodeUserAdmin = async (user: UserAdminResponseDto) => {
+export const handleResetPinCodeUserAdmin = async (user: UserAdminResponseDto) => {
   const $t = await getFormatter();
   const prompt = $t('admin.confirm_user_pin_code_reset', { values: { user: user.name } });
   const success = await modalManager.showDialog({ prompt });
   if (!success) {
-    return;
+    return false;
   }
 
   try {
     const response = await updateUserAdmin({ id: user.id, userAdminUpdateDto: { pinCode: null } });
     eventManager.emit('UserAdminUpdate', response);
     toastManager.success($t('pin_code_reset_successfully'));
+    return true;
   } catch (error) {
     handleError(error, $t('errors.unable_to_reset_pin_code'));
+    return false;
   }
 };

web/src/lib/types.ts

@@ -1,5 +1,4 @@
 import type { QueueResponseDto, ServerVersionResponseDto } from '@immich/sdk';
-import type { ActionItem } from '@immich/ui';
 
 export interface ReleaseEvent {
   isAvailable: boolean;
@@ -10,5 +9,3 @@ export interface ReleaseEvent {
 }
 
 export type QueueSnapshot = { timestamp: number; snapshot?: QueueResponseDto[] };
-
-export type HeaderButtonActionItem = ActionItem & { data?: { title?: string } };

web/src/routes/+layout.svelte

@@ -14,15 +14,15 @@
   import { themeManager } from '$lib/managers/theme-manager.svelte';
   import ServerRestartingModal from '$lib/modals/ServerRestartingModal.svelte';
   import VersionAnnouncementModal from '$lib/modals/VersionAnnouncementModal.svelte';
-  import { sidebarStore } from '$lib/stores/sidebar.svelte';
+  import { getQueuesActions } from '$lib/services/queue.service';
   import { user } from '$lib/stores/user.store';
   import { closeWebsocketConnection, openWebsocketConnection, websocketStore } from '$lib/stores/websocket';
   import type { ReleaseEvent } from '$lib/types';
   import { copyToClipboard, getReleaseType, semverToName } from '$lib/utils';
   import { maintenanceShouldRedirect } from '$lib/utils/maintenance';
   import { isAssetViewerRoute } from '$lib/utils/navigation';
-  import { CommandPaletteContext, modalManager, setTranslations, toastManager, type ActionItem } from '@immich/ui';
-  import { mdiAccountMultipleOutline, mdiBookshelf, mdiCog, mdiServer, mdiSync, mdiThemeLightDark } from '@mdi/js';
+  import { CommandPaletteContext, modalManager, setTranslations, type ActionItem } from '@immich/ui';
+  import { mdiAccountMultipleOutline, mdiBookshelf, mdiCog, mdiServer, mdiThemeLightDark } from '@mdi/js';
   import { onMount, type Snippet } from 'svelte';
   import { t } from 'svelte-i18n';
   import '../app.css';
@@ -53,8 +53,6 @@
     return new URL(page.url.pathname + page.url.search, 'https://my.immich.app');
   };
 
-  toastManager.setOptions({ class: 'top-16' });
-
   onMount(() => {
     const element = document.querySelector('#stencil');
     element?.remove();
@@ -64,10 +62,6 @@
   eventManager.emit('AppInit');
 
   beforeNavigate(({ from, to }) => {
-    if (sidebarStore.isOpen) {
-      sidebarStore.reset();
-    }
-
     if (isAssetViewerRoute(from) && isAssetViewerRoute(to)) {
       return;
     }
@@ -155,13 +149,6 @@
       icon: mdiCog,
       onAction: () => goto(AppRoute.ADMIN_SETTINGS),
     },
-    {
-      title: $t('admin.queues'),
-      description: $t('admin.queues_page_description'),
-      icon: mdiSync,
-      type: $t('page'),
-      onAction: () => goto(AppRoute.ADMIN_QUEUES),
-    },
     {
       title: $t('external_libraries'),
       description: $t('admin.external_libraries_page_description'),
@@ -176,7 +163,7 @@
     },
   ].map((route) => ({ ...route, type: $t('page'), isGlobal: true, $if: () => $user?.isAdmin }));
 
-  const commands = $derived([...userCommands, ...adminCommands]);
+  const commands = $derived([...userCommands, ...adminCommands, ...Object.values(getQueuesActions($t))]);
 </script>
 
 <OnEvents {onReleaseEvent} />

web/src/routes/admin/library-management/+page.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import { goto } from '$app/navigation';
+  import HeaderButton from '$lib/components/HeaderButton.svelte';
   import AdminPageLayout from '$lib/components/layouts/AdminPageLayout.svelte';
   import OnEvents from '$lib/components/OnEvents.svelte';
   import EmptyPlaceholder from '$lib/components/shared-components/empty-placeholder.svelte';
@@ -59,11 +60,17 @@
 
 <CommandPaletteContext commands={[Create, ScanAll]} />
 
-<AdminPageLayout breadcrumbs={[{ title: data.meta.title }]} actions={[ScanAll, Create]}>
+<AdminPageLayout breadcrumbs={[{ title: data.meta.title }]}>
+  {#snippet buttons()}
+    <div class="flex justify-end gap-2">
+      <HeaderButton action={ScanAll} />
+      <HeaderButton action={Create} />
+    </div>
+  {/snippet}
   <section class="my-4">
     <div class="flex flex-col items-center gap-2" in:fade={{ duration: 500 }}>
       {#if libraries.length > 0}
-        <table class="text-start">
+        <table class="w-3/4 text-start">
           <thead
             class="mb-4 flex h-12 w-full rounded-md border bg-gray-50 text-primary dark:border-immich-dark-gray dark:bg-immich-dark-gray"
           >

web/src/routes/admin/library-management/+page.ts

@@ -23,7 +23,7 @@ export const load = (async ({ url }) => {
     statistics: Object.fromEntries(statistics),
     owners: Object.fromEntries(owners),
     meta: {
-      title: $t('external_libraries'),
+      title: $t('admin.external_library_management'),
     },
   };
 }) satisfies PageLoad;

web/src/routes/admin/library-management/[id]/+page.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { goto } from '$app/navigation';
   import emptyFoldersUrl from '$lib/assets/empty-folders.svg';
-  import HeaderActionButton from '$lib/components/HeaderActionButton.svelte';
+  import HeaderButton from '$lib/components/HeaderButton.svelte';
   import AdminPageLayout from '$lib/components/layouts/AdminPageLayout.svelte';
   import OnEvents from '$lib/components/OnEvents.svelte';
   import ServerStatisticsCard from '$lib/components/server-statistics/ServerStatisticsCard.svelte';
@@ -53,9 +53,18 @@
 <CommandPaletteContext commands={[Rename, Delete, AddFolder, AddExclusionPattern, Scan]} />
 
 <AdminPageLayout
-  breadcrumbs={[{ title: $t('external_libraries'), href: AppRoute.ADMIN_LIBRARY_MANAGEMENT }, { title: library.name }]}
-  actions={[Scan, Rename, Delete]}
+  breadcrumbs={[
+    { title: $t('admin.external_library_management'), href: AppRoute.ADMIN_LIBRARY_MANAGEMENT },
+    { title: library.name },
+  ]}
 >
+  {#snippet buttons()}
+    <div class="flex justify-end gap-2">
+      <HeaderButton action={Scan} />
+      <HeaderButton action={Rename} />
+      <HeaderButton action={Delete} />
+    </div>
+  {/snippet}
   <Container size="large" center>
     <div class="grid gap-4 grid-cols-1 lg:grid-cols-2 w-full">
       <Heading tag="h1" size="large" class="col-span-full my-4">{library.name}</Heading>
@@ -71,7 +80,7 @@
               <Icon icon={mdiFolderOutline} size="1.5rem" />
               <CardTitle>{$t('folders')}</CardTitle>
             </div>
-            <HeaderActionButton action={AddFolder} />
+            <HeaderButton action={AddFolder} />
           </div>
         </CardHeader>
         <CardBody>
@@ -111,7 +120,7 @@
               <Icon icon={mdiFilterMinusOutline} size="1.5rem" />
               <CardTitle>{$t('exclusion_pattern')}</CardTitle>
             </div>
-            <HeaderActionButton action={AddExclusionPattern} />
+            <HeaderButton action={AddExclusionPattern} />
           </div>
         </CardHeader>
         <CardBody>

web/src/routes/admin/queues/+page.svelte

@@ -1,11 +1,14 @@
 <script lang="ts">
+  import HeaderButton from '$lib/components/HeaderButton.svelte';
   import AdminPageLayout from '$lib/components/layouts/AdminPageLayout.svelte';
   import OnEvents from '$lib/components/OnEvents.svelte';
   import JobsPanel from '$lib/components/QueuePanel.svelte';
   import { queueManager } from '$lib/managers/queue-manager.svelte';
   import { getQueuesActions } from '$lib/services/queue.service';
-  import { type QueueResponseDto } from '@immich/sdk';
-  import { CommandPaletteContext, type ActionItem } from '@immich/ui';
+  import { handleError } from '$lib/utils/handle-error';
+  import { QueueCommand, runQueueCommandLegacy, type QueueResponseDto } from '@immich/sdk';
+  import { Button, CommandPaletteContext, HStack, Text, type ActionItem } from '@immich/ui';
+  import { mdiPlay } from '@mdi/js';
   import { onMount } from 'svelte';
   import { t } from 'svelte-i18n';
   import type { PageData } from './$types';
@@ -19,8 +22,20 @@
   onMount(() => queueManager.listen());
 
   let queues = $derived<QueueResponseDto[]>(queueManager.queues);
+  const pausedQueues = $derived(queues.filter(({ isPaused }) => isPaused).map(({ name }) => name));
 
-  const { ResumePaused, CreateJob, ManageConcurrency } = $derived(getQueuesActions($t, queueManager.queues));
+  const handleResumePausedJobs = async () => {
+    try {
+      for (const name of pausedQueues) {
+        await runQueueCommandLegacy({ name, queueCommandDto: { command: QueueCommand.Resume, force: false } });
+      }
+      await queueManager.refresh();
+    } catch (error) {
+      handleError(error, $t('admin.failed_job_command', { values: { command: 'resume', job: 'paused jobs' } }));
+    }
+  };
+
+  const { CreateJob, ManageConcurrency } = $derived(getQueuesActions($t));
   const commands: ActionItem[] = $derived([CreateJob, ManageConcurrency]);
 
   const onQueueUpdate = (update: QueueResponseDto) => {
@@ -37,7 +52,27 @@
 
 <OnEvents {onQueueUpdate} />
 
-<AdminPageLayout breadcrumbs={[{ title: data.meta.title }]} actions={[ResumePaused, CreateJob, ManageConcurrency]}>
+<AdminPageLayout breadcrumbs={[{ title: data.meta.title }]}>
+  {#snippet buttons()}
+    <HStack gap={0}>
+      {#if pausedQueues.length > 0}
+        <Button
+          leadingIcon={mdiPlay}
+          onclick={handleResumePausedJobs}
+          size="small"
+          variant="ghost"
+          title={pausedQueues.join(', ')}
+        >
+          <Text class="hidden md:block">
+            {$t('resume_paused_jobs', { values: { count: pausedQueues.length } })}
+          </Text>
+        </Button>
+      {/if}
+      <HeaderButton action={CreateJob} />
+      <HeaderButton action={ManageConcurrency} />
+    </HStack>
+  {/snippet}
+
   <section id="setting-content" class="flex place-content-center sm:mx-4">
     <section class="w-full pb-28 sm:w-5/6 md:w-212.5">
       {#if queues}

web/src/routes/admin/queues/[name]/+page.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import HeaderButton from '$lib/components/HeaderButton.svelte';
   import AdminPageLayout from '$lib/components/layouts/AdminPageLayout.svelte';
   import OnEvents from '$lib/components/OnEvents.svelte';
   import QueueGraph from '$lib/components/QueueGraph.svelte';
@@ -6,18 +7,7 @@
   import { queueManager } from '$lib/managers/queue-manager.svelte';
   import { asQueueItem, getQueueActions } from '$lib/services/queue.service';
   import { type QueueResponseDto } from '@immich/sdk';
-  import {
-    Badge,
-    Card,
-    CardBody,
-    CardHeader,
-    CardTitle,
-    Container,
-    Heading,
-    Icon,
-    MenuItemType,
-    Text,
-  } from '@immich/ui';
+  import { Badge, Card, CardBody, CardHeader, CardTitle, Container, Heading, HStack, Icon, Text } from '@immich/ui';
   import { mdiClockTimeTwoOutline } from '@mdi/js';
   import { onMount } from 'svelte';
   import { t } from 'svelte-i18n';
@@ -45,10 +35,15 @@
 
 <OnEvents {onQueueUpdate} />
 
-<AdminPageLayout
-  breadcrumbs={[{ title: $t('admin.queues'), href: AppRoute.ADMIN_QUEUES }, { title: item.title }]}
-  actions={[Pause, Resume, Empty, MenuItemType.Divider, RemoveFailedJobs]}
->
+<AdminPageLayout breadcrumbs={[{ title: $t('admin.queues'), href: AppRoute.ADMIN_QUEUES }, { title: item.title }]}>
+  {#snippet buttons()}
+    <HStack gap={0}>
+      <HeaderButton action={Pause} />
+      <HeaderButton action={Resume} />
+      <HeaderButton action={Empty} />
+      <HeaderButton action={RemoveFailedJobs} />
+    </HStack>
+  {/snippet}
   <div>
     <Container size="large" center>
       <div class="mb-1 mt-4 flex items-center gap-2">

web/src/routes/admin/system-settings/+page.svelte

@@ -18,6 +18,7 @@
   import ThemeSettings from '$lib/components/admin-settings/ThemeSettings.svelte';
   import TrashSettings from '$lib/components/admin-settings/TrashSettings.svelte';
   import UserSettings from '$lib/components/admin-settings/UserSettings.svelte';
+  import HeaderButton from '$lib/components/HeaderButton.svelte';
   import AdminPageLayout from '$lib/components/layouts/AdminPageLayout.svelte';
   import SettingAccordionState from '$lib/components/shared-components/settings/setting-accordion-state.svelte';
   import SettingAccordion from '$lib/components/shared-components/settings/setting-accordion.svelte';
@@ -26,7 +27,7 @@
   import { featureFlagsManager } from '$lib/managers/feature-flags-manager.svelte';
   import { systemConfigManager } from '$lib/managers/system-config-manager.svelte';
   import { getSystemConfigActions } from '$lib/services/system-config.service';
-  import { Alert, CommandPaletteContext } from '@immich/ui';
+  import { Alert, CommandPaletteContext, HStack } from '@immich/ui';
   import {
     mdiAccountOutline,
     mdiBackupRestore,
@@ -216,13 +217,24 @@
 
 <CommandPaletteContext commands={[CopyToClipboard, Upload, Download]} />
 
-<AdminPageLayout breadcrumbs={[{ title: data.meta.title }]} actions={[CopyToClipboard, Download, Upload]}>
-  <section id="setting-content" class="flex place-content-center sm:mx-4 mt-4">
+<AdminPageLayout breadcrumbs={[{ title: data.meta.title }]}>
+  {#snippet buttons()}
+    <HStack gap={1}>
+      <div class="hidden lg:block">
+        <SearchBar placeholder={$t('search_settings')} bind:name={searchQuery} showLoadingSpinner={false} />
+      </div>
+      <HeaderButton action={CopyToClipboard} />
+      <HeaderButton action={Download} />
+      <HeaderButton action={Upload} />
+    </HStack>
+  {/snippet}
+
+  <section id="setting-content" class="flex place-content-center sm:mx-4">
     <section class="w-full pb-28 sm:w-5/6 md:w-4xl">
       {#if featureFlagsManager.value.configFile}
         <Alert color="warning" class="text-dark my-4" title={$t('admin.config_set_by_file')} />
       {/if}
-      <div>
+      <div class="block lg:hidden">
         <SearchBar placeholder={$t('search_settings')} bind:name={searchQuery} showLoadingSpinner={false} />
       </div>
       <SettingAccordionState queryParam={QueryParameter.IS_OPEN}>

web/src/routes/admin/users/+page.svelte

@@ -1,11 +1,12 @@
 <script lang="ts">
+  import HeaderButton from '$lib/components/HeaderButton.svelte';
   import AdminPageLayout from '$lib/components/layouts/AdminPageLayout.svelte';
   import OnEvents from '$lib/components/OnEvents.svelte';
   import { getUserAdminsActions, handleNavigateUserAdmin } from '$lib/services/user-admin.service';
   import { locale } from '$lib/stores/preferences.store';
   import { getByteUnitString } from '$lib/utils/byte-units';
   import { searchUsersAdmin, type UserAdminResponseDto } from '@immich/sdk';
-  import { Button, CommandPaletteContext, Icon } from '@immich/ui';
+  import { Button, CommandPaletteContext, HStack, Icon } from '@immich/ui';
   import { mdiInfinity } from '@mdi/js';
   import { t } from 'svelte-i18n';
   import type { PageData } from './$types';
@@ -44,7 +45,12 @@
 
 <CommandPaletteContext commands={[Create]} />
 
-<AdminPageLayout breadcrumbs={[{ title: data.meta.title }]} actions={[Create]}>
+<AdminPageLayout breadcrumbs={[{ title: data.meta.title }]}>
+  {#snippet buttons()}
+    <HStack gap={1}>
+      <HeaderButton action={Create} />
+    </HStack>
+  {/snippet}
   <section id="setting-content" class="flex place-content-center sm:mx-4">
     <section class="w-full pb-28 lg:w-212.5">
       <table class="my-5 w-full text-start">

web/src/routes/admin/users/[id]/+page.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import { goto } from '$app/navigation';
+  import HeaderButton from '$lib/components/HeaderButton.svelte';
   import AdminPageLayout from '$lib/components/layouts/AdminPageLayout.svelte';
   import OnEvents from '$lib/components/OnEvents.svelte';
   import ServerStatisticsCard from '$lib/components/server-statistics/ServerStatisticsCard.svelte';
@@ -7,6 +8,7 @@
   import DeviceCard from '$lib/components/user-settings-page/device-card.svelte';
   import FeatureSetting from '$lib/components/users/FeatureSetting.svelte';
   import { AppRoute } from '$lib/constants';
+  import { serverConfigManager } from '$lib/managers/server-config-manager.svelte';
   import { getUserAdminActions } from '$lib/services/user-admin.service';
   import { locale } from '$lib/stores/preferences.store';
   import { createDateFormatter, findLocale } from '$lib/utils';
@@ -24,8 +26,8 @@
     Container,
     getByteUnitString,
     Heading,
+    HStack,
     Icon,
-    MenuItemType,
     Stack,
     Text,
   } from '@immich/ui';
@@ -40,14 +42,15 @@
     mdiPlayCircle,
     mdiTrashCanOutline,
   } from '@mdi/js';
+  import { DateTime } from 'luxon';
   import { t } from 'svelte-i18n';
   import type { PageData } from './$types';
 
-  type Props = {
+  interface Props {
     data: PageData;
-  };
+  }
 
-  const { data }: Props = $props();
+  let { data }: Props = $props();
 
   let user = $derived(data.user);
   const userPreferences = $derived(data.userPreferences);
@@ -91,6 +94,9 @@
       await goto(AppRoute.ADMIN_USERS);
     }
   };
+
+  const getDeleteDate = (deletedAt: string): Date =>
+    DateTime.fromISO(deletedAt).plus({ days: serverConfigManager.value.userDeleteDelay }).toJSDate();
 </script>
 
 <OnEvents
@@ -104,8 +110,19 @@
 
 <AdminPageLayout
   breadcrumbs={[{ title: $t('admin.user_management'), href: AppRoute.ADMIN_USERS }, { title: user.name }]}
-  actions={[ResetPassword, ResetPinCode, Update, Restore, MenuItemType.Divider, Delete]}
 >
+  {#snippet buttons()}
+    <HStack gap={0}>
+      <HeaderButton action={ResetPassword} />
+      <HeaderButton action={ResetPinCode} />
+      <HeaderButton action={Update} />
+      <HeaderButton
+        action={Restore}
+        title={$t('admin.user_restore_scheduled_removal', { values: { date: getDeleteDate(user.deletedAt!) } })}
+      />
+      <HeaderButton action={Delete} />
+    </HStack>
+  {/snippet}
   <div>
     <Container size="large" center>
       {#if user.deletedAt}