[FEAT] : Added Adjustable Vertical Seperator between Editor and ContentViewer #173

Yashwanth1906 · 2025-04-24T06:30:04Z

What kind of change does this PR introduce?

Feature: Added a resizable vertical separator between content viewer and editor

Issue Number:

Closes : Feat : Add Vertical Adjustable Separator #130
Screenshots/videos:
https://github.com/user-attachments/assets/9259dc52-cd5e-4a6e-8c6e-399232a21b4f

If relevant, did you update the documentation?

No documentation updates required as this is a UI enhancement

Summary
This PR introduces a resizable vertical separator between the content viewer and editor panels, improving the user experience by allowing users to adjust the width of each panel according to their preferences. The separator features:

A 4px wide draggable divider
Visual feedback on hover and active states using the primary theme color
Smooth transition animations
Minimum width constraints (300px) for both panels to ensure usability
Maximum width constraint (70%) for the left panel to maintain layout balance

The implementation uses CSS flexbox for layout management and includes proper cursor styling to indicate the resizable nature of the divider.

Does this PR introduce a breaking change?
No, this is a non-breaking change that enhances the existing UI without affecting any functionality or existing features.

Technical Details:

Added new CSS module styles in page.module.css
Implemented flexbox-based layout for the main area
Added hover and active states for the divider using the primary theme color
Set appropriate min/max width constraints for both panels

…itor

Yashwanth1906 · 2025-04-24T06:36:09Z

@JeelRajodiya Waiting for your feedbacks on this...🙂

JeelRajodiya · 2025-04-24T08:04:37Z

@Yashwanth1906 I'm currently busy with my exams, I'll review it sometime after 3rd may

Yashwanth1906 · 2025-04-24T12:47:53Z

@JeelRajodiya Okay..

JeelRajodiya · 2025-05-13T11:56:13Z

app/content/[...markdownPath]/page.tsx

      pathList.push({
-        markdownPath: [item.folderName, step.fileName],
+        markdownPath: pathSegments,
      });
    });
  });


are these changes relevant to the issue? Please remove these changes,

@Yashwanth1906 Please reply here

JeelRajodiya · 2025-05-13T12:13:16Z

app/components/ResizableContent.tsx

I see, we are wrapping the EditorNOutput into this new component. however we are importing the styles from the different component file (i.e. page.module.css) .

move current file into a new folder of the same name, and add the css file in that folder to maintain consistent component declaration

consider moving these changes to the page.tsx file (in the /content/[...markdownPath] folder) if you prefer to not to create a new component

JeelRajodiya

The divider and scroll bar have the same color and are difficult to differentiate. Moreover, when you click on the divider sometimes some text from the content is getting selected unintentionally. consider changing the styles of both dividers to make them differentiable (you can take reference from leetcode UI to implement into ours)
The whole page does not have the height of 100% and there are some space left at the very bottom

JeelRajodiya · 2025-05-13T12:32:09Z

@Yashwanth1906 The vertical Separator is working as expected. could you please address my comments?

Yashwanth1906 · 2025-05-15T11:27:52Z

@Yashwanth1906 The vertical Separator is working as expected. could you please address my comments?

I'll do it.

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

@Yashwanth1906, any updates on the PR?

Yashwanth1906 · 2025-06-14T05:37:58Z

@JeelRajodiya Sry i had my sem. I'll do it by this weekend

Co-authored-by: Copilot <[email protected]>

…1906/Json-Schema-Tour into Dynamic-Vertical-Split

Yashwanth1906 · 2025-06-14T18:24:45Z

@JeelRajodiya I think I have completed all the changes you asked for. Can u review it?

Copilot

Pull Request Overview

This PR introduces a resizable vertical separator between the content viewer and editor panels, allowing users to adjust panel widths according to their preferences. The implementation replaces the static layout with a dynamic, interactive interface that includes visual feedback and persistent width preferences.

Refactored the layout from static flex panels to a new ResizableContent component with draggable divider
Added visual feedback with hover/active states using primary theme colors and smooth transitions
Implemented localStorage persistence to remember user's preferred panel width across sessions

Reviewed Changes

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

Show a summary per file

File	Description
app/content/[...markdownPath]/page.tsx	Refactored to use ResizableContent component and fixed path generation logic
app/content/[...markdownPath]/page.module.css	Updated styles to support resizable layout with new pane and divider styles
app/components/ResizableContent/ResizableContent.tsx	New component implementing draggable divider functionality with mouse event handling
app/components/ResizableContent/ResizableContent.module.css	Complete styling for resizable layout including divider animations and scrollbar customization
app/components/EditorNOutput/EditorNOutput.module.css	Removed max-width constraint and updated to fill available space
app/components/ContentViewer/ContentViewer.module.css	Simplified padding and updated layout to work within resizable container

Copilot · 2025-07-19T13:09:01Z

app/content/[...markdownPath]/page.tsx

 import React from "react";
 import { parseLessonFolder } from "@/lib/server-functions";
-import ContentViewer from "@/app/components/ContentViewer";
-import EditorNOutput from "@/app/components/EditorNOutput";
+import ResizableContent from "@/app/components/ResizableContent/ResizableContent";


The title and description contain a spelling error: 'Seperator' should be 'Separator'. This same error appears in the import path - consider renaming the component to 'ResizableSeparator' or similar to match the corrected spelling.

Suggested change

import ResizableContent from "@/app/components/ResizableContent/ResizableContent";

import ResizableSeparator from "@/app/components/ResizableSeparator/ResizableSeparator";

