diff --git a/apps/antalmanac/src/components/Header/SettingsMenu.tsx b/apps/antalmanac/src/components/Header/SettingsMenu.tsx index f4b72b6f9..c96a91771 100644 --- a/apps/antalmanac/src/components/Header/SettingsMenu.tsx +++ b/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 ( - + Time @@ -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) => { + setAutofocus(event.currentTarget.value == 'true'); + }; + + return ( + + + Autofocus Search + + + + + + + + ); +} + function SettingsMenu() { const [drawerOpen, setDrawerOpen] = useState(false); const isMobileScreen = useMediaQuery('(max-width:750px)'); @@ -178,6 +231,7 @@ function SettingsMenu() { + diff --git a/apps/antalmanac/src/components/RightPane/CoursePane/SearchForm/FuzzySearch.tsx b/apps/antalmanac/src/components/RightPane/CoursePane/SearchForm/FuzzySearch.tsx index bdcc8a0b1..b361f6429 100644 --- a/apps/antalmanac/src/components/RightPane/CoursePane/SearchForm/FuzzySearch.tsx +++ b/apps/antalmanac/src/components/RightPane/CoursePane/SearchForm/FuzzySearch.tsx @@ -8,6 +8,7 @@ type SearchResult = ReturnType; import RightPaneStore from '../../RightPaneStore'; import analyticsEnum, { logAnalytics } from '$lib/analytics'; +import { useAutofocusStore } from '$stores/SettingsStore'; const emojiMap: Record = { GE_CATEGORY: '🏫', // U+1F3EB :school: @@ -182,7 +183,7 @@ class FuzzySearch extends PureComponent { { - if (input && !isMobile()) { + if (input && !isMobile() && useAutofocusStore.getState().autofocus) { input.focus(); } }} diff --git a/apps/antalmanac/src/stores/SettingsStore.ts b/apps/antalmanac/src/stores/SettingsStore.ts index 5ca0d6dd4..8f0ade53b 100644 --- a/apps/antalmanac/src/stores/SettingsStore.ts +++ b/apps/antalmanac/src/stores/SettingsStore.ts @@ -20,8 +20,8 @@ export const useThemeStore = create((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((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((set) => { }, }; }); + +export interface AutofocusStore { + autofocus: boolean; + setAutofocus: (autofocus: boolean) => void; +} + +export const useAutofocusStore = create((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 }); + }, + }; +});