feat: import Chinese-localized Buzz source snapshot

Signed-off-by: cls_宁波本机 <908705107@qq.com>

mobile/lib/features/settings/accent_picker_page.dart

@@ -0,0 +1,92 @@
+import 'package:flutter/material.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:lucide_icons_flutter/lucide_icons.dart';
+
+import '../../shared/l10n/l10n.dart';
+import '../../shared/theme/theme.dart';
+import '../../shared/widgets/frosted_app_bar.dart';
+import '../../shared/widgets/frosted_scaffold.dart';
+
+/// Accent colors as a list of rows, matching the theme picker's shape. The
+/// swatches used to live inline on the settings page as a wrap of tappable
+/// circles; a row per color keeps the settings page to plain rows and gives each
+/// accent a readable name.
+class AccentPickerPage extends ConsumerWidget {
+  const AccentPickerPage({super.key});
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final selected =
+        accentIndexForWireValue(ref.watch(communityThemeProvider).accent) ??
+        defaultAccentIndex;
+    final colorScheme = context.colors;
+
+    return FrostedScaffold(
+      appBar: FrostedAppBar(title: Text(context.l10n.accentColor)),
+      body: ListView(
+        padding: EdgeInsets.only(
+          top: frostedAppBarHeight(context),
+          bottom: Grid.xs,
+        ),
+        children: [
+          for (var i = 0; i < accentColors.length; i++)
+            _AccentRow(
+              color: accentColorForScheme(colorScheme, i),
+              label: _accentLabel(context, accentColors[i].wireValue),
+              selected: selected == i,
+              onTap: () =>
+                  ref.read(communityThemeProvider.notifier).setAccent(i),
+            ),
+        ],
+      ),
+    );
+  }
+}
+
+String _accentLabel(BuildContext context, String wireValue) => switch (wireValue) {
+  'neutral' => context.l10n.accentNeutral,
+  '#3b82f6' => context.l10n.accentBlue,
+  '#06b6d4' => context.l10n.accentCyan,
+  '#22c55e' => context.l10n.accentGreen,
+  '#f97316' => context.l10n.accentOrange,
+  '#ef4444' => context.l10n.accentRed,
+  '#ec4899' => context.l10n.accentPink,
+  '#c0a2f1' => context.l10n.accentLilac,
+  '#a855f7' => context.l10n.accentPurple,
+  '#6366f1' => context.l10n.accentIndigo,
+  _ => wireValue,
+};
+
+class _AccentRow extends StatelessWidget {
+  const _AccentRow({
+    required this.color,
+    required this.label,
+    required this.selected,
+    required this.onTap,
+  });
+
+  final Color color;
+  final String label;
+  final bool selected;
+  final VoidCallback onTap;
+
+  @override
+  Widget build(BuildContext context) {
+    return ListTile(
+      leading: Container(
+        width: 28,
+        height: 28,
+        decoration: BoxDecoration(
+          color: color,
+          shape: BoxShape.circle,
+          border: Border.all(color: context.colors.outlineVariant),
+        ),
+      ),
+      title: Text(label),
+      trailing: selected
+          ? Icon(LucideIcons.check, size: 18, color: context.colors.primary)
+          : null,
+      onTap: onTap,
+    );
+  }
+}

mobile/lib/features/settings/settings_page.dart

