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>
104 lines
4.4 KiB
Dart
104 lines
4.4 KiB
Dart
import 'package:flutter/material.dart';
|
|
|
|
import 'accent_colors.dart';
|
|
import 'app_colors.dart';
|
|
|
|
/// Name of the first-party Buzz theme. Buzz reuses the GitHub Light palette for
|
|
/// every base color; the one thing that sets it apart is a branded gradient
|
|
/// painted across the app's top section. Mirrors desktop, where the same
|
|
/// gradient fills the sidebar canvas — see `data-buzz-sidebar` in
|
|
/// `desktop/src/shared/styles/globals/theme.css`.
|
|
const buzzThemeName = 'buzz';
|
|
|
|
/// Name of the dark counterpart, which reuses the GitHub Dark palette and the
|
|
/// dark-tuned gradient stops. Paired with [buzzThemeName] in `themePairs`, so
|
|
/// the two behave as a single "Buzz" choice under System mode.
|
|
const buzzDarkThemeName = 'buzz-dark';
|
|
|
|
/// Whether [themeName] is either half of the Buzz pair. Both halves enable the
|
|
/// gradient so System mode keeps it on across an OS light/dark switch.
|
|
bool isBuzzTheme(String themeName) =>
|
|
themeName == buzzThemeName || themeName == buzzDarkThemeName;
|
|
|
|
/// Whether the current widget tree is using the first-party Buzz treatment.
|
|
bool isBuzzThemeContext(BuildContext context) =>
|
|
Theme.of(context).extension<AppColors>()?.topSectionGradient != null;
|
|
|
|
/// Primary foreground for the mobile top navigation.
|
|
///
|
|
/// Every theme uses its own [ColorScheme.onSurface]. Buzz is the exception:
|
|
/// its desktop-matching top gradient needs a neutral black or white foreground
|
|
/// rather than the accent-derived color scheme foreground.
|
|
Color navigationPrimaryForeground(BuildContext context) {
|
|
final scheme = Theme.of(context).colorScheme;
|
|
if (!isBuzzThemeContext(context)) return scheme.onSurface;
|
|
return scheme.brightness == Brightness.dark ? Colors.white : Colors.black;
|
|
}
|
|
|
|
/// Secondary label and placeholder foreground for the mobile top navigation.
|
|
Color navigationSecondaryForeground(BuildContext context) {
|
|
final scheme = Theme.of(context).colorScheme;
|
|
if (!isBuzzThemeContext(context)) return scheme.onSurfaceVariant;
|
|
return navigationPrimaryForeground(context).withValues(alpha: 0.4);
|
|
}
|
|
|
|
/// Channel-section label and icon foreground for the mobile side navigation.
|
|
///
|
|
/// Section labels need more hierarchy than a placeholder. Buzz therefore uses
|
|
/// a stronger neutral over its gradient, while all other themes preserve their
|
|
/// established secondary foreground token.
|
|
Color navigationSectionForeground(BuildContext context) {
|
|
final scheme = Theme.of(context).colorScheme;
|
|
if (!isBuzzThemeContext(context)) return scheme.onSurfaceVariant;
|
|
return navigationPrimaryForeground(context).withValues(alpha: 0.8);
|
|
}
|
|
|
|
/// Search-field surface for the mobile top navigation.
|
|
Color navigationSearchSurface(BuildContext context) {
|
|
final scheme = Theme.of(context).colorScheme;
|
|
if (!isBuzzThemeContext(context)) return scheme.surfaceContainerHighest;
|
|
return navigationPrimaryForeground(context).withValues(alpha: 0.04);
|
|
}
|
|
|
|
/// A low-contrast navigation divider derived from the active theme foreground.
|
|
Color navigationDivider(BuildContext context, double opacity) =>
|
|
navigationPrimaryForeground(context).withValues(alpha: opacity);
|
|
|
|
/// Buzz renders with its fixed neutral foreground while preserving the stored
|
|
/// wire accent so the user's choice returns on another theme.
|
|
int effectiveAccentIndex(String themeName, String storedAccent) {
|
|
if (isBuzzTheme(themeName)) return neutralAccentIndex;
|
|
return accentIndexForWireValue(storedAccent) ?? defaultAccentIndex;
|
|
}
|
|
|
|
/// Gradient stops, matching desktop's `--buzz-gradient-*` custom properties.
|
|
const _lightTop = Color(0xFFE6E6B6);
|
|
const _lightBottom = Color(0xFFC4D0DA);
|
|
const _darkTop = Color(0xFF4A4616);
|
|
const _darkBottom = Color(0xFF0A1423);
|
|
|
|
/// The Buzz gradient for the app's top section, or null when [themeName] is not
|
|
/// a Buzz theme — in which case the section keeps its default frosted fill.
|
|
///
|
|
/// The stops are fully opaque: under Buzz the color replaces the frosted
|
|
/// treatment rather than tinting it, matching desktop's solid sidebar canvas.
|
|
///
|
|
/// [brightness] comes from the applied color scheme rather than the theme name,
|
|
/// so System mode picks the right stops as the OS switches.
|
|
LinearGradient? buzzTopSectionGradient(
|
|
String themeName,
|
|
Brightness brightness,
|
|
) {
|
|
if (!isBuzzTheme(themeName)) return null;
|
|
|
|
final isDark = brightness == Brightness.dark;
|
|
return LinearGradient(
|
|
begin: Alignment.topCenter,
|
|
end: Alignment.bottomCenter,
|
|
colors: [
|
|
isDark ? _darkTop : _lightTop,
|
|
isDark ? _darkBottom : _lightBottom,
|
|
],
|
|
);
|
|
}
|