Breadcrumbs.

frontend/app/components/breadcrumbs.tsx

@@ -0,0 +1,66 @@
+import { cn } from "~/lib/utils";
+import { HomeIcon } from "lucide-react";
+
+export function Breadcrumbs() {
+    const pathname =
+        typeof window !== "undefined" ? window.location.pathname : "/";
+
+    const segments = pathname.split("/").filter(Boolean);
+    const crumbs = [
+        { name: "/", href: "/", isEllipsis: false },
+        ...segments.map((seg, i) => {
+            const href = "/" + segments.slice(0, i + 1).join("/");
+            const name = decodeURIComponent(seg)
+                .replace(/-/g, " ")
+                .replace(/\b\w/g, (c) => c.toUpperCase());
+            return { name, href, isEllipsis: false };
+        }),
+    ];
+
+    const displayCrumbs =
+        crumbs.length > 4
+            ? [
+                  crumbs[0],
+                  { name: "...", href: null, isEllipsis: true },
+                  crumbs[crumbs.length - 2],
+                  crumbs[crumbs.length - 1],
+              ]
+            : crumbs;
+
+    return (
+        <nav aria-label="Breadcrumb" className="flex items-center">
+            <ol className="flex items-center gap-2 text-sm">
+                {displayCrumbs.map((c, i, array) => (
+                    <li
+                        key={c.href ?? `ellipsis-${i}`}
+                        className="flex items-center gap-2"
+                    >
+                        {c.isEllipsis ? (
+                            <span className="text-muted-foreground">...</span>
+                        ) : (
+                            <a
+                                href={i == 0 || i == array.length -1 ? undefined : c.href!}
+                                className={cn(
+                                    "text-ellipsis overflow-hidden whitespace-nowrap max-w-36",
+                                    i > 0 && i < array.length - 1
+                                        ? "font-medium hover:underline"
+                                        : "text-muted-foreground"
+                                )}
+                                aria-current={
+                                    i > 0 && i < array.length - 1
+                                        ? "page"
+                                        : undefined
+                                }
+                            >
+                                {c.name == "/" ? <HomeIcon className="size-4" /> : c.name}
+                            </a>
+                        )}
+                        {i < displayCrumbs.length - 1 && (
+                            <span className="text-muted-foreground">/</span>
+                        )}
+                    </li>
+                ))}
+            </ol>
+        </nav>
+    );
+}

frontend/app/components/header.tsx

@@ -1,7 +1,8 @@
-"use client"
+"use client";
 
 import { Button } from "./ui/button";
 import { useSidebar } from "./ui/sidebar";
+import { Breadcrumbs } from "./breadcrumbs";
 import { ThemeToggle } from "./theme-toggle";
 import { SidebarCloseIcon, SidebarOpenIcon } from "lucide-react";
 
@@ -9,11 +10,16 @@ export function Header() {
     const { state, toggleSidebar } = useSidebar();
 
     return (
-        <header className="flex place-content-between p-4">
+        <header className="flex place-content-between gap-2 p-4 [&>nav]:mr-auto place-items-center">
             <Button onClick={() => toggleSidebar()} variant="ghost" size="icon">
-                {state == "collapsed" ? <SidebarOpenIcon /> : <SidebarCloseIcon />}
+                {state == "collapsed" ? (
+                    <SidebarOpenIcon />
+                ) : (
+                    <SidebarCloseIcon />
+                )}
             </Button>
+            <Breadcrumbs />
             <ThemeToggle />
         </header>
     );
-}
+}

frontend/app/components/question-card.tsx

@@ -76,7 +76,7 @@ export function QuestionCard({
                             </div>
                         ))}
                         {isStatic && question.correct_options &&  question.correct_options.some(co => !(answers[question.id] || []).includes(co)) &&
-                            <div className="text-red-600 dark:text-red-400 ml-2">(You did not select all correct answers)</div>}
+                            <div className="text-red-600 dark:text-red-400 mt-2">(You did not select all correct answers)</div>}
                     </div>
                 ),
             }[question.type]}