add adaptive_scaffold

mobile-v2/lib/presentation/components/common/gap.widget.dart

@@ -0,0 +1,19 @@
+import 'package:flutter/material.dart';
+import 'package:immich_mobile/utils/constants/size_constants.dart';
+
+@immutable
+class SizedGap extends SizedBox {
+  const SizedGap({super.key, super.height, super.width});
+
+  // Widgets to be used in Column
+  const SizedGap.sh({super.key}) : super(height: SizeConstants.s);
+  const SizedGap.mh({super.key}) : super(height: SizeConstants.m);
+  const SizedGap.lh({super.key}) : super(height: SizeConstants.l);
+  const SizedGap.xlh({super.key}) : super(height: SizeConstants.xl);
+
+  // Widgets to be used in Row
+  const SizedGap.sw({super.key}) : super(width: SizeConstants.s);
+  const SizedGap.mw({super.key}) : super(width: SizeConstants.m);
+  const SizedGap.lw({super.key}) : super(width: SizeConstants.l);
+  const SizedGap.xlw({super.key}) : super(width: SizeConstants.xl);
+}

mobile-v2/lib/presentation/components/common/loading_indaticator.widget.dart

@@ -0,0 +1,22 @@
+import 'package:flutter/material.dart';
+
+class ImLoadingIndicator extends StatelessWidget {
+  const ImLoadingIndicator({super.key, this.dimension, this.strokeWidth});
+
+  /// The size of the indicator with a default of 24
+  final double? dimension;
+
+  /// The width of the indicator with a default of 2
+  final double? strokeWidth;
+
+  @override
+  Widget build(BuildContext context) {
+    return SizedBox(
+      width: dimension ?? 24,
+      height: dimension ?? 24,
+      child: FittedBox(
+        child: CircularProgressIndicator(strokeWidth: strokeWidth ?? 2),
+      ),
+    );
+  }
+}

mobile-v2/lib/presentation/components/image/immich_logo.widget.dart

@@ -0,0 +1,53 @@
+import 'package:flutter/widgets.dart';
+import 'package:immich_mobile/utils/constants/assets.gen.dart';
+import 'package:immich_mobile/utils/extensions/build_context.extension.dart';
+
+class ImLogo extends StatelessWidget {
+  const ImLogo({
+    this.width,
+    this.filterQuality = FilterQuality.high,
+    super.key,
+  });
+
+  /// The width of the image.
+  final double? width;
+
+  /// The rendering quality
+  final FilterQuality filterQuality;
+
+  @override
+  Widget build(BuildContext context) {
+    return Image(
+      width: width,
+      filterQuality: filterQuality,
+      semanticLabel: 'Immich Logo',
+      image: Assets.images.immichLogo.provider(),
+      isAntiAlias: true,
+    );
+  }
+}
+
+class ImLogoText extends StatelessWidget {
+  const ImLogoText({
+    super.key,
+    this.fontSize = 48,
+    this.filterQuality = FilterQuality.high,
+  });
+
+  final double fontSize;
+
+  /// The rendering quality
+  final FilterQuality filterQuality;
+
+  @override
+  Widget build(BuildContext context) {
+    return Image(
+      semanticLabel: 'Immich Logo Text',
+      image: (context.isDarkTheme
+          ? Assets.images.immichTextDark.provider
+          : Assets.images.immichTextLight.provider)(),
+      width: fontSize * 4,
+      filterQuality: FilterQuality.high,
+    );
+  }
+}

mobile-v2/lib/presentation/components/input/filled_button.widget.dart

@@ -0,0 +1,65 @@
+import 'package:flutter/material.dart';
+
+class ImFilledButton extends StatelessWidget {
+  const ImFilledButton({
+    super.key,
+    this.icon,
+    this.onPressed,
+    this.isDisabled = false,
+    required this.label,
+  }) : _tonal = false;
+
+  const ImFilledButton.tonal({
+    super.key,
+    this.icon,
+    this.onPressed,
+    this.isDisabled = false,
+    required this.label,
+  }) : _tonal = true;
+
+  /// Internal flag to switch between filled and tonal variant
+  final bool _tonal;
+
+  /// Should disable the button
+  final bool isDisabled;
+
+  /// Icon to display if [withIcon] is true
+  final IconData? icon;
+
+  /// Action to perform on Button press
+  final VoidCallback? onPressed;
+
+  /// Label to be displayed in the button
+  final String label;
+
+  @override
+  Widget build(BuildContext context) {
+    if (_tonal) {
+      if (icon != null) {
+        return FilledButton.tonalIcon(
+          onPressed: isDisabled ? null : onPressed,
+          icon: Icon(icon),
+          label: Text(label),
+        );
+      }
+
+      return FilledButton.tonal(
+        onPressed: isDisabled ? null : onPressed,
+        child: Text(label),
+      );
+    }
+
+    if (icon != null) {
+      return FilledButton.icon(
+        onPressed: isDisabled ? null : onPressed,
+        icon: Icon(icon),
+        label: Text(label),
+      );
+    }
+
+    return FilledButton(
+      onPressed: isDisabled ? null : onPressed,
+      child: Text(label),
+    );
+  }
+}

