feature: new project wizard

src/components/home/home.tsx

@@ -1,11 +1,15 @@
 import { useCallback, useEffect, useState } from "react";
 import { useDispatch, useSelector } from "@root/store";
 import { Header } from "@comp/header/header";
+import AddIcon from "@mui/icons-material/Add";
+import Button from "@mui/material/Button";
+import { addProject } from "@comp/profile/actions";
 import Search from "./search";
 import PopularProjects from "./popular-projects";
 import RandomProjects from "./random-projects";
 import PopularArtists from "./popular-artists";
 import { homeBackground } from "./background-style";
+import { homeActionBar, homeCreateButton } from "./styles";
 import { fetchPopularProjects } from "./actions";
 import {
     selectPopularProjectsFetchOffset,
@@ -68,6 +72,16 @@ const Home = () => {
         <>
             <Header />
             <div css={homeBackground}>
+                <div css={homeActionBar}>
+                    <Button
+                        css={homeCreateButton}
+                        color="inherit"
+                        onClick={() => dispatch(addProject())}
+                        startIcon={<AddIcon />}
+                    >
+                        New Project
+                    </Button>
+                </div>
                 <Search />
                 {/* <p>Search is being fixed...</p> */}
                 {/* <PopularProjects

src/components/home/styles.tsx

@@ -8,6 +8,31 @@ export const homeHeading = css`
     height: 40px;
 `;
 
+export const homeActionBar = css`
+    display: flex;
+    justify-content: flex-end;
+    margin-bottom: 18px;
+`;
+
+export const homeCreateButton = (theme: Theme): SerializedStyles => css`
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    padding: 10px 14px;
+    border: 1px solid ${theme.line};
+    background: linear-gradient(
+        180deg,
+        ${theme.highlightBackgroundAlt},
+        ${theme.highlightBackground}
+    );
+    color: ${theme.textColor};
+    font-weight: 600;
+
+    &:hover {
+        background: ${theme.highlightBackgroundAlt};
+    }
+`;
+
 export const homePageHeading = (theme: Theme): SerializedStyles => css`
     position: absolute;
     bottom: -6px;

src/components/login/actions.tsx

@@ -1,6 +1,6 @@
 import React, { useCallback, useState } from "react";
 import { doc, getDoc, writeBatch } from "firebase/firestore";
-import { useDispatch } from "@root/store";
+import { AppThunk, useDispatch, useSelector } from "@root/store";
 import TextField from "@mui/material/TextField";
 import Button from "@mui/material/Button";
 import {
@@ -13,7 +13,10 @@ import {
     CREATE_USER_FAIL,
     CREATE_USER_SUCCESS,
     CREATE_CLEAR_ERROR,
-    LOG_OUT
+    LOG_OUT,
+    LoginDialogMode,
+    PostAuthFlow,
+    SET_POST_AUTH_FLOW
 } from "./types";
 import { closeModal, openSimpleModal } from "../modal/actions";
 import { database, profiles, usernames } from "../../config/firestore";
@@ -33,12 +36,23 @@ import { SnackbarType } from "../snackbar/types";
 import { IProfile } from "../profile/types";
 import { navigateTo } from "@comp/router/navigate";
 import { isElectron } from "@root/utils";
+import { selectPostAuthFlow } from "./selectors";
 
-export const login = (
-    email: string,
-    password: string
-): ((dispatch: any) => Promise<void>) => {
-    return async (dispatch: any) => {
+const openProjectCreationModal = () =>
+    openSimpleModal("new-project-prompt", {
+        name: "New Project",
+        description: "",
+        label: "Create Project",
+        newProject: true,
+        projectID: "",
+        starterTemplate: "single-csd",
+        iconName: undefined,
+        iconForegroundColor: undefined,
+        iconBackgroundColor: undefined
+    });
+
+export const login = (email: string, password: string): AppThunk => {
+    return async (dispatch) => {
         dispatch({
             type: SIGNIN_REQUEST
         });
@@ -66,8 +80,8 @@ export const login = (
 
 export const loginWithProvider = (
     providerName: "google" | "facebook"
-): ((dispatch: any) => Promise<void>) => {
-    return async (dispatch: any) => {
+): AppThunk => {
+    return async (dispatch) => {
         dispatch({
             type: SIGNIN_REQUEST
         });
@@ -106,6 +120,7 @@ export function ProfileFinalize({
     user: { displayName: string | undefined; uid: string };
 }) {
     const dispatch = useDispatch();
+    const postAuthFlow = useSelector(selectPostAuthFlow);
     const [input, setInput] = useState("");
     const [displayName, setDisplayName] = useState(user.displayName || "");
     const [nameReserved, setNameReserved] = useState(false);
@@ -151,14 +166,20 @@ export function ProfileFinalize({
 
             try {
                 await batch.commit();
-                dispatch(closeModal());
                 dispatch(
                     openSnackbar("Profile created!", SnackbarType.Success)
                 );
                 dispatch({
                     type: SIGNIN_SUCCESS,
                     user
                 });
+
+                if (postAuthFlow === "create-project") {
+                    dispatch(setPostAuthFlow(undefined));
+                    dispatch(openProjectCreationModal());
+                } else {
+                    dispatch(closeModal());
+                }
             } catch (error) {
                 dispatch(
                     openSnackbar(
@@ -265,8 +286,8 @@ export function ProfileFinalize({
 export const thirdPartyAuthSuccess = (
     user: { uid: string; displayName: string | undefined },
     fromAutoLogin: boolean
-): ((dispatch: any) => Promise<void>) => {
-    return async (dispatch: any) => {
+): AppThunk => {
+    return async (dispatch, getState) => {
         let profile;
 
         try {
@@ -299,36 +320,56 @@ export const thirdPartyAuthSuccess = (
             );
         } else {
             const profileData = profile.data();
+            const postAuthFlow = selectPostAuthFlow(getState());
 
             dispatch({
                 type: SIGNIN_SUCCESS,
                 user
             });
+
+            if (!fromAutoLogin && postAuthFlow === "create-project") {
+                dispatch(setPostAuthFlow(undefined));
+                dispatch(openProjectCreationModal());
+                return;
+            }
+
             !fromAutoLogin &&
                 profileData &&
                 navigateTo(`/profile/${profileData.username}`);
         }
     };
 };
 
-export const openLoginDialog = (): ((dispatch: any) => Promise<void>) => {
-    return async (dispatch: any) => {
+export const setPostAuthFlow = (postAuthFlow: PostAuthFlow): AppThunk => {
+    return async (dispatch) => {
+        dispatch({
+            type: SET_POST_AUTH_FLOW,
+            postAuthFlow
+        });
+    };
+};
+
+export const openLoginDialog = (
+    dialogMode: LoginDialogMode = "login"
+): AppThunk => {
+    return async (dispatch) => {
         dispatch({
-            type: OPEN_DIALOG
+            type: OPEN_DIALOG,
+            dialogMode
         });
     };
 };
 
-export const closeLoginDialog = (): ((dispatch: any) => Promise<void>) => {
-    return async (dispatch: any) => {
+export const closeLoginDialog = (): AppThunk => {
+    return async (dispatch) => {
         dispatch({
             type: CLOSE_DIALOG
         });
     };
 };
 
-export const logOut = (): ((dispatch: any) => Promise<void>) => {
-    return async (dispatch: any) => {
+export const logOut = (): AppThunk => {
+    return async (dispatch) => {
         try {
             await getAuth().signOut();
         } catch (error) {
@@ -341,11 +382,8 @@ export const logOut = (): ((dispatch: any) => Promise<void>) => {
     };
 };
 
-export const createNewUser = (
-    email: string,
-    password: string
-): ((dispatch: any) => Promise<void>) => {
-    return async (dispatch: any) => {
+export const createNewUser = (email: string, password: string): AppThunk => {
+    return async (dispatch) => {
         try {
             const credentials = await createUserWithEmailAndPassword(
                 getAuth(),
@@ -366,18 +404,16 @@ export const createNewUser = (
     };
 };
 
-export const createUserClearError = (): ((dispatch: any) => Promise<void>) => {
-    return async (dispatch: any) => {
+export const createUserClearError = (): AppThunk => {
+    return async (dispatch) => {
         dispatch({
             type: CREATE_CLEAR_ERROR
         });
     };
 };
 
-export const setRequestingStatus = (
-    status: boolean
-): ((dispatch: any) => Promise<void>) => {
-    return async (dispatch: any) => {
+export const setRequestingStatus = (status: boolean): AppThunk => {
+    return async (dispatch) => {
         dispatch({
             type: SET_REQUESTING_STATUS,
             status