@@ -0,0 +1,127 @@
+import 'dart:async';
+
+import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
+import 'package:flutter_hooks/flutter_hooks.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:lucide_icons_flutter/lucide_icons.dart';
+import 'package:nostr/nostr.dart' as nostr;
+import 'package:package_info_plus/package_info_plus.dart';
+
+import '../../shared/auth/auth.dart';
+import '../../shared/clipboard_utils.dart';
+import '../../shared/relay/relay.dart';
+import '../../shared/l10n/l10n.dart';
+import '../../shared/theme/theme.dart';
+import '../../shared/widgets/app_list.dart';
+import '../../shared/widgets/app_list_card.dart';
+import '../../shared/widgets/frosted_app_bar.dart';
+import '../../shared/widgets/frosted_scaffold.dart';
+import '../../shared/widgets/modal_presentation.dart';
+import 'accent_picker_page.dart';
+import 'theme_picker_page.dart';
+
+part 'settings_page/appearance_section.dart';
+part 'settings_page/connection_section.dart';
+
+class SettingsPage extends HookConsumerWidget {
+  const SettingsPage({
+    super.key,
+    required this.profileHeader,
+    required this.identityRecoveryPageBuilder,
+  });
+
+  final Widget profileHeader;
+  final WidgetBuilder identityRecoveryPageBuilder;
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final packageInfoFuture = useMemoized(() => PackageInfo.fromPlatform());
+    final packageInfo = useFuture(packageInfoFuture);
+    final topSectionHeight = frostedAppBarHeight(
+      context,
+      bottomHeight: Grid.xxs,
+    );
+
+    return FrostedScaffold(
+      backgroundColor: context.colors.surface,
+      appBar: FrostedAppBar(
+        automaticallyImplyLeading: false,
+        horizontalInset: Grid.gutter,
+        showBottomDivider: false,
+        leading: SizedBox(
+          width: Grid.xl,
+          height: Grid.xl,
+          child: IconButton(
+            tooltip: context.l10n.settingsClose,
+            onPressed: () {
+              unawaited(HapticFeedback.lightImpact());
+              Navigator.of(context).pop();
+            },
+            color: navigationPrimaryForeground(context),
+            icon: const Icon(LucideIcons.x),
+          ),
+        ),
+        bottomHeight: Grid.xxs,
+        bottom: const SizedBox.expand(),
+      ),
+      body: Column(
+        children: [
+          Expanded(
+            child: ListView(
+              padding: EdgeInsets.only(top: topSectionHeight, bottom: Grid.xs),
+              children: [
+                profileHeader,
+                const _AppearanceSection(),
+                _ConnectionSection(
+                  identityRecoveryPageBuilder: identityRecoveryPageBuilder,
+                ),
+                const _RemoveCommunitySection(),
+              ],
+            ),
+          ),
+          if (packageInfo.hasData)
+            _VersionFooter(version: packageInfo.data!.version),
+        ],
+      ),
+    );
+  }
+}
+
+class _VersionFooter extends StatelessWidget {
+  const _VersionFooter({required this.version});
+
+  final String version;
+
+  @override
+  Widget build(BuildContext context) {
+    return SafeArea(
+      top: false,
+      child: Padding(
+        padding: const EdgeInsets.only(bottom: Grid.xs, top: Grid.xxs),
+        child: Center(
+          child: Text(
+            'v$version',
+            style: context.textTheme.bodySmall?.copyWith(
+              color: context.colors.onSurfaceVariant.withValues(alpha: 0.6),
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+}
+
+/// Trailing affordance shared by the rows that push a picker page.
+class _RowChevron extends StatelessWidget {
+  const _RowChevron();
+
+  @override
+  Widget build(BuildContext context) {
+    return Icon(
+      LucideIcons.chevronRight,
+      size: 18,
+      color: context.colors.onSurfaceVariant,
+    );
+  }
+}

mobile/lib/features/settings/settings_page/appearance_section.dart

@@ -0,0 +1,214 @@
+part of '../settings_page.dart';
+
+/// System / Light / Dark, mirroring desktop's appearance-mode selector.
+const _modeOptions = <({ThemeMode mode, IconData icon})>[
+  (mode: ThemeMode.system, icon: LucideIcons.sunMoon),
+  (mode: ThemeMode.light, icon: LucideIcons.sun),
+  (mode: ThemeMode.dark, icon: LucideIcons.moon),
+];
+
+String _modeLabel(BuildContext context, ThemeMode mode) => switch (mode) {
+  ThemeMode.system => context.l10n.modeSystem,
+  ThemeMode.light => context.l10n.modeLight,
+  ThemeMode.dark => context.l10n.modeDark,
+};
+
+class _AppearanceSection extends ConsumerWidget {
+  const _AppearanceSection();
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final preference = ref.watch(communityThemeProvider);
+    final mode = preference.mode;
+    final schemeName = preference.theme;
+    final accentIndex = effectiveAccentIndex(
+      preference.theme,
+      preference.accent,
+    );
+
+    return AppListCard(
+      label: context.l10n.appearanceStyle,
+      children: [
+        AppListRow(
+          icon: LucideIcons.sunMoon,
+          title: context.l10n.appearance,
+          value: _modeLabel(context, mode),
+          trailing: const _RowChevron(),
+          onTap: () => _showAppearanceModeSheet(context),
+        ),
+        AppListRow(
+          icon: LucideIcons.palette,
+          title: context.l10n.theme,
+          value: themeSelectionLabel(schemeName, mode),
+          trailing: const _RowChevron(),
+          onTap: () => Navigator.of(context).push(
+            MaterialPageRoute<void>(builder: (_) => const ThemePickerPage()),
+          ),
+        ),
+        if (!isBuzzTheme(effectiveTheme(schemeName, mode)?.name ?? schemeName))
+          AppListRow(
+            icon: LucideIcons.droplet,
+            title: context.l10n.accentColor,
+            // The swatch *is* the value — naming the color as well would say the
+            // same thing twice, so it takes the chevron's place.
+            trailing: _AccentSwatch(accentIndex: accentIndex),
+            onTap: () => Navigator.of(context).push(
+              MaterialPageRoute<void>(builder: (_) => const AccentPickerPage()),
+            ),
+          ),
+        AppListRow(
+          icon: LucideIcons.languages,
+          title: context.l10n.language,
+          value: _languageLabel(context, ref.watch(appLocaleProvider)),
+          trailing: const _RowChevron(),
+          onTap: () => _showLanguageSheet(context),
+        ),
+      ],
+    );
+  }
+}
+
+void _showAppearanceModeSheet(BuildContext context) {
+  showBuzzModalBottomSheet<void>(
+    context: context,
+    showDragHandle: true,
+    builder: (_) => const _AppearanceModeSheet(),
+  );
+}
+
+/// Three choices is too few to warrant a page, so the appearance row opens a
+/// sheet rather than pushing a route.
+class _AppearanceModeSheet extends ConsumerWidget {
+  const _AppearanceModeSheet();
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final mode = ref.watch(communityThemeProvider).mode;
+
+    return SafeArea(
+      child: Column(
+        mainAxisSize: MainAxisSize.min,
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          Padding(
+            padding: const EdgeInsets.fromLTRB(
+              Grid.gutter,
+              0,
+              Grid.gutter,
+              Grid.xxs,
+            ),
+            child: Text(
+              context.l10n.appearance,
+              style: context.textTheme.titleMedium,
+            ),
+          ),
+          for (final option in _modeOptions)
+            AppListRow(
+              icon: option.icon,
+              title: _modeLabel(context, option.mode),
+              trailing: option.mode == mode
+                  ? Icon(
+                      LucideIcons.check,
+                      size: 18,
+                      color: context.colors.primary,
+                    )
+                  : null,
+              onTap: () {
+                ref.read(communityThemeProvider.notifier).setMode(option.mode);
+                Navigator.of(context).pop();
+              },
+            ),
+          const SizedBox(height: Grid.xxs),
+        ],
+      ),
+    );
+  }
+}
+
+String _languageLabel(BuildContext context, Locale? locale) {
+  if (locale == null) return context.l10n.languageSystem;
+  return locale.languageCode == 'zh'
+      ? context.l10n.languageChinese
+      : context.l10n.languageEnglish;
+}
+
+void _showLanguageSheet(BuildContext context) {
+  showBuzzModalBottomSheet<void>(
+    context: context,
+    showDragHandle: true,
+    builder: (_) => const _LanguageSheet(),
+  );
+}
+
+class _LanguageSheet extends ConsumerWidget {
+  const _LanguageSheet();
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final selected = ref.watch(appLocaleProvider);
+    final options = <({Locale? locale, String label})>[
+      (locale: null, label: context.l10n.languageSystem),
+      (locale: const Locale('zh', 'CN'), label: context.l10n.languageChinese),
+      (locale: const Locale('en'), label: context.l10n.languageEnglish),
+    ];
+    return SafeArea(
+      child: Column(
+        mainAxisSize: MainAxisSize.min,
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          Padding(
+            padding: const EdgeInsets.fromLTRB(
+              Grid.gutter,
+              0,
+              Grid.gutter,
+              Grid.xxs,
+            ),
+            child: Text(
+              context.l10n.language,
+              style: context.textTheme.titleMedium,
+            ),
+          ),
+          for (final option in options)
+            AppListRow(
+              icon: LucideIcons.languages,
+              title: option.label,
+              trailing: option.locale == selected
+                  ? Icon(
+                      LucideIcons.check,
+                      size: 18,
+                      color: context.colors.primary,
+                    )
+                  : null,
+              onTap: () {
+                ref.read(appLocaleProvider.notifier).setLocale(option.locale);
+                Navigator.of(context).pop();
+              },
+            ),
+          const SizedBox(height: Grid.xxs),
+        ],
+      ),
+    );
+  }
+}
+
+/// The selected accent, shown where a row would otherwise carry a chevron.
+class _AccentSwatch extends StatelessWidget {
+  const _AccentSwatch({required this.accentIndex});
+
+  static const _size = 22.0;
+
+  final int accentIndex;
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      width: _size,
+      height: _size,
+      decoration: BoxDecoration(
+        color: accentColorForScheme(context.colors, accentIndex),
+        shape: BoxShape.circle,
+        border: Border.all(color: context.colors.outlineVariant),
+      ),
+    );
+  }
+}

