feat: add filters to search results page

apps/antalmanac/src/components/RightPane/CoursePane/CoursePaneButtonRow.tsx

@@ -16,6 +16,7 @@ import { usePostHog } from 'posthog-js/react';
 import { useCallback, useMemo, useState } from 'react';
 
 import { NotificationsDialog } from '$components/RightPane/AddedCourses/Notifications/NotificationsDialog';
+import { SearchFilter } from '$components/RightPane/SectionTable/SearchFilter';
 import analyticsEnum, { logAnalytics } from '$lib/analytics/analytics';
 import { useColumnStore, SECTION_TABLE_COLUMNS, type SectionTableColumn } from '$stores/ColumnStore';
 
@@ -180,6 +181,7 @@ export function CoursePaneButtonRow(props: CoursePaneButtonRowProps) {
 
             <ColumnToggleDropdown />
             <NotificationsDialog buttonSx={buttonSx} />
+            <SearchFilter buttonSx={buttonSx} />
         </Box>
     );
 }

apps/antalmanac/src/components/RightPane/SectionTable/SearchFilter.tsx

@@ -0,0 +1,55 @@
+import { Sort } from '@mui/icons-material';
+import { IconButton, Menu, MenuItem, Tooltip, type SxProps } from '@mui/material';
+import { useCallback, useState } from 'react';
+
+import { SORT_OPTIONS, useSectionFilterStore, type SortOption } from '$stores/SectionFilterStore';
+
+interface SearchFilterProps {
+    buttonSx?: SxProps;
+}
+
+export function SearchFilter({ buttonSx }: SearchFilterProps) {
+    const { sortBy, setSortBy } = useSectionFilterStore();
+    const [anchorEl, setAnchorEl] = useState<HTMLElement>();
+    const open = Boolean(anchorEl);
+
+    const handleClick = useCallback((event: React.MouseEvent<HTMLButtonElement>) => {
+        setAnchorEl(event.currentTarget);
+    }, []);
+
+    const handleClose = useCallback(() => {
+        setAnchorEl(undefined);
+    }, []);
+
+    const handleSelect = useCallback(
+        (value: SortOption) => {
+            setSortBy(value);
+            handleClose();
+        },
+        [setSortBy, handleClose]
+    );
+
+    const currentLabel = SORT_OPTIONS.find((o) => o.value === sortBy)?.label ?? 'Default';
+
+    return (
+        <>
+            <Tooltip title={`Sort: ${currentLabel}`}>
+                <IconButton onClick={handleClick} sx={buttonSx}>
+                    <Sort />
+                </IconButton>
+            </Tooltip>
+
+            <Menu anchorEl={anchorEl} open={open} onClose={handleClose}>
+                {SORT_OPTIONS.map((option) => (
+                    <MenuItem
+                        key={option.value}
+                        selected={option.value === sortBy}
+                        onClick={() => handleSelect(option.value)}
+                    >
+                        {option.label}
+                    </MenuItem>
+                ))}
+            </Menu>
+        </>
+    );
+}

apps/antalmanac/src/components/RightPane/SectionTable/SectionTable.tsx

@@ -105,6 +105,7 @@ function SectionTable(props: SectionTableProps) {
             <Box
                 sx={{
                     display: 'flex',
+                    alignItems: 'center',
                     gap: '4px',
                     marginBottom: '8px',
                     marginTop: '4px',

apps/antalmanac/src/components/RightPane/SectionTable/SectionTableBody/SectionTableBody.tsx

@@ -1,12 +1,55 @@
 import { TableBody } from '@mui/material';
 import { AACourse, AASection } from '@packages/antalmanac-types';
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 
 import { SectionTableBodyRow } from '$components/RightPane/SectionTable/SectionTableBody/SectionTableBodyRow';
 import { AnalyticsCategory } from '$lib/analytics/analytics';
 import AppStore from '$stores/AppStore';
+import { useSectionFilterStore, type SortOption } from '$stores/SectionFilterStore';
 import { normalizeTime, parseDaysString } from '$stores/calendarizeHelpers';
 
+function getMeetingStartMinutes(section: AASection): number {
+    const meeting = section.meetings[0];
+    if (!meeting || meeting.timeIsTBA) return Infinity;
+    return meeting.startTime.hour * 60 + meeting.startTime.minute;
+}
+
+function getMeetingDays(section: AASection): string {
+    const meeting = section.meetings[0];
+    if (!meeting || meeting.timeIsTBA) return '';
+    return meeting.days;
+}
+
+const STATUS_ORDER: Record<string, number> = { OPEN: 0, NewOnly: 1, Waitl: 2, FULL: 3, '': 4 };
+
+function sortSections(sections: AASection[], sortBy: SortOption): AASection[] {
+    if (sortBy === 'default') return sections;
+
+    return [...sections].sort((a, b) => {
+        switch (sortBy) {
+            case 'status':
+                return (STATUS_ORDER[a.status] ?? 4) - (STATUS_ORDER[b.status] ?? 4);
+
+            case 'time_asc':
+                return getMeetingStartMinutes(a) - getMeetingStartMinutes(b);
+
+            case 'days_mwf': {
+                const aMatch = /[MWF]/.test(getMeetingDays(a)) ? 0 : 1;
+                const bMatch = /[MWF]/.test(getMeetingDays(b)) ? 0 : 1;
+                return aMatch - bMatch;
+            }
+
+            case 'days_tuth': {
+                const aMatch = /Tu|Th/.test(getMeetingDays(a)) ? 0 : 1;
+                const bMatch = /Tu|Th/.test(getMeetingDays(b)) ? 0 : 1;
+                return aMatch - bMatch;
+            }
+            default:
+                return 0;
+        }
+    });
+}
+
 interface SectionTableBodyProps {
     courseDetails: AACourse;
     term: string;
@@ -24,6 +67,7 @@ export function SectionTableBody({
     analyticsCategory,
     formattedTime,
 }: SectionTableBodyProps) {
+    const { sortBy } = useSectionFilterStore();
     const [calendarEvents, setCalendarEvents] = useState(() => AppStore.getCourseEventsInCalendar());
 
     /**
@@ -82,9 +126,14 @@ export function SectionTableBody({
         };
     }, [updateCalendarEvents]);
 
+    const sortedSections = useMemo(
+        () => sortSections(courseDetails.sections, sortBy),
+        [courseDetails.sections, sortBy]
+    );
+
     return (
         <TableBody>
-            {courseDetails.sections.map((section) => {
+            {sortedSections.map((section) => {
                 const conflict = scheduleConflict(section);
 
                 return (

apps/antalmanac/src/stores/SectionFilterStore.ts

@@ -0,0 +1,21 @@
+import { create } from 'zustand';
+
+export const SORT_OPTIONS = [
+    { value: 'default', label: 'Default' },
+    { value: 'status', label: 'Status' },
+    { value: 'time_asc', label: 'Time' },
+    { value: 'days_mwf', label: 'Date: MWF' },
+    { value: 'days_tuth', label: 'Date: TuTh' },
+] as const;
+
+export type SortOption = (typeof SORT_OPTIONS)[number]['value'];
+
+interface SectionFilterStore {
+    sortBy: SortOption;
+    setSortBy: (option: SortOption) => void;
+}
+
+export const useSectionFilterStore = create<SectionFilterStore>((set) => ({
+    sortBy: 'default',
+    setSortBy: (sortBy) => set({ sortBy }),
+}));