mobile-v2/lib/presentation/components/input/password_form_field.widget.dart

@@ -0,0 +1,77 @@
+import 'package:flutter/material.dart';
+import 'package:immich_mobile/presentation/components/input/text_form_field.widget.dart';
+import 'package:material_symbols_icons/symbols.dart';
+
+class ImPasswordFormField extends StatefulWidget {
+  const ImPasswordFormField({
+    super.key,
+    this.controller,
+    this.onChanged,
+    this.focusNode,
+    this.label,
+    this.hint,
+    this.textInputAction,
+    this.isDisabled = false,
+  });
+
+  /// The [TextEditingController] passed to the underlying [TextFormField]
+  final TextEditingController? controller;
+
+  /// Optional callback to receive changes
+  final void Function(String?)? onChanged;
+
+  /// The [FocusNode] passed to the underlying [TextFormField]
+  final FocusNode? focusNode;
+
+  /// Translation Key used as label
+  final String? label;
+
+  /// Translation key used as hint
+  final String? hint;
+
+  /// Type of the following action - go, next, enter, etc.
+  final TextInputAction? textInputAction;
+
+  /// Flag to disable the [TextFormField]
+  final bool isDisabled;
+
+  @override
+  State createState() => _ImPasswordFormFieldState();
+}
+
+class _ImPasswordFormFieldState extends State<ImPasswordFormField> {
+  final showPassword = ValueNotifier(false);
+
+  @override
+  void dispose() {
+    showPassword.dispose();
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return ValueListenableBuilder(
+      valueListenable: showPassword,
+      builder: (_, showPass, child) => ImTextFormField(
+        controller: widget.controller,
+        onChanged: widget.onChanged,
+        shouldObscure: !showPass,
+        hint: widget.hint,
+        label: widget.label,
+        focusNode: widget.focusNode,
+        suffixIcon: IconButton(
+          onPressed: () => showPassword.value = !showPassword.value,
+          icon: Icon(
+            showPassword.value
+                ? Symbols.visibility_off_rounded
+                : Symbols.visibility_rounded,
+          ),
+        ),
+        autoFillHints: const [AutofillHints.password],
+        keyboardType: TextInputType.visiblePassword,
+        textInputAction: widget.textInputAction,
+        isDisabled: widget.isDisabled,
+      ),
+    );
+  }
+}

mobile-v2/lib/presentation/components/input/switch_list.widget.dart

@@ -0,0 +1,62 @@
+import 'dart:async';
+
+import 'package:flutter/material.dart';
+import 'package:immich_mobile/domain/models/app_setting.model.dart';
+import 'package:immich_mobile/domain/services/app_setting.service.dart';
+import 'package:immich_mobile/service_locator.dart';
+
+class ImSwitchListTile<T> extends StatefulWidget {
+  const ImSwitchListTile(
+    this.setting, {
+    super.key,
+    this.fromAppSetting,
+    this.toAppSetting,
+  }) : assert(T == bool || (fromAppSetting != null && toAppSetting != null),
+            "Setting is not a boolean and a from / to App setting is not provided");
+
+  final AppSetting<T> setting;
+
+  /// Converts the type T to a boolean to use in a switch
+  final bool Function(T value)? fromAppSetting;
+
+  /// Converts the boolean back to the type T to be stored in the app setting. Return null to not update the DB but to
+  /// retain the previous value
+  final T? Function(bool state)? toAppSetting;
+
+  @override
+  State createState() => _ImSwitchListTileState<T>();
+}
+
+class _ImSwitchListTileState<T> extends State<ImSwitchListTile<T>> {
+  // Actual switch list state
+  late bool isEnabled;
+  final AppSettingService _appSettingService = di();
+
+  Future<void> set(bool enabled) async {
+    if (isEnabled == enabled) return;
+
+    final value = T != bool ? widget.toAppSetting!(enabled) : enabled as T;
+    if (value != null &&
+        await _appSettingService.setSetting(widget.setting, value) &&
+        context.mounted) {
+      setState(() {
+        isEnabled = enabled;
+      });
+    }
+  }
+
+  @override
+  void initState() {
+    super.initState();
+    final value = _appSettingService.getSetting(widget.setting);
+    isEnabled = T != bool ? widget.fromAppSetting!(value) : value as bool;
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return SwitchListTile(
+      value: isEnabled,
+      onChanged: (value) => set(value),
+    );
+  }
+}

