feat: system settings

.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

@@ -24,9 +24,6 @@ server {
     # disable buffering uploads to prevent OOM on reverse proxy server and make uploads twice as fast (no pause)
     proxy_request_buffering off;
 
-    # increase body buffer to avoid limiting upload speed
-    client_body_buffer_size 1024k;
-
     # Set headers
     proxy_set_header Host              $host;
     proxy_set_header X-Real-IP         $remote_addr;
@@ -35,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
@@ -44,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

@@ -652,7 +652,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 +718,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 +1166,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 +1288,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 +2218,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:

pnpm-lock.yaml

@@ -20,8 +20,8 @@ importers:
   .github:
     devDependencies:
       prettier:
-        specifier: ^3.7.4
-        version: 3.7.4
+        specifier: ^3.5.3
+        version: 3.7.1
 
   cli:
     dependencies:
@@ -85,7 +85,7 @@ importers:
         version: 10.1.8(eslint@9.39.1(jiti@2.6.1))
       eslint-plugin-prettier:
         specifier: ^5.1.3
-        version: 5.5.4(@types/eslint@9.6.1)(eslint-config-prettier@10.1.8(eslint@9.39.1(jiti@2.6.1)))(eslint@9.39.1(jiti@2.6.1))(prettier@3.7.4)
+        version: 5.5.4(@types/eslint@9.6.1)(eslint-config-prettier@10.1.8(eslint@9.39.1(jiti@2.6.1)))(eslint@9.39.1(jiti@2.6.1))(prettier@3.7.1)
       eslint-plugin-unicorn:
         specifier: ^62.0.0
         version: 62.0.0(eslint@9.39.1(jiti@2.6.1))
@@ -96,11 +96,11 @@ importers:
         specifier: ^5.2.0
         version: 5.5.0
       prettier:
-        specifier: ^3.7.4
-        version: 3.7.4
+        specifier: ^3.2.5
+        version: 3.7.1
       prettier-plugin-organize-imports:
         specifier: ^4.0.0
-        version: 4.3.0(prettier@3.7.4)(typescript@5.9.3)
+        version: 4.3.0(prettier@3.7.1)(typescript@5.9.3)
       typescript:
         specifier: ^5.3.3
         version: 5.9.3
@@ -184,8 +184,8 @@ importers:
         specifier: ^3.7.0
         version: 3.9.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       prettier:
-        specifier: ^3.7.4
-        version: 3.7.4
+        specifier: ^3.2.4
+        version: 3.7.1
       typescript:
         specifier: ^5.1.6
         version: 5.9.3
@@ -239,13 +239,13 @@ importers:
         version: 10.1.8(eslint@9.39.1(jiti@2.6.1))
       eslint-plugin-prettier:
         specifier: ^5.1.3
-        version: 5.5.4(@types/eslint@9.6.1)(eslint-config-prettier@10.1.8(eslint@9.39.1(jiti@2.6.1)))(eslint@9.39.1(jiti@2.6.1))(prettier@3.7.4)
+        version: 5.5.4(@types/eslint@9.6.1)(eslint-config-prettier@10.1.8(eslint@9.39.1(jiti@2.6.1)))(eslint@9.39.1(jiti@2.6.1))(prettier@3.7.1)
       eslint-plugin-unicorn:
         specifier: ^62.0.0
         version: 62.0.0(eslint@9.39.1(jiti@2.6.1))
       exiftool-vendored:
-        specifier: ^34.0.0
-        version: 34.0.0
+        specifier: ^33.0.0
+        version: 33.5.0
       globals:
         specifier: ^16.0.0
         version: 16.5.0
@@ -265,11 +265,11 @@ importers:
         specifier: ^7.0.0
         version: 7.0.0
       prettier:
-        specifier: ^3.7.4
-        version: 3.7.4
+        specifier: ^3.2.5
+        version: 3.7.1
       prettier-plugin-organize-imports:
         specifier: ^4.0.0
-        version: 4.3.0(prettier@3.7.4)(typescript@5.9.3)
+        version: 4.3.0(prettier@3.7.1)(typescript@5.9.3)
       sharp:
         specifier: ^0.34.5
         version: 0.34.5
@@ -428,8 +428,8 @@ importers:
         specifier: 4.3.3
         version: 4.3.3
       exiftool-vendored:
-        specifier: ^34.0.0
-        version: 34.0.0
+        specifier: ^33.0.0
+        version: 33.5.0
       express:
         specifier: ^5.1.0
         version: 5.2.0
@@ -655,7 +655,7 @@ importers:
         version: 10.1.8(eslint@9.39.1(jiti@2.6.1))
       eslint-plugin-prettier:
         specifier: ^5.1.3
-        version: 5.5.4(@types/eslint@9.6.1)(eslint-config-prettier@10.1.8(eslint@9.39.1(jiti@2.6.1)))(eslint@9.39.1(jiti@2.6.1))(prettier@3.7.4)
+        version: 5.5.4(@types/eslint@9.6.1)(eslint-config-prettier@10.1.8(eslint@9.39.1(jiti@2.6.1)))(eslint@9.39.1(jiti@2.6.1))(prettier@3.7.1)
       eslint-plugin-unicorn:
         specifier: ^62.0.0
         version: 62.0.0(eslint@9.39.1(jiti@2.6.1))
@@ -672,11 +672,11 @@ importers:
         specifier: ^7.0.0
         version: 7.0.0
       prettier:
-        specifier: ^3.7.4
-        version: 3.7.4
+        specifier: ^3.0.2
+        version: 3.7.1
       prettier-plugin-organize-imports:
         specifier: ^4.0.0
-        version: 4.3.0(prettier@3.7.4)(typescript@5.9.3)
+        version: 4.3.0(prettier@3.7.1)(typescript@5.9.3)
       sql-formatter:
         specifier: ^15.0.0
         version: 15.6.10
@@ -717,8 +717,8 @@ importers:
         specifier: file:../open-api/typescript-sdk
         version: link:../open-api/typescript-sdk
       '@immich/ui':
-        specifier: ^0.50.1
-        version: 0.50.1(@sveltejs/kit@2.49.0(@opentelemetry/api@1.9.0)(@sveltejs/vite-plugin-svelte@6.2.1(svelte@5.43.3)(vite@7.2.4(@types/node@24.10.1)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.0)(yaml@2.8.2)))(svelte@5.43.3)(vite@7.2.4(@types/node@24.10.1)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.0)(yaml@2.8.2)))(svelte@5.43.3)
+        specifier: ^0.50.0
+        version: 0.50.0(@sveltejs/kit@2.49.0(@opentelemetry/api@1.9.0)(@sveltejs/vite-plugin-svelte@6.2.1(svelte@5.45.2)(vite@7.2.4(@types/node@24.10.1)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.0)(yaml@2.8.2)))(svelte@5.45.2)(vite@7.2.4(@types/node@24.10.1)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.0)(yaml@2.8.2)))(svelte@5.45.2)
       '@mapbox/mapbox-gl-rtl-text':
         specifier: 0.2.3
         version: 0.2.3(mapbox-gl@1.13.3)
@@ -751,7 +751,7 @@ importers:
         version: 0.41.4
       '@zoom-image/svelte':
         specifier: ^0.3.0
-        version: 0.3.8(svelte@5.43.3)
+        version: 0.3.8(svelte@5.45.2)
       async-mutex:
         specifier: ^0.5.0
         version: 0.5.0
@@ -805,13 +805,13 @@ importers:
         version: 5.2.2
       svelte-i18n:
         specifier: ^4.0.1
-        version: 4.0.1(svelte@5.43.3)
+        version: 4.0.1(svelte@5.45.2)
       svelte-maplibre:
         specifier: ^1.2.5
-        version: 1.2.5(svelte@5.43.3)
+        version: 1.2.5(svelte@5.45.2)
       svelte-persisted-store:
         specifier: ^0.12.0
-        version: 0.12.0(svelte@5.43.3)
+        version: 0.12.0(svelte@5.45.2)
       tabbable:
         specifier: ^6.2.0
         version: 6.3.0
@@ -836,16 +836,16 @@ importers:
         version: 3.1.2
       '@sveltejs/adapter-static':
         specifier: ^3.0.8
-        version: 3.0.10(@sveltejs/kit@2.49.0(@opentelemetry/api@1.9.0)(@sveltejs/vite-plugin-svelte@6.2.1(svelte@5.43.3)(vite@7.2.4(@types/node@24.10.1)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.0)(yaml@2.8.2)))(svelte@5.43.3)(vite@7.2.4(@types/node@24.10.1)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.0)(yaml@2.8.2)))
+        version: 3.0.10(@sveltejs/kit@2.49.0(@opentelemetry/api@1.9.0)(@sveltejs/vite-plugin-svelte@6.2.1(svelte@5.45.2)(vite@7.2.4(@types/node@24.10.1)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.0)(yaml@2.8.2)))(svelte@5.45.2)(vite@7.2.4(@types/node@24.10.1)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.0)(yaml@2.8.2)))
       '@sveltejs/enhanced-img':
         specifier: ^0.9.0
-        version: 0.9.2(@sveltejs/vite-plugin-svelte@6.2.1(svelte@5.43.3)(vite@7.2.4(@types/node@24.10.1)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.0)(yaml@2.8.2)))(rollup@4.53.3)(svelte@5.43.3)(vite@7.2.4(@types/node@24.10.1)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.0)(yaml@2.8.2))
+        version: 0.9.2(@sveltejs/vite-plugin-svelte@6.2.1(svelte@5.45.2)(vite@7.2.4(@types/node@24.10.1)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.0)(yaml@2.8.2)))(rollup@4.53.3)(svelte@5.45.2)(vite@7.2.4(@types/node@24.10.1)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.0)(yaml@2.8.2))
       '@sveltejs/kit':
         specifier: ^2.27.1
-        version: 2.49.0(@opentelemetry/api@1.9.0)(@sveltejs/vite-plugin-svelte@6.2.1(svelte@5.43.3)(vite@7.2.4(@types/node@24.10.1)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.0)(yaml@2.8.2)))(svelte@5.43.3)(vite@7.2.4(@types/node@24.10.1)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.0)(yaml@2.8.2))
+        version: 2.49.0(@opentelemetry/api@1.9.0)(@sveltejs/vite-plugin-svelte@6.2.1(svelte@5.45.2)(vite@7.2.4(@types/node@24.10.1)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.0)(yaml@2.8.2)))(svelte@5.45.2)(vite@7.2.4(@types/node@24.10.1)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.0)(yaml@2.8.2))
       '@sveltejs/vite-plugin-svelte':
         specifier: 6.2.1
-        version: 6.2.1(svelte@5.43.3)(vite@7.2.4(@types/node@24.10.1)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.0)(yaml@2.8.2))
+        version: 6.2.1(svelte@5.45.2)(vite@7.2.4(@types/node@24.10.1)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.0)(yaml@2.8.2))
       '@tailwindcss/vite':
         specifier: ^4.1.7
         version: 4.1.17(vite@7.2.4(@types/node@24.10.1)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.0)(yaml@2.8.2))
@@ -854,7 +854,7 @@ importers:
         version: 6.9.1
       '@testing-library/svelte':
         specifier: ^5.2.8
-        version: 5.2.9(svelte@5.43.3)(vite@7.2.4(@types/node@24.10.1)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.0)(yaml@2.8.2))(vitest@3.2.4(@types/debug@4.1.12)(@types/node@24.10.1)(happy-dom@20.0.10)(jiti@2.6.1)(jsdom@26.1.0(canvas@2.11.2))(lightningcss@1.30.2)(terser@5.44.0)(yaml@2.8.2))
+        version: 5.2.9(svelte@5.45.2)(vite@7.2.4(@types/node@24.10.1)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.0)(yaml@2.8.2))(vitest@3.2.4(@types/debug@4.1.12)(@types/node@24.10.1)(happy-dom@20.0.10)(jiti@2.6.1)(jsdom@26.1.0(canvas@2.11.2))(lightningcss@1.30.2)(terser@5.44.0)(yaml@2.8.2))
       '@testing-library/user-event':
         specifier: ^14.5.2
         version: 14.6.1(@testing-library/dom@10.4.1)
@@ -893,7 +893,7 @@ importers:
         version: 6.0.2(eslint@9.39.1(jiti@2.6.1))
       eslint-plugin-svelte:
         specifier: ^3.12.4
-        version: 3.13.0(eslint@9.39.1(jiti@2.6.1))(svelte@5.43.3)
+        version: 3.13.0(eslint@9.39.1(jiti@2.6.1))(svelte@5.45.2)
       eslint-plugin-unicorn:
         specifier: ^62.0.0
         version: 62.0.0(eslint@9.39.1(jiti@2.6.1))
@@ -904,29 +904,29 @@ importers:
         specifier: ^16.0.0
         version: 16.5.0
       prettier:
-        specifier: ^3.7.4
-        version: 3.7.4
+        specifier: ^3.4.2
+        version: 3.7.1
       prettier-plugin-organize-imports:
         specifier: ^4.0.0
-        version: 4.3.0(prettier@3.7.4)(typescript@5.9.3)
+        version: 4.3.0(prettier@3.7.1)(typescript@5.9.3)
       prettier-plugin-sort-json:
         specifier: ^4.1.1
-        version: 4.1.1(prettier@3.7.4)
+        version: 4.1.1(prettier@3.7.1)
       prettier-plugin-svelte:
         specifier: ^3.3.3
-        version: 3.4.0(prettier@3.7.4)(svelte@5.43.3)
+        version: 3.4.0(prettier@3.7.1)(svelte@5.45.2)
       rollup-plugin-visualizer:
         specifier: ^6.0.0
         version: 6.0.5(rollup@4.53.3)
       svelte:
-        specifier: 5.43.3
-        version: 5.43.3
+        specifier: 5.45.2
+        version: 5.45.2
       svelte-check:
         specifier: ^4.1.5
-        version: 4.3.4(picomatch@4.0.3)(svelte@5.43.3)(typescript@5.9.3)
+        version: 4.3.4(picomatch@4.0.3)(svelte@5.45.2)(typescript@5.9.3)
       svelte-eslint-parser:
         specifier: ^1.3.3
-        version: 1.4.0(svelte@5.43.3)
+        version: 1.4.0(svelte@5.45.2)
       tailwindcss:
         specifier: ^4.1.7
         version: 4.1.17
@@ -2989,8 +2989,8 @@ packages:
     peerDependencies:
       svelte: ^5.0.0
 
-  '@immich/ui@0.50.1':
-    resolution: {integrity: sha512-fNlQGh75ZFa/UZAgJaYk9/ItHOXHNNzN4CunjCmE7WocVVkUZbUxopN9Ku3F5GULSqD/zJ5gNO6PQAZ1ZoSaaQ==}
+  '@immich/ui@0.50.0':
+    resolution: {integrity: sha512-7AW9SRZTAgal8xlkUAxm7o4+pSG7HcKb+Bh9JpWLaDRRdGyPCZMmsNa9CjZglOQ7wkAD07tQ9u4+zezBLe0dlQ==}
     peerDependencies:
       svelte: ^5.0.0
 
@@ -3236,7 +3236,6 @@ packages:
   '@koa/router@14.0.0':
     resolution: {integrity: sha512-LBSu5K0qAaaQcXX/0WIB9PGDevyCxxpnc1uq13vV/CgObaVxuis5hKl3Eboq/8gcb6ebnkAStW9NB/Em2eYyFA==}
     engines: {node: '>= 20'}
-    deprecated: Please upgrade to v15 or higher. All reported bugs in this version are fixed in newer releases, dependencies have been updated, and security has been improved.
 
   '@koddsson/eslint-plugin-tscompat@0.2.0':
     resolution: {integrity: sha512-Oqd4kWSX0LiO9wWHjcmDfXZNC7TotFV/tLRhwCFU3XUeb//KYvJ75c9OmeSJ+vBv5lkCeB+xYsqyNrBc5j18XA==}
@@ -5504,8 +5503,8 @@ packages:
     resolution: {integrity: sha512-a28v2eWrrRWPpJSzxc+mKwm0ZtVx/G8SepdQZDArnXYU/XS+IF6mp8aB/4E+hH1tyGCoDo3KlUCdlSxGDsRkAw==}
     hasBin: true
 
-  batch-cluster@16.0.0:
-    resolution: {integrity: sha512-+T7Ho09ikx/kP4P8M+GEnpuePzRQa4gTUhtPIu6ApFC8+0GY0sri1y1PuB+yfXlQWl5DkHC/e58z3U6g0qCz/A==}
+  batch-cluster@15.0.1:
+    resolution: {integrity: sha512-eUmh0ld1AUPKTEmdzwGF9QTSexXAyt9rA1F5zDfW1wUi3okA3Tal4NLdCeFI6aiKpBenQhR6NmK9bW9tBHTGPQ==}
     engines: {node: '>=20'}
 
   batch@0.6.1:
@@ -6849,17 +6848,17 @@ packages:
     resolution: {integrity: sha512-8uSpZZocAZRBAPIEINJj3Lo9HyGitllczc27Eh5YYojjMFMn8yHMDMaUHE2Jqfq05D/wucwI4JGURyXt1vchyg==}
     engines: {node: '>=10'}
 
-  exiftool-vendored.exe@13.43.0:
-    resolution: {integrity: sha512-EENHNz86tYY5yHGPtGB2mto3FIGstQvEhrcU34f7fm4RMxBKNfTWYOGkhU1jzvjOi+V4575LQX/FUES1TwgUbQ==}
+  exiftool-vendored.exe@13.42.0:
+    resolution: {integrity: sha512-6AFybe5IakduMWleuQBfep9OWGSVZSedt2uKL+LzufRsATp+beOF7tZyKtMztjb6VRH1GF/4F9EvBVam6zm70w==}
     os: [win32]
 
-  exiftool-vendored.pl@13.43.0:
-    resolution: {integrity: sha512-0ApWaQ/pxaliPK7HzTxVA0sg/wZ8vl7UtFVhCyWhGQg01WfZkFrKwKmELB0Bnn01WTfgIuMadba8ccmFvpmJag==}
+  exiftool-vendored.pl@13.42.0:
+    resolution: {integrity: sha512-EF5IdxQNIJIvZjHf4bG4jnwAHVVSLkYZToo2q+Mm89kSuppKfRvHz/lngIxN0JALE8rFdC4zt6NWY/PKqRdCcg==}
     os: ['!win32']
     hasBin: true
 
-  exiftool-vendored@34.0.0:
-    resolution: {integrity: sha512-rhIe4XGE7kh76nwytwHtq6qK/pc1mpOBHRV++gudFeG2PfAp3XIVQbFWCLK3S4l9I4AWYOe4mxk8mW8l1oHRTw==}
+  exiftool-vendored@33.5.0:
+    resolution: {integrity: sha512-7cCh6izwdmC5ZaCxpHFehnExIr2Yp7CJuxHg4WFiGcm81yyxXLtvSE+85ep9VsNwhlOtSpk+XxiqrlddjY5lAw==}
     engines: {node: '>=20.0.0'}
 
   expect-type@1.2.1:
@@ -9766,8 +9765,8 @@ packages:
       prettier: ^3.0.0
       svelte: ^3.2.0 || ^4.0.0-next.0 || ^5.0.0-next.0
 
-  prettier@3.7.4:
-    resolution: {integrity: sha512-v6UNi1+3hSlVvv8fSaoUbggEM5VErKmmpGA7Pl3HF8V6uKY7rvClBOJlH6yNwQtfTueNkGVpOv/mtWL9L4bgRA==}
+  prettier@3.7.1:
+    resolution: {integrity: sha512-RWKXE4qB3u5Z6yz7omJkjWwmTfLdcbv44jUVHC5NpfXwFGzvpQM798FGv/6WNK879tc+Cn0AAyherCl1KjbyZQ==}
     engines: {node: '>=14'}
     hasBin: true
 
@@ -10781,8 +10780,8 @@ packages:
     peerDependencies:
       svelte: ^5.30.2
 
-  svelte@5.43.3:
-    resolution: {integrity: sha512-kjkAjCk41mJfvJZG56XcJNOdJSke94JxtcX8zFzzz2vrt47E0LnoBzU6azIZ1aBxJgUep8qegAkguSf1GjxLXQ==}
+  svelte@5.45.2:
+    resolution: {integrity: sha512-yyXdW2u3H0H/zxxWoGwJoQlRgaSJLp+Vhktv12iRw2WRDlKqUPT54Fi0K/PkXqrdkcQ98aBazpy0AH4BCBVfoA==}
     engines: {node: '>=18'}
 
   svg-parser@2.0.4:
@@ -14518,7 +14517,7 @@ snapshots:
   '@fig/complete-commander@3.2.0(commander@11.1.0)':
     dependencies:
       commander: 11.1.0
-      prettier: 3.7.4
+      prettier: 3.7.1
 
   '@floating-ui/core@1.7.3':
     dependencies:
@@ -14697,19 +14696,19 @@ snapshots:
 
   '@immich/justified-layout-wasm@0.4.3': {}
 
-  '@immich/svelte-markdown-preprocess@0.1.0(svelte@5.43.3)':
+  '@immich/svelte-markdown-preprocess@0.1.0(svelte@5.45.2)':
     dependencies:
-      svelte: 5.43.3
+      svelte: 5.45.2
 
-  '@immich/ui@0.50.1(@sveltejs/kit@2.49.0(@opentelemetry/api@1.9.0)(@sveltejs/vite-plugin-svelte@6.2.1(svelte@5.43.3)(vite@7.2.4(@types/node@24.10.1)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.0)(yaml@2.8.2)))(svelte@5.43.3)(vite@7.2.4(@types/node@24.10.1)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.0)(yaml@2.8.2)))(svelte@5.43.3)':
+  '@immich/ui@0.50.0(@sveltejs/kit@2.49.0(@opentelemetry/api@1.9.0)(@sveltejs/vite-plugin-svelte@6.2.1(svelte@5.45.2)(vite@7.2.4(@types/node@24.10.1)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.0)(yaml@2.8.2)))(svelte@5.45.2)(vite@7.2.4(@types/node@24.10.1)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.0)(yaml@2.8.2)))(svelte@5.45.2)':
     dependencies:
-      '@immich/svelte-markdown-preprocess': 0.1.0(svelte@5.43.3)
+      '@immich/svelte-markdown-preprocess': 0.1.0(svelte@5.45.2)
       '@internationalized/date': 3.10.0
       '@mdi/js': 7.4.47
-      bits-ui: 2.14.4(@internationalized/date@3.10.0)(@sveltejs/kit@2.49.0(@opentelemetry/api@1.9.0)(@sveltejs/vite-plugin-svelte@6.2.1(svelte@5.43.3)(vite@7.2.4(@types/node@24.10.1)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.0)(yaml@2.8.2)))(svelte@5.43.3)(vite@7.2.4(@types/node@24.10.1)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.0)(yaml@2.8.2)))(svelte@5.43.3)
+      bits-ui: 2.14.4(@internationalized/date@3.10.0)(@sveltejs/kit@2.49.0(@opentelemetry/api@1.9.0)(@sveltejs/vite-plugin-svelte@6.2.1(svelte@5.45.2)(vite@7.2.4(@types/node@24.10.1)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.0)(yaml@2.8.2)))(svelte@5.45.2)(vite@7.2.4(@types/node@24.10.1)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.0)(yaml@2.8.2)))(svelte@5.45.2)
       luxon: 3.7.2
       simple-icons: 15.22.0
