mirror of
https://github.com/block/buzz.git
synced 2026-08-18 06:50:31 +02:00
**Category:** new-feature **User Impact:** Mobile now keeps each community’s appearance in sync with desktop, including theme, accent, and system-mode preference. **Problem:** Appearance choices were device-local, so the same account could look different between desktop and mobile. Live sync could also stop after the relay closed a subscription. **Solution:** Store each community’s encrypted appearance preference on its relay using the shared desktop wire contract, restore it from a local identity-scoped cache, and apply replacement events live. Closed subscriptions now recover with guarded backoff and fetch the latest preference so no update is lost during the gap. <details> <summary>File changes</summary> **mobile/lib/app.dart** Connects community appearance state to the authenticated app lifecycle. **mobile/lib/features/settings/accent_picker_page.dart** Aligns mobile accent choices and selection behavior with the shared catalog. **mobile/lib/features/settings/settings_page/appearance_section.dart** Clarifies the active appearance and hides accent controls when the Buzz theme owns its neutral accent. **mobile/lib/features/settings/theme_picker_page.dart** Persists catalog theme choices through the community-scoped provider. **mobile/lib/shared/theme/accent_colors.dart** Matches desktop’s accent catalog and wire values. **mobile/lib/shared/theme/buzz_theme.dart** Keeps Buzz visually neutral without discarding the user’s stored accent for other themes. **mobile/lib/shared/theme/community_theme_preference.dart** Defines and validates the versioned desktop-compatible appearance payload. **mobile/lib/shared/theme/community_theme_provider.dart** Coordinates cache-first appearance loading with account and community changes. **mobile/lib/shared/theme/community_theme_sync.dart** Adds encrypted NIP-78 relay persistence, live replacement handling, deterministic ordering, safe seeding, and resilient subscription recovery. **mobile/lib/shared/theme/theme.dart** Exports the community appearance modules. **mobile/test/features/settings/theme_picker_page_test.dart** Covers the updated settings behavior. **mobile/test/shared/crypto/nip44_interop_test.dart** Proves Dart decrypts a desktop-produced nostr-rs NIP-44 v2 preference. **mobile/test/shared/theme/buzz_theme_test.dart** Covers Buzz’s neutral rendering and stored-accent restoration. **mobile/test/shared/theme/community_theme_preference_test.dart** Covers wire parsing, validation, migration, and future-version handling. **mobile/test/shared/theme/community_theme_sync_test.dart** Covers cache/relay lifecycle, replacement ordering, switching races, absence-only seeding, and closed-subscription recovery. </details> ## Reproduction steps 1. Sign into desktop and mobile with the same account and join the same community relay. 2. On desktop, choose a distinctive non-Buzz theme and accent; mobile should update without a local toggle. 3. Restart mobile and confirm it restores the same appearance. 4. Change the mobile theme and accent and confirm desktop follows. 5. Leave mobile idle or backgrounded through a relay reconnect, then change desktop again; mobile should resubscribe and catch up automatically. 6. Switch communities and confirm each community restores only its own appearance. --------- Signed-off-by: Taylor Ho <taylorkmho@gmail.com> Co-authored-by: npub1223z34hd7vtwc6qj4s7flsxkj644nlre2nthu7lrrmkumhu3xddsrx9r6w <52a228d6edf316ec6812ac3c9fc0d696ab59fc7954d77e7be31eedcddf91335b@buzz.block.builderlab.xyz>
268 lines
8.5 KiB
Dart
268 lines
8.5 KiB
Dart
import 'package:flutter/material.dart';
|
|
import 'package:flutter_test/flutter_test.dart';
|
|
import 'package:buzz/shared/theme/theme.dart';
|
|
import 'package:buzz/shared/widgets/frosted_app_bar.dart';
|
|
|
|
void main() {
|
|
group('Buzz theme catalog entries', () {
|
|
test('both halves are in the catalog', () {
|
|
expect(findTheme(buzzThemeName), isNotNull);
|
|
expect(findTheme(buzzDarkThemeName), isNotNull);
|
|
});
|
|
|
|
test('borrow the GitHub palettes', () {
|
|
final buzz = findTheme(buzzThemeName)!;
|
|
final github = findTheme('github-light')!;
|
|
expect(buzz.bg, github.bg);
|
|
expect(buzz.fg, github.fg);
|
|
expect(buzz.comment, github.comment);
|
|
|
|
final buzzDark = findTheme(buzzDarkThemeName)!;
|
|
final githubDark = findTheme('github-dark')!;
|
|
expect(buzzDark.bg, githubDark.bg);
|
|
expect(buzzDark.fg, githubDark.fg);
|
|
expect(buzzDark.comment, githubDark.comment);
|
|
});
|
|
|
|
test('are a light/dark pair', () {
|
|
expect(findTheme(buzzThemeName)!.isDark, isFalse);
|
|
expect(findTheme(buzzDarkThemeName)!.isDark, isTrue);
|
|
expect(themePairFor(buzzThemeName), buzzDarkThemeName);
|
|
expect(themePairFor(buzzDarkThemeName), buzzThemeName);
|
|
});
|
|
|
|
test('appear as a single System-mode option labelled "Buzz"', () {
|
|
final paired = themeGroups().paired.map((t) => t.name);
|
|
expect(paired, contains(buzzThemeName));
|
|
expect(paired, isNot(contains(buzzDarkThemeName)));
|
|
expect(pairedThemeLabel(buzzThemeName), 'Buzz');
|
|
expect(themeSelectionLabel(buzzThemeName, ThemeMode.system), 'Buzz');
|
|
expect(themeSelectionLabel(buzzDarkThemeName, ThemeMode.system), 'Buzz');
|
|
});
|
|
|
|
test('forces neutral rendering without changing the stored accent', () {
|
|
const storedAccent = '#ef4444';
|
|
|
|
expect(
|
|
effectiveAccentIndex(buzzThemeName, storedAccent),
|
|
neutralAccentIndex,
|
|
);
|
|
expect(
|
|
effectiveAccentIndex(buzzDarkThemeName, storedAccent),
|
|
neutralAccentIndex,
|
|
);
|
|
expect(
|
|
effectiveAccentIndex('github-light', storedAccent),
|
|
accentIndexForWireValue(storedAccent),
|
|
);
|
|
expect(storedAccent, '#ef4444');
|
|
});
|
|
|
|
test('resolve across brightnesses like any other pair', () {
|
|
final resolved = resolveSchemes(buzzThemeName, ThemeMode.system);
|
|
expect(resolved.forcedMode, isNull);
|
|
expect(resolved.light.brightness, Brightness.light);
|
|
expect(resolved.dark.brightness, Brightness.dark);
|
|
expect(resolved.lightTheme?.name, buzzThemeName);
|
|
expect(resolved.darkTheme?.name, buzzDarkThemeName);
|
|
|
|
expect(
|
|
effectiveTheme(buzzThemeName, ThemeMode.dark)?.name,
|
|
buzzDarkThemeName,
|
|
);
|
|
expect(
|
|
effectiveTheme(buzzDarkThemeName, ThemeMode.light)?.name,
|
|
buzzThemeName,
|
|
);
|
|
});
|
|
|
|
test(
|
|
'fallbacks expose the effective Buzz theme for gradient selection',
|
|
() {
|
|
final coerced = resolveSchemes('nord', ThemeMode.light);
|
|
expect(coerced.lightTheme?.name, buzzThemeName);
|
|
expect(
|
|
buzzTopSectionGradient(
|
|
coerced.lightTheme!.name,
|
|
coerced.light.brightness,
|
|
),
|
|
isNotNull,
|
|
);
|
|
|
|
final unknown = resolveSchemes('not-a-theme', ThemeMode.light);
|
|
expect(unknown.lightTheme?.name, buzzThemeName);
|
|
expect(
|
|
buzzTopSectionGradient(
|
|
unknown.lightTheme!.name,
|
|
unknown.light.brightness,
|
|
),
|
|
isNotNull,
|
|
);
|
|
},
|
|
);
|
|
});
|
|
|
|
group('buzzTopSectionGradient', () {
|
|
test('is null for non-Buzz themes', () {
|
|
expect(buzzTopSectionGradient('github-light', Brightness.light), isNull);
|
|
expect(buzzTopSectionGradient('nord', Brightness.dark), isNull);
|
|
});
|
|
|
|
test('paints top to bottom for both halves of the pair', () {
|
|
for (final name in [buzzThemeName, buzzDarkThemeName]) {
|
|
final gradient = buzzTopSectionGradient(name, Brightness.light);
|
|
expect(gradient, isNotNull, reason: '$name should be gradient-backed');
|
|
expect(gradient!.begin, Alignment.topCenter);
|
|
expect(gradient.end, Alignment.bottomCenter);
|
|
expect(gradient.colors, hasLength(2));
|
|
}
|
|
});
|
|
|
|
test('brightness selects the stops, not the theme name', () {
|
|
// Both halves enable the gradient, so System mode keeps it on across an
|
|
// OS switch — the applied brightness alone decides which stops are used.
|
|
final light = buzzTopSectionGradient(buzzThemeName, Brightness.light)!;
|
|
final dark = buzzTopSectionGradient(buzzThemeName, Brightness.dark)!;
|
|
|
|
expect(light.colors, isNot(dark.colors));
|
|
expect(
|
|
buzzTopSectionGradient(buzzDarkThemeName, Brightness.dark)!.colors,
|
|
dark.colors,
|
|
);
|
|
expect(
|
|
buzzTopSectionGradient(buzzDarkThemeName, Brightness.light)!.colors,
|
|
light.colors,
|
|
);
|
|
});
|
|
|
|
test('is opaque so the color replaces the frosted fill', () {
|
|
for (final brightness in Brightness.values) {
|
|
final gradient = buzzTopSectionGradient(buzzThemeName, brightness)!;
|
|
for (final color in gradient.colors) {
|
|
expect(color.a, 1.0);
|
|
}
|
|
}
|
|
});
|
|
});
|
|
|
|
group('theme threading', () {
|
|
BoxDecoration barDecoration(WidgetTester tester) {
|
|
final container = tester
|
|
.widgetList<Container>(
|
|
find.descendant(
|
|
of: find.byType(FrostedAppBar),
|
|
matching: find.byType(Container),
|
|
),
|
|
)
|
|
.first;
|
|
return container.decoration! as BoxDecoration;
|
|
}
|
|
|
|
Widget harness(ThemeData theme) => MaterialApp(
|
|
theme: theme,
|
|
home: Builder(
|
|
builder: (context) => Stack(
|
|
children: [
|
|
FrostedAppBar(
|
|
gradient: context.appColors.topSectionGradient,
|
|
title: const Text('Home'),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
);
|
|
|
|
testWidgets('AppTheme carries the gradient to the top section', (
|
|
tester,
|
|
) async {
|
|
await tester.pumpWidget(
|
|
harness(
|
|
AppTheme.light(
|
|
topSectionGradient: buzzTopSectionGradient(
|
|
buzzThemeName,
|
|
Brightness.light,
|
|
),
|
|
),
|
|
),
|
|
);
|
|
|
|
final decoration = barDecoration(tester);
|
|
expect(decoration.gradient, isNotNull);
|
|
// A BoxDecoration cannot paint a color and a gradient at once.
|
|
expect(decoration.color, isNull);
|
|
});
|
|
|
|
testWidgets('non-Buzz themes keep the frosted surface fill', (
|
|
tester,
|
|
) async {
|
|
await tester.pumpWidget(harness(AppTheme.light()));
|
|
|
|
final decoration = barDecoration(tester);
|
|
expect(decoration.gradient, isNull);
|
|
expect(decoration.color, isNotNull);
|
|
});
|
|
|
|
testWidgets('Buzz section labels use 80% neutral foreground', (
|
|
tester,
|
|
) async {
|
|
await tester.pumpWidget(
|
|
harness(
|
|
AppTheme.light(
|
|
topSectionGradient: buzzTopSectionGradient(
|
|
buzzThemeName,
|
|
Brightness.light,
|
|
),
|
|
),
|
|
),
|
|
);
|
|
|
|
final context = tester.element(find.text('Home'));
|
|
expect(
|
|
navigationSectionForeground(context),
|
|
Colors.black.withValues(alpha: 0.8),
|
|
);
|
|
});
|
|
|
|
testWidgets('navigation roles inherit non-Buzz theme tokens', (
|
|
tester,
|
|
) async {
|
|
const primaryForeground = Color(0xFF123456);
|
|
const secondaryForeground = Color(0xFF789ABC);
|
|
const searchSurface = Color(0xFFDEF012);
|
|
final theme = ThemeData(
|
|
colorScheme: ColorScheme.fromSeed(seedColor: Colors.purple).copyWith(
|
|
onSurface: primaryForeground,
|
|
onSurfaceVariant: secondaryForeground,
|
|
surfaceContainerHighest: searchSurface,
|
|
),
|
|
);
|
|
|
|
await tester.pumpWidget(
|
|
MaterialApp(
|
|
theme: theme,
|
|
home: const Scaffold(body: SizedBox()),
|
|
),
|
|
);
|
|
|
|
final context = tester.element(find.byType(SizedBox));
|
|
expect(navigationPrimaryForeground(context), primaryForeground);
|
|
expect(navigationSecondaryForeground(context), secondaryForeground);
|
|
expect(navigationSectionForeground(context), secondaryForeground);
|
|
expect(navigationSearchSurface(context), searchSurface);
|
|
expect(
|
|
navigationDivider(context, 0.15),
|
|
primaryForeground.withValues(alpha: 0.15),
|
|
);
|
|
});
|
|
});
|
|
|
|
group('isBuzzTheme', () {
|
|
test('matches only the Buzz pair', () {
|
|
expect(isBuzzTheme(buzzThemeName), isTrue);
|
|
expect(isBuzzTheme(buzzDarkThemeName), isTrue);
|
|
expect(isBuzzTheme('github-light'), isFalse);
|
|
expect(isBuzzTheme(''), isFalse);
|
|
});
|
|
});
|
|
}
|