feat: Improve library search screen (#477)

Co-authored-by: PartyDonut <PartyDonut@users.noreply.github.com>
2026-03-07 21:48:14 -08:00 · 2025-08-28 23:26:10 +02:00 · 2025-08-28 23:26:10 +02:00 · d22d340181
commit d22d340181
parent 571b682b80
41 changed files with 2881 additions and 2026 deletions
--- a/lib/widgets/navigation_scaffold/components/background_image.dart
+++ b/lib/widgets/navigation_scaffold/components/background_image.dart
@ -10,6 +10,8 @@ import 'package:fladder/providers/api_provider.dart';
 import 'package:fladder/providers/settings/client_settings_provider.dart';
 import 'package:fladder/util/fladder_image.dart';

+final _backgroundImageProvider = StateProvider<ImageData?>((ref) => null);
+
 class BackgroundImage extends ConsumerStatefulWidget {
  final List<ItemBaseModel> items;
  final List<ImagesData> images;
@ -20,7 +22,11 @@ class BackgroundImage extends ConsumerStatefulWidget {
 }

 class _BackgroundImageState extends ConsumerState<BackgroundImage> {
-  ImageData? backgroundImage;
+  @override
+  void initState() {
+    super.initState();
+    updateItems();
+  }

  @override
  void didUpdateWidget(covariant BackgroundImage oldWidget) {
@ -30,55 +36,65 @@ class _BackgroundImageState extends ConsumerState<BackgroundImage> {
    }
  }

-  @override
-  void initState() {
-    super.initState();
-    updateItems();
-  }
-
  void updateItems() {
-    final enabled =
-        ref.read(clientSettingsProvider.select((value) => value.backgroundImage != BackgroundType.disabled));
+    WidgetsBinding.instance.addPostFrameCallback((_) async {
+      final enabled = ref.read(
+        clientSettingsProvider.select((value) => value.backgroundImage != BackgroundType.disabled),
+      );
+      if (!enabled || !mounted) return;

-    WidgetsBinding.instance.addPostFrameCallback((value) async {
-      if (!enabled && mounted) return;
+      ImageData? newImage;

      if (widget.images.isNotEmpty) {
-        final image = widget.images.shuffled().firstOrNull?.primary;
-        if (mounted) setState(() => backgroundImage = image);
-        return;
+        newImage = widget.images.shuffled().firstOrNull?.primary;
+      } else if (widget.items.isNotEmpty) {
+        final randomItem = widget.items.shuffled().firstOrNull;
+        final itemId = switch (randomItem?.type) {
+          FladderItemType.folder => randomItem?.id,
+          FladderItemType.series => randomItem?.parentId ?? randomItem?.id,
+          _ => randomItem?.id,
+        };
+
+        if (itemId != null) {
+          final apiResponse = await ref.read(jellyApiProvider).usersUserIdItemsItemIdGet(itemId: itemId);
+
+          newImage = apiResponse.body?.parentBaseModel.getPosters?.randomBackDrop ??
+              apiResponse.body?.getPosters?.randomBackDrop ??
+              apiResponse.body?.getPosters?.primary;
+        }
      }

-      if (widget.items.isEmpty) return;
-
-      final randomItem = widget.items.shuffled().firstOrNull;
-      final itemId = switch (randomItem?.type) {
-        FladderItemType.folder => randomItem?.id,
-        FladderItemType.series => randomItem?.parentId ?? randomItem?.id,
-        _ => randomItem?.id,
-      };
-
-      if (itemId == null) return;
-
-      final apiResponse = await ref.read(jellyApiProvider).usersUserIdItemsItemIdGet(itemId: itemId);
-      final image = apiResponse.body?.parentBaseModel.getPosters?.randomBackDrop ??
-          apiResponse.body?.getPosters?.randomBackDrop ??
-          apiResponse.body?.getPosters?.primary;
-
-      if (mounted) setState(() => backgroundImage = image);
+      if (newImage != null && mounted) {
+        ref.read(_backgroundImageProvider.notifier).state = newImage;
+      }
    });
  }

  @override
  Widget build(BuildContext context) {
-    final state = ref.watch(clientSettingsProvider.select((value) => value.backgroundImage));
-    final enabled = state != BackgroundType.disabled;
-    return enabled
-        ? FladderImage(
-            image: backgroundImage,
-            fit: BoxFit.cover,
-            blurOnly: state == BackgroundType.blurred,
-          )
-        : const SizedBox.shrink();
+    final settings = ref.watch(clientSettingsProvider.select((value) => value.backgroundImage));
+    final enabled = settings != BackgroundType.disabled;
+    final image = ref.watch(_backgroundImageProvider);
+
+    if (!enabled || image == null) return const SizedBox.shrink();
+
+    return AnimatedSwitcher(
+      duration: const Duration(milliseconds: 500),
+      layoutBuilder: (currentChild, previousChildren) {
+        return Stack(
+          fit: StackFit.expand,
+          children: [
+            ...previousChildren,
+            if (currentChild != null) currentChild,
+          ],
+        );
+      },
+      child: FladderImage(
+        key: ValueKey(image.key),
+        image: image,
+        fit: BoxFit.cover,
+        blurOnly: settings == BackgroundType.blurred,
+      ),
+    );
  }
 }
--- a/lib/widgets/navigation_scaffold/components/side_navigation_bar.dart
+++ b/lib/widgets/navigation_scaffold/components/side_navigation_bar.dart
@ -64,7 +64,8 @@ class _SideNavigationBarState extends ConsumerState<SideNavigationBar> {
      children: [
        AdaptiveLayoutBuilder(
          adaptiveLayout: AdaptiveLayout.of(context).copyWith(
-            sideBarWidth: fullyExpanded ? expandedWidth : collapsedWidth,
+            // -0.1 offset to fix single visible pixel line
+            sideBarWidth: (fullyExpanded ? expandedWidth : collapsedWidth) - 0.1,
          ),
          child: (context) => widget.child,
        ),
--- a/lib/widgets/shared/button_group.dart
+++ b/lib/widgets/shared/button_group.dart
@ -1,5 +1,7 @@
 import 'package:flutter/material.dart';

+import 'package:fladder/util/position_provider.dart';
+
 class ExpressiveButtonGroup<T> extends StatelessWidget {
  final List<ButtonGroupOption<T>> options;
  final Set<T> selectedValues;
@ -20,44 +22,77 @@ class ExpressiveButtonGroup<T> extends StatelessWidget {
      mainAxisSize: MainAxisSize.max,
      spacing: 2,
      crossAxisAlignment: CrossAxisAlignment.stretch,
-      children: List.generate(options.length, (index) {
-        final option = options[index];
-        final isSelected = selectedValues.contains(option.value);
-        final isFirst = index == 0;
-        final isLast = index == options.length - 1;
+      children: List.generate(
+        options.length,
+        (index) {
+          final option = options[index];
+          final isSelected = selectedValues.contains(option.value);

-        final borderRadius = BorderRadius.horizontal(
-          left: isSelected || isFirst ? const Radius.circular(20) : const Radius.circular(6),
-          right: isSelected || isLast ? const Radius.circular(20) : const Radius.circular(6),
-        );
+          final position = index == 0
+              ? PositionContext.first
+              : (index == options.length - 1 ? PositionContext.last : PositionContext.middle);

-        return ElevatedButton.icon(
-          style: ElevatedButton.styleFrom(
-            shape: RoundedRectangleBorder(borderRadius: borderRadius),
-            elevation: isSelected ? 3 : 0,
-            backgroundColor: isSelected
-                ? Theme.of(context).colorScheme.primary
-                : Theme.of(context).colorScheme.surfaceContainerHighest,
-            foregroundColor:
-                isSelected ? Theme.of(context).colorScheme.onPrimary : Theme.of(context).colorScheme.onSurfaceVariant,
-            textStyle: Theme.of(context).textTheme.labelLarge,
-            padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 12),
-          ),
-          onPressed: () {
-            final newSet = Set<T>.from(selectedValues);
-            if (multiSelection) {
-              isSelected ? newSet.remove(option.value) : newSet.add(option.value);
-            } else {
-              newSet
-                ..clear()
-                ..add(option.value);
-            }
-            onSelected(newSet);
-          },
-          label: option.child,
-          icon: isSelected ? option.selected ?? const Icon(Icons.check_rounded) : option.icon,
-        );
-      }),
+          return PositionProvider(
+            position: position,
+            child: ExpressiveButton(
+              isSelected: isSelected,
+              label: option.child,
+              icon: isSelected ? option.selected ?? const Icon(Icons.check_rounded) : option.icon,
+              onPressed: () {
+                final newSet = Set<T>.from(selectedValues);
+                if (multiSelection) {
+                  isSelected ? newSet.remove(option.value) : newSet.add(option.value);
+                } else {
+                  newSet
+                    ..clear()
+                    ..add(option.value);
+                }
+                onSelected(newSet);
+              },
+            ),
+          );
+        },
+      ),
+    );
+  }
+}
+
+class ExpressiveButton extends StatelessWidget {
+  const ExpressiveButton({
+    super.key,
+    required this.isSelected,
+    required this.label,
+    this.icon,
+    required this.onPressed,
+  });
+
+  final bool isSelected;
+  final Widget label;
+  final Widget? icon;
+  final Function()? onPressed;
+
+  @override
+  Widget build(BuildContext context) {
+    final position = PositionProvider.of(context);
+    final borderRadius = BorderRadius.horizontal(
+      left: isSelected || position == PositionContext.first ? const Radius.circular(16) : const Radius.circular(4),
+      right: isSelected || position == PositionContext.last ? const Radius.circular(16) : const Radius.circular(4),
+    );
+    return ElevatedButton.icon(
+      style: ElevatedButton.styleFrom(
+        shape: RoundedRectangleBorder(borderRadius: borderRadius),
+        elevation: isSelected ? 4 : 0,
+        backgroundColor:
+            isSelected ? Theme.of(context).colorScheme.primary : Theme.of(context).colorScheme.surfaceContainerHighest,
+        foregroundColor:
+            isSelected ? Theme.of(context).colorScheme.onPrimary : Theme.of(context).colorScheme.onSurfaceVariant,
+        textStyle: Theme.of(context).textTheme.labelLarge,
+        visualDensity: VisualDensity.comfortable,
+        padding: const EdgeInsets.all(12),
+      ),
+      onPressed: onPressed,
+      label: label,
+      icon: icon,
    );
  }
 }
--- a/lib/widgets/shared/hide_on_scroll.dart
+++ b/lib/widgets/shared/hide_on_scroll.dart
@ -11,6 +11,7 @@ class HideOnScroll extends ConsumerStatefulWidget {
  final double height;
  final Widget? Function(bool visible)? visibleBuilder;
  final Duration duration;
+  final bool canHide;
  final bool forceHide;
  const HideOnScroll({
    this.child,
@ -18,6 +19,7 @@ class HideOnScroll extends ConsumerStatefulWidget {
    this.height = kBottomNavigationBarHeight,
    this.visibleBuilder,
    this.duration = const Duration(milliseconds: 200),
+    this.canHide = true,
    this.forceHide = false,
    super.key,
  }) : assert(child != null || visibleBuilder != null);
@ -46,6 +48,12 @@ class _HideOnScrollState extends ConsumerState<HideOnScroll> {
  }

  void _onScroll() {
+    if (!widget.canHide) {
+      if (!isVisible) {
+        setState(() => isVisible = true);
+      }
+      return;
+    }
    final position = scrollController.position;
    final direction = position.userScrollDirection;

@ -78,9 +86,9 @@ class _HideOnScrollState extends ConsumerState<HideOnScroll> {
      alignment: const Alignment(0, -1),
      heightFactor: widget.forceHide
          ? 0
-          : isVisible
-              ? 1.0
-              : 0,
+          : !isVisible && widget.canHide
+              ? 0.0
+              : 1.0,
      duration: widget.duration,
      child: Wrap(
        children: [widget.child!],