kschappell/codetutor
Public Access
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(frontend): visual improvements for content

Browse Source
This commit is contained in:
Kai Chappell
2025-05-07 23:01:33 +01:00
parent 2c8b217e1f
commit b091512c7d
8 changed files with 11348 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
frontend/src/app/globals.css
View File

@@ -21,6 +21,34 @@
--difficulty-medium-bg: #fef9c3;
--difficulty-hard: #dc2626;
--difficulty-hard-bg: #fee2e2;
/* Callout colors - Warning (orange/red) */
--callout-warning-bg: #fff7ed;
--callout-warning-border: #f97316;
--callout-warning-fg: #9a3412;
/* Callout colors - Success (green) */
--callout-success-bg: #f0fdf4;
--callout-success-border: #22c55e;
--callout-success-fg: #166534;
/* Callout colors - Info (blue) */
--callout-info-bg: #eff6ff;
--callout-info-border: #3b82f6;
--callout-info-fg: #1e40af;
/* Callout colors - Insight (purple) */
--callout-insight-bg: #faf5ff;
--callout-insight-border: #a855f7;
--callout-insight-fg: #6b21a8;
/* Approach boxes */
--approach-wrong-bg: #fef2f2;
--approach-wrong-border: #fecaca;
--approach-wrong-fg: #dc2626;
--approach-correct-bg: #f0fdf4;
--approach-correct-border: #bbf7d0;
--approach-correct-fg: #16a34a;
}
@media (prefers-color-scheme: dark) {
@@ -45,12 +73,45 @@
--difficulty-medium-bg: rgba(234, 179, 8, 0.2);
--difficulty-hard: #f87171;
--difficulty-hard-bg: rgba(239, 68, 68, 0.2);
/* Callout colors - Warning (dark mode) */
--callout-warning-bg: rgba(249, 115, 22, 0.15);
--callout-warning-border: #f97316;
--callout-warning-fg: #fdba74;
/* Callout colors - Success (dark mode) */
--callout-success-bg: rgba(34, 197, 94, 0.15);
--callout-success-border: #22c55e;
--callout-success-fg: #86efac;
/* Callout colors - Info (dark mode) */
--callout-info-bg: rgba(59, 130, 246, 0.15);
--callout-info-border: #3b82f6;
--callout-info-fg: #93c5fd;
/* Callout colors - Insight (dark mode) */
--callout-insight-bg: rgba(168, 85, 247, 0.15);
--callout-insight-border: #a855f7;
--callout-insight-fg: #d8b4fe;
/* Approach boxes (dark mode) */
--approach-wrong-bg: rgba(220, 38, 38, 0.15);
--approach-wrong-border: rgba(220, 38, 38, 0.4);
--approach-wrong-fg: #f87171;
--approach-correct-bg: rgba(22, 163, 74, 0.15);
--approach-correct-border: rgba(22, 163, 74, 0.4);
--approach-correct-fg: #4ade80;
}
}
body {
background: var(--background);
color: var(--foreground);
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
"Helvetica Neue", Arial, sans-serif;
font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
Roboto, "Helvetica Neue", Arial, sans-serif;
}
/* Improved line-height for prose content */
.prose-content {
line-height: 1.7;
}

19
frontend/src/app/layout.tsx
View File

