scroll to setting search entry and threshold for search box

This commit is contained in:
Fabian Freund
2026-05-23 18:12:58 +02:00
parent 407daad06d
commit 696ea84412
4 changed files with 256 additions and 17 deletions
@@ -0,0 +1,41 @@
/*
* Copyright (c) 2024-2026 Fabian Freund.
*
* This file is part of WebLibre
* (see https://weblibre.eu).
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU Affero General Public License as
* published by the Free Software Foundation, either version 3 of the
* License, or (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Affero General Public License for more details.
*
* You should have received a copy of the GNU Affero General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
import 'package:riverpod_annotation/riverpod_annotation.dart';
part 'pending_settings_highlight.g.dart';
/// Holds the [SettingsEntryDefinition.title] that a destination settings
/// screen should auto-scroll to and briefly pulse after navigation. Set by
/// the global settings search before pushing the destination route; consumed
/// (and cleared) by the matching entry once it has been highlighted.
@Riverpod(keepAlive: true)
class PendingSettingsHighlight extends _$PendingSettingsHighlight {
@override
String? build() => null;
// ignore: use_setters_to_change_properties
void set(String? title) {
state = title;
}
void clear() {
state = null;
}
}
@@ -0,0 +1,80 @@
// GENERATED CODE - DO NOT MODIFY BY HAND
part of 'pending_settings_highlight.dart';
// **************************************************************************
// RiverpodGenerator
// **************************************************************************
// GENERATED CODE - DO NOT MODIFY BY HAND
// ignore_for_file: type=lint, type=warning
/// Holds the [SettingsEntryDefinition.title] that a destination settings
/// screen should auto-scroll to and briefly pulse after navigation. Set by
/// the global settings search before pushing the destination route; consumed
/// (and cleared) by the matching entry once it has been highlighted.
@ProviderFor(PendingSettingsHighlight)
final pendingSettingsHighlightProvider = PendingSettingsHighlightProvider._();
/// Holds the [SettingsEntryDefinition.title] that a destination settings
/// screen should auto-scroll to and briefly pulse after navigation. Set by
/// the global settings search before pushing the destination route; consumed
/// (and cleared) by the matching entry once it has been highlighted.
final class PendingSettingsHighlightProvider
extends $NotifierProvider<PendingSettingsHighlight, String?> {
/// Holds the [SettingsEntryDefinition.title] that a destination settings
/// screen should auto-scroll to and briefly pulse after navigation. Set by
/// the global settings search before pushing the destination route; consumed
/// (and cleared) by the matching entry once it has been highlighted.
PendingSettingsHighlightProvider._()
: super(
from: null,
argument: null,
retry: null,
name: r'pendingSettingsHighlightProvider',
isAutoDispose: false,
dependencies: null,
$allTransitiveDependencies: null,
);
@override
String debugGetCreateSourceHash() => _$pendingSettingsHighlightHash();
@$internal
@override
PendingSettingsHighlight create() => PendingSettingsHighlight();
/// {@macro riverpod.override_with_value}
Override overrideWithValue(String? value) {
return $ProviderOverride(
origin: this,
providerOverride: $SyncValueProvider<String?>(value),
);
}
}
String _$pendingSettingsHighlightHash() =>
r'e64c23c22991e94ec6115ac27b5d7b9d33b801be';
/// Holds the [SettingsEntryDefinition.title] that a destination settings
/// screen should auto-scroll to and briefly pulse after navigation. Set by
/// the global settings search before pushing the destination route; consumed
/// (and cleared) by the matching entry once it has been highlighted.
abstract class _$PendingSettingsHighlight extends $Notifier<String?> {
String? build();
@$mustCallSuper
@override
void runBuild() {
final ref = this.ref as $Ref<String?, String?>;
final element =
ref.element
as $ClassProviderElement<
AnyNotifier<String?, String?>,
String?,
Object?,
Object?
>;
element.handleCreate(ref, build);
}
}
@@ -21,7 +21,9 @@ import 'package:fading_scroll/fading_scroll.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart'; import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:flutter_material_design_icons/flutter_material_design_icons.dart'; import 'package:flutter_material_design_icons/flutter_material_design_icons.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:weblibre/core/routing/routes.dart'; import 'package:weblibre/core/routing/routes.dart';
import 'package:weblibre/features/settings/domain/providers/pending_settings_highlight.dart';
import 'package:weblibre/features/settings/presentation/screens/advanced_settings.dart'; import 'package:weblibre/features/settings/presentation/screens/advanced_settings.dart';
import 'package:weblibre/features/settings/presentation/screens/browsing_settings.dart'; import 'package:weblibre/features/settings/presentation/screens/browsing_settings.dart';
import 'package:weblibre/features/settings/presentation/screens/extensions_settings.dart'; import 'package:weblibre/features/settings/presentation/screens/extensions_settings.dart';
@@ -327,7 +329,7 @@ class _CategoryTile extends StatelessWidget {
} }
} }
class _SearchResultTile extends StatelessWidget { class _SearchResultTile extends HookConsumerWidget {
final String title; final String title;
final String? subtitle; final String? subtitle;
final String category; final String category;
@@ -345,7 +347,7 @@ class _SearchResultTile extends StatelessWidget {
}); });
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context, WidgetRef ref) {
return ListTile( return ListTile(
leading: Icon(icon), leading: Icon(icon),
title: Text(title), title: Text(title),
@@ -361,7 +363,16 @@ class _SearchResultTile extends StatelessWidget {
), ),
trailing: const Icon(Icons.chevron_right), trailing: const Icon(Icons.chevron_right),
onTap: () async { onTap: () async {
await onTap(context); final pendingHighlight = ref.read(
pendingSettingsHighlightProvider.notifier,
);
pendingHighlight.set(title);
try {
await onTap(context);
} catch (_) {
pendingHighlight.clear();
rethrow;
}
}, },
); );
} }
@@ -20,6 +20,12 @@
import 'package:fading_scroll/fading_scroll.dart'; import 'package:fading_scroll/fading_scroll.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart'; import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:weblibre/features/settings/domain/providers/pending_settings_highlight.dart';
/// Default total-entry count at or below which [SettingsDetailScaffold] hides
/// its search field — searching three toggles is just visual noise.
const int kDefaultSettingsSearchEntryThreshold = 10;
class SettingsEntryDefinition { class SettingsEntryDefinition {
final String title; final String title;
@@ -82,6 +88,7 @@ class SettingsDetailScaffold extends HookWidget {
final List<SettingsSectionDefinition> sections; final List<SettingsSectionDefinition> sections;
final List<Widget> actions; final List<Widget> actions;
final String searchHintText; final String searchHintText;
final int searchEntryThreshold;
const SettingsDetailScaffold({ const SettingsDetailScaffold({
super.key, super.key,
@@ -91,16 +98,22 @@ class SettingsDetailScaffold extends HookWidget {
required this.sections, required this.sections,
this.actions = const [], this.actions = const [],
this.searchHintText = 'Search settings', this.searchHintText = 'Search settings',
this.searchEntryThreshold = kDefaultSettingsSearchEntryThreshold,
}); });
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
final totalEntries = sections.fold<int>(
0,
(sum, section) => sum + section.entries.length,
);
final showSearch = totalEntries > searchEntryThreshold;
final search = useSettingsSearch(); final search = useSettingsSearch();
final filteredSections = filterSettingsSections( final filteredSections = showSearch
sections: sections, ? filterSettingsSections(sections: sections, query: search.rawQuery)
query: search.rawQuery, : sections;
);
return Scaffold( return Scaffold(
body: SafeArea( body: SafeArea(
@@ -115,21 +128,27 @@ class SettingsDetailScaffold extends HookWidget {
title: Text(title), title: Text(title),
actions: actions, actions: actions,
), ),
SliverPadding( if (showSearch)
padding: const EdgeInsets.fromLTRB(16, 8, 16, 0), SliverPadding(
sliver: SliverToBoxAdapter( padding: const EdgeInsets.fromLTRB(16, 8, 16, 0),
child: SettingsSearchField( sliver: SliverToBoxAdapter(
controller: search.controller, child: SettingsSearchField(
hintText: searchHintText, controller: search.controller,
hintText: searchHintText,
),
), ),
), ),
),
SliverPadding( SliverPadding(
padding: const EdgeInsets.fromLTRB(16, 24, 16, 20), padding: EdgeInsets.fromLTRB(
16,
showSearch ? 24 : 16,
16,
20,
),
sliver: SliverToBoxAdapter( sliver: SliverToBoxAdapter(
child: SettingsSectionList( child: SettingsSectionList(
sections: filteredSections, sections: filteredSections,
query: search.rawQuery, query: showSearch ? search.rawQuery : '',
), ),
), ),
), ),
@@ -297,7 +316,14 @@ List<Widget> buildSettingsSectionWidgets(
entryIndex++ entryIndex++
) ...[ ) ...[
if (entryIndex > 0) const Divider(height: 1), if (entryIndex > 0) const Divider(height: 1),
sections[sectionIndex].entries[entryIndex].child, _HighlightableEntry(
key: ValueKey(
'${sections[sectionIndex].title}/'
'${sections[sectionIndex].entries[entryIndex].title}',
),
title: sections[sectionIndex].entries[entryIndex].title,
child: sections[sectionIndex].entries[entryIndex].child,
),
], ],
], ],
), ),
@@ -306,6 +332,87 @@ List<Widget> buildSettingsSectionWidgets(
]; ];
} }
/// Wraps a settings entry tile and, when [PendingSettingsHighlight] matches
/// [title], auto-scrolls it into view and briefly pulses a tint behind it.
/// Self-clears the pending highlight as soon as the destination entry handles
/// it so the effect doesn't replay on rebuild or back-navigation.
class _HighlightableEntry extends HookConsumerWidget {
final String title;
final Widget child;
const _HighlightableEntry({
super.key,
required this.title,
required this.child,
});
@override
Widget build(BuildContext context, WidgetRef ref) {
final pending = ref.watch(pendingSettingsHighlightProvider);
final isTarget = pending != null && pending == title;
final controller = useAnimationController(
duration: const Duration(milliseconds: 1500),
);
final animation = useMemoized(
() => TweenSequence<double>([
TweenSequenceItem(
tween: Tween(
begin: 0.0,
end: 1.0,
).chain(CurveTween(curve: Curves.easeOut)),
weight: 20,
),
TweenSequenceItem(tween: ConstantTween(1.0), weight: 30),
TweenSequenceItem(
tween: Tween(
begin: 1.0,
end: 0.0,
).chain(CurveTween(curve: Curves.easeIn)),
weight: 50,
),
]).animate(controller),
[controller],
);
useEffect(() {
if (!isTarget) return null;
WidgetsBinding.instance.addPostFrameCallback((_) {
// Clear immediately once this entry claims the highlight so stale
// state cannot survive a quick pop or interrupted animation.
ref.read(pendingSettingsHighlightProvider.notifier).clear();
if (!context.mounted) return;
Scrollable.ensureVisible(
context,
duration: const Duration(milliseconds: 400),
curve: Curves.easeOutCubic,
alignment: 0.2,
);
controller.forward(from: 0);
});
return null;
}, [isTarget]);
final highlightColor = Theme.of(context).colorScheme.secondaryContainer;
return AnimatedBuilder(
animation: animation,
builder: (context, child) {
final t = animation.value;
if (t == 0.0) return child!;
return ColoredBox(
color: highlightColor.withValues(alpha: t * 0.7),
child: child,
);
},
child: child,
);
}
}
List<SettingsSectionDefinition> filterSettingsSections({ List<SettingsSectionDefinition> filterSettingsSections({
required List<SettingsSectionDefinition> sections, required List<SettingsSectionDefinition> sections,
required String query, required String query,