mobile/lib/features/settings/settings_page/connection_section.dart

@@ -0,0 +1,113 @@
+part of '../settings_page.dart';
+
+class _ConnectionSection extends ConsumerWidget {
+  const _ConnectionSection({required this.identityRecoveryPageBuilder});
+
+  final WidgetBuilder identityRecoveryPageBuilder;
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final config = ref.watch(relayConfigProvider);
+    final nsec = config.nsec;
+
+    return AppListCard(
+      label: context.l10n.connection,
+      children: [
+        AppListRow(
+          icon: LucideIcons.server,
+          title: context.l10n.connectedTo,
+          subtitle: config.baseUrl,
+        ),
+        if (nsec != null && nsec.isNotEmpty) ...[
+          _IdentityRow(nsec: nsec),
+          AppListRow(
+            icon: LucideIcons.scanQrCode,
+            title: context.l10n.sendIdentityToDesktop,
+            subtitle: context.l10n.scanRecoveryCode,
+            trailing: const _RowChevron(),
+            onTap: () => Navigator.of(context).push(
+              MaterialPageRoute<void>(builder: identityRecoveryPageBuilder),
+            ),
+          ),
+        ],
+      ],
+    );
+  }
+}
+
+/// Destructive, so it gets a container of its own rather than sitting at the
+/// bottom of the connection group.
+class _RemoveCommunitySection extends ConsumerWidget {
+  const _RemoveCommunitySection();
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    return AppListCard(
+      children: [
+        AppListRow(
+          icon: LucideIcons.logOut,
+          title: context.l10n.removeCommunity,
+          titleColor: context.colors.error,
+          onTap: () => _confirmRemoveCommunity(context, ref),
+        ),
+      ],
+    );
+  }
+}
+
+class _IdentityRow extends StatelessWidget {
+  const _IdentityRow({required this.nsec});
+
+  final String nsec;
+
+  @override
+  Widget build(BuildContext context) {
+    final privHex = nostr.Nip19.decode(payload: nsec).data;
+    final pubkey = privHex.isNotEmpty ? nostr.Keys(privHex).public : 'unknown';
+
+    return AppListRow(
+      icon: LucideIcons.key,
+      title: context.l10n.identityPubkey,
+      subtitle: pubkey,
+      subtitleStyle: context.textTheme.bodySmall?.copyWith(
+        color: context.colors.onSurfaceVariant,
+        fontFamily: 'GeistMono',
+        fontSize: 11,
+      ),
+      subtitleMaxLines: 2,
+      trailing: IconButton(
+        icon: const Icon(LucideIcons.copy, size: 16),
+        onPressed: () async {
+          await copyToClipboard(context, pubkey, message: context.l10n.pubkeyCopied);
+        },
+      ),
+    );
+  }
+}
+
+void _confirmRemoveCommunity(BuildContext context, WidgetRef ref) {
+  showBuzzDialog<void>(
+    context: context,
+    builder: (ctx) => AlertDialog(
+      title: Text(context.l10n.removeCommunityTitle),
+      content: Text(context.l10n.removeCommunityContent),
+      actions: [
+        TextButton(
+          onPressed: () => Navigator.of(ctx).pop(),
+          child: Text(context.l10n.cancel),
+        ),
+        FilledButton(
+          onPressed: () {
+            Navigator.of(ctx).pop(); // close dialog
+            // Pop all pushed routes back to root so MaterialApp.home rebuilds
+            // to PairingPage when auth state changes.
+            Navigator.of(context).popUntil((route) => route.isFirst);
+            ref.read(authProvider.notifier).signOut();
+          },
+          style: FilledButton.styleFrom(backgroundColor: ctx.colors.error),
+          child: Text(context.l10n.remove),
+        ),
+      ],
+    ),
+  );
+}

