QF-2514: Navigation redesign #2436

AhmedCodeGuy · 2025-06-11T19:22:19Z

Summary

Closes: QF-2514

refactor: reorganize ContextMenu component with improved structure and accessibility
feat: add reading and translation mode icons in solid and outline variants
refactor: redesign reading preference switcher UI with improved icons and transitions
feat: add page bookmark functionality to Quran reader context menu
feat: add page bookmarking functionality with local storage support for logged-out users
feat: add mobile reading preference tabs with improved UI layout
feat: redesign context menu with new progress bar and improved styling
fix: sidebar navigation positioning for home page and quran reader on all devices

Type of change

Bug fix (non-breaking change which fixes an issue)
New feature (non-breaking change which adds functionality)
Breaking change (fix or feature that would cause existing functionality to not work as expected)
This change requires a documentation update

Test plan

The changes was tested on home page and the Quran reader for responsiveness.

Checklist

My code follows the style guidelines of this project
I have performed a self-review of my code
My changes generate no new warnings
Any dependent changes have been merged and published in downstream modules
I have commented on my code, particularly in hard-to-understand areas
I have made corresponding changes to the documentation
I have added tests that prove my fix is effective or that my feature works
New and existing unit tests pass locally with my changes

…d accessibility

…iants

… and transitions

…-next into QF-2514

…or logged-out users

… all devices

vercel · 2025-06-11T19:22:23Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
quran-com	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jun 15, 2025 4:32am

…tMenu documentation

osamasayed · 2025-06-11T19:43:28Z

bugbot run

Copilot

Pull Request Overview

This PR refactors the Quran reader’s navigation and context menu components while introducing new features such as improved reading preference switching, page bookmarking, and mobile reading tabs. Key changes include a reorganization of the ContextMenu component with enhanced accessibility and styling, new icons and UI adjustments for the reading preference switcher, and added functionality for bookmarking pages.

Reviewed Changes

