feat: add colle details page

app/app.css

@@ -119,6 +119,7 @@
   }
   body {
     @apply bg-background text-foreground;
+    font-family: "Inter";
   }
 }
 

app/components/combobox.tsx

@@ -22,18 +22,16 @@ export function Combobox({
   defaultText = "Select value...",
   placeholderText = "Search...",
   emptyText = "No value found.",
-  renderValue = (value) => value
-    ? values.find((current) => current.value === value)?.label!
-    : defaultText,
+  current, setValue
 }: {
   values?: { value: string; label: string }[]
   emptyText?: string
   placeholderText?: string
   defaultText?: string
-  renderValue?: (value: string) => string
+  current?: string
+  setValue: (value: string) => void
 }) {
   const [open, setOpen] = React.useState(false)
-  const [current, setValue] = React.useState("")
 
   return (
     <Popover open={open} onOpenChange={setOpen}>
@@ -44,7 +42,9 @@ export function Combobox({
           aria-expanded={open}
           className="w-full justify-between"
         >
-          {renderValue(current)}
+          {current
+            ? values.find((value) => value.value === current)?.label!
+            : defaultText}
           <ChevronsUpDownIcon className="ml-2 h-4 w-4 shrink-0 opacity-50" />
         </Button>
       </PopoverTrigger>
@@ -59,7 +59,7 @@ export function Combobox({
                   key={value}
                   value={value}
                   onSelect={(currentValue) => {
-                    setValue(currentValue === value ? "" : currentValue)
+                    setValue(currentValue === current ? "" : currentValue)
                     setOpen(false)
                   }}
                 >

app/components/details/attachment.tsx

@@ -0,0 +1,52 @@
+import { FileText, Image, File } from "lucide-react";
+
+export default function AttachmentItem({ attachment }: { attachment: string }) {
+  return (
+    <a
+      // TODO: BAD: hardcoded URL, should be dynamic (environment variable or config)
+      href={"https://bjcolle.fr/" + attachment}
+      target="_blank"
+      className="flex items-center gap-2 p-3 border rounded-md hover:bg-muted transition-colors cursor-pointer"
+    >
+      {getIcon(attachment)}
+      <span className="font-medium truncate">
+        {getName(attachment) || "Sans Nom"}
+      </span>
+    </a>
+  );
+}
+
+const getType = (attachment: string) => {
+  const ext = attachment.split(".").pop();
+  if (ext === "pdf") {
+    return "pdf";
+  } else if (["jpg", "jpeg", "png", "gif"].includes(ext!)) {
+    return "image";
+  } else {
+    console.error(`Unknown attachment type: ${ext}`);
+    return "other";
+  }
+};
+
+const getIcon = (attachment: string) => {
+  switch (getType(attachment)) {
+    case "pdf":
+      return <FileText className="h-5 w-5 text-red-500" />;
+    case "image":
+      return <Image className="h-5 w-5 text-blue-500" />;
+    // case "document":
+    //     return <FileText className="h-5 w-5 text-blue-500" />
+    // case "spreadsheet":
+    //     return <FileText className="h-5 w-5 text-green-500" />
+    // case "code":
+    //     return <FileText className="h-5 w-5 text-purple-500" />
+    default:
+      return <File className="h-5 w-5 text-gray-500" />;
+  }
+};
+
+const getName = (attachment: string) => {
+  const parts = attachment.replace("pj_doc", "").split("_");
+  const nameParts = parts.slice(2); // remove the first two parts
+  return nameParts.join("_");
+};

app/components/details/skeleton-details.tsx

@@ -0,0 +1,92 @@
+import { Button } from "~/components/ui/button"
+import { Card, CardContent, CardHeader } from "~/components/ui/card"
+import { Skeleton } from "~/components/ui/skeleton"
+import { Separator } from "~/components/ui/separator"
+import { ArrowLeft } from "lucide-react"
+
+export default function DetailsSkeleton() {
+  return (
+    <div className="container mx-auto py-8 px-4">
+      <div className="flex justify-between items-center mb-4">
+        <Button variant="outline" disabled>
+          <ArrowLeft className="h-4 w-4 mr-2" />
+          Back
+        </Button>
+        <Skeleton className="h-9 w-9 rounded-md" />
+      </div>
+
+      <Card className="max-w-3xl mx-auto">
+        <CardHeader className="pb-2">
+          <div className="flex justify-between items-center">
+            <Skeleton className="h-8 w-48" />
+            <div className="flex items-center gap-2">
+              <Skeleton className="h-8 w-8 rounded-full" />
+              <Skeleton className="h-6 w-20 rounded-md" />
+            </div>
+          </div>
+        </CardHeader>
+
+        <CardContent className="space-y-6">
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+            <div className="space-y-4">
+              <div>
+                <Skeleton className="h-4 w-24 mb-1" />
+                <div className="flex items-center gap-2">
+                  <Skeleton className="h-4 w-4 rounded-full" />
+                  <Skeleton className="h-4 w-40" />
+                </div>
+              </div>
+
+              <div>
+                <Skeleton className="h-4 w-24 mb-1" />
+                <div className="flex items-center gap-2">
+                  <Skeleton className="h-4 w-4 rounded-full" />
+                  <Skeleton className="h-4 w-32" />
+                </div>
+              </div>
+            </div>
+
+            <div className="space-y-4">
+              <div>
+                <Skeleton className="h-4 w-24 mb-1" />
+                <div className="flex items-center gap-2">
+                  <Skeleton className="h-4 w-4 rounded-full" />
+                  <Skeleton className="h-4 w-28" />
+                </div>
+              </div>
+
+              <div>
+                <Skeleton className="h-4 w-24 mb-1" />
+                <div className="flex items-center gap-2">
+                  <Skeleton className="h-4 w-4 rounded-full" />
+                  <Skeleton className="h-4 w-36" />
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <Separator />
+
+          <div>
+            <div className="flex items-center gap-2 mb-2">
+              <Skeleton className="h-5 w-5 rounded-full" />
+              <Skeleton className="h-6 w-40" />
+            </div>
+            <Skeleton className="h-24 w-full rounded-lg" />
+          </div>
+
+          <div>
+            <div className="flex items-center gap-2 mb-3">
+              <Skeleton className="h-5 w-5 rounded-full" />
+              <Skeleton className="h-6 w-32" />
+            </div>
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
+              <Skeleton className="h-14 w-full rounded-md" />
+              <Skeleton className="h-14 w-full rounded-md" />
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  )
+}

app/components/error.tsx

@@ -0,0 +1,47 @@
+import { Button } from "~/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "~/components/ui/card";
+import { ChevronLeft, FileQuestion, RotateCw } from "lucide-react";
+import { Link } from "react-router";
+import { forceReload } from "~/lib/utils";
+
+export default function Error({
+  title = "Page introuvable",
+  message = "Nous n'avons pas pu trouver la page que vous recherchiez.",
+  code = 404,
+  description = "La page que vous recherchez a peut-être été supprimée, son nom a été modifié ou est temporairement indisponible.",
+}) {
+  return (
+    <div className="flex items-center justify-center h-full w-full">
+      <Card className="max-w-md w-full">
+        <CardHeader className="text-center">
+          <div className="flex justify-center mb-4">
+            <FileQuestion className="h-12 w-12 text-primary" />
+          </div>
+          <CardTitle className="text-2xl">{title}</CardTitle>
+          <CardDescription>{message}</CardDescription>
+        </CardHeader>
+        <CardContent className="text-center">
+          <p className="text-4xl font-bold mb-2">{code}</p>
+          <p className="text-muted-foreground">{description}</p>
+        </CardContent>
+        <CardFooter className="flex justify-center gap-2">
+          <Button>
+            <ChevronLeft />
+            <Link to="/">Retour</Link>
+          </Button>
+          <Button variant="destructive" className="text-white" onClick={forceReload}>
+            <RotateCw />
+            Recharger la page
+          </Button>
+        </CardFooter>
+      </Card>
+    </div>
+  );
+}

app/components/home/bottom-nav.tsx

@@ -0,0 +1,55 @@
+import { Star, User, Users } from "lucide-react"
+import { cn } from "~/lib/utils"
+
+interface BottomNavigationProps {
+  activeTab: string
+  onTabChange: (tab: string) => void
+  favoriteCount: number
+}
+
+export default function BottomNavigation({ activeTab, onTabChange, favoriteCount }: BottomNavigationProps) {
+  return (
+    <div className="fixed bottom-0 left-0 right-0 bg-background border-t border-border md:hidden z-50">
+      <div className="flex items-center justify-around h-16">
+        <button
+          onClick={() => onTabChange("you")}
+          className={cn(
+            "flex flex-col items-center justify-center w-full h-full",
+            activeTab === "you" ? "text-primary" : "text-muted-foreground",
+          )}
+        >
+          <div className="flex items-center gap-1">
+            <User className="h-4 w-4" />
+            <span className="text-xs font-medium">Vos colles</span>
+          </div>
+        </button>
+
+        <button
+          onClick={() => onTabChange("favorites")}
+          className={cn(
+            "flex flex-col items-center justify-center w-full h-full gap-1",
+            activeTab === "favorites" ? "text-primary" : "text-muted-foreground",
+          )}
+        >
+          <div className="flex items-center gap-1">
+            <Star className="h-4 w-4" />
+            <span className="text-xs font-medium">Vos favoris ({favoriteCount})</span>
+          </div>
+        </button>
+
+        <button
+          onClick={() => onTabChange("class")}
+          className={cn(
+            "flex flex-col items-center justify-center w-full h-full",
+            activeTab === "class" ? "text-primary" : "text-muted-foreground",
+          )}
+        >
+          <div className="flex items-center gap-1">
+            <Users className="h-4 w-4" />
+            <span className="text-xs font-medium">Votre classe</span>
+          </div>
+        </button>
+      </div>
+    </div>
+  )
+}

app/components/home/colle-card.tsx

@@ -0,0 +1,145 @@
+import type React from "react";
+import type { Colle } from "~/lib/api";
+
+import { Link, useNavigate } from "react-router";
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardFooter,
+} from "~/components/ui/card";
+import { User, UserCheck, Paperclip, Star, MapPinHouse } from "lucide-react";
+import { Badge } from "~/components/ui/badge";
+import { Button } from "~/components/ui/button";
+import { formatDate, formatGrade, formatTime } from "~/lib/utils";
+
+// TODO: Preferences for subject colors
+const getSubjectColor = (_: string) => {
+  // Mock placeholder function
+  return "bg-blue-100 text-blue-800"; // Default color
+};
+const getSubjectEmoji = (_: string) => {
+  // Mock placeholder function
+  return "📚"; // Default emoji
+};
+
+type ColleCardProps = {
+  colle: Colle;
+  onToggleFavorite: (id: number, favorite: boolean) => void;
+  beforeClick: () => void;
+  isFavorite: boolean;
+};
+
+export default function ColleCard({
+  colle,
+  onToggleFavorite,
+  beforeClick,
+  isFavorite,
+}: ColleCardProps) {
+  const navigate = useNavigate();
+
+  // TODO: Remove this if scroll restoration is not needed (test first)
+  const handleCardClick = (e: React.MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    beforeClick();
+    setTimeout(() => navigate(`/colles/${colle.id}`), 100);
+  };
+
+  // TODO: Favorites
+  const handleToggleFavorite = (e: React.MouseEvent) => {
+    e.stopPropagation(); // Prevent card click
+    e.preventDefault();
+    const newValue = !isFavorite;
+    onToggleFavorite(colle.id, newValue);
+  };
+
+  const subjectColor = getSubjectColor(colle.subject.name);
+  const subjectEmoji = getSubjectEmoji(colle.subject.name);
+
+  return (
+    <Link to={`/colles/${colle.id}`} onClick={handleCardClick}>
+      <Card
+        id={`colle-${colle.id}`}
+        className="h-full cursor-pointer hover:shadow-md transition-shadow border-primary"
+      >
+        <CardHeader className="pb-0 pt-3 px-4 flex flex-row items-center justify-between">
+          <div>
+            <div className="font-medium">{formatDate(colle.date)}</div>
+            <div className="font-normal text-sm text-muted-foreground">
+              {formatTime(colle.date)}
+            </div>
+          </div>
+          {colle.grade && (
+            <div className="flex items-center gap-2 h-full mb-3">
+              <Button
+                variant="ghost"
+                size="icon"
+                className={`h-8 w-8 ${
+                  isFavorite ? "text-yellow-500" : "text-muted-foreground"
+                }`}
+                onClick={handleToggleFavorite}
+              >
+                <Star
+                  className={`h-5 w-5 ${isFavorite ? "fill-yellow-500" : ""}`}
+                />
+                <span className="sr-only">Ajouter aux favoris</span>
+              </Button>
+              <div
+                className={`px-2 py-1 rounded-md text-sm font-medium ${subjectColor}`}
+              >
+                {formatGrade(colle.grade)}/20
+              </div>
+            </div>
+          )}
+        </CardHeader>
+
+        <CardContent className="pb-0 pt-0 px-4" onClick={handleCardClick}>
+          <div className="flex items-center justify-between">
+            <div className="space-y-1">
+              <div className="flex items-center gap-2">
+                <User className="h-4 w-4 text-muted-foreground" />
+                <span className="font-medium">{colle.student.fullName}</span>
+              </div>
+
+              <div className="flex items-center gap-2">
+                <UserCheck className="h-4 w-4 text-muted-foreground" />
+                <span>{colle.examiner.name}</span>
+              </div>
+
+              {colle.room && (
+                <div className="flex items-center gap-2">
+                  <MapPinHouse className="h-4 w-4 text-muted-foreground" />
+                  <span>{colle.room.name}</span>
+                </div>
+              )}
+            </div>
+          </div>
+        </CardContent>
+
+        <CardFooter className="pt-1 pb-3 px-4 flex flex-col items-start">
+          <div className="w-full flex justify-between items-center">
+            <div className="flex items-center gap-1">
+              <Badge className={subjectColor}>
+                {colle.subject.name + " " + subjectEmoji}
+              </Badge>
+              {isFavorite && (
+                <Badge variant="secondary">
+                  <Star className="h-3 w-3 fill-yellow-500 text-yellow-500 mr-1" />
+                  Favori
+                </Badge>
+              )}
+            </div>
+            {/* TODO: Attachments */}
+            {/* {colle.attachmentsCount > 0 && (
+              <div className="flex items-center gap-1 text-muted-foreground">
+                <Paperclip className="h-3.5 w-3.5" />
+                <span className="text-xs">{colle.attachmentsCount}</span>
+              </div>
+            )} */}
+          </div>
+        </CardFooter>
+      </Card>
+    </Link>
+  );
+}

app/components/home/date-picker.tsx

@@ -0,0 +1,69 @@
+import { DateTime } from "luxon";
+import { CalendarIcon } from "lucide-react";
+import { fr } from "date-fns/locale";
+import { Calendar } from "~/components/ui/calendar";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "~/components/ui/popover";
+import { cn } from "~/lib/utils";
+
+export default function DatePickerWithRange({
+  className,
+  startDate,
+  setStartDate,
+}: {
+  className?: string;
+  startDate: DateTime;
+  setStartDate: (date: DateTime) => void;
+}) {
+  const endDate = startDate.endOf("week");
+
+  function handleDateSelect(selectedDate?: Date) {
+    if (selectedDate) {
+      setStartDate(DateTime.fromJSDate(selectedDate));
+    }
+  }
+
+  return (
+    <div className={cn("grid gap-2 w-full", className)}>
+      <Popover>
+        <PopoverTrigger asChild>
+          <button
+            id="date"
+            className={
+              "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive h-9 px-4 py-2 has-[>svg]:px-3 border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 " +
+              cn(
+                "w-full justify-start text-left font-normal",
+                !startDate && "text-muted-foreground"
+              )
+            }
+          >
+            <CalendarIcon className="mr-2 h-4 w-4" />
+            Du {formatDate(startDate)} au {formatDate(endDate, true)}
+          </button>
+        </PopoverTrigger>
+        <PopoverContent className="w-auto p-0" align="start">
+          <Calendar
+            mode="single"
+            selected={startDate.toJSDate()}
+            defaultMonth={startDate.startOf("month").toJSDate()}
+            onSelect={handleDateSelect}
+            weekStartsOn={1}
+            locale={fr}
+            className="rounded-md border shadow-sm"
+            captionLayout="dropdown"
+          />
+        </PopoverContent>
+      </Popover>
+    </div>
+  );
+}
+
+const formatDate = (date: DateTime, includeYear = false) => {
+  const localDate = date.setLocale("fr");
+  return includeYear
+    ? localDate.toFormat("dd MMM yyyy")
+    : localDate.toFormat("dd MMM");
+};

app/components/home/index.tsx

@@ -0,0 +1,352 @@
+import { DateTime } from "luxon";
+import { useState, useEffect } from "react";
+import { Button } from "~/components/ui/button";
+import {
+  ChevronLeft,
+  ChevronRight,
+  Star,
+  Filter,
+  X,
+  Users,
+  User,
+  ArrowUpDown,
+} from "lucide-react";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "~/components/ui/select";
+import { Label } from "~/components/ui/label";
+import { Tabs, TabsList, TabsTrigger } from "~/components/ui/tabs";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "~/components/ui/collapsible";
+import DatePickerWithRange from "~/components/home/date-picker";
+import BottomNavigation from "~/components/home/bottom-nav";
+import Error from "~/components/error";
+import { useSearchParams } from "react-router";
+import { useColles } from "~/lib/api";
+import TabContent from "~/components/home/tab-content";
+
+export default function Home() {
+  // Handle query parameters
+  const [query, setQuery] = useSearchParams();
+  const updateQuery = (key: string, value: string) => {
+    if (query.get(key) !== value) {
+      setQuery((prev) => {
+        const newQuery = new URLSearchParams(prev);
+        newQuery.set(key, value);
+        return newQuery;
+      });
+    }
+  };
+
+  // Tabs
+  const activeTab = query.get("view") || "you";
+  const setActiveTab = (tab: string) => updateQuery("view", tab);
+
+  // Date
+  const rawStartDate = query.get("start");
+  const startDate = rawStartDate
+    ? DateTime.fromISO(rawStartDate, { zone: "local" })
+    : DateTime.now().startOf("week");
+
+  const setStartDate = (date: DateTime) =>
+    updateQuery("start", date.startOf("week").toISODate()!);
+
+  const handlePreviousWeek = () => {
+    const previousWeek = startDate.minus({ weeks: 1 });
+    setStartDate(previousWeek);
+  };
+
+  const handleNextWeek = () => {
+    const nextWeek = startDate.plus({ weeks: 1 });
+    setStartDate(nextWeek);
+  };
+
+  // Fetch colles from API
+  const { studentColles, classColles, favoriteColles, error, isLoading } =
+    useColles(startDate);
+  console.log("Colles loaded:", {
+    studentColles,
+    classColles,
+    favoriteColles,
+    error,
+    isLoading,
+  });
+
+  // TODO: FAVORITES
+  const useToggleStar = (auth: any) => {};
+  // TODO: FILTERS
+  const getSessionFilter = (key: string) => {
+    const filter = sessionStorage.getItem(key);
+    if (filter) {
+      return filter;
+    }
+    return "all";
+  };
+  const [subjectFilter, setSubjectFilter] = useState<string>(
+    getSessionFilter("subject")
+  );
+  const [examinerFilter, setExaminerFilter] = useState<string>(
+    getSessionFilter("examiner")
+  );
+  // const [studentFilter, setStudentFilter] = useState<string>("all")
+  const [isFilterOpen, setIsFilterOpen] = useState(
+    getSessionFilter("subject") !== "all" ||
+      getSessionFilter("examiner") !== "all"
+  );
+  useEffect(() => {
+    sessionStorage.setItem("subject", subjectFilter);
+    sessionStorage.setItem("examiner", examinerFilter);
+    // sessionStorage.setItem('student', studentFilter)
+  }, [subjectFilter, examinerFilter]);
+
+  // Restore scroll position
+  // TODO: Test and check if needed!!
+  // // SCROLL
+  // const setScrollPosition = (colleId: number) => {
+  //   sessionStorage.setItem("colles_position", colleId.toString());
+  // };
+  // const restoreScrollPosition = () => {
+  //   const position = sessionStorage.getItem("colles_position");
+  //   if (position) {
+  //     const element = document.getElementById(`colle-${position}`);
+  //     if (element) {
+  //       element.scrollIntoView({ behavior: "smooth", block: "center" });
+  //       sessionStorage.removeItem("colles_position");
+  //     }
+  //   }
+  // };
+  // const location = useLocation();
+  // useEffect(() => {
+  //   setTimeout(restoreScrollPosition, 500);
+  // }, [location]);
+
+  // Error handling (after all hooks)
+  if (error)
+    return (
+      <Error
+        title="Impossible de charger les colles"
+        message={error?.toString()}
+        code={500}
+        description="Une erreur s'est produite lors du chargement de la liste des colles."
+      />
+    );
+
+  return (
+    <div className="space-y-6 pb-20 md:pb-0">
+      {/* Week Navigation */}
+      <div className="mb-4">
+        <div className="flex flex-row items-center justify-between gap-4">
+          <div className="flex-1">
+            <DatePickerWithRange
+              startDate={startDate}
+              setStartDate={setStartDate}
+            />
+          </div>
+          <div className="flex items-center space-x-2">
+            <Button variant="outline" size="sm" onClick={handlePreviousWeek}>
+              <ChevronLeft className="h-4 w-4" />
+            </Button>
+            <Button variant="outline" size="sm" onClick={handleNextWeek}>
+              <ChevronRight className="h-4 w-4" />
+            </Button>
+          </div>
+        </div>
+      </div>
+
+      <Tabs
+        defaultValue="all"
+        value={activeTab}
+        onValueChange={setActiveTab}
+        className="hidden md:block"
+      >
+        <div className="mb-4">
+          <TabsList className="w-full">
+            <TabsTrigger
+              value="you"
+              className="flex-1 flex items-center justify-center gap-1"
+            >
+              <User className="h-4 w-4" />
+              Vos colles ({studentColles.length})
+            </TabsTrigger>
+            <TabsTrigger
+              value="favorites"
+              className="flex-1 flex items-center justify-center gap-1"
+            >
+              <Star className="h-4 w-4" />
+              Vos favoris ({0 /* TODO: stars.length */})
+            </TabsTrigger>
+            <TabsTrigger
+              value="class"
+              className="flex-1 flex items-center justify-center gap-1"
+            >
+              <Users className="h-4 w-4" />
+              Votre classe ({classColles.length})
+            </TabsTrigger>
+          </TabsList>
+        </div>
+      </Tabs>
+
+      {/* TODO: Filter component */}
+      <Collapsible open={isFilterOpen} onOpenChange={setIsFilterOpen}>
+        <div className="flex justify-between">
+          <div className="flex gap-2">
+            {activeTab === "all" && (
+              <>
+                <Button
+                  variant="outline"
+                  size="sm"
+                  // TODO: Implement sorting
+                  onClick={() => {}}
+                >
+                  <ArrowUpDown className="h-4 w-4" />
+                </Button>
+                <div className="flex mb-4">
+                  <CollapsibleTrigger asChild>
+                    <Button variant="outline" size="sm">
+                      {isFilterOpen ? (
+                        <>
+                          <X className="h-4 w-4 mr-2" />
+                          Fermer
+                        </>
+                      ) : (
+                        <>
+                          <Filter className="h-4 w-4 mr-2" />
+                          Recherche
+                        </>
+                      )}
+                    </Button>
+                  </CollapsibleTrigger>
+                </div>
+              </>
+            )}
+          </div>
+          {/* TODO: DEBUG */}
+          {/* {activeTab === "all" &&
+            (getWeekStart().getTime() != startDate.getTime() ? (
+              <Button variant="outline" size="sm" onClick={resetWeek}>
+                <CalendarArrowUp className="h-4 w-4 mr-2" />
+                Cette semaine
+              </Button>
+            ) : (
+              <Button variant="outline" size="sm" onClick={goPastYear}>
+                <CalendarArrowDown className="h-4 w-4 mr-2" />
+                Colles des spés
+              </Button>
+            ))} */}
+        </div>
+
+        <CollapsibleContent className="space-y-4">
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+            <div className="space-y-2">
+              <Label htmlFor="subject-filter">Filtrer par matière</Label>
+              <Select value={subjectFilter} onValueChange={setSubjectFilter}>
+                <SelectTrigger id="subject-filter">
+                  <SelectValue placeholder="Toutes les matières" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="all">Toutes les matières</SelectItem>
+                  {/* TODO: */}
+                  {/* {uniqueTopics.map((subject) => (
+                    <SelectItem key={subject} value={subject}>
+                      {subject}
+                    </SelectItem>
+                  ))} */}
+                </SelectContent>
+              </Select>
+            </div>
+
+            <div className="space-y-2">
+              <Label htmlFor="examiner-filter">Filtrer par colleur</Label>
+              <Select value={examinerFilter} onValueChange={setExaminerFilter}>
+                <SelectTrigger id="examiner-filter">
+                  <SelectValue placeholder="Tous les colleurs" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="all">Tous les colleurs</SelectItem>
+                  {/* TODO: */}
+                  {/* {uniqueExaminers.map((examiner) => (
+                    <SelectItem key={examiner} value={examiner}>
+                      {examiner}
+                    </SelectItem>
+                  ))} */}
+                </SelectContent>
+              </Select>
+            </div>
+
+            {/* <div className="space-y-2">
+                <Label htmlFor="student-filter">Filtrer par élève</Label>
+                <Select value={studentFilter} onValueChange={setStudentFilter}>
+                  <SelectTrigger id="student-filter">
+                    <SelectValue placeholder="Tous les élèves" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="all">Tous les élèves</SelectItem>
+                    {uniqueStudents.map((student) => (
+                      <SelectItem key={student} value={student}>
+                        {student}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </div> */}
+          </div>
+
+          <div className="flex justify-end">
+            <Button variant="outline" size="sm">
+              {/* //TODO: onClick={resetFilters} */}
+              Réinitialiser les filtres
+            </Button>
+          </div>
+        </CollapsibleContent>
+      </Collapsible>
+
+      {/* Tab Content */}
+      <div>
+        {/* Your Colles Tab */}
+        {activeTab === "you" && (
+          <TabContent
+            tabTitle="Vos colles"
+            emptyCollesText="Vous n'avez pas encore de colle cette semaine."
+            isLoading={isLoading}
+            colles={studentColles}
+          />
+        )}
+
+        {/* Favorites Tab */}
+        {activeTab === "favorites" && (
+          <TabContent
+            tabTitle="Vos favoris"
+            emptyCollesText="Vous n'avez pas encore de colle favorite, cliquez sur l'étoile pour ajouter une colle à vos favoris."
+            isLoading={isLoading}
+            colles={favoriteColles}
+          />
+        )}
+      </div>
+
+      {/* Class Colles Tab */}
+      {activeTab === "class" && (
+        <TabContent
+          tabTitle="Les colles de la classe"
+          emptyCollesText="Aucune colle trouvée."
+          isLoading={isLoading}
+          colles={classColles}
+        />
+      )}
+
+      {/* Bottom Navigation for Mobile */}
+      <BottomNavigation
+        activeTab={activeTab}
+        onTabChange={setActiveTab}
+        // TODO: Implement favorite count
+        favoriteCount={0}
+      />
+    </div>
+  );
+}

app/components/home/skeleton-card.tsx

@@ -0,0 +1,55 @@
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardFooter,
+} from "~/components/ui/card";
+import { Skeleton } from "~/components/ui/skeleton";
+
+export default function ColleCardSkeleton() {
+  return (
+    <Card className="h-full border-primary">
+      <CardHeader className="pb-2 pt-4 px-4 flex flex-row items-center justify-between">
+        <div className="space-y-2">
+          <Skeleton className="h-5 w-24" />
+          <Skeleton className="h-4 w-16" />
+        </div>
+        <div className="flex items-center gap-2">
+          <Skeleton className="h-8 w-8 rounded-full" />
+          <Skeleton className="h-6 w-14 rounded-md" />
+        </div>
+      </CardHeader>
+      <CardContent className="pb-2 pt-0 px-4">
+        <div className="space-y-3">
+          <div className="flex items-center gap-2">
+            <Skeleton className="h-4 w-4 rounded-full" />
+            <Skeleton className="h-4 w-32" />
+          </div>
+
+          <div className="flex items-center gap-2">
+            <Skeleton className="h-4 w-4 rounded-full" />
+            <Skeleton className="h-4 w-28" />
+          </div>
+
+          <div className="flex items-center gap-2">
+            <Skeleton className="h-4 w-4 rounded-full" />
+            <Skeleton className="h-4 w-20" />
+          </div>
+        </div>
+      </CardContent>
+
+      <CardFooter className="pt-0 pb-3 px-4 flex flex-col items-start">
+        <div className="w-full mb-2">
+          <div className="flex items-center gap-1 mb-1">
+            <Skeleton className="h-3 w-3 rounded-full" />
+            <Skeleton className="h-3 w-24" />
+          </div>
+          <div className="flex flex-wrap gap-1">
+            <Skeleton className="h-5 w-24 rounded-full" />
+            <Skeleton className="h-5 w-20 rounded-full" />
+          </div>
+        </div>
+      </CardFooter>
+    </Card>
+  );
+}

app/components/home/tab-content.tsx

@@ -0,0 +1,104 @@
+import { DateTime } from "luxon";
+import type { Colle } from "~/lib/api";
+import { Badge } from "~/components/ui/badge";
+import ColleCard from "~/components/home/colle-card";
+import ColleCardSkeleton from "~/components/home/skeleton-card";
+
+type TabContentProps = {
+  tabTitle: string;
+  emptyCollesText: string;
+  isLoading: boolean;
+  colles: Colle[];
+};
+
+const WEEK_DAYS = [
+  "Lundi",
+  "Mardi",
+  "Mercredi",
+  "Jeudi",
+  "Vendredi",
+  "Samedi",
+  "Dimanche",
+];
+
+export default function TabContent({
+  tabTitle,
+  emptyCollesText,
+  isLoading,
+  colles,
+}: TabContentProps) {
+  const collesByDay: Record<string, Colle[]> = {};
+  colles.forEach((colle) => {
+    const date = DateTime.fromISO(colle.date);
+    const dayName = WEEK_DAYS[date.weekday - 1]; // Luxon weekday is 1-7 (Mon-Sun)
+    if (!collesByDay[dayName]) {
+      collesByDay[dayName] = [];
+    }
+    collesByDay[dayName].push(colle);
+  });
+
+  const days = WEEK_DAYS.filter(
+    (day) => collesByDay[day] && collesByDay[day].length > 0
+  );
+
+  return (
+    <>
+      <h2 className="text-2xl font-semibold mb-6">{tabTitle}</h2>
+      {isLoading ? (
+        <div className="space-y-8">
+          {WEEK_DAYS.slice(0, 2).map((day) => (
+            <div key={day} className="space-y-4">
+              <div className="flex items-center gap-2">
+                <h3 className="text-xl font-medium">{day}</h3>
+                <Badge variant="outline" className="text-sm">
+                  Chargement...
+                </Badge>
+              </div>
+              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+                {Array(3)
+                  .fill(0)
+                  .map((_, i) => (
+                    <ColleCardSkeleton key={i} />
+                  ))}
+              </div>
+            </div>
+          ))}
+        </div>
+      ) : colles.length === 0 ? (
+        <div className="text-center py-8 text-muted-foreground">
+          {emptyCollesText}
+        </div>
+      ) : (
+        <div className="space-y-8">
+          {days.map((day) => (
+            <div key={day} className="space-y-4">
+              <div className="flex items-center gap-2">
+                <h3 className="text-xl font-medium">{day}</h3>
+                <Badge variant="outline" className="text-sm">
+                  {collesByDay[day].length} colle
+                  {collesByDay[day].length !== 1 ? "s" : ""}
+                </Badge>
+              </div>
+              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+                {collesByDay[day].map((colle) => (
+                  <ColleCard
+                    key={colle.id}
+                    colle={colle}
+                    beforeClick={() => {}}
+                    onToggleFavorite={() => {}}
+                    isFavorite={false}
+                    // TODO: Implement scroll position handling
+                    // beforeClick={() => setScrollPosition(colle.id)}
+                    // TODO: Implement favorite toggle
+                    // onToggleFavorite={handleToggleFavorite}
+                    // isFavorite={isFavorite(colle)}
+                  />
+                ))}
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+    </>
+  );
+}

app/components/input-otp.tsx

@@ -22,20 +22,27 @@ export default function OtpInput({
     setIsVerifying(true);
     setOtpError(null);
     verifyOtp({ otpCode, email })
-      .then(() => {
+      .then((data) => {
         setIsVerifying(false);
-        // TODO: Check if new user ??
-        navigate("/success?email=" + encodeURIComponent(email), {
-          replace: true,
-        });
+        // Check if user is registered
+        if (data.token) {
+          navigate(`/register?email=${data.email}&token=${data.token}`, {
+            replace: true,
+          });
+        } else {
+          navigate("/", {
+            replace: true,
+          })
+        }
       })
-      .catch((error) =>
+      .catch((error) => {
         setOtpError(
           error instanceof Error
             ? error.message
             : "Code de vérification invalide"
         )
-      );
+        setIsVerifying(false)
+      });
   };
 
   return (

app/components/ui/avatar.tsx

@@ -0,0 +1,51 @@
+import * as React from "react"
+import * as AvatarPrimitive from "@radix-ui/react-avatar"
+
+import { cn } from "~/lib/utils"
+
+function Avatar({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Root>) {
+  return (
+    <AvatarPrimitive.Root
+      data-slot="avatar"
+      className={cn(
+        "relative flex size-8 shrink-0 overflow-hidden rounded-full",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AvatarImage({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Image>) {
+  return (
+    <AvatarPrimitive.Image
+      data-slot="avatar-image"
+      className={cn("aspect-square size-full", className)}
+      {...props}
+    />
+  )
+}
+
+function AvatarFallback({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {
+  return (
+    <AvatarPrimitive.Fallback
+      data-slot="avatar-fallback"
+      className={cn(
+        "bg-muted flex size-full items-center justify-center rounded-full",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Avatar, AvatarImage, AvatarFallback }

app/components/ui/badge.tsx

@@ -0,0 +1,46 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "~/lib/utils"
+
+const badgeVariants = cva(
+  "inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
+  {
+    variants: {
+      variant: {
+        default:
+          "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
+        secondary:
+          "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
+        destructive:
+          "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline:
+          "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function Badge({
+  className,
+  variant,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"span"> &
+  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot : "span"
+
+  return (
+    <Comp
+      data-slot="badge"
+      className={cn(badgeVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+export { Badge, badgeVariants }

app/components/ui/calendar.tsx

@@ -0,0 +1,211 @@
+import * as React from "react";
+import {
+  ChevronDownIcon,
+  ChevronLeftIcon,
+  ChevronRightIcon,
+} from "lucide-react";
+import { DayButton, DayPicker, getDefaultClassNames } from "react-day-picker";
+
+import { cn } from "~/lib/utils";
+import { Button, buttonVariants } from "~/components/ui/button";
+
+function Calendar({
+  className,
+  classNames,
+  showOutsideDays = true,
+  captionLayout = "label",
+  buttonVariant = "ghost",
+  formatters,
+  components,
+  ...props
+}: React.ComponentProps<typeof DayPicker> & {
+  buttonVariant?: React.ComponentProps<typeof Button>["variant"];
+}) {
+  const defaultClassNames = getDefaultClassNames();
+
+  return (
+    <DayPicker
+      showOutsideDays={showOutsideDays}
+      className={cn(
+        "bg-background group/calendar p-3 [--cell-size:--spacing(8)] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent",
+        String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`,
+        String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
+        className
+      )}
+      captionLayout={captionLayout}
+      formatters={{
+        formatMonthDropdown: (date) =>
+          date.toLocaleString("default", { month: "short" }),
+        ...formatters,
+      }}
+      classNames={{
+        root: cn("w-fit", defaultClassNames.root),
+        months: cn(
+          "flex gap-4 flex-col md:flex-row relative",
+          defaultClassNames.months
+        ),
+        month: cn("flex flex-col w-full gap-4", defaultClassNames.month),
+        nav: cn(
+          "flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between",
+          defaultClassNames.nav
+        ),
+        button_previous: cn(
+          buttonVariants({ variant: buttonVariant }),
+          "size-(--cell-size) aria-disabled:opacity-50 p-0 select-none",
+          defaultClassNames.button_previous
+        ),
+        button_next: cn(
+          buttonVariants({ variant: buttonVariant }),
+          "size-(--cell-size) aria-disabled:opacity-50 p-0 select-none",
+          defaultClassNames.button_next
+        ),
+        month_caption: cn(
+          "flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)",
+          defaultClassNames.month_caption
+        ),
+        dropdowns: cn(
+          "w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5",
+          defaultClassNames.dropdowns
+        ),
+        dropdown_root: cn(
+          "relative has-focus:border-ring border border-input shadow-xs has-focus:ring-ring/50 has-focus:ring-[3px] rounded-md",
+          defaultClassNames.dropdown_root
+        ),
+        dropdown: cn(
+          "absolute bg-popover inset-0 opacity-0",
+          defaultClassNames.dropdown
+        ),
+        caption_label: cn(
+          "select-none font-medium",
+          captionLayout === "label"
+            ? "text-sm"
+            : "rounded-md pl-2 pr-1 flex items-center gap-1 text-sm h-8 [&>svg]:text-muted-foreground [&>svg]:size-3.5",
+          defaultClassNames.caption_label
+        ),
+        table: "w-full border-collapse",
+        weekdays: cn("flex", defaultClassNames.weekdays),
+        weekday: cn(
+          "text-muted-foreground rounded-md flex-1 font-normal text-[0.8rem] select-none",
+          defaultClassNames.weekday
+        ),
+        week: cn("flex w-full mt-2", defaultClassNames.week),
+        week_number_header: cn(
+          "select-none w-(--cell-size)",
+          defaultClassNames.week_number_header
+        ),
+        week_number: cn(
+          "text-[0.8rem] select-none text-muted-foreground",
+          defaultClassNames.week_number
+        ),
+        day: cn(
+          "relative w-full h-full p-0 text-center [&:first-child[data-selected=true]_button]:rounded-l-md [&:last-child[data-selected=true]_button]:rounded-r-md group/day aspect-square select-none",
+          defaultClassNames.day
+        ),
+        range_start: cn(
+          "rounded-l-md bg-accent",
+          defaultClassNames.range_start
+        ),
+        range_middle: cn("rounded-none", defaultClassNames.range_middle),
+        range_end: cn("rounded-r-md bg-accent", defaultClassNames.range_end),
+        today: cn(
+          "bg-accent text-accent-foreground rounded-md data-[selected=true]:rounded-none",
+          defaultClassNames.today
+        ),
+        outside: cn(
+          "text-muted-foreground aria-selected:text-muted-foreground",
+          defaultClassNames.outside
+        ),
+        disabled: cn(
+          "text-muted-foreground opacity-50",
+          defaultClassNames.disabled
+        ),
+        hidden: cn("invisible", defaultClassNames.hidden),
+        ...classNames,
+      }}
+      components={{
+        Root: ({ className, rootRef, ...props }) => {
+          return (
+            <div
+              data-slot="calendar"
+              ref={rootRef}
+              className={cn(className)}
+              {...props}
+            />
+          );
+        },
+        Chevron: ({ className, orientation, ...props }) => {
+          if (orientation === "left") {
+            return (
+              <ChevronLeftIcon className={cn("size-4", className)} {...props} />
+            );
+          }
+
+          if (orientation === "right") {
+            return (
+              <ChevronRightIcon
+                className={cn("size-4", className)}
+                {...props}
+              />
+            );
+          }
+
+          return (
+            <ChevronDownIcon className={cn("size-4", className)} {...props} />
+          );
+        },
+        DayButton: CalendarDayButton,
+        WeekNumber: ({ children, ...props }) => {
+          return (
+            <td {...props}>
+              <div className="flex size-(--cell-size) items-center justify-center text-center">
+                {children}
+              </div>
+            </td>
+          );
+        },
+        ...components,
+      }}
+      {...props}
+    />
+  );
+}
+
+function CalendarDayButton({
+  className,
+  day,
+  modifiers,
+  ...props
+}: React.ComponentProps<typeof DayButton>) {
+  const defaultClassNames = getDefaultClassNames();
+
+  const ref = React.useRef<HTMLButtonElement>(null);
+  React.useEffect(() => {
+    if (modifiers.focused) ref.current?.focus();
+  }, [modifiers.focused]);
+
+  return (
+    <Button
+      ref={ref}
+      variant="ghost"
+      size="icon"
+      data-day={day.date.toLocaleDateString()}
+      data-selected-single={
+        modifiers.selected &&
+        !modifiers.range_start &&
+        !modifiers.range_end &&
+        !modifiers.range_middle
+      }
+      data-range-start={modifiers.range_start}
+      data-range-end={modifiers.range_end}
+      data-range-middle={modifiers.range_middle}
+      className={cn(
+        "data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 dark:hover:text-accent-foreground flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] data-[range-end=true]:rounded-md data-[range-end=true]:rounded-r-md data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-md data-[range-start=true]:rounded-l-md [&>span]:text-xs [&>span]:opacity-70",
+        defaultClassNames.day,
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Calendar, CalendarDayButton };

app/components/ui/collapsible.tsx

@@ -0,0 +1,31 @@
+import * as CollapsiblePrimitive from "@radix-ui/react-collapsible"
+
+function Collapsible({
+  ...props
+}: React.ComponentProps<typeof CollapsiblePrimitive.Root>) {
+  return <CollapsiblePrimitive.Root data-slot="collapsible" {...props} />
+}
+
+function CollapsibleTrigger({
+  ...props
+}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleTrigger>) {
+  return (
+    <CollapsiblePrimitive.CollapsibleTrigger
+      data-slot="collapsible-trigger"
+      {...props}
+    />
+  )
+}
+
+function CollapsibleContent({
+  ...props
+}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleContent>) {
+  return (
+    <CollapsiblePrimitive.CollapsibleContent
+      data-slot="collapsible-content"
+      {...props}
+    />
+  )
+}
+
+export { Collapsible, CollapsibleTrigger, CollapsibleContent }

app/components/ui/dropdown-menu.tsx

@@ -0,0 +1,255 @@
+import * as React from "react"
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
+import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react"
+
+import { cn } from "~/lib/utils"
+
+function DropdownMenu({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
+  return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />
+}
+
+function DropdownMenuPortal({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {
+  return (
+    <DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />
+  )
+}
+
+function DropdownMenuTrigger({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {
+  return (
+    <DropdownMenuPrimitive.Trigger
+      data-slot="dropdown-menu-trigger"
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuContent({
+  className,
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {
+  return (
+    <DropdownMenuPrimitive.Portal>
+      <DropdownMenuPrimitive.Content
+        data-slot="dropdown-menu-content"
+        sideOffset={sideOffset}
+        className={cn(
+          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
+          className
+        )}
+        {...props}
+      />
+    </DropdownMenuPrimitive.Portal>
+  )
+}
+
+function DropdownMenuGroup({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {
+  return (
+    <DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
+  )
+}
+
+function DropdownMenuItem({
+  className,
+  inset,
+  variant = "default",
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
+  inset?: boolean
+  variant?: "default" | "destructive"
+}) {
+  return (
+    <DropdownMenuPrimitive.Item
+      data-slot="dropdown-menu-item"
+      data-inset={inset}
+      data-variant={variant}
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuCheckboxItem({
+  className,
+  children,
+  checked,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {
+  return (
+    <DropdownMenuPrimitive.CheckboxItem
+      data-slot="dropdown-menu-checkbox-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      checked={checked}
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+        <DropdownMenuPrimitive.ItemIndicator>
+          <CheckIcon className="size-4" />
+        </DropdownMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </DropdownMenuPrimitive.CheckboxItem>
+  )
+}
+
+function DropdownMenuRadioGroup({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {
+  return (
+    <DropdownMenuPrimitive.RadioGroup
+      data-slot="dropdown-menu-radio-group"
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuRadioItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) {
+  return (
+    <DropdownMenuPrimitive.RadioItem
+      data-slot="dropdown-menu-radio-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+        <DropdownMenuPrimitive.ItemIndicator>
+          <CircleIcon className="size-2 fill-current" />
+        </DropdownMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </DropdownMenuPrimitive.RadioItem>
+  )
+}
+
+function DropdownMenuLabel({
+  className,
+  inset,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
+  inset?: boolean
+}) {
+  return (
+    <DropdownMenuPrimitive.Label
+      data-slot="dropdown-menu-label"
+      data-inset={inset}
+      className={cn(
+        "px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {
+  return (
+    <DropdownMenuPrimitive.Separator
+      data-slot="dropdown-menu-separator"
+      className={cn("bg-border -mx-1 my-1 h-px", className)}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuShortcut({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="dropdown-menu-shortcut"
+      className={cn(
+        "text-muted-foreground ml-auto text-xs tracking-widest",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuSub({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {
+  return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />
+}
+
+function DropdownMenuSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
+  inset?: boolean
+}) {
+  return (
+    <DropdownMenuPrimitive.SubTrigger
+      data-slot="dropdown-menu-sub-trigger"
+      data-inset={inset}
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronRightIcon className="ml-auto size-4" />
+    </DropdownMenuPrimitive.SubTrigger>
+  )
+}
+
+function DropdownMenuSubContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {
+  return (
+    <DropdownMenuPrimitive.SubContent
+      data-slot="dropdown-menu-sub-content"
+      className={cn(
+        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  DropdownMenu,
+  DropdownMenuPortal,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuLabel,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubTrigger,
+  DropdownMenuSubContent,
+}

app/components/ui/select.tsx

@@ -0,0 +1,183 @@
+import * as React from "react"
+import * as SelectPrimitive from "@radix-ui/react-select"
+import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react"
+
+import { cn } from "~/lib/utils"
+
+function Select({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Root>) {
+  return <SelectPrimitive.Root data-slot="select" {...props} />
+}
+
+function SelectGroup({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Group>) {
+  return <SelectPrimitive.Group data-slot="select-group" {...props} />
+}
+
+function SelectValue({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Value>) {
+  return <SelectPrimitive.Value data-slot="select-value" {...props} />
+}
+
+function SelectTrigger({
+  className,
+  size = "default",
+  children,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
+  size?: "sm" | "default"
+}) {
+  return (
+    <SelectPrimitive.Trigger
+      data-slot="select-trigger"
+      data-size={size}
+      className={cn(
+        "border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <SelectPrimitive.Icon asChild>
+        <ChevronDownIcon className="size-4 opacity-50" />
+      </SelectPrimitive.Icon>
+    </SelectPrimitive.Trigger>
+  )
+}
+
+function SelectContent({
+  className,
+  children,
+  position = "popper",
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Content>) {
+  return (
+    <SelectPrimitive.Portal>
+      <SelectPrimitive.Content
+        data-slot="select-content"
+        className={cn(
+          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md",
+          position === "popper" &&
+            "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+          className
+        )}
+        position={position}
+        {...props}
+      >
+        <SelectScrollUpButton />
+        <SelectPrimitive.Viewport
+          className={cn(
+            "p-1",
+            position === "popper" &&
+              "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1"
+          )}
+        >
+          {children}
+        </SelectPrimitive.Viewport>
+        <SelectScrollDownButton />
+      </SelectPrimitive.Content>
+    </SelectPrimitive.Portal>
+  )
+}
+
+function SelectLabel({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Label>) {
+  return (
+    <SelectPrimitive.Label
+      data-slot="select-label"
+      className={cn("text-muted-foreground px-2 py-1.5 text-xs", className)}
+      {...props}
+    />
+  )
+}
+
+function SelectItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Item>) {
+  return (
+    <SelectPrimitive.Item
+      data-slot="select-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
+        className
+      )}
+      {...props}
+    >
+      <span className="absolute right-2 flex size-3.5 items-center justify-center">
+        <SelectPrimitive.ItemIndicator>
+          <CheckIcon className="size-4" />
+        </SelectPrimitive.ItemIndicator>
+      </span>
+      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+    </SelectPrimitive.Item>
+  )
+}
+
+function SelectSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Separator>) {
+  return (
+    <SelectPrimitive.Separator
+      data-slot="select-separator"
+      className={cn("bg-border pointer-events-none -mx-1 my-1 h-px", className)}
+      {...props}
+    />
+  )
+}
+
+function SelectScrollUpButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {
+  return (
+    <SelectPrimitive.ScrollUpButton
+      data-slot="select-scroll-up-button"
+      className={cn(
+        "flex cursor-default items-center justify-center py-1",
+        className
+      )}
+      {...props}
+    >
+      <ChevronUpIcon className="size-4" />
+    </SelectPrimitive.ScrollUpButton>
+  )
+}
+
+function SelectScrollDownButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {
+  return (
+    <SelectPrimitive.ScrollDownButton
+      data-slot="select-scroll-down-button"
+      className={cn(
+        "flex cursor-default items-center justify-center py-1",
+        className
+      )}
+      {...props}
+    >
+      <ChevronDownIcon className="size-4" />
+    </SelectPrimitive.ScrollDownButton>
+  )
+}
+
+export {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectScrollDownButton,
+  SelectScrollUpButton,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+}

app/components/ui/separator.tsx

@@ -0,0 +1,26 @@
+import * as React from "react";
+import * as SeparatorPrimitive from "@radix-ui/react-separator";
+
+import { cn } from "~/lib/utils";
+
+function Separator({
+  className,
+  orientation = "horizontal",
+  decorative = true,
+  ...props
+}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
+  return (
+    <SeparatorPrimitive.Root
+      data-slot="separator"
+      decorative={decorative}
+      orientation={orientation}
+      className={cn(
+        "bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Separator };

app/components/ui/skeleton.tsx

@@ -0,0 +1,13 @@
+import { cn } from "~/lib/utils"
+
+function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="skeleton"
+      className={cn("bg-accent animate-pulse rounded-md", className)}
+      {...props}
+    />
+  )
+}
+
+export { Skeleton }

app/components/ui/sonner.tsx

@@ -0,0 +1,23 @@
+import { Toaster as Sonner, type ToasterProps } from "sonner";
+
+const Toaster = ({ ...props }: ToasterProps) => {
+  // TODO: Use theme hook
+  const { theme = "system" } = {};
+
+  return (
+    <Sonner
+      theme={theme as ToasterProps["theme"]}
+      className="toaster group"
+      style={
+        {
+          "--normal-bg": "var(--popover)",
+          "--normal-text": "var(--popover-foreground)",
+          "--normal-border": "var(--border)",
+        } as React.CSSProperties
+      }
+      {...props}
+    />
+  );
+};
+
+export default Toaster;

app/components/ui/tabs.tsx

@@ -0,0 +1,64 @@
+import * as React from "react"
+import * as TabsPrimitive from "@radix-ui/react-tabs"
+
+import { cn } from "~/lib/utils"
+
+function Tabs({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Root>) {
+  return (
+    <TabsPrimitive.Root
+      data-slot="tabs"
+      className={cn("flex flex-col gap-2", className)}
+      {...props}
+    />
+  )
+}
+
+function TabsList({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.List>) {
+  return (
+    <TabsPrimitive.List
+      data-slot="tabs-list"
+      className={cn(
+        "bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TabsTrigger({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Trigger>) {
+  return (
+    <TabsPrimitive.Trigger
+      data-slot="tabs-trigger"
+      className={cn(
+        "data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TabsContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Content>) {
+  return (
+    <TabsPrimitive.Content
+      data-slot="tabs-content"
+      className={cn("flex-1 outline-none", className)}
+      {...props}
+    />
+  )
+}
+
+export { Tabs, TabsList, TabsTrigger, TabsContent }

app/components/user-dropdown.tsx

@@ -0,0 +1,125 @@
+import { useState } from "react";
+import { Avatar, AvatarFallback } from "~/components/ui/avatar";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "~/components/ui/dropdown-menu";
+import {
+  ChevronDown,
+  LineChartIcon,
+  LogOut,
+  Moon,
+  Settings,
+  Sun,
+} from "lucide-react";
+// TODO: THEME
+// import { useTheme } from "~/components/ui/theme-provider";
+import { useNavigate } from "react-router";
+import { logout, type User } from "~/lib/api";
+
+export default function UserDropdown({ user }: { user: User }) {
+  // TODO: const { theme, setTheme } = useTheme();
+  const [theme, setTheme] = useState("light");
+  const [open, setOpen] = useState(false);
+  const navigate = useNavigate();
+
+  const handleLogout = async () => {
+    try {
+      await logout();
+      navigate("/login", { replace: true });
+    } catch (error) {
+      console.error("Logout failed:", error);
+    }
+  }
+
+  return (
+    <DropdownMenu open={open} onOpenChange={setOpen}>
+      <DropdownMenuTrigger asChild>
+        <button
+          className={
+            "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive h-9 px-4 py-2 has-[>svg]:px-3 hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50 flex items-center gap-2 px-2"
+          }
+        >
+          <Avatar className="h-10 w-10">
+            <AvatarFallback>{getAvatar(user.fullName)}</AvatarFallback>
+          </Avatar>
+          <span className="hidden md:inline-block font-medium">
+            {user.fullName}
+          </span>
+          <ChevronDown className="h-4 w-4 text-muted-foreground" />
+        </button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end" className="w-56">
+        <DropdownMenuLabel>
+          <div className="flex flex-col space-y-1">
+            <p className="text-sm font-medium leading-none">
+              {user.fullName}
+            </p>
+            <p className="text-xs leading-none text-muted-foreground">
+              {user.className}
+            </p>
+          </div>
+        </DropdownMenuLabel>
+        <DropdownMenuSeparator />
+        <DropdownMenuGroup>
+          <DropdownMenuItem
+            onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
+          >
+            {theme === "dark" ? (
+              <>
+                <Sun className="mr-2 h-4 w-4" />
+                <span>Mode clair</span>
+              </>
+            ) : (
+              <>
+                <Moon className="mr-2 h-4 w-4" />
+                <span>Mode sombre</span>
+              </>
+            )}
+          </DropdownMenuItem>
+          <DropdownMenuItem
+            onClick={(e) => {
+              e.stopPropagation();
+              e.preventDefault();
+              navigate("/settings");
+            }}>
+            <Settings className="mr-2 h-4 w-4" />
+            <span>
+              Paramètres
+            </span>
+          </DropdownMenuItem>
+          <DropdownMenuItem onClick={(e) => {
+            e.stopPropagation();
+            e.preventDefault();
+            navigate("/progress");
+          }}>
+            <LineChartIcon className="mr-2 h-4 w-4" />
+            <span
+
+            >
+              Progression
+            </span>
+          </DropdownMenuItem>
+        </DropdownMenuGroup>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem onClick={handleLogout}>
+          <LogOut className="mr-2 h-4 w-4" />
+          <span >Se déconnecter</span>
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
+
+const getAvatar = (name: string) => {
+  return name
+    .split(" ")
+    .map((word) => word.charAt(0))
+    .join("")
+    .toUpperCase();
+};

app/layout.tsx

@@ -12,7 +12,7 @@ import { Link } from "react-router";
 
 const SUPPORT_MAIL = "mailto:" + import.meta.env.VITE_SUPPORT_EMAIL;
 
-export default function AuthLayout({
+export function AuthLayout({
   children,
   title = "Connexion",
   description = "Entrez votre email pour recevoir un lien de connexion ou un code de vérification.",
@@ -48,3 +48,21 @@ export default function AuthLayout({
     </main>
   );
 }
+
+export function MainLayout({
+  children,
+  page
+}: {
+  children: React.ReactNode;
+  page: React.ReactNode;
+}) {
+  return (
+    <main className="container mx-auto py-8 px-4">
+      <div className="flex justify-between items-center mb-6">
+        {children}
+      </div>
+
+      {page}
+    </main>
+  );
+}

app/lib/api.ts

@@ -1,6 +1,9 @@
+import { useQuery } from "@tanstack/react-query";
+import { DateTime, Duration } from "luxon";
+
 const BASE_URL = import.meta.env.VITE_API_URL;
 
-const makeRequest = async (
+const makePostRequest = async (
   url: string,
   body: object,
   error = "Une erreur est survenue",
@@ -10,8 +13,10 @@ const makeRequest = async (
     method,
     headers: {
       "Content-Type": "application/json",
+      Accept: "application/json",
     },
     body: JSON.stringify(body),
+    credentials: "include", // Include cookies for authentication
   });
 
   const data = await response.json();
@@ -19,8 +24,21 @@ const makeRequest = async (
   return data?.data || data;
 };
 
+// TODO: Use swr or react-query for caching and revalidation
+// TODO: Cache all to localStorage or IndexedDB for offline support
+const makeRequest = async (url: string, error = "Une erreur est survenue") => {
+  const response = await fetch(BASE_URL + url, { credentials: "include" });
+
+  const data = await response.json();
+  if (!response.ok) throw new Error(data.error || error);
+  return data?.data || data;
+};
+
+/**
+ * === AUTH API ===
+ */
 export const requestLogin = async (email: string, token: string) => {
-  return makeRequest(
+  return makePostRequest(
     "/auth/request",
     { email, token },
     "Échec de la demande de connexion"
@@ -34,17 +52,199 @@ export const verifyOtp = async ({
   otpCode: string;
   email: string;
 }) => {
-  return makeRequest(
+  return makePostRequest(
     "/auth/verify",
     { email, code: otpCode },
     "Code de vérification invalide"
   );
 };
 
-export const sendOtp = async (email: string) => {
-  return makeRequest(
-    "/auth/send-otp",
-    { email },
-    "Échec de l'envoi du code de vérification"
+export const getClasses = async () => {
+  try {
+    const res = await fetch("/classes.json");
+    return res.json();
+  } catch (error) {
+    console.error("Error fetching classes:", error);
+    return [];
+  }
+};
+
+export const registerUser = async (
+  firstName: string,
+  lastName: string,
+  className: string,
+  token: string
+) => {
+  return makePostRequest(
+    "/auth/register",
+    { firstName, lastName, className, token },
+    "Échec de l'inscription"
   );
 };
+
+
+/**
+ * === USER API ===
+ */
+const fetchUser = async () => {
+  return makeRequest(
+    "/users/@me",
+    "Échec de la récupération des informations utilisateur"
+  );
+};
+
+const defaultUser = {
+  id: 0,
+  firstName: "",
+  lastName: "",
+  fullName: "",
+  email: "",
+  className: "",
+};
+
+export type User = typeof defaultUser;
+
+export const useUser = () => {
+  const { data, ...props } = useQuery({
+    queryKey: ["user"],
+    queryFn: fetchUser,
+    staleTime: Duration.fromObject({
+      minutes: 5, // 5 minutes
+    }).toMillis(),
+    gcTime: Duration.fromObject({
+      days: 3, // 3 days
+    }).toMillis(),
+  });
+  return {
+    user: (data ? Object.assign(defaultUser, data) : defaultUser) as User,
+    ...props,
+  };
+};
+
+export const logout = async () => {
+  // TODO: POST
+  // TODO: Invalidate user query (cache)
+};
+
+/**
+ * === COLLES API ===
+ */
+export const getColles = async (startDate: DateTime) => {
+  return makeRequest(
+    `/colles?startDate=${startDate.toISODate()}`,
+    "Échec de la récupération des colles"
+  );
+};
+
+export interface Colle {
+  id: number;
+  date: string; // ISO date string
+  subject: {
+    id: number;
+    name: string;
+  };
+  examiner: {
+    id: number;
+    name: string;
+  };
+  room: {
+    id: number;
+    name: string;
+  };
+  student: User;
+  grade?: number; // Nullable grade
+  bjsecret?: string; // Optional field
+  bjid?: string; // Optional field
+  content?: string; // Optional field
+  comment?: string; // Optional field
+  attachments?: string[]; // Optional field, array of attachment URLs
+}
+
+interface CollePayload {
+  classColles: Colle[];
+  studentColles: Colle[];
+  favoriteColles: Colle[];
+}
+
+export const useColles = (startDate: DateTime) => {
+  // Check if the start date is the current week
+  // This is used to determine if the data is "actual" or not
+  const isActual = DateTime.now()
+    .startOf("week")
+    .equals(startDate.startOf("week"));
+
+  const options = isActual
+    ? {
+        refetchOnWindowFocus: true,
+        refetchOnReconnect: true,
+        staleTime: 0,
+        gcTime: 0,
+      }
+    : {
+        staleTime: Duration.fromObject({
+          minutes: 5, // 5 minutes
+        }).toMillis(),
+        gcTime: Duration.fromObject({
+          days: 3, // 3 days
+        }).toMillis(),
+      };
+
+  const { data, ...props } = useQuery({
+    queryKey: ["colles", startDate.toISODate()],
+    queryFn: () => getColles(startDate),
+    ...options,
+  });
+  const mergedData = Object.assign(
+    {
+      classColles: [],
+      studentColles: [],
+      favoriteColles: [],
+    },
+    data || {}
+  ) as CollePayload;
+
+  return {
+    ...mergedData,
+    ...props,
+  };
+};
+
+const fetchColle = async (id: number) => {
+  return makeRequest(`/colles/${id}`, "Échec de la récupération de la colle");
+};
+
+const defaultColle = {
+  id: 0,
+  date: "",
+  subject: {
+    id: 0,
+    name: "",
+  },
+  examiner: {
+    id: 0,
+    name: "",
+  },
+  room: {
+    id: 0,
+    name: "",
+  },
+  student: defaultUser,
+  attachments: [],
+};
+
+export const useColle = (id: number) => {
+  const { data, ...props } = useQuery({
+    queryKey: ["colle", id],
+    queryFn: () => fetchColle(id),
+    staleTime: Duration.fromObject({
+      seconds: 30, // 30 seconds
+    }).toMillis(),
+    gcTime: Duration.fromObject({
+      days: 3, // 3 days
+    }).toMillis(),
+  });
+  return {
+    colle: (data || defaultColle) as Colle,
+    ...props,
+  };
+};

app/lib/client.ts

@@ -0,0 +1,49 @@
+import { get, set, del } from "idb-keyval";
+import { QueryClient } from "@tanstack/react-query";
+import { persistQueryClient } from "@tanstack/react-query-persist-client";
+import { createAsyncStoragePersister } from "@tanstack/query-async-storage-persister";
+
+const CACHE_KEY = "khollise-cache"; // Key for IndexedDB storage
+
+// Check if we're in a browser environment with IndexedDB support
+const isIndexedDBAvailable = () => {
+  return (
+    typeof window !== "undefined" &&
+    typeof window.indexedDB !== "undefined" &&
+    window.indexedDB !== null
+  );
+};
+
+// Create QueryClient with persistence
+const createQueryClient = () => {
+  const queryClient = new QueryClient({
+    defaultOptions: {
+      queries: {
+        staleTime: 1000 * 60 * 5, // 5 minutes
+        gcTime: 1000 * 60 * 60 * 24, // 24 hours (formerly cacheTime)
+        refetchOnWindowFocus: false,
+        retry: 2,
+      },
+    },
+  });
+
+  // Only set up persistence if IndexedDB is available
+  if (isIndexedDBAvailable()) {
+    persistQueryClient({
+      queryClient,
+      persister: createAsyncStoragePersister({
+        storage: { getItem: get, setItem: set, removeItem: del },
+        key: CACHE_KEY,
+      }),
+      maxAge: 1000 * 60 * 60 * 24, // 24 hours
+      buster: "v1", // Change this to invalidate cache
+    });
+  } else {
+    console.warn("Cache persistence disabled - IndexedDB not available");
+  }
+
+  return queryClient;
+};
+
+const queryClient = createQueryClient();
+export default queryClient;

app/lib/latex.ts

@@ -0,0 +1,33 @@
+export function extractLatexImages(html: string) {
+  const imgRegex =
+    /<img[^>]+src="(https:\/\/latex\.codecogs\.com\/gif\.latex\?(=?.*?))"[^>]*>/g;
+  let parts = [];
+  let latexMatches: string[] = [];
+  let lastIndex = 0;
+
+  html.replace(imgRegex, (match, _, latex, index) => {
+    parts.push(html.slice(lastIndex, index)); // Add HTML before image
+    latexMatches.push(decodeURIComponent(latex)); // Extract and decode LaTeX
+    lastIndex = index + match.length;
+    return "";
+  });
+
+  parts.push(html.slice(lastIndex)); // Add remaining HTML after last image
+
+  return { parts, latexMatches };
+}
+
+export function renderLatex(html: string) {
+  const { parts, latexMatches } = extractLatexImages(html);
+  const outputHtml = parts
+    .map((part, i) => {
+      if (!latexMatches[i]) {
+        return part;
+      }
+      return `${part}$$${latexMatches[i]}$$`;
+    })
+    .join("");
+  // Remove all "\," from string
+  const regex = /\\,/g;
+  return outputHtml.replace(regex, " ");
+}

app/lib/utils.ts

@@ -1,10 +1,80 @@
 import { type ClassValue, clsx } from "clsx";
+import { DateTime } from "luxon";
+import type { NavigateFunction } from "react-router";
 import { twMerge } from "tailwind-merge";
 
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs));
 }
 
+/**
+ * === STRING UTILS ===
+ */
 export function capitalizeFirstLetter(str: string): string {
   return str.charAt(0).toUpperCase() + str.slice(1);
 }
+
+export function titleCase(str: string) {
+  return str.replace(
+    /\w\S*/g,
+    (text) => text.charAt(0).toUpperCase() + text.substring(1).toLowerCase()
+  );
+}
+
+/**
+ * === NAVIGATION UTILS ===
+ */
+// Force a reload of the page
+export function forceReload() {
+  window.location.reload();
+}
+
+export function goBack(navigate: NavigateFunction) {
+  let canGoBack = false;
+  // Check if there is a history stack to go back to
+  try {
+    canGoBack = window.history.length > 1;
+  } catch (e) {
+    canGoBack = false;
+  }
+  if (!canGoBack) {
+    return navigate("/");
+  } else {
+    return navigate(-1);
+  }
+}
+
+/**
+ * === COLLES UTILS ===
+ */
+export const formatDate = (date: string) => {
+  const dt = DateTime.fromISO(date).setLocale("fr");
+  const str = dt.toLocaleString({
+    weekday: "long",
+    day: "numeric",
+    month: "long",
+    year: "numeric",
+  });
+  return titleCase(str);
+};
+
+export const formatTime = (date: string) => {
+  const dt = DateTime.fromISO(date).setLocale("fr");
+  return dt.toLocaleString({
+    hour: "2-digit",
+    minute: "2-digit",
+  });
+};
+
+export const formatGrade = (grade?: number) => {
+  if (grade === undefined || grade === null || grade < 0 || grade > 20)
+    return "N/A";
+
+  const rounded = Math.round(grade * 10) / 10;
+  const str =
+    rounded % 1 === 0
+      ? rounded.toFixed(0) // no decimals if .0
+      : rounded.toFixed(1); // one decimal otherwise
+
+  return str.replace(".", ",").padStart(2, "0"); // pad with zero if needed
+};

app/root.tsx

@@ -9,6 +9,9 @@ import {
 
 import type { Route } from "./+types/root";
 import "./app.css";
+import { QueryClientProvider } from "@tanstack/react-query";
+import queryClient from "~/lib/client";
+import Toaster from "~/components/ui/sonner";
 
 export const links: Route.LinksFunction = () => [
   { rel: "preconnect", href: "https://fonts.googleapis.com" },
@@ -29,16 +32,28 @@ export function Layout({ children }: { children: React.ReactNode }) {
       <head>
         <meta charSet="utf-8" />
         {/* Favicon */}
-        <link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96" />
+        <link
+          rel="icon"
+          type="image/png"
+          href="/favicon-96x96.png"
+          sizes="96x96"
+        />
         <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
         <link rel="shortcut icon" href="/favicon.ico" />
-        <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
+        <link
+          rel="apple-touch-icon"
+          sizes="180x180"
+          href="/apple-touch-icon.png"
+        />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
         <Meta />
         <Links />
       </head>
       <body>
-        {children}
+        <QueryClientProvider client={queryClient}>
+          {children}
+        </QueryClientProvider>
+        <Toaster />
         <ScrollRestoration />
         <Scripts />
       </body>

app/routes.ts

@@ -1,7 +1,9 @@
 import { type RouteConfig, index, route } from "@react-router/dev/routes";
 
 export default [
-    index("routes/login.tsx"),
+    index("routes/home.tsx"),
+    route("/login", "routes/login.tsx"),
     route("/verify", "routes/verify.tsx"),
     route("/register", "routes/register.tsx"),
+    route("/colles/:colleId", "routes/colles.tsx"),
 ] satisfies RouteConfig;

app/routes/colles.tsx

@@ -0,0 +1,463 @@
+import "katex/dist/katex.min.css";
+import { DomUtils, parseDocument } from "htmlparser2";
+// TODO: API - remove trailing lines from HTML comment/content
+// TODO: Server side image extraction and latex rendering
+// TEMP SOLUTION
+import { renderLatex } from "~/lib/latex"; // Custom LaTeX rendering function
+// function removeTrailingLines(htmlString: string) {
+//   return htmlString.replace(/(<br\s*\/?>\s*)+$/gi, "").trim();
+// }
+
+import Latex from "react-latex-next";
+import { useState } from "react";
+import { Navigate, useNavigate, useParams } from "react-router";
+import { Button } from "~/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "~/components/ui/card";
+import {
+  ArrowLeft,
+  Clock,
+  User,
+  UserCheck,
+  MessageSquare,
+  Paperclip,
+  Star,
+  ChevronUp,
+  ChevronDown,
+  MapPinHouse,
+  Users,
+  RefreshCw,
+  Share2,
+  ExternalLink,
+} from "lucide-react";
+import { Separator } from "~/components/ui/separator";
+import UserDropdown from "~/components/user-dropdown";
+import ColleDetailsSkeleton from "~/components/details/skeleton-details";
+import AttachmentItem from "~/components/details/attachment";
+// TODO: Scroll restoration
+// import { ScrollToTopOnMount } from "~/components/noscroll";
+import Error from "~/components/error";
+import { Badge } from "~/components/ui/badge";
+import { useColle, useUser } from "~/lib/api";
+import { toast } from "sonner";
+import { formatDate, formatGrade, formatTime, goBack } from "~/lib/utils";
+
+// TODO: Preferences for subject colors
+const getSubjectColor = (_: string) => {
+  // Mock placeholder function
+  return "bg-blue-100 text-blue-800"; // Default color
+};
+const getSubjectEmoji = (_: string) => {
+  // Mock placeholder function
+  return "📚"; // Default emoji
+};
+
+// TODO: Move all code to components
+export default function ColleDetailPage() {
+  const { user, isLoading: isUserLoading, error: userError } = useUser();
+
+  const navigate = useNavigate();
+  const params = useParams<{ colleId: string }>();
+
+  const [isReloading, setIsReloading] = useState(false);
+
+  // TODO: Handle user loading state
+  if (userError) {
+    console.error(userError);
+    return <Navigate to="/login" />;
+  }
+
+  // TODO: Favorite toggle function
+  const toggleStar = () => {};
+
+  const colleId = parseInt(params.colleId!);
+  if (isNaN(colleId)) {
+    return <Navigate to="/" />;
+  }
+
+  const { colle, error, isLoading } = useColle(colleId);
+  if (error)
+    return (
+      <Error
+        title="Impossible de charger cette colle"
+        message={error?.toString()}
+        code={500}
+        description="Une erreur s'est produite lors du chargement de la colle."
+      />
+    );
+
+  if (isLoading || !colle) return <ColleDetailsSkeleton />;
+
+  const handleToggleFavorite = () => {};
+
+  const handleReload = () => {
+    setIsReloading(true);
+    // TODO: HARD RELOAD
+  };
+
+  const handleShare = async () => {
+    const shareUrl = window.location.href;
+    const shareTitle = `Colle de ${colle.subject.name} - ${colle.student.firstName}`;
+    const shareText = `Colle de ${colle.subject.name} du ${formatDate(
+      colle.date
+    )} à ${formatTime(colle.date)} - ${colle.student} avec ${
+      colle.examiner
+    }.\n\nConsultez-le résumé ici :`;
+    try {
+      if (navigator.share) {
+        await navigator.share({
+          title: shareTitle,
+          text: shareText,
+          url: shareUrl,
+        });
+      } else {
+        // Fallback to copying the URL
+        await navigator.clipboard.writeText(shareUrl);
+        toast("Lien copié dans le presse-papiers", {
+          icon: "📋",
+          description: "Vous pouvez le partager avec vos amis !",
+        });
+      }
+    } catch (error) {
+      console.error("Error sharing:", error);
+    }
+  };
+
+  const handleOpenBJColle = () => {
+    const url = `https://bjcolle.fr/students_oral_disp.php?colle=${colle.bjid}&hgfebrgl8ri3h=${colle.bjsecret}`;
+    window.open(url, "_blank");
+    toast("Ouverture de BJColle", {
+      icon: "🔗",
+      description: "Redirection vers BJColle...",
+    });
+  };
+
+  const subjectColor = getSubjectColor(colle.subject.name);
+  const subjectEmoji = getSubjectEmoji(colle.subject.name);
+
+  return (
+    <div className="container mx-auto py-6 px-4 pb-20 md:pb-6 md:py-8">
+      {/* <ScrollToTopOnMount /> */}
+
+      <div className="flex justify-between items-center mb-4">
+        <Button variant="outline" onClick={() => goBack(navigate)}>
+          <ArrowLeft className="h-4 w-4 mr-2" />
+          Retour
+        </Button>
+        <div className="hidden md:block">
+          <UserDropdown user={user} />
+        </div>
+        <div className="flex md:hidden items-center gap-2">
+          <Button
+            variant="outline"
+            size="icon"
+            className="h-10 w-10"
+            onClick={handleReload}
+            disabled={isReloading}
+          >
+            <RefreshCw
+              className={`h-5 w-5 ${isReloading ? "animate-spin" : ""}`}
+            />
+            <span className="sr-only">Recharger</span>
+          </Button>
+          <UserDropdown user={user} />
+        </div>
+      </div>
+
+      <Card className="max-w-3xl mx-auto">
+        <CardHeader className="pb-2">
+          <div className="flex flex-col md:flex-row md:items-center md:justify-between gap-2">
+            <div className="flex flex-col">
+              <div className="flex items-center justify-between">
+                <CardTitle className="text-2xl">Résumé de Colle</CardTitle>
+                {colle.grade && (
+                  <div
+                    className={`md:hidden px-3 py-1 rounded-md text-sm font-medium ${subjectColor}`}
+                  >
+                    {formatGrade(colle.grade)}/20
+                  </div>
+                )}
+              </div>
+              <div className="flex items-center gap-2 mt-2">
+                <Badge className={subjectColor}>
+                  {colle.subject.name} {subjectEmoji}
+                </Badge>
+              </div>
+            </div>
+
+            {/* Desktop Action Buttons */}
+            <div className="hidden md:flex items-center gap-2">
+              <Button
+                variant="outline"
+                size="sm"
+                className="h-9 w-9"
+                onClick={handleShare}
+                title="Partager"
+              >
+                <Share2 className="h-4 w-4" />
+                <span className="sr-only">Partager</span>
+              </Button>
+
+              <Button
+                variant="outline"
+                size="sm"
+                className="h-9 w-9"
+                onClick={handleReload}
+                disabled={isReloading}
+                title="Recharger"
+              >
+                <RefreshCw
+                  className={`h-4 w-4 ${isReloading ? "animate-spin" : ""}`}
+                />
+                <span className="sr-only">Recharger</span>
+              </Button>
+
+              <Button
+                variant="ghost"
+                size="sm"
+                className={`h-9 w-9 ${
+                  // TODO: Use a proper favorite state
+                  false ? "text-yellow-500" : "text-muted-foreground"
+                }`}
+                onClick={handleToggleFavorite}
+              >
+                <Star
+                  className={`h-5 w-5 ${
+                    // TODO: Use a proper favorite state
+                    false ? "fill-yellow-500" : ""
+                  }`}
+                />
+                <span className="sr-only">Ajouter aux favoris</span>
+              </Button>
+
+              {colle.grade && (
+                <div
+                  className={`px-3 py-1 rounded-md text-sm font-medium ${subjectColor}`}
+                >
+                  {formatGrade(colle.grade)}/20
+                </div>
+              )}
+            </div>
+          </div>
+        </CardHeader>
+
+        <CardContent className="space-y-6">
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <div className="space-y-4">
+              <div>
+                <h3 className="text-sm font-medium text-muted-foreground mb-1">
+                  Date
+                </h3>
+                <div className="flex items-center gap-2">
+                  <Clock className="h-4 w-4" />
+                  <span>
+                    {formatDate(colle.date)}, à {formatTime(colle.date)}
+                  </span>
+                </div>
+              </div>
+
+              <div>
+                <h3 className="text-sm font-medium text-muted-foreground mb-1">
+                  Colleur
+                </h3>
+                <div className="flex items-center gap-2">
+                  <UserCheck className="h-4 w-4" />
+                  <span>{colle.examiner.name}</span>
+                </div>
+              </div>
+            </div>
+
+            <div className="space-y-4">
+              <div>
+                <h3 className="text-sm font-medium text-muted-foreground mb-1">
+                  Étudiant
+                </h3>
+                <div className="flex items-center gap-2">
+                  <User className="h-4 w-4" />
+                  <span>{colle.student.fullName}</span>
+                </div>
+              </div>
+
+              {/* TODO: Colles groups - others students */}
+              {/* {colle.group?.length > 0 && (
+                <div>
+                  <h3 className="text-sm font-medium text-muted-foreground mb-1">
+                    Autres élèves
+                  </h3>
+                  {colle.group.map((linkedColle) => (
+                    <div className="flex items-center gap-2">
+                      <Users className="h-4 w-4" />
+                      <Link
+                        to={`/colles/${linkedColle.id}`}
+                        key={linkedColle.id}
+                      >
+                        {linkedColle.student}
+                      </Link>
+                    </div>
+                  ))}
+                </div>
+              )} */}
+            </div>
+
+            {colle.room && (
+              <div className="space-y-4">
+                <div>
+                  <h3 className="text-sm font-medium text-muted-foreground mb-1">
+                    Salle
+                  </h3>
+                  <div className="flex items-center gap-2">
+                    <MapPinHouse className="h-4 w-4" />
+                    <span>{colle.room.name}</span>
+                  </div>
+                </div>
+              </div>
+            )}
+          </div>
+
+          {colle.content && (
+            <>
+              <Separator />
+
+              <div>
+                <h3 className="text-lg font-medium mb-2 flex items-center gap-2">
+                  <MessageSquare className="h-5 w-5" />
+                  Sujet
+                </h3>
+
+                <div className="p-4 bg-muted rounded-lg">
+                  <ExpandableComment comment={colle.content} />
+                </div>
+              </div>
+            </>
+          )}
+
+          {colle.comment && (
+            <>
+              <Separator />
+
+              <div>
+                <h3 className="text-lg font-medium mb-2 flex items-center gap-2">
+                  <MessageSquare className="h-5 w-5" />
+                  Commentaires
+                </h3>
+                <div className="p-4 bg-muted rounded-lg">
+                  <ExpandableComment comment={colle.comment} />
+                </div>
+              </div>
+            </>
+          )}
+
+          {/* TODO: Attachments */}
+          {colle.attachments && colle.attachments?.length > 0 && (
+            <div>
+              <h3 className="text-lg font-medium mb-3 flex items-center gap-2">
+                <Paperclip className="h-5 w-5" />
+                Attachments
+              </h3>
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
+                {colle.attachments.map((attachment, index) => (
+                  <AttachmentItem key={index} attachment={attachment} />
+                ))}
+              </div>
+            </div>
+          )}
+
+          {/* BJColle External Link */}
+          <div className="mt-8 pt-4 border-t border-dashed">
+            <div className="flex justify-end items-center space-x-1 mt-1 text-xs text-muted-foreground">
+              <ExternalLink className="h-4 w-4" />
+              <span onClick={handleOpenBJColle}>
+                Accéder à la colle depuis BJColle
+              </span>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* Mobile Action Bar - Fixed at Bottom */}
+      <div className="fixed bottom-0 left-0 right-0 bg-background border-t border-border md:hidden z-50">
+        <div className="container mx-auto px-4 py-2 flex items-center justify-around">
+          <Button
+            variant="ghost"
+            size="lg"
+            className={`flex-1 h-12 ${
+              // TODO: Use a proper favorite state
+              false ? "text-yellow-500" : "text-muted-foreground"
+            }`}
+            onClick={handleToggleFavorite}
+          >
+            <Star
+              className={`h-5 w-5 mr-2 ${
+                // TODO: Use a proper favorite state
+                false ? "fill-yellow-500" : ""
+              }`}
+            />
+            {/* TODO: */}
+            {false ? "Favori" : "Ajouter"}
+          </Button>
+
+          <Separator orientation="vertical" className="h-8" />
+
+          <Button
+            variant="ghost"
+            size="lg"
+            className="flex-1 h-12"
+            onClick={handleShare}
+          >
+            <Share2 className="h-5 w-5 mr-2" />
+            Partager
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+// TODO: Custom render component for LaTeX rendering
+// Component for expandable comments
+function ExpandableComment({ comment }: { comment: string }) {
+  // Crop comments longer than 750 characters
+  const [isExpanded, setIsExpanded] = useState(false);
+  const commentLimit = 750; // Character limit before truncating
+  const isLongComment = removeHtmlElements(comment).length > commentLimit;
+
+  const toggleExpand = () => {
+    setIsExpanded(!isExpanded);
+  };
+
+  const displayedComment =
+    isExpanded || !isLongComment
+      ? comment
+      : `${comment.substring(0, commentLimit)}...`;
+
+  return (
+    <div>
+      <Latex delimiters={[{ left: "$$", right: "$$", display: false }]}>
+        {renderLatex(displayedComment)}
+      </Latex>
+      {isLongComment && (
+        <Button
+          variant="ghost"
+          size="sm"
+          className="mt-1 h-7 px-2 text-primary"
+          onClick={toggleExpand}
+        >
+          {isExpanded ? (
+            <span className="flex items-center gap-1">
+              Afficher moins <ChevronUp className="h-3 w-3" />
+            </span>
+          ) : (
+            <span className="flex items-center gap-1">
+              Afficher plus <ChevronDown className="h-3 w-3" />
+            </span>
+          )}
+        </Button>
+      )}
+    </div>
+  );
+}
+
+// Remove HTML elements and return plain text (for text length calculation and cropping)
+function removeHtmlElements(htmlString: string) {
+  const document = parseDocument(htmlString);
+  return DomUtils.textContent(document).trim();
+}

app/routes/home.tsx

@@ -0,0 +1,22 @@
+import HomePage from "~/components/home";
+import UserDropdown from "~/components/user-dropdown";
+import { MainLayout } from "~/layout";
+import { useUser } from "~/lib/api";
+import { forceReload } from "~/lib/utils";
+
+export default function Home() {
+  const { user, isLoading, error } = useUser();
+  if (error) {
+    console.error(error);
+    // TODO: handle error (redirect to login or show error message)
+  }
+  return (
+    <MainLayout page={<HomePage />}>
+      <h1 className="text-2xl font-bold" onClick={forceReload}>
+        Khollis&eacute; - {user.className} ⚔️
+      </h1>
+      {/* TODO: isLoading to display skeleton */}
+      <UserDropdown user={user} />
+    </MainLayout>
+  );
+}

app/routes/login.tsx

@@ -5,7 +5,7 @@ import { Label } from "~/components/ui/label";
 import { Input } from "~/components/ui/input";
 import { Button } from "~/components/ui/button";
 import { useState } from "react";
-import AuthLayout from "~/layout";
+import { AuthLayout } from "~/layout";
 import { requestLogin } from "~/lib/api";
 import { useNavigate } from "react-router";
 import { Turnstile } from "@marsidev/react-turnstile";

app/routes/register.tsx

@@ -1,16 +1,16 @@
-import type { Route } from "./+types/login";
 import { Alert, AlertDescription } from "~/components/ui/alert";
 import { AlertCircleIcon, IdCardIcon, LoaderCircle, LogIn, MailIcon } from "lucide-react";
 import { Label } from "~/components/ui/label";
 import { Input } from "~/components/ui/input";
 import { Button } from "~/components/ui/button";
-import { useState } from "react";
-import AuthLayout from "~/layout";
+import { useEffect, useState } from "react";
+import { AuthLayout } from "~/layout";
 import { useNavigate, useSearchParams } from "react-router";
 import { capitalizeFirstLetter } from "~/lib/utils";
 import { Combobox } from "~/components/combobox";
+import { getClasses, registerUser } from "~/lib/api";
 
-export function meta({ }: Route.MetaArgs) {
+export function meta() {
   return [
     { title: "Khollisé - Inscription" },
     { name: "description", content: "Connectez-vous à Khollisé" },
@@ -25,6 +25,22 @@ export default function Register() {
   const [emailFirst, emailLast] = getNameFromEmail(email);
   const [firstName, setFirstName] = useState(emailFirst);
   const [lastName, setLastName] = useState(emailLast);
+  const [className, setClassName] = useState("");
+
+  const token = searchParams.get("token");
+  useEffect(() => {
+    if (!email || !token) {
+      navigate("/login", { replace: true });
+      return;
+    }
+  }, [email, token]);
+
+  const [classes, setClasses] = useState<{ value: string; label: string }[]>([]);
+  useEffect(() => {
+    getClasses().then((data) => {
+      setClasses(data);
+    })
+  }, []);
 
   const [error, setError] = useState<string | null>(null);
   const [isLoading, setIsLoading] = useState(false);
@@ -32,16 +48,18 @@ export default function Register() {
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
     setError(null);
-    // TODO: Validate...
-    // TODO: Check if combobox is valid (not empty !!)
+
+    // Validate inputs
+    if (!firstName || !lastName) return setError("Veuillez compléter votre prénom et nom.");
+    if (!className) return setError("Veuillez sélectionner votre classe.");
     setIsLoading(true);
-    // TODO: Fetch function
-    const sleep = (ms: number) =>
-      new Promise((resolve) => setTimeout(resolve, ms));
-    await sleep(5000)
-      .then((data) => {
+
+    await registerUser(firstName, lastName, className, token!)
+      .then(() => {
         setIsLoading(false);
-        // TODO: Callback
+        navigate("/", {
+          replace: true,
+        })
       })
       .catch((err) => {
         setIsLoading(false);
@@ -98,19 +116,13 @@ export default function Register() {
         <div className="space-y-2">
           <Label htmlFor="password">Classe</Label>
           <div className="block">
-            {/* TODO: Pass ref to combobox to validate */}
             <Combobox
               defaultText="Sélectionnez votre classe..."
-              // TODO: Fetch function
-              values={[
-                { value: "1", label: "1ère" },
-                { value: "2", label: "2ème" },
-                { value: "3", label: "3ème" },
-                { value: "4", label: "4ème" },
-                { value: "5", label: "5ème" },
-              ]}
-              emptyText="Chargement..."
+              values={classes}
+              emptyText="Aucune classe trouvée"
               placeholderText="Rechercher"
+              current={className}
+              setValue={setClassName}
             />
           </div>
         </div>

app/routes/unused/success.tsx

@@ -1,4 +1,4 @@
-import type { Route } from "./+types/success";
+// import type { Route } from "./+types/success";
 import { useState, useEffect } from "react";
 import {
   CheckCircleIcon,
@@ -15,7 +15,7 @@ import {
 } from "~/components/ui/card";
 import { Button } from "~/components/ui/button";
 
-export function meta({}: Route.MetaArgs) {
+export function meta() {
   return [
     { title: "Khollisé - Connexion" },
     { name: "description", content: "Connexion réussie à Khollisé" },

app/routes/verify.tsx

@@ -11,9 +11,9 @@ import { useSearchParams } from "react-router";
 import OtpInput from "~/components/input-otp";
 import { Alert, AlertDescription } from "~/components/ui/alert";
 import { Button } from "~/components/ui/button";
-import AuthLayout from "~/layout";
+import { AuthLayout } from "~/layout";
 
-export function meta({}: Route.MetaArgs) {
+export function meta({ }: Route.MetaArgs) {
   return [
     { title: "Khollisé - Connexion" },
     { name: "description", content: "Connectez-vous à Khollisé" },
@@ -24,10 +24,13 @@ export default function Verify() {
   const navigate = useNavigate();
   const [searchParams] = useSearchParams()
   const email = searchParams.get("email");
-  if (!email) {
-    // TODO: Redirect to login page
-    return
-  }
+
+  useEffect(() => {
+    if (!email) {
+      navigate("/login", { replace: true });
+      return;
+    }
+  }, [email]);
 
   // const [isResending, setIsResending] = useState(false);
   // const [resendSuccess, setResendSuccess] = useState(false);
@@ -111,12 +114,12 @@ export default function Verify() {
             Entrez le code de vérification
           </h3>
           <OtpInput
-            email={email}
+            email={email!}
             setOtpError={setOtpError}
             otpError={otpError}
           />
 
-{/* TODO: Resend OTP
+          {/* TODO: Resend OTP
           {resendSuccess && (
             <Alert className="bg-green-50 border-green-200 mt-2">
               <CheckCircleIcon className="h-4 w-4 text-green-600" />

package.json

@@ -11,28 +11,46 @@
   },
   "dependencies": {
     "@marsidev/react-turnstile": "^1.1.0",
+    "@radix-ui/react-avatar": "^1.1.10",
+    "@radix-ui/react-collapsible": "^1.1.11",
     "@radix-ui/react-dialog": "^1.1.14",
+    "@radix-ui/react-dropdown-menu": "^2.1.15",
     "@radix-ui/react-label": "^2.1.6",
     "@radix-ui/react-popover": "^1.1.14",
+    "@radix-ui/react-select": "^2.2.5",
+    "@radix-ui/react-separator": "^1.1.7",
     "@radix-ui/react-slot": "^1.2.3",
+    "@radix-ui/react-tabs": "^1.1.12",
     "@react-router/node": "^7.5.3",
     "@react-router/serve": "^7.5.3",
+    "@tanstack/query-async-storage-persister": "^5.83.0",
+    "@tanstack/react-query": "^5.83.0",
+    "@tanstack/react-query-persist-client": "^5.83.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
+    "date-fns": "^4.1.0",
+    "htmlparser2": "^10.0.0",
+    "idb-keyval": "^6.2.2",
     "input-otp": "^1.4.2",
     "isbot": "^5.1.27",
+    "katex": "^0.16.22",
     "lucide-react": "^0.511.0",
+    "luxon": "^3.7.1",
     "netlify-cli": "^22.1.3",
     "react": "^19.1.0",
+    "react-day-picker": "^9.8.1",
     "react-dom": "^19.1.0",
+    "react-latex-next": "^3.0.0",
     "react-router": "^7.5.3",
+    "sonner": "^2.0.6",
     "tailwind-merge": "^3.3.0",
     "tw-animate-css": "^1.3.0"
   },
   "devDependencies": {
     "@react-router/dev": "^7.5.3",
     "@tailwindcss/vite": "^4.1.4",
+    "@types/luxon": "^3.7.0",
     "@types/node": "^20",
     "@types/react": "^19.1.2",
     "@types/react-dom": "^19.1.2",

pnpm-lock.yaml

@@ -11,24 +11,51 @@ importers:
       '@marsidev/react-turnstile':
         specifier: ^1.1.0
         version: 1.1.0(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-avatar':
+        specifier: ^1.1.10
+        version: 1.1.10(@types/react-dom@19.1.6(@types/react@19.1.8))(@types/react@19.1.8)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-collapsible':
+        specifier: ^1.1.11
+        version: 1.1.11(@types/react-dom@19.1.6(@types/react@19.1.8))(@types/react@19.1.8)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
       '@radix-ui/react-dialog':
         specifier: ^1.1.14
         version: 1.1.14(@types/react-dom@19.1.6(@types/react@19.1.8))(@types/react@19.1.8)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-dropdown-menu':
+        specifier: ^2.1.15
+        version: 2.1.15(@types/react-dom@19.1.6(@types/react@19.1.8))(@types/react@19.1.8)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
       '@radix-ui/react-label':
         specifier: ^2.1.6
         version: 2.1.7(@types/react-dom@19.1.6(@types/react@19.1.8))(@types/react@19.1.8)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
       '@radix-ui/react-popover':
         specifier: ^1.1.14
         version: 1.1.14(@types/react-dom@19.1.6(@types/react@19.1.8))(@types/react@19.1.8)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-select':
+        specifier: ^2.2.5
+        version: 2.2.5(@types/react-dom@19.1.6(@types/react@19.1.8))(@types/react@19.1.8)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-separator':
+        specifier: ^1.1.7
+        version: 1.1.7(@types/react-dom@19.1.6(@types/react@19.1.8))(@types/react@19.1.8)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
       '@radix-ui/react-slot':
         specifier: ^1.2.3
         version: 1.2.3(@types/react@19.1.8)(react@19.1.1)
+      '@radix-ui/react-tabs':
+        specifier: ^1.1.12
+        version: 1.1.12(@types/react-dom@19.1.6(@types/react@19.1.8))(@types/react@19.1.8)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
       '@react-router/node':
         specifier: ^7.5.3
         version: 7.7.1(react-router@7.7.1(react-dom@19.1.1(react@19.1.1))(react@19.1.1))(typescript@5.8.3)
       '@react-router/serve':
         specifier: ^7.5.3
         version: 7.7.1(react-router@7.7.1(react-dom@19.1.1(react@19.1.1))(react@19.1.1))(typescript@5.8.3)
+      '@tanstack/query-async-storage-persister':
+        specifier: ^5.83.0
+        version: 5.83.0
+      '@tanstack/react-query':
+        specifier: ^5.83.0
+        version: 5.83.0(react@19.1.1)
+      '@tanstack/react-query-persist-client':
+        specifier: ^5.83.0
+        version: 5.83.0(@tanstack/react-query@5.83.0(react@19.1.1))(react@19.1.1)
       class-variance-authority:
         specifier: ^0.7.1
         version: 0.7.1
@@ -38,27 +65,51 @@ importers:
       cmdk:
         specifier: ^1.1.1
         version: 1.1.1(@types/react-dom@19.1.6(@types/react@19.1.8))(@types/react@19.1.8)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      date-fns:
+        specifier: ^4.1.0
+        version: 4.1.0
+      htmlparser2:
+        specifier: ^10.0.0
+        version: 10.0.0
+      idb-keyval:
+        specifier: ^6.2.2
+        version: 6.2.2
       input-otp:
         specifier: ^1.4.2
         version: 1.4.2(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
       isbot:
         specifier: ^5.1.27
         version: 5.1.28
+      katex:
+        specifier: ^0.16.22
+        version: 0.16.22
       lucide-react:
         specifier: ^0.511.0
         version: 0.511.0(react@19.1.1)
+      luxon:
+        specifier: ^3.7.1
+        version: 3.7.1
       netlify-cli:
         specifier: ^22.1.3
-        version: 22.4.0(@types/node@20.19.9)(picomatch@4.0.3)(rollup@4.46.1)
+        version: 22.4.0(@types/node@20.19.9)(idb-keyval@6.2.2)(picomatch@4.0.3)(rollup@4.46.1)
       react:
         specifier: ^19.1.0
         version: 19.1.1
+      react-day-picker:
+        specifier: ^9.8.1
+        version: 9.8.1(react@19.1.1)
       react-dom:
         specifier: ^19.1.0
         version: 19.1.1(react@19.1.1)
+      react-latex-next:
+        specifier: ^3.0.0
+        version: 3.0.0(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
       react-router:
         specifier: ^7.5.3
         version: 7.7.1(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      sonner:
+        specifier: ^2.0.6
+        version: 2.0.6(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
       tailwind-merge:
         specifier: ^3.3.0
         version: 3.3.1
@@ -72,6 +123,9 @@ importers:
       '@tailwindcss/vite':
         specifier: ^4.1.4
         version: 4.1.11(vite@6.3.5(@types/node@20.19.9)(jiti@2.5.1)(lightningcss@1.30.1)(yaml@2.8.0))
+      '@types/luxon':
+        specifier: ^3.7.0
+        version: 3.7.0
       '@types/node':
         specifier: ^20
         version: 20.19.9
@@ -262,6 +316,9 @@ packages:
   '@dabh/diagnostics@2.0.3':
     resolution: {integrity: sha512-hrlQOIi7hAfzsMqlGSFyVucrx38O+j6wiGOf//H2ecvIEqYN4ADBSS2iLMh5UFyDunCNniUIPk/q3riFv45xRA==}
 
+  '@date-fns/tz@1.2.0':
+    resolution: {integrity: sha512-LBrd7MiJZ9McsOgxqWX7AaxrDjcFVjWH/tIKJd7pnR7McaslGYOP1QmmiBXdJH/H/yLCT+rcQ7FaPBUxRGUtrg==}
+
   '@dependents/detective-less@5.0.1':
     resolution: {integrity: sha512-Y6+WUMsTFWE5jb20IFP4YGa5IrGY/+a/FbOSjDF/wz9gepU2hwCYSXRHP/vPwBvwcY3SVMASt4yXxbXNXigmZQ==}
     engines: {node: '>=18'}
@@ -1174,6 +1231,9 @@ packages:
     resolution: {integrity: sha512-bWLDlHsBlgKY/05wDN/V3ETcn5G2SV/SiA2ZmNvKGGlmVX4G5li7GRDhHcgYvHJHyJ8TUStqg2xtHmCs0UbAbg==}
     engines: {node: '>=18'}
 
+  '@radix-ui/number@1.1.1':
+    resolution: {integrity: sha512-MkKCwxlXTgz6CFoJx3pCwn07GKp36+aZyu/u2Ln2VrA5DcdyCZkASEDBTd8x5whTQQL5CiYf4prXKLcgQdv29g==}
+
   '@radix-ui/primitive@1.1.2':
     resolution: {integrity: sha512-XnbHrrprsNqZKQhStrSwgRUQzoCI1glLzdw79xiZPoofhGICeZRSQ3dIxAKH1gb3OHfNf4d6f+vAv3kil2eggA==}
 
@@ -1190,6 +1250,45 @@ packages:
       '@types/react-dom':
         optional: true
 
+  '@radix-ui/react-avatar@1.1.10':
+    resolution: {integrity: sha512-V8piFfWapM5OmNCXTzVQY+E1rDa53zY+MQ4Y7356v4fFz6vqCyUtIz2rUD44ZEdwg78/jKmMJHj07+C/Z/rcog==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-collapsible@1.1.11':
+    resolution: {integrity: sha512-2qrRsVGSCYasSz1RFOorXwl0H7g7J1frQtgpQgYrt+MOidtPAINHn9CPovQXb83r8ahapdx3Tu0fa/pdFFSdPg==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-collection@1.1.7':
+    resolution: {integrity: sha512-Fh9rGN0MoI4ZFUNyfFVNU4y9LUz93u9/0K+yLgA2bwRojxM8JU1DyvvMBabnZPBgMWREAJvU2jjVzq+LrFUglw==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-compose-refs@1.1.2':
     resolution: {integrity: sha512-z4eqJvfiNnFMHIIvXP3CY57y2WJs5g2v3X0zm9mEJkrkNv4rDxu+sg9Jh8EkXyeqBkB7SOcboo9dMVqhyrACIg==}
     peerDependencies:
@@ -1221,6 +1320,15 @@ packages:
       '@types/react-dom':
         optional: true
 
+  '@radix-ui/react-direction@1.1.1':
+    resolution: {integrity: sha512-1UEWRX6jnOA2y4H5WczZ44gOOjTEmlqv1uNW4GAJEO5+bauCBhv8snY65Iw5/VOS/ghKN9gr2KjnLKxrsvoMVw==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
   '@radix-ui/react-dismissable-layer@1.1.10':
     resolution: {integrity: sha512-IM1zzRV4W3HtVgftdQiiOmA0AdJlCtMLe00FXaHwgt3rAnNsIyDqshvkIW3hj/iu5hu8ERP7KIYki6NkqDxAwQ==}
     peerDependencies:
@@ -1234,6 +1342,19 @@ packages:
       '@types/react-dom':
         optional: true
 
+  '@radix-ui/react-dropdown-menu@2.1.15':
+    resolution: {integrity: sha512-mIBnOjgwo9AH3FyKaSWoSu/dYj6VdhJ7frEPiGTeXCdUFHjl9h3mFh2wwhEtINOmYXWhdpf1rY2minFsmaNgVQ==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-focus-guards@1.1.2':
     resolution: {integrity: sha512-fyjAACV62oPV925xFCrH8DR5xWhg9KYtJT4s3u54jxp+L/hbpTY2kIeEFFbFe+a/HCE94zGQMZLIpVTPVZDhaA==}
     peerDependencies:
@@ -1278,6 +1399,19 @@ packages:
       '@types/react-dom':
         optional: true
 
+  '@radix-ui/react-menu@2.1.15':
+    resolution: {integrity: sha512-tVlmA3Vb9n8SZSd+YSbuFR66l87Wiy4du+YE+0hzKQEANA+7cWKH1WgqcEX4pXqxUFQKrWQGHdvEfw00TjFiew==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-popover@1.1.14':
     resolution: {integrity: sha512-ODz16+1iIbGUfFEfKx2HTPKizg2MN39uIOV8MXeHnmdd3i/N9Wt7vU46wbHsqA0xoaQyXVcs0KIlBdOA2Y95bw==}
     peerDependencies:
@@ -1343,6 +1477,45 @@ packages:
       '@types/react-dom':
         optional: true
 
+  '@radix-ui/react-roving-focus@1.1.10':
+    resolution: {integrity: sha512-dT9aOXUen9JSsxnMPv/0VqySQf5eDQ6LCk5Sw28kamz8wSOW2bJdlX2Bg5VUIIcV+6XlHpWTIuTPCf/UNIyq8Q==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-select@2.2.5':
+    resolution: {integrity: sha512-HnMTdXEVuuyzx63ME0ut4+sEMYW6oouHWNGUZc7ddvUWIcfCva/AMoqEW/3wnEllriMWBa0RHspCYnfCWJQYmA==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-separator@1.1.7':
+    resolution: {integrity: sha512-0HEb8R9E8A+jZjvmFCy/J4xhbXy3TV+9XSnGJ3KvTtjlIUy/YQ/p6UYZvi7YbeoeXdyU9+Y3scizK6hkY37baA==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-slot@1.2.3':
     resolution: {integrity: sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==}
     peerDependencies:
@@ -1352,6 +1525,19 @@ packages:
       '@types/react':
         optional: true
 
+  '@radix-ui/react-tabs@1.1.12':
+    resolution: {integrity: sha512-GTVAlRVrQrSw3cEARM0nAx73ixrWDPNZAruETn3oHCNP6SbZ/hNxdxp+u7VkIEv3/sFoLq1PfcHrl7Pnp0CDpw==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-use-callback-ref@1.1.1':
     resolution: {integrity: sha512-FkBMwD+qbGQeMu1cOHnuGB6x4yzPjho8ap5WtbEJ26umhgqVXbhekKUQO+hZEL1vU92a3wHwdp0HAcqAUF5iDg==}
     peerDependencies:
@@ -1388,6 +1574,15 @@ packages:
       '@types/react':
         optional: true
 
+  '@radix-ui/react-use-is-hydrated@0.1.0':
+    resolution: {integrity: sha512-U+UORVEq+cTnRIaostJv9AGdV3G6Y+zbVd+12e18jQ5A3c0xL03IhnHuiU4UV69wolOQp5GfR58NW/EgdQhwOA==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
   '@radix-ui/react-use-layout-effect@1.1.1':
     resolution: {integrity: sha512-RbJRS4UWQFkzHTTwVymMTUv8EqYhOp8dOOviLj2ugtTiXRaRQS7GLGxZTLL1jWhMeoSCf5zmcZkqTl9IiYfXcQ==}
     peerDependencies:
@@ -1397,6 +1592,15 @@ packages:
       '@types/react':
         optional: true
 
+  '@radix-ui/react-use-previous@1.1.1':
+    resolution: {integrity: sha512-2dHfToCj/pzca2Ck724OZ5L0EVrr3eHRNsG/b3xQJLA2hZpVCS99bLAX+hm1IHXDEnzU6by5z/5MIY794/a8NQ==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
   '@radix-ui/react-use-rect@1.1.1':
     resolution: {integrity: sha512-QTYuDesS0VtuHNNvMh+CjlKJ4LJickCMUAqjlE3+j8w+RlRpwyX3apEQKGFzbZGdo7XNG1tXa+bQqIE7HIXT2w==}
     peerDependencies:
@@ -1415,6 +1619,19 @@ packages:
       '@types/react':
         optional: true
 
+  '@radix-ui/react-visually-hidden@1.2.3':
+    resolution: {integrity: sha512-pzJq12tEaaIhqjbzpCuv/OypJY/BPavOofm+dbab+MHLajy277+1lLm6JFcGgF5eskJ6mquGirhXY2GD/8u8Ug==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/rect@1.1.1':
     resolution: {integrity: sha512-HPwpGIzkl28mWyZqG52jiqDJ12waP11Pa1lGoiyUkIEuMLBP0oeK/C89esbXrxsky5we7dfd8U58nm0SgAWpVw==}
 
@@ -1686,6 +1903,26 @@ packages:
     peerDependencies:
       vite: ^5.2.0 || ^6 || ^7
 
+  '@tanstack/query-async-storage-persister@5.83.0':
+    resolution: {integrity: sha512-kONVCkTndW+UDspJUQKbd4hCdun+uIn2RXxpzlXYWxlefIfNjcIvefJ0+7xpap6nDqRLXIuaMaCZmFFw56uE+Q==}
+
+  '@tanstack/query-core@5.83.0':
+    resolution: {integrity: sha512-0M8dA+amXUkyz5cVUm/B+zSk3xkQAcuXuz5/Q/LveT4ots2rBpPTZOzd7yJa2Utsf8D2Upl5KyjhHRY+9lB/XA==}
+
+  '@tanstack/query-persist-client-core@5.83.0':
+    resolution: {integrity: sha512-hdKgHkr1MYnwZX+QHj/9JjXZx9gL2RUCD5xSX0EHZiqUQhMk4Gcryq9xosn8LmYRMlhkjk7n9uV+X4UXRvgoIg==}
+
+  '@tanstack/react-query-persist-client@5.83.0':
+    resolution: {integrity: sha512-uEqJnSbqlvzlhYJ+RU+2c2DmbbT7cw6eFjiewEXZFXaSGWNjvUG02LePrwL8cdLlRQFcZKas30IdckboOoVg9Q==}
+    peerDependencies:
+      '@tanstack/react-query': ^5.83.0
+      react: ^18 || ^19
+
+  '@tanstack/react-query@5.83.0':
+    resolution: {integrity: sha512-/XGYhZ3foc5H0VM2jLSD/NyBRIOK4q9kfeml4+0x2DlL6xVuAcVEW+hTlTapAmejObg0i3eNqhkr2dT+eciwoQ==}
+    peerDependencies:
+      react: ^18 || ^19
+
   '@tokenizer/token@0.3.0':
     resolution: {integrity: sha512-OvjF+z51L3ov0OyAU0duzsYuvO01PH7x4t6DJx+guahgTnBHkhJdG7soQeTSFLWN3efnHyibZ4Z8l2EuWwJN3A==}
 
@@ -1710,6 +1947,9 @@ packages:
   '@types/http-proxy@1.17.16':
     resolution: {integrity: sha512-sdWoUajOB1cd0A8cRRQ1cfyWNbmFKLAqBB89Y8x5iYyG/mkJHc0YUH8pdWBy2omi9qtCpiIgGjuwO0dQST2l5w==}
 
+  '@types/luxon@3.7.0':
+    resolution: {integrity: sha512-zNduyjkTXTttOp0KUG7ueFORgq6eyFsjbCZ/B8UfrVmfkHD1V9xC9wN/Vk0XUg0R/k/aIX1NeFwZgwe5hsDXfA==}
+
   '@types/node@20.19.9':
     resolution: {integrity: sha512-cuVNgarYWZqxRJDQHEB58GEONhOK79QVR/qYx4S7kcUObQvUwvFnYxJuuHUKm2aieN9X3yZB4LZsuYNU1Qphsw==}
 
@@ -2225,6 +2465,10 @@ packages:
   commander@2.20.3:
     resolution: {integrity: sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==}
 
+  commander@8.3.0:
+    resolution: {integrity: sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww==}
+    engines: {node: '>= 12'}
+
   commander@9.5.0:
     resolution: {integrity: sha512-KRs7WVDKg86PWiuAqhDrAQnTXZKraVcCc6vFdL14qrZ/DcWwuRo7VoiYXalXO7S5GKpqYiVEwCbgFDfxNHKJBQ==}
     engines: {node: ^12.20.0 || >=14}
@@ -2357,6 +2601,12 @@ packages:
     resolution: {integrity: sha512-0R9ikRb668HB7QDxT1vkpuUBtqc53YyAwMwGeUFKRojY/NWKvdZ+9UYtRfGmhqNbRkTSVpMbmyhXipFFv2cb/A==}
     engines: {node: '>= 12'}
 
+  date-fns-jalali@4.1.0-0:
+    resolution: {integrity: sha512-hTIP/z+t+qKwBDcmmsnmjWTduxCg+5KfdqWQvb2X/8C9+knYY6epN/pfxdDuyVlSVeFz0sM5eEfwIUQ70U4ckg==}
+
+  date-fns@4.1.0:
+    resolution: {integrity: sha512-Ukq0owbQXxa/U3EGtsdVBkR1w7KOQ5gIBqdH2hkvknzZPYvBxb/aa6E8L7tmjFtkwZBu3UXBbjIgPo/Ez4xaNg==}
+
   debug@2.6.9:
     resolution: {integrity: sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==}
     peerDependencies:
@@ -2568,6 +2818,10 @@ packages:
     resolution: {integrity: sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==}
     engines: {node: '>=0.12'}
 
+  entities@6.0.1:
+    resolution: {integrity: sha512-aN97NXWF6AWBTahfVOIrB/NShkzi5H7F9r1s9mD3cDj4Ko5f2qhhVoYMibXF7GlLveb/D2ioWay8lxI97Ven3g==}
+    engines: {node: '>=0.12'}
+
   env-paths@3.0.0:
     resolution: {integrity: sha512-dtJUTepzMW3Lm/NPxRf3wP4642UWhjL2sQxc+ym2YMj1m/H2zDNQOlezafzkHwn6sMstjHTwG6iQQsctDW/b1A==}
     engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
@@ -3020,6 +3274,9 @@ packages:
     resolution: {integrity: sha512-D4iAs/145g7EJ/wIzBLVANEpysTPthUy/K+4EUIw02YJQTqvzD1vUpYiM3vwR0qPAQj4FhQpQz8wBpY8KDcM0g==}
     engines: {node: '>=10.0.0'}
 
+  htmlparser2@10.0.0:
+    resolution: {integrity: sha512-TwAZM+zE5Tq3lrEHvOlvwgj1XLWQCtaaibSN11Q+gGBAS7Y1uZSWwXXRe4iF6OXnaq1riyQAPFOBtYc77Mxq0g==}
+
   http-cache-semantics@4.2.0:
     resolution: {integrity: sha512-dTxcvPXqPvXBQpq5dUr6mEMJX4oIEFv6bwom3FDwKRDsuIjjJGANqhBuoAn9c1RQJIdAKav33ED65E2ys+87QQ==}
 
@@ -3072,6 +3329,9 @@ packages:
     resolution: {integrity: sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==}
     engines: {node: '>=0.10.0'}
 
+  idb-keyval@6.2.2:
+    resolution: {integrity: sha512-yjD9nARJ/jb1g+CvD0tlhUHOrJ9Sy0P8T9MF3YaLlHnSRpwPfpTX0XIvpmw3gAJUmEu3FiICLBDPXVwyEvrleg==}
+
   ieee754@1.2.1:
     resolution: {integrity: sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==}
 
@@ -3338,6 +3598,10 @@ packages:
     resolution: {integrity: sha512-+KJGIyHgkGuIq3IEBNftfhW/LfWhXUIY6OmyVWjliu5KH1y0fw7VQ8YndE2O4qZdMSd9SqbnC8GOcZEy0Om7sA==}
     engines: {node: '>=18'}
 
+  katex@0.16.22:
+    resolution: {integrity: sha512-XCHRdUw4lf3SKBaJe4EvgqIuWwkPSo9XoeO8GjQW94Bp7TWv9hNhzZjZ+OH9yf1UmLygb7DIT5GSFQiyt16zYg==}
+    hasBin: true
+
   keep-func-props@6.0.0:
     resolution: {integrity: sha512-XDYA44ccm6W2MXZeQcDZykS5srkTpPf6Z59AEuOFbfuqdQ5TVxhAjxgzAEFBpr8XpsCEgr/XeCBFAmc9x6wRmQ==}
     engines: {node: '>=16.17.0'}
@@ -4167,11 +4431,24 @@ packages:
     resolution: {integrity: sha512-y3bGgqKj3QBdxLbLkomlohkvsA8gdAiUQlSBJnBhfn+BPxg4bc62d8TcBW15wavDfgexCgccckhcZvywyQYPOw==}
     hasBin: true
 
+  react-day-picker@9.8.1:
+    resolution: {integrity: sha512-kMcLrp3PfN/asVJayVv82IjF3iLOOxuH5TNFWezX6lS/T8iVRFPTETpHl3TUSTH99IDMZLubdNPJr++rQctkEw==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      react: '>=16.8.0'
+
   react-dom@19.1.1:
     resolution: {integrity: sha512-Dlq/5LAZgF0Gaz6yiqZCf6VCcZs1ghAJyrsu84Q/GT0gV+mCxbfmKNoGRKBYMJ8IEdGPqu49YWXD02GCknEDkw==}
     peerDependencies:
       react: ^19.1.1
 
+  react-latex-next@3.0.0:
+    resolution: {integrity: sha512-x70f1b1G7TronVigsRgKHKYYVUNfZk/3bciFyYX1lYLQH2y3/TXku3+5Vap8MDbJhtopePSYBsYWS6jhzIdz+g==}
+    engines: {node: '>=12', npm: '>=5'}
+    peerDependencies:
+      react: ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0
+      react-dom: ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0
+
   react-refresh@0.14.2:
     resolution: {integrity: sha512-jCvmsr+1IUSMUyzOkRcvnVbX3ZYC6g9TDrDbFuFmRDq7PD4yaGbLKNQL6k2jnArV8hjYxh7hVhAZB6s9HDGpZA==}
     engines: {node: '>=0.10.0'}
@@ -4459,6 +4736,12 @@ packages:
   sonic-boom@4.2.0:
     resolution: {integrity: sha512-INb7TM37/mAcsGmc9hyyI6+QR3rR1zVRu36B0NeGXKnOOLiZOfER5SA+N7X7k3yUYRzLWafduTDvJAfDswwEww==}
 
+  sonner@2.0.6:
+    resolution: {integrity: sha512-yHFhk8T/DK3YxjFQXIrcHT1rGEeTLliVzWbO0xN8GberVun2RiBnxAjXAYpZrqwEVHBG9asI/Li8TAAhN9m59Q==}
+    peerDependencies:
+      react: ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+      react-dom: ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+
   sort-keys-length@1.0.1:
     resolution: {integrity: sha512-GRbEOUqCxemTAk/b32F2xa8wDTs+Z1QHOkbhJDQTvv/6G3ZkbJ+frYWsTcc7cBB3Fu4wy4XlLCuNtJuMn7Gsvw==}
     engines: {node: '>=0.10.0'}
@@ -4886,6 +5169,11 @@ packages:
       '@types/react':
         optional: true
 
+  use-sync-external-store@1.5.0:
+    resolution: {integrity: sha512-Rb46I4cGGVBmjamjphe8L/UnvJD+uPPtTkNvX5mZgqdbavhI4EbgIWJiIHXJ8bc/i9EQGPRh4DwEURJ552Do0A==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+
   util-deprecate@1.0.2:
     resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
 
@@ -5349,6 +5637,8 @@ snapshots:
       enabled: 2.0.0
       kuler: 2.0.0
 
+  '@date-fns/tz@1.2.0': {}
+
   '@dependents/detective-less@5.0.1':
     dependencies:
       gonzales-pe: 4.3.0
@@ -6251,6 +6541,8 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  '@radix-ui/number@1.1.1': {}
+
   '@radix-ui/primitive@1.1.2': {}
 
   '@radix-ui/react-arrow@1.1.7(@types/react-dom@19.1.6(@types/react@19.1.8))(@types/react@19.1.8)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)':
@@ -6262,6 +6554,47 @@ snapshots:
       '@types/react': 19.1.8
       '@types/react-dom': 19.1.6(@types/react@19.1.8)
 
+  '@radix-ui/react-avatar@1.1.10(@types/react-dom@19.1.6(@types/react@19.1.8))(@types/react@19.1.8)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)':
+    dependencies:
+      '@radix-ui/react-context': 1.1.2(@types/react@19.1.8)(react@19.1.1)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.6(@types/react@19.1.8))(@types/react@19.1.8)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.1.8)(react@19.1.1)
+      '@radix-ui/react-use-is-hydrated': 0.1.0(@types/react@19.1.8)(react@19.1.1)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.1.8)(react@19.1.1)
+      react: 19.1.1
+      react-dom: 19.1.1(react@19.1.1)
+    optionalDependencies:
+      '@types/react': 19.1.8
+      '@types/react-dom': 19.1.6(@types/react@19.1.8)
+
+  '@radix-ui/react-collapsible@1.1.11(@types/react-dom@19.1.6(@types/react@19.1.8))(@types/react@19.1.8)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.2
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.8)(react@19.1.1)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.1.8)(react@19.1.1)
+      '@radix-ui/react-id': 1.1.1(@types/react@19.1.8)(react@19.1.1)
+      '@radix-ui/react-presence': 1.1.4(@types/react-dom@19.1.6(@types/react@19.1.8))(@types/react@19.1.8)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.6(@types/react@19.1.8))(@types/react@19.1.8)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.1.8)(react@19.1.1)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.1.8)(react@19.1.1)
+      react: 19.1.1
+      react-dom: 19.1.1(react@19.1.1)
+    optionalDependencies:
+      '@types/react': 19.1.8
+      '@types/react-dom': 19.1.6(@types/react@19.1.8)
+
+  '@radix-ui/react-collection@1.1.7(@types/react-dom@19.1.6(@types/react@19.1.8))(@types/react@19.1.8)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)':
+    dependencies:
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.8)(react@19.1.1)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.1.8)(react@19.1.1)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.6(@types/react@19.1.8))(@types/react@19.1.8)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-slot': 1.2.3(@types/react@19.1.8)(react@19.1.1)
+      react: 19.1.1
+      react-dom: 19.1.1(react@19.1.1)
+    optionalDependencies:
+      '@types/react': 19.1.8
+      '@types/react-dom': 19.1.6(@types/react@19.1.8)
+
   '@radix-ui/react-compose-refs@1.1.2(@types/react@19.1.8)(react@19.1.1)':
     dependencies:
       react: 19.1.1
@@ -6296,6 +6629,12 @@ snapshots:
       '@types/react': 19.1.8
       '@types/react-dom': 19.1.6(@types/react@19.1.8)
 
+  '@radix-ui/react-direction@1.1.1(@types/react@19.1.8)(react@19.1.1)':
+    dependencies:
+      react: 19.1.1
+    optionalDependencies:
+      '@types/react': 19.1.8
+
   '@radix-ui/react-dismissable-layer@1.1.10(@types/react-dom@19.1.6(@types/react@19.1.8))(@types/react@19.1.8)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)':
     dependencies:
       '@radix-ui/primitive': 1.1.2
@@ -6309,6 +6648,21 @@ snapshots:
       '@types/react': 19.1.8
       '@types/react-dom': 19.1.6(@types/react@19.1.8)
 
+  '@radix-ui/react-dropdown-menu@2.1.15(@types/react-dom@19.1.6(@types/react@19.1.8))(@types/react@19.1.8)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.2
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.8)(react@19.1.1)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.1.8)(react@19.1.1)
+      '@radix-ui/react-id': 1.1.1(@types/react@19.1.8)(react@19.1.1)
+      '@radix-ui/react-menu': 2.1.15(@types/react-dom@19.1.6(@types/react@19.1.8))(@types/react@19.1.8)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.6(@types/react@19.1.8))(@types/react@19.1.8)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.1.8)(react@19.1.1)
+      react: 19.1.1
+      react-dom: 19.1.1(react@19.1.1)
+    optionalDependencies:
+      '@types/react': 19.1.8
+      '@types/react-dom': 19.1.6(@types/react@19.1.8)
+
   '@radix-ui/react-focus-guards@1.1.2(@types/react@19.1.8)(react@19.1.1)':
     dependencies:
       react: 19.1.1
@@ -6342,6 +6696,32 @@ snapshots:
       '@types/react': 19.1.8
       '@types/react-dom': 19.1.6(@types/react@19.1.8)
 
+  '@radix-ui/react-menu@2.1.15(@types/react-dom@19.1.6(@types/react@19.1.8))(@types/react@19.1.8)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.2
+      '@radix-ui/react-collection': 1.1.7(@types/react-dom@19.1.6(@types/react@19.1.8))(@types/react@19.1.8)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.8)(react@19.1.1)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.1.8)(react@19.1.1)
+      '@radix-ui/react-direction': 1.1.1(@types/react@19.1.8)(react@19.1.1)
+      '@radix-ui/react-dismissable-layer': 1.1.10(@types/react-dom@19.1.6(@types/react@19.1.8))(@types/react@19.1.8)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-focus-guards': 1.1.2(@types/react@19.1.8)(react@19.1.1)
+      '@radix-ui/react-focus-scope': 1.1.7(@types/react-dom@19.1.6(@types/react@19.1.8))(@types/react@19.1.8)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-id': 1.1.1(@types/react@19.1.8)(react@19.1.1)
+      '@radix-ui/react-popper': 1.2.7(@types/react-dom@19.1.6(@types/react@19.1.8))(@types/react@19.1.8)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-portal': 1.1.9(@types/react-dom@19.1.6(@types/react@19.1.8))(@types/react@19.1.8)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-presence': 1.1.4(@types/react-dom@19.1.6(@types/react@19.1.8))(@types/react@19.1.8)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.6(@types/react@19.1.8))(@types/react@19.1.8)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-roving-focus': 1.1.10(@types/react-dom@19.1.6(@types/react@19.1.8))(@types/react@19.1.8)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-slot': 1.2.3(@types/react@19.1.8)(react@19.1.1)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.1.8)(react@19.1.1)
+      aria-hidden: 1.2.6
+      react: 19.1.1
+      react-dom: 19.1.1(react@19.1.1)
+      react-remove-scroll: 2.7.1(@types/react@19.1.8)(react@19.1.1)
+    optionalDependencies:
+      '@types/react': 19.1.8
+      '@types/react-dom': 19.1.6(@types/react@19.1.8)
+
   '@radix-ui/react-popover@1.1.14(@types/react-dom@19.1.6(@types/react@19.1.8))(@types/react@19.1.8)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)':
     dependencies:
       '@radix-ui/primitive': 1.1.2
@@ -6412,6 +6792,61 @@ snapshots:
       '@types/react': 19.1.8
       '@types/react-dom': 19.1.6(@types/react@19.1.8)
 
+  '@radix-ui/react-roving-focus@1.1.10(@types/react-dom@19.1.6(@types/react@19.1.8))(@types/react@19.1.8)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.2
+      '@radix-ui/react-collection': 1.1.7(@types/react-dom@19.1.6(@types/react@19.1.8))(@types/react@19.1.8)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.8)(react@19.1.1)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.1.8)(react@19.1.1)
+      '@radix-ui/react-direction': 1.1.1(@types/react@19.1.8)(react@19.1.1)
+      '@radix-ui/react-id': 1.1.1(@types/react@19.1.8)(react@19.1.1)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.6(@types/react@19.1.8))(@types/react@19.1.8)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.1.8)(react@19.1.1)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.1.8)(react@19.1.1)
+      react: 19.1.1
+      react-dom: 19.1.1(react@19.1.1)
+    optionalDependencies:
+      '@types/react': 19.1.8
+      '@types/react-dom': 19.1.6(@types/react@19.1.8)
+
+  '@radix-ui/react-select@2.2.5(@types/react-dom@19.1.6(@types/react@19.1.8))(@types/react@19.1.8)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)':
+    dependencies:
+      '@radix-ui/number': 1.1.1
+      '@radix-ui/primitive': 1.1.2
+      '@radix-ui/react-collection': 1.1.7(@types/react-dom@19.1.6(@types/react@19.1.8))(@types/react@19.1.8)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.8)(react@19.1.1)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.1.8)(react@19.1.1)
+      '@radix-ui/react-direction': 1.1.1(@types/react@19.1.8)(react@19.1.1)
+      '@radix-ui/react-dismissable-layer': 1.1.10(@types/react-dom@19.1.6(@types/react@19.1.8))(@types/react@19.1.8)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-focus-guards': 1.1.2(@types/react@19.1.8)(react@19.1.1)
+      '@radix-ui/react-focus-scope': 1.1.7(@types/react-dom@19.1.6(@types/react@19.1.8))(@types/react@19.1.8)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-id': 1.1.1(@types/react@19.1.8)(react@19.1.1)
+      '@radix-ui/react-popper': 1.2.7(@types/react-dom@19.1.6(@types/react@19.1.8))(@types/react@19.1.8)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-portal': 1.1.9(@types/react-dom@19.1.6(@types/react@19.1.8))(@types/react@19.1.8)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.6(@types/react@19.1.8))(@types/react@19.1.8)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-slot': 1.2.3(@types/react@19.1.8)(react@19.1.1)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.1.8)(react@19.1.1)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.1.8)(react@19.1.1)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.1.8)(react@19.1.1)
+      '@radix-ui/react-use-previous': 1.1.1(@types/react@19.1.8)(react@19.1.1)
+      '@radix-ui/react-visually-hidden': 1.2.3(@types/react-dom@19.1.6(@types/react@19.1.8))(@types/react@19.1.8)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      aria-hidden: 1.2.6
+      react: 19.1.1
+      react-dom: 19.1.1(react@19.1.1)
+      react-remove-scroll: 2.7.1(@types/react@19.1.8)(react@19.1.1)
+    optionalDependencies:
+      '@types/react': 19.1.8
+      '@types/react-dom': 19.1.6(@types/react@19.1.8)
+
+  '@radix-ui/react-separator@1.1.7(@types/react-dom@19.1.6(@types/react@19.1.8))(@types/react@19.1.8)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)':
+    dependencies:
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.6(@types/react@19.1.8))(@types/react@19.1.8)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      react: 19.1.1
+      react-dom: 19.1.1(react@19.1.1)
+    optionalDependencies:
+      '@types/react': 19.1.8
+      '@types/react-dom': 19.1.6(@types/react@19.1.8)
+
   '@radix-ui/react-slot@1.2.3(@types/react@19.1.8)(react@19.1.1)':
     dependencies:
       '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.8)(react@19.1.1)
@@ -6419,6 +6854,22 @@ snapshots:
     optionalDependencies:
       '@types/react': 19.1.8
 
+  '@radix-ui/react-tabs@1.1.12(@types/react-dom@19.1.6(@types/react@19.1.8))(@types/react@19.1.8)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.2
+      '@radix-ui/react-context': 1.1.2(@types/react@19.1.8)(react@19.1.1)
+      '@radix-ui/react-direction': 1.1.1(@types/react@19.1.8)(react@19.1.1)
+      '@radix-ui/react-id': 1.1.1(@types/react@19.1.8)(react@19.1.1)
+      '@radix-ui/react-presence': 1.1.4(@types/react-dom@19.1.6(@types/react@19.1.8))(@types/react@19.1.8)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.6(@types/react@19.1.8))(@types/react@19.1.8)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-roving-focus': 1.1.10(@types/react-dom@19.1.6(@types/react@19.1.8))(@types/react@19.1.8)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.1.8)(react@19.1.1)
+      react: 19.1.1
+      react-dom: 19.1.1(react@19.1.1)
+    optionalDependencies:
+      '@types/react': 19.1.8
+      '@types/react-dom': 19.1.6(@types/react@19.1.8)
+
   '@radix-ui/react-use-callback-ref@1.1.1(@types/react@19.1.8)(react@19.1.1)':
     dependencies:
       react: 19.1.1
@@ -6447,12 +6898,25 @@ snapshots:
     optionalDependencies:
       '@types/react': 19.1.8
 
+  '@radix-ui/react-use-is-hydrated@0.1.0(@types/react@19.1.8)(react@19.1.1)':
+    dependencies:
+      react: 19.1.1
+      use-sync-external-store: 1.5.0(react@19.1.1)
+    optionalDependencies:
+      '@types/react': 19.1.8
+
   '@radix-ui/react-use-layout-effect@1.1.1(@types/react@19.1.8)(react@19.1.1)':
     dependencies:
       react: 19.1.1
     optionalDependencies:
       '@types/react': 19.1.8
 
+  '@radix-ui/react-use-previous@1.1.1(@types/react@19.1.8)(react@19.1.1)':
+    dependencies:
+      react: 19.1.1
+    optionalDependencies:
+      '@types/react': 19.1.8
+
   '@radix-ui/react-use-rect@1.1.1(@types/react@19.1.8)(react@19.1.1)':
     dependencies:
       '@radix-ui/rect': 1.1.1
@@ -6467,6 +6931,15 @@ snapshots:
     optionalDependencies:
       '@types/react': 19.1.8
 
+  '@radix-ui/react-visually-hidden@1.2.3(@types/react-dom@19.1.6(@types/react@19.1.8))(@types/react@19.1.8)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)':
+    dependencies:
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.6(@types/react@19.1.8))(@types/react@19.1.8)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      react: 19.1.1
+      react-dom: 19.1.1(react@19.1.1)
+    optionalDependencies:
+      '@types/react': 19.1.8
+      '@types/react-dom': 19.1.6(@types/react@19.1.8)
+
   '@radix-ui/rect@1.1.1': {}
 
   '@react-router/dev@7.7.1(@react-router/serve@7.7.1(react-router@7.7.1(react-dom@19.1.1(react@19.1.1))(react@19.1.1))(typescript@5.8.3))(@types/node@20.19.9)(jiti@2.5.1)(lightningcss@1.30.1)(react-router@7.7.1(react-dom@19.1.1(react@19.1.1))(react@19.1.1))(typescript@5.8.3)(vite@6.3.5(@types/node@20.19.9)(jiti@2.5.1)(lightningcss@1.30.1)(yaml@2.8.0))(yaml@2.8.0)':
@@ -6706,6 +7179,27 @@ snapshots:
       tailwindcss: 4.1.11
       vite: 6.3.5(@types/node@20.19.9)(jiti@2.5.1)(lightningcss@1.30.1)(yaml@2.8.0)
 
+  '@tanstack/query-async-storage-persister@5.83.0':
+    dependencies:
+      '@tanstack/query-persist-client-core': 5.83.0
+
+  '@tanstack/query-core@5.83.0': {}
+
+  '@tanstack/query-persist-client-core@5.83.0':
+    dependencies:
+      '@tanstack/query-core': 5.83.0
+
+  '@tanstack/react-query-persist-client@5.83.0(@tanstack/react-query@5.83.0(react@19.1.1))(react@19.1.1)':
+    dependencies:
+      '@tanstack/query-persist-client-core': 5.83.0
+      '@tanstack/react-query': 5.83.0(react@19.1.1)
+      react: 19.1.1
+
+  '@tanstack/react-query@5.83.0(react@19.1.1)':
+    dependencies:
+      '@tanstack/query-core': 5.83.0
+      react: 19.1.1
+
   '@tokenizer/token@0.3.0': {}
 
   '@tsconfig/node10@1.0.11': {}
@@ -6724,6 +7218,8 @@ snapshots:
     dependencies:
       '@types/node': 20.19.9
 
+  '@types/luxon@3.7.0': {}
+
   '@types/node@20.19.9':
     dependencies:
       undici-types: 6.21.0
@@ -7316,6 +7812,8 @@ snapshots:
 
   commander@2.20.3: {}
 
+  commander@8.3.0: {}
+
   commander@9.5.0: {}
 
   comment-json@4.2.5:
@@ -7457,6 +7955,10 @@ snapshots:
 
   data-uri-to-buffer@4.0.1: {}
 
+  date-fns-jalali@4.1.0-0: {}
+
+  date-fns@4.1.0: {}
+
   debug@2.6.9:
     dependencies:
       ms: 2.0.0
@@ -7640,6 +8142,8 @@ snapshots:
 
   entities@4.5.0: {}
 
+  entities@6.0.1: {}
+
   env-paths@3.0.0: {}
 
   envinfo@7.14.0: {}
@@ -8178,6 +8682,13 @@ snapshots:
     optionalDependencies:
       unix-dgram: 2.0.6
 
+  htmlparser2@10.0.0:
+    dependencies:
+      domelementtype: 2.3.0
+      domhandler: 5.0.3
+      domutils: 3.2.2
+      entities: 6.0.1
+
   http-cache-semantics@4.2.0: {}
 
   http-errors@1.8.1:
@@ -8240,6 +8751,8 @@ snapshots:
     dependencies:
       safer-buffer: 2.1.2
 
+  idb-keyval@6.2.2: {}
+
   ieee754@1.2.1: {}
 
   ignore@7.0.5: {}
@@ -8298,7 +8811,7 @@ snapshots:
 
   ipaddr.js@1.9.1: {}
 
-  ipx@3.1.1(@netlify/blobs@10.0.7):
+  ipx@3.1.1(@netlify/blobs@10.0.7)(idb-keyval@6.2.2):
     dependencies:
       '@fastify/accept-negotiator': 2.0.1
       citty: 0.1.6
@@ -8314,7 +8827,7 @@ snapshots:
       sharp: 0.34.3
       svgo: 4.0.0
       ufo: 1.6.1
-      unstorage: 1.16.1(@netlify/blobs@10.0.7)
+      unstorage: 1.16.1(@netlify/blobs@10.0.7)(idb-keyval@6.2.2)
       xss: 1.0.15
     transitivePeerDependencies:
       - '@azure/app-configuration'
@@ -8485,6 +8998,10 @@ snapshots:
 
   jwt-decode@4.0.0: {}
 
+  katex@0.16.22:
+    dependencies:
+      commander: 8.3.0
+
   keep-func-props@6.0.0:
     dependencies:
       mimic-fn: 4.0.0
@@ -8810,7 +9327,7 @@ snapshots:
 
   negotiator@0.6.4: {}
 
-  netlify-cli@22.4.0(@types/node@20.19.9)(picomatch@4.0.3)(rollup@4.46.1):
+  netlify-cli@22.4.0(@types/node@20.19.9)(idb-keyval@6.2.2)(picomatch@4.0.3)(rollup@4.46.1):
     dependencies:
       '@fastify/static': 7.0.4
       '@netlify/api': 14.0.3
@@ -8867,7 +9384,7 @@ snapshots:
       https-proxy-agent: 7.0.6(supports-color@10.0.0)
       inquirer: 8.2.6
       inquirer-autocomplete-prompt: 1.4.0(inquirer@8.2.6)
-      ipx: 3.1.1(@netlify/blobs@10.0.7)
+      ipx: 3.1.1(@netlify/blobs@10.0.7)(idb-keyval@6.2.2)
       is-docker: 3.0.0
       is-stream: 4.0.1
       is-wsl: 3.1.0
@@ -9374,11 +9891,24 @@ snapshots:
       minimist: 1.2.8
       strip-json-comments: 2.0.1
 
+  react-day-picker@9.8.1(react@19.1.1):
+    dependencies:
+      '@date-fns/tz': 1.2.0
+      date-fns: 4.1.0
+      date-fns-jalali: 4.1.0-0
+      react: 19.1.1
+
   react-dom@19.1.1(react@19.1.1):
     dependencies:
       react: 19.1.1
       scheduler: 0.26.0
 
+  react-latex-next@3.0.0(react-dom@19.1.1(react@19.1.1))(react@19.1.1):
+    dependencies:
+      katex: 0.16.22
+      react: 19.1.1
+      react-dom: 19.1.1(react@19.1.1)
+
   react-refresh@0.14.2: {}
 
   react-remove-scroll-bar@2.3.8(@types/react@19.1.8)(react@19.1.1):
@@ -9711,6 +10241,11 @@ snapshots:
     dependencies:
       atomic-sleep: 1.0.0
 
+  sonner@2.0.6(react-dom@19.1.1(react@19.1.1))(react@19.1.1):
+    dependencies:
+      react: 19.1.1
+      react-dom: 19.1.1(react@19.1.1)
+
   sort-keys-length@1.0.1:
     dependencies:
       sort-keys: 1.1.2
@@ -10009,7 +10544,7 @@ snapshots:
 
   unpipe@1.0.0: {}
 
-  unstorage@1.16.1(@netlify/blobs@10.0.7):
+  unstorage@1.16.1(@netlify/blobs@10.0.7)(idb-keyval@6.2.2):
     dependencies:
       anymatch: 3.1.3
       chokidar: 4.0.3
@@ -10021,6 +10556,7 @@ snapshots:
       ufo: 1.6.1
     optionalDependencies:
       '@netlify/blobs': 10.0.7
+      idb-keyval: 6.2.2
 
   untildify@4.0.0: {}
 
@@ -10070,6 +10606,10 @@ snapshots:
     optionalDependencies:
       '@types/react': 19.1.8
 
+  use-sync-external-store@1.5.0(react@19.1.1):
+    dependencies:
+      react: 19.1.1
+
   util-deprecate@1.0.2: {}
 
   utils-merge@1.0.1: {}

public/classes.json

@@ -0,0 +1,6 @@
+[
+  {
+    "value": "MPSI 2",
+    "label": "MPSI 2 - Taupe"
+  }
+]