Merge branch 'main' into main

Author: DereC4

.storybook/fetch-mock.ts

@@ -0,0 +1,25 @@
+// Must load before any module that calls fetch() (e.g. GitHubStatsService) evaluates.
+// GitHubStatsService hits the real GitHub API on mount; in Chromatic's sandboxed
+// browser that request hangs/fails with no network access, timing out story capture.
+const realFetch = globalThis.fetch;
+
+const MOCKED_HOSTS = ['github.cachedapi.com', 'api.github.com'];
+
+function resolveUrl(input: RequestInfo | URL): string {
+    if (typeof input === 'string') return input;
+    if (input instanceof URL) return input.href;
+    return input.url;
+}
+
+globalThis.fetch = async (input: RequestInfo | URL, init?: RequestInit): Promise<Response> => {
+    const url = resolveUrl(input);
+
+    if (MOCKED_HOSTS.some(host => url.includes(host))) {
+        return new Response(JSON.stringify([]), {
+            status: 200,
+            headers: { 'Content-Type': 'application/json' },
+        });
+    }
+
+    return realFetch(input, init);
+};

.storybook/preview.tsx

@@ -1,5 +1,6 @@
-// Must be first import — sets up globalThis.chrome before any other module evaluates
+// Must be first imports — set up globalThis.chrome/fetch before any other module evaluates
 import './chrome-mock';
+import './fetch-mock';
 
 import { UserScheduleStore } from '@shared/storage/UserScheduleStore';
 import type { Preview } from '@storybook/react-vite';

src/shared/util/checkLoginStatus.ts

@@ -2,20 +2,15 @@ import { UTRP_LOGIN_URL } from '@shared/util/appUrls';
 
 /**
  * Checks whether the user is logged in to the UT Registrar.
- * If not logged in, opens a new tab to the login page and returns `false`.
- * When `silent` is true, skips opening the login tab so background refreshes can fail quietly.
+ * Performs a cookie-only auth check and returns a pure boolean; callers own any UI affordance.
  *
- * @param options.silent when true, suppresses the login tab on 401/403
  * @returns A promise that resolves to `true` if the user is logged in, otherwise `false`.
  */
