randogoth/the-mews
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

feat: show real neighboring pages during back and forward swipes

Browse source
This commit is contained in:
randogoth 2026-10-11 11:05:03 +03:00
parent 4e07c9a305
commit c104c2026b
7 changed files with 283 additions and 71 deletions
Download patch file Download diff file Expand all files Collapse all files

10
app/lib/application/actors/fetch_actor.dart
View file

@ -31,6 +31,15 @@ class SubmitForm extends FetchCommand {
final Map<String, String> fields;
}
/// Parses a page's source without touching the network; used to prepare the
/// neighboring pages that swipes reveal.
class ParseSource extends FetchCommand {
const ParseSource({required this.url, required this.source});
final String url;
final String source;
}
sealed class FetchResult {
const FetchResult();
}
@ -94,6 +103,7 @@ class FetchHandler with Handler<FetchCommand, FetchResult> {
await _fetchPage(url, etag, lastModified, cachedSource),
SubmitForm(:final url, :final method, :final fields) =>
await _submitForm(url, method, fields),
ParseSource(:final url, :final source) => _parse(source, url),
};
}

64
app/lib/application/controllers/browser_controller.dart
View file

@ -1,5 +1,3 @@
import 'dart:async';
import 'package:actors/actors.dart';
import 'package:drift/drift.dart' show Value;
import 'package:signals/signals.dart';
@ -47,9 +45,10 @@ class BrowserController {
/// Pages opened this session, so links can show the visited color.
final visitedUrls = signal(<String>{});
/// Titles of the stack's neighboring pages, shown while swiping.
final backTitle = signal<String?>(null);
final forwardTitle = signal<String?>(null);
/// The parsed pages next to the current one in the stack, ready to show
/// while swiping between them.
final backPage = signal<MewsPage?>(null);
final forwardPage = signal<MewsPage?>(null);
bool get canGoBack => _stackIndex > 0;
bool get canGoForward => _stackIndex >= 0 && _stack.length - 1 > _stackIndex;
@ -69,24 +68,36 @@ class BrowserController {
_stack.removeRange(_stackIndex + 1, _stack.length);
_stack.add(url);
_stackIndex++;
_updatePeeks();
_updateNeighbors();
await _loadCurrent();
}
Future<void> back() async {
if (!canGoBack) return;
_stackIndex--;
_updatePeeks();
// The neighbor was parsed for the swipe already; show it right away so
// the transition lands on content instead of a blank page while
// _loadCurrent revalidates it against the server.
_showParsedNeighbor(backPage.value);
_updateNeighbors();
await _loadCurrent();
}
Future<void> forward() async {
if (!canGoForward) return;
_stackIndex++;
_updatePeeks();
_showParsedNeighbor(forwardPage.value);
_updateNeighbors();
await _loadCurrent();
}
void _showParsedNeighbor(MewsPage? page) {
if (page == null) return;
currentPage.value = page;
error.value = null;
visitedUrls.value = {...visitedUrls.value, page.url};
}
Future<void> reload() => _loadCurrent();
Future<void> submitForm(String action, String method, Map<String, String> fields) async {
@ -99,7 +110,7 @@ class BrowserController {
_stack.removeRange(_stackIndex + 1, _stack.length);
_stack.add(page.url);
_stackIndex++;
_updatePeeks();
_updateNeighbors();
_show(page);
case _:
error.value = const LoadFailed();
@ -112,21 +123,34 @@ class BrowserController {
if (url == null) return;
_stack.add(url);
_stackIndex = 0;
_updatePeeks();
_updateNeighbors();
await _loadCurrent();
}
/// Refreshes the neighboring-page titles from the cache; a page without a
/// cached title falls back to its URL.
void _updatePeeks() {
Future<String?> peek(int index) async {
if (index < 0 || index >= _stack.length) return null;
final url = _stack[index];
return (await _db.cachedPage(url))?.title ?? url;
}
/// Parses the stack's neighboring pages in the fetch actor so swipes can
/// show the real content. Results arriving after another navigation are
/// dropped, so rapid navigation never shows a stale neighbor.
void _updateNeighbors() {
_loadNeighbor(_stackIndex - 1, backPage);
_loadNeighbor(_stackIndex + 1, forwardPage);
}
unawaited(peek(_stackIndex - 1).then((t) => backTitle.value = t));
unawaited(peek(_stackIndex + 1).then((t) => forwardTitle.value = t));
Future<void> _loadNeighbor(int index, Signal<MewsPage?> target) async {
final expectedIndex = _stackIndex;
if (index < 0 || index >= _stack.length) {
target.value = null;
return;
}
final url = _stack[index];
final cached = await _db.cachedPage(url);
if (_stackIndex != expectedIndex) return;
if (cached == null) {
target.value = null;
return;
}
final result = await _fetch.send(ParseSource(url: url, source: cached.source));
if (_stackIndex != expectedIndex) return;
target.value = result is FetchPageOk ? result.page : null;
}
Future<void> _loadCurrent() async {

6
app/lib/presentation/app.dart
View file

@ -12,10 +12,10 @@ import 'reader/reader_screen.dart';
/// Everything is local-first: the database is created up front and the fetch
/// actor is the only path to the network.
class AppDependencies {
AppDependencies({MewsDatabase? database})
AppDependencies({MewsDatabase? database, Actor<FetchCommand, FetchResult>? fetch})
: db = database ?? MewsDatabase(),
fetch = Actor.create(FetchHandler.new) {
browser = BrowserController(db: db, fetch: fetch);
fetch = fetch ?? Actor.create(FetchHandler.new) {
browser = BrowserController(db: db, fetch: this.fetch);
settings = ReaderSettingsController(db);
library = LibraryController(db);
}

31
app/lib/presentation/reader/reader_screen.dart
View file

@ -100,8 +100,10 @@ class _ReaderScreenState extends State<ReaderScreen> {
return SwipeNavigator(
canGoBack: browser.canGoBack,
canGoForward: browser.canGoForward,
backTitle: browser.backTitle.value,
forwardTitle: browser.forwardTitle.value,
backView: _neighborView(browser.backPage.value),
forwardView: _neighborView(browser.forwardPage.value),
backTitle: browser.backPage.value?.title,
forwardTitle: browser.forwardPage.value?.title,
background: peekBackground,
onBack: browser.back,
onForward: browser.forward,
@ -179,6 +181,31 @@ class _ReaderScreenState extends State<ReaderScreen> {
});
}
/// Renders a neighboring page for the swipe peek, non-interactive: it is a
/// look ahead, and committing the navigation brings the real thing.
Widget? _neighborView(MewsPage? page) {
if (page == null) return null;
final deps = AppScope.of(context).deps;
final settings = deps.settings;
final palette = paletteFor(
pageVariant: page.variant,
readerVariant: settings.variant.value,
dark: Theme.of(context).brightness == Brightness.dark,
);
return ColoredBox(
color: palette.background,
child: MewsPageView(
page: page,
palette: palette,
fontFamily: settings.font.value,
fontScale: settings.fontScale.value,
visitedUrls: deps.browser.visitedUrls.value,
onLinkTap: (_) {},
onFormSubmit: (_, _) {},
),
);
}
Widget _emptyPage(BuildContext context) {
// No page yet: the address bar is the whole UI.
return const SizedBox.expand();

104
app/lib/presentation/reader/swipe_navigator.dart
View file

@ -4,27 +4,37 @@ import 'package:flutter/material.dart';
/// Wraps the current page and turns the back/forward swipes into visible page
/// transitions: dragging slides the current page away and reveals the
/// neighboring page peeking in from the side (its title, when known).
/// Releasing past the threshold or with a flick commits the navigation;
/// otherwise everything springs back. Directions without a page resist the
/// drag with a rubber band.
/// neighboring page itself ([backView]/[forwardView]) sliding in from the
/// side, falling back to a title panel while the neighbor is still being
/// parsed. Releasing past the threshold or with a flick commits the
/// navigation; otherwise everything springs back. Directions without a page
/// resist the drag with a rubber band.
class SwipeNavigator extends StatefulWidget {
const SwipeNavigator({
required this.canGoBack,
required this.canGoForward,
required this.backTitle,
required this.forwardTitle,
required this.background,
required this.onBack,
required this.onForward,
required this.child,
this.backView,
this.forwardView,
this.backTitle,
this.forwardTitle,
super.key,
});
final bool canGoBack;
final bool canGoForward;
/// Pre-rendered neighboring pages, shown while swiping.
final Widget? backView;
final Widget? forwardView;
/// Fallback titles for the neighbor panels while the pages are parsed.
final String? backTitle;
final String? forwardTitle;
final Color background;
final VoidCallback onBack;
final VoidCallback onForward;
@ -135,14 +145,21 @@ class _SwipeNavigatorState extends State<SwipeNavigator>
// rubber-band the current page over the bare background.
final showsBack = dx > 0 && widget.canGoBack;
final showsForward = dx < 0 && widget.canGoForward;
final peek = showsBack || showsForward
? _Peek(
fromLeft: showsBack,
offset: showsBack ? dx - _width : _width + dx,
background: widget.background,
title: showsBack ? widget.backTitle : widget.forwardTitle,
final Widget? peek = showsBack || showsForward
? Transform.translate(
offset: Offset(showsBack ? dx - _width : _width + dx, 0),
child: IgnorePointer(
// The neighbor is a look ahead, not an interactive page;
// committing the navigation brings the real one.
child: (showsBack ? widget.backView : widget.forwardView) ??
_Peek(
fromLeft: showsBack,
background: widget.background,
title: showsBack ? widget.backTitle : widget.forwardTitle,
),
),
)
: const SizedBox.shrink();
: null;
return GestureDetector(
behavior: HitTestBehavior.deferToChild,
@ -151,7 +168,7 @@ class _SwipeNavigatorState extends State<SwipeNavigator>
onHorizontalDragEnd: _onDragEnd,
child: Stack(
children: [
Positioned.fill(child: peek),
if (peek != null) Positioned.fill(child: peek),
Transform.translate(
offset: Offset(dx, 0),
child: widget.child,
@ -164,52 +181,47 @@ class _SwipeNavigatorState extends State<SwipeNavigator>
}
}
/// The neighboring page sliding in under the current one.
/// The neighboring page's fallback panel while it is still being parsed.
class _Peek extends StatelessWidget {
const _Peek({
required this.fromLeft,
required this.offset,
required this.background,
required this.title,
});
final bool fromLeft;
final double offset;
final Color background;
final String? title;
@override
Widget build(BuildContext context) {
return Transform.translate(
offset: Offset(offset, 0),
child: ColoredBox(
color: background,
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 24),
child: Align(
alignment: fromLeft ? Alignment.centerLeft : Alignment.centerRight,
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: fromLeft
? CrossAxisAlignment.start
: CrossAxisAlignment.end,
children: [
Icon(
fromLeft ? Icons.west : Icons.east,
color: Theme.of(context).colorScheme.onSurface,
),
if (title != null)
ConstrainedBox(
constraints: const BoxConstraints(maxWidth: 200),
child: Text(
title!,
maxLines: 2,
overflow: TextOverflow.ellipsis,
style: Theme.of(context).textTheme.titleMedium,
),
return ColoredBox(
color: background,
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 24),
child: Align(
alignment: fromLeft ? Alignment.centerLeft : Alignment.centerRight,
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: fromLeft
? CrossAxisAlignment.start
: CrossAxisAlignment.end,
children: [
Icon(
fromLeft ? Icons.west : Icons.east,
color: Theme.of(context).colorScheme.onSurface,
),
if (title != null)
ConstrainedBox(
constraints: const BoxConstraints(maxWidth: 200),
child: Text(
title!,
maxLines: 2,
overflow: TextOverflow.ellipsis,
style: Theme.of(context).textTheme.titleMedium,
),
],
),
),
],
),
),
),