feat: replace dropdown with checkbox

Author: beastgwert

src/pages/content/index.tsx

@@ -1,12 +1,16 @@
 import CourseCatalogMain from '@views/components/CourseCatalogMain';
 import InjectedButton from '@views/components/injected/AddAllButton';
+import DaysCheckbox from 'src/views/components/injected/DaysCheckbox';
 import getSiteSupport, { SiteSupport } from '@views/lib/getSiteSupport';
 import React from 'react';
 import { createRoot } from 'react-dom/client';
 
 const support = getSiteSupport(window.location.href);
 
 const renderComponent = (Component: React.ComponentType) => {
+    // Simple console log for component rendering
+    console.log('Rendering component:', Component.name || 'Anonymous');
+
     const container = document.createElement('div');
     container.id = 'extension-root';
     document.body.appendChild(container);
@@ -25,3 +29,7 @@ if (support === SiteSupport.COURSE_CATALOG_DETAILS || support === SiteSupport.CO
 if (support === SiteSupport.MY_UT) {
     renderComponent(InjectedButton);
 }
+
+if (support === SiteSupport.COURSE_CATALOG_SEARCH) {
+    renderComponent(DaysCheckbox);
+}

src/views/components/injected/DaysCheckbox.tsx

@@ -0,0 +1,96 @@
+import ExtensionRoot from '@views/components/common/ExtensionRoot/ExtensionRoot';
+import React, { useEffect, useState } from 'react';
+import ReactDOM from 'react-dom';
+
+/**
+ * Component that transforms the days dropdown into a series of checkboxes
+ * on the course catalog search page
+ *
+ * @returns The rendered checkbox component or null if the container is not found.
+ */
+export default function DaysCheckbox(): JSX.Element | null {
+    const [container, setContainer] = useState<HTMLDivElement | null>(null);
+    const [daysValue, setDaysValue] = useState<string>('000000');
+
+    const days = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
+
+    useEffect(() => {
+        const daysDropdown = document.getElementById('mtg_days_st') as HTMLSelectElement | null;
+        if (!daysDropdown) {
+            console.error('Days dropdown not found');
+            return;
+        }
+
+        const formElement = daysDropdown.closest('.form_element')!;
+        const checkboxContainer = document.createElement('div');
+
+        // Create a hidden input to store the value
+        const hiddenInput = document.createElement('input');
+        hiddenInput.type = 'hidden';
+        hiddenInput.name = 'mtg_days_st';
+        hiddenInput.id = 'mtg_days_st_hidden';
+        hiddenInput.value = daysDropdown.value;
+
+        // Remove old dropdown
+        formElement.innerHTML = '';
+
+        // Add the label back
+        const newLabel = document.createElement('label');
+        newLabel.className = 'primary_label';
+        newLabel.htmlFor = 'mtg_days_st_hidden';
+        newLabel.textContent = 'AND days';
+
+        formElement.appendChild(newLabel);
+        formElement.appendChild(hiddenInput);
+        formElement.appendChild(checkboxContainer);
+        setContainer(checkboxContainer);
+
+        return () => {
+            checkboxContainer.remove();
+        };
+    }, []);
+
+    useEffect(() => {
+        // Update hidden input when daysValue changes
+        const hiddenInput = document.getElementById('mtg_days_st_hidden') as HTMLInputElement | null;
+        if (hiddenInput) {
+            hiddenInput.value = daysValue;
+        }
+    }, [daysValue]);
+
+    const handleDayChange = (position: number, checked: boolean) => {
+        setDaysValue(prev => {
+            const currentValue = prev.split('');
+            currentValue[position] = checked ? '1' : '0';
+            return currentValue.join('');
+        });
+    };
+
+    if (!container) {
+        return null;
+    }
+
+    return ReactDOM.createPortal(
+        <ExtensionRoot>
+            <div className='flex flex-col gap-0.5 mt-1'>
+                {days.map((day, index) => (
+                    <div key={day} className='flex items-center'>
+                        <input
+                            type='checkbox'
+                            id={`day_${day}`}
+                            checked={daysValue !== '000000' && daysValue.charAt(index) === '1'}
+                            onChange={e => {
+                                handleDayChange(index, e.target.checked);
+                            }}
+                            className='form-checkbox'
+                        />
+                        <label htmlFor={`day_${day}`} className='ml-1'>
+                            {day}
+                        </label>
+                    </div>
+                ))}
+            </div>
+        </ExtensionRoot>,
+        container
+    );
+}

src/views/lib/getSiteSupport.ts

@@ -13,6 +13,7 @@ export const SiteSupport = {
     MY_CALENDAR: 'MY_CALENDAR',
     REPORT_ISSUE: 'REPORT_ISSUE',
     MY_UT: 'MY_UT',
+    COURSE_CATALOG_SEARCH: 'COURSE_CATALOG_SEARCH',
     CLASSLIST: 'CLASSLIST',
 } as const;
 
@@ -45,6 +46,7 @@ export default function getSiteSupport(url: string): SiteSupportType | null {
         if (document.querySelector('#details')) {
             return SiteSupport.COURSE_CATALOG_DETAILS;
         }
+        return SiteSupport.COURSE_CATALOG_SEARCH;
     }
     if (url.includes('utdirect.utexas.edu') && (url.includes('waitlist') || url.includes('classlist'))) {
         return SiteSupport.WAITLIST;