only-bible-app

GIT_CONFIG_PARAMETERS="'http.version=HTTP/1.1'" git clone https://git.pyrossh.dev/only-bible-app/.git only-bible-app
Discussions: https://groups.google.com/g/rust-embed-devs

The only bible app you will ever need. No ads. No in-app purchases. No distractions.

6b650d7f — pyrossh

HEAD -> main

new features

Files changed (6) hide show

lib/app.dart +1 -1
lib/store/actions_state.dart +49 -3
lib/store/app_state.dart +46 -11
lib/widgets/highlight_history_sheet.dart +594 -208
lib/widgets/menu_overlay.dart +6 -6
lib/widgets/settings_sheet.dart +17 -5

lib/app.dart CHANGED Viewed

@@ -78,7 +78,7 @@ class App extends StatelessWidget {
             routerConfig: _router,
             title: "Only Bible App",
             debugShowCheckedModeBanner: false,
-            themeMode: context.select((s) => s.darkMode) ? ThemeMode.dark : ThemeMode.light,
+            themeMode: context.select((s) => s.themeMode),
             theme: lightTheme,
             darkTheme: darkTheme,
           ),

lib/store/actions_state.dart CHANGED Viewed

@@ -1,8 +1,8 @@
 import "dart:developer";
 import "package:async_redux/async_redux.dart";
-import "package:flutter_soloud/flutter_soloud.dart";
 import "package:flutter/material.dart";
+import "package:flutter_soloud/flutter_soloud.dart";
 import "package:only_bible_app/dialog.dart";
 import "package:only_bible_app/gen/bible.gen.dart";
 import "package:only_bible_app/store/app_state.dart";
@@ -22,9 +22,12 @@ class UpdateFontWeightAction extends ReduxAction<AppState> {
   AppState reduce() => state.copy(fontWeight: value);
 }
