Redesign Quran screen with tabbed interface and surah detail view#4
Merged
Conversation
- Integrate Al Quran Cloud API (api.alquran.cloud) for Arabic text + Russian translation (Kuliev) - Add QuranService with endpoints for surahs, ayahs, juz data - Create data models: SurahInfo (with 114 Russian names), Ayah, JuzInfo - Redesign QuranScreen with dark theme, tabs (Суры/Джуз/Закладки), recently read section, and full surah list with juz headers - Add SurahDetailScreen for reading ayahs with Arabic + translation toggle - Update QuranViewModel with API loading state management https://claude.ai/code/session_014sp5knSgELZvsmLpnnrkRX
- Ayah-by-ayah mode: vertical scroll, each ayah with surah:ayah badge, centered Arabic text, Russian translation below, 3-dot menu (bookmark/ share/copy), dividers between ayahs - Book mode: horizontal PageView (RTL swipe like real Quran), flowing Arabic text per page, surah headers with Arabic names, bismillah, page numbers at bottom - Top bar: surah name, page/juz/hizb info, bookmark/search/settings - Bottom toolbar: translation toggle, mode switch (Книга/Аяты), tafsir - QuranService.fetchPage() for page-based data (604 Quran pages) - Ayah model extended with hizbQuarter, surahNumber, surahName fields https://claude.ai/code/session_014sp5knSgELZvsmLpnnrkRX
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Completely redesigned the Quran reading interface with a modern tabbed layout, surah detail screen with dual reading modes, and integration with the alquran.cloud API for fetching Quranic content.
Key Changes
Quran Screen Redesign
New Surah Detail Screen
SurahDetailScreenwith two reading modes:Data Models & Service Layer
quran_models.dartwith:SurahInfo: Surah metadata with Russian name mappings for all 114 surahsAyah: Verse data with juz, page, and hizb informationJuzInfo&JuzSurahRef: Juz division dataJuzData: Static mapping of all 30 juz with surah referencesQuranServicefor API integration:ViewModel Updates
QuranViewModelto manage surah list loadingUI Components
_RecentCard: Styled card for recently read surahs with verse reference_SurahTile: List tile with surah number, name, ayah count, revelation type, and Arabic name_JuzTile: Juz list item with juz number and starting surah reference_JuzHeader: Section header for juz divisions_BottomBarButton: Reusable bottom toolbar button componentNotable Implementation Details
https://claude.ai/code/session_014sp5knSgELZvsmLpnnrkRX