Started onboarding screen

src/components/LoadingScreen/index.tsx

@@ -15,6 +15,7 @@ enum LoadingState {
 
 interface Props {
     setError: React.Dispatch<unknown>;
+    setOnboarding: React.Dispatch<boolean>;
 }
 
 const LoadingScreen: React.FC<Props> = (props: Props) => {
@@ -27,22 +28,23 @@ const LoadingScreen: React.FC<Props> = (props: Props) => {
             try {
                 await settingsManager.initialize();
 
-                const importantDirs: ImportantDirs = await invoke("get_important_dirs");
+                if (!settingsManager.getCache("onboardingCompleted")) {
+                    props.setOnboarding(true);
+                } else {
+                    const importantDirs: ImportantDirs = await invoke("get_important_dirs");
 
-                // If the download location is empty, set the default one
-                let downloadLocation = settingsManager.getCache("downloadLocation");
-                if (downloadLocation === "") {
-                    downloadLocation = importantDirs.yarcFolder;
-                }
-
-                const customDirs: CustomDirs = await invoke("get_custom_dirs", {
-                    downloadLocation: downloadLocation
-                });
+                    // If the download location is empty, set the default one
+                    let downloadLocation = settingsManager.getCache("downloadLocation");
+                    if (downloadLocation === "") {
+                        downloadLocation = importantDirs.yarcFolder;
+                    }
 
-                profileStore.setDirs(importantDirs, customDirs);
+                    const customDirs: CustomDirs = await invoke("get_custom_dirs", {
+                        downloadLocation: downloadLocation
+                    });
 
-                console.log(importantDirs);
-                console.log(customDirs);
+                    profileStore.setDirs(importantDirs, customDirs);
+                }
 
                 // Add a tiny bit of delay so the loading screen doesn't just instantly disappear
                 await new Promise(r => setTimeout(r, 250));

src/components/Onboarding/Onboarding.module.css

@@ -0,0 +1,9 @@
+.container {
+    position: fixed;
+    inset: 0;
+    top: 30px;
+
+    background: var(--sideBar_background);
+
+    z-index: 9999;
+}

src/components/Onboarding/index.tsx

@@ -0,0 +1,14 @@
+import styles from "./Onboarding.module.css";
+
+interface Props {
+    setOnboarding: React.Dispatch<boolean>;
+}
+
+const Onboarding: React.FC<Props> = (props: Props) => {
+    return <div className={styles.container}>
+        Here is where onboarding will happen!
+    </div>;
+};
+
+export default Onboarding;
+

src/main.tsx

@@ -12,13 +12,15 @@ import { ErrorScreen, onError } from "./routes/ErrorScreen";
 import { error as logError } from "tauri-plugin-log-api";
 import { serializeError } from "serialize-error";
 import LoadingScreen from "./components/LoadingScreen";
+import Onboarding from "./components/Onboarding";
 
 window.addEventListener("error", event => {
     logError(JSON.stringify(serializeError(event)));
 });
 
 const App: React.FC = () => {
     const [error, setError] = useState<unknown>(null);
+    const [onboarding, setOnboarding] = useState(false);
 
     // Show error screen
     if (error) {
@@ -37,11 +39,15 @@ const App: React.FC = () => {
     // Show main screen
     return <React.StrictMode>
         <ErrorBoundary FallbackComponent={ErrorScreen} onError={onError}>
-            <LoadingScreen setError={setError} />
+            <LoadingScreen setError={setError} setOnboarding={setOnboarding} />
 
             <DialogProvider>
                 <TitleBar />
                 <QueryClientProvider client={queryClient}>
+                    {onboarding &&
+                        <Onboarding setOnboarding={setOnboarding} />
+                    }
+
                     <RouterProvider router={Router} />
                 </QueryClientProvider>
             </DialogProvider>

src/routes/index.tsx

@@ -18,32 +18,26 @@ const Router = createBrowserRouter([
                 path: "/",
                 element: <Home />
             },
-
             {
                 path: "/settings",
                 element: <Settings />
             },
-
             {
                 path: "/queue",
                 element: <Queue />
             },
-
             {
                 path: "/yarg/stable",
                 element: <StableYARGPage />
             },
-
             {
                 path: "/yarg/nightly",
                 element: <NightlyYARGPage />
             },
-
             {
                 path: "/setlist/official",
                 element: <OfficialSetlistPage />
             },
-
             {
                 path: "/news/:md",
                 element: <NewsPage />
@@ -52,4 +46,4 @@ const Router = createBrowserRouter([
     },
 ]);
 
-export default Router;
+export default Router;

src/routes/root.tsx

@@ -4,14 +4,12 @@ import Sidebar from "@app/components/Sidebar";
 import { Outlet } from "react-router-dom";
 
 const RootLayout: React.FC = () => {
-    return (<>
-
+    return <>
         <Sidebar />
         <div id="content">
             <Outlet />
         </div>
-
-    </>);
+    </>;
 };
 
-export default RootLayout;
+export default RootLayout;

src/settings.ts

@@ -1,9 +1,11 @@
 import { SettingsManager } from "tauri-settings";
 
 export interface Settings {
+    onboardingCompleted: boolean;
     downloadLocation: string;
 }
 
 export const settingsManager = new SettingsManager<Settings>({
+    onboardingCompleted: false,
     downloadLocation: ""
 });