diff --git a/src/components/QuranReader/ReadingView/StudyModeModal/tabs/StudyModeRelatedVerses/StudyModeRelatedVerseContent.tsx b/src/components/QuranReader/ReadingView/StudyModeModal/tabs/StudyModeRelatedVerses/StudyModeRelatedVerseContent.tsx index 41234f8db0..cca8d01fb7 100644 --- a/src/components/QuranReader/ReadingView/StudyModeModal/tabs/StudyModeRelatedVerses/StudyModeRelatedVerseContent.tsx +++ b/src/components/QuranReader/ReadingView/StudyModeModal/tabs/StudyModeRelatedVerses/StudyModeRelatedVerseContent.tsx @@ -11,20 +11,19 @@ import StudyModeRelatedVerseSkeleton from './StudyModeRelatedVerseSkeleton'; import { fetcher } from '@/api'; import Button, { ButtonSize, ButtonVariant } from '@/dls/Button/Button'; +import Collapsible from '@/dls/Collapsible/Collapsible'; import Separator from '@/dls/Separator/Separator'; import useQcfFont from '@/hooks/useQcfFont'; +import ChevronDownIcon from '@/icons/chevron-down.svg'; import { selectWordByWordLocale } from '@/redux/slices/QuranReader/readingPreferences'; import { selectQuranReaderStyles } from '@/redux/slices/QuranReader/styles'; import { selectSelectedTranslations } from '@/redux/slices/QuranReader/translations'; import { getDefaultWordFields, getMushafId } from '@/utils/api'; -import { makeByVerseKeyUrl } from '@/utils/apiPaths'; +import { makeByRangeVersesUrl } from '@/utils/apiPaths'; import { logButtonClick } from '@/utils/eventLogger'; +import { toLocalizedNumber, toLocalizedVerseKeyAuto } from '@/utils/locale'; +import { VersesResponse } from 'types/ApiResponses'; import RelatedVerse from 'types/RelatedVerse'; -import Verse from 'types/Verse'; - -interface VerseResponse { - verse: Verse; -} const NOOP = (): void => {}; @@ -39,21 +38,24 @@ const StudyModeRelatedVerseContent: React.FC currentVerseKey, onGoToVerse, }) => { - const { t } = useTranslation('common'); + const { t, lang } = useTranslation('common'); const quranReaderStyles = useSelector(selectQuranReaderStyles, shallowEqual); const selectedTranslations = useSelector(selectSelectedTranslations, shallowEqual); const wordByWordLocale = useSelector(selectWordByWordLocale); - const [chapterId, verseNumber] = relatedVerse.verseKey.split(':'); + const [chapterId, verseNumber] = relatedVerse.verseKeyFrom.split(':'); const handleGoToVerse = useCallback(() => { - logButtonClick('study_mode_goto_verse', { verseKey: relatedVerse.verseKey }); + logButtonClick('study_mode_goto_verse', { verseKey: relatedVerse.verseKeyFrom }); onGoToVerse?.(chapterId, verseNumber, currentVerseKey); - }, [chapterId, verseNumber, onGoToVerse, relatedVerse.verseKey, currentVerseKey]); + }, [chapterId, verseNumber, onGoToVerse, relatedVerse.verseKeyFrom, currentVerseKey]); - // Fetch verse data when collapsible is opened - const queryKey = makeByVerseKeyUrl(relatedVerse.verseKey, { + // Fetch verse data for the range + const queryKey = makeByRangeVersesUrl(lang, { + from: relatedVerse.verseKeyFrom, + to: relatedVerse.verseKeyTo, words: true, + perPage: 'all', translationFields: 'resource_name,language_id', translations: selectedTranslations.join(','), ...getDefaultWordFields(quranReaderStyles.quranFont), @@ -62,44 +64,85 @@ const StudyModeRelatedVerseContent: React.FC wordTransliteration: 'true', }); - const { data, isValidating } = useSWR(queryKey, fetcher, { + const { data, isValidating } = useSWR(queryKey, fetcher, { revalidateOnFocus: false, revalidateOnReconnect: false, dedupingInterval: 2000, }); - const verse = data?.verse; + const verses = data?.verses; + + const title = useMemo(() => { + const verseKeyFrom = toLocalizedVerseKeyAuto(relatedVerse.verseKeyFrom, lang); + + // Single verse: "Al-Fatihah 1:1" + if (relatedVerse.verseIdFrom === relatedVerse.verseIdTo) { + return `${relatedVerse.chapterNameFrom} ${verseKeyFrom}`; + } + + const surahFrom = relatedVerse.verseKeyFrom.split(':')[0]; + const surahTo = relatedVerse.verseKeyTo.split(':')[0]; + + // Cross-surah range: "Al-Fatihah 1:4 - Al-Baqarah 2:3" + if (surahFrom !== surahTo) { + const verseKeyTo = toLocalizedVerseKeyAuto(relatedVerse.verseKeyTo, lang); + return `${relatedVerse.chapterNameFrom} ${verseKeyFrom} - ${relatedVerse.chapterNameTo} ${verseKeyTo}`; + } + + // Same surah range: "Al-Fatihah 1:1-4" + const verseNumberTo = toLocalizedNumber(Number(relatedVerse.verseKeyTo.split(':')[1]), lang); + return `${relatedVerse.chapterNameFrom} ${verseKeyFrom}-${verseNumberTo}`; + }, [relatedVerse, lang]); - const versesForFont = useMemo(() => (verse ? [verse] : []), [verse]); + const versesForFont = useMemo(() => verses || [], [verses]); useQcfFont(quranReaderStyles.quranFont, versesForFont); - if (isValidating || !verse) { + if (isValidating || !verses || verses.length === 0) { return ; } return ( <>
- -
- -
+ {title}

} + suffix={} + shouldRotateSuffixOnToggle + headerLeftClassName={styles.collapsibleHeader} + > + {({ isOpen }) => { + if (!isOpen) return null; + + return ( +
+ {verses.map((verse) => ( + <> + +
+ +
+ + ))} +
+ ); + }} +
diff --git a/src/components/QuranReader/ReadingView/StudyModeModal/tabs/StudyModeRelatedVerses/StudyModeRelatedVerses.module.scss b/src/components/QuranReader/ReadingView/StudyModeModal/tabs/StudyModeRelatedVerses/StudyModeRelatedVerses.module.scss index 8fe492067f..85d395029d 100644 --- a/src/components/QuranReader/ReadingView/StudyModeModal/tabs/StudyModeRelatedVerses/StudyModeRelatedVerses.module.scss +++ b/src/components/QuranReader/ReadingView/StudyModeModal/tabs/StudyModeRelatedVerses/StudyModeRelatedVerses.module.scss @@ -1,8 +1,8 @@ @use 'src/styles/breakpoints'; @use 'src/styles/utility'; -.relatedVerse { - padding-block: var(--spacing-medium2-px); +.relatedVerseContent { + padding-block-end: var(--spacing-medium2-px); } .relatedVerseSeparatorContainer { @@ -30,3 +30,18 @@ .relatedVerseCta { @include utility.edgeHorizontalPadding; } + +.collapsibleHeader { + @include utility.edgeHorizontalPadding; + display: flex; + align-items: center; + justify-content: space-between; + inline-size: 100%; + padding-block: var(--spacing-medium2-px); + cursor: pointer; + transition: background-color 0.2s ease; + + &:hover { + background-color: var(--color-background-alternative-medium); + } +} diff --git a/src/components/QuranReader/TranslationView/BottomActionsTabs.tsx b/src/components/QuranReader/TranslationView/BottomActionsTabs.tsx index ef607b1f27..e6c72d0f62 100644 --- a/src/components/QuranReader/TranslationView/BottomActionsTabs.tsx +++ b/src/components/QuranReader/TranslationView/BottomActionsTabs.tsx @@ -65,7 +65,6 @@ const BottomActionsTabs: React.FC = ({ containerClassName={styles.tabContainerWrapper} className={classNames(styles.tabsContainer, className, { [styles.center]: !isTranslationView, - [styles.tabsContainerRTL]: isRTL && isTranslationView, })} eventName={EventName.QURAN_READER_BOTTOM_ACTION_SCROLLABLE} > diff --git a/src/components/QuranReader/TranslationView/TranslationViewCell.module.scss b/src/components/QuranReader/TranslationView/TranslationViewCell.module.scss index 5fd6a9fe5b..822cf7666b 100644 --- a/src/components/QuranReader/TranslationView/TranslationViewCell.module.scss +++ b/src/components/QuranReader/TranslationView/TranslationViewCell.module.scss @@ -187,11 +187,6 @@ } } -.tabsContainerRTL { - justify-content: flex-start; - flex-direction: row-reverse; -} - .center { justify-content: center; } diff --git a/src/styles/_utility.scss b/src/styles/_utility.scss index 260231b47a..a27688fbf5 100644 --- a/src/styles/_utility.scss +++ b/src/styles/_utility.scss @@ -1002,6 +1002,24 @@ $page-container-max-width: 80rem; padding-block: var(--spacing-edge-vertical-px); } +@mixin edgeMargin { + margin-inline: var(--spacing-edge-horizontal-px); + margin-block: var(--spacing-edge-vertical-px); +} + +@mixin edgeMarginEven { + margin-inline: var(--spacing-edge-horizontal-px); + margin-block: var(--spacing-edge-vertical-even-px); +} + +@mixin edgeHorizontalMargin { + margin-inline: var(--spacing-edge-horizontal-px); +} + +@mixin edgeVerticalMargin { + margin-block: var(--spacing-edge-vertical-px); +} + @mixin scrollbarNone { -webkit-overflow-scrolling: touch; scroll-behavior: smooth; diff --git a/types/RelatedVerse.ts b/types/RelatedVerse.ts index b4c4caeeac..e9efc079f2 100644 --- a/types/RelatedVerse.ts +++ b/types/RelatedVerse.ts @@ -1,9 +1,12 @@ interface RelatedVerse { id: number; - verseId: number; - verseKey: string; + verseIdFrom: number; + verseIdTo: number; + verseKeyFrom: string; + verseKeyTo: string; relation: string; - chapterName: string; + chapterNameFrom: string; + chapterNameTo: string; } export default RelatedVerse;