dwindown/jamshalat-diary
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Polish navigation, Quran flows, and sharing UX

Browse Source
This commit is contained in:
Dwindi Ramadhana
2026-03-18 00:07:10 +07:00
parent a049129a35
commit 2d09b5b356
59 changed files with 11835 additions and 3184 deletions
Download Patch File Download Diff File Expand all files Collapse all files

384
lib/features/quran/presentation/quran_bookmarks_screen.dart
View File

@@ -4,12 +4,18 @@ import 'package:lucide_icons/lucide_icons.dart';
import 'package:go_router/go_router.dart';
import 'package:intl/intl.dart';
import '../../../app/theme/app_colors.dart';
import '../../../core/widgets/arabic_text.dart';
import '../../../data/local/hive_boxes.dart';
import '../../../data/local/models/quran_bookmark.dart';
import '../../../data/local/models/app_settings.dart';
import '../../../data/services/muslim_api_service.dart';
class QuranBookmarksScreen extends StatefulWidget {
const QuranBookmarksScreen({super.key});
final bool isSimpleModeTab;
const QuranBookmarksScreen({
super.key,
this.isSimpleModeTab = false,
});
@override
State<QuranBookmarksScreen> createState() => _QuranBookmarksScreenState();
@@ -18,6 +24,8 @@ class QuranBookmarksScreen extends StatefulWidget {
class _QuranBookmarksScreenState extends State<QuranBookmarksScreen> {
bool _showLatin = true;
bool _showTerjemahan = true;
final Map<int, Future<Map<String, dynamic>?>> _surahFutureCache = {};
final Map<dynamic, Future<_ResolvedBookmarkContent?>> _bookmarkFutureCache = {};
String _readingRoute(int surahId, int verseId) {
final isSimple =
@@ -39,13 +47,16 @@ class _QuranBookmarksScreenState extends State<QuranBookmarksScreen> {
void _showDisplaySettings() {
showModalBottomSheet(
context: context,
isScrollControlled: true,
useSafeArea: true,
shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.vertical(top: Radius.circular(20)),
),
builder: (ctx) => StatefulBuilder(
builder: (context, setModalState) {
final keyboardInset = MediaQuery.of(context).viewInsets.bottom;
return Padding(
padding: const EdgeInsets.symmetric(vertical: 20, horizontal: 16),
padding: EdgeInsets.fromLTRB(16, 20, 16, 20 + keyboardInset),
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
@@ -90,6 +101,59 @@ class _QuranBookmarksScreenState extends State<QuranBookmarksScreen> {
);
}
Future<Map<String, dynamic>?> _getSurah(int surahId) {
return _surahFutureCache.putIfAbsent(
surahId,
() => MuslimApiService.instance.getSurah(surahId),
);
}
Future<_ResolvedBookmarkContent?> _loadResolvedBookmarkContent(
QuranBookmark bookmark,
) async {
final surah = await _getSurah(bookmark.surahId);
final verses = List<Map<String, dynamic>>.from(surah?['ayat'] ?? []);
final verseIndex = bookmark.verseId - 1;
if (verseIndex < 0 || verseIndex >= verses.length) return null;
final verse = verses[verseIndex];
final resolved = _ResolvedBookmarkContent(
verseText: verse['teksArab']?.toString().trim().isNotEmpty == true
? verse['teksArab'].toString().trim()
: bookmark.verseText,
verseLatin: verse['teksLatin']?.toString().trim().isNotEmpty == true
? verse['teksLatin'].toString().trim()
: bookmark.verseLatin,
verseTranslation:
verse['teksIndonesia']?.toString().trim().isNotEmpty == true
? verse['teksIndonesia'].toString().trim()
: bookmark.verseTranslation,
);
final needsUpdate = bookmark.verseText != resolved.verseText ||
bookmark.verseLatin != resolved.verseLatin ||
bookmark.verseTranslation != resolved.verseTranslation;
if (needsUpdate) {
bookmark.verseText = resolved.verseText;
bookmark.verseLatin = resolved.verseLatin;
bookmark.verseTranslation = resolved.verseTranslation;
await bookmark.save();
}
return resolved;
}
Future<_ResolvedBookmarkContent?> _getResolvedBookmarkContent(
QuranBookmark bookmark,
) {
final bookmarkKey = bookmark.key ?? '${bookmark.surahId}_${bookmark.verseId}';
return _bookmarkFutureCache.putIfAbsent(
bookmarkKey,
() => _loadResolvedBookmarkContent(bookmark),
);
}
@override
Widget build(BuildContext context) {
final isDark = Theme.of(context).brightness == Brightness.dark;
@@ -105,94 +169,106 @@ class _QuranBookmarksScreenState extends State<QuranBookmarksScreen> {
),
],
),
body: ValueListenableBuilder(
valueListenable: Hive.box<QuranBookmark>(HiveBoxes.bookmarks).listenable(),
builder: (context, Box<QuranBookmark> box, _) {
if (box.isEmpty) {
return Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(
LucideIcons.bookmark,
size: 64,
color: AppColors.primary.withValues(alpha: 0.3),
),
const SizedBox(height: 16),
Text(
'Belum ada markah',
body: SafeArea(
top: false,
bottom: !widget.isSimpleModeTab,
child: ValueListenableBuilder(
valueListenable:
Hive.box<QuranBookmark>(HiveBoxes.bookmarks).listenable(),
builder: (context, Box<QuranBookmark> box, _) {
if (box.isEmpty) {
return Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(
LucideIcons.bookmark,
size: 64,
color: AppColors.primary.withValues(alpha: 0.3),
),
const SizedBox(height: 16),
Text(
'Belum ada markah',
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.w600,
color: isDark ? Colors.white : Colors.black87,
),
),
const SizedBox(height: 8),
Text(
'Tandai ayat saat membaca Al-Quran',
style: TextStyle(
fontSize: 14,
color: isDark
? AppColors.textSecondaryDark
: AppColors.textSecondaryLight,
),
textAlign: TextAlign.center,
),
],
),
);
}
// Filter bookmarks
final allBookmarks = box.values.toList();
final lastRead = allBookmarks.where((b) => b.isLastRead).toList();
final favorites = allBookmarks.where((b) => !b.isLastRead).toList()
..sort((a, b) => b.savedAt.compareTo(a.savedAt));
return ListView(
padding: const EdgeInsets.all(16),
children: [
if (lastRead.isNotEmpty) ...[
const Text(
'TERAKHIR DIBACA',
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.w600,
color: isDark ? Colors.white : Colors.black87,
fontSize: 11,
fontWeight: FontWeight.w700,
letterSpacing: 1.5,
color: AppColors.sage,
),
),
const SizedBox(height: 8),
Text(
'Tandai ayat saat membaca Al-Quran',
style: TextStyle(
fontSize: 14,
color: isDark ? AppColors.textSecondaryDark : AppColors.textSecondaryLight,
),
textAlign: TextAlign.center,
),
const SizedBox(height: 12),
_buildBookmarkCard(context, lastRead.first, isDark, box,
isLastRead: true),
const SizedBox(height: 24),
],
),
if (favorites.isNotEmpty) ...[
const Text(
'AYAT FAVORIT',
style: TextStyle(
fontSize: 11,
fontWeight: FontWeight.w700,
letterSpacing: 1.5,
color: AppColors.sage,
),
),
const SizedBox(height: 12),
...favorites.map((fav) => Padding(
padding: const EdgeInsets.only(bottom: 12),
child: _buildBookmarkCard(context, fav, isDark, box,
isLastRead: false),
)),
],
],
);
}
// Filter bookmarks
final allBookmarks = box.values.toList();
final lastRead = allBookmarks.where((b) => b.isLastRead).toList();
final favorites = allBookmarks.where((b) => !b.isLastRead).toList()
..sort((a, b) => b.savedAt.compareTo(a.savedAt));
return ListView(
padding: const EdgeInsets.all(16),
children: [
if (lastRead.isNotEmpty) ...[
const Text(
'TERAKHIR DIBACA',
style: TextStyle(
fontSize: 11,
fontWeight: FontWeight.w700,
letterSpacing: 1.5,
color: AppColors.sage,
),
),
const SizedBox(height: 12),
_buildBookmarkCard(context, lastRead.first, isDark, box, isLastRead: true),
const SizedBox(height: 24),
],
if (favorites.isNotEmpty) ...[
const Text(
'AYAT FAVORIT',
style: TextStyle(
fontSize: 11,
fontWeight: FontWeight.w700,
letterSpacing: 1.5,
color: AppColors.sage,
),
),
const SizedBox(height: 12),
...favorites.map((fav) => Padding(
padding: const EdgeInsets.only(bottom: 12),
child: _buildBookmarkCard(context, fav, isDark, box, isLastRead: false),
)),
],
],
);
},
},
),
),
);
}
Widget _buildBookmarkCard(BuildContext context, QuranBookmark bookmark, bool isDark, Box<QuranBookmark> box, {required bool isLastRead}) {
Widget _buildBookmarkCard(BuildContext context, QuranBookmark bookmark,
bool isDark, Box<QuranBookmark> box,
{required bool isLastRead}) {
final dateStr = DateFormat('dd MMM yyyy, HH:mm').format(bookmark.savedAt);
final resolvedFuture = _getResolvedBookmarkContent(bookmark);
return InkWell(
onTap: () => context.push(_readingRoute(bookmark.surahId, bookmark.verseId)),
onTap: () =>
context.push(_readingRoute(bookmark.surahId, bookmark.verseId)),
borderRadius: BorderRadius.circular(16),
child: Container(
padding: const EdgeInsets.all(16),
@@ -200,18 +276,22 @@ class _QuranBookmarksScreenState extends State<QuranBookmarksScreen> {
color: isDark ? AppColors.surfaceDark : AppColors.surfaceLight,
borderRadius: BorderRadius.circular(16),
border: Border.all(
color: isLastRead
? AppColors.primary.withValues(alpha: 0.3)
: (isDark ? AppColors.primary.withValues(alpha: 0.1) : AppColors.cream),
color: isLastRead
? AppColors.primary.withValues(alpha: 0.3)
: (isDark
? AppColors.primary.withValues(alpha: 0.1)
: AppColors.cream),
width: isLastRead ? 1.5 : 1.0,
),
boxShadow: isLastRead ? [
BoxShadow(
color: AppColors.primary.withValues(alpha: 0.05),
blurRadius: 10,
offset: const Offset(0, 4),
)
] : null,
boxShadow: isLastRead
? [
BoxShadow(
color: AppColors.primary.withValues(alpha: 0.05),
blurRadius: 10,
offset: const Offset(0, 4),
)
]
: null,
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
@@ -220,7 +300,8 @@ class _QuranBookmarksScreenState extends State<QuranBookmarksScreen> {
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Container(
padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 4),
padding:
const EdgeInsets.symmetric(horizontal: 10, vertical: 4),
decoration: BoxDecoration(
color: AppColors.primary.withValues(alpha: 0.1),
borderRadius: BorderRadius.circular(8),
@@ -229,7 +310,8 @@ class _QuranBookmarksScreenState extends State<QuranBookmarksScreen> {
mainAxisSize: MainAxisSize.min,
children: [
if (isLastRead) ...[
const Icon(LucideIcons.pin, size: 12, color: AppColors.primary),
const Icon(LucideIcons.pin,
size: 12, color: AppColors.primary),
const SizedBox(width: 4),
],
Text(
@@ -244,7 +326,8 @@ class _QuranBookmarksScreenState extends State<QuranBookmarksScreen> {
),
),
IconButton(
icon: const Icon(LucideIcons.trash2, color: Colors.red, size: 20),
icon: const Icon(LucideIcons.trash2,
color: Colors.red, size: 20),
onPressed: () => box.delete(bookmark.key),
padding: EdgeInsets.zero,
constraints: const BoxConstraints(),
@@ -252,76 +335,93 @@ class _QuranBookmarksScreenState extends State<QuranBookmarksScreen> {
],
),
const SizedBox(height: 16),
Align(
alignment: Alignment.centerRight,
child: Text(
bookmark.verseText,
textAlign: TextAlign.right,
style: const TextStyle(
fontFamily: 'Amiri',
fontSize: 22,
fontWeight: FontWeight.w400,
height: 1.8,
),
),
),
if (_showLatin && bookmark.verseLatin != null) ...[
const SizedBox(height: 12),
Text(
bookmark.verseLatin!,
style: const TextStyle(
fontSize: 13,
fontStyle: FontStyle.italic,
color: AppColors.primary,
),
),
],
if (_showTerjemahan && bookmark.verseTranslation != null) ...[
const SizedBox(height: 8),
Text(
bookmark.verseTranslation!,
style: TextStyle(
fontSize: 14,
height: 1.6,
color: isDark ? AppColors.textSecondaryDark : AppColors.textSecondaryLight,
),
),
],
FutureBuilder<_ResolvedBookmarkContent?>(
future: resolvedFuture,
builder: (context, snapshot) {
final content = snapshot.data ??
_ResolvedBookmarkContent(
verseText: bookmark.verseText,
verseLatin: bookmark.verseLatin,
verseTranslation: bookmark.verseTranslation,
);
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Align(
alignment: Alignment.centerRight,
child: ArabicText(
content.verseText,
textAlign: TextAlign.right,
baseFontSize: 22,
fontWeight: FontWeight.w400,
height: 1.8,
),
),
if (_showLatin && content.verseLatin != null) ...[
const SizedBox(height: 12),
Text(
content.verseLatin!,
style: const TextStyle(
fontSize: 13,
fontStyle: FontStyle.italic,
color: AppColors.primary,
),
),
],
if (_showTerjemahan &&
content.verseTranslation != null) ...[
const SizedBox(height: 8),
Text(
content.verseTranslation!,
style: TextStyle(
fontSize: 14,
height: 1.6,
color: isDark
? AppColors.textSecondaryDark
: AppColors.textSecondaryLight,
),
),
],
],
);
},
),
const SizedBox(height: 16),
if (isLastRead) ...[
SizedBox(
width: double.infinity,
child: FilledButton.icon(
onPressed: () =>
context.push(_readingRoute(bookmark.surahId, bookmark.verseId)),
onPressed: () => context
.push(_readingRoute(bookmark.surahId, bookmark.verseId)),
icon: const Icon(LucideIcons.bookOpen, size: 18),
label: const Text('Lanjutkan Membaca'),
style: FilledButton.styleFrom(
padding: const EdgeInsets.symmetric(vertical: 12),
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10)),
),
),
),
const SizedBox(height: 12),
],
Row(
children: [
Icon(
LucideIcons.clock,
size: 12,
color: isDark ? AppColors.textSecondaryDark : AppColors.textSecondaryLight,
color: isDark
? AppColors.textSecondaryDark
: AppColors.textSecondaryLight,
),
const SizedBox(width: 4),
Text(
'${isLastRead ? 'Ditandai' : 'Disimpan'}: $dateStr',
style: TextStyle(
fontSize: 10,
color: isDark ? AppColors.textSecondaryDark : AppColors.textSecondaryLight,
color: isDark
? AppColors.textSecondaryDark
: AppColors.textSecondaryLight,
),
),
],
@@ -332,3 +432,15 @@ class _QuranBookmarksScreenState extends State<QuranBookmarksScreen> {
);
}
}
class _ResolvedBookmarkContent {
const _ResolvedBookmarkContent({
required this.verseText,
this.verseLatin,
this.verseTranslation,
});
final String verseText;
final String? verseLatin;
final String? verseTranslation;
}