Fix: filter + sort bug

src/components/CatalogueContent.tsx

@@ -177,31 +177,6 @@ const CatalogueContentInner = ({ subject }: { subject: string | null }) => {
     void fetchPapers();
   }, [subject, isMounted, setPapers, setFilterOptions]);
 
-  useEffect(() => {
-    if (!papers.length) return;
-
-    const filtered = [...papers];
-
-    if (sortOption === "asc") {
-      filtered.sort((a, b) => a.year.localeCompare(b.year));
-    } else if (sortOption === "desc") {
-      filtered.sort((a, b) => b.year.localeCompare(a.year));
-    }
-
-    setFilteredPapers(filtered);
-  }, [
-    papers,
-    selectedExams,
-    selectedSlots,
-    selectedYears,
-    selectedSemesters,
-    selectedCampuses,
-    selectedAnswerKeyIncluded,
-    sortOption,
-    setFilteredPapers,
-    setAppliedFilters,
-  ]);
-
   useEffect(() => {
     if (!papers.length) return;
 
@@ -255,6 +230,7 @@ const CatalogueContentInner = ({ subject }: { subject: string | null }) => {
     selectedSemesters,
     selectedCampuses,
     selectedAnswerKeyIncluded,
+    sortOption,
     setFilteredPapers,
     setAppliedFilters,
   ]);

src/components/ReportButton.tsx

@@ -10,10 +10,12 @@ export default function ReportButton(){
   const { paperId, subject, exam, slot, year } = usePaper();
   const [open, setOpen] = useState(false);
   return (
-    <>
+    <> 
       <Button
+
         onClick={() => setOpen(true)}
         className="h-10 w-10 rounded p-0 text-white transition hover:bg-red-600 bg-red-500"
+        title="Report this paper"
       >
         <FaFlag className="text-sm" />
       </Button>

src/components/ShareButton.tsx

@@ -30,7 +30,7 @@ export default function ShareButton() {
   return (
     <Dialog>
       <DialogTrigger asChild>
-        <Button className="aspect-square h-10 w-10 p-0 rounded text-white bg-[#6536c1] transition hover:bg-[#7d4fc7]">
+        <Button className="aspect-square h-10 w-10 p-0 rounded text-white bg-[#6536c1] transition hover:bg-[#7d4fc7]" title="Share this paper">
           <FaShare />
         </Button>
       </DialogTrigger>
@@ -47,6 +47,7 @@ export default function ShareButton() {
             type="submit"
             size="sm"
             className="flex w-fit items-center justify-between gap-5 px-3"
+            title="Copy link to clipboard"
             onClick={async () => {
               await toast.promise(
                 navigator.clipboard.writeText(paperPath), // This is a promise

src/components/SideBar.tsx

@@ -19,8 +19,9 @@ function SideBar() {
     handleApplyFilters,
   } = useFilters();
   const exams =
-    filterOptions?.unique_exams.map((exam) => ({ label: exam, value: exam })) ??
-    [];
+    filterOptions?.unique_exams
+      .sort((a, b) => a.localeCompare(b))
+      .map((exam) => ({ label: exam, value: exam })) ?? [];
   const slots =
     filterOptions?.unique_slots
       .sort((a, b) => a.localeCompare(b, undefined, { numeric: true }))

src/components/UpcomingPaper.tsx

@@ -105,7 +105,7 @@ export default function PaperCard({ subject, slots }: PaperCardProps) {
 
         {
           <div className="mt-4 flex flex-wrap gap-2 font-play">
-            {slots?.map((slotValue, index) => (
+            {[...slots].sort().map((slotValue, index) => (
               <Capsule key={index}>{slotValue}</Capsule>
             ))}
           </div>

src/components/multi-select.tsx

@@ -307,7 +307,9 @@ export const MultiSelect = React.forwardRef<
                   </div>
                   <span>(Select All)</span>
                 </CommandItem>
-                {options.map((option) => {
+                {options
+                  .sort((a, b) => a.label.localeCompare(b.label))
+                  .map((option) => {
                   const isSelected = selectedValues.includes(option.value);
                   return (
                     <CommandItem

src/components/newPdfViewer.tsx

@@ -114,13 +114,15 @@ const Controls = memo(function Controls({documentId, toggleFullscreen, isFullscr
       <Button
       onClick={toggleFullscreen}
       className="h-10 w-10 rounded p-0 text-white bg-[#6536c1] transition hover:bg-[#7d4fc7]"
+      title={isFullscreen ? "Exit fullscreen" : "Enter fullscreen"}
       >
       {isFullscreen ? <Minimize2 size={24} /> : <Maximize2 size={24} />}
       </Button>
 
       <Button
         onClick={onDownload}
         className="h-10 w-10 rounded p-0 text-white bg-[#6536c1] transition hover:bg-[#7d4fc7]"
+        title="Download PDF"
       >
         <Download size={24} />
       </Button>
@@ -131,6 +133,7 @@ const Controls = memo(function Controls({documentId, toggleFullscreen, isFullscr
         onClick={zoomOut}
         disabled={typeof zoomLevel === "number" && zoomLevel <= 0.25}
         className="h-10 w-10 rounded p-0 text-white bg-[#6536c1] transition hover:bg-[#7d4fc7] disabled:bg-gray-400"
+        title="Zoom out"
       >
         <ZoomOut size={24} />
       </Button>
@@ -143,6 +146,7 @@ const Controls = memo(function Controls({documentId, toggleFullscreen, isFullscr
         onClick={zoomIn}
         disabled={typeof zoomLevel === "number" && zoomLevel >= 3}
         className="h-10 w-10 rounded p-0 text-white bg-[#6536c1] transition hover:bg-[#7d4fc7] disabled:bg-gray-400"
+        title="Zoom in"
       >
         <ZoomIn size={24} />
       </Button>