From 26d17c163d56a235c2157e4a664dab30b49a057f Mon Sep 17 00:00:00 2001
From: Tyler Hill <gotyhill@gmail.com>
Date: Sat, 23 Nov 2024 15:17:36 -0600
Subject: [PATCH 1/9] Collapsible RHS

---
 .../navigation/Carousel/carousel.tsx          | 65 +++++++++--------
 .../navigation/tabNavMenu/tabNavMenu.tsx      | 70 ++++++++++++-------
 2 files changed, 83 insertions(+), 52 deletions(-)

diff --git a/src/components/navigation/Carousel/carousel.tsx b/src/components/navigation/Carousel/carousel.tsx
index e515c5b6..53a87101 100644
--- a/src/components/navigation/Carousel/carousel.tsx
+++ b/src/components/navigation/Carousel/carousel.tsx
@@ -1,6 +1,7 @@
 import type { ReactJSXElement } from '@emotion/react/types/jsx-namespace';
+import { Collapse, useMediaQuery } from '@mui/material';
 import { AnimatePresence, motion } from 'framer-motion';
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 
 import { TabNavMenu } from '@/components/navigation/tabNavMenu/tabNavMenu';
 
@@ -69,6 +70,10 @@ const Carousel = ({ names, children, compareLength }: CarouselProps) => {
     });
   };
 
+  const isSmallScreen = useMediaQuery('(max-width: 600px)');
+  const [open, setOpen] = useState(!isSmallScreen);
+  useEffect(() => setOpen(!isSmallScreen), [isSmallScreen]);
+
   return (
     <>
       <TabNavMenu
@@ -76,34 +81,38 @@ const Carousel = ({ names, children, compareLength }: CarouselProps) => {
         options={Array.isArray(names) ? names : [names]}
         turner={turn}
         compareLength={compareLength}
+        open={open}
+        setOpen={setOpen}
       />
-      <AnimatePresence>
-        <div className="p-4 lg:p-6">
-          <motion.div
-            key={currentCard}
-            custom={direction}
-            variants={variants}
-            initial="enter"
-            animate="center"
-            exit="exit"
-            transition={{
-              x: { type: 'spring', stiffness: 300, damping: 30 },
-              opacity: { duration: 0.2 },
-            }}
-          >
-            {Array.isArray(children)
-              ? children.map((child, index) => (
-                  <div
-                    key={index}
-                    className={index === currentCard ? 'block' : 'hidden'}
-                  >
-                    {child}
-                  </div>
-                ))
-              : children}
-          </motion.div>
-        </div>
-      </AnimatePresence>
+      <Collapse in={open}>
+        <AnimatePresence>
+          <div className="p-4 lg:p-6">
+            <motion.div
+              key={currentCard}
+              custom={direction}
+              variants={variants}
+              initial="enter"
+              animate="center"
+              exit="exit"
+              transition={{
+                x: { type: 'spring', stiffness: 300, damping: 30 },
+                opacity: { duration: 0.2 },
+              }}
+            >
+              {Array.isArray(children)
+                ? children.map((child, index) => (
+                    <div
+                      key={index}
+                      className={index === currentCard ? 'block' : 'hidden'}
+                    >
+                      {child}
+                    </div>
+                  ))
+                : children}
+            </motion.div>
+          </div>
+        </AnimatePresence>
+      </Collapse>
     </>
   );
 };
