fix: finish widget modernization audit

apps/nextjs/src/app/[locale]/boards/_layout-creator.tsx

@@ -4,6 +4,7 @@ import { notFound, redirect } from "next/navigation";
 import { AppShellMain } from "@mantine/core";
 import { TRPCError } from "@trpc/server";
 
+import { getRscUserSettingsAsync } from "@homarr/api/user-server";
 import { auth } from "@homarr/auth/next";
 import { BoardProvider } from "@homarr/boards/context";
 import { EditModeProvider } from "@homarr/boards/edit-mode";
@@ -14,7 +15,8 @@ import { ModalProvider } from "@homarr/modals";
 import { MainHeader } from "~/components/layout/header";
 import { BoardLogoWithTitle } from "~/components/layout/logo/board-logo";
 import { ClientShell } from "~/components/layout/shell";
-import { BoardTourProvider } from "~/components/onboarding/board-tour";
+import { BoardTourGate } from "~/components/onboarding/board-tour-gate";
+import { env } from "~/env";
 import { getCurrentColorSchemeAsync } from "~/theme/color-scheme";
 import type { Board } from "./_types";
 import type { Params } from "./(content)/_creator";
@@ -24,11 +26,6 @@ import { BoardMantineProvider } from "./(content)/_theme";
 
 const logger = createLogger({ module: "createBoardLayout" });
 
-const BoardTourWrapper = ({ hasSession, children }: PropsWithChildren<{ hasSession: boolean }>) => {
-  if (!hasSession) return <>{children}</>;
-  return <BoardTourProvider>{children}</BoardTourProvider>;
-};
-
 interface CreateBoardLayoutProps<TParams extends Params> {
   headerActions: JSX.Element;
   getInitialBoardAsync: (params: TParams) => Promise<Board>;
@@ -46,8 +43,34 @@ export const createBoardLayout = <TParams extends Params>({
   }: PropsWithChildren<{
     params: Promise<TParams>;
   }>) => {
-    const session = await auth();
-    const initialBoard = await getInitialBoard(await params).catch((error) => {
+    const resolvedParams = await params;
+    const sessionPromise = auth();
+    const initialBoardPromise = getInitialBoard(resolvedParams).then(
+      (board) => ({ status: "fulfilled", board }) as const,
+      (error: unknown) => ({ status: "rejected", error }) as const,
+    );
+    const colorSchemePromise = getCurrentColorSchemeAsync();
+    const initialViewportWidthPromise = getInitialViewportWidthAsync();
+    const shouldRunBoardTourPromise = sessionPromise.then(async (session) => {
+      if (!withTour || !session || env.DEMO_MODE) return false;
+
+      try {
+        const user = await getRscUserSettingsAsync(session.user.id);
+        return user !== undefined && !user.completedBoardTour;
+      } catch (error) {
+        logger.error(new Error("Failed to load the board tour status", { cause: error }));
+        return false;
+      }
+    });
+    const [session, initialBoardResult, colorScheme, shouldRunBoardTour, initialViewportWidth] = await Promise.all([
+      sessionPromise,
+      initialBoardPromise,
+      colorSchemePromise,
+      shouldRunBoardTourPromise,
+      initialViewportWidthPromise,
+    ]);
+    if (initialBoardResult.status === "rejected") {
+      const { error } = initialBoardResult;
       if (error instanceof TRPCError && error.code === "NOT_FOUND") {
         if (!session) {
           logger.debug("No home board found for anonymous user, redirecting to login");
@@ -63,9 +86,8 @@ export const createBoardLayout = <TParams extends Params>({
       }
 
       throw error;
-    });
-    const colorScheme = await getCurrentColorSchemeAsync();
-    const initialViewportWidth = await getInitialViewportWidthAsync();
+    }
+    const initialBoard = initialBoardResult.board;
     const initialLayoutId = getLayoutIdForViewportWidth(initialBoard.layouts, initialViewportWidth);
 
     return (
@@ -79,16 +101,16 @@ export const createBoardLayout = <TParams extends Params>({
             <BoardMantineProvider defaultColorScheme={colorScheme}>
               <ModalProvider>
                 <CustomCss />
-                <BoardTourWrapper hasSession={withTour && !!session}>
+                <BoardTourGate enabled={shouldRunBoardTour}>
                   <ClientShell hasNavigation={false}>
                     <MainHeader
                       logo={<BoardLogoWithTitle size="md" hideTitleOnMobile />}
                       actions={headerActions}
                       hasNavigation={false}
                     />
-                    <AppShellMain>{children}</AppShellMain>
+                    <AppShellMain data-advanced-focus-background>{children}</AppShellMain>
                   </ClientShell>
-                </BoardTourWrapper>
+                </BoardTourGate>
               </ModalProvider>
             </BoardMantineProvider>
           </EditModeProvider>