FEAT: Added tabs to easily navigate between description and solution #177

AQIB-NAWAB · 2025-06-08T06:31:21Z

What kind of change does this PR introduce?
Add the tab feature so user can easily navigate between description and solution. This feature enhance user experience.

Issue Number:

Closes Very difficult to compare my code with actual solution in case of getting stuck at point #170

Screenshots/videos:
Screencast from 2025-06-08 11-29-15.webm

Summary
Allow users to easily compare there code and improve there user experience.

Does this PR introduce a breaking change?
No

Copilot

Pull Request Overview

This PR introduces a tabbed interface allowing users to switch between the lesson description and the solution code.

Added TabType and integrated selectedTab into shared types and store.
Created Tabs, TabHeader, and SolutionTab components for the new UI.
Refactored EditorNOutput to use global codeString state and initialized it on mount.

Reviewed Changes

Copilot reviewed 17 out of 17 changed files in this pull request and generated 6 comments.

Show a summary per file

File	Description
lib/types.ts	Defined `TabType` and added `selectedTab` to `OutputResult`.
lib/stores.ts	Extended user store with `codeString` and `setCodeString` setter.
app/content/[...markdownPath]/page.tsx	Wrapped content in new `Tabs` component instead of `ContentViewer`.
app/content/[...markdownPath]/page.module.css	Styled new `.tabContainer` to position the tabs.
app/components/Tabs/index.tsx	Re-exported `Tabs` component.
app/components/Tabs/Tabs.tsx	Implemented tab logic and content switching.
app/components/Tabs/Tabs.module.css	Base styles for the `Tabs` container.
app/components/TabHeader/index.tsx	Re-exported `TabHeader` component.
app/components/TabHeader/TabHeader.tsx	Rendered tab buttons and underline indicator.
app/components/TabHeader/TabHeader.module.css	Styles for tab header layout and active state.
app/components/SolutionTab/index.tsx	Re-exported `SolutionTab` component.
app/components/SolutionTab/SolutionTab.tsx	Embedded read-only Monaco editor for solutions and “Use this” btn.
app/components/SolutionTab/SolutionTab.module.css	Styles for `SolutionTab` container.
app/components/MyBtn/MyBtn.tsx	Added `position` prop to float the button.
app/components/EditorNOutput/EditorNOutput.tsx	Switched to global `codeString` state and set initial code.
app/components/ContentViewer/ContentViewer.module.css	Added top margin to account for fixed tab header.

Comments suppressed due to low confidence (3)

app/components/SolutionTab/SolutionTab.tsx:36

Rename useSolution to something like handleUseSolution since it is not a React hook and avoids confusion with custom hook conventions.

