feat: add auto focus as a setting

apps/antalmanac/src/components/Header/SettingsMenu.tsx

@@ -3,7 +3,7 @@ import { Box, Button, ButtonGroup, Divider, Drawer, IconButton, Typography, useM
 import { CSSProperties } from '@material-ui/core/styles/withStyles';
 import { Close, DarkMode, LightMode, Settings, SettingsBrightness } from '@mui/icons-material';
 
-import { useThemeStore, useTimeFormatStore } from '$stores/SettingsStore';
+import { useAutofocusStore, useThemeStore, useTimeFormatStore } from '$stores/SettingsStore';
 
 const lightSelectedStyle: CSSProperties = {
     backgroundColor: '#F0F7FF',
@@ -92,7 +92,7 @@ function TimeMenu() {
 
     return (
         <Box sx={{ padding: '1rem 1rem 0 1rem', width: '100%' }}>
-            <Typography variant="h6" style={{ marginTop: '1.5rem', marginBottom: '1rem' }}>
+            <Typography variant="h6" style={{ marginBottom: '1rem' }}>
                 Time
             </Typography>
 
@@ -135,6 +135,59 @@ function TimeMenu() {
     );
 }
 
+function AutofocusMenu() {
+    const [autoFocus, setAutofocus] = useAutofocusStore((store) => [store.autofocus, store.setAutofocus]);
+    const theme = useThemeStore((store) => store.appTheme);
+
+    const handleAutofocusChange = (event: React.MouseEvent<HTMLButtonElement>) => {
+        setAutofocus(event.currentTarget.value == 'true');
+    };
+
+    return (
+        <Box sx={{ padding: '1rem 1rem 0 1rem', width: '100%' }}>
+            <Typography variant="h6" style={{ marginBottom: '1rem' }}>
+                Autofocus Search
+            </Typography>
+
+            <ButtonGroup
+                style={{
+                    display: 'flex',
+                    placeContent: 'center',
+                    width: '100%',
+                }}
+            >
+                <Button
+                    style={{
+                        padding: '1rem 2rem',
+                        borderRadius: '12px 0px 0px 12px',
+                        width: '100%',
+                        fontSize: '12px',
+                        ...getSelectedStyle('false', autoFocus.toString(), theme),
+                    }}
+                    value="false"
+                    onClick={handleAutofocusChange}
+                    fullWidth={true}
+                >
+                    Disabled
+                </Button>
+                <Button
+                    style={{
+                        padding: '1rem 2rem',
+                        borderRadius: '0px 12px 12px 0px',
+                        width: '100%',
+                        fontSize: '12px',
+                        ...getSelectedStyle('true', autoFocus.toString(), theme),
+                    }}
+                    value="true"
+                    onClick={handleAutofocusChange}
+                >
+                    Enabled
+                </Button>
+            </ButtonGroup>
+        </Box>
+    );
+}
+
 function SettingsMenu() {
     const [drawerOpen, setDrawerOpen] = useState(false);
     const isMobileScreen = useMediaQuery('(max-width:750px)');
@@ -178,6 +231,7 @@ function SettingsMenu() {
 
                     <ThemeMenu />
                     <TimeMenu />
+                    <AutofocusMenu />
                 </Box>
             </Drawer>
         </>

apps/antalmanac/src/components/RightPane/CoursePane/SearchForm/FuzzySearch.tsx

@@ -8,6 +8,7 @@ type SearchResult = ReturnType<typeof search>;
 
 import RightPaneStore from '../../RightPaneStore';
 import analyticsEnum, { logAnalytics } from '$lib/analytics';
+import { useAutofocusStore } from '$stores/SettingsStore';
 
 const emojiMap: Record<string, string> = {
     GE_CATEGORY: '🏫', // U+1F3EB :school:
@@ -182,7 +183,7 @@ class FuzzySearch extends PureComponent<FuzzySearchProps, FuzzySearchState> {
                     <TextField
                         {...params}
                         inputRef={(input: HTMLInputElement | null) => {
-                            if (input && !isMobile()) {
+                            if (input && !isMobile() && useAutofocusStore.getState().autofocus) {
                                 input.focus();
                             }
                         }}

apps/antalmanac/src/stores/SettingsStore.ts

@@ -20,8 +20,8 @@ export const useThemeStore = create<ThemeStore>((set) => {
         themeSetting !== 'system'
             ? themeSetting
             : window.matchMedia('(prefers-color-scheme: dark)').matches
-            ? 'dark'
-            : 'light';
+              ? 'dark'
+              : 'light';
 
     return {
         themeSetting: themeSetting as 'light' | 'dark' | 'system',
@@ -35,8 +35,8 @@ export const useThemeStore = create<ThemeStore>((set) => {
                 themeSetting !== 'system'
                     ? themeSetting
                     : window.matchMedia('(prefers-color-scheme: dark)').matches
-                    ? 'dark'
-                    : 'light';
+                      ? 'dark'
+                      : 'light';
 
             set({ appTheme: appTheme, themeSetting: themeSetting });
 
@@ -67,3 +67,22 @@ export const useTimeFormatStore = create<TimeFormatStore>((set) => {
         },
     };
 });
+
+export interface AutofocusStore {
+    autofocus: boolean;
+    setAutofocus: (autofocus: boolean) => void;
+}
+
+export const useAutofocusStore = create<AutofocusStore>((set) => {
+    const autofocus = typeof Storage !== 'undefined' && window.localStorage.getItem('autofocus') == 'true';
+
+    return {
+        autofocus,
+        setAutofocus: (autofocus) => {
+            if (typeof Storage !== 'undefined') {
+                window.localStorage.setItem('autofocus', autofocus.toString());
+            }
+            set({ autofocus });
+        },
+    };
+});