-      svelte: 5.43.3
+      svelte: 5.45.2
       svelte-highlight: 7.9.0
       tailwind-merge: 3.4.0
       tailwind-variants: 3.2.2(tailwind-merge@3.4.0)(tailwindcss@4.1.17)
@@ -15789,7 +15788,7 @@ snapshots:
   '@react-email/render@1.4.0(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
     dependencies:
       html-to-text: 9.0.5
-      prettier: 3.7.4
+      prettier: 3.7.1
       react: 19.2.0
       react-dom: 19.2.0(react@19.2.0)
       react-promise-suspense: 0.3.4
@@ -16212,17 +16211,17 @@ snapshots:
     dependencies:
       acorn: 8.15.0
 
-  '@sveltejs/adapter-static@3.0.10(@sveltejs/kit@2.49.0(@opentelemetry/api@1.9.0)(@sveltejs/vite-plugin-svelte@6.2.1(svelte@5.43.3)(vite@7.2.4(@types/node@24.10.1)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.0)(yaml@2.8.2)))(svelte@5.43.3)(vite@7.2.4(@types/node@24.10.1)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.0)(yaml@2.8.2)))':
+  '@sveltejs/adapter-static@3.0.10(@sveltejs/kit@2.49.0(@opentelemetry/api@1.9.0)(@sveltejs/vite-plugin-svelte@6.2.1(svelte@5.45.2)(vite@7.2.4(@types/node@24.10.1)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.0)(yaml@2.8.2)))(svelte@5.45.2)(vite@7.2.4(@types/node@24.10.1)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.0)(yaml@2.8.2)))':
     dependencies:
-      '@sveltejs/kit': 2.49.0(@opentelemetry/api@1.9.0)(@sveltejs/vite-plugin-svelte@6.2.1(svelte@5.43.3)(vite@7.2.4(@types/node@24.10.1)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.0)(yaml@2.8.2)))(svelte@5.43.3)(vite@7.2.4(@types/node@24.10.1)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.0)(yaml@2.8.2))
+      '@sveltejs/kit': 2.49.0(@opentelemetry/api@1.9.0)(@sveltejs/vite-plugin-svelte@6.2.1(svelte@5.45.2)(vite@7.2.4(@types/node@24.10.1)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.0)(yaml@2.8.2)))(svelte@5.45.2)(vite@7.2.4(@types/node@24.10.1)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.0)(yaml@2.8.2))
 
-  '@sveltejs/enhanced-img@0.9.2(@sveltejs/vite-plugin-svelte@6.2.1(svelte@5.43.3)(vite@7.2.4(@types/node@24.10.1)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.0)(yaml@2.8.2)))(rollup@4.53.3)(svelte@5.43.3)(vite@7.2.4(@types/node@24.10.1)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.0)(yaml@2.8.2))':
+  '@sveltejs/enhanced-img@0.9.2(@sveltejs/vite-plugin-svelte@6.2.1(svelte@5.45.2)(vite@7.2.4(@types/node@24.10.1)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.0)(yaml@2.8.2)))(rollup@4.53.3)(svelte@5.45.2)(vite@7.2.4(@types/node@24.10.1)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.0)(yaml@2.8.2))':
     dependencies:
-      '@sveltejs/vite-plugin-svelte': 6.2.1(svelte@5.43.3)(vite@7.2.4(@types/node@24.10.1)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.0)(yaml@2.8.2))
+      '@sveltejs/vite-plugin-svelte': 6.2.1(svelte@5.45.2)(vite@7.2.4(@types/node@24.10.1)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.0)(yaml@2.8.2))
       magic-string: 0.30.21
       sharp: 0.34.5
-      svelte: 5.43.3
-      svelte-parse-markup: 0.1.5(svelte@5.43.3)
+      svelte: 5.45.2
+      svelte-parse-markup: 0.1.5(svelte@5.45.2)
       vite: 7.2.4(@types/node@24.10.1)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.0)(yaml@2.8.2)
       vite-imagetools: 9.0.2(rollup@4.53.3)
       zimmerframe: 1.1.4
@@ -16230,11 +16229,11 @@ snapshots:
       - rollup
       - supports-color
 
-  '@sveltejs/kit@2.49.0(@opentelemetry/api@1.9.0)(@sveltejs/vite-plugin-svelte@6.2.1(svelte@5.43.3)(vite@7.2.4(@types/node@24.10.1)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.0)(yaml@2.8.2)))(svelte@5.43.3)(vite@7.2.4(@types/node@24.10.1)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.0)(yaml@2.8.2))':
+  '@sveltejs/kit@2.49.0(@opentelemetry/api@1.9.0)(@sveltejs/vite-plugin-svelte@6.2.1(svelte@5.45.2)(vite@7.2.4(@types/node@24.10.1)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.0)(yaml@2.8.2)))(svelte@5.45.2)(vite@7.2.4(@types/node@24.10.1)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.0)(yaml@2.8.2))':
     dependencies:
       '@standard-schema/spec': 1.0.0
       '@sveltejs/acorn-typescript': 1.0.8(acorn@8.15.0)
-      '@sveltejs/vite-plugin-svelte': 6.2.1(svelte@5.43.3)(vite@7.2.4(@types/node@24.10.1)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.0)(yaml@2.8.2))
+      '@sveltejs/vite-plugin-svelte': 6.2.1(svelte@5.45.2)(vite@7.2.4(@types/node@24.10.1)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.0)(yaml@2.8.2))
       '@types/cookie': 0.6.0
       acorn: 8.15.0
       cookie: 0.6.0
@@ -16246,27 +16245,27 @@ snapshots:
       sade: 1.8.1
       set-cookie-parser: 2.7.2
       sirv: 3.0.2
-      svelte: 5.43.3
+      svelte: 5.45.2
       vite: 7.2.4(@types/node@24.10.1)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.0)(yaml@2.8.2)
     optionalDependencies:
       '@opentelemetry/api': 1.9.0
 
-  '@sveltejs/vite-plugin-svelte-inspector@5.0.0(@sveltejs/vite-plugin-svelte@6.2.1(svelte@5.43.3)(vite@7.2.4(@types/node@24.10.1)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.0)(yaml@2.8.2)))(svelte@5.43.3)(vite@7.2.4(@types/node@24.10.1)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.0)(yaml@2.8.2))':
+  '@sveltejs/vite-plugin-svelte-inspector@5.0.0(@sveltejs/vite-plugin-svelte@6.2.1(svelte@5.45.2)(vite@7.2.4(@types/node@24.10.1)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.0)(yaml@2.8.2)))(svelte@5.45.2)(vite@7.2.4(@types/node@24.10.1)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.0)(yaml@2.8.2))':
     dependencies:
-      '@sveltejs/vite-plugin-svelte': 6.2.1(svelte@5.43.3)(vite@7.2.4(@types/node@24.10.1)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.0)(yaml@2.8.2))
+      '@sveltejs/vite-plugin-svelte': 6.2.1(svelte@5.45.2)(vite@7.2.4(@types/node@24.10.1)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.0)(yaml@2.8.2))
       debug: 4.4.3
-      svelte: 5.43.3
+      svelte: 5.45.2
       vite: 7.2.4(@types/node@24.10.1)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.0)(yaml@2.8.2)
     transitivePeerDependencies:
       - supports-color
 
-  '@sveltejs/vite-plugin-svelte@6.2.1(svelte@5.43.3)(vite@7.2.4(@types/node@24.10.1)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.0)(yaml@2.8.2))':
+  '@sveltejs/vite-plugin-svelte@6.2.1(svelte@5.45.2)(vite@7.2.4(@types/node@24.10.1)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.0)(yaml@2.8.2))':
     dependencies:
-      '@sveltejs/vite-plugin-svelte-inspector': 5.0.0(@sveltejs/vite-plugin-svelte@6.2.1(svelte@5.43.3)(vite@7.2.4(@types/node@24.10.1)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.0)(yaml@2.8.2)))(svelte@5.43.3)(vite@7.2.4(@types/node@24.10.1)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.0)(yaml@2.8.2))
+      '@sveltejs/vite-plugin-svelte-inspector': 5.0.0(@sveltejs/vite-plugin-svelte@6.2.1(svelte@5.45.2)(vite@7.2.4(@types/node@24.10.1)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.0)(yaml@2.8.2)))(svelte@5.45.2)(vite@7.2.4(@types/node@24.10.1)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.0)(yaml@2.8.2))
       debug: 4.4.3
       deepmerge: 4.3.1
       magic-string: 0.30.21
-      svelte: 5.43.3
+      svelte: 5.45.2
       vite: 7.2.4(@types/node@24.10.1)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.0)(yaml@2.8.2)
       vitefu: 1.1.1(vite@7.2.4(@types/node@24.10.1)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.0)(yaml@2.8.2))
     transitivePeerDependencies:
@@ -16514,10 +16513,10 @@ snapshots:
       picocolors: 1.1.1
       redent: 3.0.0
 
-  '@testing-library/svelte@5.2.9(svelte@5.43.3)(vite@7.2.4(@types/node@24.10.1)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.0)(yaml@2.8.2))(vitest@3.2.4(@types/debug@4.1.12)(@types/node@24.10.1)(happy-dom@20.0.10)(jiti@2.6.1)(jsdom@26.1.0(canvas@2.11.2))(lightningcss@1.30.2)(terser@5.44.0)(yaml@2.8.2))':
+  '@testing-library/svelte@5.2.9(svelte@5.45.2)(vite@7.2.4(@types/node@24.10.1)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.0)(yaml@2.8.2))(vitest@3.2.4(@types/debug@4.1.12)(@types/node@24.10.1)(happy-dom@20.0.10)(jiti@2.6.1)(jsdom@26.1.0(canvas@2.11.2))(lightningcss@1.30.2)(terser@5.44.0)(yaml@2.8.2))':
     dependencies:
       '@testing-library/dom': 10.4.1
-      svelte: 5.43.3
+      svelte: 5.45.2
     optionalDependencies:
       vite: 7.2.4(@types/node@24.10.1)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.0)(yaml@2.8.2)
       vitest: 3.2.4(@types/debug@4.1.12)(@types/node@24.10.1)(happy-dom@20.0.10)(jiti@2.6.1)(jsdom@26.1.0(canvas@2.11.2))(lightningcss@1.30.2)(terser@5.44.0)(yaml@2.8.2)
@@ -17237,10 +17236,10 @@ snapshots:
     dependencies:
       '@namnode/store': 0.1.0
 
-  '@zoom-image/svelte@0.3.8(svelte@5.43.3)':
+  '@zoom-image/svelte@0.3.8(svelte@5.45.2)':
     dependencies:
       '@zoom-image/core': 0.41.4
-      svelte: 5.43.3
+      svelte: 5.45.2
 
   abab@2.0.6:
     optional: true
@@ -17581,7 +17580,7 @@ snapshots:
 
   baseline-browser-mapping@2.8.31: {}
 
-  batch-cluster@16.0.0: {}
+  batch-cluster@15.0.1: {}
 
   batch@0.6.1: {}
 
@@ -17603,15 +17602,15 @@ snapshots:
 
   binary-extensions@2.3.0: {}
 
-  bits-ui@2.14.4(@internationalized/date@3.10.0)(@sveltejs/kit@2.49.0(@opentelemetry/api@1.9.0)(@sveltejs/vite-plugin-svelte@6.2.1(svelte@5.43.3)(vite@7.2.4(@types/node@24.10.1)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.0)(yaml@2.8.2)))(svelte@5.43.3)(vite@7.2.4(@types/node@24.10.1)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.0)(yaml@2.8.2)))(svelte@5.43.3):
+  bits-ui@2.14.4(@internationalized/date@3.10.0)(@sveltejs/kit@2.49.0(@opentelemetry/api@1.9.0)(@sveltejs/vite-plugin-svelte@6.2.1(svelte@5.45.2)(vite@7.2.4(@types/node@24.10.1)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.0)(yaml@2.8.2)))(svelte@5.45.2)(vite@7.2.4(@types/node@24.10.1)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.0)(yaml@2.8.2)))(svelte@5.45.2):
     dependencies:
       '@floating-ui/core': 1.7.3
       '@floating-ui/dom': 1.7.4
       '@internationalized/date': 3.10.0
       esm-env: 1.2.2
-      runed: 0.35.1(@sveltejs/kit@2.49.0(@opentelemetry/api@1.9.0)(@sveltejs/vite-plugin-svelte@6.2.1(svelte@5.43.3)(vite@7.2.4(@types/node@24.10.1)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.0)(yaml@2.8.2)))(svelte@5.43.3)(vite@7.2.4(@types/node@24.10.1)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.0)(yaml@2.8.2)))(svelte@5.43.3)
-      svelte: 5.43.3
-      svelte-toolbelt: 0.10.6(@sveltejs/kit@2.49.0(@opentelemetry/api@1.9.0)(@sveltejs/vite-plugin-svelte@6.2.1(svelte@5.43.3)(vite@7.2.4(@types/node@24.10.1)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.0)(yaml@2.8.2)))(svelte@5.43.3)(vite@7.2.4(@types/node@24.10.1)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.0)(yaml@2.8.2)))(svelte@5.43.3)
+      runed: 0.35.1(@sveltejs/kit@2.49.0(@opentelemetry/api@1.9.0)(@sveltejs/vite-plugin-svelte@6.2.1(svelte@5.45.2)(vite@7.2.4(@types/node@24.10.1)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.0)(yaml@2.8.2)))(svelte@5.45.2)(vite@7.2.4(@types/node@24.10.1)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.0)(yaml@2.8.2)))(svelte@5.45.2)
+      svelte: 5.45.2
+      svelte-toolbelt: 0.10.6(@sveltejs/kit@2.49.0(@opentelemetry/api@1.9.0)(@sveltejs/vite-plugin-svelte@6.2.1(svelte@5.45.2)(vite@7.2.4(@types/node@24.10.1)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.0)(yaml@2.8.2)))(svelte@5.45.2)(vite@7.2.4(@types/node@24.10.1)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.0)(yaml@2.8.2)))(svelte@5.45.2)
       tabbable: 6.3.0
     transitivePeerDependencies:
       - '@sveltejs/kit'
@@ -18908,17 +18907,17 @@ snapshots:
       lodash.memoize: 4.1.2
       semver: 7.7.3
 
-  eslint-plugin-prettier@5.5.4(@types/eslint@9.6.1)(eslint-config-prettier@10.1.8(eslint@9.39.1(jiti@2.6.1)))(eslint@9.39.1(jiti@2.6.1))(prettier@3.7.4):
+  eslint-plugin-prettier@5.5.4(@types/eslint@9.6.1)(eslint-config-prettier@10.1.8(eslint@9.39.1(jiti@2.6.1)))(eslint@9.39.1(jiti@2.6.1))(prettier@3.7.1):
     dependencies:
       eslint: 9.39.1(jiti@2.6.1)
-      prettier: 3.7.4
+      prettier: 3.7.1
       prettier-linter-helpers: 1.0.0
       synckit: 0.11.11
     optionalDependencies:
       '@types/eslint': 9.6.1
       eslint-config-prettier: 10.1.8(eslint@9.39.1(jiti@2.6.1))
 
-  eslint-plugin-svelte@3.13.0(eslint@9.39.1(jiti@2.6.1))(svelte@5.43.3):
+  eslint-plugin-svelte@3.13.0(eslint@9.39.1(jiti@2.6.1))(svelte@5.45.2):
     dependencies:
       '@eslint-community/eslint-utils': 4.9.0(eslint@9.39.1(jiti@2.6.1))
       '@jridgewell/sourcemap-codec': 1.5.5
@@ -18930,9 +18929,9 @@ snapshots:
       postcss-load-config: 3.1.4(postcss@8.5.6)
       postcss-safe-parser: 7.0.1(postcss@8.5.6)
       semver: 7.7.3
-      svelte-eslint-parser: 1.4.0(svelte@5.43.3)
+      svelte-eslint-parser: 1.4.0(svelte@5.45.2)
     optionalDependencies:
-      svelte: 5.43.3
+      svelte: 5.45.2
     transitivePeerDependencies:
       - ts-node
 
@@ -19129,21 +19128,21 @@ snapshots:
       signal-exit: 3.0.7
       strip-final-newline: 2.0.0
 
-  exiftool-vendored.exe@13.43.0:
+  exiftool-vendored.exe@13.42.0:
     optional: true
 
-  exiftool-vendored.pl@13.43.0: {}
+  exiftool-vendored.pl@13.42.0: {}
 
-  exiftool-vendored@34.0.0:
+  exiftool-vendored@33.5.0:
     dependencies:
       '@photostructure/tz-lookup': 11.3.0
       '@types/luxon': 3.7.1
-      batch-cluster: 16.0.0
-      exiftool-vendored.pl: 13.43.0
+      batch-cluster: 15.0.1
+      exiftool-vendored.pl: 13.42.0
       he: 1.2.0
       luxon: 3.7.2
     optionalDependencies:
-      exiftool-vendored.exe: 13.43.0
+      exiftool-vendored.exe: 13.42.0
 
   expect-type@1.2.1: {}
 
@@ -22637,21 +22636,21 @@ snapshots:
     dependencies:
       fast-diff: 1.3.0
 
-  prettier-plugin-organize-imports@4.3.0(prettier@3.7.4)(typescript@5.9.3):
+  prettier-plugin-organize-imports@4.3.0(prettier@3.7.1)(typescript@5.9.3):
     dependencies:
-      prettier: 3.7.4
+      prettier: 3.7.1
       typescript: 5.9.3
 
-  prettier-plugin-sort-json@4.1.1(prettier@3.7.4):
+  prettier-plugin-sort-json@4.1.1(prettier@3.7.1):
     dependencies:
-      prettier: 3.7.4
+      prettier: 3.7.1
 
-  prettier-plugin-svelte@3.4.0(prettier@3.7.4)(svelte@5.43.3):
+  prettier-plugin-svelte@3.4.0(prettier@3.7.1)(svelte@5.45.2):
     dependencies:
-      prettier: 3.7.4
-      svelte: 5.43.3
+      prettier: 3.7.1
+      svelte: 5.45.2
 
-  prettier@3.7.4: {}
+  prettier@3.7.1: {}
 
   pretty-error@4.0.0:
     dependencies:
@@ -23251,14 +23250,14 @@ snapshots:
     dependencies:
       queue-microtask: 1.2.3
 
-  runed@0.35.1(@sveltejs/kit@2.49.0(@opentelemetry/api@1.9.0)(@sveltejs/vite-plugin-svelte@6.2.1(svelte@5.43.3)(vite@7.2.4(@types/node@24.10.1)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.0)(yaml@2.8.2)))(svelte@5.43.3)(vite@7.2.4(@types/node@24.10.1)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.0)(yaml@2.8.2)))(svelte@5.43.3):
+  runed@0.35.1(@sveltejs/kit@2.49.0(@opentelemetry/api@1.9.0)(@sveltejs/vite-plugin-svelte@6.2.1(svelte@5.45.2)(vite@7.2.4(@types/node@24.10.1)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.0)(yaml@2.8.2)))(svelte@5.45.2)(vite@7.2.4(@types/node@24.10.1)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.0)(yaml@2.8.2)))(svelte@5.45.2):
     dependencies:
       dequal: 2.0.3
       esm-env: 1.2.2
       lz-string: 1.5.0
-      svelte: 5.43.3
+      svelte: 5.45.2
     optionalDependencies:
-      '@sveltejs/kit': 2.49.0(@opentelemetry/api@1.9.0)(@sveltejs/vite-plugin-svelte@6.2.1(svelte@5.43.3)(vite@7.2.4(@types/node@24.10.1)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.0)(yaml@2.8.2)))(svelte@5.43.3)(vite@7.2.4(@types/node@24.10.1)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.0)(yaml@2.8.2))
+      '@sveltejs/kit': 2.49.0(@opentelemetry/api@1.9.0)(@sveltejs/vite-plugin-svelte@6.2.1(svelte@5.45.2)(vite@7.2.4(@types/node@24.10.1)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.0)(yaml@2.8.2)))(svelte@5.45.2)(vite@7.2.4(@types/node@24.10.1)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.0)(yaml@2.8.2))
 
   rw@1.3.3: {}
 
@@ -23896,19 +23895,19 @@ snapshots:
 
   supports-preserve-symlinks-flag@1.0.0: {}
 
-  svelte-check@4.3.4(picomatch@4.0.3)(svelte@5.43.3)(typescript@5.9.3):
+  svelte-check@4.3.4(picomatch@4.0.3)(svelte@5.45.2)(typescript@5.9.3):
     dependencies:
       '@jridgewell/trace-mapping': 0.3.31
       chokidar: 4.0.3
       fdir: 6.5.0(picomatch@4.0.3)
       picocolors: 1.1.1
       sade: 1.8.1
-      svelte: 5.43.3
+      svelte: 5.45.2
       typescript: 5.9.3
     transitivePeerDependencies:
       - picomatch
 
-  svelte-eslint-parser@1.4.0(svelte@5.43.3):
+  svelte-eslint-parser@1.4.0(svelte@5.45.2):
     dependencies:
       eslint-scope: 8.4.0
       eslint-visitor-keys: 4.2.1
@@ -23917,7 +23916,7 @@ snapshots:
       postcss-scss: 4.0.9(postcss@8.5.6)
       postcss-selector-parser: 7.1.0
     optionalDependencies:
-      svelte: 5.43.3
+      svelte: 5.45.2
 
   svelte-gestures@5.2.2: {}
 
@@ -23925,7 +23924,7 @@ snapshots:
     dependencies:
       highlight.js: 11.11.1
 
-  svelte-i18n@4.0.1(svelte@5.43.3):
+  svelte-i18n@4.0.1(svelte@5.45.2):
     dependencies:
       cli-color: 2.0.4
       deepmerge: 4.3.1
@@ -23933,36 +23932,36 @@ snapshots:
       estree-walker: 2.0.2
       intl-messageformat: 10.7.18
       sade: 1.8.1
-      svelte: 5.43.3
+      svelte: 5.45.2
       tiny-glob: 0.2.9
 
-  svelte-maplibre@1.2.5(svelte@5.43.3):
+  svelte-maplibre@1.2.5(svelte@5.45.2):
     dependencies:
       d3-geo: 3.1.1
       dequal: 2.0.3
       just-compare: 2.3.0
       maplibre-gl: 5.13.0
       pmtiles: 3.2.1
-      svelte: 5.43.3
+      svelte: 5.45.2
 
-  svelte-parse-markup@0.1.5(svelte@5.43.3):
+  svelte-parse-markup@0.1.5(svelte@5.45.2):
     dependencies:
-      svelte: 5.43.3
+      svelte: 5.45.2
 
-  svelte-persisted-store@0.12.0(svelte@5.43.3):
+  svelte-persisted-store@0.12.0(svelte@5.45.2):
     dependencies:
-      svelte: 5.43.3
+      svelte: 5.45.2
 
-  svelte-toolbelt@0.10.6(@sveltejs/kit@2.49.0(@opentelemetry/api@1.9.0)(@sveltejs/vite-plugin-svelte@6.2.1(svelte@5.43.3)(vite@7.2.4(@types/node@24.10.1)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.0)(yaml@2.8.2)))(svelte@5.43.3)(vite@7.2.4(@types/node@24.10.1)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.0)(yaml@2.8.2)))(svelte@5.43.3):
+  svelte-toolbelt@0.10.6(@sveltejs/kit@2.49.0(@opentelemetry/api@1.9.0)(@sveltejs/vite-plugin-svelte@6.2.1(svelte@5.45.2)(vite@7.2.4(@types/node@24.10.1)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.0)(yaml@2.8.2)))(svelte@5.45.2)(vite@7.2.4(@types/node@24.10.1)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.0)(yaml@2.8.2)))(svelte@5.45.2):
     dependencies:
       clsx: 2.1.1
