Merge branch 'scaffold'

This commit is contained in:
Fabian Freund
2026-01-09 11:00:42 +01:00
10 changed files with 520 additions and 341 deletions
@@ -56,12 +56,59 @@ import 'package:weblibre/features/user/data/models/general_settings.dart';
import 'package:weblibre/features/user/domain/repositories/general_settings.dart';
import 'package:weblibre/utils/ui_helper.dart' as ui_helper;
/// Animated toolbar that slides in/out without changing layout constraints.
/// Uses SlideTransition to animate visual transform while maintaining
/// constant intrinsic size for layout purposes.
class _AnimatedToolbar extends HookWidget {
final bool visible;
final TabBarPosition position;
final Widget child;
static const _kAnimationDuration = Duration(milliseconds: 250);
const _AnimatedToolbar({
required this.visible,
required this.position,
required this.child,
});
@override
Widget build(BuildContext context) {
final controller = useAnimationController(
duration: _kAnimationDuration,
initialValue: visible ? 1.0 : 0.0,
);
useEffect(() {
if (visible) {
unawaited(controller.forward());
} else {
unawaited(controller.reverse());
}
return null;
}, [visible]);
final slideAnimation = useMemoized(() {
final begin = position == TabBarPosition.top
? const Offset(0, -1)
: const Offset(0, 1);
return Tween<Offset>(begin: begin, end: Offset.zero).animate(
CurvedAnimation(parent: controller, curve: Curves.easeInOutQuart),
);
}, [position]);
return SlideTransition(position: slideAnimation, child: child);
}
}
/// Manages scroll-based auto-hide logic and returns the toolbar widget.
/// Animation is handled by the parent _AnimatedToolbar wrapper.
class _TabBar extends HookConsumerWidget {
final bool showMainToolbar;
final bool showContextualToolbar;
final bool showQuickTabSwitcherBar;
final ValueNotifier<bool> displayAppBar;
final ValueNotifier<PersistentBottomSheetController?> sheetController;
final Stream<Offset>? pointerMoveEvents;
final TabBarPosition tabBarPosition;
@@ -70,7 +117,6 @@ class _TabBar extends HookConsumerWidget {
required this.showContextualToolbar,
required this.showQuickTabSwitcherBar,
required this.displayAppBar,
required this.sheetController,
required this.tabBarPosition,
required this.pointerMoveEvents,
});
@@ -80,10 +126,6 @@ class _TabBar extends HookConsumerWidget {
final tabId = ref.watch(selectedTabProvider);
final displayedSheet = ref.watch(bottomSheetControllerProvider);
final tabInFullScreen = ref.watch(
selectedTabStateProvider.select((value) => value?.isFullScreen ?? false),
);
final autoHideTabBar = switch (tabBarPosition) {
TabBarPosition.top => false,
TabBarPosition.bottom => ref.watch(
@@ -93,48 +135,26 @@ class _TabBar extends HookConsumerWidget {
),
};
final appBarVisible = tabBarPosition == TabBarPosition.top
? !ref.watch(tabBarDismissableControllerProvider)
: useValueListenable(displayAppBar);
if (!autoHideTabBar) {
return Visibility(
visible: !tabInFullScreen && appBarVisible,
child: switch (tabBarPosition) {
TabBarPosition.top => BrowserTopAppBar(
showMainToolbar: showMainToolbar,
showContextualToolbar: showContextualToolbar,
showQuickTabSwitcherBar: showQuickTabSwitcherBar,
),
TabBarPosition.bottom => BrowserBottomAppBar(
displayedSheet: displayedSheet,
showMainToolbar: showMainToolbar,
showContextualToolbar: showContextualToolbar,
showQuickTabSwitcherBar: showQuickTabSwitcherBar,
),
},
);
}
// Auto-hide scroll detection hooks (run unconditionally per hook rules)
final diffAcc = useRef(0.0);
void resetHiddenState() {
if (!ref.read(tabBarDismissableControllerProvider)) {
displayAppBar.value = true;
}
diffAcc.value = 0.0;
}
useEffect(() {
if (!autoHideTabBar) return null;
WidgetsBinding.instance.addPostFrameCallback((_) {
resetHiddenState();
});
return null;
}, [tabId]);
}, [tabId, autoHideTabBar]);
useOnAppLifecycleStateChange((previous, current) {
if (!autoHideTabBar) return;
if (current == AppLifecycleState.resumed) {
resetHiddenState();
}
@@ -144,6 +164,7 @@ class _TabBar extends HookConsumerWidget {
previous,
next,
) {
if (!autoHideTabBar) return;
if (next == true) {
resetHiddenState();
}
@@ -153,6 +174,7 @@ class _TabBar extends HookConsumerWidget {
previous,
next,
) {
if (!autoHideTabBar) return;
if (next != null && previous != null) {
if (previous != next) {
resetHiddenState();
@@ -163,12 +185,12 @@ class _TabBar extends HookConsumerWidget {
useOnStreamChange(
pointerMoveEvents,
onData: (event) {
if (!autoHideTabBar) return;
final diff = event.dy;
if (diff < 0) {
if (diffAcc.value > 0) {
diffAcc.value = 0.0;
}
diffAcc.value += diff;
if (diffAcc.value.abs() > kToolbarHeight * 1.5) {
displayAppBar.value = false;
@@ -177,7 +199,6 @@ class _TabBar extends HookConsumerWidget {
if (diffAcc.value < 0) {
diffAcc.value = 0.0;
}
diffAcc.value += diff;
if (diffAcc.value.abs() > kToolbarHeight) {
resetHiddenState();
@@ -186,29 +207,20 @@ class _TabBar extends HookConsumerWidget {
},
);
return AnimatedSize(
duration: const Duration(milliseconds: 250),
curve: Curves.easeInOutQuart,
child: Visibility(
visible:
sheetController.value != null ||
(!tabInFullScreen && appBarVisible),
maintainState: true,
child: switch (tabBarPosition) {
TabBarPosition.top => BrowserTopAppBar(
showMainToolbar: showMainToolbar,
showContextualToolbar: showContextualToolbar,
showQuickTabSwitcherBar: showQuickTabSwitcherBar,
),
TabBarPosition.bottom => BrowserBottomAppBar(
showMainToolbar: showMainToolbar,
displayedSheet: displayedSheet,
showContextualToolbar: showContextualToolbar,
showQuickTabSwitcherBar: showQuickTabSwitcherBar,
),
},
// Return the toolbar widget - parent handles animation
return switch (tabBarPosition) {
TabBarPosition.top => BrowserTopAppBar(
showMainToolbar: showMainToolbar,
showContextualToolbar: showContextualToolbar,
showQuickTabSwitcherBar: showQuickTabSwitcherBar,
),
);
TabBarPosition.bottom => BrowserBottomAppBar(
displayedSheet: displayedSheet,
showMainToolbar: showMainToolbar,
showContextualToolbar: showContextualToolbar,
showQuickTabSwitcherBar: showQuickTabSwitcherBar,
),
};
}
}
@@ -244,13 +256,9 @@ class BrowserScreen extends HookConsumerWidget {
);
final displayAppBar = useValueNotifier(true);
final removeTopAppBar = useState(false);
ref.listen(tabBarDismissableControllerProvider, (previous, next) {
displayAppBar.value = !next;
if (tabBarPosition == TabBarPosition.bottom) {
removeTopAppBar.value = next;
}
});
ref.listen(overlayControllerProvider, (previous, next) {
@@ -270,26 +278,60 @@ class BrowserScreen extends HookConsumerWidget {
},
);
final themeData = useMemoized(
() => Theme.of(context).copyWith(
bottomSheetTheme: BottomSheetThemeData(
constraints: BoxConstraints(
maxWidth:
MediaQuery.of(context).size.width -
math.max(
MediaQuery.of(context).padding.left * 2,
MediaQuery.of(context).padding.right * 2,
),
),
final pointerMoveEventsController = useStreamController<Offset>();
// Watch sheet state for rendering in Stack
final displayedSheet = ref.watch(bottomSheetControllerProvider);
final sheetDisplayed = displayedSheet != null;
// Compute visibility states for toolbars
final appBarVisible = useValueListenable(displayAppBar);
final topDismissed = ref.watch(tabBarDismissableControllerProvider);
// Toolbar is visible when: sheet is shown OR (not fullscreen AND app bar visible)
final topToolbarVisible =
sheetDisplayed || (!tabInFullScreen && !topDismissed);
final bottomToolbarVisible =
sheetDisplayed || (!tabInFullScreen && appBarVisible);
// Calculate relative safe area for sheet max size
final relativeSafeArea = MediaQuery.of(context).relativeSafeArea();
final bottomSafeArea = MediaQuery.of(context).padding.bottom;
// Calculate bottom toolbar size for FAB and sheet positioning
// Pass actual displayedSheet to get correct height when ViewTabsSheet hides main toolbar
final bottomAppBarContentSize = BrowserBottomAppBar(
showMainToolbar: tabBarPosition == TabBarPosition.bottom,
showContextualToolbar: showContextualToolbar,
showQuickTabSwitcherBar: showQuickTabSwitcherBar,
displayedSheet: displayedSheet,
).preferredSize;
// Total height includes safe area padding
final bottomAppBarTotalHeight =
bottomAppBarContentSize.height + bottomSafeArea;
// Theme with dynamic snackbar margin to position above bottom toolbar
final themeData = Theme.of(context).copyWith(
bottomSheetTheme: BottomSheetThemeData(
constraints: BoxConstraints(
maxWidth:
MediaQuery.of(context).size.width -
math.max(
MediaQuery.of(context).padding.left * 2,
MediaQuery.of(context).padding.right * 2,
),
),
),
snackBarTheme: SnackBarThemeData(
behavior: SnackBarBehavior.floating,
insetPadding: EdgeInsets.only(
left: 16,
right: 16,
bottom: bottomToolbarVisible ? bottomAppBarTotalHeight + 8 : 16,
),
),
[],
);
final sheetController = useState<PersistentBottomSheetController?>(null);
final pointerMoveEventsController = useStreamController<Offset>();
return PopScope(
//We need this for BackButtonListener to work downstream
//No direct pop result will be handled here
@@ -297,57 +339,146 @@ class BrowserScreen extends HookConsumerWidget {
child: Theme(
data: themeData,
child: Scaffold(
extendBodyBehindAppBar: tabInFullScreen,
bottomSheetScrimBuilder: (_, _) {
//This causes issues with a non dismissable barrier pushed, we ahve our own barrier and this does seem to have issues when dismissing, so disable it completely
return null;
},
appBar: (tabBarPosition == TabBarPosition.top)
? PreferredSize(
preferredSize: BrowserTopAppBar(
showMainToolbar: true,
showContextualToolbar: showContextualToolbar,
showQuickTabSwitcherBar: showQuickTabSwitcherBar,
).preferredSize,
child: _TabBar(
tabBarPosition: TabBarPosition.top,
showMainToolbar: true,
displayAppBar: displayAppBar,
sheetController: sheetController,
showContextualToolbar: showContextualToolbar,
showQuickTabSwitcherBar: showQuickTabSwitcherBar,
pointerMoveEvents: null,
// Minimal scaffold - only for Material overlay support (SnackBars)
resizeToAvoidBottomInset: false,
body: Stack(
children: [
// Layer 0: Browser content (fills entire Stack - constant dimensions)
Positioned.fill(
child: _Browser(
overlayController: overlayController,
displayAppBar: displayAppBar,
tabInFullScreen: tabInFullScreen,
pointerMoveEventSink: pointerMoveEventsController.sink,
sheetDisplayed: sheetDisplayed,
),
),
// Layer 1: Sheet (when displayed) - positioned above toolbar
if (sheetDisplayed)
Positioned(
left: 0,
right: 0,
top: 0,
bottom: bottomAppBarTotalHeight,
child: _SheetContainer(
displayedSheet: displayedSheet,
relativeSafeArea: relativeSafeArea,
bottomAppBarHeight: bottomAppBarTotalHeight,
),
)
: removeTopAppBar.value
? const PreferredSize(
preferredSize: Size.zero,
child: SizedBox.shrink(),
)
: null,
bottomNavigationBar: _TabBar(
tabBarPosition: TabBarPosition.bottom,
displayAppBar: displayAppBar,
sheetController: sheetController,
showMainToolbar: tabBarPosition == TabBarPosition.bottom,
showContextualToolbar: showContextualToolbar,
showQuickTabSwitcherBar: showQuickTabSwitcherBar,
pointerMoveEvents: pointerMoveEventsController.stream,
),
// Layer 2: Bottom Toolbar (overlay, slides in/out)
Positioned(
left: 0,
right: 0,
bottom: 0,
child: _AnimatedToolbar(
position: TabBarPosition.bottom,
visible: bottomToolbarVisible,
child: _TabBar(
tabBarPosition: TabBarPosition.bottom,
displayAppBar: displayAppBar,
showMainToolbar: tabBarPosition == TabBarPosition.bottom,
showContextualToolbar: showContextualToolbar,
showQuickTabSwitcherBar: showQuickTabSwitcherBar,
pointerMoveEvents: pointerMoveEventsController.stream,
),
),
),
// Layer 3: Top Toolbar (overlay, slides in/out) - only when position is top
if (tabBarPosition == TabBarPosition.top)
Positioned(
left: 0,
right: 0,
top: 0,
child: _AnimatedToolbar(
position: TabBarPosition.top,
visible: topToolbarVisible,
child: _TabBar(
tabBarPosition: TabBarPosition.top,
showMainToolbar: true,
displayAppBar: displayAppBar,
showContextualToolbar: showContextualToolbar,
showQuickTabSwitcherBar: showQuickTabSwitcherBar,
pointerMoveEvents: null,
),
),
),
// Layer 4: FAB (animates position with toolbar visibility)
AnimatedPositioned(
duration: _AnimatedToolbar._kAnimationDuration,
curve: Curves.easeInOutQuart,
right: 16,
bottom: bottomToolbarVisible
? bottomAppBarTotalHeight + 16
: 16 + bottomSafeArea,
child: const BrowserFab(),
),
],
),
body: _Browser(
overlayController: overlayController,
sheetController: sheetController,
displayAppBar: displayAppBar,
tabInFullScreen: tabInFullScreen,
pointerMoveEventSink: pointerMoveEventsController.sink,
bottomAppBarSize: BrowserBottomAppBar(
showMainToolbar: false,
showContextualToolbar: showContextualToolbar,
showQuickTabSwitcherBar: showQuickTabSwitcherBar,
displayedSheet: null,
).preferredSize,
),
),
);
}
}
/// Container widget for bottom sheets - renders in Stack for proper layering.
class _SheetContainer extends HookConsumerWidget {
final Sheet displayedSheet;
final double relativeSafeArea;
final double bottomAppBarHeight;
const _SheetContainer({
required this.displayedSheet,
required this.relativeSafeArea,
required this.bottomAppBarHeight,
});
@override
Widget build(BuildContext context, WidgetRef ref) {
// Memoize maxChildSize to prevent keyboard from affecting sheet size
final stableMaxChildSize = useMemoized(() => relativeSafeArea, []);
bool dismissOnThreshold(DraggableScrollableNotification notification) {
if (notification.extent <= 0.1) {
logger.i('Dismissing sheet, reached min extend');
ref.read(bottomSheetControllerProvider.notifier).requestDismiss();
return true;
}
return false;
}
return GestureDetector(
onTap: () {
// Dismiss sheet when tapping outside
ref.read(bottomSheetControllerProvider.notifier).requestDismiss();
},
child: ColoredBox(
color: Colors.black54, // Scrim
child: GestureDetector(
onTap: () {}, // Prevent tap from propagating to parent
child: Align(
alignment: Alignment.bottomCenter,
child: switch (displayedSheet) {
ViewTabsSheet() =>
NotificationListener<DraggableScrollableNotification>(
onNotification: dismissOnThreshold,
child: _ViewTabsSheet(maxChildSize: stableMaxChildSize),
),
final EditUrlSheet parameter =>
NotificationListener<DraggableScrollableNotification>(
onNotification: dismissOnThreshold,
child: _ViewUrlSheet(
initialTabState: parameter.tabState,
maxChildSize: stableMaxChildSize,
bottomAppBarHeight: bottomAppBarHeight,
),
),
},
),
floatingActionButton: const BrowserFab(),
),
),
);
@@ -358,20 +489,17 @@ class _Browser extends HookConsumerWidget {
Duration get _backButtonPressTimeout => const Duration(seconds: 2);
final OverlayPortalController overlayController;
final ValueNotifier<PersistentBottomSheetController?> sheetController;
final ValueNotifier<bool> displayAppBar;
final StreamSink<Offset> pointerMoveEventSink;
final Size bottomAppBarSize;
final bool tabInFullScreen;
final bool sheetDisplayed;
const _Browser({
required this.overlayController,
required this.sheetController,
required this.displayAppBar,
required this.tabInFullScreen,
required this.pointerMoveEventSink,
required this.bottomAppBarSize,
required this.sheetDisplayed,
});
@override
@@ -380,88 +508,6 @@ class _Browser extends HookConsumerWidget {
final overlayBuilder = ref.watch(overlayControllerProvider);
ref.listen(bottomSheetControllerProvider, (previous, next) {
if (!context.mounted) {
logger.e('Cannot show sheet, context not mounted');
return;
}
WidgetsBinding.instance.addPostFrameCallback((_) {
if (!context.mounted) {
logger.e('Cannot show sheet, context not mounted (post frame)');
return;
}
// Close existing sheet
if (sheetController.value != null) {
try {
final existingController = sheetController.value!;
sheetController.value = null;
existingController.close();
} catch (e) {
logger.e('Error closing existing sheet', error: e);
}
}
// Show new sheet
if (next != null) {
try {
final relativeSafeArea = MediaQuery.of(context).relativeSafeArea();
final controller = Scaffold.of(context).showBottomSheet((context) {
logger.i(
'Building bottom sheet, relativeSafeArea: $relativeSafeArea, mounted: ${context.mounted}',
);
bool dismissOnThreshold(
DraggableScrollableNotification notification,
) {
if (notification.extent <= 0.1) {
logger.i('Dismissing sheet, reached min extend');
ref
.read(bottomSheetControllerProvider.notifier)
.requestDismiss();
return true;
}
return false;
}
final sheet = switch (next) {
ViewTabsSheet() =>
NotificationListener<DraggableScrollableNotification>(
key: UniqueKey(),
onNotification: dismissOnThreshold,
child: _ViewTabsSheet(maxChildSize: relativeSafeArea),
),
final EditUrlSheet parameter =>
NotificationListener<DraggableScrollableNotification>(
key: UniqueKey(),
onNotification: dismissOnThreshold,
child: _ViewUrlSheet(
initialTabState: parameter.tabState,
maxChildSize: relativeSafeArea,
bottomAppBarSize: bottomAppBarSize,
),
),
};
return sheet;
});
unawaited(
controller.closed.whenComplete(() {
ref.read(bottomSheetControllerProvider.notifier).closed(next);
}),
);
sheetController.value = controller;
} catch (e) {
debugPrint('Failed to show bottom sheet: $e');
}
}
});
});
return DragTarget<TabDragData>(
onMove: (details) {
ref
@@ -491,7 +537,7 @@ class _Browser extends HookConsumerWidget {
return overlayBuilder!.call(context);
},
child: Listener(
onPointerDown: sheetController.value != null
onPointerDown: sheetDisplayed
? (_) {
ref
.read(bottomSheetControllerProvider.notifier)
@@ -606,7 +652,6 @@ class _Browser extends HookConsumerWidget {
}
},
child: _BrowserView(
sheetDisplayed: sheetController.value != null,
isFullscreen: tabInFullScreen,
pointerMoveEventSink: pointerMoveEventSink,
),
@@ -619,88 +664,76 @@ class _Browser extends HookConsumerWidget {
}
class _BrowserView extends StatelessWidget {
final bool sheetDisplayed;
final bool isFullscreen;
final StreamSink<Offset>? pointerMoveEventSink;
const _BrowserView({
required this.sheetDisplayed,
required this.isFullscreen,
this.pointerMoveEventSink,
});
const _BrowserView({required this.isFullscreen, this.pointerMoveEventSink});
@override
Widget build(BuildContext context) {
return Stack(
children: [
SafeArea(
top: !isFullscreen,
right: !isFullscreen,
bottom: !isFullscreen,
left: !isFullscreen,
child: Stack(
children: [
BrowserView(pointerMoveEventSink: pointerMoveEventSink),
Positioned(
bottom: 0,
left: 0,
right: 0,
child: Consumer(
builder: (context, ref, child) {
final value = ref.watch(
selectedTabStateProvider.select((state) {
if (state?.isLoading == true) {
return state?.progress ?? 100;
}
//When not loading we assumed finished
return 100;
}),
);
return Visibility(
visible: value < 100,
child: LinearProgressIndicator(value: value / 100),
);
},
),
),
Positioned(
bottom: 0,
left: 0,
right: 0,
child: Consumer(
builder: (context, ref, child) {
final value = ref.watch(
selectedTabStateProvider.select(
(state) => EdgeInsets.only(
bottom:
(state?.isLoading == true &&
state?.progress != null &&
state!.progress < 100)
? 4.0
: 0.0,
),
),
);
final tabId = ref.watch(selectedTabProvider);
if (tabId == null) {
return const SizedBox.shrink();
return SafeArea(
top: !isFullscreen,
right: !isFullscreen,
// Bottom SafeArea is handled by the overlay toolbar (BottomAppBar)
bottom: false,
left: !isFullscreen,
child: Stack(
children: [
BrowserView(pointerMoveEventSink: pointerMoveEventSink),
Positioned(
bottom: 0,
left: 0,
right: 0,
child: Consumer(
builder: (context, ref, child) {
final value = ref.watch(
selectedTabStateProvider.select((state) {
if (state?.isLoading == true) {
return state?.progress ?? 100;
}
return FindInPageWidget(tabId: tabId, padding: value);
},
),
),
],
//When not loading we assumed finished
return 100;
}),
);
return Visibility(
visible: value < 100,
child: LinearProgressIndicator(value: value / 100),
);
},
),
),
),
if (sheetDisplayed)
ModalBarrier(
color: Theme.of(context).dialogTheme.barrierColor ?? Colors.black54,
Positioned(
bottom: 0,
left: 0,
right: 0,
child: Consumer(
builder: (context, ref, child) {
final value = ref.watch(
selectedTabStateProvider.select(
(state) => EdgeInsets.only(
bottom:
(state?.isLoading == true &&
state?.progress != null &&
state!.progress < 100)
? 4.0
: 0.0,
),
),
);
final tabId = ref.watch(selectedTabProvider);
if (tabId == null) {
return const SizedBox.shrink();
}
return FindInPageWidget(tabId: tabId, padding: value);
},
),
),
],
],
),
);
}
}
@@ -708,11 +741,11 @@ class _BrowserView extends StatelessWidget {
class _ViewUrlSheet extends HookConsumerWidget {
final double maxChildSize;
final TabState initialTabState;
final Size bottomAppBarSize;
final double bottomAppBarHeight;
const _ViewUrlSheet({
required this.initialTabState,
required this.bottomAppBarSize,
required this.bottomAppBarHeight,
this.maxChildSize = 1.0,
});
@@ -729,11 +762,12 @@ class _ViewUrlSheet extends HookConsumerWidget {
minChildSize: 0.1,
maxChildSize: maxChildSize,
builder: (context, scrollController) {
return ClipRRect(
return Material(
borderRadius: const BorderRadius.only(
topLeft: Radius.circular(28),
topRight: Radius.circular(28),
),
clipBehavior: Clip.antiAlias,
child: ViewTabSheetWidget(
initialTabState: initialTabState,
sheetScrollController: scrollController,
@@ -752,7 +786,7 @@ class _ViewUrlSheet extends HookConsumerWidget {
}
},
initialHeight: initialHeight,
bottomAppBarHeight: bottomAppBarSize.height,
bottomAppBarHeight: bottomAppBarHeight,
),
);
},
@@ -781,11 +815,12 @@ class _ViewTabsSheet extends HookConsumerWidget {
minChildSize: 0.1,
maxChildSize: maxChildSize,
builder: (context, scrollController) {
return ClipRRect(
return Material(
borderRadius: const BorderRadius.only(
topLeft: Radius.circular(28),
topRight: Radius.circular(28),
),
clipBehavior: Clip.antiAlias,
child: switch (tabsViewMode) {
TabsViewMode.list => ViewTabListWidget(
scrollController: scrollController,
@@ -120,10 +120,19 @@ class BrowserBottomAppBar extends HookConsumerWidget {
@override
Widget build(BuildContext context, WidgetRef ref) {
return BottomAppBar(
height: _size.height,
padding: EdgeInsets.zero,
child: _tabBar,
final bottomPadding = MediaQuery.of(context).padding.bottom;
return Material(
elevation: 3.0,
surfaceTintColor: Theme.of(context).colorScheme.surfaceTint,
color: Theme.of(context).colorScheme.surfaceContainer,
child: Padding(
padding: EdgeInsets.only(bottom: bottomPadding),
child: SizedBox(
height: _size.height,
child: _tabBar,
),
),
);
}
@@ -271,8 +280,10 @@ class BrowserTabBar extends HookConsumerWidget {
visible: displayAppBar,
maintainState: true,
child: AppBar(
primary: false,
automaticallyImplyLeading: false,
titleSpacing: 8.0,
toolbarHeight: kToolbarHeight,
backgroundColor:
(containerColor != null && displayedSheet is! ViewTabsSheet)
? ContainerColors.forAppBar(containerColor)
@@ -192,6 +192,7 @@ class ViewTabSheetWidget extends HookConsumerWidget {
controller: sheetScrollController,
builder: (context, controller) {
return ListView(
padding: EdgeInsets.zero,
controller: controller,
physics: const ClampingScrollPhysicsWithoutImplicit(),
children: [
@@ -27,7 +27,6 @@ import 'package:weblibre/features/geckoview/features/tabs/domain/repositories/co
import 'package:weblibre/features/geckoview/features/tabs/domain/repositories/tab.dart';
import 'package:weblibre/features/geckoview/features/tabs/domain/repositories/tab_search.dart';
import 'package:weblibre/features/user/domain/repositories/general_settings.dart';
import 'package:weblibre/presentation/hooks/scroll_visibility.dart';
class _TabDraggable extends HookConsumerWidget {
final TabEntity entity;
@@ -346,6 +345,7 @@ class _TabGrid extends StatelessWidget {
Widget build(BuildContext context) {
return GridView.builder(
controller: scrollController,
padding: EdgeInsets.zero,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
//Sync values for itemHeight calculation _calculateItemHeight
childAspectRatio: 0.75,
@@ -390,6 +390,9 @@ class ViewTabGridWidget extends HookConsumerWidget {
final bool tabsReorderable;
final VoidCallback onClose;
static const _hideThreshold = 0.02; // 2% of sheet size change
static const _showThreshold = 0.02;
const ViewTabGridWidget({
required this.onClose,
required this.scrollController,
@@ -401,8 +404,74 @@ class ViewTabGridWidget extends HookConsumerWidget {
@override
Widget build(BuildContext context, WidgetRef ref) {
// Track FAB visibility based on scroll direction
final isFabVisible = useScrollVisibility(scrollController);
final isFabVisible = useState(true);
final lastSheetSize = useRef(0.0);
final isInitialized = useRef(false);
// Delay initialization to ignore initial animations
useEffect(() {
final timer = Timer(const Duration(milliseconds: 500), () {
isInitialized.value = true;
// Initialize lastSheetSize with current size
if (draggableScrollableController?.isAttached == true) {
lastSheetSize.value = draggableScrollableController!.size;
}
});
return timer.cancel;
}, []);
// Listen to DraggableScrollableController for sheet size changes
useEffect(() {
final controller = draggableScrollableController;
if (controller == null) return null;
void listener() {
if (!isInitialized.value) return;
if (!controller.isAttached) return;
final currentSize = controller.size;
final difference = currentSize - lastSheetSize.value;
// Hide when sheet expands (dragging up / scrolling down)
if (difference > _hideThreshold && isFabVisible.value) {
isFabVisible.value = false;
}
// Show when sheet collapses (dragging down / scrolling up)
else if (difference < -_showThreshold && !isFabVisible.value) {
isFabVisible.value = true;
}
lastSheetSize.value = currentSize;
}
controller.addListener(listener);
return () => controller.removeListener(listener);
}, [draggableScrollableController]);
// Fallback: Also listen to scroll controller for fullscreen mode (no draggable sheet)
useEffect(() {
if (draggableScrollableController != null) return null;
var lastOffset = 0.0;
void listener() {
if (!isInitialized.value) return;
final currentOffset = scrollController.offset;
final difference = currentOffset - lastOffset;
if (difference > 10.0 && isFabVisible.value) {
isFabVisible.value = false;
} else if ((difference < -10.0 || currentOffset <= 0) &&
!isFabVisible.value) {
isFabVisible.value = true;
}
lastOffset = currentOffset;
}
scrollController.addListener(listener);
return () => scrollController.removeListener(listener);
}, [scrollController, draggableScrollableController]);
return Stack(
alignment: Alignment.bottomRight,
@@ -25,7 +25,6 @@ import 'package:weblibre/features/geckoview/features/tabs/domain/repositories/co
import 'package:weblibre/features/geckoview/features/tabs/domain/repositories/tab.dart';
import 'package:weblibre/features/geckoview/features/tabs/domain/repositories/tab_search.dart';
import 'package:weblibre/features/user/domain/repositories/general_settings.dart';
import 'package:weblibre/presentation/hooks/scroll_visibility.dart';
class _TabDraggable extends HookConsumerWidget {
final TabEntity entity;
@@ -194,6 +193,7 @@ class _TabListView extends HookConsumerWidget {
builder: (context, controller) {
return !tabsReorderable
? ListView.builder(
padding: EdgeInsets.zero,
controller: scrollController,
itemCount: itemCount,
itemExtent: _itemHeight,
@@ -359,6 +359,9 @@ class ViewTabListWidget extends HookConsumerWidget {
final bool tabsReorderable;
final VoidCallback onClose;
static const _hideThreshold = 0.02; // 2% of sheet size change
static const _showThreshold = 0.02;
const ViewTabListWidget({
required this.onClose,
required this.scrollController,
@@ -370,8 +373,74 @@ class ViewTabListWidget extends HookConsumerWidget {
@override
Widget build(BuildContext context, WidgetRef ref) {
// Track FAB visibility based on scroll direction
final isFabVisible = useScrollVisibility(scrollController);
final isFabVisible = useState(true);
final lastSheetSize = useRef(0.0);
final isInitialized = useRef(false);
// Delay initialization to ignore initial animations
useEffect(() {
final timer = Timer(const Duration(milliseconds: 500), () {
isInitialized.value = true;
// Initialize lastSheetSize with current size
if (draggableScrollableController?.isAttached == true) {
lastSheetSize.value = draggableScrollableController!.size;
}
});
return timer.cancel;
}, []);
// Listen to DraggableScrollableController for sheet size changes
useEffect(() {
final controller = draggableScrollableController;
if (controller == null) return null;
void listener() {
if (!isInitialized.value) return;
if (!controller.isAttached) return;
final currentSize = controller.size;
final difference = currentSize - lastSheetSize.value;
// Hide when sheet expands (dragging up / scrolling down)
if (difference > _hideThreshold && isFabVisible.value) {
isFabVisible.value = false;
}
// Show when sheet collapses (dragging down / scrolling up)
else if (difference < -_showThreshold && !isFabVisible.value) {
isFabVisible.value = true;
}
lastSheetSize.value = currentSize;
}
controller.addListener(listener);
return () => controller.removeListener(listener);
}, [draggableScrollableController]);
// Fallback: Also listen to scroll controller for fullscreen mode (no draggable sheet)
useEffect(() {
if (draggableScrollableController != null) return null;
var lastOffset = 0.0;
void listener() {
if (!isInitialized.value) return;
final currentOffset = scrollController.offset;
final difference = currentOffset - lastOffset;
if (difference > 10.0 && isFabVisible.value) {
isFabVisible.value = false;
} else if ((difference < -10.0 || currentOffset <= 0) &&
!isFabVisible.value) {
isFabVisible.value = true;
}
lastOffset = currentOffset;
}
scrollController.addListener(listener);
return () => scrollController.removeListener(listener);
}, [scrollController, draggableScrollableController]);
return Stack(
alignment: Alignment.bottomRight,
@@ -443,31 +443,18 @@ class TabViewHeader extends HookConsumerWidget {
}
if (context.mounted) {
ScaffoldMessenger.of(
ui_helper.showInfoMessage(
context,
).showSnackBar(
SnackBar(
content: Text(
shouldReopenTabs
? 'Container data cleared successfully'
: 'Container data cleared. ${tabs.length} tab(s) closed.',
),
),
shouldReopenTabs
? 'Container data cleared successfully'
: 'Container data cleared. ${tabs.length} tab(s) closed.',
);
}
} catch (e) {
if (context.mounted) {
ScaffoldMessenger.of(
ui_helper.showErrorMessage(
context,
).showSnackBar(
SnackBar(
content: Text(
'Error clearing data: $e',
),
backgroundColor: Theme.of(
context,
).colorScheme.error,
),
'Error clearing data: $e',
);
}
}
@@ -25,6 +25,7 @@ import 'package:weblibre/core/filesystem.dart';
import 'package:weblibre/domain/entities/profile.dart';
import 'package:weblibre/features/user/domain/repositories/profile.dart';
import 'package:weblibre/utils/exit_app.dart';
import 'package:weblibre/utils/ui_helper.dart' as ui_helper;
/// Handles the profile switching flow with confirmation dialog and cache clearing options.
///
@@ -43,9 +44,7 @@ Future<void> handleSwitchProfile(
// Don't allow switching to the already active profile
if (isSelected) {
if (context.mounted) {
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(content: Text('This profile is already active')),
);
ui_helper.showInfoMessage(context, 'This profile is already active');
}
return;
}
+27 -13
View File
@@ -22,21 +22,40 @@ import 'package:nullability/nullability.dart';
import 'package:url_launcher/url_launcher.dart';
import 'package:weblibre/utils/clipboard.dart';
/// Creates a floating snackbar.
/// The margin is controlled by the scaffold's snackBarTheme for proper
/// positioning above bottom app bars of varying heights.
SnackBar _createFloatingSnackBar({
required Widget content,
Color? backgroundColor,
SnackBarAction? action,
Duration duration = const Duration(seconds: 4),
bool persist = false,
}) {
return SnackBar(
content: content,
backgroundColor: backgroundColor,
action: action,
duration: duration,
persist: persist,
behavior: SnackBarBehavior.floating,
);
}
void showErrorMessage(BuildContext context, String message) {
final snackBar = SnackBar(
final snackBar = _createFloatingSnackBar(
content: Text(
message,
style: TextStyle(color: Theme.of(context).colorScheme.error),
),
backgroundColor: Theme.of(context).colorScheme.onError,
persist: false,
);
ScaffoldMessenger.of(context).showSnackBar(snackBar);
}
void showInfoMessage(BuildContext context, String message) {
final snackBar = SnackBar(content: Text(message), persist: false);
final snackBar = _createFloatingSnackBar(content: Text(message));
ScaffoldMessenger.of(context).showSnackBar(snackBar);
}
@@ -46,12 +65,11 @@ void showTabBackButtonMessage(
int tabCount,
Duration duration,
) {
final snackbar = SnackBar(
final snackbar = _createFloatingSnackBar(
content: (tabCount > 1)
? const Text('Navigate BACK again to close current tab')
: const Text('Navigate BACK again to exit app'),
duration: duration,
persist: false,
);
ScaffoldMessenger.of(context)
@@ -70,13 +88,12 @@ void showTabOpenedMessage(
null => 'New tab opened in background',
};
final snackBar = SnackBar(
final snackBar = _createFloatingSnackBar(
content: Text(message),
action: onShow.mapNotNull(
(onPressed) => SnackBarAction(label: 'Show', onPressed: onPressed),
),
duration: duration,
persist: false,
);
ScaffoldMessenger.of(context).showSnackBar(snackBar);
@@ -90,7 +107,7 @@ Future<void> showSuggestNewTabMessage(
final clipboardUrl = await tryGetUriFromClipboard();
if (clipboardUrl != null) {
final snackBar = SnackBar(
final snackBar = _createFloatingSnackBar(
content: const Text('Want to open link from clipboard?'),
action: SnackBarAction(
label: 'Open',
@@ -99,7 +116,6 @@ Future<void> showSuggestNewTabMessage(
},
),
duration: duration,
persist: false,
);
if (context.mounted) {
@@ -121,13 +137,12 @@ void showTabSwitchMessage(
null => 'New tab opened',
};
final snackBar = SnackBar(
final snackBar = _createFloatingSnackBar(
content: Text(message),
action: onSwitch.mapNotNull(
(onPressed) => SnackBarAction(label: 'Switch', onPressed: onPressed),
),
duration: duration,
persist: false,
);
ScaffoldMessenger.of(context).showSnackBar(snackBar);
@@ -165,13 +180,12 @@ void showTabUndoClose(
}) {
ScaffoldMessenger.of(context).clearSnackBars();
final snackBar = SnackBar(
final snackBar = _createFloatingSnackBar(
content: (count > 1)
? Text('$count Tabs closed')
: const Text('Tab closed'),
action: SnackBarAction(label: 'Undo', onPressed: onUndo),
duration: duration,
persist: false,
);
ScaffoldMessenger.of(context).showSnackBar(snackBar);
@@ -4,7 +4,6 @@ export 'src/tor_api.g.dart'
show
TransportType,
TorConfiguration,
TorStartResult,
TorStatus,
TorLogMessage,
IPtProxyController;
@@ -84,9 +84,4 @@ class _TorLogApiImpl extends TorLogApi {
void onStatusChanged(TorStatus status) {
onStatus(status);
}
@override
void onBootstrapProgress(int progress) {
onBootstrap(progress);
}
}