mobile/lib/features/settings/theme_picker_page.dart

@@ -0,0 +1,252 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_hooks/flutter_hooks.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:lucide_icons_flutter/lucide_icons.dart';
+
+import '../../shared/theme/theme.dart';
+import '../../shared/l10n/l10n.dart';
+import '../../shared/widgets/frosted_app_bar.dart';
+import '../../shared/widgets/frosted_scaffold.dart';
+
+/// Themes for the current appearance mode, organised the way desktop does it:
+/// System offers the light/dark pairs as single entries, while Light and Dark
+/// each list every theme of that brightness.
+class ThemePickerPage extends HookConsumerWidget {
+  const ThemePickerPage({super.key});
+
+  // ListTile height (~56px) used for scroll offset calculation.
+  static const _itemHeight = 56.0;
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final preference = ref.watch(communityThemeProvider);
+    final mode = preference.mode;
+    final selectedScheme = preference.theme;
+    final searchQuery = useState('');
+    final searchController = useTextEditingController();
+    final scrollController = useScrollController();
+
+    final groups = themeGroups();
+    final entries = switch (mode) {
+      ThemeMode.system => groups.paired,
+      ThemeMode.light => groups.light,
+      ThemeMode.dark => groups.dark,
+    };
+    final isSystem = mode == ThemeMode.system;
+
+    String labelFor(ThemeColors theme) =>
+        isSystem ? pairedThemeLabel(theme.name) : theme.displayName;
+
+    final query = searchQuery.value.toLowerCase();
+    final filtered = query.isEmpty
+        ? entries
+        : entries
+              .where((t) => labelFor(t).toLowerCase().contains(query))
+              .toList();
+
+    // In System mode either half of a pair counts as the selection; in the
+    // pinned modes the effective theme already accounts for coercion, so the
+    // checkmark always names what is actually rendered.
+    final active = effectiveTheme(selectedScheme, mode);
+    bool isSelected(ThemeColors theme) {
+      if (active == null) return false;
+      if (!isSystem) return active.name == theme.name;
+      return active.name == theme.name ||
+          themePairFor(theme.name) == active.name;
+    }
+
+    // Auto-scroll to the selected theme on first build (no search active).
+    useEffect(() {
+      if (query.isNotEmpty) return null;
+      final idx = filtered.indexWhere(isSelected);
+      if (idx < 0) return null;
+      final offset = idx * _itemHeight;
+      WidgetsBinding.instance.addPostFrameCallback((_) {
+        if (scrollController.hasClients) {
+          scrollController.animateTo(
+            offset.clamp(0.0, scrollController.position.maxScrollExtent),
+            duration: const Duration(milliseconds: 300),
+            curve: Curves.easeOut,
+          );
+        }
+      });
+      return null;
+    }, const []);
+
+    return FrostedScaffold(
+      appBar: FrostedAppBar(title: Text(context.l10n.theme)),
+      body: Column(
+        children: [
+          SizedBox(height: frostedAppBarHeight(context)),
+          _SearchField(
+            controller: searchController,
+            query: searchQuery.value,
+            onChanged: (v) => searchQuery.value = v,
+            onClear: () {
+              searchController.clear();
+              searchQuery.value = '';
+            },
+          ),
+          Expanded(
+            child: filtered.isEmpty
+                ? Padding(
+                    padding: const EdgeInsets.all(Grid.sm),
+                    child: Center(
+                      child: Text(
+                        context.l10n.noThemesFound,
+                        style: context.textTheme.bodyMedium?.copyWith(
+                          color: context.colors.onSurfaceVariant,
+                        ),
+                      ),
+                    ),
+                  )
+                : ListView.builder(
+                    controller: scrollController,
+                    itemCount: filtered.length,
+                    itemBuilder: (_, i) {
+                      final theme = filtered[i];
+                      final pairName = isSystem
+                          ? themePairFor(theme.name)
+                          : null;
+                      return _ThemeRow(
+                        theme: theme,
+                        pair: pairName == null ? null : findTheme(pairName),
+                        label: labelFor(theme),
+                        selected: isSelected(theme),
+                        onTap: () => ref
+                            .read(communityThemeProvider.notifier)
+                            .setTheme(theme.name),
+                      );
+                    },
+                  ),
+          ),
+        ],
+      ),
+    );
+  }
+}
+
+class _SearchField extends StatelessWidget {
+  const _SearchField({
+    required this.controller,
+    required this.query,
+    required this.onChanged,
+    required this.onClear,
+  });
+
+  final TextEditingController controller;
+  final String query;
+  final ValueChanged<String> onChanged;
+  final VoidCallback onClear;
+
+  @override
+  Widget build(BuildContext context) {
+    return Padding(
+      padding: const EdgeInsets.symmetric(
+        horizontal: Grid.gutter,
+        vertical: Grid.xxs,
+      ),
+      child: Container(
+        height: 36,
+        padding: const EdgeInsets.symmetric(horizontal: Grid.twelve),
+        decoration: BoxDecoration(
+          color: context.colors.surfaceContainerHighest,
+          borderRadius: BorderRadius.circular(Radii.lg),
+          border: Border.all(color: context.colors.outlineVariant),
+        ),
+        child: Row(
+          children: [
+            Icon(
+              LucideIcons.search,
+              size: 16,
+              color: context.colors.onSurfaceVariant,
+            ),
+            const SizedBox(width: Grid.xxs),
+            Expanded(
+              child: TextField(
+                controller: controller,
+                decoration: InputDecoration(
+                  hintText: context.l10n.themeSearch,
+                  hintStyle: context.textTheme.bodyMedium?.copyWith(
+                    color: context.colors.onSurfaceVariant,
+                  ),
+                  border: InputBorder.none,
+                  enabledBorder: InputBorder.none,
+                  focusedBorder: InputBorder.none,
+                  isDense: true,
+                  contentPadding: EdgeInsets.zero,
+                ),
+                style: context.textTheme.bodyMedium,
+                onChanged: onChanged,
+              ),
+            ),
+            if (query.isNotEmpty)
+              GestureDetector(
+                onTap: onClear,
+                child: Icon(
+                  LucideIcons.x,
+                  size: 16,
+                  color: context.colors.onSurfaceVariant,
+                ),
+              ),
+          ],
+        ),
+      ),
+    );
+  }
+}
+
+/// A theme row with a colour bar + name + checkmark. When [pair] is supplied the
+/// bar is split down the middle — light stripes on the left, dark on the right —
+/// standing in for desktop's split light/dark preview tile.
+class _ThemeRow extends StatelessWidget {
+  const _ThemeRow({
+    required this.theme,
+    required this.pair,
+    required this.label,
+    required this.selected,
+    required this.onTap,
+  });
+
+  final ThemeColors theme;
+  final ThemeColors? pair;
+  final String label;
+  final bool selected;
+  final VoidCallback onTap;
+
+  @override
+  Widget build(BuildContext context) {
+    final swatch = pair == null ? [theme] : [theme, pair!];
+
+    return ListTile(
+      leading: Container(
+        width: 56,
+        height: 28,
+        decoration: BoxDecoration(
+          borderRadius: BorderRadius.circular(Radii.sm),
+          border: Border.all(color: context.colors.outlineVariant),
+        ),
+        child: ClipRRect(
+          borderRadius: BorderRadius.circular(Radii.sm - 1),
+          child: Row(
+            children: [
+              for (final t in swatch)
+                for (final color in [t.bg, t.fg, t.comment])
+                  Expanded(
+                    child: ColoredBox(
+                      color: color,
+                      child: const SizedBox.expand(),
+                    ),
+                  ),
+            ],
+          ),
+        ),
+      ),
+      title: Text(label),
+      trailing: selected
+          ? Icon(LucideIcons.check, size: 18, color: context.colors.primary)
+          : null,
+      onTap: onTap,
+    );
+  }
+}