function useSolution() {

app/components/MyBtn/MyBtn.tsx:11

[nitpick] The prop name position may be ambiguous; consider renaming to align or floatDirection to better convey its purpose.

position = "right",

app/components/Tabs/Tabs.tsx:1

There are no tests covering the new tab-switching behavior; consider adding unit or integration tests for Tabs and TabHeader interactions.

"use client";

Copilot · 2025-06-13T12:38:54Z

app/components/Tabs/Tabs.tsx

+
+    <ContentViewer> 
+      {
+        currentSelectedTab=="description"?


Use strict equality (===) instead of loose equality (==) for string comparisons to avoid unintended type coercion.

Suggested change

currentSelectedTab=="description"?

currentSelectedTab==="description"?

Copilot · 2025-06-13T12:38:54Z

app/components/TabHeader/TabHeader.tsx

+}: TabHeaderProps & {
+  currentSelectedTab: "description" | "solution";
+  setCurrentSelectedTab: (tab: "description" | "solution") => void;
+}) => {


The inline intersection with TabHeaderProps is redundant; use TabHeaderProps alone for clearer, DRY type annotations.

Suggested change

}: TabHeaderProps & {

currentSelectedTab: "description" | "solution";

setCurrentSelectedTab: (tab: "description" | "solution") => void;

}) => {

}: TabHeaderProps) => {

Copilot · 2025-06-13T12:38:55Z

app/components/Tabs/index.tsx

@@ -0,0 +1 @@
+export { default as default } from "./Tabs";


[nitpick] Simplify the re-export to export { default } from "./Tabs"; for clearer syntax.

Suggested change

export { default as default } from "./Tabs";

export { default } from "./Tabs";

Copilot · 2025-06-13T12:38:55Z

app/components/TabHeader/TabHeader.tsx

+      <div className={styles.tabContainer}>
+        <button
+          onClick={() => setCurrentSelectedTab("description")}
+          className={`${styles.tabButton} ${
+            currentSelectedTab === "description" ? styles.activeTab : ""
+          }`}


Consider adding ARIA roles (e.g., role="tablist" on the container and role="tab" with aria-selected on buttons) to improve keyboard navigation and screen reader support.

Suggested change

<div className={styles.tabContainer}>

<button

onClick={() => setCurrentSelectedTab("description")}

className={`${styles.tabButton} ${

currentSelectedTab === "description" ? styles.activeTab : ""

}`}

<div className={styles.tabContainer} role="tablist">

<button

onClick={() => setCurrentSelectedTab("description")}

className={`${styles.tabButton} ${

currentSelectedTab === "description" ? styles.activeTab : ""

}`}

role="tab"

aria-selected={currentSelectedTab === "description"}

Copilot · 2025-06-13T12:38:55Z

app/components/EditorNOutput/EditorNOutput.tsx

@@ -64,6 +63,9 @@ export default function EditorNOutput({
  };

  useEffect(() => {
+    // Load the initial code
+    setCodeString(JSON.stringify(codeFile.code, null, 2));


Include codeFile in the useEffect dependency array to ensure the editor state resets if the content changes.

Copilot · 2025-06-13T12:38:55Z

app/components/MyBtn/MyBtn.tsx

@@ -31,6 +33,7 @@ export default function MyBtn({
        textTransform={"uppercase"}
        isDisabled={isDisabled}
        fontWeight={"bold"}
+        style={{float: position}}


Using inline float styling can lead to layout issues; consider leveraging Chakra UI props (e.g., alignSelf) or a container layout instead.

JeelRajodiya

@AQIB-NAWAB I see we have modified around 17 files to implement this feature. Can we improve this and make changes to only the relevant files? if we need to change these many files, please add explanations of the changes (as code review comments) in the files on why we need this change and how it is relevant to the feature.

Moreover, we are using the text editor component to display the solution. Can we use the markdown code block instead?

JeelRajodiya · 2025-06-13T12:38:36Z

app/components/CodeEditor/CodeEditor.tsx

+    const { colorMode } = useColorMode();
+    const [monaco, setMonaco] = useState<any>(null);
+    const [isValidating, setIsValidating] = useState(false);
+    const editorStore = useEditorStore();
+    const editorRef = useRef<any>(null);
+
+    // Apply custom hooks
+    useEditorTheme(monaco, colorMode);


Please remove these formatting chagnes

JeelRajodiya · 2025-06-13T12:46:24Z

app/components/TabHeader/TabHeader.module.css

Can we just use the chakraUI tabs instead (of course with customized styles)

AQIB-NAWAB added 3 commits June 8, 2025 11:23

FEAT: Added tabs to easily navigate between description and solution

af3f899

necessary tweaks

ed66257

add spacing for btn and codeEditor

af27a13

JeelRajodiya requested a review from Copilot June 13, 2025 12:35

This comment was marked as outdated.

Sign in to view

JeelRajodiya requested a review from Copilot June 13, 2025 12:35

Copilot AI reviewed Jun 13, 2025

View reviewed changes

JeelRajodiya requested changes Jun 13, 2025

View reviewed changes

JeelRajodiya reviewed Jun 13, 2025

View reviewed changes

app/components/TabHeader/TabHeader.module.css

Copy link

Member

JeelRajodiya Jun 13, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we just use the chakraUI tabs instead (of course with customized styles)

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

FEAT: Added tabs to easily navigate between description and solution #177

FEAT: Added tabs to easily navigate between description and solution #177

Uh oh!

AQIB-NAWAB commented Jun 8, 2025

Uh oh!

This comment was marked as outdated.

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Jun 13, 2025

Uh oh!

Copilot AI Jun 13, 2025

Uh oh!

Copilot AI Jun 13, 2025

Uh oh!

Copilot AI Jun 13, 2025

Uh oh!

Copilot AI Jun 13, 2025

Uh oh!

Copilot AI Jun 13, 2025

Uh oh!

JeelRajodiya left a comment

Uh oh!

JeelRajodiya Jun 13, 2025

Uh oh!

JeelRajodiya Jun 13, 2025

Uh oh!

Uh oh!

	currentSelectedTab=="description"?
	currentSelectedTab==="description"?

	export { default as default } from "./Tabs";
	export { default } from "./Tabs";

Uh oh!

FEAT: Added tabs to easily navigate between description and solution #177

Are you sure you want to change the base?

FEAT: Added tabs to easily navigate between description and solution #177

Uh oh!

Conversation

AQIB-NAWAB commented Jun 8, 2025

Uh oh!

This comment was marked as outdated.

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Copilot AI Jun 13, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jun 13, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jun 13, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jun 13, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jun 13, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jun 13, 2025

Choose a reason for hiding this comment

Uh oh!

JeelRajodiya left a comment

Choose a reason for hiding this comment

Uh oh!

JeelRajodiya Jun 13, 2025

Choose a reason for hiding this comment

Uh oh!

JeelRajodiya Jun 13, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!