✨ Add autofocus for searchbar (#1408)

src/components/User/Preferences/SearchEngineSelector.tsx

@@ -31,6 +31,11 @@ export const SearchEngineSettings = () => {
             label={t('searchEngine.newTab.label')}
             {...form.getInputProps('openSearchInNewTab', { type: 'checkbox' })}
           />
+          <Switch
+            label={t('searchEngine.autoFocus.label')}
+            description={t('searchEngine.autoFocus.description')}
+            {...form.getInputProps('autoFocusSearch', { type: 'checkbox' })}
+          />
 
           <TextInput
             label={t('searchEngine.template.label')}

src/components/layout/Templates/BoardLayout.tsx

@@ -19,6 +19,7 @@ import { useNamedWrapperColumnCount } from '~/components/Dashboard/Wrappers/grid
 import { BoardHeadOverride } from '~/components/layout/Meta/BoardHeadOverride';
 import { HeaderActionButton } from '~/components/layout/header/ActionButton';
 import { useConfigContext } from '~/config/provider';
+import { useScreenLargerThan } from '~/hooks/useScreenLargerThan';
 import { api } from '~/utils/api';
 
 import { MainLayout } from './MainLayout';
@@ -30,9 +31,13 @@ type BoardLayoutProps = {
 
 export const BoardLayout = ({ children, dockerEnabled }: BoardLayoutProps) => {
   const { config } = useConfigContext();
+  const { data: session } = useSession();
 
   return (
-    <MainLayout headerActions={<HeaderActions dockerEnabled={dockerEnabled} />}>
+    <MainLayout
+      autoFocusSearch={session?.user.autoFocusSearch}
+      headerActions={<HeaderActions dockerEnabled={dockerEnabled} />}
+    >
       <BoardHeadOverride />
       <BackgroundImage />
       {children}

src/components/layout/Templates/MainLayout.tsx

@@ -6,9 +6,16 @@ type MainLayoutProps = {
   headerActions?: React.ReactNode;
   contentComponents?: React.ReactNode;
   children: React.ReactNode;
+  autoFocusSearch?: boolean;
 };
 
-export const MainLayout = ({ showExperimental, headerActions, contentComponents, children }: MainLayoutProps) => {
+export const MainLayout = ({
+  showExperimental,
+  headerActions,
+  contentComponents,
+  children,
+  autoFocusSearch,
+}: MainLayoutProps) => {
   const theme = useMantineTheme();
 
   return (
@@ -18,7 +25,14 @@ export const MainLayout = ({ showExperimental, headerActions, contentComponents,
           background: theme.colorScheme === 'dark' ? theme.colors.dark[6] : theme.colors.gray[1],
         },
       }}
-      header={<MainHeader headerActions={headerActions} contentComponents={contentComponents} showExperimental={showExperimental} />}
+      header={
+        <MainHeader
+          autoFocusSearch={autoFocusSearch}
+          headerActions={headerActions}
+          contentComponents={contentComponents}
+          showExperimental={showExperimental}
+        />
+      }
       className="dashboard-app-shell"
     >
       {children}

src/components/layout/header/Header.tsx

@@ -23,6 +23,7 @@ type MainHeaderProps = {
   headerActions?: React.ReactNode;
   contentComponents?: React.ReactNode;
   leftIcon?: React.ReactNode;
+  autoFocusSearch?: boolean;
 };
 
 export const MainHeader = ({
@@ -31,6 +32,7 @@ export const MainHeader = ({
   headerActions,
   leftIcon,
   contentComponents,
+  autoFocusSearch,
 }: MainHeaderProps) => {
   const { breakpoints } = useMantineTheme();
   const isSmallerThanMd = useMediaQuery(`(max-width: ${breakpoints.sm})`);
@@ -51,7 +53,7 @@ export const MainHeader = ({
           </UnstyledButton>
         </Group>
 
-        {!isSmallerThanMd && <Search />}
+        {!isSmallerThanMd && <Search autoFocus={autoFocusSearch} />}
 
         <Group noWrap style={{ flex: 1 }} position="right">
           <Group noWrap spacing={8}>

src/components/layout/header/Search.tsx

@@ -19,9 +19,10 @@ import { MovieModal } from './Search/MovieModal';
 
 type SearchProps = {
   isMobile?: boolean;
+  autoFocus?: boolean;
 };
 
-export const Search = ({ isMobile }: SearchProps) => {
+export const Search = ({ isMobile, autoFocus }: SearchProps) => {
   const { t } = useTranslation('layout/header');
   const [search, setSearch] = useState('');
   const ref = useRef<HTMLInputElement>(null);
@@ -62,6 +63,7 @@ export const Search = ({ isMobile }: SearchProps) => {
         variant="filled"
         placeholder={`${t('search.label')}...`}
         hoverOnSearchChange
+        autoFocus={autoFocus}
         rightSection={
           <IconSearch
             onClick={() => ref.current?.focus()}