✨ Add autofocus for searchbar (#1408)

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}