-      runed: 0.35.1(@sveltejs/kit@2.49.0(@opentelemetry/api@1.9.0)(@sveltejs/vite-plugin-svelte@6.2.1(svelte@5.43.3)(vite@7.2.4(@types/node@24.10.1)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.0)(yaml@2.8.2)))(svelte@5.43.3)(vite@7.2.4(@types/node@24.10.1)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.0)(yaml@2.8.2)))(svelte@5.43.3)
+      runed: 0.35.1(@sveltejs/kit@2.49.0(@opentelemetry/api@1.9.0)(@sveltejs/vite-plugin-svelte@6.2.1(svelte@5.45.2)(vite@7.2.4(@types/node@24.10.1)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.0)(yaml@2.8.2)))(svelte@5.45.2)(vite@7.2.4(@types/node@24.10.1)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.0)(yaml@2.8.2)))(svelte@5.45.2)
       style-to-object: 1.0.14
-      svelte: 5.43.3
+      svelte: 5.45.2
     transitivePeerDependencies:
       - '@sveltejs/kit'
 
-  svelte@5.43.3:
+  svelte@5.45.2:
     dependencies:
       '@jridgewell/remapping': 2.3.5
       '@jridgewell/sourcemap-codec': 1.5.5
@@ -23972,6 +23971,7 @@ snapshots:
       aria-query: 5.3.2
       axobject-query: 4.1.0
       clsx: 2.1.1
+      devalue: 5.5.0
       esm-env: 1.2.2
       esrap: 2.2.0
       is-reference: 3.0.3

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.50.0",
     "@mapbox/mapbox-gl-rtl-text": "0.2.3",
     "@mdi/js": "^7.4.47",
     "@photo-sphere-viewer/core": "^5.14.0",
@@ -93,12 +93,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.43.3",
+    "svelte": "5.45.2",
     "svelte-check": "^4.1.5",
     "svelte-eslint-parser": "^1.3.3",
     "tailwindcss": "^4.1.7",