Copilot reviewed 37 out of 37 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
src/components/QuranReader/ReadingPreferenceSwitcher/ReadingPreferenceSwitcher.module.scss	Updated width definitions and introduced new CSS variables for context menu variants.
src/components/QuranReader/ReadingPreferenceSwitcher/ReadingPreferenceOption.tsx	Renamed the component and revised its loading state logic along with enhanced JSDoc comments.
src/components/QuranReader/ReadingPreferenceSwitcher/ReadingPreferenceIcon.tsx	New component to encapsulate reading preference icon rendering.
src/components/QuranReader/ReadingPreferenceSwitcher/ReadingPreference.module.scss	Added new theme-based styling rules and transitions.
src/components/QuranReader/QuranReaderView.tsx	Updated usage of the ReadingPreferenceSwitcher via a new type prop.
src/components/QuranReader/ContextMenu/*	Introduced refactored components with improved layout, theming, and mobile responsiveness, including progress tracking, mobile tabs, bookmark actions, and chapter navigation.
locales/en/*	Updated textual content and fixed duplicate keys in translations.

Comments suppressed due to low confidence (1)

src/components/QuranReader/ReadingPreferenceSwitcher/ReadingPreferenceOption.tsx:44

The loading condition has been simplified to always render the spinner when isLoading is true, removing the check for whether readingPreference equals selectedReadingPreference. Please verify that this behavior change is intentional and will not cause unintended UI behavior.

return isLoading ? (

src/components/QuranReader/ContextMenu/components/MobileReadingTabs.tsx

…bility

…gTabs.tsx Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

AhmedCodeGuy · 2025-06-11T21:42:13Z

@osamasayed resolved all bot reported bugs.

osamasayed

After merging master, the expanded states on mobile looks too streteched with a lot of white space at the top.

osamasayed · 2025-06-15T04:27:15Z

src/components/QuranReader/ContextMenu.tsx

@@ -1,3 +1,12 @@
+/**


let's remove this file if we don't need it.

osamasayed · 2025-06-15T04:36:10Z

src/components/QuranReader/ContextMenu/components/MobileReadingTabs.tsx

+  } = usePersistPreferenceGroup();
+
+  // Extract verse number from the last read verse key
+  const lastReadVerse = lastReadVerseKey.verseKey?.split(':')[1];


We have a util called getVerseNumberFromKey which we should use instead.

src/components/QuranReader/TajweedBar/TajweedBar.module.scss

osamasayed · 2025-06-15T07:23:12Z

src/components/QuranReader/index.tsx

@@ -5,7 +5,7 @@ import classNames from 'classnames';
 import useTranslation from 'next-translate/useTranslation';
 import { shallowEqual, useSelector } from 'react-redux';

-import ContextMenu from './ContextMenu';
+import ContextMenu from './ContextMenu/index';


nit-picking: no need for index in the path as it will be resolved automatically.

osamasayed · 2025-06-15T07:34:44Z

src/components/QuranReader/ContextMenu/components/PageBookmarkAction.tsx

+  };
+
+  let bookmarkIcon = <Spinner />;
+  if (!isPageBookmarkedLoading) {


It seems requested don't get cached in the browser using useSWR on scroll so fresh requests to check if the page is bookmarked keep being fired every time. You should open Albqarah while logged in and scroll up and down to reproduce.

I already have this on my backlog, I will work on it insha'Allah, I forgot to convert this PR to Draft instead of ready for review.

AhmedCodeGuy added 9 commits May 27, 2025 16:06

refactor: reorganize ContextMenu component with improved structure an…

0afd040

…d accessibility

feat: add reading and translation mode icons in solid and outline var…

a9af8cf

…iants

refactor: redesign reading preference switcher UI with improved icons…

bf4b377

… and transitions

feat: add page bookmark functionality to Quran reader context menu

c7c6e41

Merge branch 'testing' of https://github.com/quran/quran.com-frontend…

354653e

…-next into QF-2514

feat: add page bookmarking functionality with local storage support f…

42b2c1d

…or logged-out users

feat: add mobile reading preference tabs with improved UI layout

c30b698

feat: redesign context menu with new progress bar and improved styling

a49e258

fix: sidebar navigation positioning for home page and quran reader on…

13b6ae9

… all devices

feat: add type prop to ReadingPreferenceSwitcher with SurahHeader value

14f8095

vercel bot had a problem deploying to Preview June 11, 2025 19:26 Failure

docs: add variant prop to ReadingPreferenceSwitcher and update Contex…

5db6f0a

…tMenu documentation

vercel bot deployed to Preview June 11, 2025 19:39 View deployment

osamasayed requested a review from Copilot June 11, 2025 19:43

Copilot AI reviewed Jun 11, 2025

View reviewed changes

src/components/QuranReader/ContextMenu/components/MobileReadingTabs.tsx Outdated Show resolved Hide resolved

docs: add clarifying comments for mobile tabs and tajweed colors visi…

81930fb

…bility

This comment was marked as resolved.

Sign in to view

Update src/components/QuranReader/ContextMenu/components/MobileReadin…

765dafd

…gTabs.tsx Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

AhmedCodeGuy self-assigned this Jun 11, 2025

AhmedCodeGuy requested a review from osamasayed June 11, 2025 19:48

vercel bot deployed to Preview June 11, 2025 19:57 View deployment

This comment was marked as resolved.

Sign in to view

feat: add error handling and state revalidation for bookmark deletion

6d0148c

vercel bot deployed to Preview June 11, 2025 21:40 View deployment

Merge branch 'testing' into QF-2514

a025445

vercel bot deployed to Preview June 15, 2025 04:32 View deployment

osamasayed reviewed Jun 15, 2025

View reviewed changes

osamasayed requested changes Jun 15, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

QF-2514: Navigation redesign #2436

QF-2514: Navigation redesign #2436

Uh oh!

AhmedCodeGuy commented Jun 11, 2025 •

edited

Loading

Uh oh!

vercel bot commented Jun 11, 2025 •

edited

Loading

Uh oh!

osamasayed commented Jun 11, 2025

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

This comment was marked as resolved.

Uh oh!

This comment was marked as resolved.

AhmedCodeGuy commented Jun 11, 2025

Uh oh!

osamasayed left a comment

Uh oh!

osamasayed Jun 15, 2025

Uh oh!

osamasayed Jun 15, 2025

Uh oh!

Uh oh!

Uh oh!

osamasayed Jun 15, 2025

Uh oh!

osamasayed Jun 15, 2025

Uh oh!

AhmedCodeGuy Jun 15, 2025

Uh oh!

Uh oh!

Uh oh!

QF-2514: Navigation redesign #2436

Are you sure you want to change the base?

QF-2514: Navigation redesign #2436

Uh oh!

Conversation

AhmedCodeGuy commented Jun 11, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Type of change

Test plan

Checklist

Uh oh!

vercel bot commented Jun 11, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

osamasayed commented Jun 11, 2025

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Uh oh!

This comment was marked as resolved.

Uh oh!

This comment was marked as resolved.

AhmedCodeGuy commented Jun 11, 2025

Uh oh!

osamasayed left a comment

Choose a reason for hiding this comment

Uh oh!

osamasayed Jun 15, 2025

Choose a reason for hiding this comment

Uh oh!

osamasayed Jun 15, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

osamasayed Jun 15, 2025

Choose a reason for hiding this comment

Uh oh!

osamasayed Jun 15, 2025

Choose a reason for hiding this comment

Uh oh!

AhmedCodeGuy Jun 15, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

AhmedCodeGuy commented Jun 11, 2025 •

edited

Loading

vercel bot commented Jun 11, 2025 •

edited

Loading