mobile-v2/lib/presentation/components/input/text_button.widget.dart

@@ -0,0 +1,36 @@
+import 'package:flutter/material.dart';
+
+class ImTextButton extends StatelessWidget {
+  const ImTextButton({
+    super.key,
+    this.icon,
+    this.onPressed,
+    this.isDisabled = false,
+    required this.label,
+  });
+
+  /// Icon to display if [withIcon] is true
+  final IconData? icon;
+
+  /// Flag to disable the button
+  final bool isDisabled;
+
+  /// Action to perform on Button press
+  final VoidCallback? onPressed;
+
+  /// Label to be displayed in the button
+  final String label;
+
+  @override
+  Widget build(BuildContext context) {
+    if (icon != null) {
+      return TextButton.icon(
+        onPressed: isDisabled ? null : onPressed,
+        icon: Icon(icon),
+        label: Text(label),
+      );
+    }
+
+    return TextButton(onPressed: onPressed, child: Text(label));
+  }
+}

mobile-v2/lib/presentation/components/input/text_form_field.widget.dart

@@ -0,0 +1,86 @@
+import 'package:flutter/material.dart';
+
+class ImTextFormField extends StatelessWidget {
+  const ImTextFormField({
+    super.key,
+    this.controller,
+    this.focusNode,
+    this.onChanged,
+    this.validator,
+    this.shouldObscure = false,
+    this.suffixIcon,
+    this.label,
+    this.hint,
+    this.autoFillHints,
+    this.keyboardType,
+    this.textInputAction,
+    this.isDisabled = false,
+    this.onSubmitted,
+  }) : assert(
+          onSubmitted == null ||
+              textInputAction == TextInputAction.next ||
+              textInputAction == TextInputAction.previous,
+          "onSubmitted provided when textInputAction is not next or pervious",
+        );
+
+  /// The [TextEditingController] passed to the underlying [TextFormField]
+  final TextEditingController? controller;
+
+  /// The [FocusNode] passed to the underlying [TextFormField]
+  final FocusNode? focusNode;
+
+  /// Optional callback to validate input
+  final String? Function(String?)? validator;
+
+  /// Optional callback to receive changes
+  final void Function(String?)? onChanged;
+
+  /// Optional flag to obscure texts
+  final bool shouldObscure;
+
+  /// Icon Widget to display in the suffix
+  final Widget? suffixIcon;
+
+  /// Translation Key used as label
+  final String? label;
+
+  /// Translation key used as hint
+  final String? hint;
+
+  /// Hints used by the auto-fill service
+  final List<String>? autoFillHints;
+
+  /// Type of keyboard - Numberic / Alphanum
+  final TextInputType? keyboardType;
+
+  /// Type of the following action - go, next, enter, etc.
+  final TextInputAction? textInputAction;
+
+  /// Flag to disable the [TextFormField]
+  final bool isDisabled;
+
+  /// Called on [TextInputAction.next] or [TextInputAction.previous]
+  final void Function(String)? onSubmitted;
+
+  @override
+  Widget build(BuildContext context) {
+    return TextFormField(
+      controller: controller,
+      onChanged: onChanged,
+      focusNode: focusNode,
+      obscureText: shouldObscure,
+      validator: validator,
+      decoration: InputDecoration(
+        labelText: label,
+        hintText: hint,
+        suffixIcon: suffixIcon,
+      ),
+      autofillHints: autoFillHints,
+      keyboardType: keyboardType,
+      textInputAction: textInputAction,
+      readOnly: isDisabled,
+      onTapOutside: (_) => FocusManager.instance.primaryFocus?.unfocus(),
+      onFieldSubmitted: onSubmitted,
+    );
+  }
+}

mobile-v2/lib/presentation/components/scaffold/adaptive_route_primary_appbar.widget.dart