web/src/lib/components/SystemSettingsCard.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+  import { Card, CardBody, CardHeader, Heading, Text } from '@immich/ui';
+  import type { Snippet } from 'svelte';
+
+  type Props = {
+    title: string;
+    subtitle?: string | Snippet;
+    children?: Snippet;
+  };
+
+  const { title, subtitle, children }: Props = $props();
+</script>
+
+<Card class="dark:border-light-300" color="secondary">
+  <CardHeader class="dark:border-light-300 px-5 pt-5">
+    <Heading size="small" color="secondary" fontWeight="bold">{title}</Heading>
+    <Text size="small" color="muted">
+      {#if typeof subtitle === 'string'}
+        {subtitle}
+      {:else}
+        {@render subtitle?.()}
+      {/if}
+    </Text>
+  </CardHeader>
+  <CardBody class="dark:border-light-300 px-5 pb-5">
+    <div class="flex flex-col gap-5">
+      {@render children?.()}
+    </div>
+  </CardBody>
+</Card>

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

@@ -1,291 +0,0 @@
-<script lang="ts">
-  import SettingAccordion from '$lib/components/shared-components/settings/setting-accordion.svelte';
-  import SettingInputField from '$lib/components/shared-components/settings/setting-input-field.svelte';
-  import SettingSelect from '$lib/components/shared-components/settings/setting-select.svelte';
-  import SettingSwitch from '$lib/components/shared-components/settings/setting-switch.svelte';
-  import SettingButtonsRow from '$lib/components/shared-components/settings/SystemConfigButtonRow.svelte';
-  import { SettingInputFieldType } from '$lib/constants';
-  import FormatMessage from '$lib/elements/FormatMessage.svelte';
-  import { featureFlagsManager } from '$lib/managers/feature-flags-manager.svelte';
-  import { systemConfigManager } from '$lib/managers/system-config-manager.svelte';
-  import AuthDisableLoginConfirmModal from '$lib/modals/AuthDisableLoginConfirmModal.svelte';
-  import { handleError } from '$lib/utils/handle-error';
-  import { OAuthTokenEndpointAuthMethod, unlinkAllOAuthAccountsAdmin } from '@immich/sdk';
-  import { Button, modalManager, Text, toastManager } from '@immich/ui';
-  import { mdiRestart } from '@mdi/js';
-  import { t } from 'svelte-i18n';
-  import { fade } from 'svelte/transition';
-
-  const disabled = $derived(featureFlagsManager.value.configFile);
-  const config = $derived(systemConfigManager.value);
-  let configToEdit = $state(systemConfigManager.cloneValue());
-
-  const handleToggleOverride = () => {
-    // click runs before bind
-    const previouslyEnabled = configToEdit.oauth.mobileOverrideEnabled;
-    if (!previouslyEnabled && !configToEdit.oauth.mobileRedirectUri) {
-      configToEdit.oauth.mobileRedirectUri = globalThis.location.origin + '/api/oauth/mobile-redirect';
-    }
-  };
-
-  const onBeforeSave = async () => {
-    const allMethodsDisabled = !configToEdit.oauth.enabled && !configToEdit.passwordLogin.enabled;
-
-    if (allMethodsDisabled) {
-      const isConfirmed = await modalManager.show(AuthDisableLoginConfirmModal);
-      if (!isConfirmed) {
-        return false;
-      }
-    }
-
-    return true;
-  };
-
-  const handleUnlinkAllOAuthAccounts = async () => {
-    const confirmed = await modalManager.showDialog({
-      icon: mdiRestart,
-      title: $t('admin.unlink_all_oauth_accounts'),
-      prompt: $t('admin.unlink_all_oauth_accounts_prompt'),
-      confirmColor: 'danger',
-    });
-
-    if (!confirmed) {
-      return;
-    }
-
-    try {
-      await unlinkAllOAuthAccountsAdmin();
-      toastManager.success();
-    } catch (error) {
-      handleError(error, $t('errors.something_went_wrong'));
-    }
-  };
-</script>
-
-<div>
-  <div in:fade={{ duration: 500 }}>
-    <form autocomplete="off" onsubmit={(e) => e.preventDefault()}>
-      <div class="ms-4 mt-4 flex flex-col">
-        <SettingAccordion
-          key="oauth"
-          title={$t('admin.oauth_settings')}
-          subtitle={$t('admin.oauth_settings_description')}
-        >
-          <div class="ms-4 mt-4 flex flex-col gap-4">
-            <Text size="small">
-              <FormatMessage key="admin.oauth_settings_more_details">
-                {#snippet children({ message })}
-                  <a
-                    href="https://docs.immich.app/administration/oauth"
-                    class="underline"
-                    target="_blank"
-                    rel="noreferrer"
-                  >
-                    {message}
-                  </a>
-                {/snippet}
-              </FormatMessage>
-            </Text>
-
-            <SettingSwitch
-              {disabled}
-              title={$t('admin.oauth_enable_description')}
-              bind:checked={configToEdit.oauth.enabled}
-            />
-
-            {#if configToEdit.oauth.enabled}
-              <hr />
-
-              <div class="flex items-center gap-2 justify-between">
-                <Text size="small">{$t('admin.unlink_all_oauth_accounts_description')}</Text>
-                <Button size="small" onclick={handleUnlinkAllOAuthAccounts}
-                  >{$t('admin.unlink_all_oauth_accounts')}</Button
-                >
-              </div>
-
-              <SettingInputField
-                inputType={SettingInputFieldType.TEXT}
-                label="ISSUER_URL"
-                bind:value={configToEdit.oauth.issuerUrl}
-                required={true}
-                disabled={disabled || !configToEdit.oauth.enabled}
-                isEdited={!(configToEdit.oauth.issuerUrl === config.oauth.issuerUrl)}
-              />
-
-              <SettingInputField
-                inputType={SettingInputFieldType.TEXT}
-                label="CLIENT_ID"
-                bind:value={configToEdit.oauth.clientId}
-                required={true}
-                disabled={disabled || !configToEdit.oauth.enabled}
-                isEdited={!(configToEdit.oauth.clientId === config.oauth.clientId)}
-              />
-
-              <SettingInputField
-                inputType={SettingInputFieldType.TEXT}
-                label="CLIENT_SECRET"
-                description={$t('admin.oauth_client_secret_description')}
-                bind:value={configToEdit.oauth.clientSecret}
-                disabled={disabled || !configToEdit.oauth.enabled}
-                isEdited={!(configToEdit.oauth.clientSecret === config.oauth.clientSecret)}
-              />
-
-              {#if configToEdit.oauth.clientSecret}
-                <SettingSelect
-                  label="TOKEN_ENDPOINT_AUTH_METHOD"
-                  bind:value={configToEdit.oauth.tokenEndpointAuthMethod}
-                  disabled={disabled || !configToEdit.oauth.enabled || !configToEdit.oauth.clientSecret}
-                  isEdited={!(configToEdit.oauth.tokenEndpointAuthMethod === config.oauth.tokenEndpointAuthMethod)}
-                  options={[
-                    { value: OAuthTokenEndpointAuthMethod.ClientSecretPost, text: 'client_secret_post' },
-                    { value: OAuthTokenEndpointAuthMethod.ClientSecretBasic, text: 'client_secret_basic' },
-                  ]}
-                  name="tokenEndpointAuthMethod"
-                />
-              {/if}
-
-              <SettingInputField
-                inputType={SettingInputFieldType.TEXT}
-                label="SCOPE"
-                bind:value={configToEdit.oauth.scope}
-                required={true}
-                disabled={disabled || !configToEdit.oauth.enabled}
-                isEdited={!(configToEdit.oauth.scope === config.oauth.scope)}
-              />
-
-              <SettingInputField
-                inputType={SettingInputFieldType.TEXT}
-                label="ID_TOKEN_SIGNED_RESPONSE_ALG"
-                bind:value={configToEdit.oauth.signingAlgorithm}
-                required={true}
-                disabled={disabled || !configToEdit.oauth.enabled}
-                isEdited={!(configToEdit.oauth.signingAlgorithm === config.oauth.signingAlgorithm)}
-              />
-
-              <SettingInputField
-                inputType={SettingInputFieldType.TEXT}
-                label="USERINFO_SIGNED_RESPONSE_ALG"
-                bind:value={configToEdit.oauth.profileSigningAlgorithm}
-                required={true}
-                disabled={disabled || !configToEdit.oauth.enabled}
-                isEdited={!(configToEdit.oauth.profileSigningAlgorithm === config.oauth.profileSigningAlgorithm)}
-              />
-
-              <SettingInputField
-                inputType={SettingInputFieldType.NUMBER}
-                label={$t('admin.oauth_timeout')}
-                description={$t('admin.oauth_timeout_description')}
-                required={true}
-                bind:value={configToEdit.oauth.timeout}
-                disabled={disabled || !configToEdit.oauth.enabled}
-                isEdited={!(configToEdit.oauth.timeout === config.oauth.timeout)}
-              />
-
-              <SettingInputField
-                inputType={SettingInputFieldType.TEXT}
-                label={$t('admin.oauth_storage_label_claim')}
-                description={$t('admin.oauth_storage_label_claim_description')}
-                bind:value={configToEdit.oauth.storageLabelClaim}
-                required={true}
-                disabled={disabled || !configToEdit.oauth.enabled}
-                isEdited={!(configToEdit.oauth.storageLabelClaim === config.oauth.storageLabelClaim)}
-              />
-
-              <SettingInputField
-                inputType={SettingInputFieldType.TEXT}
-                label={$t('admin.oauth_role_claim')}
-                description={$t('admin.oauth_role_claim_description')}
-                bind:value={configToEdit.oauth.roleClaim}
-                required={true}
-                disabled={disabled || !configToEdit.oauth.enabled}
-                isEdited={!(configToEdit.oauth.roleClaim === config.oauth.roleClaim)}
-              />
-
-              <SettingInputField
-                inputType={SettingInputFieldType.TEXT}
-                label={$t('admin.oauth_storage_quota_claim')}
-                description={$t('admin.oauth_storage_quota_claim_description')}
-                bind:value={configToEdit.oauth.storageQuotaClaim}
-                required={true}
-                disabled={disabled || !configToEdit.oauth.enabled}
-                isEdited={!(configToEdit.oauth.storageQuotaClaim === config.oauth.storageQuotaClaim)}
-              />
-
-              <SettingInputField
-                inputType={SettingInputFieldType.NUMBER}
-                label={$t('admin.oauth_storage_quota_default')}
-                description={$t('admin.oauth_storage_quota_default_description')}
-                bind:value={configToEdit.oauth.defaultStorageQuota}
-                required={false}
-                disabled={disabled || !configToEdit.oauth.enabled}
-                isEdited={!(configToEdit.oauth.defaultStorageQuota === config.oauth.defaultStorageQuota)}
-              />
-
-              <SettingInputField
-                inputType={SettingInputFieldType.TEXT}
-                label={$t('admin.oauth_button_text')}
-                bind:value={configToEdit.oauth.buttonText}
-                required={false}
-                disabled={disabled || !configToEdit.oauth.enabled}
-                isEdited={!(configToEdit.oauth.buttonText === config.oauth.buttonText)}
-              />
-
-              <SettingSwitch
-                title={$t('admin.oauth_auto_register')}
-                subtitle={$t('admin.oauth_auto_register_description')}
-                bind:checked={configToEdit.oauth.autoRegister}
-                disabled={disabled || !configToEdit.oauth.enabled}
-              />
-
-              <SettingSwitch
-                title={$t('admin.oauth_auto_launch')}
-                subtitle={$t('admin.oauth_auto_launch_description')}
-                disabled={disabled || !configToEdit.oauth.enabled}
-                bind:checked={configToEdit.oauth.autoLaunch}
-              />
-
-              <SettingSwitch
-                title={$t('admin.oauth_mobile_redirect_uri_override')}
-                subtitle={$t('admin.oauth_mobile_redirect_uri_override_description', {
-                  values: { callback: 'app.immich:///oauth-callback' },
-                })}
-                disabled={disabled || !configToEdit.oauth.enabled}
-                onToggle={() => handleToggleOverride()}
-                bind:checked={configToEdit.oauth.mobileOverrideEnabled}
-              />
-
-              {#if configToEdit.oauth.mobileOverrideEnabled}
-                <SettingInputField
-                  inputType={SettingInputFieldType.TEXT}
-                  label={$t('admin.oauth_mobile_redirect_uri')}
-                  bind:value={configToEdit.oauth.mobileRedirectUri}
-                  required={true}
-                  disabled={disabled || !configToEdit.oauth.enabled}
-                  isEdited={!(configToEdit.oauth.mobileRedirectUri === config.oauth.mobileRedirectUri)}
-                />
-              {/if}
-            {/if}
-          </div>
-        </SettingAccordion>
-
-        <SettingAccordion
-          key="password"
-          title={$t('admin.password_settings')}
-          subtitle={$t('admin.password_settings_description')}
-        >
-          <div class="ms-4 mt-4 flex flex-col gap-4">
-            <div class="ms-4 mt-4 flex flex-col">
-              <SettingSwitch
-                title={$t('admin.password_enable_description')}
-                {disabled}
-                bind:checked={configToEdit.passwordLogin.enabled}
-              />
-            </div>
-          </div>
-        </SettingAccordion>
-
-        <SettingButtonsRow bind:configToEdit keys={['passwordLogin', 'oauth']} {onBeforeSave} {disabled} />
-      </div>
-    </form>
-  </div>
-</div>

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

@@ -1,83 +0,0 @@
-<script lang="ts">
-  import SettingButtonsRow from '$lib/components/shared-components/settings/SystemConfigButtonRow.svelte';
-  import SettingInputField from '$lib/components/shared-components/settings/setting-input-field.svelte';
-  import SettingSelect from '$lib/components/shared-components/settings/setting-select.svelte';
-  import SettingSwitch from '$lib/components/shared-components/settings/setting-switch.svelte';
-  import { SettingInputFieldType } from '$lib/constants';
-  import FormatMessage from '$lib/elements/FormatMessage.svelte';
-  import { featureFlagsManager } from '$lib/managers/feature-flags-manager.svelte';
-  import { systemConfigManager } from '$lib/managers/system-config-manager.svelte';
-  import { t } from 'svelte-i18n';
-  import { fade } from 'svelte/transition';
-
-  const disabled = $derived(featureFlagsManager.value.configFile);
-  const config = $derived(systemConfigManager.value);
-  let configToEdit = $state(systemConfigManager.cloneValue());
-
-  let cronExpressionOptions = $derived([
-    { text: $t('interval.night_at_midnight'), value: '0 0 * * *' },
-    { text: $t('interval.night_at_twoam'), value: '0 02 * * *' },
-    { text: $t('interval.day_at_onepm'), value: '0 13 * * *' },
-    { text: $t('interval.hours', { values: { hours: 6 } }), value: '0 */6 * * *' },
-  ]);
-</script>
-
-<div>
-  <div in:fade={{ duration: 500 }}>
-    <form autocomplete="off" onsubmit={(event) => event.preventDefault()}>
-      <div class="ms-4 mt-4 flex flex-col gap-4">
-        <SettingSwitch
-          title={$t('admin.backup_database_enable_description')}
-          {disabled}
-          bind:checked={configToEdit.backup.database.enabled}
-        />
-
-        <SettingSelect
-          options={cronExpressionOptions}
-          disabled={disabled || !configToEdit.backup.database.enabled}
-          name="expression"
-          label={$t('admin.cron_expression_presets')}
-          bind:value={configToEdit.backup.database.cronExpression}
-        />
-
-        <SettingInputField
-          inputType={SettingInputFieldType.TEXT}
-          required={true}
-          disabled={disabled || !configToEdit.backup.database.enabled}
-          label={$t('admin.cron_expression')}
-          bind:value={configToEdit.backup.database.cronExpression}
-          isEdited={configToEdit.backup.database.cronExpression !== config.backup.database.cronExpression}
-        >
-          {#snippet descriptionSnippet()}
-            <p class="text-sm dark:text-immich-dark-fg">
-              <FormatMessage key="admin.cron_expression_description">
-                {#snippet children({ message })}
-                  <a
-                    href="https://crontab.guru/#{configToEdit.backup.database.cronExpression.replaceAll(' ', '_')}"
-                    class="underline"
-                    target="_blank"
-                    rel="noreferrer"
-                  >
-                    {message}
-                    <br />
-                  </a>
-                {/snippet}
-              </FormatMessage>
-            </p>
-          {/snippet}
-        </SettingInputField>
-
-        <SettingInputField
-          inputType={SettingInputFieldType.NUMBER}
-          required={true}
-          label={$t('admin.backup_keep_last_amount')}
-          disabled={disabled || !configToEdit.backup.database.enabled}
-          bind:value={configToEdit.backup.database.keepLastAmount}
-          isEdited={configToEdit.backup.database.keepLastAmount !== config.backup.database.keepLastAmount}
-        />
-
-        <SettingButtonsRow {disabled} bind:configToEdit keys={['backup']} />
-      </div>
-    </form>
-  </div>
-</div>

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

@@ -1,180 +0,0 @@
-<script lang="ts">
-  import SettingSelect from '$lib/components/shared-components/settings/setting-select.svelte';
-  import { Colorspace, ImageFormat } from '@immich/sdk';
-  import { fade } from 'svelte/transition';
-
-  import SettingAccordion from '$lib/components/shared-components/settings/setting-accordion.svelte';
-  import SettingInputField from '$lib/components/shared-components/settings/setting-input-field.svelte';
-  import SettingSwitch from '$lib/components/shared-components/settings/setting-switch.svelte';
-  import SettingButtonsRow from '$lib/components/shared-components/settings/SystemConfigButtonRow.svelte';
-  import { SettingInputFieldType } from '$lib/constants';
-  import { featureFlagsManager } from '$lib/managers/feature-flags-manager.svelte';
-  import { systemConfigManager } from '$lib/managers/system-config-manager.svelte';
-  import { t } from 'svelte-i18n';
-
-  const disabled = $derived(featureFlagsManager.value.configFile);
-  const config = $derived(systemConfigManager.value);
-  let configToEdit = $state(systemConfigManager.cloneValue());
-</script>
-
-<div>
-  <div in:fade={{ duration: 500 }}>
-    <form autocomplete="off" onsubmit={(event) => event.preventDefault()}>
-      <div class="ms-4 mt-4">
-        <SettingAccordion
-          key="thumbnail-settings"
-          title={$t('admin.image_thumbnail_title')}
-          subtitle={$t('admin.image_thumbnail_description')}
-        >
-          <SettingSelect
-            label={$t('admin.image_format')}
-            desc={$t('admin.image_format_description')}
-            bind:value={configToEdit.image.thumbnail.format}
-            options={[
-              { value: ImageFormat.Jpeg, text: 'JPEG' },
-              { value: ImageFormat.Webp, text: 'WebP' },
-            ]}
-            name="format"
-            isEdited={configToEdit.image.thumbnail.format !== config.image.thumbnail.format}
-            {disabled}
-          />
-
-          <SettingSelect
-            label={$t('admin.image_resolution')}
-            desc={$t('admin.image_resolution_description')}
-            number
-            bind:value={configToEdit.image.thumbnail.size}
-            options={[
-              { value: 1080, text: '1080p' },
-              { value: 720, text: '720p' },
-              { value: 480, text: '480p' },
-              { value: 250, text: '250p' },
-              { value: 200, text: '200p' },
-            ]}
-            name="resolution"
-            isEdited={configToEdit.image.thumbnail.size !== config.image.thumbnail.size}
-            {disabled}
-          />
-
-          <SettingInputField
-            inputType={SettingInputFieldType.NUMBER}
-            label={$t('admin.image_quality')}
-            description={$t('admin.image_thumbnail_quality_description')}
-            bind:value={configToEdit.image.thumbnail.quality}
-            isEdited={configToEdit.image.thumbnail.quality !== config.image.thumbnail.quality}
-            {disabled}
-          />
-        </SettingAccordion>
-
-        <SettingAccordion
-          key="preview-settings"
-          title={$t('admin.image_preview_title')}
-          subtitle={$t('admin.image_preview_description')}
-        >
-          <SettingSelect
-            label={$t('admin.image_format')}
-            desc={$t('admin.image_format_description')}
-            bind:value={configToEdit.image.preview.format}
-            options={[
-              { value: ImageFormat.Jpeg, text: 'JPEG' },
-              { value: ImageFormat.Webp, text: 'WebP' },
-            ]}
-            name="format"
-            isEdited={configToEdit.image.preview.format !== config.image.preview.format}
-            {disabled}
-          />
-
-          <SettingSelect
-            label={$t('admin.image_resolution')}
-            desc={$t('admin.image_resolution_description')}
-            number
-            bind:value={configToEdit.image.preview.size}
-            options={[
-              { value: 2160, text: '4K' },
-              { value: 1440, text: '1440p' },
-              { value: 1080, text: '1080p' },
-              { value: 720, text: '720p' },
-            ]}
-            name="resolution"
-            isEdited={configToEdit.image.preview.size !== config.image.preview.size}
-            {disabled}
-          />
-
-          <SettingInputField
-            inputType={SettingInputFieldType.NUMBER}
-            label={$t('admin.image_quality')}
-            description={$t('admin.image_preview_quality_description')}
-            bind:value={configToEdit.image.preview.quality}
-            isEdited={configToEdit.image.preview.quality !== config.image.preview.quality}
-            {disabled}
-          />
-        </SettingAccordion>
-
-        <SettingAccordion
-          key="fullsize-settings"
-          title={$t('admin.image_fullsize_title')}
-          subtitle={$t('admin.image_fullsize_description')}
-        >
-          <SettingSwitch
-            title={$t('admin.image_fullsize_enabled')}
-            subtitle={$t('admin.image_fullsize_enabled_description')}
-            checked={configToEdit.image.fullsize.enabled}
-            onToggle={(isChecked) => (configToEdit.image.fullsize.enabled = isChecked)}
-            isEdited={configToEdit.image.fullsize.enabled !== config.image.fullsize.enabled}
-            {disabled}
-          />
-
-          <hr class="my-4" />
-
-          <SettingSelect
-            label={$t('admin.image_format')}
-            desc={$t('admin.image_format_description')}
-            bind:value={configToEdit.image.fullsize.format}
-            options={[
-              { value: ImageFormat.Jpeg, text: 'JPEG' },
-              { value: ImageFormat.Webp, text: 'WebP' },
-            ]}
-            name="format"
-            isEdited={configToEdit.image.fullsize.format !== config.image.fullsize.format}
-            disabled={disabled || !configToEdit.image.fullsize.enabled}
-          />
-
-          <SettingInputField
-            inputType={SettingInputFieldType.NUMBER}
-            label={$t('admin.image_quality')}
-            description={$t('admin.image_fullsize_quality_description')}
-            bind:value={configToEdit.image.fullsize.quality}
-            isEdited={configToEdit.image.fullsize.quality !== config.image.fullsize.quality}
-            disabled={disabled || !configToEdit.image.fullsize.enabled}
-          />
-        </SettingAccordion>
-
-        <div class="mt-4">
-          <SettingSwitch
-            title={$t('admin.image_prefer_wide_gamut')}
-            subtitle={$t('admin.image_prefer_wide_gamut_setting_description')}
-            checked={configToEdit.image.colorspace === Colorspace.P3}
-            onToggle={(isChecked) => (configToEdit.image.colorspace = isChecked ? Colorspace.P3 : Colorspace.Srgb)}
-            isEdited={configToEdit.image.colorspace !== config.image.colorspace}
-            {disabled}
-          />
-        </div>
-
-        <div class="mt-4">
-          <SettingSwitch
-            title={$t('admin.image_prefer_embedded_preview')}
-            subtitle={$t('admin.image_prefer_embedded_preview_setting_description')}
-            checked={configToEdit.image.extractEmbedded}
-            onToggle={() => (configToEdit.image.extractEmbedded = !configToEdit.image.extractEmbedded)}
-            isEdited={configToEdit.image.extractEmbedded !== config.image.extractEmbedded}
-            {disabled}
-          />
-        </div>
-      </div>
-
-      <div class="ms-4 mt-4">
-        <SettingButtonsRow bind:configToEdit keys={['image']} {disabled} />
-      </div>
-    </form>
-  </div>
-</div>

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

@@ -1,68 +0,0 @@
-<script lang="ts">
-  import SettingButtonsRow from '$lib/components/shared-components/settings/SystemConfigButtonRow.svelte';
-  import SettingInputField from '$lib/components/shared-components/settings/setting-input-field.svelte';
-  import { SettingInputFieldType } from '$lib/constants';
-  import { featureFlagsManager } from '$lib/managers/feature-flags-manager.svelte';
-  import { systemConfigManager } from '$lib/managers/system-config-manager.svelte';
-  import { getQueueName } from '$lib/utils';
-  import { QueueName, type SystemConfigJobDto } from '@immich/sdk';
-  import { t } from 'svelte-i18n';
-  import { fade } from 'svelte/transition';
-
-  const disabled = $derived(featureFlagsManager.value.configFile);
-  const config = $derived(systemConfigManager.value);
-  let configToEdit = $state(systemConfigManager.cloneValue());
-
-  const queueNames = [
-    QueueName.ThumbnailGeneration,
-    QueueName.MetadataExtraction,
-    QueueName.Library,
-    QueueName.Sidecar,
-    QueueName.SmartSearch,
-    QueueName.FaceDetection,
-    QueueName.FacialRecognition,
-    QueueName.VideoConversion,
-    QueueName.StorageTemplateMigration,
-    QueueName.Migration,
-    QueueName.Ocr,
-  ];
-
-  function isSystemConfigJobDto(jobName: string): jobName is keyof SystemConfigJobDto {
-    return jobName in configToEdit.job;
-  }
-</script>
-
-<div>
-  <div in:fade={{ duration: 500 }}>
-    <form autocomplete="off" onsubmit={(event) => event.preventDefault()}>
-      {#each queueNames as queueName (queueName)}
-        <div class="ms-4 mt-4 flex flex-col gap-4">
-          {#if isSystemConfigJobDto(queueName)}
-            <SettingInputField
-              inputType={SettingInputFieldType.NUMBER}
-              {disabled}
-              label={$t('admin.job_concurrency', { values: { job: $getQueueName(queueName) } })}
-              description=""
-              bind:value={configToEdit.job[queueName].concurrency}
-              required={true}
-              isEdited={!(configToEdit.job[queueName].concurrency == config.job[queueName].concurrency)}
-            />
-          {:else}
-            <SettingInputField
-              inputType={SettingInputFieldType.NUMBER}
-              label={$t('admin.job_concurrency', { values: { job: $getQueueName(queueName) } })}
-              description=""
-              value={1}
-              disabled={true}
-              title={$t('admin.job_not_concurrency_safe')}
-            />
-          {/if}
-        </div>
-      {/each}
-
-      <div class="ms-4">
-        <SettingButtonsRow bind:configToEdit keys={['job']} {disabled} />
-      </div>
-    </form>
-  </div>
-</div>

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

@@ -1,46 +0,0 @@
-<script lang="ts">
-  import SettingButtonsRow from '$lib/components/shared-components/settings/SystemConfigButtonRow.svelte';
-  import SettingSelect from '$lib/components/shared-components/settings/setting-select.svelte';
-  import SettingSwitch from '$lib/components/shared-components/settings/setting-switch.svelte';
-  import { featureFlagsManager } from '$lib/managers/feature-flags-manager.svelte';
-  import { systemConfigManager } from '$lib/managers/system-config-manager.svelte';
-  import { LogLevel } from '@immich/sdk';
-  import { t } from 'svelte-i18n';
-  import { fade } from 'svelte/transition';
-
-  const disabled = $derived(featureFlagsManager.value.configFile);
-  const config = $derived(systemConfigManager.value);
-  let configToEdit = $state(systemConfigManager.cloneValue());
-</script>
-
-<div>
-  <div in:fade={{ duration: 500 }}>
-    <form autocomplete="off" onsubmit={(event) => event.preventDefault()}>
-      <div class="ms-4 mt-4 flex flex-col gap-4">
-        <SettingSwitch
-          title={$t('admin.logging_enable_description')}
-          {disabled}
-          bind:checked={configToEdit.logging.enabled}
-        />
-        <SettingSelect
-          label={$t('level')}
-          desc={$t('admin.logging_level_description')}
-          bind:value={configToEdit.logging.level}
-          options={[
-            { value: LogLevel.Fatal, text: 'Fatal' },
-            { value: LogLevel.Error, text: 'Error' },
-            { value: LogLevel.Warn, text: 'Warn' },
-            { value: LogLevel.Log, text: 'Log' },
-            { value: LogLevel.Debug, text: 'Debug' },
-            { value: LogLevel.Verbose, text: 'Verbose' },
-          ]}
-          name="level"
-          isEdited={configToEdit.logging.level !== config.logging.level}
-          disabled={disabled || !configToEdit.logging.enabled}
-        />
-
-        <SettingButtonsRow bind:configToEdit keys={['logging']} {disabled} />
-      </div>
-    </form>
-  </div>
-</div>

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

@@ -1,331 +0,0 @@
-<script lang="ts">
-  import SettingAccordion from '$lib/components/shared-components/settings/setting-accordion.svelte';
-  import SettingInputField from '$lib/components/shared-components/settings/setting-input-field.svelte';
-  import SettingSelect from '$lib/components/shared-components/settings/setting-select.svelte';
-  import SettingSwitch from '$lib/components/shared-components/settings/setting-switch.svelte';
-  import SettingButtonsRow from '$lib/components/shared-components/settings/SystemConfigButtonRow.svelte';
-  import { SettingInputFieldType } from '$lib/constants';
-  import FormatMessage from '$lib/elements/FormatMessage.svelte';
-  import { featureFlagsManager } from '$lib/managers/feature-flags-manager.svelte';
-  import { systemConfigManager } from '$lib/managers/system-config-manager.svelte';
-  import { Button, IconButton } from '@immich/ui';
-  import { mdiPlus, mdiTrashCanOutline } from '@mdi/js';
-  import { isEqual } from 'lodash-es';
-  import { t } from 'svelte-i18n';
-  import { fade } from 'svelte/transition';
-
-  const disabled = $derived(featureFlagsManager.value.configFile);
-  const config = $derived(systemConfigManager.value);
-  let configToEdit = $state(systemConfigManager.cloneValue());
-</script>
-
-<div class="mt-2">
-  <div in:fade={{ duration: 500 }}>
-    <form autocomplete="off" class="mx-4 mt-4" onsubmit={(event) => event.preventDefault()}>
-      <div class="flex flex-col gap-4">
-        <SettingSwitch
-          title={$t('admin.machine_learning_enabled')}
-          subtitle={$t('admin.machine_learning_enabled_description')}
-          {disabled}
-          bind:checked={configToEdit.machineLearning.enabled}
-        />
-
-        <hr />
-
-        <div>
-          {#each configToEdit.machineLearning.urls as _, i (i)}
-            <SettingInputField
-              inputType={SettingInputFieldType.TEXT}
-              label={i === 0 ? $t('url') : undefined}
-              description={i === 0 ? $t('admin.machine_learning_url_description') : undefined}
-              bind:value={configToEdit.machineLearning.urls[i]}
-              required={i === 0}
-              disabled={disabled || !configToEdit.machineLearning.enabled}
-              isEdited={i === 0 && !isEqual(configToEdit.machineLearning.urls, config.machineLearning.urls)}
-            >
-              {#snippet trailingSnippet()}
-                {#if configToEdit.machineLearning.urls.length > 1}
-                  <IconButton
-                    aria-label=""
-                    onclick={() => configToEdit.machineLearning.urls.splice(i, 1)}
-                    icon={mdiTrashCanOutline}
-                    color="danger"
-                  />
-                {/if}
-              {/snippet}
-            </SettingInputField>
-          {/each}
-        </div>
-
-        <div class="flex justify-end">
-          <Button
-            class="mb-2"
-            size="small"
-            shape="round"
-            leadingIcon={mdiPlus}
-            onclick={() => configToEdit.machineLearning.urls.push('')}
-            disabled={disabled || !configToEdit.machineLearning.enabled}>{$t('add_url')}</Button
-          >
-        </div>
-      </div>
-
-      <SettingAccordion
-        key="availability-checks"
-        title={$t('admin.machine_learning_availability_checks')}
-        subtitle={$t('admin.machine_learning_availability_checks_description')}
-      >
-        <div class="ms-4 mt-4 flex flex-col gap-4">
-          <SettingSwitch
-            title={$t('admin.machine_learning_availability_checks_enabled')}
-            bind:checked={configToEdit.machineLearning.availabilityChecks.enabled}
-            disabled={disabled || !configToEdit.machineLearning.enabled}
-          />
-
-          <hr />
-
-          <SettingInputField
-            inputType={SettingInputFieldType.NUMBER}
-            label={$t('admin.machine_learning_availability_checks_interval')}
-            bind:value={configToEdit.machineLearning.availabilityChecks.interval}
-            description={$t('admin.machine_learning_availability_checks_interval_description')}
-            disabled={disabled ||
-              !configToEdit.machineLearning.enabled ||
-              !configToEdit.machineLearning.availabilityChecks.enabled}
-            isEdited={configToEdit.machineLearning.availabilityChecks.interval !==
-              config.machineLearning.availabilityChecks.interval}
-          />
-
-          <SettingInputField
-            inputType={SettingInputFieldType.NUMBER}
-            label={$t('admin.machine_learning_availability_checks_timeout')}
-            bind:value={configToEdit.machineLearning.availabilityChecks.timeout}
-            description={$t('admin.machine_learning_availability_checks_timeout_description')}
-            disabled={disabled ||
-              !configToEdit.machineLearning.enabled ||
-              !configToEdit.machineLearning.availabilityChecks.enabled}
-            isEdited={configToEdit.machineLearning.availabilityChecks.timeout !==
-              config.machineLearning.availabilityChecks.timeout}
-          />
-        </div>
-      </SettingAccordion>
-
-      <SettingAccordion
-        key="smart-search"
-        title={$t('admin.machine_learning_smart_search')}
-        subtitle={$t('admin.machine_learning_smart_search_description')}
-      >
-        <div class="ms-4 mt-4 flex flex-col gap-4">
-          <SettingSwitch
-            title={$t('admin.machine_learning_smart_search_enabled')}
-            subtitle={$t('admin.machine_learning_smart_search_enabled_description')}
-            bind:checked={configToEdit.machineLearning.clip.enabled}
-            disabled={disabled || !configToEdit.machineLearning.enabled}
-          />
-
-          <hr />
-
-          <SettingInputField
-            inputType={SettingInputFieldType.TEXT}
-            label={$t('admin.machine_learning_clip_model')}
-            bind:value={configToEdit.machineLearning.clip.modelName}
-            required={true}
-            disabled={disabled || !configToEdit.machineLearning.enabled || !configToEdit.machineLearning.clip.enabled}
-            isEdited={configToEdit.machineLearning.clip.modelName !== config.machineLearning.clip.modelName}
-          >
-            {#snippet descriptionSnippet()}
-              <p class="immich-form-label pb-2 text-sm">
-                <FormatMessage key="admin.machine_learning_clip_model_description">
-                  {#snippet children({ message })}
-                    <a target="_blank" href="https://huggingface.co/immich-app"><u>{message}</u></a>
-                  {/snippet}
-                </FormatMessage>
-              </p>
-            {/snippet}
-          </SettingInputField>
-        </div>
-      </SettingAccordion>
-
-      <SettingAccordion
-        key="duplicate-detection"
-        title={$t('admin.machine_learning_duplicate_detection')}
-        subtitle={$t('admin.machine_learning_duplicate_detection_setting_description')}
-      >
-        <div class="ms-4 mt-4 flex flex-col gap-4">
-          <SettingSwitch
-            title={$t('admin.machine_learning_duplicate_detection_enabled')}
-            subtitle={$t('admin.machine_learning_duplicate_detection_enabled_description')}
-            bind:checked={configToEdit.machineLearning.duplicateDetection.enabled}
-            disabled={disabled || !configToEdit.machineLearning.enabled || !configToEdit.machineLearning.clip.enabled}
-          />
-
-          <hr />
-
-          <SettingInputField
-            inputType={SettingInputFieldType.NUMBER}
-            label={$t('admin.machine_learning_max_detection_distance')}
-            bind:value={configToEdit.machineLearning.duplicateDetection.maxDistance}
-            step="0.0005"
-            min={0.001}
-            max={0.1}
-            description={$t('admin.machine_learning_max_detection_distance_description')}
-            disabled={disabled || !featureFlagsManager.value.duplicateDetection}
-            isEdited={configToEdit.machineLearning.duplicateDetection.maxDistance !==
-              config.machineLearning.duplicateDetection.maxDistance}
-          />
-        </div>
-      </SettingAccordion>
-
-      <SettingAccordion
-        key="facial-recognition"
-        title={$t('admin.machine_learning_facial_recognition')}
-        subtitle={$t('admin.machine_learning_facial_recognition_description')}
-      >
-        <div class="ms-4 mt-4 flex flex-col gap-4">
-          <SettingSwitch
-            title={$t('admin.machine_learning_facial_recognition_setting')}
-            subtitle={$t('admin.machine_learning_facial_recognition_setting_description')}
-            bind:checked={configToEdit.machineLearning.facialRecognition.enabled}
-            disabled={disabled || !configToEdit.machineLearning.enabled}
-          />
-
-          <hr />
-
-          <SettingSelect
-            label={$t('admin.machine_learning_facial_recognition_model')}
-            desc={$t('admin.machine_learning_facial_recognition_model_description')}
-            name="facial-recognition-model"
-            bind:value={configToEdit.machineLearning.facialRecognition.modelName}
-            options={[
-              { value: 'antelopev2', text: 'antelopev2' },
-              { value: 'buffalo_l', text: 'buffalo_l' },
-              { value: 'buffalo_m', text: 'buffalo_m' },
-              { value: 'buffalo_s', text: 'buffalo_s' },
-            ]}
-            disabled={disabled ||
-              !configToEdit.machineLearning.enabled ||
-              !configToEdit.machineLearning.facialRecognition.enabled}
-            isEdited={configToEdit.machineLearning.facialRecognition.modelName !==
-              config.machineLearning.facialRecognition.modelName}
-          />
-
-          <SettingInputField
-            inputType={SettingInputFieldType.NUMBER}
-            label={$t('admin.machine_learning_min_detection_score')}
-            description={$t('admin.machine_learning_min_detection_score_description')}
-            bind:value={configToEdit.machineLearning.facialRecognition.minScore}
-            step="0.01"
-            min={0.1}
-            max={1}
-            disabled={disabled ||
-              !configToEdit.machineLearning.enabled ||
-              !configToEdit.machineLearning.facialRecognition.enabled}
-            isEdited={configToEdit.machineLearning.facialRecognition.minScore !==
-              config.machineLearning.facialRecognition.minScore}
-          />
-
-          <SettingInputField
-            inputType={SettingInputFieldType.NUMBER}
-            label={$t('admin.machine_learning_max_recognition_distance')}
-            description={$t('admin.machine_learning_max_recognition_distance_description')}
-            bind:value={configToEdit.machineLearning.facialRecognition.maxDistance}
-            step="0.01"
-            min={0.1}
-            max={2}
-            disabled={disabled ||
-              !configToEdit.machineLearning.enabled ||
-              !configToEdit.machineLearning.facialRecognition.enabled}
-            isEdited={configToEdit.machineLearning.facialRecognition.maxDistance !==
-              config.machineLearning.facialRecognition.maxDistance}
-          />
-
-          <SettingInputField
-            inputType={SettingInputFieldType.NUMBER}
-            label={$t('admin.machine_learning_min_recognized_faces')}
-            description={$t('admin.machine_learning_min_recognized_faces_description')}
-            bind:value={configToEdit.machineLearning.facialRecognition.minFaces}
-            step="1"
-            min={1}
-            disabled={disabled ||
-              !configToEdit.machineLearning.enabled ||
-              !configToEdit.machineLearning.facialRecognition.enabled}
-            isEdited={configToEdit.machineLearning.facialRecognition.minFaces !==
-              config.machineLearning.facialRecognition.minFaces}
-          />
-        </div>
-      </SettingAccordion>
-
-      <SettingAccordion
-        key="ocr"
-        title={$t('admin.machine_learning_ocr')}
-        subtitle={$t('admin.machine_learning_ocr_description')}
-      >
-        <div class="ml-4 mt-4 flex flex-col gap-4">
-          <SettingSwitch
-            title={$t('admin.machine_learning_ocr_enabled')}
-            subtitle={$t('admin.machine_learning_ocr_enabled_description')}
-            bind:checked={configToEdit.machineLearning.ocr.enabled}
-            disabled={disabled || !configToEdit.machineLearning.enabled}
-          />
-
-          <hr />
-
-          <SettingSelect
-            label={$t('admin.machine_learning_ocr_model')}
-            desc={$t('admin.machine_learning_ocr_model_description')}
-            name="ocr-model"
-            bind:value={configToEdit.machineLearning.ocr.modelName}
-            options={[
-              { text: 'PP-OCRv5_server (Chinese, Japanese and English)', value: 'PP-OCRv5_server' },
-              { text: 'PP-OCRv5_mobile (Chinese, Japanese and English)', value: 'PP-OCRv5_mobile' },
-              { text: 'PP-OCRv5_mobile (English-only)', value: 'EN__PP-OCRv5_mobile' },
-              { text: 'PP-OCRv5_mobile (Greek and English)', value: 'EL__PP-OCRv5_mobile' },
-              { text: 'PP-OCRv5_mobile (Korean and English)', value: 'KOREAN__PP-OCRv5_mobile' },
-              { text: 'PP-OCRv5_mobile (Latin script languages)', value: 'LATIN__PP-OCRv5_mobile' },
-              { text: 'PP-OCRv5_mobile (Russian, Belarusian, Ukrainian and English)', value: 'ESLAV__PP-OCRv5_mobile' },
-              { text: 'PP-OCRv5_mobile (Thai and English)', value: 'TH__PP-OCRv5_mobile' },
-            ]}
-            disabled={disabled || !configToEdit.machineLearning.enabled || !configToEdit.machineLearning.ocr.enabled}
-            isEdited={configToEdit.machineLearning.ocr.modelName !== config.machineLearning.ocr.modelName}
-          />
-
-          <SettingInputField
-            inputType={SettingInputFieldType.NUMBER}
-            label={$t('admin.machine_learning_ocr_min_detection_score')}
-            description={$t('admin.machine_learning_ocr_min_detection_score_description')}
-            bind:value={configToEdit.machineLearning.ocr.minDetectionScore}
-            step="0.1"
-            min={0.1}
-            max={1}
-            disabled={disabled || !configToEdit.machineLearning.enabled || !configToEdit.machineLearning.ocr.enabled}
-            isEdited={configToEdit.machineLearning.ocr.minDetectionScore !==
-              config.machineLearning.ocr.minDetectionScore}
-          />
-
-          <SettingInputField
-            inputType={SettingInputFieldType.NUMBER}
-            label={$t('admin.machine_learning_ocr_min_recognition_score')}
-            description={$t('admin.machine_learning_ocr_min_score_recognition_description')}
-            bind:value={configToEdit.machineLearning.ocr.minRecognitionScore}
-            step="0.1"
-            min={0.1}
-            max={1}
-            disabled={disabled || !configToEdit.machineLearning.enabled || !configToEdit.machineLearning.ocr.enabled}
-            isEdited={configToEdit.machineLearning.ocr.minRecognitionScore !==
-              config.machineLearning.ocr.minRecognitionScore}
-          />
-
-          <SettingInputField
-            inputType={SettingInputFieldType.NUMBER}
-            label={$t('admin.machine_learning_ocr_max_resolution')}
-            description={$t('admin.machine_learning_ocr_max_resolution_description')}
-            bind:value={configToEdit.machineLearning.ocr.maxResolution}
-            min={1}
-            disabled={disabled || !configToEdit.machineLearning.enabled || !configToEdit.machineLearning.ocr.enabled}
-            isEdited={configToEdit.machineLearning.ocr.maxResolution !== config.machineLearning.ocr.maxResolution}
-          />
-        </div>
-      </SettingAccordion>
-      <SettingButtonsRow bind:configToEdit keys={['machineLearning']} {disabled} />
-    </form>
-  </div>
-</div>

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

@@ -1,35 +0,0 @@
-<script lang="ts">
-  import { handleError } from '$lib/utils/handle-error';
-  import { MaintenanceAction, setMaintenanceMode } from '@immich/sdk';
-  import { Button } from '@immich/ui';
-  import { t } from 'svelte-i18n';
-  import { fade } from 'svelte/transition';
-
-  interface Props {
-    disabled?: boolean;
-  }
-
-  let { disabled = false }: Props = $props();
-
-  async function start() {
-    try {
-      await setMaintenanceMode({
-        setMaintenanceModeDto: {
-          action: MaintenanceAction.Start,
-        },
-      });
-    } catch (error) {
-      handleError(error, $t('admin.maintenance_start_error'));
-    }
-  }
-</script>
-
-<div>
-  <div in:fade={{ duration: 500 }}>
-    <div class="ms-4 mt-4 flex items-end gap-4">
-      <Button shape="round" type="submit" {disabled} size="small" onclick={start}
-        >{$t('admin.maintenance_start')}</Button
-      >
-    </div>
-  </div>
-</div>

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

@@ -1,82 +0,0 @@
-<script lang="ts">
-  import SettingAccordion from '$lib/components/shared-components/settings/setting-accordion.svelte';
-  import SettingInputField from '$lib/components/shared-components/settings/setting-input-field.svelte';
-  import SettingSwitch from '$lib/components/shared-components/settings/setting-switch.svelte';
-  import SettingButtonsRow from '$lib/components/shared-components/settings/SystemConfigButtonRow.svelte';
-  import { SettingInputFieldType } from '$lib/constants';
-  import FormatMessage from '$lib/elements/FormatMessage.svelte';
-  import { featureFlagsManager } from '$lib/managers/feature-flags-manager.svelte';
-  import { systemConfigManager } from '$lib/managers/system-config-manager.svelte';
-  import { t } from 'svelte-i18n';
-  import { fade } from 'svelte/transition';
-
-  const disabled = $derived(featureFlagsManager.value.configFile);
-  const config = $derived(systemConfigManager.value);
-  let configToEdit = $state(systemConfigManager.cloneValue());
-</script>
-
-<div class="mt-2">
-  <div in:fade={{ duration: 500 }}>
-    <form autocomplete="off" onsubmit={(event) => event.preventDefault()}>
-      <div class="flex flex-col gap-4">
-        <SettingAccordion key="map" title={$t('admin.map_settings')} subtitle={$t('admin.map_settings_description')}>
-          <div class="ms-4 mt-4 flex flex-col gap-4">
-            <SettingSwitch
-              title={$t('admin.map_enable_description')}
-              subtitle={$t('admin.map_implications')}
-              {disabled}
-              bind:checked={configToEdit.map.enabled}
-            />
-
-            <hr />
-
-            <SettingInputField
-              inputType={SettingInputFieldType.TEXT}
-              label={$t('admin.map_light_style')}
-              description={$t('admin.map_style_description')}
-              bind:value={configToEdit.map.lightStyle}
-              disabled={disabled || !configToEdit.map.enabled}
-              isEdited={configToEdit.map.lightStyle !== config.map.lightStyle}
-            />
-            <SettingInputField
-              inputType={SettingInputFieldType.TEXT}
-              label={$t('admin.map_dark_style')}
-              description={$t('admin.map_style_description')}
-              bind:value={configToEdit.map.darkStyle}
-              disabled={disabled || !configToEdit.map.enabled}
-              isEdited={configToEdit.map.darkStyle !== config.map.darkStyle}
-            />
-          </div></SettingAccordion
-        >
-
-        <SettingAccordion key="reverse-geocoding" title={$t('admin.map_reverse_geocoding_settings')}>
-          {#snippet subtitleSnippet()}
-            <p class="text-sm dark:text-immich-dark-fg">
-              <FormatMessage key="admin.map_manage_reverse_geocoding_settings">
-                {#snippet children({ message })}
-                  <a
-                    href="https://docs.immich.app/features/reverse-geocoding"
-                    class="underline"
-                    target="_blank"
-                    rel="noreferrer"
-                  >
-                    {message}
-                  </a>
-                {/snippet}
-              </FormatMessage>
-            </p>
-          {/snippet}
-          <div class="ms-4 mt-4 flex flex-col gap-4">
-            <SettingSwitch
-              title={$t('admin.map_reverse_geocoding_enable_description')}
-              {disabled}
-              bind:checked={configToEdit.reverseGeocoding.enabled}
-            />
-          </div></SettingAccordion
-        >
-
-        <SettingButtonsRow bind:configToEdit keys={['map', 'reverseGeocoding']} {disabled} />
-      </div>
-    </form>
-  </div>
-</div>

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

@@ -1,28 +0,0 @@
-<script lang="ts">
-  import SettingButtonsRow from '$lib/components/shared-components/settings/SystemConfigButtonRow.svelte';
-  import SettingSwitch from '$lib/components/shared-components/settings/setting-switch.svelte';
-  import { featureFlagsManager } from '$lib/managers/feature-flags-manager.svelte';
-  import { systemConfigManager } from '$lib/managers/system-config-manager.svelte';
-  import { t } from 'svelte-i18n';
-  import { fade } from 'svelte/transition';
-
-  const disabled = $derived(featureFlagsManager.value.configFile);
-  let configToEdit = $state(systemConfigManager.cloneValue());
-</script>
-
-<div class="mt-2">
-  <div in:fade={{ duration: 500 }}>
-    <form autocomplete="off" class="mx-4 mt-4" onsubmit={(event) => event.preventDefault()}>
-      <div class="ms-4 mt-4 flex flex-col gap-4">
-        <SettingSwitch
-          title={$t('admin.metadata_faces_import_setting')}
-          subtitle={$t('admin.metadata_faces_import_setting_description')}
-          bind:checked={configToEdit.metadata.faces.import}
-          {disabled}
-        />
-      </div>
-
-      <SettingButtonsRow bind:configToEdit keys={['metadata']} {disabled} />
-    </form>
-  </div>
-</div>

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

@@ -1,27 +0,0 @@
-<script lang="ts">
-  import SettingButtonsRow from '$lib/components/shared-components/settings/SystemConfigButtonRow.svelte';
-  import SettingSwitch from '$lib/components/shared-components/settings/setting-switch.svelte';
-  import { featureFlagsManager } from '$lib/managers/feature-flags-manager.svelte';
-  import { systemConfigManager } from '$lib/managers/system-config-manager.svelte';
-  import { t } from 'svelte-i18n';
-  import { fade } from 'svelte/transition';
-
-  const disabled = $derived(featureFlagsManager.value.configFile);
-  let configToEdit = $state(systemConfigManager.cloneValue());
-</script>
-
-<div>
-  <div in:fade={{ duration: 500 }}>
-    <form autocomplete="off" onsubmit={(event) => event.preventDefault()}>
-      <div class="ms-4 mt-4">
-        <SettingSwitch
-          title={$t('admin.version_check_enabled_description')}
-          subtitle={$t('admin.version_check_implications')}
-          bind:checked={configToEdit.newVersionCheck.enabled}
-          {disabled}
-        />
-        <SettingButtonsRow bind:configToEdit keys={['newVersionCheck']} {disabled} />
-      </div>
-    </form>
-  </div>
-</div>

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

@@ -1,64 +0,0 @@
-<script lang="ts">
-  import SettingButtonsRow from '$lib/components/shared-components/settings/SystemConfigButtonRow.svelte';
-  import SettingInputField from '$lib/components/shared-components/settings/setting-input-field.svelte';
-  import SettingSwitch from '$lib/components/shared-components/settings/setting-switch.svelte';
-  import { SettingInputFieldType } from '$lib/constants';
-  import { featureFlagsManager } from '$lib/managers/feature-flags-manager.svelte';
-  import { systemConfigManager } from '$lib/managers/system-config-manager.svelte';
-  import { t } from 'svelte-i18n';
-  import { fade } from 'svelte/transition';
-
-  const disabled = $derived(featureFlagsManager.value.configFile);
-  const config = $derived(systemConfigManager.value);
-  let configToEdit = $state(systemConfigManager.cloneValue());
-</script>
-
-<div class="mt-2">
-  <div in:fade={{ duration: 500 }}>
-    <form autocomplete="off" class="mx-4 mt-4" onsubmit={(event) => event.preventDefault()}>
-      <div class="ms-4 mt-4 flex flex-col gap-4">
-        <SettingInputField
-          inputType={SettingInputFieldType.TEXT}
-          label={$t('admin.nightly_tasks_start_time_setting')}
-          description={$t('admin.nightly_tasks_start_time_setting_description')}
-          bind:value={configToEdit.nightlyTasks.startTime}
-          required={true}
-          {disabled}
-          isEdited={!(configToEdit.nightlyTasks.startTime === config.nightlyTasks.startTime)}
-        />
-        <SettingSwitch
-          title={$t('admin.nightly_tasks_database_cleanup_setting')}
-          subtitle={$t('admin.nightly_tasks_database_cleanup_setting_description')}
-          bind:checked={configToEdit.nightlyTasks.databaseCleanup}
-          {disabled}
-        />
-        <SettingSwitch
-          title={$t('admin.nightly_tasks_missing_thumbnails_setting')}
-          subtitle={$t('admin.nightly_tasks_missing_thumbnails_setting_description')}
-          bind:checked={configToEdit.nightlyTasks.missingThumbnails}
-          {disabled}
-        />
-        <SettingSwitch
-          title={$t('admin.nightly_tasks_cluster_new_faces_setting')}
-          subtitle={$t('admin.nightly_tasks_cluster_faces_setting_description')}
-          bind:checked={configToEdit.nightlyTasks.clusterNewFaces}
-          {disabled}
-        />
-        <SettingSwitch
-          title={$t('admin.nightly_tasks_generate_memories_setting')}
-          subtitle={$t('admin.nightly_tasks_generate_memories_setting_description')}
-          bind:checked={configToEdit.nightlyTasks.generateMemories}
-          {disabled}
-        />
-        <SettingSwitch
-          title={$t('admin.nightly_tasks_sync_quota_usage_setting')}
-          subtitle={$t('admin.nightly_tasks_sync_quota_usage_setting_description')}
-          bind:checked={configToEdit.nightlyTasks.syncQuotaUsage}
-          {disabled}
-        />
-      </div>
-
-      <SettingButtonsRow bind:configToEdit keys={['nightlyTasks']} {disabled} />
-    </form>
-  </div>
-</div>

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

@@ -1,49 +0,0 @@
-<script lang="ts">
-  import SettingButtonsRow from '$lib/components/shared-components/settings/SystemConfigButtonRow.svelte';
-  import SettingInputField from '$lib/components/shared-components/settings/setting-input-field.svelte';
-  import SettingSwitch from '$lib/components/shared-components/settings/setting-switch.svelte';
-  import { SettingInputFieldType } from '$lib/constants';
-  import { featureFlagsManager } from '$lib/managers/feature-flags-manager.svelte';
-  import { systemConfigManager } from '$lib/managers/system-config-manager.svelte';
-  import { t } from 'svelte-i18n';
-  import { fade } from 'svelte/transition';
-
-  const disabled = $derived(featureFlagsManager.value.configFile);
-  const config = $derived(systemConfigManager.value);
-  let configToEdit = $state(systemConfigManager.cloneValue());
-</script>
-
-<div>
-  <div in:fade={{ duration: 500 }}>
-    <form autocomplete="off" onsubmit={(event) => event.preventDefault()}>
-      <div class="mt-4 ms-4">
-        <SettingInputField
-          inputType={SettingInputFieldType.TEXT}
-          label={$t('admin.server_external_domain_settings')}
-          description={$t('admin.server_external_domain_settings_description')}
-          bind:value={configToEdit.server.externalDomain}
-          isEdited={configToEdit.server.externalDomain !== config.server.externalDomain}
-        />
-
-        <SettingInputField
-          inputType={SettingInputFieldType.TEXT}
-          label={$t('admin.server_welcome_message')}
-          description={$t('admin.server_welcome_message_description')}
-          bind:value={configToEdit.server.loginPageMessage}
-          isEdited={configToEdit.server.loginPageMessage !== config.server.loginPageMessage}
-        />
-
-        <SettingSwitch
-          title={$t('admin.server_public_users')}
-          subtitle={$t('admin.server_public_users_description')}
-          {disabled}
-          bind:checked={configToEdit.server.publicUsers}
-        />
-
-        <div class="ms-4">
-          <SettingButtonsRow bind:configToEdit keys={['server']} {disabled} />
-        </div>
-      </div>
-    </form>
-  </div>
-</div>

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

@@ -1,30 +0,0 @@
-<script lang="ts">
-  import SettingButtonsRow from '$lib/components/shared-components/settings/SystemConfigButtonRow.svelte';
-  import SettingTextarea from '$lib/components/shared-components/settings/setting-textarea.svelte';
-  import { featureFlagsManager } from '$lib/managers/feature-flags-manager.svelte';
-  import { systemConfigManager } from '$lib/managers/system-config-manager.svelte';
-  import { t } from 'svelte-i18n';
-  import { fade } from 'svelte/transition';
-
-  const disabled = $derived(featureFlagsManager.value.configFile);
-  const config = $derived(systemConfigManager.value);
-  let configToEdit = $state(systemConfigManager.cloneValue());
-</script>
-
-<div>
-  <div in:fade={{ duration: 500 }}>
-    <form autocomplete="off" onsubmit={(event) => event.preventDefault()}>
-      <div class="ms-4 mt-4 flex flex-col gap-4">
-        <SettingTextarea
-          {disabled}
-          label={$t('admin.theme_custom_css_settings')}
-          description={$t('admin.theme_custom_css_settings_description')}
-          bind:value={configToEdit.theme.customCss}
-          isEdited={configToEdit.theme.customCss !== config.theme.customCss}
-        />
-
-        <SettingButtonsRow bind:configToEdit keys={['theme']} {disabled} />
-      </div>
-    </form>
-  </div>
-</div>

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

@@ -1,42 +0,0 @@
-<script lang="ts">
-  import SettingButtonsRow from '$lib/components/shared-components/settings/SystemConfigButtonRow.svelte';
-  import SettingInputField from '$lib/components/shared-components/settings/setting-input-field.svelte';
-  import SettingSwitch from '$lib/components/shared-components/settings/setting-switch.svelte';
-  import { SettingInputFieldType } from '$lib/constants';
-  import { featureFlagsManager } from '$lib/managers/feature-flags-manager.svelte';
-  import { systemConfigManager } from '$lib/managers/system-config-manager.svelte';
-  import { t } from 'svelte-i18n';
-  import { fade } from 'svelte/transition';
-
-  const disabled = $derived(featureFlagsManager.value.configFile);
-  const config = $derived(systemConfigManager.value);
-  let configToEdit = $state(systemConfigManager.cloneValue());
-</script>
-
-<div>
-  <div in:fade={{ duration: 500 }}>
-    <form autocomplete="off" onsubmit={(event) => event.preventDefault()}>
-      <div class="ms-4 mt-4 flex flex-col gap-4">
-        <SettingSwitch
-          title={$t('admin.trash_enabled_description')}
-          {disabled}
-          bind:checked={configToEdit.trash.enabled}
-        />
-
-        <hr />
-
-        <SettingInputField
-          inputType={SettingInputFieldType.NUMBER}
-          label={$t('admin.trash_number_of_days')}
-          description={$t('admin.trash_number_of_days_description')}
-          bind:value={configToEdit.trash.days}
-          required={true}
-          disabled={disabled || !configToEdit.trash.enabled}
-          isEdited={configToEdit.trash.days !== config.trash.days}
-        />
-
-        <SettingButtonsRow bind:configToEdit keys={['trash']} {disabled} />
-      </div>
-    </form>
-  </div>
-</div>

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

@@ -1,35 +0,0 @@
-<script lang="ts">
-  import { fade } from 'svelte/transition';
-
-  import SettingButtonsRow from '$lib/components/shared-components/settings/SystemConfigButtonRow.svelte';
-  import SettingInputField from '$lib/components/shared-components/settings/setting-input-field.svelte';
-  import { SettingInputFieldType } from '$lib/constants';
-  import { featureFlagsManager } from '$lib/managers/feature-flags-manager.svelte';
-  import { systemConfigManager } from '$lib/managers/system-config-manager.svelte';
-  import { t } from 'svelte-i18n';
-
-  const disabled = $derived(featureFlagsManager.value.configFile);
-  const config = $derived(systemConfigManager.value);
-  let configToEdit = $state(systemConfigManager.cloneValue());
-</script>
-
-<div>
-  <div in:fade={{ duration: 500 }}>
-    <form autocomplete="off" onsubmit={(e) => e.preventDefault()}>
-      <div class="ms-4 mt-4 flex flex-col gap-4">
-        <SettingInputField
-          inputType={SettingInputFieldType.NUMBER}
-          min={1}
-          label={$t('admin.user_delete_delay_settings')}
-          description={$t('admin.user_delete_delay_settings_description')}
-          bind:value={configToEdit.user.deleteDelay}
-          isEdited={configToEdit.user.deleteDelay !== config.user.deleteDelay}
-        />
-      </div>
-
-      <div class="ms-4">
-        <SettingButtonsRow bind:configToEdit keys={['user']} {disabled} />
-      </div>
-    </form>
-  </div>
-</div>

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/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/shared-components/settings/SystemConfigButtonRow.svelte

@@ -19,11 +19,6 @@
     !isEqual(pick(systemConfigManager.value, keys), pick(systemConfigManager.defaultValue, keys)),
   );
 
-  const handleReset = () => {
-    configToEdit = systemConfigManager.cloneValue();
-    toastManager.info($t('admin.reset_settings_to_recent_saved'));
-  };
-
   const handleResetToDefault = () => {
     const defaultConfig = systemConfigManager.cloneDefaultValue();
 
@@ -51,7 +46,7 @@
   </div>
 
   <div class="flex gap-1">
-    <Button shape="round" {disabled} size="small" color="secondary" onclick={handleReset}>{$t('reset')}</Button>
+    <Button shape="round" {disabled} size="small" color="secondary" onclick={onCancel}>{$t('cancel')}</Button>
     <Button shape="round" type="submit" {disabled} size="small" onclick={handleSave}>{$t('save')}</Button>
   </div>
 </div>

web/src/lib/components/shared-components/settings/setting-checkboxes.svelte

@@ -29,7 +29,7 @@
   }
 </script>
 
-<div class="mb-4 w-full">
+<div class="w-full">
   <div class="flex h-6.5 place-items-center gap-1">
     <label class="font-medium text-primary text-sm" for="{name}-select">
       {label}

web/src/lib/components/shared-components/settings/setting-input-field.svelte

@@ -79,7 +79,7 @@
   });
 </script>
 
-<div class="mb-4 w-full">
+<div class="w-full">
   <div class="flex place-items-center gap-1">
     <label class="font-medium text-primary text-sm min-h-6 uppercase" for={label}>{label}</label>
     {#if required}

web/src/lib/components/shared-components/settings/setting-select.svelte

@@ -38,7 +38,7 @@
   };
 </script>
 
-<div class="mb-4 w-full">
+<div class="w-full">
   <div class="flex h-6.5 place-items-center gap-1">
     <label class="font-medium text-primary text-sm" for="{name}-select">{label}</label>
 

web/src/lib/components/shared-components/settings/setting-switch.svelte

@@ -8,7 +8,7 @@
 
   interface Props {
     title: string;
-    subtitle?: string;
+    subtitle?: string | Snippet;
     checked?: boolean;
     disabled?: boolean;
     isEdited?: boolean;
@@ -48,8 +48,10 @@
       {/if}
     </div>
 
-    {#if subtitle}
+    {#if typeof subtitle === 'string'}
       <p id={subtitleId} class="text-sm dark:text-immich-dark-fg">{subtitle}</p>
+    {:else}
+      {@render subtitle?.()}
     {/if}
     {@render children?.()}
   </div>

web/src/lib/components/shared-components/settings/setting-textarea.svelte

@@ -29,7 +29,7 @@
   };
 </script>
 
-<div class="mb-4 w-full">
+<div class="w-full">
   <div class="flex h-6.5 place-items-center gap-1">
     <label class="font-medium text-primary text-sm" for={label}>{label}</label>
     {#if required}

web/src/lib/modals/SystemSettingsModal.svelte

@@ -0,0 +1,69 @@
+<script lang="ts">
+  import { goto } from '$app/navigation';
+  import { page } from '$app/state';
+  import { AppRoute } from '$lib/constants';
+  import { featureFlagsManager } from '$lib/managers/feature-flags-manager.svelte';
+  import { systemConfigManager } from '$lib/managers/system-config-manager.svelte';
+  import { getSystemConfigActions, handleSystemConfigSave } from '$lib/services/system-config.service';
+  import type { SystemConfigContext } from '$lib/types';
+  import type { SystemConfigDto } from '@immich/sdk';
+  import { Button, FormModal, type ModalSize } from '@immich/ui';
+  import { isEqual, pick } from 'lodash-es';
+  import { type Snippet } from 'svelte';
+  import { t } from 'svelte-i18n';
+
+  type Props = {
+    keys: Array<keyof SystemConfigDto>;
+    size?: ModalSize;
+    onBeforeSave?: (context: SystemConfigContext) => Promise<boolean>;
+    child: Snippet<[SystemConfigContext]>;
+  };
+
+  let { keys, size = 'medium', onBeforeSave, child }: Props = $props();
+
+  const disabled = $derived(featureFlagsManager.value.configFile);
+  const config = $derived(systemConfigManager.value);
+  let configToEdit = $state(systemConfigManager.cloneValue());
+  const { settings } = $derived(getSystemConfigActions($t, featureFlagsManager.value, systemConfigManager.value));
+  const setting = $derived(settings.find((setting) => setting.href === page.url.pathname));
+  const showResetToDefault = $derived(!isEqual(pick(configToEdit, keys), pick(systemConfigManager.defaultValue, keys)));
+
+  const handleResetToDefault = () => {
+    const defaultConfig = systemConfigManager.cloneDefaultValue();
+    configToEdit = { ...configToEdit, ...pick(defaultConfig, keys) };
+  };
+
+  const onSubmit = async () => {
+    const shouldSave = await onBeforeSave?.({ disabled, config, configToEdit });
+    if (shouldSave ?? true) {
+      await handleSystemConfigSave(pick(configToEdit, keys));
+      await onClose();
+    }
+  };
+
+  const onClose = async () => {
+    await goto(AppRoute.ADMIN_SETTINGS);
+  };
+</script>
+
+{#if setting}
+  <FormModal
+    size={size as 'small' | 'medium'}
+    title={setting.title}
+    icon={setting.icon}
+    preventDefault
+    {onClose}
+    {onSubmit}
+  >
+    <div class="flex flex-col gap-5">
+      {@render child({ disabled, config, configToEdit })}
+      {#if showResetToDefault}
+        <div class="flex justify-end mt-4">
+          <Button size="small" color="secondary" variant="ghost" onclick={handleResetToDefault}>
+            {$t('reset_to_default')}
+          </Button>
+        </div>
+      {/if}
+    </div>
+  </FormModal>
+{/if}

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

@@ -1,3 +1,4 @@
+import { AppRoute } from '$lib/constants';
 import { downloadManager } from '$lib/managers/download-manager.svelte';
 import { eventManager } from '$lib/managers/event-manager.svelte';
 import { copyToClipboard } from '$lib/utils';
@@ -6,7 +7,30 @@ import { handleError } from '$lib/utils/handle-error';
 import { getFormatter } from '$lib/utils/i18n';
 import { getConfig, updateConfig, type ServerFeaturesDto, type SystemConfigDto } from '@immich/sdk';
 import { toastManager, type ActionItem } from '@immich/ui';
-import { mdiContentCopy, mdiDownload, mdiUpload } from '@mdi/js';
+import {
+  mdiAccountOutline,
+  mdiBackupRestore,
+  mdiBellOutline,
+  mdiBookshelf,
+  mdiClockOutline,
+  mdiContentCopy,
+  mdiDatabaseOutline,
+  mdiDownload,
+  mdiFileDocumentOutline,
+  mdiFolderOutline,
+  mdiImageOutline,
+  mdiLockOutline,
+  mdiMapMarkerOutline,
+  mdiPaletteOutline,
+  mdiRestore,
+  mdiRobotOutline,
+  mdiServerOutline,
+  mdiSync,
+  mdiTrashCanOutline,
+  mdiUpdate,
+  mdiUpload,
+  mdiVideoOutline,
+} from '@mdi/js';
 import { isEqual } from 'lodash-es';
 import type { MessageFormatter } from 'svelte-i18n';
 
@@ -15,6 +39,123 @@ export const getSystemConfigActions = (
   featureFlags: ServerFeaturesDto,
   config: SystemConfigDto,
 ) => {
+  const settings: Array<{ title: string; subtitle: string; href: string; icon: string }> = [
+    {
+      title: $t('admin.authentication_settings'),
+      subtitle: $t('admin.authentication_settings_description'),
+      href: `${AppRoute.ADMIN_SETTINGS}/authentication`,
+      icon: mdiLockOutline,
+    },
+    {
+      title: $t('admin.backup_settings'),
+      subtitle: $t('admin.backup_settings_description'),
+      href: `${AppRoute.ADMIN_SETTINGS}/backup`,
+      icon: mdiBackupRestore,
+    },
+    {
+      title: $t('admin.image_settings'),
+      subtitle: $t('admin.image_settings_description'),
+      href: `${AppRoute.ADMIN_SETTINGS}/image`,
+      icon: mdiImageOutline,
+    },
+    {
+      title: $t('admin.job_settings'),
+      subtitle: $t('admin.job_settings_description'),
+      href: `${AppRoute.ADMIN_SETTINGS}/job`,
+      icon: mdiSync,
+    },
+    {
+      title: $t('admin.library_settings'),
+      subtitle: $t('admin.library_settings_description'),
+      href: `${AppRoute.ADMIN_SETTINGS}/library`,
+      icon: mdiBookshelf,
+    },
+    {
+      title: $t('admin.logging_settings'),
+      subtitle: $t('admin.manage_log_settings'),
+      href: `${AppRoute.ADMIN_SETTINGS}/logging`,
+      icon: mdiFileDocumentOutline,
+    },
+    {
+      title: $t('admin.machine_learning_settings'),
+      subtitle: $t('admin.machine_learning_settings_description'),
+      href: `${AppRoute.ADMIN_SETTINGS}/machine-learning`,
+      icon: mdiRobotOutline,
+    },
+    {
+      title: $t('admin.maintenance_settings'),
+      subtitle: $t('admin.maintenance_settings_description'),
+      href: `${AppRoute.ADMIN_SETTINGS}/maintenance`,
+      icon: mdiRestore,
+    },
+    {
+      title: $t('admin.map_gps_settings'),
+      subtitle: $t('admin.map_gps_settings_description'),
+      href: `${AppRoute.ADMIN_SETTINGS}/location`,
+      icon: mdiMapMarkerOutline,
+    },
+    {
+      title: $t('admin.metadata_settings'),
+      subtitle: $t('admin.metadata_settings_description'),
+      href: `${AppRoute.ADMIN_SETTINGS}/metadata`,
+      icon: mdiDatabaseOutline,
+    },
+    {
+      title: $t('admin.nightly_tasks_settings'),
+      subtitle: $t('admin.nightly_tasks_settings_description'),
+      href: `${AppRoute.ADMIN_SETTINGS}/nightly-tasks`,
+      icon: mdiClockOutline,
+    },
+    {
+      title: $t('admin.notification_settings'),
+      subtitle: $t('admin.notification_settings_description'),
+      href: `${AppRoute.ADMIN_SETTINGS}/notifications`,
+      icon: mdiBellOutline,
+    },
+    {
+      title: $t('admin.server_settings'),
+      subtitle: $t('admin.server_settings_description'),
+      href: `${AppRoute.ADMIN_SETTINGS}/server`,
+      icon: mdiServerOutline,
+    },
+    {
+      title: $t('admin.storage_template_settings'),
+      subtitle: $t('admin.storage_template_settings_description'),
+      href: `${AppRoute.ADMIN_SETTINGS}/storage-template`,
+      icon: mdiFolderOutline,
+    },
+    {
+      title: $t('admin.theme_settings'),
+      subtitle: $t('admin.theme_settings_description'),
+      href: `${AppRoute.ADMIN_SETTINGS}/theme`,
+      icon: mdiPaletteOutline,
+    },
+    {
+      title: $t('admin.trash_settings'),
+      subtitle: $t('admin.trash_settings_description'),
+      href: `${AppRoute.ADMIN_SETTINGS}/trash`,
+      icon: mdiTrashCanOutline,
+    },
+    {
+      title: $t('admin.user_settings'),
+      subtitle: $t('admin.user_settings_description'),
+      href: `${AppRoute.ADMIN_SETTINGS}/user`,
+      icon: mdiAccountOutline,
+    },
+    {
+      title: $t('admin.version_check_settings'),
+      subtitle: $t('admin.version_check_settings_description'),
+      href: `${AppRoute.ADMIN_SETTINGS}/version-check`,
+      icon: mdiUpdate,
+    },
+    {
+      title: $t('admin.transcoding_settings'),
+      subtitle: $t('admin.transcoding_settings_description'),
+      href: `${AppRoute.ADMIN_SETTINGS}/video-transcoding`,
+      icon: mdiVideoOutline,
+    },
+  ];
+
   const CopyToClipboard: ActionItem = {
     title: $t('copy_to_clipboard'),
     description: $t('admin.copy_config_to_clipboard_description'),
@@ -46,7 +187,7 @@ export const getSystemConfigActions = (
     shortcuts: { shift: true, key: 'u' },
   };
 
-  return { CopyToClipboard, Download, Upload };
+  return { settings, CopyToClipboard, Download, Upload };
 };
 
 export const handleSystemConfigSave = async (update: Partial<SystemConfigDto>) => {

web/src/lib/types.ts

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

web/src/routes/+layout.svelte

@@ -38,6 +38,7 @@
       hide_password: $t('hide_password'),
       confirm: $t('confirm'),
       cancel: $t('cancel'),
+      save: $t('save'),
       toast_success_title: $t('success'),
       toast_info_title: $t('info'),
       toast_warning_title: $t('warning'),

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

@@ -0,0 +1,62 @@
+<script lang="ts">
+  import AdminPageLayout from '$lib/components/layouts/AdminPageLayout.svelte';
+  import SearchBar from '$lib/elements/SearchBar.svelte';
+  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, Button, CommandPaletteContext, Icon, Text } from '@immich/ui';
+  import { mdiPencilOutline } from '@mdi/js';
+  import type { Snippet } from 'svelte';
+  import { t } from 'svelte-i18n';
+  import type { PageData } from './$types';
+
+  type Props = {
+    data: PageData;
+    children?: Snippet;
+  };
+
+  const { data, children }: Props = $props();
+
+  const { settings, CopyToClipboard, Upload, Download } = $derived(
+    getSystemConfigActions($t, featureFlagsManager.value, systemConfigManager.value),
+  );
+
+  let searchQuery = $state('');
+  let filteredSettings = $derived(
+    settings.filter(({ title, subtitle }) => {
+      const query = searchQuery.toLowerCase();
+      return title.toLowerCase().includes(query) || subtitle.toLowerCase().includes(query);
+    }),
+  );
+</script>
+
+<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">
+    <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 class="mb-4">
+        <SearchBar placeholder={$t('search_settings')} bind:name={searchQuery} showLoadingSpinner={false} />
+      </div>
+      <div class="flex flex-col gap-2">
+        {#each filteredSettings as { title, subtitle, href, icon } (href)}
+          <Button variant="outline" color="secondary" class="flex justify-between border-subtle" {href}>
+            <div class="flex flex-col items-start">
+              <Text size="large" fontWeight="semi-bold" color="primary" class="flex items-center gap-2">
+                <Icon {icon} />
+                {title}
+              </Text>
+              <Text>{subtitle}</Text>
+            </div>
+            <Icon icon={mdiPencilOutline} size="1.5rem" />
+          </Button>
+        {/each}
+      </div>
+    </section>
+  </section>
+</AdminPageLayout>
+
+{@render children?.()}

web/src/routes/admin/system-settings/+layout.ts

@@ -1,17 +1,12 @@
 import { authenticate } from '$lib/utils/auth';
 import { getFormatter } from '$lib/utils/i18n';
-import { getConfig, getConfigDefaults } from '@immich/sdk';
 import type { PageLoad } from './$types';
 
 export const load = (async ({ url }) => {
   await authenticate(url, { admin: true });
-  const config = await getConfig();
-  const defaultConfig = await getConfigDefaults();
   const $t = await getFormatter();
 
   return {
-    config,
-    defaultConfig,
     meta: {
       title: $t('admin.system_settings'),
     },

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

@@ -1,237 +0,0 @@
-<script lang="ts">
-  import AuthSettings from '$lib/components/admin-settings/AuthSettings.svelte';
-  import BackupSettings from '$lib/components/admin-settings/BackupSettings.svelte';
-  import FFmpegSettings from '$lib/components/admin-settings/FFmpegSettings.svelte';
-  import ImageSettings from '$lib/components/admin-settings/ImageSettings.svelte';
-  import JobSettings from '$lib/components/admin-settings/JobSettings.svelte';
-  import LibrarySettings from '$lib/components/admin-settings/LibrarySettings.svelte';
-  import LoggingSettings from '$lib/components/admin-settings/LoggingSettings.svelte';
-  import MachineLearningSettings from '$lib/components/admin-settings/MachineLearningSettings.svelte';
-  import MaintenanceSettings from '$lib/components/admin-settings/MaintenanceSettings.svelte';
-  import MapSettings from '$lib/components/admin-settings/MapSettings.svelte';
-  import MetadataSettings from '$lib/components/admin-settings/MetadataSettings.svelte';
-  import NewVersionCheckSettings from '$lib/components/admin-settings/NewVersionCheckSettings.svelte';
-  import NightlyTasksSettings from '$lib/components/admin-settings/NightlyTasksSettings.svelte';
-  import NotificationSettings from '$lib/components/admin-settings/NotificationSettings.svelte';
-  import ServerSettings from '$lib/components/admin-settings/ServerSettings.svelte';
-  import StorageTemplateSettings from '$lib/components/admin-settings/StorageTemplateSettings.svelte';
-  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 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';
-  import { QueryParameter } from '$lib/constants';
-  import SearchBar from '$lib/elements/SearchBar.svelte';
-  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 {
-    mdiAccountOutline,
-    mdiBackupRestore,
-    mdiBellOutline,
-    mdiBookshelf,
-    mdiClockOutline,
-    mdiDatabaseOutline,
-    mdiFileDocumentOutline,
-    mdiFolderOutline,
-    mdiImageOutline,
-    mdiLockOutline,
-    mdiMapMarkerOutline,
-    mdiPaletteOutline,
-    mdiRestore,
-    mdiRobotOutline,
-    mdiServerOutline,
-    mdiSync,
-    mdiTrashCanOutline,
-    mdiUpdate,
-    mdiVideoOutline,
-  } from '@mdi/js';
-  import type { Component } from 'svelte';
-  import { t } from 'svelte-i18n';
-  import type { PageData } from './$types';
-
-  type Props = {
-    data: PageData;
-  };
-
-  const { data }: Props = $props();
-
-  const settings: Array<{
-    component: Component;
-    title: string;
-    subtitle: string;
-    key: string;
-    icon: string;
-  }> = [
-    {
-      component: AuthSettings,
-      title: $t('admin.authentication_settings'),
-      subtitle: $t('admin.authentication_settings_description'),
-      key: 'authentication',
-      icon: mdiLockOutline,
-    },
-    {
-      component: BackupSettings,
-      title: $t('admin.backup_settings'),
-      subtitle: $t('admin.backup_settings_description'),
-      key: 'backup',
-      icon: mdiBackupRestore,
-    },
-    {
-      component: ImageSettings,
-      title: $t('admin.image_settings'),
-      subtitle: $t('admin.image_settings_description'),
-      key: 'image',
-      icon: mdiImageOutline,
-    },
-    {
-      component: JobSettings,
-      title: $t('admin.job_settings'),
-      subtitle: $t('admin.job_settings_description'),
-      key: 'job',
-      icon: mdiSync,
-    },
-    {
-      component: LibrarySettings,
-      title: $t('admin.library_settings'),
-      subtitle: $t('admin.library_settings_description'),
-      key: 'external-library',
-      icon: mdiBookshelf,
-    },
-    {
-      component: LoggingSettings,
-      title: $t('admin.logging_settings'),
-      subtitle: $t('admin.manage_log_settings'),
-      key: 'logging',
-      icon: mdiFileDocumentOutline,
-    },
-    {
-      component: MachineLearningSettings,
-      title: $t('admin.machine_learning_settings'),
-      subtitle: $t('admin.machine_learning_settings_description'),
-      key: 'machine-learning',
-      icon: mdiRobotOutline,
-    },
-    {
-      component: MaintenanceSettings,
-      title: $t('admin.maintenance_settings'),
-      subtitle: $t('admin.maintenance_settings_description'),
-      key: 'maintenance',
-      icon: mdiRestore,
-    },
-    {
-      component: MapSettings,
-      title: $t('admin.map_gps_settings'),
-      subtitle: $t('admin.map_gps_settings_description'),
-      key: 'location',
-      icon: mdiMapMarkerOutline,
-    },
-    {
-      component: MetadataSettings,
-      title: $t('admin.metadata_settings'),
-      subtitle: $t('admin.metadata_settings_description'),
-      key: 'metadata',
-      icon: mdiDatabaseOutline,
-    },
-    {
-      component: NightlyTasksSettings,
-      title: $t('admin.nightly_tasks_settings'),
-      subtitle: $t('admin.nightly_tasks_settings_description'),
-      key: 'nightly-tasks',
-      icon: mdiClockOutline,
-    },
-    {
-      component: NotificationSettings,
-      title: $t('admin.notification_settings'),
-      subtitle: $t('admin.notification_settings_description'),
-      key: 'notifications',
-      icon: mdiBellOutline,
-    },
-    {
-      component: ServerSettings,
-      title: $t('admin.server_settings'),
-      subtitle: $t('admin.server_settings_description'),
-      key: 'server',
-      icon: mdiServerOutline,
-    },
-    {
-      component: StorageTemplateSettings,
-      title: $t('admin.storage_template_settings'),
-      subtitle: $t('admin.storage_template_settings_description'),
-      key: 'storage-template',
-      icon: mdiFolderOutline,
-    },
-    {
-      component: ThemeSettings,
-      title: $t('admin.theme_settings'),
-      subtitle: $t('admin.theme_settings_description'),
-      key: 'theme',
-      icon: mdiPaletteOutline,
-    },
-    {
-      component: TrashSettings,
-      title: $t('admin.trash_settings'),
-      subtitle: $t('admin.trash_settings_description'),
-      key: 'trash',
-      icon: mdiTrashCanOutline,
-    },
-    {
-      component: UserSettings,
-      title: $t('admin.user_settings'),
-      subtitle: $t('admin.user_settings_description'),
-      key: 'user-settings',
-      icon: mdiAccountOutline,
-    },
-    {
-      component: NewVersionCheckSettings,
-      title: $t('admin.version_check_settings'),
-      subtitle: $t('admin.version_check_settings_description'),
-      key: 'version-check',
-      icon: mdiUpdate,
-    },
-    {
-      component: FFmpegSettings,
-      title: $t('admin.transcoding_settings'),
-      subtitle: $t('admin.transcoding_settings_description'),
-      key: 'video-transcoding',
-      icon: mdiVideoOutline,
-    },
-  ];
-
-  let searchQuery = $state('');
-
-  let filteredSettings = $derived(
-    settings.filter(({ title, subtitle }) => {
-      const query = searchQuery.toLowerCase();
-      return title.toLowerCase().includes(query) || subtitle.toLowerCase().includes(query);
-    }),
-  );
-
-  const { CopyToClipboard, Upload, Download } = $derived(
-    getSystemConfigActions($t, featureFlagsManager.value, systemConfigManager.value),
-  );
-</script>
-
-<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">
-    <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>
-        <SearchBar placeholder={$t('search_settings')} bind:name={searchQuery} showLoadingSpinner={false} />
-      </div>
-      <SettingAccordionState queryParam={QueryParameter.IS_OPEN}>
-        {#each filteredSettings as { component: Component, title, subtitle, key, icon } (key)}
-          <SettingAccordion {title} {subtitle} {key} {icon}>
-            <Component />
-          </SettingAccordion>
-        {/each}
-      </SettingAccordionState>
-    </section>
-  </section>
-</AdminPageLayout>

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

@@ -0,0 +1,257 @@
+<script lang="ts">
+  import SettingInputField from '$lib/components/shared-components/settings/setting-input-field.svelte';
+  import SettingSelect from '$lib/components/shared-components/settings/setting-select.svelte';
+  import SettingSwitch from '$lib/components/shared-components/settings/setting-switch.svelte';
+  import SystemSettingsCard from '$lib/components/SystemSettingsCard.svelte';
+  import { SettingInputFieldType } from '$lib/constants';
+  import FormatMessage from '$lib/elements/FormatMessage.svelte';
+  import AuthDisableLoginConfirmModal from '$lib/modals/AuthDisableLoginConfirmModal.svelte';
+  import SystemSettingsModal from '$lib/modals/SystemSettingsModal.svelte';
+  import type { SystemConfigContext } from '$lib/types';
+  import { handleError } from '$lib/utils/handle-error';
+  import { OAuthTokenEndpointAuthMethod, unlinkAllOAuthAccountsAdmin, type SystemConfigDto } from '@immich/sdk';
+  import { Button, modalManager, Text, toastManager } from '@immich/ui';
+  import { mdiRestart } from '@mdi/js';
+  import { t } from 'svelte-i18n';
+
+  const handleToggleOverride = (configToEdit: SystemConfigDto) => {
+    // click runs before bind
+    const previouslyEnabled = configToEdit.oauth.mobileOverrideEnabled;
+    if (!previouslyEnabled && !configToEdit.oauth.mobileRedirectUri) {
+      configToEdit.oauth.mobileRedirectUri = globalThis.location.origin + '/api/oauth/mobile-redirect';
+    }
+  };
+
+  const onBeforeSave = async ({ configToEdit }: SystemConfigContext) => {
+    const allMethodsDisabled = !configToEdit.oauth.enabled && !configToEdit.passwordLogin.enabled;
+    if (allMethodsDisabled) {
+      const isConfirmed = await modalManager.show(AuthDisableLoginConfirmModal);
+      if (!isConfirmed) {
+        return false;
+      }
+    }
+
+    return true;
+  };
+
+  const handleUnlinkAllOAuthAccounts = async () => {
+    const confirmed = await modalManager.showDialog({
+      icon: mdiRestart,
+      title: $t('admin.unlink_all_oauth_accounts'),
+      prompt: $t('admin.unlink_all_oauth_accounts_prompt'),
+      confirmColor: 'danger',
+    });
+
+    if (!confirmed) {
+      return;
+    }
+
+    try {
+      await unlinkAllOAuthAccountsAdmin();
+      toastManager.success();
+    } catch (error) {
+      handleError(error, $t('errors.something_went_wrong'));
+    }
+  };
+</script>
+
+<SystemSettingsModal keys={['passwordLogin', 'oauth']} size="large" {onBeforeSave}>
+  {#snippet child({ disabled, config, configToEdit })}
+    <SystemSettingsCard title={$t('admin.password_settings')} subtitle={$t('admin.password_settings_description')}>
+      <SettingSwitch
+        title={$t('admin.password_enable_description')}
+        {disabled}
+        bind:checked={configToEdit.passwordLogin.enabled}
+      />
+    </SystemSettingsCard>
+
+    <SystemSettingsCard title={$t('admin.oauth_settings')} subtitle={$t('admin.oauth_settings_description')}>
+      <Text size="small">
+        <FormatMessage key="admin.oauth_settings_more_details">
+          {#snippet children({ message })}
+            <a href="https://docs.immich.app/administration/oauth" class="underline" target="_blank" rel="noreferrer">
+              {message}
+            </a>
+          {/snippet}
+        </FormatMessage>
+      </Text>
+
+      <SettingSwitch
+        {disabled}
+        title={$t('admin.oauth_enable_description')}
+        bind:checked={configToEdit.oauth.enabled}
+      />
+
+      <div class="flex flex-col gap-2">
+        <Text size="small">{$t('admin.unlink_all_oauth_accounts_description')}</Text>
+        <div>
+          <Button size="small" color="secondary" onclick={handleUnlinkAllOAuthAccounts}
+            >{$t('admin.unlink_all_oauth_accounts')}</Button
+          >
+        </div>
+      </div>
+
+      <SettingInputField
+        inputType={SettingInputFieldType.TEXT}
+        label="ISSUER_URL"
+        bind:value={configToEdit.oauth.issuerUrl}
+        required={true}
+        disabled={disabled || !configToEdit.oauth.enabled}
+        isEdited={!(configToEdit.oauth.issuerUrl === config.oauth.issuerUrl)}
+      />
+
+      <SettingInputField
+        inputType={SettingInputFieldType.TEXT}
+        label="CLIENT_ID"
+        bind:value={configToEdit.oauth.clientId}
+        required={true}
+        disabled={disabled || !configToEdit.oauth.enabled}
+        isEdited={!(configToEdit.oauth.clientId === config.oauth.clientId)}
+      />
+
+      <SettingInputField
+        inputType={SettingInputFieldType.TEXT}
+        label="CLIENT_SECRET"
+        description={$t('admin.oauth_client_secret_description')}
+        bind:value={configToEdit.oauth.clientSecret}
+        disabled={disabled || !configToEdit.oauth.enabled}
+        isEdited={!(configToEdit.oauth.clientSecret === config.oauth.clientSecret)}
+      />
+
+      {#if configToEdit.oauth.clientSecret}
+        <SettingSelect
+          label="TOKEN_ENDPOINT_AUTH_METHOD"
+          bind:value={configToEdit.oauth.tokenEndpointAuthMethod}
+          disabled={disabled || !configToEdit.oauth.enabled || !configToEdit.oauth.clientSecret}
+          isEdited={!(configToEdit.oauth.tokenEndpointAuthMethod === config.oauth.tokenEndpointAuthMethod)}
+          options={[
+            { value: OAuthTokenEndpointAuthMethod.ClientSecretPost, text: 'client_secret_post' },
+            { value: OAuthTokenEndpointAuthMethod.ClientSecretBasic, text: 'client_secret_basic' },
+          ]}
+          name="tokenEndpointAuthMethod"
+        />
+      {/if}
+
+      <SettingInputField
+        inputType={SettingInputFieldType.TEXT}
+        label="SCOPE"
+        bind:value={configToEdit.oauth.scope}
+        required={true}
+        disabled={disabled || !configToEdit.oauth.enabled}
+        isEdited={!(configToEdit.oauth.scope === config.oauth.scope)}
+      />
+
+      <SettingInputField
+        inputType={SettingInputFieldType.TEXT}
+        label="ID_TOKEN_SIGNED_RESPONSE_ALG"
+        bind:value={configToEdit.oauth.signingAlgorithm}
+        required={true}
+        disabled={disabled || !configToEdit.oauth.enabled}
+        isEdited={!(configToEdit.oauth.signingAlgorithm === config.oauth.signingAlgorithm)}
+      />
+
+      <SettingInputField
+        inputType={SettingInputFieldType.TEXT}
+        label="USERINFO_SIGNED_RESPONSE_ALG"
+        bind:value={configToEdit.oauth.profileSigningAlgorithm}
+        required={true}
+        disabled={disabled || !configToEdit.oauth.enabled}
+        isEdited={!(configToEdit.oauth.profileSigningAlgorithm === config.oauth.profileSigningAlgorithm)}
+      />
+
+      <SettingInputField
+        inputType={SettingInputFieldType.NUMBER}
+        label={$t('admin.oauth_timeout')}
+        description={$t('admin.oauth_timeout_description')}
+        required={true}
+        bind:value={configToEdit.oauth.timeout}
+        disabled={disabled || !configToEdit.oauth.enabled}
+        isEdited={!(configToEdit.oauth.timeout === config.oauth.timeout)}
+      />
+
+      <SettingInputField
+        inputType={SettingInputFieldType.TEXT}
+        label={$t('admin.oauth_storage_label_claim')}
+        description={$t('admin.oauth_storage_label_claim_description')}
+        bind:value={configToEdit.oauth.storageLabelClaim}
+        required={true}
+        disabled={disabled || !configToEdit.oauth.enabled}
+        isEdited={!(configToEdit.oauth.storageLabelClaim === config.oauth.storageLabelClaim)}
+      />
+
+      <SettingInputField
+        inputType={SettingInputFieldType.TEXT}
+        label={$t('admin.oauth_role_claim')}
+        description={$t('admin.oauth_role_claim_description')}
+        bind:value={configToEdit.oauth.roleClaim}
+        required={true}
+        disabled={disabled || !configToEdit.oauth.enabled}
+        isEdited={!(configToEdit.oauth.roleClaim === config.oauth.roleClaim)}
+      />
+
+      <SettingInputField
+        inputType={SettingInputFieldType.TEXT}
+        label={$t('admin.oauth_storage_quota_claim')}
+        description={$t('admin.oauth_storage_quota_claim_description')}
+        bind:value={configToEdit.oauth.storageQuotaClaim}
+        required={true}
+        disabled={disabled || !configToEdit.oauth.enabled}
+        isEdited={!(configToEdit.oauth.storageQuotaClaim === config.oauth.storageQuotaClaim)}
+      />
+
+      <SettingInputField
+        inputType={SettingInputFieldType.NUMBER}
+        label={$t('admin.oauth_storage_quota_default')}
+        description={$t('admin.oauth_storage_quota_default_description')}
+        bind:value={configToEdit.oauth.defaultStorageQuota}
+        required={false}
+        disabled={disabled || !configToEdit.oauth.enabled}
+        isEdited={!(configToEdit.oauth.defaultStorageQuota === config.oauth.defaultStorageQuota)}
+      />
+
+      <SettingInputField
+        inputType={SettingInputFieldType.TEXT}
+        label={$t('admin.oauth_button_text')}
+        bind:value={configToEdit.oauth.buttonText}
+        required={false}
+        disabled={disabled || !configToEdit.oauth.enabled}
+        isEdited={!(configToEdit.oauth.buttonText === config.oauth.buttonText)}
+      />
+
+      <SettingSwitch
+        title={$t('admin.oauth_auto_register')}
+        subtitle={$t('admin.oauth_auto_register_description')}
+        bind:checked={configToEdit.oauth.autoRegister}
+        disabled={disabled || !configToEdit.oauth.enabled}
+      />
+
+      <SettingSwitch
+        title={$t('admin.oauth_auto_launch')}
+        subtitle={$t('admin.oauth_auto_launch_description')}
+        disabled={disabled || !configToEdit.oauth.enabled}
+        bind:checked={configToEdit.oauth.autoLaunch}
+      />
+
+      <SettingSwitch
+        title={$t('admin.oauth_mobile_redirect_uri_override')}
+        subtitle={$t('admin.oauth_mobile_redirect_uri_override_description', {
+          values: { callback: 'app.immich:///oauth-callback' },
+        })}
+        disabled={disabled || !configToEdit.oauth.enabled}
+        onToggle={() => handleToggleOverride(configToEdit)}
+        bind:checked={configToEdit.oauth.mobileOverrideEnabled}
+      />
+
+      {#if configToEdit.oauth.mobileOverrideEnabled}
+        <SettingInputField
+          inputType={SettingInputFieldType.TEXT}
+          label={$t('admin.oauth_mobile_redirect_uri')}
+          bind:value={configToEdit.oauth.mobileRedirectUri}
+          required={true}
+          disabled={disabled || !configToEdit.oauth.enabled}
+          isEdited={!(configToEdit.oauth.mobileRedirectUri === config.oauth.mobileRedirectUri)}
+        />
+      {/if}
+    </SystemSettingsCard>
+  {/snippet}
+</SystemSettingsModal>

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

@@ -0,0 +1,70 @@
+<script lang="ts">
+  import SettingInputField from '$lib/components/shared-components/settings/setting-input-field.svelte';
+  import SettingSelect from '$lib/components/shared-components/settings/setting-select.svelte';
+  import SettingSwitch from '$lib/components/shared-components/settings/setting-switch.svelte';
+  import { SettingInputFieldType } from '$lib/constants';
+  import FormatMessage from '$lib/elements/FormatMessage.svelte';
+  import SystemSettingsModal from '$lib/modals/SystemSettingsModal.svelte';
+  import { t } from 'svelte-i18n';
+
+  let cronExpressionOptions = $derived([
+    { text: $t('interval.night_at_midnight'), value: '0 0 * * *' },
+    { text: $t('interval.night_at_twoam'), value: '0 02 * * *' },
+    { text: $t('interval.day_at_onepm'), value: '0 13 * * *' },
+    { text: $t('interval.hours', { values: { hours: 6 } }), value: '0 */6 * * *' },
+  ]);
+</script>
+
+<SystemSettingsModal keys={['backup']}>
+  {#snippet child({ disabled, config, configToEdit })}
+    <SettingSwitch
+      title={$t('admin.backup_database_enable_description')}
+      {disabled}
+      bind:checked={configToEdit.backup.database.enabled}
+    />
+
+    <SettingSelect
+      options={cronExpressionOptions}
+      disabled={disabled || !configToEdit.backup.database.enabled}
+      name="expression"
+      label={$t('admin.cron_expression_presets')}
+      bind:value={configToEdit.backup.database.cronExpression}
+    />
+
+    <SettingInputField
+      inputType={SettingInputFieldType.TEXT}
+      required={true}
+      disabled={disabled || !configToEdit.backup.database.enabled}
+      label={$t('admin.cron_expression')}
+      bind:value={configToEdit.backup.database.cronExpression}
+      isEdited={configToEdit.backup.database.cronExpression !== config.backup.database.cronExpression}
+    >
+      {#snippet descriptionSnippet()}
+        <p class="text-sm dark:text-immich-dark-fg">
+          <FormatMessage key="admin.cron_expression_description">
+            {#snippet children({ message })}
+              <a
+                href="https://crontab.guru/#{configToEdit.backup.database.cronExpression.replaceAll(' ', '_')}"
+                class="underline"
+                target="_blank"
+                rel="noreferrer"
+              >
+                {message}
+                <br />
+              </a>
+            {/snippet}
+          </FormatMessage>
+        </p>
+      {/snippet}
+    </SettingInputField>
+
+    <SettingInputField
+      inputType={SettingInputFieldType.NUMBER}
+      required={true}
+      label={$t('admin.backup_keep_last_amount')}
+      disabled={disabled || !configToEdit.backup.database.enabled}
+      bind:value={configToEdit.backup.database.keepLastAmount}
+      isEdited={configToEdit.backup.database.keepLastAmount !== config.backup.database.keepLastAmount}
+    />
+  {/snippet}
+</SystemSettingsModal>

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

@@ -0,0 +1,146 @@
+<script lang="ts">
+  import SettingInputField from '$lib/components/shared-components/settings/setting-input-field.svelte';
+  import SettingSelect from '$lib/components/shared-components/settings/setting-select.svelte';
+  import SettingSwitch from '$lib/components/shared-components/settings/setting-switch.svelte';
+  import SystemSettingsCard from '$lib/components/SystemSettingsCard.svelte';
+  import { SettingInputFieldType } from '$lib/constants';
+  import SystemSettingsModal from '$lib/modals/SystemSettingsModal.svelte';
+  import { Colorspace, ImageFormat } from '@immich/sdk';
+  import { t } from 'svelte-i18n';
+</script>
+
+<SystemSettingsModal keys={['image']}>
+  {#snippet child({ disabled, config, configToEdit })}
+    <SystemSettingsCard title={$t('admin.image_thumbnail_title')} subtitle={$t('admin.image_thumbnail_description')}>
+      <SettingSelect
+        label={$t('admin.image_format')}
+        desc={$t('admin.image_format_description')}
+        bind:value={configToEdit.image.thumbnail.format}
+        options={[
+          { value: ImageFormat.Jpeg, text: 'JPEG' },
+          { value: ImageFormat.Webp, text: 'WebP' },
+        ]}
+        name="format"
+        isEdited={configToEdit.image.thumbnail.format !== config.image.thumbnail.format}
+        {disabled}
+      />
+
+      <SettingSelect
+        label={$t('admin.image_resolution')}
+        desc={$t('admin.image_resolution_description')}
+        number
+        bind:value={configToEdit.image.thumbnail.size}
+        options={[
+          { value: 1080, text: '1080p' },
+          { value: 720, text: '720p' },
+          { value: 480, text: '480p' },
+          { value: 250, text: '250p' },
+          { value: 200, text: '200p' },
+        ]}
+        name="resolution"
+        isEdited={configToEdit.image.thumbnail.size !== config.image.thumbnail.size}
+        {disabled}
+      />
+
+      <SettingInputField
+        inputType={SettingInputFieldType.NUMBER}
+        label={$t('admin.image_quality')}
+        description={$t('admin.image_thumbnail_quality_description')}
+        bind:value={configToEdit.image.thumbnail.quality}
+        isEdited={configToEdit.image.thumbnail.quality !== config.image.thumbnail.quality}
+        {disabled}
+      />
+    </SystemSettingsCard>
+
+    <SystemSettingsCard title={$t('admin.image_preview_title')} subtitle={$t('admin.image_preview_description')}>
+      <SettingSelect
+        label={$t('admin.image_format')}
+        desc={$t('admin.image_format_description')}
+        bind:value={configToEdit.image.preview.format}
+        options={[
+          { value: ImageFormat.Jpeg, text: 'JPEG' },
+          { value: ImageFormat.Webp, text: 'WebP' },
+        ]}
+        name="format"
+        isEdited={configToEdit.image.preview.format !== config.image.preview.format}
+        {disabled}
+      />
+
+      <SettingSelect
+        label={$t('admin.image_resolution')}
+        desc={$t('admin.image_resolution_description')}
+        number
+        bind:value={configToEdit.image.preview.size}
+        options={[
+          { value: 2160, text: '4K' },
+          { value: 1440, text: '1440p' },
+          { value: 1080, text: '1080p' },
+          { value: 720, text: '720p' },
+        ]}
+        name="resolution"
+        isEdited={configToEdit.image.preview.size !== config.image.preview.size}
+        {disabled}
+      />
+
+      <SettingInputField
+        inputType={SettingInputFieldType.NUMBER}
+        label={$t('admin.image_quality')}
+        description={$t('admin.image_preview_quality_description')}
+        bind:value={configToEdit.image.preview.quality}
+        isEdited={configToEdit.image.preview.quality !== config.image.preview.quality}
+        {disabled}
+      />
+    </SystemSettingsCard>
+
+    <SystemSettingsCard title={$t('admin.image_fullsize_title')} subtitle={$t('admin.image_fullsize_description')}>
+      <SettingSwitch
+        title={$t('admin.image_fullsize_enabled')}
+        subtitle={$t('admin.image_fullsize_enabled_description')}
+        checked={configToEdit.image.fullsize.enabled}
+        onToggle={(isChecked) => (configToEdit.image.fullsize.enabled = isChecked)}
+        isEdited={configToEdit.image.fullsize.enabled !== config.image.fullsize.enabled}
+        {disabled}
+      />
+
+      <SettingSelect
+        label={$t('admin.image_format')}
+        desc={$t('admin.image_format_description')}
+        bind:value={configToEdit.image.fullsize.format}
+        options={[
+          { value: ImageFormat.Jpeg, text: 'JPEG' },
+          { value: ImageFormat.Webp, text: 'WebP' },
+        ]}
+        name="format"
+        isEdited={configToEdit.image.fullsize.format !== config.image.fullsize.format}
+        disabled={disabled || !configToEdit.image.fullsize.enabled}
+      />
+
+      <SettingInputField
+        inputType={SettingInputFieldType.NUMBER}
+        label={$t('admin.image_quality')}
+        description={$t('admin.image_fullsize_quality_description')}
+        bind:value={configToEdit.image.fullsize.quality}
+        isEdited={configToEdit.image.fullsize.quality !== config.image.fullsize.quality}
+        disabled={disabled || !configToEdit.image.fullsize.enabled}
+      />
+    </SystemSettingsCard>
+
+    <SettingSwitch
+      title={$t('admin.image_prefer_wide_gamut')}
+      subtitle={$t('admin.image_prefer_wide_gamut_setting_description')}
+      checked={configToEdit.image.colorspace === Colorspace.P3}
+      onToggle={(isChecked) => (configToEdit.image.colorspace = isChecked ? Colorspace.P3 : Colorspace.Srgb)}
+      isEdited={configToEdit.image.colorspace !== config.image.colorspace}
+      {disabled}
+    />
+
+    <SettingSwitch
+      title={$t('admin.image_prefer_embedded_preview')}
+      subtitle={$t('admin.image_prefer_embedded_preview_setting_description')}
+      checked={configToEdit.image.extractEmbedded}
+      onToggle={() => (configToEdit.image.extractEmbedded = !configToEdit.image.extractEmbedded)}
+      isEdited={configToEdit.image.extractEmbedded !== config.image.extractEmbedded}
+      {disabled}
+    />
+  {/snippet}
+</SystemSettingsModal>

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

@@ -0,0 +1,58 @@
+<script lang="ts">
+  import SettingInputField from '$lib/components/shared-components/settings/setting-input-field.svelte';
+  import { SettingInputFieldType } from '$lib/constants';
+  import SystemSettingsModal from '$lib/modals/SystemSettingsModal.svelte';
+  import { getQueueName } from '$lib/utils';
+  import { QueueName, type SystemConfigDto, type SystemConfigJobDto } from '@immich/sdk';
+  import { t } from 'svelte-i18n';
+
+  const queueNames = [
+    QueueName.ThumbnailGeneration,
+    QueueName.MetadataExtraction,
+    QueueName.Library,
+    QueueName.Sidecar,
+    QueueName.SmartSearch,
+    QueueName.FaceDetection,
+    QueueName.FacialRecognition,
+    QueueName.VideoConversion,
+    QueueName.StorageTemplateMigration,
+    QueueName.Migration,
+    QueueName.Ocr,
+  ];
+
+  const isSystemConfigJobDto = (
+    configToEdit: SystemConfigDto,
+    jobName: string,
+  ): jobName is keyof SystemConfigJobDto => {
+    return jobName in configToEdit.job;
+  };
+</script>
+
+<SystemSettingsModal keys={['user']}>
+  {#snippet child({ disabled, config, configToEdit })}
+    {#each queueNames as queueName (queueName)}
+      <div class="ms-4 mt-4 flex flex-col gap-4">
+        {#if isSystemConfigJobDto(configToEdit, queueName)}
+          <SettingInputField
+            inputType={SettingInputFieldType.NUMBER}
+            {disabled}
+            label={$t('admin.job_concurrency', { values: { job: $getQueueName(queueName) } })}
+            description=""
+            bind:value={configToEdit.job[queueName].concurrency}
+            required={true}
+            isEdited={!(configToEdit.job[queueName].concurrency == config.job[queueName].concurrency)}
+          />
+        {:else}
+          <SettingInputField
+            inputType={SettingInputFieldType.NUMBER}
+            label={$t('admin.job_concurrency', { values: { job: $getQueueName(queueName) } })}
+            description=""
+            value={1}
+            disabled={true}
+            title={$t('admin.job_not_concurrency_safe')}
+          />
+        {/if}
+      </div>
+    {/each}
+  {/snippet}
+</SystemSettingsModal>

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

@@ -0,0 +1,20 @@
+<script lang="ts">
+  import SettingInputField from '$lib/components/shared-components/settings/setting-input-field.svelte';
+  import { SettingInputFieldType } from '$lib/constants';
+  import SystemSettingsModal from '$lib/modals/SystemSettingsModal.svelte';
+  import { t } from 'svelte-i18n';
+</script>
+
+<SystemSettingsModal keys={['user']}>
+  {#snippet child({ disabled, config, configToEdit })}
+    <SettingInputField
+      inputType={SettingInputFieldType.NUMBER}
+      min={1}
+      label={$t('admin.user_delete_delay_settings')}
+      description={$t('admin.user_delete_delay_settings_description')}
+      bind:value={configToEdit.user.deleteDelay}
+      {disabled}
+      isEdited={configToEdit.user.deleteDelay !== config.user.deleteDelay}
+    />
+  {/snippet}
+</SystemSettingsModal>

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

@@ -0,0 +1,58 @@
+<script lang="ts">
+  import SettingInputField from '$lib/components/shared-components/settings/setting-input-field.svelte';
+  import SettingSwitch from '$lib/components/shared-components/settings/setting-switch.svelte';
+  import SystemSettingsCard from '$lib/components/SystemSettingsCard.svelte';
+  import { SettingInputFieldType } from '$lib/constants';
+  import FormatMessage from '$lib/elements/FormatMessage.svelte';
+  import SystemSettingsModal from '$lib/modals/SystemSettingsModal.svelte';
+  import { t } from 'svelte-i18n';
+</script>
+
+<SystemSettingsModal keys={['map', 'reverseGeocoding']}>
+  {#snippet child({ disabled, config, configToEdit })}
+    <div class="flex flex-col gap-4">
+      <SystemSettingsCard title={$t('admin.map_settings')} subtitle={$t('admin.map_settings_description')}>
+        <SettingSwitch title={$t('admin.map_enable_description')} {disabled} bind:checked={configToEdit.map.enabled} />
+        <SettingInputField
+          inputType={SettingInputFieldType.TEXT}
+          label={$t('admin.map_light_style')}
+          description={$t('admin.map_style_description')}
+          bind:value={configToEdit.map.lightStyle}
+          disabled={disabled || !configToEdit.map.enabled}
+          isEdited={configToEdit.map.lightStyle !== config.map.lightStyle}
+        />
+        <SettingInputField
+          inputType={SettingInputFieldType.TEXT}
+          label={$t('admin.map_dark_style')}
+          description={$t('admin.map_style_description')}
+          bind:value={configToEdit.map.darkStyle}
+          disabled={disabled || !configToEdit.map.enabled}
+          isEdited={configToEdit.map.darkStyle !== config.map.darkStyle}
+        />
+      </SystemSettingsCard>
+
+      <SystemSettingsCard title={$t('admin.map_reverse_geocoding_settings')}>
+        {#snippet subtitle()}
+          <FormatMessage key="admin.map_manage_reverse_geocoding_settings">
+            {#snippet children({ message })}
+              <a
+                href="https://docs.immich.app/features/reverse-geocoding"
+                class="underline"
+                target="_blank"
+                rel="noreferrer"
+              >
+                {message}
+              </a>
+            {/snippet}
+          </FormatMessage>
+        {/snippet}
+        <SettingSwitch
+          title={$t('admin.map_reverse_geocoding_enable_description')}
+          {subtitle}
+          {disabled}
+          bind:checked={configToEdit.reverseGeocoding.enabled}
+        />
+      </SystemSettingsCard>
+    </div>
+  {/snippet}
+</SystemSettingsModal>

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

@@ -0,0 +1,33 @@
+<script lang="ts">
+  import SettingSelect from '$lib/components/shared-components/settings/setting-select.svelte';
+  import SettingSwitch from '$lib/components/shared-components/settings/setting-switch.svelte';
+  import SystemSettingsModal from '$lib/modals/SystemSettingsModal.svelte';
+  import { LogLevel } from '@immich/sdk';
+  import { t } from 'svelte-i18n';
+</script>
+
+<SystemSettingsModal keys={['logging']}>
+  {#snippet child({ disabled, config, configToEdit })}
+    <SettingSwitch
+      title={$t('admin.logging_enable_description')}
+      {disabled}
+      bind:checked={configToEdit.logging.enabled}
+    />
+    <SettingSelect
+      label={$t('level')}
+      desc={$t('admin.logging_level_description')}
+      bind:value={configToEdit.logging.level}
+      options={[
+        { value: LogLevel.Fatal, text: 'Fatal' },
+        { value: LogLevel.Error, text: 'Error' },
+        { value: LogLevel.Warn, text: 'Warn' },
+        { value: LogLevel.Log, text: 'Log' },
+        { value: LogLevel.Debug, text: 'Debug' },
+        { value: LogLevel.Verbose, text: 'Verbose' },
+      ]}
+      name="level"
+      isEdited={configToEdit.logging.level !== config.logging.level}
+      disabled={disabled || !configToEdit.logging.enabled}
+    />
+  {/snippet}
+</SystemSettingsModal>

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

@@ -0,0 +1,294 @@
+<script lang="ts">
+  import SystemSettingsCard from '$lib/components/SystemSettingsCard.svelte';
+  import SettingInputField from '$lib/components/shared-components/settings/setting-input-field.svelte';
+  import SettingSelect from '$lib/components/shared-components/settings/setting-select.svelte';
+  import SettingSwitch from '$lib/components/shared-components/settings/setting-switch.svelte';
+  import { SettingInputFieldType } from '$lib/constants';
+  import FormatMessage from '$lib/elements/FormatMessage.svelte';
+  import { featureFlagsManager } from '$lib/managers/feature-flags-manager.svelte';
+  import SystemSettingsModal from '$lib/modals/SystemSettingsModal.svelte';
+  import { Button, IconButton } from '@immich/ui';
+  import { mdiPlus, mdiTrashCanOutline } from '@mdi/js';
+  import { isEqual } from 'lodash-es';
+  import { t } from 'svelte-i18n';
+</script>
+
+<SystemSettingsModal keys={['machineLearning']} size="large">
+  {#snippet child({ disabled, config, configToEdit })}
+    <div class="flex flex-col gap-4">
+      <SettingSwitch
+        title={$t('admin.machine_learning_enabled')}
+        subtitle={$t('admin.machine_learning_enabled_description')}
+        {disabled}
+        bind:checked={configToEdit.machineLearning.enabled}
+      />
+
+      <div>
+        {#each configToEdit.machineLearning.urls as _, i (i)}
+          <SettingInputField
+            inputType={SettingInputFieldType.TEXT}
+            label={i === 0 ? $t('url') : undefined}
+            description={i === 0 ? $t('admin.machine_learning_url_description') : undefined}
+            bind:value={configToEdit.machineLearning.urls[i]}
+            required={i === 0}
+            disabled={disabled || !configToEdit.machineLearning.enabled}
+            isEdited={i === 0 && !isEqual(configToEdit.machineLearning.urls, config.machineLearning.urls)}
+          >
+            {#snippet trailingSnippet()}
+              {#if configToEdit.machineLearning.urls.length > 1}
+                <IconButton
+                  aria-label=""
+                  onclick={() => configToEdit.machineLearning.urls.splice(i, 1)}
+                  icon={mdiTrashCanOutline}
+                  color="danger"
+                />
+              {/if}
+            {/snippet}
+          </SettingInputField>
+        {/each}
+      </div>
+
+      <div class="flex justify-end">
+        <Button
+          class="mb-2"
+          size="small"
+          shape="round"
+          leadingIcon={mdiPlus}
+          onclick={() => configToEdit.machineLearning.urls.push('')}
+          disabled={disabled || !configToEdit.machineLearning.enabled}>{$t('add_url')}</Button
+        >
+      </div>
+
+      <SystemSettingsCard
+        title={$t('admin.machine_learning_availability_checks')}
+        subtitle={$t('admin.machine_learning_availability_checks_description')}
+      >
+        <SettingSwitch
+          title={$t('admin.machine_learning_availability_checks_enabled')}
+          bind:checked={configToEdit.machineLearning.availabilityChecks.enabled}
+          disabled={disabled || !configToEdit.machineLearning.enabled}
+        />
+
+        <SettingInputField
+          inputType={SettingInputFieldType.NUMBER}
+          label={$t('admin.machine_learning_availability_checks_interval')}
+          bind:value={configToEdit.machineLearning.availabilityChecks.interval}
+          description={$t('admin.machine_learning_availability_checks_interval_description')}
+          disabled={disabled ||
+            !configToEdit.machineLearning.enabled ||
+            !configToEdit.machineLearning.availabilityChecks.enabled}
+          isEdited={configToEdit.machineLearning.availabilityChecks.interval !==
+            config.machineLearning.availabilityChecks.interval}
+        />
+
+        <SettingInputField
+          inputType={SettingInputFieldType.NUMBER}
+          label={$t('admin.machine_learning_availability_checks_timeout')}
+          bind:value={configToEdit.machineLearning.availabilityChecks.timeout}
+          description={$t('admin.machine_learning_availability_checks_timeout_description')}
+          disabled={disabled ||
+            !configToEdit.machineLearning.enabled ||
+            !configToEdit.machineLearning.availabilityChecks.enabled}
+          isEdited={configToEdit.machineLearning.availabilityChecks.timeout !==
+            config.machineLearning.availabilityChecks.timeout}
+        />
+      </SystemSettingsCard>
+
+      <SystemSettingsCard
+        title={$t('admin.machine_learning_smart_search')}
+        subtitle={$t('admin.machine_learning_smart_search_description')}
+      >
+        <SettingSwitch
+          title={$t('admin.machine_learning_smart_search_enabled')}
+          subtitle={$t('admin.machine_learning_smart_search_enabled_description')}
+          bind:checked={configToEdit.machineLearning.clip.enabled}
+          disabled={disabled || !configToEdit.machineLearning.enabled}
+        />
+
+        <SettingInputField
+          inputType={SettingInputFieldType.TEXT}
+          label={$t('admin.machine_learning_clip_model')}
+          bind:value={configToEdit.machineLearning.clip.modelName}
+          required={true}
+          disabled={disabled || !configToEdit.machineLearning.enabled || !configToEdit.machineLearning.clip.enabled}
+          isEdited={configToEdit.machineLearning.clip.modelName !== config.machineLearning.clip.modelName}
+        >
+          {#snippet descriptionSnippet()}
+            <p class="immich-form-label pb-2 text-sm">
+              <FormatMessage key="admin.machine_learning_clip_model_description">
+                {#snippet children({ message })}
+                  <a target="_blank" href="https://huggingface.co/immich-app"><u>{message}</u></a>
+                {/snippet}
+              </FormatMessage>
+            </p>
+          {/snippet}
+        </SettingInputField>
+      </SystemSettingsCard>
+
+      <SystemSettingsCard
+        title={$t('admin.machine_learning_duplicate_detection')}
+        subtitle={$t('admin.machine_learning_duplicate_detection_setting_description')}
+      >
+        <SettingSwitch
+          title={$t('admin.machine_learning_duplicate_detection_enabled')}
+          subtitle={$t('admin.machine_learning_duplicate_detection_enabled_description')}
+          bind:checked={configToEdit.machineLearning.duplicateDetection.enabled}
+          disabled={disabled || !configToEdit.machineLearning.enabled || !configToEdit.machineLearning.clip.enabled}
+        />
+
+        <SettingInputField
+          inputType={SettingInputFieldType.NUMBER}
+          label={$t('admin.machine_learning_max_detection_distance')}
+          bind:value={configToEdit.machineLearning.duplicateDetection.maxDistance}
+          step="0.0005"
+          min={0.001}
+          max={0.1}
+          description={$t('admin.machine_learning_max_detection_distance_description')}
+          disabled={disabled || !featureFlagsManager.value.duplicateDetection}
+          isEdited={configToEdit.machineLearning.duplicateDetection.maxDistance !==
+            config.machineLearning.duplicateDetection.maxDistance}
+        />
+      </SystemSettingsCard>
+
+      <SystemSettingsCard
+        title={$t('admin.machine_learning_facial_recognition')}
+        subtitle={$t('admin.machine_learning_facial_recognition_description')}
+      >
+        <SettingSwitch
+          title={$t('admin.machine_learning_facial_recognition_setting')}
+          subtitle={$t('admin.machine_learning_facial_recognition_setting_description')}
+          bind:checked={configToEdit.machineLearning.facialRecognition.enabled}
+          disabled={disabled || !configToEdit.machineLearning.enabled}
+        />
+
+        <SettingSelect
+          label={$t('admin.machine_learning_facial_recognition_model')}
+          desc={$t('admin.machine_learning_facial_recognition_model_description')}
+          name="facial-recognition-model"
+          bind:value={configToEdit.machineLearning.facialRecognition.modelName}
+          options={[
+            { value: 'antelopev2', text: 'antelopev2' },
+            { value: 'buffalo_l', text: 'buffalo_l' },
+            { value: 'buffalo_m', text: 'buffalo_m' },
+            { value: 'buffalo_s', text: 'buffalo_s' },
+          ]}
+          disabled={disabled ||
+            !configToEdit.machineLearning.enabled ||
+            !configToEdit.machineLearning.facialRecognition.enabled}
+          isEdited={configToEdit.machineLearning.facialRecognition.modelName !==
+            config.machineLearning.facialRecognition.modelName}
+        />
+
+        <SettingInputField
+          inputType={SettingInputFieldType.NUMBER}
+          label={$t('admin.machine_learning_min_detection_score')}
+          description={$t('admin.machine_learning_min_detection_score_description')}
+          bind:value={configToEdit.machineLearning.facialRecognition.minScore}
+          step="0.01"
+          min={0.1}
+          max={1}
+          disabled={disabled ||
+            !configToEdit.machineLearning.enabled ||
+            !configToEdit.machineLearning.facialRecognition.enabled}
+          isEdited={configToEdit.machineLearning.facialRecognition.minScore !==
+            config.machineLearning.facialRecognition.minScore}
+        />
+
+        <SettingInputField
+          inputType={SettingInputFieldType.NUMBER}
+          label={$t('admin.machine_learning_max_recognition_distance')}
+          description={$t('admin.machine_learning_max_recognition_distance_description')}
+          bind:value={configToEdit.machineLearning.facialRecognition.maxDistance}
+          step="0.01"
+          min={0.1}
+          max={2}
+          disabled={disabled ||
+            !configToEdit.machineLearning.enabled ||
+            !configToEdit.machineLearning.facialRecognition.enabled}
+          isEdited={configToEdit.machineLearning.facialRecognition.maxDistance !==
+            config.machineLearning.facialRecognition.maxDistance}
+        />
+
+        <SettingInputField
+          inputType={SettingInputFieldType.NUMBER}
+          label={$t('admin.machine_learning_min_recognized_faces')}
+          description={$t('admin.machine_learning_min_recognized_faces_description')}
+          bind:value={configToEdit.machineLearning.facialRecognition.minFaces}
+          step="1"
+          min={1}
+          disabled={disabled ||
+            !configToEdit.machineLearning.enabled ||
+            !configToEdit.machineLearning.facialRecognition.enabled}
+          isEdited={configToEdit.machineLearning.facialRecognition.minFaces !==
+            config.machineLearning.facialRecognition.minFaces}
+        />
+      </SystemSettingsCard>
+
+      <SystemSettingsCard
+        title={$t('admin.machine_learning_ocr')}
+        subtitle={$t('admin.machine_learning_ocr_description')}
+      >
+        <SettingSwitch
+          title={$t('admin.machine_learning_ocr_enabled')}
+          subtitle={$t('admin.machine_learning_ocr_enabled_description')}
+          bind:checked={configToEdit.machineLearning.ocr.enabled}
+          disabled={disabled || !configToEdit.machineLearning.enabled}
+        />
+
+        <SettingSelect
+          label={$t('admin.machine_learning_ocr_model')}
+          desc={$t('admin.machine_learning_ocr_model_description')}
+          name="ocr-model"
+          bind:value={configToEdit.machineLearning.ocr.modelName}
+          options={[
+            { text: 'PP-OCRv5_server (Chinese, Japanese and English)', value: 'PP-OCRv5_server' },
+            { text: 'PP-OCRv5_mobile (Chinese, Japanese and English)', value: 'PP-OCRv5_mobile' },
+            { text: 'PP-OCRv5_mobile (English-only)', value: 'EN__PP-OCRv5_mobile' },
+            { text: 'PP-OCRv5_mobile (Greek and English)', value: 'EL__PP-OCRv5_mobile' },
+            { text: 'PP-OCRv5_mobile (Korean and English)', value: 'KOREAN__PP-OCRv5_mobile' },
+            { text: 'PP-OCRv5_mobile (Latin script languages)', value: 'LATIN__PP-OCRv5_mobile' },
+            { text: 'PP-OCRv5_mobile (Russian, Belarusian, Ukrainian and English)', value: 'ESLAV__PP-OCRv5_mobile' },
+            { text: 'PP-OCRv5_mobile (Thai and English)', value: 'TH__PP-OCRv5_mobile' },
+          ]}
+          disabled={disabled || !configToEdit.machineLearning.enabled || !configToEdit.machineLearning.ocr.enabled}
+          isEdited={configToEdit.machineLearning.ocr.modelName !== config.machineLearning.ocr.modelName}
+        />
+
+        <SettingInputField
+          inputType={SettingInputFieldType.NUMBER}
+          label={$t('admin.machine_learning_ocr_min_detection_score')}
+          description={$t('admin.machine_learning_ocr_min_detection_score_description')}
+          bind:value={configToEdit.machineLearning.ocr.minDetectionScore}
+          step="0.1"
+          min={0.1}
+          max={1}
+          disabled={disabled || !configToEdit.machineLearning.enabled || !configToEdit.machineLearning.ocr.enabled}
+          isEdited={configToEdit.machineLearning.ocr.minDetectionScore !== config.machineLearning.ocr.minDetectionScore}
+        />
+
+        <SettingInputField
+          inputType={SettingInputFieldType.NUMBER}
+          label={$t('admin.machine_learning_ocr_min_recognition_score')}
+          description={$t('admin.machine_learning_ocr_min_score_recognition_description')}
+          bind:value={configToEdit.machineLearning.ocr.minRecognitionScore}
+          step="0.1"
+          min={0.1}
+          max={1}
+          disabled={disabled || !configToEdit.machineLearning.enabled || !configToEdit.machineLearning.ocr.enabled}
+          isEdited={configToEdit.machineLearning.ocr.minRecognitionScore !==
+            config.machineLearning.ocr.minRecognitionScore}
+        />
+
+        <SettingInputField
+          inputType={SettingInputFieldType.NUMBER}
+          label={$t('admin.machine_learning_ocr_max_resolution')}
+          description={$t('admin.machine_learning_ocr_max_resolution_description')}
+          bind:value={configToEdit.machineLearning.ocr.maxResolution}
+          min={1}
+          disabled={disabled || !configToEdit.machineLearning.enabled || !configToEdit.machineLearning.ocr.enabled}
+          isEdited={configToEdit.machineLearning.ocr.maxResolution !== config.machineLearning.ocr.maxResolution}
+        />
+      </SystemSettingsCard>
+    </div>
+  {/snippet}
+</SystemSettingsModal>

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

@@ -0,0 +1,16 @@
+<script lang="ts">
+  import SettingSwitch from '$lib/components/shared-components/settings/setting-switch.svelte';
+  import SystemSettingsModal from '$lib/modals/SystemSettingsModal.svelte';
+  import { t } from 'svelte-i18n';
+</script>
+
+<SystemSettingsModal keys={['metadata']}>
+  {#snippet child({ disabled, configToEdit })}
+    <SettingSwitch
+      title={$t('admin.metadata_faces_import_setting')}
+      subtitle={$t('admin.metadata_faces_import_setting_description')}
+      bind:checked={configToEdit.metadata.faces.import}
+      {disabled}
+    />
+  {/snippet}
+</SystemSettingsModal>

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

@@ -0,0 +1,53 @@
+<script lang="ts">
+  import SettingInputField from '$lib/components/shared-components/settings/setting-input-field.svelte';
+  import SettingSwitch from '$lib/components/shared-components/settings/setting-switch.svelte';
+  import { SettingInputFieldType } from '$lib/constants';
+  import SystemSettingsModal from '$lib/modals/SystemSettingsModal.svelte';
+  import { t } from 'svelte-i18n';
+</script>
+
+<SystemSettingsModal keys={['nightlyTasks']}>
+  {#snippet child({ disabled, config, configToEdit })}
+    <div class="flex flex-col gap-4">
+      <SettingInputField
+        inputType={SettingInputFieldType.TEXT}
+        label={$t('admin.nightly_tasks_start_time_setting')}
+        description={$t('admin.nightly_tasks_start_time_setting_description')}
+        bind:value={configToEdit.nightlyTasks.startTime}
+        required={true}
+        {disabled}
+        isEdited={!(configToEdit.nightlyTasks.startTime === config.nightlyTasks.startTime)}
+      />
+      <SettingSwitch
+        title={$t('admin.nightly_tasks_database_cleanup_setting')}
+        subtitle={$t('admin.nightly_tasks_database_cleanup_setting_description')}
+        bind:checked={configToEdit.nightlyTasks.databaseCleanup}
+        {disabled}
+      />
+      <SettingSwitch
+        title={$t('admin.nightly_tasks_missing_thumbnails_setting')}
+        subtitle={$t('admin.nightly_tasks_missing_thumbnails_setting_description')}
+        bind:checked={configToEdit.nightlyTasks.missingThumbnails}
+        {disabled}
+      />
+      <SettingSwitch
+        title={$t('admin.nightly_tasks_cluster_new_faces_setting')}
+        subtitle={$t('admin.nightly_tasks_cluster_faces_setting_description')}
+        bind:checked={configToEdit.nightlyTasks.clusterNewFaces}
+        {disabled}
+      />
+      <SettingSwitch
+        title={$t('admin.nightly_tasks_generate_memories_setting')}
+        subtitle={$t('admin.nightly_tasks_generate_memories_setting_description')}
+        bind:checked={configToEdit.nightlyTasks.generateMemories}
+        {disabled}
+      />
+      <SettingSwitch
+        title={$t('admin.nightly_tasks_sync_quota_usage_setting')}
+        subtitle={$t('admin.nightly_tasks_sync_quota_usage_setting_description')}
+        bind:checked={configToEdit.nightlyTasks.syncQuotaUsage}
+        {disabled}
+      />
+    </div>
+  {/snippet}
+</SystemSettingsModal>

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

@@ -0,0 +1,20 @@
+<script lang="ts">
+  import SettingInputField from '$lib/components/shared-components/settings/setting-input-field.svelte';
+  import { SettingInputFieldType } from '$lib/constants';
+  import SystemSettingsModal from '$lib/modals/SystemSettingsModal.svelte';
+  import { t } from 'svelte-i18n';
+</script>
+
+<SystemSettingsModal keys={['user']}>
+  {#snippet child({ disabled, config, configToEdit })}
+    <SettingInputField
+      inputType={SettingInputFieldType.NUMBER}
+      min={1}
+      label={$t('admin.user_delete_delay_settings')}
+      description={$t('admin.user_delete_delay_settings_description')}
+      bind:value={configToEdit.user.deleteDelay}
+      {disabled}
+      isEdited={configToEdit.user.deleteDelay !== config.user.deleteDelay}
+    />
+  {/snippet}
+</SystemSettingsModal>

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

@@ -0,0 +1,34 @@
+<script lang="ts">
+  import SettingInputField from '$lib/components/shared-components/settings/setting-input-field.svelte';
+  import SettingSwitch from '$lib/components/shared-components/settings/setting-switch.svelte';
+  import { SettingInputFieldType } from '$lib/constants';
+  import SystemSettingsModal from '$lib/modals/SystemSettingsModal.svelte';
+  import { t } from 'svelte-i18n';
+</script>
+
+<SystemSettingsModal keys={['server']}>
+  {#snippet child({ disabled, config, configToEdit })}
+    <SettingInputField
+      inputType={SettingInputFieldType.TEXT}
+      label={$t('admin.server_external_domain_settings')}
+      description={$t('admin.server_external_domain_settings_description')}
+      bind:value={configToEdit.server.externalDomain}
+      isEdited={configToEdit.server.externalDomain !== config.server.externalDomain}
+    />
+
+    <SettingInputField
+      inputType={SettingInputFieldType.TEXT}
+      label={$t('admin.server_welcome_message')}
+      description={$t('admin.server_welcome_message_description')}
+      bind:value={configToEdit.server.loginPageMessage}
+      isEdited={configToEdit.server.loginPageMessage !== config.server.loginPageMessage}
+    />
+
+    <SettingSwitch
+      title={$t('admin.server_public_users')}
+      subtitle={$t('admin.server_public_users_description')}
+      {disabled}
+      bind:checked={configToEdit.server.publicUsers}
+    />
+  {/snippet}
+</SystemSettingsModal>

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

@@ -0,0 +1,20 @@
+<script lang="ts">
+  import SettingInputField from '$lib/components/shared-components/settings/setting-input-field.svelte';
+  import { SettingInputFieldType } from '$lib/constants';
+  import SystemSettingsModal from '$lib/modals/SystemSettingsModal.svelte';
+  import { t } from 'svelte-i18n';
+</script>
+
+<SystemSettingsModal keys={['user']}>
+  {#snippet child({ disabled, config, configToEdit })}
+    <SettingInputField
+      inputType={SettingInputFieldType.NUMBER}
+      min={1}
+      label={$t('admin.user_delete_delay_settings')}
+      description={$t('admin.user_delete_delay_settings_description')}
+      bind:value={configToEdit.user.deleteDelay}
+      {disabled}
+      isEdited={configToEdit.user.deleteDelay !== config.user.deleteDelay}
+    />
+  {/snippet}
+</SystemSettingsModal>

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

@@ -0,0 +1,17 @@
+<script lang="ts">
+  import SettingTextarea from '$lib/components/shared-components/settings/setting-textarea.svelte';
+  import SystemSettingsModal from '$lib/modals/SystemSettingsModal.svelte';
+  import { t } from 'svelte-i18n';
+</script>
+
+<SystemSettingsModal keys={['theme']}>
+  {#snippet child({ disabled, config, configToEdit })}
+    <SettingTextarea
+      {disabled}
+      label={$t('admin.theme_custom_css_settings')}
+      description={$t('admin.theme_custom_css_settings_description')}
+      bind:value={configToEdit.theme.customCss}
+      isEdited={configToEdit.theme.customCss !== config.theme.customCss}
+    />
+  {/snippet}
+</SystemSettingsModal>

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

@@ -0,0 +1,29 @@
+<script lang="ts">
+  import SettingInputField from '$lib/components/shared-components/settings/setting-input-field.svelte';
+  import SettingSwitch from '$lib/components/shared-components/settings/setting-switch.svelte';
+  import { SettingInputFieldType } from '$lib/constants';
+  import SystemSettingsModal from '$lib/modals/SystemSettingsModal.svelte';
+  import { t } from 'svelte-i18n';
+</script>
+
+<SystemSettingsModal keys={['trash']}>
+  {#snippet child({ disabled, config, configToEdit })}
+    <div class="flex flex-col gap-4">
+      <SettingSwitch
+        title={$t('admin.trash_enabled_description')}
+        {disabled}
+        bind:checked={configToEdit.trash.enabled}
+      />
+
+      <SettingInputField
+        inputType={SettingInputFieldType.NUMBER}
+        label={$t('admin.trash_number_of_days')}
+        description={$t('admin.trash_number_of_days_description')}
+        bind:value={configToEdit.trash.days}
+        required={true}
+        disabled={disabled || !configToEdit.trash.enabled}
+        isEdited={configToEdit.trash.days !== config.trash.days}
+      />
+    </div>
+  {/snippet}
+</SystemSettingsModal>

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

@@ -0,0 +1,20 @@
+<script lang="ts">
+  import SettingInputField from '$lib/components/shared-components/settings/setting-input-field.svelte';
+  import { SettingInputFieldType } from '$lib/constants';
+  import SystemSettingsModal from '$lib/modals/SystemSettingsModal.svelte';
+  import { t } from 'svelte-i18n';
+</script>
+
+<SystemSettingsModal keys={['user']}>
+  {#snippet child({ disabled, config, configToEdit })}
+    <SettingInputField
+      inputType={SettingInputFieldType.NUMBER}
+      min={1}
+      label={$t('admin.user_delete_delay_settings')}
+      description={$t('admin.user_delete_delay_settings_description')}
+      bind:value={configToEdit.user.deleteDelay}
+      {disabled}
+      isEdited={configToEdit.user.deleteDelay !== config.user.deleteDelay}
+    />
+  {/snippet}
+</SystemSettingsModal>

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

@@ -0,0 +1,16 @@
+<script lang="ts">
+  import SettingSwitch from '$lib/components/shared-components/settings/setting-switch.svelte';
+  import SystemSettingsModal from '$lib/modals/SystemSettingsModal.svelte';
+  import { t } from 'svelte-i18n';
+</script>
+
+<SystemSettingsModal keys={['newVersionCheck']}>
+  {#snippet child({ disabled, configToEdit })}
+    <SettingSwitch
+      title={$t('admin.version_check_enabled_description')}
+      subtitle={$t('admin.version_check_implications')}
+      bind:checked={configToEdit.newVersionCheck.enabled}
+      {disabled}
+    />
+  {/snippet}
+</SystemSettingsModal>

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

@@ -0,0 +1,20 @@
+<script lang="ts">
+  import SettingInputField from '$lib/components/shared-components/settings/setting-input-field.svelte';
+  import { SettingInputFieldType } from '$lib/constants';
+  import SystemSettingsModal from '$lib/modals/SystemSettingsModal.svelte';
+  import { t } from 'svelte-i18n';
+</script>
+
+<SystemSettingsModal keys={['user']}>
+  {#snippet child({ disabled, config, configToEdit })}
+    <SettingInputField
+      inputType={SettingInputFieldType.NUMBER}
+      min={1}
+      label={$t('admin.user_delete_delay_settings')}
+      description={$t('admin.user_delete_delay_settings_description')}
+      bind:value={configToEdit.user.deleteDelay}
+      {disabled}
+      isEdited={configToEdit.user.deleteDelay !== config.user.deleteDelay}
+    />
+  {/snippet}
+</SystemSettingsModal>