Copilot · 2025-07-19T13:09:01Z

app/components/ResizableContent/ResizableContent.tsx

+
+    const containerRect = containerRef.current!.getBoundingClientRect();


Using the non-null assertion operator (!) without proper null checking is risky. The containerRef.current could be null if the component unmounts during dragging. Add a null check: if (!containerRef.current) return;

Suggested change

const containerRect = containerRef.current!.getBoundingClientRect();

if (!containerRef.current) return;

const containerRect = containerRef.current.getBoundingClientRect();

Copilot · 2025-07-19T13:09:01Z

app/components/ResizableContent/ResizableContent.tsx

+      onMouseMove={handleMouseMove}
+      onMouseUp={handleMouseUp}


The onMouseMove handler will fire continuously even when not dragging, causing unnecessary function calls. Consider adding global mouse event listeners only during drag operations to improve performance.

Suggested change

onMouseMove={handleMouseMove}

onMouseUp={handleMouseUp}

Copilot · 2025-07-19T13:09:02Z

app/components/ResizableContent/ResizableContent.tsx

+
+    if (newLeftWidth >= minWidth && newLeftWidth <= maxWidth) {
+      setLeftWidth(newLeftWidth);
+      localStorage.setItem("horizontalLeftWidth", String(newLeftWidth));


Writing to localStorage on every mouse move during dragging can cause performance issues. Consider using a debounced approach or only saving the value when dragging ends.

Suggested change

localStorage.setItem("horizontalLeftWidth", String(newLeftWidth));

Copilot · 2025-07-19T13:09:02Z

app/components/ResizableContent/ResizableContent.tsx

+      localStorage.setItem("horizontalLeftWidth", String(newLeftWidth));
+    }
+  };
+
+  useEffect(() => {
+    const savedWidth = localStorage.getItem("horizontalLeftWidth");
+    if (savedWidth) {
+      setLeftWidth(Number(savedWidth));


Accessing localStorage should be wrapped in a try-catch block as it can throw exceptions in private browsing mode or when storage is disabled.

Suggested change

localStorage.setItem("horizontalLeftWidth", String(newLeftWidth));

}

};

useEffect(() => {

const savedWidth = localStorage.getItem("horizontalLeftWidth");

if (savedWidth) {

setLeftWidth(Number(savedWidth));

try {

localStorage.setItem("horizontalLeftWidth", String(newLeftWidth));

} catch (error) {

console.error("Failed to save width to localStorage:", error);

}

}

};

useEffect(() => {

try {

const savedWidth = localStorage.getItem("horizontalLeftWidth");

if (savedWidth) {

setLeftWidth(Number(savedWidth));

}

} catch (error) {

console.error("Failed to retrieve width from localStorage:", error);

[FEAT] : Added Adjustable Vertical Seperated for ContentViewer and Ed…

240ca79

…itor

JeelRajodiya requested a review from Copilot May 13, 2025 12:00

This comment was marked as outdated.

Sign in to view

JeelRajodiya requested changes May 13, 2025

View reviewed changes

Yashwanth1906 and others added 5 commits June 14, 2025 21:24

Merge branch 'json-schema-org:main' into Dynamic-Vertical-Split

a6404b8

Update app/components/ResizableContent.tsx

68ffd14

Co-authored-by: Copilot <[email protected]>

[fix] : Fixed the unintentional copying problem and adjusted the height

81b68f6

Merge branch 'Dynamic-Vertical-Split' of https://github.com/Yashwanth…

44a131b

…1906/Json-Schema-Tour into Dynamic-Vertical-Split

[fix]: Pulled and pushing again

8f4819c

JeelRajodiya requested a review from Copilot July 19, 2025 13:08

Copilot AI reviewed Jul 19, 2025

View reviewed changes

	import ResizableContent from "@/app/components/ResizableContent/ResizableContent";
	import ResizableSeparator from "@/app/components/ResizableSeparator/ResizableSeparator";


		const containerRect = containerRef.current!.getBoundingClientRect();

-    const containerRect = containerRef.current!.getBoundingClientRect();
+    if (!containerRef.current) return;
+    const containerRect = containerRef.current.getBoundingClientRect();

Uh oh!

[FEAT] : Added Adjustable Vertical Seperator between Editor and ContentViewer #173

Are you sure you want to change the base?

[FEAT] : Added Adjustable Vertical Seperator between Editor and ContentViewer #173

Conversation

Yashwanth1906 commented Apr 24, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Yashwanth1906 commented Apr 24, 2025

Uh oh!

JeelRajodiya commented Apr 24, 2025

Uh oh!

Yashwanth1906 commented Apr 24, 2025

Uh oh!

This comment was marked as outdated.

Uh oh!

JeelRajodiya May 13, 2025

Choose a reason for hiding this comment

Uh oh!

JeelRajodiya Jul 19, 2025

Choose a reason for hiding this comment

Uh oh!

JeelRajodiya May 13, 2025

Choose a reason for hiding this comment

Uh oh!

JeelRajodiya May 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 commented May 13, 2025

Uh oh!

Yashwanth1906 commented May 15, 2025

Uh oh!

JeelRajodiya commented Jun 13, 2025

Uh oh!

Yashwanth1906 commented Jun 14, 2025

Uh oh!

Yashwanth1906 commented Jun 14, 2025

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Copilot AI Jul 19, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jul 19, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jul 19, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jul 19, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jul 19, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Yashwanth1906 commented Apr 24, 2025 •

edited

Loading