@@ -0,0 +1,17 @@
+import 'package:auto_route/auto_route.dart';
+import 'package:flutter/material.dart';
+
+class ImAdaptiveRoutePrimaryAppBar extends StatelessWidget
+    implements PreferredSizeWidget {
+  const ImAdaptiveRoutePrimaryAppBar({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return AppBar(
+      leading: BackButton(onPressed: () => context.router.root.maybePop()),
+    );
+  }
+
+  @override
+  Size get preferredSize => const Size.fromHeight(kToolbarHeight);
+}

mobile-v2/lib/presentation/components/scaffold/adaptive_route_secondary_appbar.widget.dart

@@ -0,0 +1,20 @@
+import 'package:auto_route/auto_route.dart';
+import 'package:flutter/material.dart';
+import 'package:immich_mobile/utils/extensions/build_context.extension.dart';
+
+class ImAdaptiveRouteSecondaryAppBar extends StatelessWidget
+    implements PreferredSizeWidget {
+  const ImAdaptiveRouteSecondaryAppBar({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return AppBar(
+      leading: context.isTablet
+          ? CloseButton(onPressed: () => context.maybePop())
+          : BackButton(onPressed: () => context.maybePop()),
+    );
+  }
+
+  @override
+  Size get preferredSize => const Size.fromHeight(kToolbarHeight);
+}

mobile-v2/lib/presentation/components/scaffold/adaptive_route_wrapper.widget.dart

@@ -0,0 +1,37 @@
+import 'package:auto_route/auto_route.dart';
+import 'package:flutter/material.dart';
+import 'package:immich_mobile/presentation/components/scaffold/adaptive_scaffold_body.widget.dart';
+import 'package:immich_mobile/utils/extensions/build_context.extension.dart';
+
+class ImAdaptiveRouteWrapper extends StatelessWidget {
+  const ImAdaptiveRouteWrapper({
+    super.key,
+    required this.primaryRoute,
+    required this.primaryBody,
+    this.bodyRatio,
+  });
+
+  /// Builder to build the primary body
+  final Widget Function(BuildContext?) primaryBody;
+
+  /// Primary route name to not render it twice in landscape
+  final String primaryRoute;
+
+  /// Ratio of primaryBody:secondaryBody
+  final double? bodyRatio;
+
+  @override
+  Widget build(BuildContext context) {
+    return AutoRouter(builder: (ctx, child) {
+      if (ctx.isTablet) {
+        return ImAdaptiveScaffoldBody(
+          primaryBody: primaryBody,
+          secondaryBody:
+              ctx.topRoute.name != primaryRoute ? (_) => child : null,
+          bodyRatio: bodyRatio,
+        );
+      }
+      return ImAdaptiveScaffoldBody(primaryBody: (_) => child);
+    });
+  }
+}

mobile-v2/lib/presentation/components/scaffold/adaptive_scaffold_body.widget.dart

@@ -0,0 +1,47 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_adaptive_scaffold/flutter_adaptive_scaffold.dart';
+
+class ImAdaptiveScaffoldBody extends StatelessWidget {
+  const ImAdaptiveScaffoldBody({
+    super.key,
+    required this.primaryBody,
+    this.secondaryBody,
+    this.bodyRatio,
+  });
+
+  /// Builder to build the primary body
+  final Widget Function(BuildContext?) primaryBody;
+
+  /// Builder to build the secondary body
+  final Widget Function(BuildContext?)? secondaryBody;
+
+  /// Ratio of primaryBody:secondaryBody
+  final double? bodyRatio;
+
+  @override
+  Widget build(BuildContext context) {
+    return AdaptiveLayout(
+      internalAnimations: false,
+      transitionDuration: const Duration(milliseconds: 300),
+      bodyRatio: bodyRatio,
+      body: SlotLayout(
+        config: {
+          Breakpoints.standard: SlotLayout.from(
+            key: const Key('ImAdaptiveScaffold Body Standard'),
+            builder: primaryBody,
+          ),
+        },
+      ),
+      secondaryBody: SlotLayout(
+        config: {
+          /// No secondary body in mobile layouts
+          Breakpoints.small: SlotLayoutConfig.empty(),
+          Breakpoints.mediumAndUp: SlotLayout.from(
+            key: const Key('ImAdaptiveScaffold Secondary Body Medium'),
+            builder: secondaryBody,
+          ),
+        },
+      ),
+    );
+  }
+}