mirror of
https://github.com/block/buzz.git
synced 2026-10-30 14:01:37 +00:00
39b8b2b6a6
## Summary Unify mobile conversations in Messages with All / Solo / Team filters, a collapsing header, and separate Search, New, and default-agent shortcuts. Move workspace actions into the community menu and keep collapsed sections intact across filters. Align Inbox and list typography, spacing, and muted controls. Preserve native glass layering through navigation and give every filtered list enough clearance above the footer. The default-agent shortcut reads the shared encrypted preference and opens an existing chat immediately. When unset, it opens Agents; a star action selects the default through a production signed, self-encrypted preference writer. Save failures remain visible and retryable. Android now uses rounded navigation controls and filters, optically balanced search icons, and expanding New/community menus with leading Tabler icons matching iOS. Preset avatars retain transparent WebM animation through an Android WebView renderer, with lifecycle pausing and poster fallback. ### Related issue None found in searches for mobile navigation issues and open PRs. ### Testing - Android follow-up: ARM64 debug build, Dart analysis, and emulator checks passed for menu placement, selection, icon alignment, search, and avatar playback/pause/resume. The avatar implementation passed 3,840 Flutter tests and native Android tests before subsequent styling iterations. Automated tests for the later menu/icon iterations were skipped at the author’s request; those earlier results do not cover the final styling changes. - Mobile formatting/analysis and full test suite (3,838 passed, 23 skipped, plus 4 push-configuration tests); regression journey covers filtering, collapse retention, and scrolling the last Solo row above the footer. - iPhone 18 Pro simulator (Honeycomb): filters, menus, Inbox, Invite/Back, Switch Community, and default-agent chat/Back exercised. iOS release build and Pairing Preview install/launch passed during iteration, preserving the saved profile. - P1 follow-up: production writer-to-reader widget journey covers selection, publish failure/retry, and the unset footer opening Agents. Simulator Agents open/close passes; its saved community has no selectable agents, so live selection was not verified there. - Independent agent review completed; its Solo footer-clearance finding is fixed. The final clearance adjustment is covered by widget tests; physical-device acceptance of that adjustment and hosted CI remain pending. Final Messages layout:  Switcher layering during iteration (before → after): | Before: filter edge showing through | After: Home hidden behind switcher | | --- | --- | |  |  | --------- Signed-off-by: kenny lopez <klopez4212@gmail.com> Co-authored-by: Terp <5856f6900e8e0a4e0ea1f4f8d2ee33e4753d2119bc122f94ecafc660b46c0511@buzz.block.builderlab.xyz>
337 lines
14 KiB
Dart
337 lines
14 KiB
Dart
import 'dart:async';
|
|
import 'dart:math' as math;
|
|
import 'dart:ui' show ImageFilter;
|
|
|
|
import 'package:flutter/material.dart';
|
|
import 'package:flutter/services.dart';
|
|
import 'package:flutter_hooks/flutter_hooks.dart';
|
|
|
|
import '../theme/theme.dart';
|
|
import '../theme/buzz_icons.dart';
|
|
import 'navigation_button_surface.dart';
|
|
|
|
/// Expands an Android shortcut into a rounded, translucent action menu.
|
|
class AndroidExpandingMenuButton extends HookWidget {
|
|
const AndroidExpandingMenuButton({
|
|
required this.actions,
|
|
this.label = 'New',
|
|
this.trigger,
|
|
this.width = 112,
|
|
this.height = 56,
|
|
this.dividerBefore = const {},
|
|
super.key,
|
|
});
|
|
|
|
final String label;
|
|
final Widget? trigger;
|
|
final double width, height;
|
|
final Set<int> dividerBefore;
|
|
|
|
final List<({String label, String symbol, VoidCallback? onPressed})> actions;
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
final open = useState(false);
|
|
return IgnorePointer(
|
|
ignoring: open.value,
|
|
child: Opacity(
|
|
opacity: open.value ? 0 : 1,
|
|
child: NavigationButtonSurface(
|
|
child: Builder(
|
|
builder: (buttonContext) => Tooltip(
|
|
message: label,
|
|
child: TextButton(
|
|
style: TextButton.styleFrom(
|
|
padding: EdgeInsets.zero,
|
|
minimumSize: Size.zero,
|
|
tapTargetSize: MaterialTapTargetSize.shrinkWrap,
|
|
foregroundColor: context.colors.onSurface,
|
|
),
|
|
onPressed: () async {
|
|
final navigator = Navigator.of(context);
|
|
final box = buttonContext.findRenderObject() as RenderBox;
|
|
final overlay =
|
|
navigator.overlay!.context.findRenderObject()
|
|
as RenderBox;
|
|
final rect = MatrixUtils.transformRect(
|
|
box.getTransformTo(overlay),
|
|
Offset.zero & box.size,
|
|
);
|
|
final captured = actions;
|
|
final route = _CreateMenuRoute(
|
|
anchor: rect,
|
|
label: label,
|
|
trigger: trigger ?? const _NewLabel(),
|
|
dividerBefore: dividerBefore,
|
|
actions: captured,
|
|
reducedMotion: MediaQuery.disableAnimationsOf(context),
|
|
dismissLabel: MaterialLocalizations.of(
|
|
context,
|
|
).modalBarrierDismissLabel,
|
|
);
|
|
unawaited(HapticFeedback.lightImpact());
|
|
open.value = true;
|
|
try {
|
|
final index = await navigator.push<int>(route);
|
|
await route.completed;
|
|
if (!context.mounted) return;
|
|
open.value = false;
|
|
if (index != null) captured[index].onPressed?.call();
|
|
} finally {
|
|
if (context.mounted) open.value = false;
|
|
}
|
|
},
|
|
child: SizedBox(
|
|
width: width,
|
|
height: height,
|
|
child: Center(child: trigger ?? const _NewLabel()),
|
|
),
|
|
),
|
|
),
|
|
),
|
|
),
|
|
),
|
|
);
|
|
}
|
|
}
|
|
|
|
class _NewLabel extends StatelessWidget {
|
|
const _NewLabel();
|
|
@override
|
|
Widget build(BuildContext context) => Row(
|
|
mainAxisAlignment: MainAxisAlignment.center,
|
|
children: const [
|
|
Icon(BuzzIcons.plus, size: 24),
|
|
SizedBox(width: Grid.xxs),
|
|
Text('New'),
|
|
],
|
|
);
|
|
}
|
|
|
|
class _CreateMenuRoute extends PopupRoute<int> {
|
|
_CreateMenuRoute({
|
|
required this.anchor,
|
|
required this.label,
|
|
required this.trigger,
|
|
required this.dividerBefore,
|
|
required this.actions,
|
|
required this.reducedMotion,
|
|
required this.dismissLabel,
|
|
});
|
|
final Rect anchor;
|
|
final String label;
|
|
final Widget trigger;
|
|
final Set<int> dividerBefore;
|
|
final List<({String label, String symbol, VoidCallback? onPressed})> actions;
|
|
final bool reducedMotion;
|
|
final String dismissLabel;
|
|
@override
|
|
Color? get barrierColor => null;
|
|
@override
|
|
bool get barrierDismissible => true;
|
|
@override
|
|
String get barrierLabel => dismissLabel;
|
|
@override
|
|
Duration get transitionDuration =>
|
|
Duration(milliseconds: reducedMotion ? 0 : 240);
|
|
@override
|
|
Duration get reverseTransitionDuration =>
|
|
Duration(milliseconds: reducedMotion ? 0 : 180);
|
|
|
|
@override
|
|
Widget buildPage(
|
|
BuildContext context,
|
|
Animation<double> animation,
|
|
Animation<double> secondaryAnimation,
|
|
) {
|
|
final media = MediaQuery.of(context);
|
|
final width = math.min(
|
|
240.0,
|
|
media.size.width - media.padding.horizontal - Grid.lg,
|
|
);
|
|
final rowHeight = math.max(48.0, media.textScaler.scale(20) + Grid.sm);
|
|
final height = math.min(
|
|
actions.length * rowHeight + Grid.xs + dividerBefore.length,
|
|
media.size.height - media.padding.vertical - Grid.lg,
|
|
);
|
|
final expandDown = anchor.center.dy < media.size.height / 2;
|
|
final left =
|
|
(expandDown ? anchor.right - width : anchor.center.dx - width / 2)
|
|
.clamp(
|
|
media.padding.left + Grid.xs,
|
|
media.size.width - media.padding.right - Grid.xs - width,
|
|
)
|
|
.toDouble();
|
|
final bottom = anchor.bottom
|
|
.clamp(
|
|
media.padding.top + Grid.xs + height,
|
|
media.size.height - media.padding.bottom,
|
|
)
|
|
.toDouble();
|
|
final top = expandDown
|
|
? anchor.top
|
|
.clamp(
|
|
media.padding.top,
|
|
media.size.height - media.padding.bottom - height,
|
|
)
|
|
.toDouble()
|
|
: bottom - height;
|
|
final destination = Rect.fromLTWH(left, top, width, height);
|
|
return AnimatedBuilder(
|
|
animation: animation,
|
|
builder: (context, _) {
|
|
final t = Curves.easeOutCubic.transform(animation.value);
|
|
final rect = Rect.lerp(anchor, destination, t)!;
|
|
final contentOpacity = ((t - .25) / .75).clamp(0.0, 1.0);
|
|
return Stack(
|
|
children: [
|
|
Positioned.fromRect(
|
|
rect: rect,
|
|
child: DecoratedBox(
|
|
decoration: BoxDecoration(
|
|
borderRadius: BorderRadius.circular(Radii.navigationCapsule),
|
|
boxShadow: [
|
|
BoxShadow(
|
|
color: context.colors.shadow.withValues(alpha: .16 * t),
|
|
blurRadius: 24 * t,
|
|
offset: Offset(0, 6 * t),
|
|
),
|
|
],
|
|
),
|
|
child: ClipRRect(
|
|
borderRadius: BorderRadius.circular(Radii.navigationCapsule),
|
|
child: BackdropFilter(
|
|
filter: ImageFilter.blur(sigmaX: 16 * t, sigmaY: 16 * t),
|
|
child: Material(
|
|
color: context.controlSurface.withValues(
|
|
alpha: 1 - .12 * t,
|
|
),
|
|
child: Stack(
|
|
children: [
|
|
Positioned.fill(
|
|
child: IgnorePointer(
|
|
child: Opacity(
|
|
opacity: (1 - t * 4).clamp(0.0, 1.0),
|
|
child: Center(child: trigger),
|
|
),
|
|
),
|
|
),
|
|
Positioned.fill(
|
|
child: OverflowBox(
|
|
alignment: expandDown
|
|
? Alignment.topCenter
|
|
: Alignment.bottomCenter,
|
|
minWidth: width,
|
|
maxWidth: width,
|
|
minHeight: height,
|
|
maxHeight: height,
|
|
child: Opacity(
|
|
opacity: contentOpacity,
|
|
child: Semantics(
|
|
scopesRoute: true,
|
|
namesRoute: true,
|
|
label: label,
|
|
explicitChildNodes: true,
|
|
child: SingleChildScrollView(
|
|
padding: const EdgeInsets.symmetric(
|
|
vertical: Grid.xxs,
|
|
),
|
|
child: Column(
|
|
mainAxisSize: MainAxisSize.min,
|
|
children: [
|
|
for (
|
|
var i = 0;
|
|
i < actions.length;
|
|
i++
|
|
) ...[
|
|
if (dividerBefore.contains(i))
|
|
const Divider(height: 1),
|
|
SizedBox(
|
|
height: rowHeight,
|
|
child: InkWell(
|
|
onTap:
|
|
actions[i].onPressed == null
|
|
? null
|
|
: () => Navigator.of(
|
|
context,
|
|
).pop(i),
|
|
child: Padding(
|
|
padding:
|
|
const EdgeInsets.symmetric(
|
|
horizontal: Grid.gutter,
|
|
),
|
|
child: Row(
|
|
children: [
|
|
Icon(switch (actions[i]
|
|
.symbol) {
|
|
'square.and.pencil' =>
|
|
BuzzIcons.edit,
|
|
'folder.badge.plus' =>
|
|
BuzzIcons.folderPlus,
|
|
'bubble.left' =>
|
|
BuzzIcons.messageSquare,
|
|
'number' =>
|
|
BuzzIcons.hash,
|
|
'arrow.left.arrow.right' =>
|
|
BuzzIcons
|
|
.arrowLeftRight,
|
|
'person.badge.plus' =>
|
|
BuzzIcons.userPlus,
|
|
'circle.lefthalf.filled' =>
|
|
BuzzIcons.sunMoon,
|
|
'person.2' =>
|
|
BuzzIcons.users,
|
|
'gearshape' =>
|
|
BuzzIcons.settings,
|
|
_ => BuzzIcons.plus,
|
|
}, size: 22),
|
|
const SizedBox(
|
|
width: Grid.sm,
|
|
),
|
|
Expanded(
|
|
child: Text(
|
|
actions[i].label,
|
|
style: TextStyle(
|
|
color:
|
|
actions[i]
|
|
.onPressed ==
|
|
null
|
|
? context
|
|
.colors
|
|
.onSurface
|
|
.withValues(
|
|
alpha: .4,
|
|
)
|
|
: context
|
|
.colors
|
|
.onSurface,
|
|
),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
),
|
|
],
|
|
],
|
|
),
|
|
),
|
|
),
|
|
),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
),
|
|
),
|
|
),
|
|
],
|
|
);
|
|
},
|
|
);
|
|
}
|
|
}
|