[PoC] - New "Translations" and "Settings" options in the 3 dots verse menu

src/components/Navbar/Drawer/Drawer.module.scss

@@ -251,3 +251,8 @@
     padding-block-start: 0;
   }
 }
+
+.studyModeOverlayLevel {
+  border-inline-start: 2px var(--color-borders-hairline) solid;
+  z-index: var(--z-index-modal);
+}

src/components/Navbar/SettingsDrawer/SettingsDrawer.tsx

@@ -15,6 +15,7 @@ import { useOnboarding } from '@/components/Onboarding/OnboardingProvider';
 import Button, { ButtonVariant } from '@/dls/Button/Button';
 import BackIcon from '@/icons/west.svg';
 import { selectNavbar, setSettingsView, SettingsView } from '@/redux/slices/navbar';
+import { selectStudyModeIsOpen } from '@/redux/slices/QuranReader/studyMode';
 import { logValueChange } from '@/utils/eventLogger';
 
 const SettingsBody = dynamic(() => import('./SettingsBody'), {
@@ -38,6 +39,7 @@ const SettingsDrawer = () => {
   const { t } = useTranslation('common');
   const dispatch = useDispatch();
   const { isSettingsDrawerOpen, settingsView } = useSelector(selectNavbar);
+  const isStudyModeOpen = useSelector(selectStudyModeIsOpen);
   const { isActive } = useOnboarding();
 
   const onGoBackClicked = () => {
@@ -64,9 +66,13 @@ const SettingsDrawer = () => {
   const isReciterView = settingsView === SettingsView.Reciter;
 
   const getDrawerClassName = () => {
-    if (isTranslationView) return drawerStyles.translationView;
-    if (isReciterView) return drawerStyles.reciterView;
-    return undefined;
+    return [
+      isTranslationView ? drawerStyles.translationView : undefined,
+      isReciterView ? drawerStyles.reciterView : undefined,
+      isStudyModeOpen ? drawerStyles.studyModeOverlayLevel : undefined,
+    ]
+      .filter(Boolean)
+      .join(' ');
   };
 
   return (

src/components/QuranReader/ReadingView/StudyModeModal/index.tsx

@@ -28,6 +28,7 @@ import ChevronLeftIcon from '@/icons/chevron-left.svg';
 import CloseIcon from '@/icons/close.svg';
 import PinFilledIcon from '@/icons/pin-filled.svg';
 import PinIcon from '@/icons/pin.svg';
+import { selectIsSettingsDrawerOpen } from '@/redux/slices/navbar';
 import { selectPinnedVerseKeysSet } from '@/redux/slices/QuranReader/pinnedVerses';
 import { selectWordByWordLocale } from '@/redux/slices/QuranReader/readingPreferences';
 import {
@@ -91,6 +92,7 @@ const StudyModeModal: React.FC<Props> = ({
   const chaptersData = useContext(DataContext);
   const audioService = useContext(AudioPlayerMachineContext);
   const isAudioVisible = useXStateSelector(audioService, (state) => state.matches('VISIBLE'));
+  const isSettingsDrawerOpen = useSelector(selectIsSettingsDrawerOpen);
   const quranReaderStyles = useSelector(selectQuranReaderStyles, shallowEqual);
   const selectedTranslations = useSelector(selectSelectedTranslations, shallowEqual);
   const tafsirs = useSelector(selectSelectedTafsirs, shallowEqual);
@@ -553,6 +555,7 @@ const StudyModeModal: React.FC<Props> = ({
       isOpen={isOpen}
       onClose={handleClose}
       onEscapeKeyDown={handleClose}
+      isModal={!isSettingsDrawerOpen}
       header={header}
       headerClassName={styles.modalHeader}
       hasCloseButton={false}

src/components/Verse/OverflowVerseActionsMenuBody/index.tsx

@@ -7,6 +7,8 @@ import TranslationFeedbackAction from '../TranslationFeedback/TranslationFeedbac
 import VerseActionAdvancedCopy from '../VerseActionAdvancedCopy';
 import VerseActionEmbedWidget from '../VerseActionEmbedWidget';
 import VerseActionRepeatAudio from '../VerseActionRepeatAudio';
+import VerseActionSettings from '../VerseActionSettings';
+import VerseActionTranslationsSettings from '../VerseActionTranslationsSettings';
 
 import ShareVerseActionsMenu from './ShareVerseActionsMenu';
 
@@ -50,6 +52,7 @@ const OverflowVerseActionsMenuBody: React.FC<Props> = ({
       {!isStudyModeOpen && (
         <VerseActionRepeatAudio isTranslationView={isTranslationView} verseKey={verse.verseKey} />
       )}
+      <VerseActionTranslationsSettings onActionTriggered={onActionTriggered} />
       <TranslationFeedbackAction
         verse={verse}
         isTranslationView={isTranslationView}
@@ -61,6 +64,7 @@ const OverflowVerseActionsMenuBody: React.FC<Props> = ({
         isTranslationView={isTranslationView}
         onActionTriggered={onActionTriggered}
       />
+      <VerseActionSettings onActionTriggered={onActionTriggered} />
     </div>
   ) : (
     <ShareVerseActionsMenu

src/components/Verse/VerseActionSettings.tsx

@@ -0,0 +1,42 @@
+import useTranslation from 'next-translate/useTranslation';
+import { useDispatch } from 'react-redux';
+
+import IconContainer, { IconColor, IconSize } from '@/dls/IconContainer/IconContainer';
+import PopoverMenu from '@/dls/PopoverMenu/PopoverMenu';
+import SettingsIcon from '@/icons/settings.svg';
+import { setIsSettingsDrawerOpen, setSettingsView, SettingsView } from '@/redux/slices/navbar';
+
+type VerseActionSettingsProps = {
+  onActionTriggered?: () => void;
+};
+
+const VerseActionSettings = ({ onActionTriggered }: VerseActionSettingsProps) => {
+  const { t } = useTranslation('common');
+  const dispatch = useDispatch();
+
+  // Open the settings drawer
+  const onSettingsClick = () => {
+    dispatch(setSettingsView(SettingsView.Body));
+    dispatch(setIsSettingsDrawerOpen(true));
+    onActionTriggered?.();
+  };
+
+  return (
+    <PopoverMenu.Item
+      icon={
+        <IconContainer
+          icon={<SettingsIcon />}
+          color={IconColor.tertiary}
+          size={IconSize.Custom}
+          shouldFlipOnRTL={false}
+        />
+      }
+      onClick={onSettingsClick}
+      shouldCloseMenuAfterClick
+    >
+      {t('settings.title')}
+    </PopoverMenu.Item>
+  );
+};
+
+export default VerseActionSettings;

src/components/Verse/VerseActionTranslationsSettings.tsx

@@ -0,0 +1,44 @@
+import useTranslation from 'next-translate/useTranslation';
+import { useDispatch } from 'react-redux';
+
+import IconContainer, { IconColor, IconSize } from '@/dls/IconContainer/IconContainer';
+import PopoverMenu from '@/dls/PopoverMenu/PopoverMenu';
+import TranslationsIcon from '@/icons/translation.svg';
+import { setIsSettingsDrawerOpen, setSettingsView, SettingsView } from '@/redux/slices/navbar';
+
+type VerseActionTranslationsSettingsProps = {
+  onActionTriggered?: () => void;
+};
+
+const VerseActionTranslationsSettings = ({
+  onActionTriggered,
+}: VerseActionTranslationsSettingsProps) => {
+  const { t } = useTranslation('common');
+  const dispatch = useDispatch();
+
+  // Open the settings drawer and navigate to the Translations settings view
+  const onTranslationsSettingsClick = () => {
+    dispatch(setSettingsView(SettingsView.Translation));
+    dispatch(setIsSettingsDrawerOpen(true));
+    onActionTriggered?.();
+  };
+
+  return (
+    <PopoverMenu.Item
+      icon={
+        <IconContainer
+          icon={<TranslationsIcon />}
+          color={IconColor.tertiary}
+          size={IconSize.Custom}
+          shouldFlipOnRTL={false}
+        />
+      }
+      onClick={onTranslationsSettingsClick}
+      shouldCloseMenuAfterClick
+    >
+      {t('translations')}
+    </PopoverMenu.Item>
+  );
+};
+
+export default VerseActionTranslationsSettings;

src/components/dls/ContentModal/ContentModal.tsx

@@ -45,6 +45,7 @@ const ContentModal = ({
   onClick,
   shouldBeFullScreen = false,
   zIndexVariant,
+  isModal = true,
   isBottomSheetOnMobile = true,
   isFakeSEOFriendlyMode: isFake = false,
   dataTestId,
@@ -86,7 +87,7 @@ const ContentModal = ({
   );
 
   return (
-    <Root open={isOpen} onClose={onClose} onOpenChange={handleOpenChange}>
+    <Root open={isOpen} onClose={onClose} onOpenChange={handleOpenChange} modal={isModal}>
       <Portal>
         <Overlay
           ref={overlayRef}

src/components/dls/ContentModal/ContentModal.types.ts

@@ -27,6 +27,7 @@ export type ContentModalProps = {
   isFixedHeight?: boolean;
   shouldBeFullScreen?: boolean;
   zIndexVariant?: ZIndexVariant;
+  isModal?: boolean;
   isBottomSheetOnMobile?: boolean;
   isFakeSEOFriendlyMode?: boolean;
   dataTestId?: string;