@@ -1,5 +1,9 @@
import type { Metadata } from "next";
import Link from "next/link";
import "@fontsource/inter/400.css";
import "@fontsource/inter/500.css";
import "@fontsource/inter/600.css";
import "@fontsource/inter/700.css";
import { Providers } from "./providers";
import "./globals.css";
@@ -18,8 +22,17 @@ export default function RootLayout({
<html lang="en">
<body className="min-h-screen antialiased">
<Providers>
<a
href="#main-content"
className="sr-only focus:not-sr-only focus:absolute focus:z-50 focus:p-4 focus:bg-[var(--primary)] focus:text-[var(--primary-foreground)]"
>
Skip to main content
</a>
<header className="border-b border-[var(--border)] bg-[var(--card)]">
<nav className="container mx-auto px-4 py-4 flex items-center justify-between">
<nav
className="container mx-auto px-4 py-4 flex items-center justify-between"
aria-label="Main navigation"
>
<Link
href="/"
className="text-xl font-bold text-[var(--primary)]"
@@ -48,7 +61,9 @@ export default function RootLayout({
</div>
</nav>
</header>
<main className="container mx-auto px-4 py-8">{children}</main>
<main id="main-content" className="container mx-auto px-4 py-8">
{children}
</main>
<footer className="border-t border-[var(--border)] mt-auto py-6 text-center text-[var(--muted-foreground)] text-sm">
CodeTutor - Coding Interview Preparation
</footer>

230
frontend/src/app/questions/[slug]/page.tsx
View File

@@ -2,7 +2,18 @@ import { getQuestion } from "@/lib/api";
import { Badge } from "@/components/ui/badge";
import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";
import { CodeBlock } from "@/components/ui/code-block";
import { getDifficultyColor, capitalize } from "@/lib/utils";
import { Markdown } from "@/components/ui/markdown";
import { Callout, ApproachBox } from "@/components/ui/callout";
import { Collapsible } from "@/components/ui/collapsible";
import { getDifficultyColor, getDifficultyLabel, capitalize } from "@/lib/utils";
import {
FileText,
AlertCircle,
BookOpen,
Code,
Clock,
HardDrive,
} from "lucide-react";
import Link from "next/link";
import { notFound } from "next/navigation";
@@ -20,12 +31,18 @@ export default async function QuestionDetailPage({
notFound();
}
const optimalSolutions = question.solutions.filter((s) => s.is_optimal);
const otherSolutions = question.solutions.filter((s) => !s.is_optimal);
return (
<div className="max-w-4xl mx-auto space-y-8">
<div>
<div className="flex items-start justify-between gap-4 mb-4">
<h1 className="text-3xl font-bold">{question.title}</h1>
<Badge className={getDifficultyColor(question.difficulty)}>
<Badge
className={getDifficultyColor(question.difficulty)}
aria-label={getDifficultyLabel(question.difficulty)}
>
{capitalize(question.difficulty)}
</Badge>
</div>
@@ -48,6 +65,7 @@ export default async function QuestionDetailPage({
href={question.leetcode_url}
target="_blank"
rel="noopener noreferrer"
aria-label={`View ${question.title} on LeetCode (opens in new tab)`}
className="text-[var(--primary)] hover:underline text-sm"
>
View on LeetCode
@@ -57,22 +75,26 @@ export default async function QuestionDetailPage({
<Card>
<CardHeader>
<CardTitle>Problem</CardTitle>
<CardTitle className="flex items-center gap-2">
<FileText className="h-5 w-5" aria-hidden="true" />
Problem
</CardTitle>
</CardHeader>
<CardContent className="prose dark:prose-invert max-w-none">
<div className="whitespace-pre-wrap">{question.description}</div>
<CardContent className="prose-content">
<Markdown>{question.description}</Markdown>
</CardContent>
</Card>
{question.constraints && (
<Card>
<CardHeader>
<CardTitle>Constraints</CardTitle>
<CardTitle className="flex items-center gap-2">
<AlertCircle className="h-5 w-5" aria-hidden="true" />
Constraints
</CardTitle>
</CardHeader>
<CardContent>
<pre className="text-sm whitespace-pre-wrap">
{question.constraints}
</pre>
<Markdown>{question.constraints}</Markdown>
</CardContent>
</Card>
)}
@@ -80,7 +102,10 @@ export default async function QuestionDetailPage({
{question.examples && question.examples.length > 0 && (
<Card>
<CardHeader>
<CardTitle>Examples</CardTitle>
<CardTitle className="flex items-center gap-2">
<BookOpen className="h-5 w-5" aria-hidden="true" />
Examples
</CardTitle>
</CardHeader>
<CardContent className="space-y-4">
{question.examples.map((example, i) => (
@@ -109,90 +134,94 @@ export default async function QuestionDetailPage({
{question.explanation && (
<>
<Card>
<CardHeader>
<CardTitle>Approach</CardTitle>
</CardHeader>
<CardContent className="whitespace-pre-wrap">
{question.explanation.approach}
</CardContent>
</Card>
<Callout variant="info" title="Approach">
<div className="prose-content">
<Markdown>{question.explanation.approach}</Markdown>
</div>
</Callout>
<Callout variant="insight" title="Intuition">
<div className="prose-content">
<Markdown>{question.explanation.intuition}</Markdown>
</div>
</Callout>
<Card>
<CardHeader>
<CardTitle>Intuition</CardTitle>
<CardTitle className="flex items-center gap-2">
<Clock className="h-5 w-5" aria-hidden="true" />
Complexity Analysis
</CardTitle>
</CardHeader>
<CardContent className="whitespace-pre-wrap">
{question.explanation.intuition}
</CardContent>
</Card>
<Card>
<CardHeader>
<CardTitle>Complexity Analysis</CardTitle>
</CardHeader>
<CardContent className="space-y-2">
<div>
<span className="font-medium">Time: </span>
{question.explanation.time_complexity}
</div>
<div>
<span className="font-medium">Space: </span>
{question.explanation.space_complexity}
</div>
{question.explanation.complexity_explanation && (
<div className="text-sm text-[var(--muted-foreground)] mt-2 whitespace-pre-wrap">
{question.explanation.complexity_explanation}
<CardContent className="space-y-3">
<div className="flex items-start gap-2">
<Clock
className="h-4 w-4 mt-1 text-[var(--muted-foreground)]"
aria-hidden="true"
/>
<div className="[&>div]:inline [&>div>p]:inline">
<span className="font-medium">Time Complexity: </span>
<Markdown>{question.explanation.time_complexity}</Markdown>
</div>
)}
</div>
<div className="flex items-start gap-2">
<HardDrive
className="h-4 w-4 mt-1 text-[var(--muted-foreground)]"
aria-hidden="true"
/>
<div className="[&>div]:inline [&>div>p]:inline">
<span className="font-medium">Space Complexity: </span>
<Markdown>{question.explanation.space_complexity}</Markdown>
</div>
</div>
</CardContent>
</Card>
{question.explanation.common_pitfalls &&
question.explanation.common_pitfalls.length > 0 && (
<Card>
<CardHeader>
<CardTitle>Common Pitfalls</CardTitle>
</CardHeader>
<CardContent className="space-y-4">
<Callout variant="warning" title="Common Pitfalls">
<div className="space-y-4">
{question.explanation.common_pitfalls.map((pitfall, i) => (
<div key={i} className="p-4 rounded bg-[var(--secondary)]">
<div key={i}>
<h4 className="font-medium mb-2">{pitfall.title}</h4>
<p className="text-sm whitespace-pre-wrap">
{pitfall.description}
</p>
{pitfall.wrong_approach && (
<div className="mt-2 text-sm">
<span className="text-red-500">Wrong: </span>
<code>{pitfall.wrong_approach}</code>
</div>
)}
{pitfall.correct_approach && (
<div className="mt-1 text-sm">
<span className="text-green-500">Correct: </span>
<code>{pitfall.correct_approach}</code>
<div className="text-sm prose-content mb-3">
<Markdown>{pitfall.description}</Markdown>
</div>
{(pitfall.wrong_approach || pitfall.correct_approach) && (
<div className="space-y-2">
{pitfall.wrong_approach && (
<ApproachBox variant="wrong">
<code className="text-sm">
{pitfall.wrong_approach}
</code>
</ApproachBox>
)}
{pitfall.correct_approach && (
<ApproachBox variant="correct">
<code className="text-sm">
{pitfall.correct_approach}
</code>
</ApproachBox>
)}
</div>
)}
</div>
))}
</CardContent>
</Card>
</div>
</Callout>
)}
{question.explanation.key_takeaways &&
question.explanation.key_takeaways.length > 0 && (
<Card>
<CardHeader>
<CardTitle>Key Takeaways</CardTitle>
</CardHeader>
<CardContent>
<ul className="list-disc list-inside space-y-1">
{question.explanation.key_takeaways.map((takeaway, i) => (
<li key={i}>{takeaway}</li>
))}
</ul>
</CardContent>
</Card>
<Callout variant="success" title="Key Takeaways">
<ul className="list-disc list-inside space-y-2">
{question.explanation.key_takeaways.map((takeaway, i) => (
<li key={i} className="[&>div]:inline [&>div>p]:inline">
<Markdown>{takeaway}</Markdown>
</li>
))}
</ul>
</Callout>
)}
</>
)}
@@ -200,27 +229,60 @@ export default async function QuestionDetailPage({
{question.solutions.length > 0 && (
<Card>
<CardHeader>
<CardTitle>Solutions</CardTitle>
<CardTitle className="flex items-center gap-2">
<Code className="h-5 w-5" aria-hidden="true" />
Solutions
</CardTitle>
</CardHeader>
<CardContent className="space-y-6">
{question.solutions.map((solution) => (
{optimalSolutions.map((solution) => (
<div key={solution.id}>
<div className="flex items-center gap-2 mb-2">
<h4 className="font-medium">{solution.approach_name}</h4>
{solution.is_optimal && (
<Badge className="bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400">
Optimal
</Badge>
)}
<Badge className="bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400">
Optimal
</Badge>
</div>
{solution.explanation && (
<p className="text-sm text-[var(--muted-foreground)] mb-3">
{solution.explanation}
</p>
<div className="text-sm text-[var(--muted-foreground)] mb-3 prose-content">
<Markdown>{solution.explanation}</Markdown>
</div>
)}
<CodeBlock code={solution.code} language={solution.language} />
</div>
))}
{otherSolutions.length > 0 && (
<div className="space-y-4">
{otherSolutions.map((solution) => (
<Collapsible
key={solution.id}
title={
<span className="flex items-center gap-2">
{solution.approach_name}
<Badge
variant="outline"
className="text-xs font-normal"
>
Alternative
</Badge>
</span>
}
defaultOpen={false}
>
{solution.explanation && (
<div className="text-sm text-[var(--muted-foreground)] mb-3 prose-content">
<Markdown>{solution.explanation}</Markdown>
</div>
)}
<CodeBlock
code={solution.code}
language={solution.language}
/>
</Collapsible>
))}
</div>
)}
</CardContent>
</Card>
)}

122
frontend/src/components/ui/callout.tsx Normal file
View File

@@ -0,0 +1,122 @@
import { cn } from "@/lib/utils";
import {
AlertTriangle,
Lightbulb,
ClipboardList,
Brain,
type LucideIcon,
} from "lucide-react";
type CalloutVariant = "warning" | "success" | "info" | "insight";
interface CalloutProps {
children: React.ReactNode;
variant?: CalloutVariant;
title?: string;
icon?: LucideIcon;
className?: string;
}
const variantConfig: Record<
CalloutVariant,
{ icon: LucideIcon; borderClass: string; bgClass: string; iconClass: string }
> = {
warning: {
icon: AlertTriangle,
borderClass: "border-[var(--callout-warning-border)]",
bgClass: "bg-[var(--callout-warning-bg)]",
iconClass: "text-[var(--callout-warning-fg)]",
},
success: {
icon: Lightbulb,
borderClass: "border-[var(--callout-success-border)]",
bgClass: "bg-[var(--callout-success-bg)]",
iconClass: "text-[var(--callout-success-fg)]",
},
info: {
icon: ClipboardList,
borderClass: "border-[var(--callout-info-border)]",
bgClass: "bg-[var(--callout-info-bg)]",
iconClass: "text-[var(--callout-info-fg)]",
},
insight: {
icon: Brain,
borderClass: "border-[var(--callout-insight-border)]",
bgClass: "bg-[var(--callout-insight-bg)]",
iconClass: "text-[var(--callout-insight-fg)]",
},
};
export function Callout({
children,
variant = "info",
title,
icon,
className,
}: CalloutProps) {
const config = variantConfig[variant];
const Icon = icon || config.icon;
return (
<div
className={cn(
"rounded-lg border-l-4 p-4",
config.borderClass,
config.bgClass,
className
)}
role="note"
>
{title && (
<div className="flex items-center gap-2 mb-2 font-semibold">
<Icon className={cn("h-5 w-5 flex-shrink-0", config.iconClass)} aria-hidden="true" />
<span>{title}</span>
</div>
)}
<div className={cn(!title && "flex gap-3")}>
{!title && (
<Icon className={cn("h-5 w-5 flex-shrink-0 mt-0.5", config.iconClass)} aria-hidden="true" />
)}
<div className="flex-1">{children}</div>
</div>
</div>
);
}
interface ApproachBoxProps {
children: React.ReactNode;
variant: "wrong" | "correct";
className?: string;
}
export function ApproachBox({ children, variant, className }: ApproachBoxProps) {
const isWrong = variant === "wrong";
return (
<div
className={cn(
"rounded-lg p-3 border",
isWrong
? "border-[var(--approach-wrong-border)] bg-[var(--approach-wrong-bg)]"
: "border-[var(--approach-correct-border)] bg-[var(--approach-correct-bg)]",
className
)}
>
<div className="flex items-start gap-2">
<span
className={cn(
"font-medium flex-shrink-0",
isWrong ? "text-[var(--approach-wrong-fg)]" : "text-[var(--approach-correct-fg)]"
)}
aria-hidden="true"
>
{isWrong ? "✗" : "✓"}
</span>
<div className="flex-1">
<span className="sr-only">{isWrong ? "Wrong approach: " : "Correct approach: "}</span>
{children}
</div>
</div>
</div>
);
}

98
frontend/src/components/ui/code-block.test.tsx Normal file
View File

@@ -0,0 +1,98 @@
import { describe, it, expect, vi, beforeEach } from "vitest";
import { render, screen, fireEvent, act } from "@testing-library/react";
import { CodeBlock } from "./code-block";
describe("CodeBlock", () => {
beforeEach(() => {
Object.assign(navigator, {
clipboard: {
writeText: vi.fn().mockResolvedValue(undefined),
},
});
});
it("renders code content", () => {
render(<CodeBlock code="const x = 1;" language="javascript" />);
const codeBlock = screen.getByLabelText("javascript code example");
expect(codeBlock).toHaveTextContent("const x = 1;");
});
it("displays language label", () => {
render(<CodeBlock code="print('hello')" language="python" />);
expect(screen.getByText("python")).toBeInTheDocument();
});
it("defaults to python language", () => {
render(<CodeBlock code="x = 1" />);
expect(screen.getByText("python")).toBeInTheDocument();
});
it("has accessible copy button with aria-label", () => {
render(<CodeBlock code="test" />);
const button = screen.getByRole("button", {
name: /copy code to clipboard/i,
});
expect(button).toBeInTheDocument();
});
it("copies code to clipboard on click", async () => {
render(<CodeBlock code="const x = 1;" />);
const button = screen.getByRole("button", {
name: /copy code to clipboard/i,
});
await act(async () => {
fireEvent.click(button);
});
expect(navigator.clipboard.writeText).toHaveBeenCalledWith("const x = 1;");
});
it("copies code to clipboard on Enter key", async () => {
render(<CodeBlock code="const x = 1;" />);
const button = screen.getByRole("button", {
name: /copy code to clipboard/i,
});
await act(async () => {
fireEvent.keyDown(button, { key: "Enter" });
});
expect(navigator.clipboard.writeText).toHaveBeenCalledWith("const x = 1;");
});
it("copies code to clipboard on Space key", async () => {
render(<CodeBlock code="const x = 1;" />);
const button = screen.getByRole("button", {
name: /copy code to clipboard/i,
});
await act(async () => {
fireEvent.keyDown(button, { key: " " });
});
expect(navigator.clipboard.writeText).toHaveBeenCalledWith("const x = 1;");
});
it("shows 'Copied!' text after copying", async () => {
vi.useFakeTimers();
render(<CodeBlock code="test" />);
const button = screen.getByRole("button", {
name: /copy code to clipboard/i,
});
await act(async () => {
fireEvent.click(button);
await Promise.resolve();
});
expect(screen.getByText("Copied!")).toBeInTheDocument();
await act(async () => {
vi.advanceTimersByTime(2000);
});
expect(screen.getByText("Copy")).toBeInTheDocument();
vi.useRealTimers();
});
});

54
frontend/src/components/ui/collapsible.tsx Normal file
View File

@@ -0,0 +1,54 @@
"use client";
import { useState, useId } from "react";
import { ChevronDown } from "lucide-react";
import { cn } from "@/lib/utils";
interface CollapsibleProps {
children: React.ReactNode;
title: React.ReactNode;
defaultOpen?: boolean;
className?: string;
}
export function Collapsible({
children,
title,
defaultOpen = false,
className,
}: CollapsibleProps) {
const [isOpen, setIsOpen] = useState(defaultOpen);
const contentId = useId();
return (
<div className={cn("border border-[var(--border)] rounded-lg", className)}>
<button
type="button"
onClick={() => setIsOpen(!isOpen)}
aria-expanded={isOpen}
aria-controls={contentId}
className="w-full flex items-center justify-between p-4 text-left hover:bg-[var(--secondary)] transition-colors rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--ring)] focus:ring-inset"
>
<span className="font-medium">{title}</span>
<ChevronDown
className={cn(
"h-5 w-5 text-[var(--muted-foreground)] transition-transform duration-200",
isOpen && "rotate-180"
)}
aria-hidden="true"
/>
</button>
<div
id={contentId}
role="region"
aria-labelledby={contentId}
className={cn(
"overflow-hidden transition-all duration-200 ease-in-out",
isOpen ? "max-h-[2000px] opacity-100" : "max-h-0 opacity-0"
)}
>
<div className="p-4 pt-0">{children}</div>
</div>
</div>
);
}