-export async function validateLoginStatus(options?: { silent?: boolean }) {
+export async function validateLoginStatus(): Promise<boolean> {
     try {
         const response = await fetch(UTRP_LOGIN_URL, { credentials: 'include' });
 
         if (response.redirected || response.status === 401 || response.status === 403) {
-            if (!options?.silent) {
-                chrome.tabs.create({ url: UTRP_LOGIN_URL });
-            }
             return false;
         }
 

src/views/components/calendar/CalendarHeader/CalendarHeader.tsx

@@ -1,5 +1,6 @@
 import { Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/react';
 import { OptionsStore } from '@shared/storage/OptionsStore';
+import { UTRP_LOGIN_URL } from '@shared/util/appUrls';
 import styles from '@views/components/calendar/CalendarHeader/CalendarHeader.module.scss';
 import { Button } from '@views/components/common/Button';
 import Divider from '@views/components/common/Divider';
@@ -13,7 +14,7 @@ import { useActiveSchedule } from '@views/hooks/useSchedules';
 import refreshCourses from '@views/lib/refreshCourses';
 import clsx from 'clsx';
 import type { JSX } from 'react';
-import { useCallback, useEffect, useRef, useState } from 'react';
+import { useCallback, useState } from 'react';
 import ArrowsClockwiseIcon from '~icons/ph/arrows-clockwise';
 import CalendarDotsIcon from '~icons/ph/calendar-dots';
 import ExportIcon from '~icons/ph/export';
@@ -37,28 +38,25 @@ export default function CalendarHeader({ sidebarOpen, onSidebarToggle }: Calenda
     const activeSchedule = useActiveSchedule();
     const lastCheckedText = useRelativeTime(activeSchedule.lastCheckedAt);
     const [isRefreshing, setIsRefreshing] = useState(false);
+    const [showLoginPrompt, setShowLoginPrompt] = useState(false);
     // track per-schedule cooldowns so switching schedules allows immediate refresh
     const [cooldownIds, setCooldownIds] = useState<Set<string>>(new Set());
     const enableDataRefreshing = OptionsStore.useStore(store => store.enableDataRefreshing);
 
     const isCooldown = cooldownIds.has(activeSchedule.id);
     const hasRightHandSide = enableDataRefreshing;
-    const isRefreshingRef = useRef(false);
-    isRefreshingRef.current = isRefreshing;
 
     const handleRefresh = useCallback(async () => {
+        if (isRefreshing) return;
         setIsRefreshing(true);
         // Ensure the spinner is visible long enough to provide visual feedback
-        const minSpin = new Promise(r => setTimeout(r, 400));
+        const minSpin = new Promise(resolve => setTimeout(resolve, 400));
         try {
-            await chrome.storage.session.set({ pendingRefresh: true });
             const [success] = await Promise.all([refreshCourses(), minSpin]);
-            if (success) {
-                await chrome.storage.session.remove('pendingRefresh');
-            }
+            setShowLoginPrompt(!success);
         } catch (error) {
             console.error('Failed to refresh courses:', error);
-            await chrome.storage.session.remove('pendingRefresh');
+            setShowLoginPrompt(true);
         } finally {
             setIsRefreshing(false);
             const scheduleId = activeSchedule.id;
@@ -71,27 +69,7 @@ export default function CalendarHeader({ sidebarOpen, onSidebarToggle }: Calenda
                 });
             }, 3000);
         }
-    }, [activeSchedule]);
-
-    // Auto-retry refresh after login redirect
-    useEffect(() => {
-        const checkPendingRefresh = async () => {
-            const { pendingRefresh } = await chrome.storage.session.get('pendingRefresh');
-            if (pendingRefresh && !isRefreshingRef.current) {
-                handleRefresh();
-            }
-        };
-
-        checkPendingRefresh();
-
-        const onVisibilityChange = () => {
-            if (document.visibilityState === 'visible') {
-                checkPendingRefresh();
-            }
-        };
-        document.addEventListener('visibilitychange', onVisibilityChange);
-        return () => document.removeEventListener('visibilitychange', onVisibilityChange);
-    }, [handleRefresh]);
+    }, [activeSchedule, isRefreshing]);
 
     return (
         <div
@@ -206,11 +184,26 @@ export default function CalendarHeader({ sidebarOpen, onSidebarToggle }: Calenda
                 </div>
                 {hasRightHandSide && <Divider className='self-center' size='1.75rem' orientation='vertical' />}
                 <div className={clsx(styles.secondaryActions, 'flex items-center gap-3 ml-auto')}>
-                    {enableDataRefreshing && lastCheckedText && (
-                        <Text variant='mini' className='whitespace-nowrap text-theme-black/50 !font-normal'>
-                            Last checked: {lastCheckedText}
-                        </Text>
-                    )}
+                    {enableDataRefreshing &&
+                        (showLoginPrompt ? (
+                            <Text variant='mini' className='whitespace-nowrap text-theme-black/50 !font-normal'>
+                                <a
+                                    href={UTRP_LOGIN_URL}
+                                    target='_blank'
+                                    rel='noreferrer'
+                                    className='text-ut-burntorange underline'
+                                >
+                                    Log in
+                                </a>
+                                {' to refresh course data'}
+                            </Text>
+                        ) : (
+                            lastCheckedText && (
+                                <Text variant='mini' className='whitespace-nowrap text-theme-black/50 !font-normal'>
+                                    Last checked: {lastCheckedText}
+                                </Text>
+                            )
+                        ))}
                     {enableDataRefreshing && (
                         <Button
                             color='ut-black'

src/views/components/common/ScheduleListItem.tsx

@@ -7,7 +7,7 @@ import type { UserSchedule } from '@shared/types/UserSchedule';
 import Text from '@views/components/common/Text/Text';
 import { useEnforceScheduleLimit } from '@views/hooks/useEnforceScheduleLimit';
 import { useIsActiveSchedule } from '@views/hooks/useSchedules';
-import { LONGHORN_DEVELOPERS_ADMINS, LONGHORN_DEVELOPERS_SWE } from '@views/lib/getGitHubStats';
+import { LONGHORN_DEVELOPERS_ADMINS, LONGHORN_DEVELOPERS_HARDCODED } from '@views/lib/getGitHubStats';
 import clsx from 'clsx';
 import React, { useEffect, useState } from 'react';
 import CircleIcon from '~icons/ph/circle';
@@ -33,7 +33,7 @@ interface ScheduleListItemProps {
 }
 
 const IS_STORYBOOK = import.meta.env.STORYBOOK;
-const teamMembers = [...LONGHORN_DEVELOPERS_ADMINS, ...LONGHORN_DEVELOPERS_SWE];
+const teamMembers = [...LONGHORN_DEVELOPERS_ADMINS, ...LONGHORN_DEVELOPERS_HARDCODED];
 
 /**
  * This is a reusable dropdown component that can be used to toggle the visiblity of information

src/views/components/settings/Settings.tsx

@@ -20,7 +20,7 @@ import { useActiveSchedule } from '@views/hooks/useSchedules';
 import {
     GitHubStatsService,
     LONGHORN_DEVELOPERS_ADMINS,
-    LONGHORN_DEVELOPERS_SWE,
+    LONGHORN_DEVELOPERS_HARDCODED,
     UTRP_ALUMNI,
     UTRP_LEADS,
 } from '@views/lib/getGitHubStats';
@@ -42,6 +42,25 @@ import { useDevMode } from './useDevMode';
 
 const manifest = chrome.runtime.getManifest();
 
+/**
+ * Function that returns sort order of a provided member, for the settings page stats.
+ * This is located outside of the component because we use useMemo and there is no need
+ * to use useCallback with a function that deals with no components
+ * @param member A member of LHD
+ * @returns
+ */
+const getContributorPriority = (member: { role: string[] }) => {
+    const roles = member.role.map(role => role.toLowerCase());
+
+    if (roles.some(role => role.includes('founder'))) return 0;
+    if (roles.some(role => role.includes('co-founder'))) return 1;
+    if (roles.some(role => role.includes('advisor'))) return 2;
+    if (roles.some(role => role.includes('former'))) return 3;
+    if (roles.some(role => role.includes('alumni'))) return 4;
+
+    return 5;
+};
+
 /**
  * Main Settings Component for managing user settings and preferences.
  *
@@ -148,20 +167,25 @@ export default function Settings(): React.JSX.Element {
     }, []);
 
     const sortedContributors = useMemo(() => {
-        const base = [...LONGHORN_DEVELOPERS_SWE, ...UTRP_LEADS, ...UTRP_ALUMNI];
+        const base = [...LONGHORN_DEVELOPERS_HARDCODED, ...UTRP_LEADS, ...UTRP_ALUMNI];
         if (!githubStats) return base;
-        return [...base].sort(
-            (a, b) =>
+
+        return [...base].sort((a, b) => {
+            const priorityDiff = getContributorPriority(a) - getContributorPriority(b);
+            if (priorityDiff !== 0) return priorityDiff;
+
+            return (
                 (githubStats.userGitHubStats[b.githubUsername]?.commits ?? 0) -
                 (githubStats.userGitHubStats[a.githubUsername]?.commits ?? 0)
-        );
+            );
+        });
     }, [githubStats]);
 
     const additionalContributors = useMemo(() => {
         if (!githubStats) return [];
         const knownUsernames = new Set<string>([
             ...LONGHORN_DEVELOPERS_ADMINS.map(a => a.githubUsername),
-            ...LONGHORN_DEVELOPERS_SWE.map(s => s.githubUsername),
+            ...LONGHORN_DEVELOPERS_HARDCODED.map(s => s.githubUsername),
             ...UTRP_LEADS.map(l => l.githubUsername),
             ...UTRP_ALUMNI.map(a => a.githubUsername),
         ]);