resolving comments

Author: bderbs30

src/app/(web)/(oa)/assessment/[assessmentId]/page.tsx

@@ -4,10 +4,9 @@ import { use } from 'react';
 import useAssessment from '@/lib/hooks/useAssessment';
 import AssessmentIntro from '@/lib/components/assessment-flow/AssessmentIntro';
 import AssessmentOutro from '@/lib/components/assessment-flow/AssessmentOutro';
-import AssessmentFlowLayout from '@/lib/components/assessment-flow/AssessmentFlowLayout';
 import AssessmentFlowSidebar from '@/lib/components/assessment-flow/AssessmentFlowSidebar';
 import AssessmentFlowNavbar from '@/lib/components/assessment-flow/AssessmentFlowNavbar';
-import AssessmentFlowMain from '@/lib/components/assessment-flow/AssessmentFlowMain';
+import AssessmentFlowContent from '@/lib/components/assessment-flow/AssessmentFlowContent';
 
 export default function AssessmentPage({ params }: { params: Promise<{ assessmentId: string }> }) {
     const { assessmentId } = use(params);
@@ -46,28 +45,28 @@ export default function AssessmentPage({ params }: { params: Promise<{ assessmen
     }
 
     return (
-        <AssessmentFlowLayout
-            navbar={<AssessmentFlowNavbar candidateName={assessment.candidateName} />}
-            sidebar={
+        <div className="flex h-screen w-full flex-col overflow-hidden">
+            <AssessmentFlowNavbar candidateName={assessment.candidateName} />
+            <div className="flex flex-1 overflow-hidden">
                 <AssessmentFlowSidebar
                     sections={assessment.sections}
                     currentSectionIndex={assessment.currentSectionIndex}
                     formattedTime={assessment.timer.formattedTime}
                 />
-            }
-            main={
-                <AssessmentFlowMain
-                    currentSection={assessment.currentSection}
-                    availableLanguages={assessment.availableLanguages}
-                    publicTestCases={assessment.publicTestCases}
-                    testCaseResults={assessment.testCaseResults}
-                    isTransitioning={assessment.isTransitioning}
-                    onLanguageChange={assessment.changeLanguage}
-                    onEditorMount={assessment.handleEditorMount}
-                    onRunTests={assessment.runTests}
-                    onSubmit={assessment.submitAndContinue}
-                />
-            }
-        />
+                <main className="flex-1 overflow-hidden">
+                    <AssessmentFlowContent
+                        currentSection={assessment.currentSection}
+                        availableLanguages={assessment.availableLanguages}
+                        publicTestCases={assessment.publicTestCases}
+                        testCaseResults={assessment.testCaseResults}
+                        isTransitioning={assessment.isTransitioning}
+                        onLanguageChange={assessment.changeLanguage}
+                        onEditorMount={assessment.handleEditorMount}
+                        onRunTests={assessment.runTests}
+                        onSubmit={assessment.submitAndContinue}
+                    />
+                </main>
+            </div>
+        </div>
     );
 }

…s/assessment-flow/AssessmentFlowMain.tsx …ssessment-flow/AssessmentFlowContent.tsxsrc/lib/components/assessment-flow/AssessmentFlowMain.tsx renamed to src/lib/components/assessment-flow/AssessmentFlowContent.tsx src/lib/components/assessment-flow/AssessmentFlowMain.tsx renamed to src/lib/components/assessment-flow/AssessmentFlowContent.tsx

@@ -13,7 +13,7 @@ import type { TestCaseDTO } from '@/lib/schemas/task-template.schema';
 import type { TestCaseResult } from '@/lib/hooks/useAssessment';
 import type { TaskLanguageOption } from '@/lib/types/candidate-assessment.types';
 
-type AssessmentFlowMainProps = {
+type AssessmentFlowContentProps = {
     currentSection: SectionState | null;
     availableLanguages: TaskLanguageOption[];
     publicTestCases: TestCaseDTO[];
@@ -25,7 +25,7 @@ type AssessmentFlowMainProps = {
     onSubmit: () => void;
 };
 
-export default function AssessmentFlowMain({
+export default function AssessmentFlowContent({
     currentSection,
     availableLanguages,
     publicTestCases,
@@ -35,7 +35,7 @@ export default function AssessmentFlowMain({
     onEditorMount,
     onRunTests,
     onSubmit,
-}: AssessmentFlowMainProps) {
+}: AssessmentFlowContentProps) {
     if (!currentSection) return null;
 
     return (

src/lib/components/assessment-flow/AssessmentFlowLayout.tsx

@@ -1,5 +1,5 @@
 import { AlarmClock } from 'lucide-react';
-import QuestionIndicator from '@/lib/components/assessment-flow/QuestionIndicator';
+import AssessmentSidebarQuestion from '@/lib/components/assessment-flow/AssessmentSidebarQuestion';
 import type { SectionState } from '@/lib/hooks/useAssessment';
 
 type AssessmentFlowSidebarProps = {
@@ -22,7 +22,7 @@ export default function AssessmentFlowSidebar({
             </div>
             <div className="flex flex-col items-center gap-3">
                 {sections.map((section, i) => (
-                    <QuestionIndicator
+                    <AssessmentSidebarQuestion
                         key={section.taskTemplateId}
                         index={i}
                         status={section.status}

src/lib/components/assessment-flow/AssessmentFlowSidebar.tsx

@@ -1,31 +1,12 @@
 import type { CandidateAssessment } from '@/lib/types/candidate-assessment.types';
+import { formatDeadline, formatDuration } from '@/lib/utils/date.utils';
 
 type AssessmentIntroProps = {
     assessment: CandidateAssessment;
     totalTimeSeconds: number;
     onStart: () => void;
 };
 
-// move this to utils? (thoughts)
-function formatDeadline(date: Date | null): string {
-    if (!date) return 'No deadline';
-    return new Date(date).toLocaleString('en-US', {
-        month: 'long',
-        day: 'numeric',
-        year: 'numeric',
-        hour: 'numeric',
-        minute: '2-digit',
-    });
-}
-
-function formatDuration(totalSeconds: number): string {
-    const minutes = Math.round(totalSeconds / 60);
-    if (minutes < 60) return `${minutes} minutes`;
-    const hours = Math.floor(minutes / 60);
-    const remaining = minutes % 60;
-    return remaining > 0 ? `${hours}h ${remaining}m` : `${hours} hour${hours > 1 ? 's' : ''}`;
-}
-
 const GUIDELINES = [
     'Questions are linear - you cannot go back to previous questions.',
     'Changing or leaving this tab will be reported.',

src/lib/components/assessment-flow/AssessmentIntro.tsx

@@ -2,17 +2,17 @@ import { CircleCheck, Lock } from 'lucide-react';
 import { cn } from '@/lib/utils/cn.utils';
 import type { SectionStatus } from '@/lib/hooks/useAssessment';
 
-type QuestionIndicatorProps = {
+type AssessmentSidebarQuestionProps = {
     index: number;
     status: SectionStatus;
     type?: 'task' | 'text';
 };
 
-export default function QuestionIndicator({
+export default function AssessmentSidebarQuestion({
     index,
     status,
     type = 'task',
-}: QuestionIndicatorProps) {
+}: AssessmentSidebarQuestionProps) {
     const isCompleted = status === 'completed';
     const isCurrent = status === 'current';
     const isLocked = status === 'locked' || type === 'text';

…ts/assessment-flow/QuestionIndicator.tsx …sment-flow/AssessmentSidebarQuestion.tsxsrc/lib/components/assessment-flow/QuestionIndicator.tsx renamed to src/lib/components/assessment-flow/AssessmentSidebarQuestion.tsx src/lib/components/assessment-flow/QuestionIndicator.tsx renamed to src/lib/components/assessment-flow/AssessmentSidebarQuestion.tsx

@@ -180,11 +180,11 @@ export default function useAssessment(assessmentId: string) {
             prev.map((s, i) =>
                 i === currentSectionIndex
                     ? {
-                        ...s,
-                        testCaseResults: s.testCaseResults.map(() => ({
-                            status: 'loading' as const,
-                        })),
-                    }
+                          ...s,
+                          testCaseResults: s.testCaseResults.map(() => ({
+                              status: 'loading' as const,
+                          })),
+                      }
                     : s
             )
         );

src/lib/hooks/useAssessment.ts

@@ -0,0 +1,18 @@
+export function formatDeadline(date: Date | null): string {
+    if (!date) return 'No deadline';
+    return new Date(date).toLocaleString('en-US', {
+        month: 'long',
+        day: 'numeric',
+        year: 'numeric',
+        hour: 'numeric',
+        minute: '2-digit',
+    });
+}
+
+export function formatDuration(totalSeconds: number): string {
+    const minutes = Math.round(totalSeconds / 60);
+    if (minutes < 60) return `${minutes} minutes`;
+    const hours = Math.floor(minutes / 60);
+    const remaining = minutes % 60;
+    return remaining > 0 ? `${hours}h ${remaining}m` : `${hours} hour${hours > 1 ? 's' : ''}`;
+}