fix: pop-up menu position

2025-12-17 01:11:13 +03:00 · 2025-12-02 10:14:34 -06:00
19 changed files with 508 additions and 1041 deletions
--- a/mobile/lib/extensions/asset_extensions.dart
+++ b/mobile/lib/extensions/asset_extensions.dart
@@ -1,5 +1,5 @@
 import 'package:immich_mobile/entities/asset.entity.dart';
-import 'package:immich_mobile/utils/timezone.dart';
+import 'package:timezone/timezone.dart';

 extension TZExtension on Asset {
  /// Returns the created time of the asset from the exif info (if available) or from
@@ -7,11 +7,24 @@ extension TZExtension on Asset {
  /// the timezone offset in [Duration]
  (DateTime, Duration) getTZAdjustedTimeAndOffset() {
    DateTime dt = fileCreatedAt.toLocal();
-
    if (exifInfo?.dateTimeOriginal != null) {
-      return applyTimezoneOffset(dateTime: exifInfo!.dateTimeOriginal!, timeZone: exifInfo?.timeZone);
+      dt = exifInfo!.dateTimeOriginal!;
+      if (exifInfo?.timeZone != null) {
+        dt = dt.toUtc();
+        try {
+          final location = getLocation(exifInfo!.timeZone!);
+          dt = TZDateTime.from(dt, location);
+        } on LocationNotFoundException {
+          RegExp re = RegExp(r'^utc(?:([+-]\d{1,2})(?::(\d{2}))?)?$', caseSensitive: false);
+          final m = re.firstMatch(exifInfo!.timeZone!);
+          if (m != null) {
+            final duration = Duration(hours: int.parse(m.group(1) ?? '0'), minutes: int.parse(m.group(2) ?? '0'));
+            dt = dt.add(duration);
+            return (dt, duration);
+          }
+        }
+      }
    }
-
    return (dt, dt.timeZoneOffset);
  }
 }
--- a/mobile/lib/models/auth/oauth_login_data.model.dart
+++ b/mobile/lib/models/auth/oauth_login_data.model.dart
@@ -1,7 +0,0 @@
-class OAuthLoginData {
-  final String serverUrl;
-  final String state;
-  final String codeVerifier;
-
-  const OAuthLoginData({required this.serverUrl, required this.state, required this.codeVerifier});
-}
--- a/mobile/lib/pages/login/login.page.dart
+++ b/mobile/lib/pages/login/login.page.dart
@@ -27,7 +27,7 @@ class LoginPage extends HookConsumerWidget {
    });

    return Scaffold(
-      body: const LoginForm(),
+      body: LoginForm(),
      bottomNavigationBar: SafeArea(
        child: Padding(
          padding: const EdgeInsets.only(bottom: 16.0),
--- a/mobile/lib/presentation/widgets/action_buttons/add_action_button.widget.dart
+++ b/mobile/lib/presentation/widgets/action_buttons/add_action_button.widget.dart
@@ -109,7 +109,7 @@ class AddActionButton extends ConsumerWidget {
    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);
+    return RelativeRect.fromLTRB(position.dx, position.dy - size.height - 225, position.dx + size.width, position.dy);
  }

  void _openAlbumSelector(BuildContext context, WidgetRef ref) {
--- a/mobile/lib/presentation/widgets/asset_viewer/bottom_sheet.widget.dart
+++ b/mobile/lib/presentation/widgets/asset_viewer/bottom_sheet.widget.dart
@@ -10,7 +10,6 @@ import 'package:immich_mobile/domain/models/asset/base_asset.model.dart';
 import 'package:immich_mobile/domain/models/exif.model.dart';
 import 'package:immich_mobile/domain/models/setting.model.dart';
 import 'package:immich_mobile/extensions/build_context_extensions.dart';
-import 'package:immich_mobile/extensions/duration_extensions.dart';
 import 'package:immich_mobile/extensions/translate_extensions.dart';
 import 'package:immich_mobile/presentation/widgets/album/album_tile.dart';
 import 'package:immich_mobile/presentation/widgets/asset_viewer/asset_viewer.state.dart';
@@ -30,7 +29,6 @@ import 'package:immich_mobile/repositories/asset_media.repository.dart';
 import 'package:immich_mobile/routing/router.dart';
 import 'package:immich_mobile/utils/action_button.utils.dart';
 import 'package:immich_mobile/utils/bytes_units.dart';
-import 'package:immich_mobile/utils/timezone.dart';
 import 'package:immich_mobile/widgets/common/immich_toast.dart';

 const _kSeparator = '  •  ';
@@ -87,21 +85,13 @@ class AssetDetailBottomSheet extends ConsumerWidget {
 class _AssetDetailBottomSheet extends ConsumerWidget {
  const _AssetDetailBottomSheet();

-  String _getDateTime(BuildContext ctx, BaseAsset asset, ExifInfo? exifInfo) {
-    DateTime dateTime = asset.createdAt.toLocal();
-    Duration timeZoneOffset = dateTime.timeZoneOffset;
-
-    // Use EXIF timezone information if available (matching web app behavior)
-    if (exifInfo?.dateTimeOriginal != null) {
-      (dateTime, timeZoneOffset) = applyTimezoneOffset(
-        dateTime: exifInfo!.dateTimeOriginal!,
-        timeZone: exifInfo.timeZone,
-      );
-    }
-
+  String _getDateTime(BuildContext ctx, BaseAsset asset) {
+    final dateTime = asset.createdAt.toLocal();
    final date = DateFormat.yMMMEd(ctx.locale.toLanguageTag()).format(dateTime);
    final time = DateFormat.jm(ctx.locale.toLanguageTag()).format(dateTime);
-    final timezone = 'GMT${timeZoneOffset.formatAsOffset()}';
+    final timezone = dateTime.timeZoneOffset.isNegative
+        ? 'UTC-${dateTime.timeZoneOffset.inHours.abs().toString().padLeft(2, '0')}:${(dateTime.timeZoneOffset.inMinutes.abs() % 60).toString().padLeft(2, '0')}'
+        : 'UTC+${dateTime.timeZoneOffset.inHours.toString().padLeft(2, '0')}:${(dateTime.timeZoneOffset.inMinutes.abs() % 60).toString().padLeft(2, '0')}';
    return '$date$_kSeparator$time $timezone';
  }

@@ -279,7 +269,7 @@ class _AssetDetailBottomSheet extends ConsumerWidget {
      children: [
        // Asset Date and Time
        SheetTile(
-          title: _getDateTime(context, asset, exifInfo),
+          title: _getDateTime(context, asset),
          titleStyle: context.textTheme.bodyMedium?.copyWith(fontWeight: FontWeight.w600),
          trailing: asset.hasRemote && isOwner ? const Icon(Icons.edit, size: 18) : null,
          onTap: asset.hasRemote && isOwner ? () async => await _editDateTime(context, ref) : null,
--- a/mobile/lib/providers/auth.provider.dart
+++ b/mobile/lib/providers/auth.provider.dart
@@ -12,29 +12,13 @@ import 'package:immich_mobile/providers/infrastructure/user.provider.dart';
 import 'package:immich_mobile/services/api.service.dart';
 import 'package:immich_mobile/services/auth.service.dart';
 import 'package:immich_mobile/services/secure_storage.service.dart';
-import 'package:immich_mobile/services/server_info.service.dart';
 import 'package:immich_mobile/services/upload.service.dart';
 import 'package:immich_mobile/services/widget.service.dart';
 import 'package:immich_mobile/utils/hash.dart';
-import 'package:immich_mobile/utils/url_helper.dart';
 import 'package:logging/logging.dart';
 import 'package:openapi/api.dart';
 import 'package:immich_mobile/utils/debug_print.dart';

-class ServerAuthSettings {
-  final String endpoint;
-  final bool isOAuthEnabled;
-  final bool isPasswordLoginEnabled;
-  final String oAuthButtonText;
-
-  const ServerAuthSettings({
-    required this.endpoint,
-    required this.isOAuthEnabled,
-    required this.isPasswordLoginEnabled,
-    required this.oAuthButtonText,
-  });
-}
-
 final authProvider = StateNotifierProvider<AuthNotifier, AuthState>((ref) {
  return AuthNotifier(
    ref.watch(authServiceProvider),
@@ -43,7 +27,6 @@ final authProvider = StateNotifierProvider<AuthNotifier, AuthState>((ref) {
    ref.watch(uploadServiceProvider),
    ref.watch(secureStorageServiceProvider),
    ref.watch(widgetServiceProvider),
-    ref.watch(serverInfoServiceProvider),
  );
 });

@@ -54,7 +37,6 @@ class AuthNotifier extends StateNotifier<AuthState> {
  final UploadService _uploadService;
  final SecureStorageService _secureStorageService;
  final WidgetService _widgetService;
-  final ServerInfoService _serverInfoService;
  final _log = Logger("AuthenticationNotifier");

  static const Duration _timeoutDuration = Duration(seconds: 7);
@@ -66,7 +48,6 @@ class AuthNotifier extends StateNotifier<AuthState> {
    this._uploadService,
    this._secureStorageService,
    this._widgetService,
-    this._serverInfoService,
  ) : super(
        const AuthState(
          deviceId: "",
@@ -83,27 +64,6 @@ class AuthNotifier extends StateNotifier<AuthState> {
    return _authService.validateServerUrl(url);
  }

-  Future<ServerAuthSettings?> getServerAuthSettings(String serverUrl) async {
-    final sanitizedUrl = sanitizeUrl(serverUrl);
-    final encodedUrl = punycodeEncodeUrl(sanitizedUrl);
-
-    final endpoint = await _authService.validateServerUrl(encodedUrl);
-
-    final features = await _serverInfoService.getServerFeatures();
-    final config = await _serverInfoService.getServerConfig();
-
-    if (features == null || config == null) {
-      return null;
-    }
-
-    return ServerAuthSettings(
-      endpoint: endpoint,
-      isOAuthEnabled: features.oauthEnabled,
-      isPasswordLoginEnabled: features.passwordLogin,
-      oAuthButtonText: config.oauthButtonText.isNotEmpty ? config.oauthButtonText : 'OAuth',
-    );
-  }
-
  /// Validating the url is the alternative connecting server url without
  /// saving the information to the local database
  Future<bool> validateAuxilaryServerUrl(String url) async {
--- a/mobile/lib/providers/oauth.provider.dart
+++ b/mobile/lib/providers/oauth.provider.dart
@@ -1,27 +1,5 @@
 import 'package:hooks_riverpod/hooks_riverpod.dart';
-import 'package:immich_mobile/models/auth/oauth_login_data.model.dart';
-import 'package:immich_mobile/providers/api.provider.dart';
 import 'package:immich_mobile/services/oauth.service.dart';
-import 'package:openapi/api.dart';
-
-export 'package:immich_mobile/models/auth/oauth_login_data.model.dart';
+import 'package:immich_mobile/providers/api.provider.dart';

 final oAuthServiceProvider = Provider((ref) => OAuthService(ref.watch(apiServiceProvider)));
-
-final oAuthProvider = StateNotifierProvider<OAuthNotifier, AsyncValue<void>>(
-  (ref) => OAuthNotifier(ref.watch(oAuthServiceProvider)),
-);
-
-class OAuthNotifier extends StateNotifier<AsyncValue<void>> {
-  final OAuthService _oAuthService;
-
-  OAuthNotifier(this._oAuthService) : super(const AsyncValue.data(null));
-
-  Future<OAuthLoginData?> getOAuthLoginData(String serverUrl) {
-    return _oAuthService.getOAuthLoginData(serverUrl);
-  }
-
-  Future<LoginResponseDto?> completeOAuthLogin(OAuthLoginData oAuthData) {
-    return _oAuthService.completeOAuthLogin(oAuthData);
-  }
-}
--- a/mobile/lib/services/action.service.dart
+++ b/mobile/lib/services/action.service.dart
@@ -15,7 +15,6 @@ import 'package:immich_mobile/repositories/asset_media.repository.dart';
 import 'package:immich_mobile/repositories/download.repository.dart';
 import 'package:immich_mobile/repositories/drift_album_api_repository.dart';
 import 'package:immich_mobile/routing/router.dart';
-import 'package:immich_mobile/utils/timezone.dart';
 import 'package:immich_mobile/widgets/common/date_time_picker.dart';
 import 'package:immich_mobile/widgets/common/location_picker.dart';
 import 'package:maplibre_gl/maplibre_gl.dart' as maplibre;
@@ -176,17 +175,9 @@ class ActionService {
      }

      final exifData = await _remoteAssetRepository.getExif(assetId);
-
-      // Use EXIF timezone information if available (matching web app and display behavior)
-      DateTime dt = asset.createdAt.toLocal();
-      offset = dt.timeZoneOffset;
-
-      if (exifData?.dateTimeOriginal != null) {
-        timeZone = exifData!.timeZone;
-        (dt, offset) = applyTimezoneOffset(dateTime: exifData.dateTimeOriginal!, timeZone: exifData.timeZone);
-      }
-
-      initialDate = dt;
+      initialDate = asset.createdAt.toLocal();
+      offset = initialDate.timeZoneOffset;
+      timeZone = exifData?.timeZone;
    }

    final dateTime = await showDateTimePicker(
--- a/mobile/lib/services/oauth.service.dart
+++ b/mobile/lib/services/oauth.service.dart
@@ -1,11 +1,5 @@
-import 'dart:convert';
-import 'dart:math';
-
-import 'package:crypto/crypto.dart';
 import 'package:flutter_web_auth_2/flutter_web_auth_2.dart';
-import 'package:immich_mobile/models/auth/oauth_login_data.model.dart';
 import 'package:immich_mobile/services/api.service.dart';
-import 'package:immich_mobile/utils/url_helper.dart';
 import 'package:logging/logging.dart';
 import 'package:openapi/api.dart';

@@ -17,50 +11,6 @@ class OAuthService {
  final log = Logger('OAuthService');
  OAuthService(this._apiService);

-  String _generateRandomString(int length) {
-    const chars = 'AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz1234567890';
-    final random = Random.secure();
-    return String.fromCharCodes(Iterable.generate(length, (_) => chars.codeUnitAt(random.nextInt(chars.length))));
-  }
-
-  List<int> _randomBytes(int length) {
-    final random = Random.secure();
-    return List<int>.generate(length, (i) => random.nextInt(256));
-  }
-
-  /// Per specification, the code verifier must be 43-128 characters long
-  /// and consist of characters [A-Z, a-z, 0-9, "-", ".", "_", "~"]
-  /// https://datatracker.ietf.org/doc/html/rfc7636#section-4.1
-  String _randomCodeVerifier() {
-    return base64Url.encode(_randomBytes(42));
-  }
-
-  String _generatePKCECodeChallenge(String codeVerifier) {
-    final bytes = utf8.encode(codeVerifier);
-    final digest = sha256.convert(bytes);
-    return base64Url.encode(digest.bytes).replaceAll('=', '');
-  }
-
-  /// Initiates OAuth login flow.
-  /// Returns the OAuth server URL to redirect to, along with PKCE parameters.
-  Future<OAuthLoginData?> getOAuthLoginData(String serverUrl) async {
-    final state = _generateRandomString(32);
-    final codeVerifier = _randomCodeVerifier();
-    final codeChallenge = _generatePKCECodeChallenge(codeVerifier);
-
-    final oAuthServerUrl = await getOAuthServerUrl(sanitizeUrl(serverUrl), state, codeChallenge);
-
-    if (oAuthServerUrl == null) {
-      return null;
-    }
-
-    return OAuthLoginData(serverUrl: oAuthServerUrl, state: state, codeVerifier: codeVerifier);
-  }
-
-  Future<LoginResponseDto?> completeOAuthLogin(OAuthLoginData oAuthData) {
-    return oAuthLogin(oAuthData.serverUrl, oAuthData.state, oAuthData.codeVerifier);
-  }
-
  Future<String?> getOAuthServerUrl(String serverUrl, String state, String codeChallenge) async {
    // Resolve API server endpoint from user provided serverUrl
    await _apiService.resolveAndSetEndpoint(serverUrl);
--- a/mobile/lib/utils/timezone.dart
+++ b/mobile/lib/utils/timezone.dart
@@ -1,35 +0,0 @@
-import 'package:timezone/timezone.dart';
-
-/// Applies timezone conversion to a DateTime using EXIF timezone information.
-///
-/// This function handles two timezone formats:
-/// 1. Named timezone locations (e.g., "Asia/Hong_Kong")
-/// 2. UTC offset format (e.g., "UTC+08:00", "UTC-05:00")
-///
-/// Returns a tuple of (adjusted DateTime, timezone offset Duration)
-(DateTime, Duration) applyTimezoneOffset({required DateTime dateTime, required String? timeZone}) {
-  DateTime dt = dateTime.toUtc();
-
-  if (timeZone == null) {
-    return (dt, dt.timeZoneOffset);
-  }
-
-  try {
-    // Try to get timezone location from database
-    final location = getLocation(timeZone);
-    dt = TZDateTime.from(dt, location);
-    return (dt, dt.timeZoneOffset);
-  } on LocationNotFoundException {
-    // Handle UTC offset format (e.g., "UTC+08:00")
-    RegExp re = RegExp(r'^utc(?:([+-]\d{1,2})(?::(\d{2}))?)?$', caseSensitive: false);
-    final m = re.firstMatch(timeZone);
-    if (m != null) {
-      final duration = Duration(hours: int.parse(m.group(1) ?? '0'), minutes: int.parse(m.group(2) ?? '0'));
-      dt = dt.add(duration);
-      return (dt, duration);
-    }
-  }
-
-  // If timezone is invalid, return UTC
-  return (dt, dt.timeZoneOffset);
-}
--- a/mobile/lib/widgets/forms/login/login_button.dart
+++ b/mobile/lib/widgets/forms/login/login_button.dart
@@ -1,13 +1,14 @@
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flutter/material.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';

-class LoginButton extends StatelessWidget {
-  final VoidCallback onPressed;
+class LoginButton extends ConsumerWidget {
+  final Function() onPressed;

  const LoginButton({super.key, required this.onPressed});

  @override
-  Widget build(BuildContext context) {
+  Widget build(BuildContext context, WidgetRef ref) {
    return ElevatedButton.icon(
      style: ElevatedButton.styleFrom(padding: const EdgeInsets.symmetric(vertical: 12)),
      onPressed: onPressed,
--- a/mobile/lib/widgets/forms/login/login_credentials_form.dart
+++ b/mobile/lib/widgets/forms/login/login_credentials_form.dart
@@ -1,95 +0,0 @@
-import 'package:easy_localization/easy_localization.dart';
-import 'package:flutter/material.dart';
-import 'package:immich_mobile/extensions/build_context_extensions.dart';
-import 'package:immich_mobile/utils/url_helper.dart';
-import 'package:immich_mobile/widgets/forms/login/email_input.dart';
-import 'package:immich_mobile/widgets/forms/login/loading_icon.dart';
-import 'package:immich_mobile/widgets/forms/login/login_button.dart';
-import 'package:immich_mobile/widgets/forms/login/o_auth_login_button.dart';
-import 'package:immich_mobile/widgets/forms/login/password_input.dart';
-import 'package:immich_mobile/widgets/forms/login/version_compatibility_warning.dart';
-
-class LoginCredentialsForm extends StatelessWidget {
-  final TextEditingController emailController;
-  final TextEditingController passwordController;
-  final TextEditingController serverEndpointController;
-  final FocusNode emailFocusNode;
-  final FocusNode passwordFocusNode;
-  final bool isLoading;
-  final bool isOAuthEnabled;
-  final bool isPasswordLoginEnabled;
-  final String oAuthButtonLabel;
-  final String? warningMessage;
-  final VoidCallback onLogin;
-  final VoidCallback onOAuthLogin;
-  final VoidCallback onBack;
-
-  const LoginCredentialsForm({
-    super.key,
-    required this.emailController,
-    required this.passwordController,
-    required this.serverEndpointController,
-    required this.emailFocusNode,
-    required this.passwordFocusNode,
-    required this.isLoading,
-    required this.isOAuthEnabled,
-    required this.isPasswordLoginEnabled,
-    required this.oAuthButtonLabel,
-    required this.warningMessage,
-    required this.onLogin,
-    required this.onOAuthLogin,
-    required this.onBack,
-  });
-
-  @override
-  Widget build(BuildContext context) {
-    return AutofillGroup(
-      child: Column(
-        crossAxisAlignment: CrossAxisAlignment.stretch,
-        children: [
-          if (warningMessage != null) VersionCompatibilityWarning(message: warningMessage!),
-          Text(
-            sanitizeUrl(serverEndpointController.text),
-            style: context.textTheme.displaySmall,
-            textAlign: TextAlign.center,
-          ),
-          if (isPasswordLoginEnabled) ...[
-            const SizedBox(height: 18),
-            EmailInput(
-              controller: emailController,
-              focusNode: emailFocusNode,
-              onSubmit: passwordFocusNode.requestFocus,
-            ),
-            const SizedBox(height: 8),
-            PasswordInput(controller: passwordController, focusNode: passwordFocusNode, onSubmit: onLogin),
-          ],
-          isLoading
-              ? const LoadingIcon()
-              : Column(
-                  crossAxisAlignment: CrossAxisAlignment.stretch,
-                  mainAxisAlignment: MainAxisAlignment.center,
-                  children: [
-                    const SizedBox(height: 18),
-                    if (isPasswordLoginEnabled) LoginButton(onPressed: onLogin),
-                    if (isOAuthEnabled) ...[
-                      if (isPasswordLoginEnabled)
-                        Padding(
-                          padding: const EdgeInsets.symmetric(horizontal: 16.0),
-                          child: Divider(color: context.isDarkTheme ? Colors.white : Colors.black),
-                        ),
-                      OAuthLoginButton(
-                        serverEndpointController: serverEndpointController,
-                        buttonLabel: oAuthButtonLabel,
-                        onPressed: onOAuthLogin,
-                      ),
-                    ],
-                  ],
-                ),
-          if (!isOAuthEnabled && !isPasswordLoginEnabled) Center(child: const Text('login_disabled').tr()),
-          const SizedBox(height: 12),
-          TextButton.icon(icon: const Icon(Icons.arrow_back), onPressed: onBack, label: const Text('back').tr()),
-        ],
-      ),
-    );
-  }
-}
--- a/mobile/lib/widgets/forms/login/login_form.dart
+++ b/mobile/lib/widgets/forms/login/login_form.dart
@@ -1,10 +1,14 @@
 import 'dart:async';
+import 'dart:convert';
 import 'dart:io';
+import 'dart:math';

 import 'package:auto_route/auto_route.dart';
+import 'package:crypto/crypto.dart';
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
+import 'package:flutter_hooks/flutter_hooks.dart' hide Store;
 import 'package:fluttertoast/fluttertoast.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:immich_mobile/domain/models/store.model.dart';
@@ -25,75 +29,43 @@ import 'package:immich_mobile/utils/version_compatibility.dart';
 import 'package:immich_mobile/widgets/common/immich_logo.dart';
 import 'package:immich_mobile/widgets/common/immich_title_text.dart';
 import 'package:immich_mobile/widgets/common/immich_toast.dart';
-import 'package:immich_mobile/widgets/forms/login/login_credentials_form.dart';
-import 'package:immich_mobile/widgets/forms/login/server_selection_form.dart';
+import 'package:immich_mobile/widgets/forms/login/email_input.dart';
+import 'package:immich_mobile/widgets/forms/login/loading_icon.dart';
+import 'package:immich_mobile/widgets/forms/login/login_button.dart';
+import 'package:immich_mobile/widgets/forms/login/o_auth_login_button.dart';
+import 'package:immich_mobile/widgets/forms/login/password_input.dart';
+import 'package:immich_mobile/widgets/forms/login/server_endpoint_input.dart';
 import 'package:logging/logging.dart';
 import 'package:openapi/api.dart';
 import 'package:package_info_plus/package_info_plus.dart';
 import 'package:permission_handler/permission_handler.dart';

-class LoginForm extends ConsumerStatefulWidget {
-  const LoginForm({super.key});
+class LoginForm extends HookConsumerWidget {
+  LoginForm({super.key});
+
+  final log = Logger('LoginForm');

  @override
-  ConsumerState<LoginForm> createState() => _LoginFormState();
-}
+  Widget build(BuildContext context, WidgetRef ref) {
+    final emailController = useTextEditingController.fromValue(TextEditingValue.empty);
+    final passwordController = useTextEditingController.fromValue(TextEditingValue.empty);
+    final serverEndpointController = useTextEditingController.fromValue(TextEditingValue.empty);
+    final emailFocusNode = useFocusNode();
+    final passwordFocusNode = useFocusNode();
+    final serverEndpointFocusNode = useFocusNode();
+    final isLoading = useState<bool>(false);
+    final isLoadingServer = useState<bool>(false);
+    final isOauthEnable = useState<bool>(false);
+    final isPasswordLoginEnable = useState<bool>(false);
+    final oAuthButtonLabel = useState<String>('OAuth');
+    final logoAnimationController = useAnimationController(duration: const Duration(seconds: 60))..repeat();
+    final serverInfo = ref.watch(serverInfoProvider);
+    final warningMessage = useState<String?>(null);
+    final loginFormKey = GlobalKey<FormState>();
+    final ValueNotifier<String?> serverEndpoint = useState<String?>(null);

-class _LoginFormState extends ConsumerState<LoginForm> with SingleTickerProviderStateMixin {
-  final _log = Logger('LoginForm');
-  final _loginFormKey = GlobalKey<FormState>();
-
-  late final TextEditingController _emailController;
-  late final TextEditingController _passwordController;
-  late final TextEditingController _serverEndpointController;
-  late final FocusNode _emailFocusNode;
-  late final FocusNode _passwordFocusNode;
-  late final FocusNode _serverEndpointFocusNode;
-  late final AnimationController _logoAnimationController;
-
-  bool _isLoading = false;
-  bool _isLoadingServer = false;
-  bool _isOAuthEnabled = false;
-  bool _isPasswordLoginEnabled = false;
-  String _oAuthButtonLabel = 'OAuth';
-  String? _serverEndpoint;
-  String? _warningMessage;
-
-  @override
-  void initState() {
-    super.initState();
-    _emailController = TextEditingController();
-    _passwordController = TextEditingController();
-    _serverEndpointController = TextEditingController();
-    _emailFocusNode = FocusNode();
-    _passwordFocusNode = FocusNode();
-    _serverEndpointFocusNode = FocusNode();
-    _logoAnimationController = AnimationController(vsync: this, duration: const Duration(seconds: 60))..repeat();
-
-    // Load saved server URL if available
-    WidgetsBinding.instance.addPostFrameCallback((_) {
-      final serverUrl = getServerUrl();
-      if (serverUrl != null) {
-        _serverEndpointController.text = serverUrl;
-      }
-    });
-  }
-
-  @override
-  void dispose() {
-    _emailController.dispose();
-    _passwordController.dispose();
-    _serverEndpointController.dispose();
-    _emailFocusNode.dispose();
-    _passwordFocusNode.dispose();
-    _serverEndpointFocusNode.dispose();
-    _logoAnimationController.dispose();
-    super.dispose();
-  }
-
-  Future<void> _checkVersionMismatch() async {
+    checkVersionMismatch() async {
      try {
-      final serverInfo = ref.read(serverInfoProvider);
        final packageInfo = await PackageInfo.fromPlatform();
        final appVersion = packageInfo.version;
        final appMajorVersion = int.parse(appVersion.split('.')[0]);
@@ -101,55 +73,44 @@ class _LoginFormState extends ConsumerState<LoginForm> with SingleTickerProvider
        final serverMajorVersion = serverInfo.serverVersion.major;
        final serverMinorVersion = serverInfo.serverVersion.minor;

-      setState(() {
-        _warningMessage = getVersionCompatibilityMessage(
+        warningMessage.value = getVersionCompatibilityMessage(
          appMajorVersion,
          appMinorVersion,
          serverMajorVersion,
          serverMinorVersion,
        );
-      });
      } catch (error) {
-      setState(() {
-        _warningMessage = 'Error checking version compatibility';
-      });
+        warningMessage.value = 'Error checking version compatibility';
      }
    }

-  Future<void> _getServerAuthSettings() async {
-    final serverUrl = _serverEndpointController.text;
+    /// Fetch the server login credential and enables oAuth login if necessary
+    /// Returns true if successful, false otherwise
+    Future<void> getServerAuthSettings() async {
+      final sanitizeServerUrl = sanitizeUrl(serverEndpointController.text);
+      final serverUrl = punycodeEncodeUrl(sanitizeServerUrl);

+      // Guard empty URL
      if (serverUrl.isEmpty) {
        ImmichToast.show(context: context, msg: "login_form_server_empty".tr(), toastType: ToastType.error);
-      return;
      }

      try {
-      setState(() {
-        _isLoadingServer = true;
-      });
+        isLoadingServer.value = true;
+        final endpoint = await ref.read(authProvider.notifier).validateServerUrl(serverUrl);

-      final settings = await ref.read(authProvider.notifier).getServerAuthSettings(serverUrl);
-      if (settings == null) {
-        ImmichToast.show(
-          context: context,
-          msg: 'login_form_server_error'.tr(),
-          toastType: ToastType.error,
-          gravity: ToastGravity.TOP,
-        );
-        _resetServerState();
-        return;
-      }
+        // Fetch and load server config and features
+        await ref.read(serverInfoProvider.notifier).getServerInfo();

-      setState(() {
-        _isOAuthEnabled = settings.isOAuthEnabled;
-        _isPasswordLoginEnabled = settings.isPasswordLoginEnabled;
-        _oAuthButtonLabel = settings.oAuthButtonText;
-        _serverEndpoint = settings.endpoint;
-        _isLoadingServer = false;
-      });
+        final serverInfo = ref.read(serverInfoProvider);
+        final features = serverInfo.serverFeatures;
+        final config = serverInfo.serverConfig;

-      await _checkVersionMismatch();
+        isOauthEnable.value = features.oauthEnabled;
+        isPasswordLoginEnable.value = features.passwordLogin;
+        oAuthButtonLabel.value = config.oauthButtonText.isNotEmpty ? config.oauthButtonText : 'OAuth';
+
+        serverEndpoint.value = endpoint;
      } on ApiException catch (e) {
        ImmichToast.show(
          context: context,
@@ -157,7 +118,9 @@ class _LoginFormState extends ConsumerState<LoginForm> with SingleTickerProvider
          toastType: ToastType.error,
          gravity: ToastGravity.TOP,
        );
-      _resetServerState();
+        isOauthEnable.value = false;
+        isPasswordLoginEnable.value = true;
+        isLoadingServer.value = false;
      } on HandshakeException {
        ImmichToast.show(
          context: context,
@@ -165,7 +128,9 @@ class _LoginFormState extends ConsumerState<LoginForm> with SingleTickerProvider
          toastType: ToastType.error,
          gravity: ToastGravity.TOP,
        );
-      _resetServerState();
+        isOauthEnable.value = false;
+        isPasswordLoginEnable.value = true;
+        isLoadingServer.value = false;
      } catch (e) {
        ImmichToast.show(
          context: context,
@@ -173,31 +138,35 @@ class _LoginFormState extends ConsumerState<LoginForm> with SingleTickerProvider
          toastType: ToastType.error,
          gravity: ToastGravity.TOP,
        );
-      _resetServerState();
-    }
+        isOauthEnable.value = false;
+        isPasswordLoginEnable.value = true;
+        isLoadingServer.value = false;
      }

-  void _resetServerState() {
-    setState(() {
-      _isOAuthEnabled = false;
-      _isPasswordLoginEnabled = true;
-      _isLoadingServer = false;
-    });
+      isLoadingServer.value = false;
    }

-  void _populateTestLoginInfo() {
-    _emailController.text = 'demo@immich.app';
-    _passwordController.text = 'demo';
-    _serverEndpointController.text = 'https://demo.immich.app';
+    useEffect(() {
+      final serverUrl = getServerUrl();
+      if (serverUrl != null) {
+        serverEndpointController.text = serverUrl;
+      }
+      return null;
+    }, []);
+
+    populateTestLoginInfo() {
+      emailController.text = 'demo@immich.app';
+      passwordController.text = 'demo';
+      serverEndpointController.text = 'https://demo.immich.app';
    }

-  void _populateTestLoginInfo1() {
-    _emailController.text = 'testuser@email.com';
-    _passwordController.text = 'password';
-    _serverEndpointController.text = 'http://10.1.15.216:2283/api';
+    populateTestLoginInfo1() {
+      emailController.text = 'testuser@email.com';
+      passwordController.text = 'password';
+      serverEndpointController.text = 'http://10.1.15.216:2283/api';
    }

-  Future<void> _handleSyncFlow() async {
+    Future<void> handleSyncFlow() async {
      final backgroundManager = ref.read(backgroundSyncProvider);

      await backgroundManager.syncLocal(full: true);
@@ -209,7 +178,7 @@ class _LoginFormState extends ConsumerState<LoginForm> with SingleTickerProvider
      }
    }

-  Future<void> _getManageMediaPermission() async {
+    getManageMediaPermission() async {
      final hasPermission = await ref.read(localFilesManagerRepositoryProvider).hasManageMediaPermission();
      if (!hasPermission) {
        await showDialog(
@@ -256,20 +225,18 @@ class _LoginFormState extends ConsumerState<LoginForm> with SingleTickerProvider
      }
    }

-  bool _isSyncRemoteDeletionsMode() => Platform.isAndroid && Store.get(StoreKey.manageLocalMediaAndroid, false);
+    bool isSyncRemoteDeletionsMode() => Platform.isAndroid && Store.get(StoreKey.manageLocalMediaAndroid, false);

-  Future<void> _login() async {
+    login() async {
      TextInput.finishAutofillContext();

-    setState(() {
-      _isLoading = true;
-    });
+      isLoading.value = true;

      // Invalidate all api repository provider instance to take into account new access token
      invalidateAllApiRepositoryProviders(ref);

      try {
-      final result = await ref.read(authProvider.notifier).login(_emailController.text, _passwordController.text);
+        final result = await ref.read(authProvider.notifier).login(emailController.text, passwordController.text);

        if (result.shouldChangePassword && !result.isAdmin) {
          unawaited(context.pushRoute(const ChangePasswordRoute()));
@@ -277,10 +244,10 @@ class _LoginFormState extends ConsumerState<LoginForm> with SingleTickerProvider
          final isBeta = Store.isBetaTimelineEnabled;
          if (isBeta) {
            await ref.read(galleryPermissionNotifier.notifier).requestGalleryPermission();
-          if (_isSyncRemoteDeletionsMode()) {
-            await _getManageMediaPermission();
+            if (isSyncRemoteDeletionsMode()) {
+              await getManageMediaPermission();
            }
-          unawaited(_handleSyncFlow());
+            unawaited(handleSyncFlow());
            ref.read(websocketProvider.notifier).connect();
            unawaited(context.replaceRoute(const TabShellRoute()));
            return;
@@ -295,112 +262,259 @@ class _LoginFormState extends ConsumerState<LoginForm> with SingleTickerProvider
          gravity: ToastGravity.TOP,
        );
      } finally {
-      setState(() {
-        _isLoading = false;
-      });
+        isLoading.value = false;
      }
    }

-  Future<void> _oAuthLogin() async {
-    setState(() {
-      _isLoading = true;
-    });
+    String generateRandomString(int length) {
+      const chars = 'AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz1234567890';
+      final random = Random.secure();
+      return String.fromCharCodes(Iterable.generate(length, (_) => chars.codeUnitAt(random.nextInt(chars.length))));
+    }
+
+    List<int> randomBytes(int length) {
+      final random = Random.secure();
+      return List<int>.generate(length, (i) => random.nextInt(256));
+    }
+
+    /// Per specification, the code verifier must be 43-128 characters long
+    /// and consist of characters [A-Z, a-z, 0-9, "-", ".", "_", "~"]
+    /// https://datatracker.ietf.org/doc/html/rfc7636#section-4.1
+    String randomCodeVerifier() {
+      return base64Url.encode(randomBytes(42));
+    }
+
+    Future<String> generatePKCECodeChallenge(String codeVerifier) async {
+      var bytes = utf8.encode(codeVerifier);
+      var digest = sha256.convert(bytes);
+      return base64Url.encode(digest.bytes).replaceAll('=', '');
+    }
+
+    oAuthLogin() async {
+      var oAuthService = ref.watch(oAuthServiceProvider);
+      String? oAuthServerUrl;
+
+      final state = generateRandomString(32);
+
+      final codeVerifier = randomCodeVerifier();
+      final codeChallenge = await generatePKCECodeChallenge(codeVerifier);
+
+      try {
+        oAuthServerUrl = await oAuthService.getOAuthServerUrl(
+          sanitizeUrl(serverEndpointController.text),
+          state,
+          codeChallenge,
+        );
+
+        isLoading.value = true;

        // Invalidate all api repository provider instance to take into account new access token
        invalidateAllApiRepositoryProviders(ref);
+      } catch (error, stack) {
+        log.severe('Error getting OAuth server Url: $error', stack);

-    try {
-      final oAuthData = await ref
-          .read(oAuthProvider.notifier)
-          .getOAuthLoginData(sanitizeUrl(_serverEndpointController.text));
-
-      if (oAuthData == null) {
        ImmichToast.show(
          context: context,
-          msg: "login_form_failed_get_oauth_server_disable".tr(),
-          toastType: ToastType.info,
+          msg: "login_form_failed_get_oauth_server_config".tr(),
+          toastType: ToastType.error,
          gravity: ToastGravity.TOP,
        );
-        setState(() {
-          _isLoading = false;
-        });
+        isLoading.value = false;
        return;
      }

-      final loginResponseDto = await ref.read(oAuthProvider.notifier).completeOAuthLogin(oAuthData);
+      if (oAuthServerUrl != null) {
+        try {
+          final loginResponseDto = await oAuthService.oAuthLogin(oAuthServerUrl, state, codeVerifier);

          if (loginResponseDto == null) {
-        setState(() {
-          _isLoading = false;
-        });
            return;
          }

-      _log.info("Finished OAuth login with response: ${loginResponseDto.userEmail}");
+          log.info("Finished OAuth login with response: ${loginResponseDto.userEmail}");

-      final isSuccess = await ref.read(authProvider.notifier).saveAuthInfo(accessToken: loginResponseDto.accessToken);
+          final isSuccess = await ref
+              .watch(authProvider.notifier)
+              .saveAuthInfo(accessToken: loginResponseDto.accessToken);

          if (isSuccess) {
-        setState(() {
-          _isLoading = false;
-        });
-        final permission = ref.read(galleryPermissionNotifier);
+            isLoading.value = false;
+            final permission = ref.watch(galleryPermissionNotifier);
            final isBeta = Store.isBetaTimelineEnabled;
            if (!isBeta && (permission.isGranted || permission.isLimited)) {
-          unawaited(ref.read(backupProvider.notifier).resumeBackup());
+              unawaited(ref.watch(backupProvider.notifier).resumeBackup());
            }
            if (isBeta) {
              await ref.read(galleryPermissionNotifier.notifier).requestGalleryPermission();
-          if (_isSyncRemoteDeletionsMode()) {
-            await _getManageMediaPermission();
+              if (isSyncRemoteDeletionsMode()) {
+                await getManageMediaPermission();
              }
-          unawaited(_handleSyncFlow());
+              unawaited(handleSyncFlow());
              unawaited(context.replaceRoute(const TabShellRoute()));
              return;
            }
            unawaited(context.replaceRoute(const TabControllerRoute()));
          }
        } catch (error, stack) {
-      _log.severe('Error logging in with OAuth: $error', stack);
+          log.severe('Error logging in with OAuth: $error', stack);

-      ImmichToast.show(context: context, msg: error.toString(), toastType: ToastType.error, gravity: ToastGravity.TOP);
-    } finally {
-      setState(() {
-        _isLoading = false;
-      });
-    }
-  }
-
-  void _goBack() {
-    setState(() {
-      _serverEndpoint = null;
-    });
-  }
-
-  @override
-  Widget build(BuildContext context) {
-    final serverSelectionOrLogin = _serverEndpoint == null
-        ? ServerSelectionForm(
-            serverEndpointController: _serverEndpointController,
-            serverEndpointFocusNode: _serverEndpointFocusNode,
-            isLoading: _isLoadingServer,
-            onSubmit: _getServerAuthSettings,
-          )
-        : LoginCredentialsForm(
-            emailController: _emailController,
-            passwordController: _passwordController,
-            serverEndpointController: _serverEndpointController,
-            emailFocusNode: _emailFocusNode,
-            passwordFocusNode: _passwordFocusNode,
-            isLoading: _isLoading,
-            isOAuthEnabled: _isOAuthEnabled,
-            isPasswordLoginEnabled: _isPasswordLoginEnabled,
-            oAuthButtonLabel: _oAuthButtonLabel,
-            warningMessage: _warningMessage,
-            onLogin: _login,
-            onOAuthLogin: _oAuthLogin,
-            onBack: _goBack,
+          ImmichToast.show(
+            context: context,
+            msg: error.toString(),
+            toastType: ToastType.error,
+            gravity: ToastGravity.TOP,
          );
+        } finally {
+          isLoading.value = false;
+        }
+      } else {
+        ImmichToast.show(
+          context: context,
+          msg: "login_form_failed_get_oauth_server_disable".tr(),
+          toastType: ToastType.info,
+          gravity: ToastGravity.TOP,
+        );
+        isLoading.value = false;
+        return;
+      }
+    }
+
+    buildSelectServer() {
+      const buttonRadius = 25.0;
+      return Column(
+        crossAxisAlignment: CrossAxisAlignment.stretch,
+        children: [
+          ServerEndpointInput(
+            controller: serverEndpointController,
+            focusNode: serverEndpointFocusNode,
+            onSubmit: getServerAuthSettings,
+          ),
+          const SizedBox(height: 18),
+          Row(
+            children: [
+              Expanded(
+                child: ElevatedButton.icon(
+                  style: ElevatedButton.styleFrom(
+                    padding: const EdgeInsets.symmetric(vertical: 12),
+                    shape: const RoundedRectangleBorder(
+                      borderRadius: BorderRadius.only(
+                        topLeft: Radius.circular(buttonRadius),
+                        bottomLeft: Radius.circular(buttonRadius),
+                      ),
+                    ),
+                  ),
+                  onPressed: () => context.pushRoute(const SettingsRoute()),
+                  icon: const Icon(Icons.settings_rounded),
+                  label: const Text(""),
+                ),
+              ),
+              const SizedBox(width: 1),
+              Expanded(
+                flex: 3,
+                child: ElevatedButton.icon(
+                  style: ElevatedButton.styleFrom(
+                    padding: const EdgeInsets.symmetric(vertical: 12),
+                    shape: const RoundedRectangleBorder(
+                      borderRadius: BorderRadius.only(
+                        topRight: Radius.circular(buttonRadius),
+                        bottomRight: Radius.circular(buttonRadius),
+                      ),
+                    ),
+                  ),
+                  onPressed: isLoadingServer.value ? null : getServerAuthSettings,
+                  icon: const Icon(Icons.arrow_forward_rounded),
+                  label: const Text('next', style: TextStyle(fontSize: 14, fontWeight: FontWeight.bold)).tr(),
+                ),
+              ),
+            ],
+          ),
+          const SizedBox(height: 18),
+          if (isLoadingServer.value) const LoadingIcon(),
+        ],
+      );
+    }
+
+    buildVersionCompatWarning() {
+      checkVersionMismatch();
+
+      if (warningMessage.value == null) {
+        return const SizedBox.shrink();
+      }
+
+      return Padding(
+        padding: const EdgeInsets.only(bottom: 8.0),
+        child: Container(
+          padding: const EdgeInsets.all(16),
+          decoration: BoxDecoration(
+            color: context.isDarkTheme ? Colors.red.shade700 : Colors.red.shade100,
+            borderRadius: const BorderRadius.all(Radius.circular(8)),
+            border: Border.all(color: context.isDarkTheme ? Colors.red.shade900 : Colors.red[200]!),
+          ),
+          child: Text(warningMessage.value!, textAlign: TextAlign.center),
+        ),
+      );
+    }
+
+    buildLogin() {
+      return AutofillGroup(
+        child: Column(
+          crossAxisAlignment: CrossAxisAlignment.stretch,
+          children: [
+            buildVersionCompatWarning(),
+            Text(
+              sanitizeUrl(serverEndpointController.text),
+              style: context.textTheme.displaySmall,
+              textAlign: TextAlign.center,
+            ),
+            if (isPasswordLoginEnable.value) ...[
+              const SizedBox(height: 18),
+              EmailInput(
+                controller: emailController,
+                focusNode: emailFocusNode,
+                onSubmit: passwordFocusNode.requestFocus,
+              ),
+              const SizedBox(height: 8),
+              PasswordInput(controller: passwordController, focusNode: passwordFocusNode, onSubmit: login),
+            ],
+
+            // Note: This used to have an AnimatedSwitcher, but was removed
+            // because of https://github.com/flutter/flutter/issues/120874
+            isLoading.value
+                ? const LoadingIcon()
+                : Column(
+                    crossAxisAlignment: CrossAxisAlignment.stretch,
+                    mainAxisAlignment: MainAxisAlignment.center,
+                    children: [
+                      const SizedBox(height: 18),
+                      if (isPasswordLoginEnable.value) LoginButton(onPressed: login),
+                      if (isOauthEnable.value) ...[
+                        if (isPasswordLoginEnable.value)
+                          Padding(
+                            padding: const EdgeInsets.symmetric(horizontal: 16.0),
+                            child: Divider(color: context.isDarkTheme ? Colors.white : Colors.black),
+                          ),
+                        OAuthLoginButton(
+                          serverEndpointController: serverEndpointController,
+                          buttonLabel: oAuthButtonLabel.value,
+                          isLoading: isLoading,
+                          onPressed: oAuthLogin,
+                        ),
+                      ],
+                    ],
+                  ),
+            if (!isOauthEnable.value && !isPasswordLoginEnable.value) Center(child: const Text('login_disabled').tr()),
+            const SizedBox(height: 12),
+            TextButton.icon(
+              icon: const Icon(Icons.arrow_back),
+              onPressed: () => serverEndpoint.value = null,
+              label: const Text('back').tr(),
+            ),
+          ],
+        ),
+      );
+    }
+
+    final serverSelectionOrLogin = serverEndpoint.value == null ? buildSelectServer() : buildLogin();

    return LayoutBuilder(
      builder: (context, constraints) {
@@ -418,19 +532,20 @@ class _LoginFormState extends ConsumerState<LoginForm> with SingleTickerProvider
                    mainAxisAlignment: MainAxisAlignment.end,
                    children: [
                      GestureDetector(
-                        onDoubleTap: _populateTestLoginInfo,
-                        onLongPress: _populateTestLoginInfo1,
+                        onDoubleTap: () => populateTestLoginInfo(),
+                        onLongPress: () => populateTestLoginInfo1(),
                        child: RotationTransition(
-                          turns: _logoAnimationController,
+                          turns: logoAnimationController,
                          child: const ImmichLogo(heroTag: 'logo'),
                        ),
                      ),
                      const Padding(padding: EdgeInsets.only(top: 8.0, bottom: 16), child: ImmichTitleText()),
                    ],
                  ),
+
                  // Note: This used to have an AnimatedSwitcher, but was removed
                  // because of https://github.com/flutter/flutter/issues/120874
-                  Form(key: _loginFormKey, child: serverSelectionOrLogin),
+                  Form(key: loginFormKey, child: serverSelectionOrLogin),
                ],
              ),
            ),
--- a/mobile/lib/widgets/forms/login/o_auth_login_button.dart
+++ b/mobile/lib/widgets/forms/login/o_auth_login_button.dart
@@ -1,20 +1,23 @@
 import 'package:flutter/material.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:immich_mobile/extensions/build_context_extensions.dart';

-class OAuthLoginButton extends StatelessWidget {
+class OAuthLoginButton extends ConsumerWidget {
  final TextEditingController serverEndpointController;
+  final ValueNotifier<bool> isLoading;
  final String buttonLabel;
-  final VoidCallback onPressed;
+  final Function() onPressed;

  const OAuthLoginButton({
    super.key,
    required this.serverEndpointController,
+    required this.isLoading,
    required this.buttonLabel,
    required this.onPressed,
  });

  @override
-  Widget build(BuildContext context) {
+  Widget build(BuildContext context, WidgetRef ref) {
    return ElevatedButton.icon(
      style: ElevatedButton.styleFrom(
        backgroundColor: context.primaryColor.withAlpha(230),
--- a/mobile/lib/widgets/forms/login/password_input.dart
+++ b/mobile/lib/widgets/forms/login/password_input.dart
@@ -1,45 +1,36 @@
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flutter/material.dart';
+import 'package:flutter_hooks/flutter_hooks.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';

-class PasswordInput extends StatefulWidget {
+class PasswordInput extends HookConsumerWidget {
  final TextEditingController controller;
  final FocusNode? focusNode;
-  final VoidCallback? onSubmit;
+  final Function()? onSubmit;

  const PasswordInput({super.key, required this.controller, this.focusNode, this.onSubmit});

  @override
-  State<PasswordInput> createState() => _PasswordInputState();
-}
+  Widget build(BuildContext context, WidgetRef ref) {
+    final isPasswordVisible = useState<bool>(false);

-class _PasswordInputState extends State<PasswordInput> {
-  bool _isPasswordVisible = false;
-
-  void _togglePasswordVisibility() {
-    setState(() {
-      _isPasswordVisible = !_isPasswordVisible;
-    });
-  }
-
-  @override
-  Widget build(BuildContext context) {
    return TextFormField(
-      obscureText: !_isPasswordVisible,
-      controller: widget.controller,
+      obscureText: !isPasswordVisible.value,
+      controller: controller,
      decoration: InputDecoration(
        labelText: 'password'.tr(),
        border: const OutlineInputBorder(),
        hintText: 'login_form_password_hint'.tr(),
        hintStyle: const TextStyle(fontWeight: FontWeight.normal, fontSize: 14),
        suffixIcon: IconButton(
-          onPressed: _togglePasswordVisibility,
-          icon: Icon(_isPasswordVisible ? Icons.visibility_off_sharp : Icons.visibility_sharp),
+          onPressed: () => isPasswordVisible.value = !isPasswordVisible.value,
+          icon: Icon(isPasswordVisible.value ? Icons.visibility_off_sharp : Icons.visibility_sharp),
        ),
      ),
      autofillHints: const [AutofillHints.password],
      keyboardType: TextInputType.text,
-      onFieldSubmitted: (_) => widget.onSubmit?.call(),
-      focusNode: widget.focusNode,
+      onFieldSubmitted: (_) => onSubmit?.call(),
+      focusNode: focusNode,
      textInputAction: TextInputAction.go,
    );
  }
--- a/mobile/lib/widgets/forms/login/server_selection_form.dart
+++ b/mobile/lib/widgets/forms/login/server_selection_form.dart
@@ -1,78 +0,0 @@
-import 'package:auto_route/auto_route.dart';
-import 'package:easy_localization/easy_localization.dart';
-import 'package:flutter/material.dart';
-import 'package:immich_mobile/routing/router.dart';
-import 'package:immich_mobile/widgets/forms/login/loading_icon.dart';
-import 'package:immich_mobile/widgets/forms/login/server_endpoint_input.dart';
-
-class ServerSelectionForm extends StatelessWidget {
-  final TextEditingController serverEndpointController;
-  final FocusNode serverEndpointFocusNode;
-  final bool isLoading;
-  final VoidCallback onSubmit;
-
-  const ServerSelectionForm({
-    super.key,
-    required this.serverEndpointController,
-    required this.serverEndpointFocusNode,
-    required this.isLoading,
-    required this.onSubmit,
-  });
-
-  static const double _buttonRadius = 25.0;
-
-  @override
-  Widget build(BuildContext context) {
-    return Column(
-      crossAxisAlignment: CrossAxisAlignment.stretch,
-      children: [
-        ServerEndpointInput(
-          controller: serverEndpointController,
-          focusNode: serverEndpointFocusNode,
-          onSubmit: onSubmit,
-        ),
-        const SizedBox(height: 18),
-        Row(
-          children: [
-            Expanded(
-              child: ElevatedButton.icon(
-                style: ElevatedButton.styleFrom(
-                  padding: const EdgeInsets.symmetric(vertical: 12),
-                  shape: const RoundedRectangleBorder(
-                    borderRadius: BorderRadius.only(
-                      topLeft: Radius.circular(_buttonRadius),
-                      bottomLeft: Radius.circular(_buttonRadius),
-                    ),
-                  ),
-                ),
-                onPressed: () => context.pushRoute(const SettingsRoute()),
-                icon: const Icon(Icons.settings_rounded),
-                label: const Text(""),
-              ),
-            ),
-            const SizedBox(width: 1),
-            Expanded(
-              flex: 3,
-              child: ElevatedButton.icon(
-                style: ElevatedButton.styleFrom(
-                  padding: const EdgeInsets.symmetric(vertical: 12),
-                  shape: const RoundedRectangleBorder(
-                    borderRadius: BorderRadius.only(
-                      topRight: Radius.circular(_buttonRadius),
-                      bottomRight: Radius.circular(_buttonRadius),
-                    ),
-                  ),
-                ),
-                onPressed: isLoading ? null : onSubmit,
-                icon: const Icon(Icons.arrow_forward_rounded),
-                label: const Text('next', style: TextStyle(fontSize: 14, fontWeight: FontWeight.bold)).tr(),
-              ),
-            ),
-          ],
-        ),
-        const SizedBox(height: 18),
-        if (isLoading) const LoadingIcon(),
-      ],
-    );
-  }
-}
--- a/mobile/lib/widgets/forms/login/version_compatibility_warning.dart
+++ b/mobile/lib/widgets/forms/login/version_compatibility_warning.dart
@@ -1,24 +0,0 @@
-import 'package:flutter/material.dart';
-import 'package:immich_mobile/extensions/build_context_extensions.dart';
-
-class VersionCompatibilityWarning extends StatelessWidget {
-  final String message;
-
-  const VersionCompatibilityWarning({super.key, required this.message});
-
-  @override
-  Widget build(BuildContext context) {
-    return Padding(
-      padding: const EdgeInsets.only(bottom: 8.0),
-      child: Container(
-        padding: const EdgeInsets.all(16),
-        decoration: BoxDecoration(
-          color: context.isDarkTheme ? Colors.red.shade700 : Colors.red.shade100,
-          borderRadius: const BorderRadius.all(Radius.circular(8)),
-          border: Border.all(color: context.isDarkTheme ? Colors.red.shade900 : Colors.red[200]!),
-        ),
-        child: Text(message, textAlign: TextAlign.center),
-      ),
-    );
-  }
-}
--- a/mobile/test/utils/timezone_test.dart
+++ b/mobile/test/utils/timezone_test.dart
@@ -1,278 +0,0 @@
-import 'package:flutter_test/flutter_test.dart';
-import 'package:immich_mobile/utils/timezone.dart';
-import 'package:timezone/data/latest.dart' as tz;
-
-void main() {
-  setUpAll(() {
-    tz.initializeTimeZones();
-  });
-
-  group('applyTimezoneOffset', () {
-    group('with named timezone locations', () {
-      test('should convert UTC to Asia/Hong_Kong (+08:00)', () {
-        final utcTime = DateTime.utc(2024, 6, 15, 12, 0, 0);
-
-        final (adjustedTime, offset) = applyTimezoneOffset(
-          dateTime: utcTime,
-          timeZone: 'Asia/Hong_Kong',
-        );
-
-        expect(adjustedTime.hour, 20); // 12:00 UTC + 8 hours = 20:00
-        expect(offset, const Duration(hours: 8));
-      });
-
-      test('should convert UTC to America/New_York (handles DST)', () {
-        // Summer time (EDT = UTC-4)
-        final summerUtc = DateTime.utc(2024, 6, 15, 12, 0, 0);
-        final (summerTime, summerOffset) = applyTimezoneOffset(
-          dateTime: summerUtc,
-          timeZone: 'America/New_York',
-        );
-
-        expect(summerTime.hour, 8); // 12:00 UTC - 4 hours = 08:00
-        expect(summerOffset, const Duration(hours: -4));
-
-        // Winter time (EST = UTC-5)
-        final winterUtc = DateTime.utc(2024, 1, 15, 12, 0, 0);
-        final (winterTime, winterOffset) = applyTimezoneOffset(
-          dateTime: winterUtc,
-          timeZone: 'America/New_York',
-        );
-
-        expect(winterTime.hour, 7); // 12:00 UTC - 5 hours = 07:00
-        expect(winterOffset, const Duration(hours: -5));
-      });
-
-      test('should convert UTC to Europe/London', () {
-        // Winter (GMT = UTC+0)
-        final winterUtc = DateTime.utc(2024, 1, 15, 12, 0, 0);
-        final (winterTime, winterOffset) = applyTimezoneOffset(
-          dateTime: winterUtc,
-          timeZone: 'Europe/London',
-        );
-
-        expect(winterTime.hour, 12);
-        expect(winterOffset, Duration.zero);
-
-        // Summer (BST = UTC+1)
-        final summerUtc = DateTime.utc(2024, 6, 15, 12, 0, 0);
-        final (summerTime, summerOffset) = applyTimezoneOffset(
-          dateTime: summerUtc,
-          timeZone: 'Europe/London',
-        );
-
-        expect(summerTime.hour, 13);
-        expect(summerOffset, const Duration(hours: 1));
-      });
-
-      test('should handle timezone with 30-minute offset (Asia/Kolkata)', () {
-        final utcTime = DateTime.utc(2024, 6, 15, 12, 0, 0);
-
-        final (adjustedTime, offset) = applyTimezoneOffset(
-          dateTime: utcTime,
-          timeZone: 'Asia/Kolkata',
-        );
-
-        expect(adjustedTime.hour, 17);
-        expect(adjustedTime.minute, 30); // 12:00 UTC + 5:30 = 17:30
-        expect(offset, const Duration(hours: 5, minutes: 30));
-      });
-
-      test('should handle timezone with 45-minute offset (Asia/Kathmandu)', () {
-        final utcTime = DateTime.utc(2024, 6, 15, 12, 0, 0);
-
-        final (adjustedTime, offset) = applyTimezoneOffset(
-          dateTime: utcTime,
-          timeZone: 'Asia/Kathmandu',
-        );
-
-        expect(adjustedTime.hour, 17);
-        expect(adjustedTime.minute, 45); // 12:00 UTC + 5:45 = 17:45
-        expect(offset, const Duration(hours: 5, minutes: 45));
-      });
-    });
-
-    group('with UTC offset format', () {
-      test('should handle UTC+08:00 format', () {
-        final utcTime = DateTime.utc(2024, 6, 15, 12, 0, 0);
-
-        final (adjustedTime, offset) = applyTimezoneOffset(
-          dateTime: utcTime,
-          timeZone: 'UTC+08:00',
-        );
-
-        expect(adjustedTime.hour, 20);
-        expect(offset, const Duration(hours: 8));
-      });
-
-      test('should handle UTC-05:00 format', () {
-        final utcTime = DateTime.utc(2024, 6, 15, 12, 0, 0);
-
-        final (adjustedTime, offset) = applyTimezoneOffset(
-          dateTime: utcTime,
-          timeZone: 'UTC-05:00',
-        );
-
-        expect(adjustedTime.hour, 7);
-        expect(offset, const Duration(hours: -5));
-      });
-
-      test('should handle UTC+8 format (without minutes)', () {
-        final utcTime = DateTime.utc(2024, 6, 15, 12, 0, 0);
-
-        final (adjustedTime, offset) = applyTimezoneOffset(
-          dateTime: utcTime,
-          timeZone: 'UTC+8',
-        );
-
-        expect(adjustedTime.hour, 20);
-        expect(offset, const Duration(hours: 8));
-      });
-
-      test('should handle UTC-5 format (without minutes)', () {
-        final utcTime = DateTime.utc(2024, 6, 15, 12, 0, 0);
-
-        final (adjustedTime, offset) = applyTimezoneOffset(
-          dateTime: utcTime,
-          timeZone: 'UTC-5',
-        );
-
-        expect(adjustedTime.hour, 7);
-        expect(offset, const Duration(hours: -5));
-      });
-
-      test('should handle plain UTC format', () {
-        final utcTime = DateTime.utc(2024, 6, 15, 12, 0, 0);
-
-        final (adjustedTime, offset) = applyTimezoneOffset(
-          dateTime: utcTime,
-          timeZone: 'UTC',
-        );
-
-        expect(adjustedTime.hour, 12);
-        expect(offset, Duration.zero);
-      });
-
-      test('should handle lowercase utc format', () {
-        final utcTime = DateTime.utc(2024, 6, 15, 12, 0, 0);
-
-        final (adjustedTime, offset) = applyTimezoneOffset(
-          dateTime: utcTime,
-          timeZone: 'utc+08:00',
-        );
-
-        expect(adjustedTime.hour, 20);
-        expect(offset, const Duration(hours: 8));
-      });
-
-      test('should handle UTC+05:30 format (with minutes)', () {
-        final utcTime = DateTime.utc(2024, 6, 15, 12, 0, 0);
-
-        final (adjustedTime, offset) = applyTimezoneOffset(
-          dateTime: utcTime,
-          timeZone: 'UTC+05:30',
-        );
-
-        expect(adjustedTime.hour, 17);
-        expect(adjustedTime.minute, 30);
-        expect(offset, const Duration(hours: 5, minutes: 30));
-      });
-    });
-
-    group('with null or invalid timezone', () {
-      test('should return UTC time when timezone is null', () {
-        final localTime = DateTime(2024, 6, 15, 12, 0, 0);
-
-        final (adjustedTime, offset) = applyTimezoneOffset(
-          dateTime: localTime,
-          timeZone: null,
-        );
-
-        expect(adjustedTime.isUtc, true);
-        expect(offset, adjustedTime.timeZoneOffset);
-      });
-
-      test('should return UTC time when timezone is invalid', () {
-        final utcTime = DateTime.utc(2024, 6, 15, 12, 0, 0);
-
-        final (adjustedTime, offset) = applyTimezoneOffset(
-          dateTime: utcTime,
-          timeZone: 'Invalid/Timezone',
-        );
-
-        expect(adjustedTime.isUtc, true);
-        expect(adjustedTime.hour, 12);
-        expect(offset, adjustedTime.timeZoneOffset);
-      });
-
-      test('should return UTC time when UTC offset format is malformed', () {
-        final utcTime = DateTime.utc(2024, 6, 15, 12, 0, 0);
-
-        final (adjustedTime, offset) = applyTimezoneOffset(
-          dateTime: utcTime,
-          timeZone: 'UTC++08',
-        );
-
-        expect(adjustedTime.isUtc, true);
-        expect(adjustedTime.hour, 12);
-      });
-    });
-
-    group('edge cases', () {
-      test('should handle date crossing midnight forward', () {
-        final utcTime = DateTime.utc(2024, 6, 15, 20, 0, 0);
-
-        final (adjustedTime, offset) = applyTimezoneOffset(
-          dateTime: utcTime,
-          timeZone: 'Asia/Tokyo', // UTC+9
-        );
-
-        expect(adjustedTime.day, 16); // Crosses to next day
-        expect(adjustedTime.hour, 5); // 20:00 UTC + 9 = 05:00 next day
-        expect(offset, const Duration(hours: 9));
-      });
-
-      test('should handle date crossing midnight backward', () {
-        final utcTime = DateTime.utc(2024, 6, 15, 3, 0, 0);
-
-        final (adjustedTime, offset) = applyTimezoneOffset(
-          dateTime: utcTime,
-          timeZone: 'America/Los_Angeles', // UTC-7 in summer
-        );
-
-        expect(adjustedTime.day, 14); // Crosses to previous day
-        expect(adjustedTime.hour, 20); // 03:00 UTC - 7 = 20:00 previous day
-        expect(offset, const Duration(hours: -7));
-      });
-
-      test('should handle year boundary crossing', () {
-        final utcTime = DateTime.utc(2024, 1, 1, 2, 0, 0);
-
-        final (adjustedTime, offset) = applyTimezoneOffset(
-          dateTime: utcTime,
-          timeZone: 'America/New_York', // UTC-5 in winter
-        );
-
-        expect(adjustedTime.year, 2023);
-        expect(adjustedTime.month, 12);
-        expect(adjustedTime.day, 31);
-        expect(adjustedTime.hour, 21); // 02:00 UTC - 5 = 21:00 Dec 31
-      });
-
-      test('should convert local time to UTC before applying timezone', () {
-        // Create a local time (not UTC)
-        final localTime = DateTime(2024, 6, 15, 12, 0, 0);
-
-        final (adjustedTime, _) = applyTimezoneOffset(
-          dateTime: localTime,
-          timeZone: 'Asia/Hong_Kong',
-        );
-
-        // The function converts to UTC first, then applies timezone
-        // So local 12:00 -> UTC (depends on local timezone) -> HK time
-        // We can verify it's working by checking it's a TZDateTime
-        expect(adjustedTime, isNotNull);
-      });
-    });
-  });
-}
--- a/web/src/lib/utils/tree-utils.ts
+++ b/web/src/lib/utils/tree-utils.ts
@@ -62,16 +62,8 @@ export class TreeNode extends Map<string, TreeNode> {
      const child = this.values().next().value!;
      child.value = joinPaths(this.value, child.value);
      child.parent = this.parent;
-
-      const entries = Array.from(this.parent.entries());
-      this.parent.clear();
-      for (const [key, value] of entries) {
-        if (key === this.value) {
+      this.parent.delete(this.value);
      this.parent.set(child.value, child);
-        } else {
-          this.parent.set(key, value);
-        }
-      }
    }

    for (const child of this.values()) {