diff --git a/src/components/navigation/tabNavMenu/tabNavMenu.tsx b/src/components/navigation/tabNavMenu/tabNavMenu.tsx
index f75a10a0..2e28009f 100644
--- a/src/components/navigation/tabNavMenu/tabNavMenu.tsx
+++ b/src/components/navigation/tabNavMenu/tabNavMenu.tsx
@@ -1,4 +1,5 @@
-import { Badge, Tab, Tabs } from '@mui/material';
+import KeyboardArrowIcon from '@mui/icons-material/KeyboardArrowRight';
+import { Badge, IconButton, Tab, Tabs, useMediaQuery } from '@mui/material';
 import React from 'react';
 
 /**
@@ -11,6 +12,8 @@ type TabNavMenuProps = {
   turner: (displacement: number) => void;
   options: string[];
   compareLength: number;
+  open: boolean;
+  setOpen: (arg0: boolean) => void;
 };
 
 /**
@@ -19,30 +22,49 @@ type TabNavMenuProps = {
  * which are held by the parent and passed to this component to be manipulated by the Tabs component.
  */
 export const TabNavMenu = (props: TabNavMenuProps) => {
+  const isSmallScreen = useMediaQuery('(max-width: 600px)');
   return (
-    <Tabs
-      value={props.value}
-      onChange={(event, newValue) => props.turner(newValue - props.value)}
-      aria-label="Tab switcher"
-      className="w-full grid grid-flow-row justify-center shadow dark:shadow-lg"
-    >
-      {props.options.map((option, index) => (
-        <Tab
-          key={index}
-          className="text-lg text-gray-600 dark:text-gray-200 normal-case"
-          value={index}
-          label={
-            index === props.options.length - 1 && props.compareLength ? (
-              <div className="flex items-center gap-4">
-                {option}
-                <Badge badgeContent={props.compareLength} color="primary" />
-              </div>
-            ) : (
-              option
-            )
+    <div className="w-full flex items-center">
+      {isSmallScreen && (
+        <IconButton
+          aria-label="open overview"
+          onClick={() => props.setOpen(!props.open)}
+          size="medium"
+          className={
+            'ml-2 transition-transform' + (props.open ? ' rotate-90' : '')
           }
-        />
-      ))}
-    </Tabs>
+        >
+          <KeyboardArrowIcon fontSize="inherit" />
+        </IconButton>
+      )}
+      <div className="flex-1 min-w-0 flex justify-center">
+        <Tabs
+          value={props.value}
+          onChange={(event, newValue) => props.turner(newValue - props.value)}
+          aria-label="Tab switcher"
+          className="shadow dark:shadow-lg"
+          variant="scrollable"
+        >
+          {props.options.map((option, index) => (
+            <Tab
+              key={index}
+              className="text-lg text-gray-600 dark:text-gray-200 normal-case"
+              value={index}
+              label={
+                index === props.options.length - 1 && props.compareLength ? (
+                  <div className="flex items-center gap-4">
+                    {option}
+                    <Badge badgeContent={props.compareLength} color="primary" />
+                  </div>
+                ) : (
+                  option
+                )
+              }
+              onClick={() => props.setOpen(true)}
+            />
+          ))}
+        </Tabs>
+      </div>
+    </div>
   );
 };

From ce4351bcb92eb60f20f9c4d4b5b42acb40ccaa4d Mon Sep 17 00:00:00 2001
From: Tyler Hill <gotyhill@gmail.com>
Date: Sat, 23 Nov 2024 15:17:52 -0600
Subject: [PATCH 2/9] Fix search results table dropdown button size

---
 .../SearchResultsTable/searchResultsTable.tsx   | 17 ++++++-----------
 1 file changed, 6 insertions(+), 11 deletions(-)

diff --git a/src/components/search/SearchResultsTable/searchResultsTable.tsx b/src/components/search/SearchResultsTable/searchResultsTable.tsx
index 88860d04..e6e44f11 100644
--- a/src/components/search/SearchResultsTable/searchResultsTable.tsx
+++ b/src/components/search/SearchResultsTable/searchResultsTable.tsx
@@ -34,12 +34,10 @@ import type { GenericFetchedData, GradesType } from '@/pages/dashboard/index';
 function LoadingRow() {
   return (
     <TableRow>
-      <TableCell>
-        <IconButton aria-label="expand row" size="small" disabled>
+      <TableCell className="flex gap-1">
+        <IconButton aria-label="expand row" size="medium" disabled>
           <KeyboardArrowIcon />
         </IconButton>
-      </TableCell>
-      <TableCell>
         <Checkbox disabled />
       </TableCell>
       <TableCell component="th" scope="row" className="w-full">
@@ -107,22 +105,20 @@ function Row({
         onClick={() => setOpen(!open)} // opens/closes the card by clicking anywhere on the row
         className="cursor-pointer"
       >
-        <TableCell className="border-b-0">
+        <TableCell className="border-b-0 flex gap-1">
           <Tooltip
             title={open ? 'Minimize Result' : 'Expand Result'}
             placement="top"
           >
             <IconButton
               aria-label="expand row"
-              size="small"
+              size="medium"
               onClick={() => setOpen(!open)}
               className={'transition-transform' + (open ? ' rotate-90' : '')}
             >
-              <KeyboardArrowIcon />
+              <KeyboardArrowIcon fontSize="inherit" />
             </IconButton>
           </Tooltip>
-        </TableCell>
-        <TableCell className="border-b-0">
           <Tooltip
             title={inCompare ? 'Remove from Compare' : 'Add to Compare'}
             placement="top"
@@ -446,8 +442,7 @@ const SearchResultsTable = ({
         <Table stickyHeader aria-label="collapsible table">
           <TableHead>
             <TableRow>
-              <TableCell />
-              <TableCell>Compare</TableCell>
+              <TableCell>Actions</TableCell>
               <TableCell>
                 <TableSortLabel
                   active={orderBy === 'name'}

From 1a26b78501a7be1336abab2ba19818a52a622080 Mon Sep 17 00:00:00 2001
From: Tyler Hill <gotyhill@gmail.com>
Date: Wed, 27 Nov 2024 12:56:10 -0600
Subject: [PATCH 3/9] Remove useMediaQuery in tabNavMenu

---
 .../navigation/tabNavMenu/tabNavMenu.tsx      | 23 ++++++++-----------
 1 file changed, 10 insertions(+), 13 deletions(-)

diff --git a/src/components/navigation/tabNavMenu/tabNavMenu.tsx b/src/components/navigation/tabNavMenu/tabNavMenu.tsx
index 2e28009f..761c6f1f 100644
--- a/src/components/navigation/tabNavMenu/tabNavMenu.tsx
+++ b/src/components/navigation/tabNavMenu/tabNavMenu.tsx
@@ -22,21 +22,18 @@ type TabNavMenuProps = {
  * which are held by the parent and passed to this component to be manipulated by the Tabs component.
  */
 export const TabNavMenu = (props: TabNavMenuProps) => {
-  const isSmallScreen = useMediaQuery('(max-width: 600px)');
   return (
     <div className="w-full flex items-center">
-      {isSmallScreen && (
-        <IconButton
-          aria-label="open overview"
-          onClick={() => props.setOpen(!props.open)}
-          size="medium"
-          className={
-            'ml-2 transition-transform' + (props.open ? ' rotate-90' : '')
-          }
-        >
-          <KeyboardArrowIcon fontSize="inherit" />
-        </IconButton>
-      )}
+      <IconButton
+        aria-label="open overview"
+        onClick={() => props.setOpen(!props.open)}
+        size="medium"
+        className={
+          'sm:hidden ml-2 transition-transform' + (props.open ? ' rotate-90' : '')
+        }
+      >
+        <KeyboardArrowIcon fontSize="inherit" />
+      </IconButton>
       <div className="flex-1 min-w-0 flex justify-center">
         <Tabs
           value={props.value}

From 435ed07cc0bb4fdf93635c3a43e36356b5796181 Mon Sep 17 00:00:00 2001
From: Tyler Hill <gotyhill@gmail.com>
Date: Wed, 27 Nov 2024 12:59:11 -0600
Subject: [PATCH 4/9] Increase touch target

---
 .../navigation/tabNavMenu/tabNavMenu.tsx           | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/src/components/navigation/tabNavMenu/tabNavMenu.tsx b/src/components/navigation/tabNavMenu/tabNavMenu.tsx
index 761c6f1f..edf76f71 100644
--- a/src/components/navigation/tabNavMenu/tabNavMenu.tsx
+++ b/src/components/navigation/tabNavMenu/tabNavMenu.tsx
@@ -23,13 +23,16 @@ type TabNavMenuProps = {
  */
 export const TabNavMenu = (props: TabNavMenuProps) => {
   return (
-    <div className="w-full flex items-center">
+    <div
+      className="w-full flex items-center cursor-pointer"
+      onClick={() => props.setOpen(!props.open)}
+    >
       <IconButton
         aria-label="open overview"
-        onClick={() => props.setOpen(!props.open)}
         size="medium"
         className={
-          'sm:hidden ml-2 transition-transform' + (props.open ? ' rotate-90' : '')
+          'sm:hidden ml-2 transition-transform' +
+          (props.open ? ' rotate-90' : '')
         }
       >
         <KeyboardArrowIcon fontSize="inherit" />
@@ -57,7 +60,10 @@ export const TabNavMenu = (props: TabNavMenuProps) => {
                   option
                 )
               }
-              onClick={() => props.setOpen(true)}
+              onClick={(e) => {
+                e.stopPropagation();
+                props.setOpen(true);
+              }}
             />
           ))}
         </Tabs>

From b95a1d26a9e2ca41ec683c9439c4d6f90ad33233 Mon Sep 17 00:00:00 2001
From: Tyler Hill <gotyhill@gmail.com>
Date: Wed, 27 Nov 2024 13:04:52 -0600
Subject: [PATCH 5/9] Revert "Increase touch target"

This reverts commit 435ed07cc0bb4fdf93635c3a43e36356b5796181.
---
 .../navigation/tabNavMenu/tabNavMenu.tsx           | 14 ++++----------
 1 file changed, 4 insertions(+), 10 deletions(-)

diff --git a/src/components/navigation/tabNavMenu/tabNavMenu.tsx b/src/components/navigation/tabNavMenu/tabNavMenu.tsx
index edf76f71..761c6f1f 100644
--- a/src/components/navigation/tabNavMenu/tabNavMenu.tsx
+++ b/src/components/navigation/tabNavMenu/tabNavMenu.tsx
@@ -23,16 +23,13 @@ type TabNavMenuProps = {
  */
 export const TabNavMenu = (props: TabNavMenuProps) => {
   return (
-    <div
-      className="w-full flex items-center cursor-pointer"
-      onClick={() => props.setOpen(!props.open)}
-    >
+    <div className="w-full flex items-center">
       <IconButton
         aria-label="open overview"
+        onClick={() => props.setOpen(!props.open)}
         size="medium"
         className={
-          'sm:hidden ml-2 transition-transform' +
-          (props.open ? ' rotate-90' : '')
+          'sm:hidden ml-2 transition-transform' + (props.open ? ' rotate-90' : '')
         }
       >
         <KeyboardArrowIcon fontSize="inherit" />
@@ -60,10 +57,7 @@ export const TabNavMenu = (props: TabNavMenuProps) => {
                   option
                 )
               }
-              onClick={(e) => {
-                e.stopPropagation();
-                props.setOpen(true);
-              }}
+              onClick={() => props.setOpen(true)}
             />
           ))}
         </Tabs>

From 2c34f4a0e6b0642de8f56670433eb5b82b281259 Mon Sep 17 00:00:00 2001
From: Tyler Hill <gotyhill@gmail.com>
Date: Wed, 27 Nov 2024 13:05:06 -0600
Subject: [PATCH 6/9] format

---
 src/components/navigation/tabNavMenu/tabNavMenu.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/navigation/tabNavMenu/tabNavMenu.tsx b/src/components/navigation/tabNavMenu/tabNavMenu.tsx
index 761c6f1f..dce3461b 100644
--- a/src/components/navigation/tabNavMenu/tabNavMenu.tsx
+++ b/src/components/navigation/tabNavMenu/tabNavMenu.tsx
@@ -29,7 +29,8 @@ export const TabNavMenu = (props: TabNavMenuProps) => {
         onClick={() => props.setOpen(!props.open)}
         size="medium"
         className={
-          'sm:hidden ml-2 transition-transform' + (props.open ? ' rotate-90' : '')
+          'sm:hidden ml-2 transition-transform' +
+          (props.open ? ' rotate-90' : '')
         }
       >
         <KeyboardArrowIcon fontSize="inherit" />

From a28a4461d1a39d05af4b9b7f88d861303744dfb0 Mon Sep 17 00:00:00 2001
From: Tyler Hill <gotyhill@gmail.com>
Date: Wed, 27 Nov 2024 13:23:53 -0600
Subject: [PATCH 7/9] Center actions vertically

---
 .../SearchResultsTable/searchResultsTable.tsx | 88 ++++++++++---------
 1 file changed, 47 insertions(+), 41 deletions(-)

diff --git a/src/components/search/SearchResultsTable/searchResultsTable.tsx b/src/components/search/SearchResultsTable/searchResultsTable.tsx
index e6e44f11..9133b92c 100644
--- a/src/components/search/SearchResultsTable/searchResultsTable.tsx
+++ b/src/components/search/SearchResultsTable/searchResultsTable.tsx
@@ -105,49 +105,55 @@ function Row({
         onClick={() => setOpen(!open)} // opens/closes the card by clicking anywhere on the row
         className="cursor-pointer"
       >
-        <TableCell className="border-b-0 flex gap-1">
-          <Tooltip
-            title={open ? 'Minimize Result' : 'Expand Result'}
-            placement="top"
-          >
-            <IconButton
-              aria-label="expand row"
-              size="medium"
-              onClick={() => setOpen(!open)}
-              className={'transition-transform' + (open ? ' rotate-90' : '')}
+        <TableCell className="border-b-0">
+          <div className="flex items-center gap-1">
+            <Tooltip
+              title={open ? 'Minimize Result' : 'Expand Result'}
+              placement="top"
             >
-              <KeyboardArrowIcon fontSize="inherit" />
-            </IconButton>
-          </Tooltip>
-          <Tooltip
-            title={inCompare ? 'Remove from Compare' : 'Add to Compare'}
-            placement="top"
-          >
-            <Checkbox
-              checked={inCompare}
-              onClick={(e) => {
-                e.stopPropagation(); // prevents opening/closing the card when clicking on the compare checkbox
-                if (inCompare) {
-                  removeFromCompare(course);
-                } else {
-                  addToCompare(course);
+              <IconButton
+                aria-label="expand row"
+                size="medium"
+                onClick={(e) => {
+                  e.stopPropagation(); // prevents double opening/closing
+                  setOpen(!open);
+                }}
+                className={'transition-transform' + (open ? ' rotate-90' : '')}
+              >
+                <KeyboardArrowIcon fontSize="inherit" />
+              </IconButton>
+            </Tooltip>
+            <Tooltip
+              title={inCompare ? 'Remove from Compare' : 'Add to Compare'}
+              placement="top"
+            >
+              <Checkbox
+                checked={inCompare}
+                onClick={(e) => {
+                  e.stopPropagation(); // prevents opening/closing the card when clicking on the compare checkbox
+                  if (inCompare) {
+                    removeFromCompare(course);
+                  } else {
+                    addToCompare(course);
+                  }
+                }}
+                disabled={
+                  (typeof grades !== 'undefined' &&
+                    grades.state === 'loading') ||
+                  (typeof rmp !== 'undefined' && rmp.state === 'loading')
                 }
-              }}
-              disabled={
-                (typeof grades !== 'undefined' && grades.state === 'loading') ||
-                (typeof rmp !== 'undefined' && rmp.state === 'loading')
-              }
-              sx={
-                color
-                  ? {
-                      '&.Mui-checked': {
-                        color: color,
-                      },
-                    }
-                  : undefined
-              } // Apply color if defined
-            />
-          </Tooltip>
+                sx={
+                  color
+                    ? {
+                        '&.Mui-checked': {
+                          color: color,
+                        },
+                      }
+                    : undefined
+                } // Apply color if defined
+              />
+            </Tooltip>
+          </div>
         </TableCell>
         <TableCell component="th" scope="row" className="w-full border-b-0">
           <Tooltip

From 496e730e25496c3e9d2902e2d1d577cf6ce4267f Mon Sep 17 00:00:00 2001
From: Tyler Hill <gotyhill@gmail.com>
Date: Wed, 27 Nov 2024 13:24:28 -0600
Subject: [PATCH 8/9] Remove useMediaQuery import

---
 src/components/navigation/tabNavMenu/tabNavMenu.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/navigation/tabNavMenu/tabNavMenu.tsx b/src/components/navigation/tabNavMenu/tabNavMenu.tsx
index dce3461b..6ba6c072 100644
--- a/src/components/navigation/tabNavMenu/tabNavMenu.tsx
+++ b/src/components/navigation/tabNavMenu/tabNavMenu.tsx
@@ -1,5 +1,5 @@
 import KeyboardArrowIcon from '@mui/icons-material/KeyboardArrowRight';
-import { Badge, IconButton, Tab, Tabs, useMediaQuery } from '@mui/material';
+import { Badge, IconButton, Tab, Tabs } from '@mui/material';
 import React from 'react';
 
 /**

From 806037000a97c8f3d432cf0b624120ac5e49251d Mon Sep 17 00:00:00 2001
From: Tyler Hill <gotyhill@gmail.com>
Date: Sun, 5 Jan 2025 17:22:55 -0600
Subject: [PATCH 9/9] Fix loading animation

---
 src/components/navigation/Carousel/carousel.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/navigation/Carousel/carousel.tsx b/src/components/navigation/Carousel/carousel.tsx
index 53a87101..87703798 100644
--- a/src/components/navigation/Carousel/carousel.tsx
+++ b/src/components/navigation/Carousel/carousel.tsx
@@ -71,7 +71,7 @@ const Carousel = ({ names, children, compareLength }: CarouselProps) => {
   };
 
   const isSmallScreen = useMediaQuery('(max-width: 600px)');
-  const [open, setOpen] = useState(!isSmallScreen);
+  const [open, setOpen] = useState(false);
   useEffect(() => setOpen(!isSmallScreen), [isSmallScreen]);
 
   return (