[Feature Request]: Redesign the topic page to incorporate skill practice along with lessons.

[seanlip]

Is your feature request related to a problem? Please describe.

The aim of this issue is to redesign the topic page so that it incorporates skills together with lessons, and provides a clearer way for learners to discover practice sessions and revision cards. It also makes it easier for learners to choose the appropriate language to play/voiceover the lesson in, so that they don't have to enter the exploration only to find that their desired language is not available.

The PRD for this is here and the mocks are here (see the large section on the left called "Topic Page". towards the right titled "Practice Player" and "Session Results".

Describe the solution (or solutions) you'd like

Implement the functionality and mocks in the above PRD that are related to the topic page. This includes the following:

• Implement the overall topic page structure.
• Implement the restyled lesson tiles.
• Implement the checkpoints visualization in the lesson tiles.
• Implement the language selection functionality.
• Implement the practice cards and associated functionality.
• Finalize the page and ensure that anything not covered above (but that is in the mocks) is fully implemented.

This feature should be implemented behind a feature flag until it is ready to launch. See this link for more details. When implementing, each PR should include both desktop and mobile views (for a particular part of the mocks), and include the necessary tests.

Note that this project requires a technical design doc prior to implementation.

Describe alternatives you've considered and rejected

No response

Additional context

This issue only covers the topic page redesign. See #19613 for the corresponding issue for the practice session redesign (which refers to the same PRD and Figma files).

[seanlip]

Note: see oppia/design-team#97 for the corresponding design issue. For questions about the design, please contact @juliafalarini and @seanlip.

[pritam2317]

Milestone 1:The UI of the topic viewer page will be developed.

	Description of PR / action	PR opening date	Target date for PR to be merged	PR and status
	[M1.1] Add feature flag i.e., redesigned_topic_viewer_page	31 May 2024	5 Jun 2024	#20406
	[M 1.2] Create a common modal.A Common modal component to use throughout Oppia that aligns with the designs in the mocks.	17 Jun 2024	22 Jun 2024	20515
	[M 1.3] Create StoryNodeTileComponent	14 Jun 2024	18 Jun 2024	20469
	[M1.4]Create PracticeTileComponent	20 Jun 2024	24 Jun 2024
	[M 1.5] Create New  UI for Topic viewer page	23 Jun 2024	25 Jun 2024
	[M 1.6] Write acceptance test for the New topic viewer page	25 Jun 2024	27 Jun 2024
	[M 1.7] Display notification to learner in the topic viewer page when chapter unpublished	30 Jun 2024	2 july 2024
	[M 1.8] Display a Warning Message in the canonical story section of the “Topic Editor page”	1 July 2024	4 July 2024

Milestone 2: Develops modals to be used on the topic viewer page.

	Description of PR / action	Target date for PR creation	Target date for PR to be merged	PR and status
	[M 2.1] Create secondary language modal:	5 Jul 2024	10 Jul 2024
	[M 2.2] Make exploration player page compatible to load exploration with selected translation language.	9 Jul 2024	13 Jul 2024
	[M 2.3]Create the “start and resume” modal	11 Jul 2024	15 Jul 2024
	[M 2.4] Create review Modal	17 Jul 2024	21 Jul 2024
	[M 2.6] Create revision modal	23 Jul 2024	25 Jul 2024
	[M 2.7] Create subscribe modal	30 Jul 2024	2 Aug 2024
	[M 2.8] Make exploration player page compatible	4 Aug 2024	6 Aug 2024
	[M 2.9] Create view skills modal	8 Aug 2024	10 Aug 2024
	[M 2.10]  Writing acceptance test	10 Aug 2024	12 Aug 2024

[Nik-09]

@pritam2317 please strike the row from this table (#19614 (comment)) since this is no more required.