Merge pull request #23 from mark-mdev/cap-deploy

feat(dashboard, vocab-assessment, story): enhance scrolling behavior …

Author: markmdev

README.md

@@ -1,6 +1,10 @@
 # Lingput - AI-Powered Comprehensible Input for Language Learning
 
-[**Live Demo**](https://your-demo-link.com) · [**Video Demo**](#video-demo)
+**Demo:**  
+https://lingput.dev/  
+https://app.lingput.dev/  
+API:  
+https://docs.lingput.dev/
 
 <img src="docs/logo_min.jpeg" alt="Lingput logo" width="320" />
 
@@ -31,7 +35,6 @@ This project was built to production-grade standards, demonstrating expertise in
 - [Use Cases](#use-cases)
 - [Features](#features)
 - [Tech Stack](#tech-stack)
-- [API Overview](#api-overview)
 - [Quickstart](#quickstart)
 - [Production Deploy](#production-deploy)
 - [Roadmap](#roadmap)
@@ -109,24 +112,6 @@ This project was built to production-grade standards, demonstrating expertise in
 
 ---
 
-## API Overview
-
-Backend base: `/api`
-Full API docs with request/response examples: [`apps/backend/API.md`](apps/backend/API.md)
-
-**Main route groups:**
-
-- `POST /auth/register` · `POST /auth/login` · `POST /auth/logout` · `POST /auth/refresh` · `GET /auth/me`
-- `POST /story/generate` · `GET /story`
-- `GET /vocab/words` · `POST /vocab/words` · `PATCH /vocab/words/:id` · `DELETE /vocab/words/:id`
-- `GET /unknown-words/words` · `POST /unknown-words/mark-as-learned/:wordId`
-- `GET /vocab-assessment/start` · `POST /vocab-assessment/answer`
-- `GET /jobs/status/:jobId`
-
-Auth uses HTTP-only cookies. Rate limiting + Helmet enabled.
-
----
-
 ## Quickstart
 
 ```bash

apps/frontend/package-lock.json

@@ -14,6 +14,8 @@
     "react-dom": "^19.0.0",
     "react-loading-skeleton": "^3.5.0",
     "react-toastify": "^11.0.5",
+    "simplebar": "6.3.2",
+    "simplebar-react": "3.3.2",
     "swr": "^2.3.3"
   },
   "devDependencies": {

apps/frontend/package.json

@@ -69,7 +69,7 @@ export default function Dashboard({
   }, [error]);
 
   return (
-    <div className="flex flex-col bg-transparent h-screen">
+    <div className="flex flex-col bg-transparent h-screen overflow-y-scroll">
       <AssessmentRequiredOverlay wordsCount={typeof wordsCount === "number" ? wordsCount : -1} />
       {showOnboarding && !hasIntroShown && <OnboardingOverlay onComplete={completeIntro} />}
       {showOnboarding && hasIntroShown && coachmarkIndex !== null && (
@@ -86,7 +86,7 @@ export default function Dashboard({
         onChangeToNewStoryViewMode={handleChangeToNewStoryViewMode}
         onChangeToAllStoriesViewMode={handleChangeToAllStoriesViewMode}
       />
-      <div className="flex flex-row gap-6 flex-1 min-h-0">
+      <div className="flex flex-row gap-6 flex-1 min-h-0 overflow-y-scroll">
         {/* LEFT PANEL */}
         <LeftPanel
           isLoading={isLoading}

apps/frontend/src/components/Dashboard.tsx

@@ -1,3 +1,6 @@
+"use client";
+import SimpleBar from "simplebar-react";
+import "simplebar-react/dist/simplebar.min.css";
 import Word from "@/features/vocabAssessment/components/Word";
 import ContinueButton from "@/features/vocabAssessment/components/ContinueButton";
 import StartButton from "@/features/vocabAssessment/components/StartButton";
@@ -27,9 +30,12 @@ export default function VocabAssessment({
   handleWordAnswer,
 }: VocabAssessmentProps) {
   return (
-    <div className="fixed inset-0 z-40 flex items-center justify-center">
-      <div className="px-6 py-20 bg-white/80 backdrop-blur-sm border border-slate-100 flex flex-col items-center rounded-2xl w-full md:w-2/3 lg:w-1/2 shadow-sm mx-auto">
-        <h1 className="text-xl font-semibold text-slate-900">Vocabulary Assessment</h1>
+    <div className="fixed inset-0 z-40 flex items-center justify-center overflow-y-auto p-4">
+      <SimpleBar
+        autoHide={false}
+        className="px-6 py-10 md:py-20 bg-white/80 backdrop-blur-sm border border-slate-100 flex flex-col items-center rounded-2xl w-full md:w-2/3 lg:w-1/2 shadow-sm mx-auto my-4 max-h-[90vh]"
+      >
+        <h1 className="text-xl font-semibold text-slate-900 text-center">Vocabulary Assessment</h1>
         {(status === "loading" || isLoading) && (
           <div className="py-6">
             <p className="text-slate-600">Loading...</p>
@@ -84,7 +90,24 @@ export default function VocabAssessment({
             </form>
           </div>
         )}
-      </div>
+      </SimpleBar>
+      <style jsx>{`
+        :global(.simplebar-track.simplebar-vertical) {
+          width: 10px;
+          background: #f1f5f9; /* slate-100 */
+          border-radius: 9999px;
+        }
+        :global(.simplebar-scrollbar) {
+          border-radius: 9999px;
+        }
+        :global(.simplebar-scrollbar:before) {
+          background: #93c5fd; /* blue-300 */
+          opacity: 1; /* ensure always visible */
+        }
+        :global(.simplebar-scrollbar:hover:before) {
+          background: #60a5fa; /* blue-400 */
+        }
+      `}</style>
     </div>
   );
 }

apps/frontend/src/components/VocabAssessment.tsx

@@ -7,7 +7,7 @@ export default function RightPanel({
 }) {
   return (
     <div
-      className={`w-full lg:w-3/4 bg-white/80 backdrop-blur-sm rounded-2xl flex flex-col gap-5 py-8 px-6 h-full overflow-hidden shadow-sm border border-slate-100 ${styles}`}
+      className={`w-full lg:w-3/4 bg-white/80 backdrop-blur-sm rounded-2xl flex flex-col gap-5 py-8 px-6 h-full overflow-scroll shadow-sm border border-slate-100 ${styles}`}
     >
       {children}
     </div>

apps/frontend/src/features/dashboard/components/RightPanel.tsx

@@ -1,3 +1,6 @@
+"use client";
+import SimpleBar from "simplebar-react";
+import "simplebar-react/dist/simplebar.min.css";
 import { useState } from "react";
 import { Story } from "@/features/story/types";
 import UnknownWordComponent from "@/features/unknownWord/components/UnknownWord";
@@ -37,17 +40,16 @@ export default function StoryComponent({
         <h2 className="font-semibold text-2xl tracking-tight text-slate-900">
           Story #
           {story ? story?.id : <Skeleton circle={true} width={20} height={20} inline={true} />}{" "}
-          details
         </h2>
         <hr className="my-4 border-slate-200" />
       </div>
       {/* BOTTOM PART */}
-      <div className="flex flex-col gap-6 flex-1 overflow-hidden">
+      <SimpleBar autoHide={false} className="flex flex-col gap-6 flex-1 min-h-0">
         {/* TOP PANEL (STORY) */}
-        <div className="px-4 flex flex-col gap-4 w-full">
+        <div className="px-0 lg:px-4 flex flex-col gap-4 w-full">
           <h3 className="font-semibold text-slate-900">Story text</h3>
           <div className="p-4 bg-white rounded-xl border border-slate-200 shadow-sm">
-            <p className="leading-relaxed text-slate-800">
+            <p className="leading-relaxed text-slate-800 text-sm lg:text-base">
               {story ? story.storyText : <Skeleton count={3} />}
             </p>
           </div>
@@ -71,7 +73,7 @@ export default function StoryComponent({
           </button>
           {showTranslation && (
             <div className="p-4 bg-white rounded-xl border border-slate-200 shadow-sm">
-              <p className="text-slate-800">
+              <p className="text-slate-800 text-sm lg:text-base">
                 {story && showTranslation ? story.translationText : <Skeleton count={2} />}
               </p>
             </div>
@@ -80,7 +82,7 @@ export default function StoryComponent({
         {/* <div className="bg-black w-[1px]"></div> */}
         <hr className="border-slate-200" />
         {/* BOTTOM PANEL (VOCABULARY) */}
-        <div className="flex flex-col gap-3 px-4 w-full overflow-y-auto">
+        <div className="flex flex-col gap-3 px-4 w-full">
           <div className="flex flex-row gap-2 items-center">
             <h3 className="font-semibold text-xl text-slate-900">Vocabulary</h3>
             {wordTranslationsBlurred && (
@@ -156,7 +158,24 @@ export default function StoryComponent({
             </div>
           )}
         </div>
-      </div>
+      </SimpleBar>
+      <style jsx>{`
+        :global(.simplebar-track.simplebar-vertical) {
+          width: 10px;
+          background: #f1f5f9; /* slate-100 */
+          border-radius: 9999px;
+        }
+        :global(.simplebar-scrollbar) {
+          border-radius: 9999px;
+        }
+        :global(.simplebar-scrollbar:before) {
+          background: #93c5fd; /* blue-300 */
+          opacity: 1; /* always visible */
+        }
+        :global(.simplebar-scrollbar:hover:before) {
+          background: #60a5fa; /* blue-400 */
+        }
+      `}</style>
     </>
   );
 }