Refactor: Modernize Blog Submission UI & Add Live Preview Toggle

[AbhishekMauryaGEEK]

Description
This PR focuses on improving the user experience and visual hierarchy of the blog submission interface within the Student Dashboard. The primary goal was to transition from a "stretched" full-screen layout to a more contained, professional dashboard aesthetic while adding high-value features for student contributors.

🛠️ Key Changes

1. Structural & Layout Improvements
   Contained Workspace: Wrapped the submission form in a max-w-4xl container to ensure the UI remains balanced on high-resolution monitors.

Natural Content Expansion: Removed the max-height and internal scrollbars from the MarkdownEditor to allow the editor to expand naturally with the content.

Visual Balance: Replaced the full-width (oversized) submit button with a fixed-width 200px button, aligned to the right to follow standard "action-path" UX patterns.

2. New Features & Functionality
   Live Visualization (Preview Mode): Introduced a preview state and a toggle switch that allows users to see their Markdown rendered in real-time before submission.

Dual Image Support: Integrated a file upload trigger (using lucide-react's Upload icon) alongside the existing URL input, providing flexibility for blog cover images.

3. Security & Stability
   Auth Restoration: Verified that the RequireAuth wrapper is active to protect student-specific routes.

Database Synchronization: Verified backend compatibility using a Neon.tech PostgreSQL instance to ensure the submitBlog mutation functions correctly.

✅ Testing & Verification
UI Check: Verified the layout at http://localhost:3000/student?view=my-blogs.

Functionality Check: Confirmed that the "Preview" mode correctly renders the blog title, cover image, and Markdown content.

Mobile Responsiveness: Confirmed the submit button scales back to w-full on mobile screens for better accessibility.

📸
Before :

After:

Visual Comparison Before: A full-width, non-contained form with a giant submit button and a restricted-height scrolling editor.

After: A centered, professional dashboard card with a dedicated "Preview" mode and right-aligned action buttons.

[vercel]

@AbhishekMauryaGEEK is attempting to deploy a commit to the Vaibhav Tripathi's projects Team on Vercel.

A member of the Team first needs to authorize it.

[vaibhavxtripathi]

@AbhishekMauryaGEEK I like the compact design but it introduces a new problem of horizontal gaps in the design. That empty space was the reason why the stretched view came in the first place.

Kindly figure out a design principle that address both issues and attach the screenshot in your next reply. Thanks.

[AbhishekMauryaGEEK]

Blog Dashboard: Split-View Refactor & Live Visualizer

Core Changes

• Grid Layout: Replaced the single-column centered layout with a 12-column grid (7/12 Editor, 5/12 Preview) to eliminate horizontal gaps.

• Live Visualizer: Implemented real-time rendering using ReactMarkdown to provide instant feedback for student drafts.

• Editor UX: Increased writing area height to 600px and removed redundant internal preview buttons.

• Image Handling: Simplified cover image input to a URL-based system.

---

Technical Implementation

• Persistence: Utilized sticky positioning for the visualizer to maintain visibility during long-form writing.

• Parsing: Applied custom prose styling within the visualizer to match the community blog theme.

Screenshots