-class ToggleDarkModeAction extends ReduxAction<AppState> {
+class SetThemeModeAction extends ReduxAction<AppState> {
+  final ThemeMode mode;
+  SetThemeModeAction(this.mode);
   @override
-  AppState reduce() => state.copy(darkMode: !state.darkMode);
+  AppState reduce() => state.copy(themeMode: mode);
 }
 class UpdateFontSizeAction extends ReduxAction<AppState> {
@@ -157,6 +160,49 @@ class SetHighlightAction extends ReduxAction<AppState> {
   }
 }
+class SetHighlightGroupTitleAction extends ReduxAction<AppState> {
+  final String groupKey;
+  final String title;
+  SetHighlightGroupTitleAction(this.groupKey, this.title);
+  @override
+  AppState reduce() {
+    final updated = Map<String, String>.from(state.highlightGroupTitles);
+    if (title.trim().isEmpty) {
+      updated.remove(groupKey);
+    } else {
+      updated[groupKey] = title.trim();
+    }
+    return state.copy(highlightGroupTitles: updated);
+  }
+}
+class RemoveHighlightHistoryEntryAction extends ReduxAction<AppState> {
+  final int book;
+  final int chapter;
+  final int verseIndex;
+  final DateTime timestamp;
+  RemoveHighlightHistoryEntryAction({
+    required this.book,
+    required this.chapter,
+    required this.verseIndex,
+    required this.timestamp,
+  });
+  @override
+  AppState reduce() {
+    final updated = state.highlightHistory.where((e) {
+      return !(e.book == book &&
+          e.chapter == chapter &&
+          e.verseIndex == verseIndex &&
+          e.timestamp == timestamp);
+    }).toList();
+    return state.copy(highlightHistory: updated);
+  }
+}
 class RemoveHighlightAction extends ReduxAction<AppState> {
   final List<Verse> verses;

lib/store/app_state.dart CHANGED Viewed

@@ -4,6 +4,22 @@ import "package:only_bible_app/theme.dart";
 import "package:async_redux/async_redux.dart";
 export "package:async_redux/async_redux.dart" show BuildContextExtensionForProviderAndConnector;
+ThemeMode _themeModeFromString(String? s) {
+  switch (s) {
+    case "dark": return ThemeMode.dark;
+    case "system": return ThemeMode.system;
+    default: return ThemeMode.light;
+  }
+}
+String _themeModeToString(ThemeMode m) {
+  switch (m) {
+    case ThemeMode.dark: return "dark";
+    case ThemeMode.system: return "system";
+    case ThemeMode.light: return "light";
+  }
+}
 class HighlightHistoryEntry {
   final int book;
   final int chapter;
@@ -39,50 +55,59 @@ class HighlightHistoryEntry {
 class AppState {
   final bool engTitles;
   final int fontWeight;
-  final bool darkMode;
+  final ThemeMode themeMode;
   final double fontSize;
   final int savedBook;
   final int savedChapter;
   final List<Verse> selectedVerses;
   final Map<String, int> highlights;
   final List<HighlightHistoryEntry> highlightHistory;
+  // Keys are group-label strings (e.g. "Monday 6th June, 2026"). Values are user-written titles.
+  final Map<String, String> highlightGroupTitles;
   final Bible bible;
   AppState({
     this.engTitles = false,
     this.fontWeight = 400,
-    this.darkMode = false,
+    this.themeMode = ThemeMode.system,
     this.fontSize = 17.0,
     this.savedBook = 0,
     this.savedChapter = 0,
     this.selectedVerses = const [],
     this.highlights = const {},
     this.highlightHistory = const [],
+    this.highlightGroupTitles = const {},
     required this.bible,
   });
+  /// True only when dark mode is explicitly selected (not system).
+  /// Use Theme.of(context).brightness for system-aware checks in widgets.
+  bool get darkMode => themeMode == ThemeMode.dark;
   AppState copy({
     bool? engTitles,
     int? fontWeight,
-    bool? darkMode,
+    ThemeMode? themeMode,
     double? fontSize,
     int? savedBook,
     int? savedChapter,
     List<Verse>? selectedVerses,
     Map<String, int>? highlights,
     List<HighlightHistoryEntry>? highlightHistory,
+    Map<String, String>? highlightGroupTitles,
     Bible? bible,
   }) {
     return AppState(
       engTitles: engTitles ?? this.engTitles,
       fontWeight: fontWeight ?? this.fontWeight,
-      darkMode: darkMode ?? this.darkMode,
+      themeMode: themeMode ?? this.themeMode,
       fontSize: fontSize ?? this.fontSize,
       savedBook: savedBook ?? this.savedBook,
       savedChapter: savedChapter ?? this.savedChapter,
       selectedVerses: selectedVerses ?? this.selectedVerses,
       highlights: highlights ?? this.highlights,
       highlightHistory: highlightHistory ?? this.highlightHistory,
+      highlightGroupTitles: highlightGroupTitles ?? this.highlightGroupTitles,
       bible: bible ?? this.bible,
     );
   }
@@ -91,18 +116,24 @@ class AppState {
         "bibleName": bible.name,
         "engTitles": engTitles,
         "fontWeight": fontWeight,
-        "darkMode": darkMode,
+        "themeMode": _themeModeToString(themeMode),
         "fontSize": fontSize,
         "savedBook": savedBook,
         "savedChapter": savedChapter,
         "highlights": highlights,
         "highlightHistory": highlightHistory.map((e) => e.toJson()).toList(),
+        "highlightGroupTitles": highlightGroupTitles,
       };
   factory AppState.fromJson(Map<String, dynamic> json, Bible bible) => AppState(
         engTitles: json["engTitles"] as bool? ?? false,
         fontWeight: json["fontWeight"] as int? ?? (json["boldFont"] == true ? 500 : 400),
+        // Migrate legacy bool "darkMode" → ThemeMode string; new installs default to system
-        darkMode: json["darkMode"] as bool? ?? false,
+        themeMode: json["themeMode"] != null
+            ? _themeModeFromString(json["themeMode"] as String?)
+            : (json.containsKey("darkMode")
+                ? ((json["darkMode"] as bool? ?? false) ? ThemeMode.dark : ThemeMode.light)
+                : ThemeMode.system),
         fontSize: (json["fontSize"] as num?)?.toDouble() ?? ((json["textScale"] as num?)?.toDouble() ?? 0.0) + 16.0,
         savedBook: json["savedBook"] as int? ?? 0,
         savedChapter: json["savedChapter"] as int? ?? 0,
@@ -111,14 +142,17 @@ class AppState {
                 ?.map((e) => HighlightHistoryEntry.fromJson(e as Map<String, dynamic>))
                 .toList() ??
             const [],
+        highlightGroupTitles:
+            (json["highlightGroupTitles"] as Map<String, dynamic>?)?.map((k, v) => MapEntry(k, v as String)) ??
+                const {},
         bible: bible,
       );
-  Color? getHighlight(Verse v) {
+  Color? getHighlight(Verse v, {required bool effectiveDark}) {
     final key = "${v.book}:${v.chapter}:${v.index}";
     final index = highlights[key];
     if (index == null) return null;
-    return darkMode ? darkHighlights[index] : lightHighlights[index];
+    return effectiveDark ? darkHighlights[index] : lightHighlights[index];
   }
   bool isVerseSelected(Verse v) {
@@ -128,6 +162,7 @@ class AppState {
   }
   TextStyle getHighlightStyle(BuildContext context, Verse v) {
+    final effectiveDark = Theme.of(context).brightness == Brightness.dark;
     final isSelected = selectedVerses.any(
       (el) => el.book == v.book && el.chapter == v.chapter && el.index == v.index,
     );
@@ -136,13 +171,13 @@ class AppState {
         backgroundColor: Theme.of(context).textSelectionTheme.selectionColor,
       );
     }
-    if (darkMode) {
+    if (effectiveDark) {
       return TextStyle(
-        color: getHighlight(v) ?? Theme.of(context).colorScheme.onSurface,
+        color: getHighlight(v, effectiveDark: true) ?? Theme.of(context).colorScheme.onSurface,
       );
     }
     return TextStyle(
-      backgroundColor: getHighlight(v) ?? Theme.of(context).colorScheme.surface,
+      backgroundColor: getHighlight(v, effectiveDark: false) ?? Theme.of(context).colorScheme.surface,
     );
   }
 }

lib/widgets/highlight_history_sheet.dart CHANGED Viewed

@@ -1,10 +1,30 @@
 import "package:flutter/material.dart";
 import "package:only_bible_app/gen/bible.gen.dart";
 import "package:only_bible_app/store/actions_navigation.dart";
+import "package:only_bible_app/store/actions_state.dart";
 import "package:only_bible_app/store/app_navigator.dart";
 import "package:only_bible_app/store/app_state.dart";
 import "package:only_bible_app/theme.dart";
+enum _Grouping { day, month, year }
+// Pre-computed data for one accordion group, passed to _DayGroup.
+class _GroupData {
+  final int index;
+  final String dateLabel;
+  final String groupTitle;
+  final List<HighlightHistoryEntry> entries;
+  final bool isExpanded;
+  const _GroupData({
+    required this.index,
+    required this.dateLabel,
+    required this.groupTitle,
+    required this.entries,
+    required this.isExpanded,
+  });
+}
 class HighlightHistorySheet extends StatefulWidget {
   final Bible bible;
@@ -15,103 +35,301 @@ class HighlightHistorySheet extends StatefulWidget {
 }
 class _HighlightHistorySheetState extends State<HighlightHistorySheet> {
-  // Tracks which day groups are expanded; today (index 0) starts open.
+  // ── Filter state ──────────────────────────────────────────────────────────
+  bool _showFilter = false;
-  final Set<int> _expanded = {0};
+  _Grouping _grouping = _Grouping.day;
+  int? _selectedYear;   // null = all years
+  int? _selectedMonth;  // null = all months (only used when grouping == day)
-  String _formatTime(DateTime dt) {
-    final h = dt.hour.toString().padLeft(2, "0");
+  // ── Accordion state ───────────────────────────────────────────────────────
-    final m = dt.minute.toString().padLeft(2, "0");
+  final Set<int> _collapsed = {};
-    return "$h:$m";
+  // ── Formatting helpers ────────────────────────────────────────────────────
-  }
   String _ordinal(int day) {
     if (day >= 11 && day <= 13) return "${day}th";
     switch (day % 10) {
-      case 1:
-        return "${day}st";
+      case 1: return "${day}st";
-      case 2:
-        return "${day}nd";
+      case 2: return "${day}nd";
-      case 3:
-        return "${day}rd";
+      case 3: return "${day}rd";
-      default:
-        return "${day}th";
+      default: return "${day}th";
     }
   }
-  String _formatDate(DateTime dt) {
+  static const _weekdays = [
-    const weekdays = ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"];
+    "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday",
-    const months = [
-      "January",
-      "February",
-      "March",
-      "April",
-      "May",
-      "June",
-      "July",
-      "August",
-      "September",
-      "October",
-      "November",
-      "December",
-    ];
+  ];
-    final weekday = weekdays[dt.weekday - 1];
+  static const _monthNames = [
-    return "$weekday ${_ordinal(dt.day)} ${months[dt.month - 1]}, ${dt.year}";
+    "January", "February", "March", "April", "May", "June",
+    "July", "August", "September", "October", "November", "December",
-  }
+  ];
-  List<InlineSpan> _parseRedText(String raw, TextStyle base, TextStyle redStyle) {
-    final spans = <InlineSpan>[];
-    final exp = RegExp(r"<red>(.*?)<\/red>", dotAll: true);
-    int cursor = 0;
-    for (final match in exp.allMatches(raw)) {
+  String _groupKey(DateTime dt) {
-      if (match.start > cursor) {
+    switch (_grouping) {
+      case _Grouping.day:
-        spans.add(TextSpan(text: raw.substring(cursor, match.start), style: base));
+        return "${_weekdays[dt.weekday - 1]} ${_ordinal(dt.day)} ${_monthNames[dt.month - 1]}, ${dt.year}";
-      }
+      case _Grouping.month:
-      spans.add(TextSpan(text: match.group(1), style: redStyle));
+        return "${_monthNames[dt.month - 1]} ${dt.year}";
-      cursor = match.end;
+      case _Grouping.year:
+        return "${dt.year}";
     }
+  }
+  bool _entryPassesFilter(HighlightHistoryEntry e) {
+    if (_selectedYear != null && e.timestamp.year != _selectedYear) return false;
+    if (_grouping == _Grouping.day && _selectedMonth != null && e.timestamp.month != _selectedMonth) return false;
+    return true;
+  }
+  // ── Dedup ─────────────────────────────────────────────────────────────────
+  List<HighlightHistoryEntry> _dedup(List<HighlightHistoryEntry> entries) {
-    if (cursor < raw.length) {
+    final seen = <String>{};
+    final result = <HighlightHistoryEntry>[];
+    for (final e in entries) {
-      spans.add(TextSpan(text: raw.substring(cursor), style: base));
+      if (seen.add("${e.book}:${e.chapter}:${e.verseIndex}")) result.add(e);
     }
-    return spans;
+    return result;
   }
-  void _toggle(int index) {
+  void _toggle(int index) => setState(() {
-    setState(() {
-      if (_expanded.contains(index)) {
+        if (_collapsed.contains(index)) {
-        _expanded.remove(index);
+          _collapsed.remove(index);
-      } else {
+        } else {
-        _expanded.add(index);
+          _collapsed.add(index);
-      }
+        }
-    });
+      });
+  String _filterSummary() {
+    final groupLabel = _grouping.name[0].toUpperCase() + _grouping.name.substring(1);
+    if (_selectedYear == null) return groupLabel;
+    if (_grouping == _Grouping.day && _selectedMonth != null) {
+      return "$groupLabel · ${_monthNames[_selectedMonth! - 1]} $_selectedYear";
+    }
+    if (_grouping == _Grouping.month) return "$groupLabel · $_selectedYear";
+    return "$groupLabel · $_selectedYear";
   }
   @override
   Widget build(BuildContext context) {
     final history = context.select((s) => s.highlightHistory);
-    final darkMode = context.select((s) => s.darkMode);
+    final groupTitles = context.select((s) => s.highlightGroupTitles);
+    final darkMode = Theme.of(context).brightness == Brightness.dark;
     final colorScheme = Theme.of(context).colorScheme;
+    // Derive available years / months from the full history.
+    final allYears = history.map((e) => e.timestamp.year).toSet().toList()..sort((a, b) => b.compareTo(a));
+    final availableMonths = _selectedYear == null
+        ? <int>[]
+        : history
+            .where((e) => e.timestamp.year == _selectedYear)
+            .map((e) => e.timestamp.month)
+            .toSet()
+            .toList()
+          ..sort();
-    // Group by date (newest first)
+    // Filter then group.
-    final reversed = history.reversed.toList();
+    final filtered = history.reversed.where(_entryPassesFilter).toList();
     final Map<String, List<HighlightHistoryEntry>> grouped = {};
-    for (final entry in reversed) {
+    for (final entry in filtered) {
-      final key = _formatDate(entry.timestamp);
-      grouped.putIfAbsent(key, () => []).add(entry);
+      grouped.putIfAbsent(_groupKey(entry.timestamp), () => []).add(entry);
     }
+    // Pre-compute list — zero context reads inside itemBuilder.
-    final dateKeys = grouped.keys.toList();
+    final groups = grouped.entries.toList().asMap().entries.map((kv) {
+      final i = kv.key;
+      final e = kv.value;
+      return _GroupData(
+        index: i,
+        dateLabel: e.key,
+        groupTitle: groupTitles[e.key] ?? "",
+        entries: _dedup(e.value),
+        isExpanded: !_collapsed.contains(i),
+      );
+    }).toList();
+    final hasActiveFilter = _selectedYear != null || _grouping != _Grouping.day;
     return Padding(
       padding: const EdgeInsets.symmetric(horizontal: 20),
       child: Column(
         crossAxisAlignment: CrossAxisAlignment.start,
         children: [
+          // ── Header ────────────────────────────────────────────────────────
+          Row(
+            children: [
+              Expanded(
+                child: Text("Highlight History", style: Theme.of(context).textTheme.headlineMedium),
+              ),
+              // Filter button
+              GestureDetector(
+                onTap: () => setState(() => _showFilter = !_showFilter),
+                child: AnimatedContainer(
+                  duration: const Duration(milliseconds: 150),
+                  padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 5),
+                  decoration: BoxDecoration(
+                    color: (_showFilter || hasActiveFilter) ? colorScheme.primary : Colors.transparent,
+                    borderRadius: BorderRadius.circular(20),
+                    border: Border.all(
+                      color: (_showFilter || hasActiveFilter) ? colorScheme.primary : colorScheme.outlineVariant,
+                    ),
+                  ),
+                  child: Row(
+                    mainAxisSize: MainAxisSize.min,
+                    children: [
+                      Icon(
+                        Icons.tune,
+                        size: 14,
+                        color: (_showFilter || hasActiveFilter) ? colorScheme.onPrimary : colorScheme.onSurfaceVariant,
+                      ),
+                      const SizedBox(width: 5),
-          Text(
+                      Text(
-            "Highlight History",
+                        _filterSummary(),
-            style: Theme.of(context).textTheme.headlineMedium,
+                        style: Theme.of(context).textTheme.labelSmall?.copyWith(
+                              color: (_showFilter || hasActiveFilter)
+                                  ? colorScheme.onPrimary
+                                  : colorScheme.onSurfaceVariant,
+                              fontWeight: FontWeight.w600,
+                            ),
+                      ),
+                    ],
+                  ),
+                ),
+              ),
+            ],
+          ),
+          // ── Filter panel ──────────────────────────────────────────────────
+          AnimatedCrossFade(
+            duration: const Duration(milliseconds: 200),
+            crossFadeState: _showFilter ? CrossFadeState.showSecond : CrossFadeState.showFirst,
+            firstChild: const SizedBox.shrink(),
+            secondChild: Container(
+              margin: const EdgeInsets.only(top: 10),
+              padding: const EdgeInsets.all(12),
+              decoration: BoxDecoration(
+                color: colorScheme.surfaceContainerHighest,
+                borderRadius: BorderRadius.circular(12),
+              ),
+              child: Column(
+                crossAxisAlignment: CrossAxisAlignment.start,
+                children: [
+                  // Row 1 — Grouping
+                  Text(
+                    "Group by",
+                    style: Theme.of(context).textTheme.labelSmall?.copyWith(color: colorScheme.outline),
+                  ),
+                  const SizedBox(height: 6),
+                  Row(
+                    children: [
+                      _Pill(
+                        label: "Day",
+                        selected: _grouping == _Grouping.day,
+                        onTap: () => setState(() {
+                          _grouping = _Grouping.day;
+                          _collapsed.clear();
+                        }),
+                      ),
+                      const SizedBox(width: 6),
+                      _Pill(
+                        label: "Month",
+                        selected: _grouping == _Grouping.month,
+                        onTap: () => setState(() {
+                          _grouping = _Grouping.month;
+                          _selectedMonth = null;
+                          _collapsed.clear();
+                        }),
+                      ),
+                      const SizedBox(width: 6),
+                      _Pill(
+                        label: "Year",
+                        selected: _grouping == _Grouping.year,
+                        onTap: () => setState(() {
+                          _grouping = _Grouping.year;
+                          _selectedYear = null;
+                          _selectedMonth = null;
+                          _collapsed.clear();
+                        }),
+                      ),
+                    ],
+                  ),
+                  // Row 2 — Year (hidden when grouping == year)
+                  if (_grouping != _Grouping.year && allYears.isNotEmpty) ...[
+                    const SizedBox(height: 10),
+                    Text(
+                      "Year",
+                      style: Theme.of(context).textTheme.labelSmall?.copyWith(color: colorScheme.outline),
+                    ),
+                    const SizedBox(height: 6),
+                    SingleChildScrollView(
+                      scrollDirection: Axis.horizontal,
+                      child: Row(
+                        children: [
+                          _Pill(
+                            label: "All",
+                            selected: _selectedYear == null,
+                            onTap: () => setState(() {
+                              _selectedYear = null;
+                              _selectedMonth = null;
+                              _collapsed.clear();
+                            }),
+                          ),
+                          ...allYears.map((y) => Padding(
+                                padding: const EdgeInsets.only(left: 6),
+                                child: _Pill(
+                                  label: "$y",
+                                  selected: _selectedYear == y,
+                                  onTap: () => setState(() {
+                                    _selectedYear = y;
+                                    _selectedMonth = null;
+                                    _collapsed.clear();
+                                  }),
+                                ),
+                              )),
+                        ],
+                      ),
+                    ),
+                  ],
+                  // Row 3 — Month (only when grouping == day and a year is selected)
+                  if (_grouping == _Grouping.day && _selectedYear != null && availableMonths.isNotEmpty) ...[
+                    const SizedBox(height: 10),
+                    Text(
+                      "Month",
+                      style: Theme.of(context).textTheme.labelSmall?.copyWith(color: colorScheme.outline),
+                    ),
+                    const SizedBox(height: 6),
+                    SingleChildScrollView(
+                      scrollDirection: Axis.horizontal,
+                      child: Row(
+                        children: [
+                          _Pill(
+                            label: "All",
+                            selected: _selectedMonth == null,
+                            onTap: () => setState(() { _selectedMonth = null; _collapsed.clear(); }),
+                          ),
+                          ...availableMonths.map((m) => Padding(
+                                padding: const EdgeInsets.only(left: 6),
+                                child: _Pill(
+                                  label: _monthNames[m - 1],
+                                  selected: _selectedMonth == m,
+                                  onTap: () => setState(() { _selectedMonth = m; _collapsed.clear(); }),
+                                ),
+                              )),
+                        ],
+                      ),
+                    ),
+                  ],
+                ],
+              ),
+            ),
           ),
           const SizedBox(height: 12),
+          // ── Empty state ───────────────────────────────────────────────────
-          if (grouped.isEmpty)
+          if (groups.isEmpty)
             Expanded(
               child: Center(
                 child: Column(
@@ -128,160 +346,328 @@ class _HighlightHistorySheetState extends State<HighlightHistorySheet> {
               ),
             )
           else
+            // ── Accordion list ─────────────────────────────────────────────
             Expanded(
               child: ListView.builder(
-                itemCount: dateKeys.length,
-                itemBuilder: (context, i) {
-                  final dateLabel = dateKeys[i];
-                  final entries = grouped[dateLabel]!;
-                  final isExpanded = _expanded.contains(i);
-                  return Column(
-                    crossAxisAlignment: CrossAxisAlignment.start,
-                    children: [
-                      // Accordion header
-                      InkWell(
-                        onTap: () => _toggle(i),
-                        borderRadius: BorderRadius.circular(6),
-                        child: Padding(
-                          padding: const EdgeInsets.symmetric(vertical: 10),
-                          child: Row(
-                            children: [
-                              Expanded(
-                                child: Text(
-                                  dateLabel,
-                                  style: Theme.of(context).textTheme.labelLarge?.copyWith(
-                                        color: colorScheme.primary,
-                                        fontWeight: FontWeight.bold,
-                                      ),
-                                ),
-                              ),
-                              Text(
-                                "${entries.length}",
-                                style: Theme.of(context).textTheme.labelSmall?.copyWith(
-                                      color: colorScheme.outline,
-                                    ),
-                              ),
-                              const SizedBox(width: 4),
-                              AnimatedRotation(
-                                turns: isExpanded ? 0.5 : 0,
-                                duration: const Duration(milliseconds: 200),
-                                child: Icon(
-                                  Icons.keyboard_arrow_down,
-                                  size: 20,
-                                  color: colorScheme.primary,
-                                ),
+                itemCount: groups.length,
+                itemBuilder: (_, i) => _DayGroup(
+                  data: groups[i],
+                  bible: widget.bible,
+                  darkMode: darkMode,
+                  onToggle: () => _toggle(i),
+                ),
+              ),
+            ),
+          const SizedBox(height: 16),
+        ],
+      ),
+    );
+  }
+}
+// ── Per-group accordion widget ─────────────────────────────────────────────
+class _DayGroup extends StatelessWidget {
+  final _GroupData data;
+  final Bible bible;
+  final bool darkMode;
+  final VoidCallback onToggle;
+  const _DayGroup({
+    required this.data,
+    required this.bible,
+    required this.darkMode,
+    required this.onToggle,
+  });
+  static List<InlineSpan> _parseRedText(String raw, TextStyle base, TextStyle redStyle) {
+    final spans = <InlineSpan>[];
+    final exp = RegExp(r"<red>(.*?)<\/red>", dotAll: true);
+    int cursor = 0;
+    for (final match in exp.allMatches(raw)) {
+      if (match.start > cursor) {
+        spans.add(TextSpan(text: raw.substring(cursor, match.start), style: base));
+      }
+      spans.add(TextSpan(text: match.group(1), style: redStyle));
+      cursor = match.end;
+    }
+    if (cursor < raw.length) {
+      spans.add(TextSpan(text: raw.substring(cursor), style: base));
+    }
+    return spans;
+  }
+  static String _formatTime(DateTime dt) {
+    final h = dt.hour.toString().padLeft(2, "0");
+    final m = dt.minute.toString().padLeft(2, "0");
+    return "$h:$m";
+  }
+  @override
+  Widget build(BuildContext context) {
+    final colorScheme = Theme.of(context).colorScheme;
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: [
+        // Accordion header
+        InkWell(
+          onTap: onToggle,
+          borderRadius: BorderRadius.circular(6),
+          child: Padding(
+            padding: const EdgeInsets.symmetric(vertical: 10),
+            child: Row(
+              children: [
+                Expanded(
+                  child: Text(
+                    data.dateLabel,
+                    style: Theme.of(context).textTheme.labelLarge?.copyWith(
+                          color: colorScheme.primary,
+                          fontWeight: FontWeight.bold,
+                        ),
+                  ),
+                ),
+                Text(
+                  "${data.entries.length}",
+                  style: Theme.of(context).textTheme.labelSmall?.copyWith(color: colorScheme.outline),
+                ),
+                const SizedBox(width: 4),
+                AnimatedRotation(
+                  turns: data.isExpanded ? 0.5 : 0,
+                  duration: const Duration(milliseconds: 200),
+                  child: Icon(Icons.keyboard_arrow_down, size: 20, color: colorScheme.primary),
+                ),
+              ],
+            ),
+          ),
+        ),
+        // Editable group title
+        _GroupTitleField(groupKey: data.dateLabel, initialValue: data.groupTitle),
+        // Accordion body
+        AnimatedCrossFade(
+          firstChild: const SizedBox.shrink(),
+          secondChild: Column(
+            children: data.entries.map((entry) {
+              final bookName = bible.books?[entry.book].name ?? "Book ${entry.book + 1}";
+              final chapterNum = entry.chapter + 1;
+              final verseNum = entry.verseIndex + 1;
+              final highlightColor = darkMode ? darkHighlights[entry.colorIndex] : lightHighlights[entry.colorIndex];
+              final verseText = bible.books?[entry.book].chapters?[entry.chapter].verses?[entry.verseIndex].text;
+              return Dismissible(
+                key: ValueKey(
+                  "${entry.book}:${entry.chapter}:${entry.verseIndex}:${entry.timestamp.millisecondsSinceEpoch}",
+                ),
+                direction: DismissDirection.endToStart,
+                background: Container(
+                  alignment: Alignment.centerRight,
+                  padding: const EdgeInsets.only(right: 16),
+                  decoration: BoxDecoration(
+                    color: colorScheme.errorContainer,
+                    borderRadius: BorderRadius.circular(6),
+                  ),
+                  child: Icon(Icons.delete_outline, color: colorScheme.onErrorContainer),
+                ),
+                onDismissed: (_) => context.dispatch(
+                  RemoveHighlightHistoryEntryAction(
+                    book: entry.book,
+                    chapter: entry.chapter,
+                    verseIndex: entry.verseIndex,
+                    timestamp: entry.timestamp,
+                  ),
+                ),
+                child: InkWell(
+                  onTap: () {
+                    Navigator.of(context).pop();
+                    context.dispatch(GoToChapterAction(
+                      context.router,
+                      entry.book,
+                      entry.chapter,
+                      verse: entry.verseIndex,
+                    ));
+                  },
+                  borderRadius: BorderRadius.circular(6),
+                  child: Padding(
+                    padding: const EdgeInsets.symmetric(vertical: 6, horizontal: 2),
+                    child: Row(
+                      crossAxisAlignment: CrossAxisAlignment.start,
+                      children: [
+                        SizedBox(
+                          height: 20,
+                          child: Center(
+                            child: Container(
+                              width: 14,
+                              height: 14,
+                              decoration: BoxDecoration(
+                                color: highlightColor,
+                                shape: BoxShape.circle,
+                                border: Border.all(color: colorScheme.outlineVariant, width: 0.5),
                               ),
-                            ],
+                            ),
                           ),
                         ),
-                      ),
-                      // Accordion body
-                      AnimatedCrossFade(
-                        firstChild: const SizedBox.shrink(),
+                        const SizedBox(width: 10),
+                        Expanded(
-                        secondChild: Column(
+                          child: Column(
-                          children: entries.map((entry) {
-                            final bookName = widget.bible.books?[entry.book].name ?? "Book ${entry.book + 1}";
-                            final chapterNum = entry.chapter + 1;
-                            final verseNum = entry.verseIndex + 1;
-                            final highlightColor =
-                                darkMode ? darkHighlights[entry.colorIndex] : lightHighlights[entry.colorIndex];
-                            final verseText =
-                                widget.bible.books?[entry.book].chapters?[entry.chapter].verses?[entry.verseIndex].text;
-                            return InkWell(
-                              onTap: () {
-                                Navigator.of(context).pop();
-                                context.dispatch(GoToChapterAction(
-                                  context.router,
-                                  entry.book,
-                                  entry.chapter,
-                                  verse: entry.verseIndex,
-                                ));
-                              },
-                              borderRadius: BorderRadius.circular(6),
-                              child: Padding(
-                                padding: const EdgeInsets.symmetric(vertical: 6, horizontal: 2),
-                                child: Row(
-                                  crossAxisAlignment: CrossAxisAlignment.start,
+                            crossAxisAlignment: CrossAxisAlignment.start,
-                                  children: [
+                            children: [
-                                    SizedBox(
+                              Row(
-                                      height: 20,
-                                      child: Padding(
+                                children: [
-                                        padding: const EdgeInsets.only(top: 4),
+                                  Expanded(
-                                        child: Center(
+                                    child: Text(
-                                          child: Container(
-                                            width: 14,
-                                            height: 14,
-                                            decoration: BoxDecoration(
+                                      "$bookName $chapterNum:$verseNum",
-                                              color: highlightColor,
-                                              shape: BoxShape.circle,
-                                              border:
-                                                  Border.all(color: Theme.of(context).colorScheme.onSurface, width: 1),
+                                      style: Theme.of(context).textTheme.bodyMedium?.copyWith(
-                                            ),
+                                            fontWeight: FontWeight.w600,
                                           ),
-                                        ),
-                                      ),
                                     ),
-                                    const SizedBox(width: 10),
-                                    Expanded(
-                                      child: Column(
-                                        crossAxisAlignment: CrossAxisAlignment.start,
-                                        children: [
-                                          Row(
-                                            children: [
-                                              Expanded(
-                                                child: Text(
-                                                  "$bookName $chapterNum:$verseNum",
-                                                  style: Theme.of(context).textTheme.bodyMedium?.copyWith(
-                                                        fontWeight: FontWeight.w600,
-                                                      ),
+                                  ),
+                                  Text(
+                                    _formatTime(entry.timestamp),
+                                    style: Theme.of(context).textTheme.bodySmall?.copyWith(
+                                          color: colorScheme.outline,
-                                                ),
+                                        ),
-                                              ),
+                                  ),
-                                              Text(
+                                ],
-                                                _formatTime(entry.timestamp),
-                                                style: Theme.of(context).textTheme.bodySmall?.copyWith(
-                                                      color: colorScheme.outline,
-                                                    ),
+                              ),
+                              if (verseText != null && verseText.isNotEmpty) ...[
+                                const SizedBox(height: 2),
+                                RichText(
+                                  text: TextSpan(
+                                    children: _parseRedText(
-                                              ),
+                                      verseText,
+                                      Theme.of(context).textTheme.bodySmall!.copyWith(
-                                            ],
+                                            color: colorScheme.onSurfaceVariant,
                                           ),
-                                          if (verseText != null && verseText.isNotEmpty) ...[
-                                            const SizedBox(height: 2),
-                                            RichText(
-                                              text: TextSpan(
-                                                children: _parseRedText(
-                                                  verseText,
-                                                  Theme.of(context).textTheme.bodySmall!.copyWith(
+                                      Theme.of(context).textTheme.bodySmall!.copyWith(color: Colors.red),
-                                                        color: colorScheme.onSurfaceVariant,
-                                                      ),
-                                                  Theme.of(context).textTheme.bodySmall!.copyWith(
-                                                        color: Colors.red,
-                                                      ),
-                                                ),
-                                              ),
-                                            ),
-                                          ],
-                                        ],
-                                      ),
                                     ),
-                                  ],
+                                  ),
                                 ),
+                              ],
+                            ],
-                              ),
+                          ),
-                            );
-                          }).toList(),
                         ),
+                      ],
+                    ),
+                  ),
+                ),
+              );
+            }).toList(),
+          ),
-                        crossFadeState: isExpanded ? CrossFadeState.showSecond : CrossFadeState.showFirst,
+          crossFadeState: data.isExpanded ? CrossFadeState.showSecond : CrossFadeState.showFirst,
-                        duration: const Duration(milliseconds: 200),
+          duration: const Duration(milliseconds: 200),
-                      ),
+        ),
-                      Divider(color: colorScheme.outlineVariant, height: 1),
+        Divider(color: colorScheme.outlineVariant, height: 1),
-                    ],
+      ],
-                  );
+    );
-                },
+  }
-              ),
+}
+// ── Editable group title field ─────────────────────────────────────────────
+class _GroupTitleField extends StatefulWidget {
+  final String groupKey;
+  final String initialValue;
+  const _GroupTitleField({required this.groupKey, required this.initialValue});
+  @override
+  State<_GroupTitleField> createState() => _GroupTitleFieldState();
+}
+class _GroupTitleFieldState extends State<_GroupTitleField> {
+  late final TextEditingController _controller;
+  @override
+  void initState() {
+    super.initState();
+    _controller = TextEditingController(text: widget.initialValue);
+  }
+  @override
+  void didUpdateWidget(_GroupTitleField old) {
+    super.didUpdateWidget(old);
+    if (old.initialValue != widget.initialValue && _controller.text != widget.initialValue) {
+      _controller.text = widget.initialValue;
+    }
+  }
+  @override
+  void dispose() {
+    _controller.dispose();
+    super.dispose();
+  }
+  void _save() => context.dispatch(SetHighlightGroupTitleAction(widget.groupKey, _controller.text));
+  @override
+  Widget build(BuildContext context) {
+    final colorScheme = Theme.of(context).colorScheme;
+    return Padding(
+      padding: const EdgeInsets.only(bottom: 4),
+      child: TextField(
+        controller: _controller,
+        style: Theme.of(context).textTheme.bodySmall?.copyWith(
+              color: colorScheme.onSurfaceVariant,
+              fontStyle: FontStyle.italic,
             ),
+        decoration: InputDecoration(
+          hintText: "Add a title…",
+          hintStyle: Theme.of(context).textTheme.bodySmall?.copyWith(
+                color: colorScheme.outlineVariant,
-          const SizedBox(height: 16),
+                fontStyle: FontStyle.italic,
-        ],
+              ),
+          isDense: true,
+          contentPadding: const EdgeInsets.symmetric(vertical: 4, horizontal: 0),
+          border: InputBorder.none,
+          focusedBorder: UnderlineInputBorder(
+            borderSide: BorderSide(color: colorScheme.primary, width: 1),
+          ),
+          enabledBorder: widget.initialValue.isEmpty
+              ? InputBorder.none
+              : UnderlineInputBorder(
+                  borderSide: BorderSide(color: colorScheme.outlineVariant, width: 0.5),
+                ),
+        ),
+        onEditingComplete: _save,
+        onTapOutside: (_) { FocusScope.of(context).unfocus(); _save(); },
+        textInputAction: TextInputAction.done,
+        maxLines: 1,
+      ),
+    );
+  }
+}
+// ── Pill selector ──────────────────────────────────────────────────────────
+class _Pill extends StatelessWidget {
+  final String label;
+  final bool selected;
+  final VoidCallback onTap;
+  const _Pill({required this.label, required this.selected, required this.onTap});
+  @override
+  Widget build(BuildContext context) {
+    final colorScheme = Theme.of(context).colorScheme;
+    return GestureDetector(
+      onTap: onTap,
+      child: AnimatedContainer(
+        duration: const Duration(milliseconds: 150),
+        padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 5),
+        decoration: BoxDecoration(
+          color: selected ? colorScheme.primary : colorScheme.surface,
+          borderRadius: BorderRadius.circular(20),
+          border: Border.all(
+            color: selected ? colorScheme.primary : colorScheme.outlineVariant,
+          ),
+        ),
+        child: Text(
+          label,
+          style: Theme.of(context).textTheme.labelSmall?.copyWith(
+                color: selected ? colorScheme.onPrimary : colorScheme.onSurfaceVariant,
+                fontWeight: FontWeight.w600,
+              ),
+        ),
       ),
     );
   }

lib/widgets/menu_overlay.dart CHANGED Viewed

@@ -13,9 +13,9 @@ class MenuOverlay extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
-    final darkMode = context.select((s) => s.darkMode);
     final isPlaying = context.isWaiting(TogglePlayAction);
+    final isDark = Theme.of(context).brightness == Brightness.dark;
-    final iconColor = darkMode ? Colors.white.withOpacity(0.9) : Colors.black.withOpacity(0.9);
+    final iconColor = isDark ? Colors.white.withOpacity(0.9) : Colors.black.withOpacity(0.9);
     final audioIcon = isPlaying ? Icons.pause_circle_outline : Icons.play_circle_outline;
     void onHighlight(int index) {
@@ -54,22 +54,22 @@ class MenuOverlay extends StatelessWidget {
             ),
             HighlightButton(
               index: 0,
-              color: darkMode ? darkHighlights[0] : lightHighlights[0],
+              color: isDark ? darkHighlights[0] : lightHighlights[0],
               onHighlightSelected: onHighlight,
             ),
             HighlightButton(
               index: 1,
-              color: darkMode ? darkHighlights[1] : lightHighlights[1],
+              color: isDark ? darkHighlights[1] : lightHighlights[1],
               onHighlightSelected: onHighlight,
             ),
             HighlightButton(
               index: 2,
-              color: darkMode ? darkHighlights[2] : lightHighlights[2],
+              color: isDark ? darkHighlights[2] : lightHighlights[2],
               onHighlightSelected: onHighlight,
             ),
             HighlightButton(
               index: 3,
-              color: darkMode ? darkHighlights[3] : lightHighlights[3],
+              color: isDark ? darkHighlights[3] : lightHighlights[3],
               onHighlightSelected: onHighlight,
             ),
             IconButton(

lib/widgets/settings_sheet.dart CHANGED Viewed

@@ -1,7 +1,7 @@
 import "package:flutter/material.dart";
 import "package:only_bible_app/gen/bible.gen.dart";
-import "package:only_bible_app/store/app_state.dart";
 import "package:only_bible_app/store/actions_state.dart";
+import "package:only_bible_app/store/app_state.dart";
 class SettingsSheet extends StatelessWidget {
   final Bible bible;
@@ -10,7 +10,7 @@ class SettingsSheet extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
-    final darkMode = context.select((s) => s.darkMode);
+    final themeMode = context.select((s) => s.themeMode);
     final fontWeight = context.select((s) => s.fontWeight);
     final engTitles = context.select((s) => s.engTitles);
     final fontSize = context.select((s) => s.fontSize);
@@ -48,19 +48,31 @@ class SettingsSheet extends StatelessWidget {
                   const SizedBox(width: 12),
                   Expanded(child: Text(bible.themeTitle!)),
                   ToggleButtons(
+                    onPressed: (i) {
+                      const modes = [ThemeMode.light, ThemeMode.dark, ThemeMode.system];
-                    onPressed: (_) => context.dispatch(ToggleDarkModeAction()),
+                      context.dispatch(SetThemeModeAction(modes[i]));
+                    },
                     highlightColor: Colors.transparent,
                     borderColor: Colors.grey,
                     borderRadius: const BorderRadius.all(Radius.circular(25)),
-                    selectedColor: darkMode ? Colors.lightBlue.shade300 : Colors.yellowAccent.shade700,
+                    selectedColor: themeMode == ThemeMode.dark
+                        ? Colors.lightBlue.shade300
+                        : themeMode == ThemeMode.system
+                            ? Colors.purple.shade300
+                            : Colors.yellowAccent.shade700,
                     selectedBorderColor: Colors.grey,
                     color: Colors.grey,
                     fillColor: Colors.transparent,
                     constraints: const BoxConstraints(minHeight: 36, minWidth: 50),
+                    isSelected: [
+                      themeMode == ThemeMode.light,
-                    isSelected: [!darkMode, darkMode],
+                      themeMode == ThemeMode.dark,
+                      themeMode == ThemeMode.system,
+                    ],
                     children: const [
                       Icon(Icons.light_mode),
                       Icon(Icons.dark_mode),
+                      Icon(Icons.brightness_auto),
                     ],
                   ),
                 ],

~repos /only-bible-app

GIT_CONFIG_PARAMETERS="'http.version=HTTP/1.1'" git clone https://git.pyrossh.dev/only-bible-app/.git only-bible-app Discussions: https://groups.google.com/g/rust-embed-devs

The only bible app you will ever need. No ads. No in-app purchases. No distractions.

HEAD -> main

GIT_CONFIG_PARAMETERS="'http.version=HTTP/1.1'" git clone https://git.pyrossh.dev/only-bible-app/.git only-bible-app
Discussions: https://groups.google.com/g/rust-embed-devs