sort subjects according to name in academics sidebar

Author: parthsali

app/(main)/academics/AcademicsSidebar.tsx

@@ -16,6 +16,43 @@ export default function AcademicsSidebar({
   subjects,
   isSyllabusSelected,
 }: AcademicsSidebarProps) {
+  const formattedSubjects = React.useMemo(() => {
+    // Helper: extract Roman numeral from name/code
+    const getElectiveNumber = (text?: string): number => {
+      if (!text) return 99;
+      const match = text.match(/elective[-\s]*(i{1,3}|iv|v|vi)/i);
+      const map: Record<string, number> = {
+        i: 1,
+        ii: 2,
+        iii: 3,
+        iv: 4,
+        v: 5,
+        vi: 6,
+      };
+      return match ? map[match[1].toLowerCase()] || 99 : 99;
+    };
+
+    const normal = subjects.filter(
+      (s) =>
+        !s.code?.toLowerCase().includes("elective") &&
+        !s.name?.toLowerCase().includes("elective")
+    );
+
+    const electives = subjects
+      .filter(
+        (s) =>
+          s.code?.toLowerCase().includes("elective") ||
+          s.name?.toLowerCase().includes("elective")
+      )
+      .sort(
+        (a, b) =>
+          getElectiveNumber(a.code || a.name) -
+          getElectiveNumber(b.code || b.name)
+      );
+
+    return [...normal, ...electives];
+  }, [subjects]);
+
   return (
     <div className="h-full flex flex-col bg-card border-r">
       <div className="p-3 border-b">
@@ -24,16 +61,16 @@ export default function AcademicsSidebar({
 
       <ScrollArea className="flex-1">
         <div className="p-2">
-          {subjects.length > 0 &&
-            subjects.map((subject) => (
+          {formattedSubjects.length > 0 &&
+            formattedSubjects.map((subject) => (
               <SubjectTreeItem
                 key={subject._id}
                 subject={subject}
                 onFileSelect={onFileSelect}
               />
             ))}
 
-          {isSyllabusSelected && subjects.length === 0 && (
+          {isSyllabusSelected && formattedSubjects.length === 0 && (
             <div className="p-4 text-center text-sm text-muted-foreground">
               No subjects found for this syllabus.
             </div>

app/(main)/academics/SubjectTreeItem.tsx

@@ -11,7 +11,12 @@ import { Button } from "@/components/ui/button";
 import { Loader2, ChevronRight, Folder, FileText } from "lucide-react";
 import { ActiveFile, File } from "@/types/file";
 import { Subject } from "@/types/subject";
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
 
 // ✨ CHANGED: Imported types
 
@@ -116,27 +121,27 @@ export function SubjectTreeItem({
   return (
     <Collapsible onOpenChange={handleOpen} className="group">
       <CollapsibleTrigger asChild>
-      <TooltipProvider>
-  <CollapsibleTrigger asChild>
-    <Button variant="ghost" className="w-full justify-start gap-2 pr-2 h-9">
-      <Tooltip>
-        <TooltipTrigger asChild>
-          <span className="flex w-full items-center gap-2">
-            <Folder className="h-4 w-4" />
-            <span className="flex-1 text-left truncate font-medium">
-              {subject.code}
-            </span>
-            <ChevronRight className="h-4 w-4 shrink-0 transition-transform duration-200 group-data-[state=open]:rotate-90" />
-          </span>
-        </TooltipTrigger>
-        <TooltipContent>
-          {subject.name}
-        </TooltipContent>
-      </Tooltip>
-    </Button>
-  </CollapsibleTrigger>
-</TooltipProvider>
-
+        <TooltipProvider>
+          <CollapsibleTrigger asChild>
+            <Button
+              variant="ghost"
+              className="w-full justify-start gap-2 pr-2 h-9"
+            >
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <span className="flex w-full items-center gap-2">
+                    <Folder className="h-4 w-4" />
+                    <span className="flex-1 text-left truncate font-medium">
+                      {subject.code}
+                    </span>
+                    <ChevronRight className="h-4 w-4 shrink-0 transition-transform duration-200 group-data-[state=open]:rotate-90" />
+                  </span>
+                </TooltipTrigger>
+                <TooltipContent>{subject.name}</TooltipContent>
+              </Tooltip>
+            </Button>
+          </CollapsibleTrigger>
+        </TooltipProvider>
       </CollapsibleTrigger>
       <CollapsibleContent>
         <div className="pl-6 border-l border-muted ml-[11px] py-1 space-y-0.5">