[MAGE] GH login + so many aMAGEing updates

wasp-ai/main.wasp

@@ -4,7 +4,7 @@ app waspAi {
   },
   title: "MAGE - GPT Web App Generator ✨",
   head: [
-    "<meta property=\"og:title\" content=\"MAGE - GPT Web App Generator ✨\">",
+    "<meta property=\"og:title\" content=\"MAGE GPT Web App Generator ✨ MageGPT\">",
     "<meta property=\"og:description\" content=\"Generate your full-stack React, Node.js and Prisma web app using the magic of GPT and the Wasp full-stack framework.\">",
     "<meta property=\"og:type\" content=\"website\">",
     "<meta property=\"og:image\" content=\"https://usemage.ai/twitter.png\">",
@@ -51,7 +51,7 @@ app waspAi {
         getUserFieldsFn: import { getGoogleUserFields } from "@server/auth.js",
       },
     },
-    onAuthFailedRedirectTo: "/login",
+    onAuthFailedRedirectTo: "/",
     onAuthSucceededRedirectTo: "/"
   }
 }
@@ -66,6 +66,12 @@ page ResultPage {
   component: import { ResultPage } from "@client/pages/ResultPage.jsx"
 }
 
+route UserRoute { path: "/user", to: UserPage }
+page UserPage {
+  component: import { UserPage } from "@client/pages/UserPage.jsx",
+  authRequired: true
+}
+
 route StatsRoute { path: "/stats", to: StatsPage }
 page StatsPage {
   component: import { Stats } from "@client/pages/StatsPage.jsx",
@@ -105,6 +111,11 @@ query getFeedback {
   entities: [Feedback]
 }
 
+query getProjectsByUser {
+  fn: import { getProjectsByUser } from "@server/operations.js",
+  entities: [Project]
+}
+
 
 query getAppGenerationResult {
   fn: import { getAppGenerationResult } from "@server/operations.js",
@@ -131,6 +142,7 @@ entity User {=psl
   id Int @id @default(autoincrement())
 
   email String @unique
+  username String?
   externalAuthAssociations SocialLogin[]
   projects Project[]
 psl=}

wasp-ai/migrations/20231026125258_username/migration.sql

@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE "User" ADD COLUMN     "username" TEXT;

wasp-ai/src/client/components/Header.jsx

@@ -1,25 +1,72 @@
-import { StatusPill } from './StatusPill';
-import { Title } from './Title';
-import { signInUrl as gitHubSignInUrl } from '@wasp/auth/helpers/GitHub';
-import { AiFillGithub } from 'react-icons/ai';
+import { Title } from "./Title";
+import { BiSolidUser } from "react-icons/bi";
+import { RxQuestionMarkCircled } from "react-icons/rx";
+import useAuth from "@wasp/auth/useAuth";
+import { useHistory } from "react-router-dom";
+import { BiSolidHome } from "react-icons/bi";
+import { Link } from "@wasp/router";
 
-export function Header({ currentStatus, isStatusVisible }) {
+export function Header({ children, StatusPill, currentStatus }) {
   return (
-    <div className='mb-4 bg-slate-50 p-8 rounded-xl md:flex justify-between items-center'>
+    <div className="mb-4 bg-slate-50 p-8 rounded-xl md:flex justify-between items-center">
       <Title />
-      {isStatusVisible && (
-        <StatusPill status={currentStatus.status} className='hidden md:flex'>
-          {currentStatus.message}
-        </StatusPill>
-      )}
+      <div className="flex flex-col items-end gap-2">
+        <div className="flex items-center gap-3 m-1">{children}</div>
+        {!!StatusPill && (
+          <StatusPill status={currentStatus.status} className="hidden md:flex">
+            {currentStatus.message}
+          </StatusPill>
+        )}
+      </div>
     </div>
   );
 }
 
-function GithubLoginButton() {
+export function FaqButton() {
   return (
-        <button className='button gray flex !text-gray-800 hover:bg-slate-300 shadow-md' onClick={() => window.location.href = gitHubSignInUrl}>
-          <AiFillGithub className='w-6 h-6 mr-2' /> Sign in with GitHub
-        </button>
-      )
-}
+    <a href="#faq" className="flex items-center justify-center space-x-1 text-slate-500 hover:text-slate-600">
+      <span className="text-sm font-normal">Help</span>
+      <RxQuestionMarkCircled className="text-base text-slate-600" />
+    </a>
+  );
+}
+
+export function ProfileButton({ setIsLoginModalOpen }) {
+  const { data: user } = useAuth();
+  const history = useHistory();
+
+  return (
+    <button
+      className="relative group"
+      onClick={() => {
+        if (!user) {
+          setIsLoginModalOpen(true);
+        } else {
+          history.push("/user");
+        }
+      }}
+    >
+      <BiSolidUser className="w-5 h-5 text-slate-600" />
+      <ToolTip>My Apps</ToolTip>
+    </button>
+  );
+}
+
+export function HomeButton() {
+  return (
+    <button className="relative group">
+      <Link to="/">
+        <BiSolidHome className="w-5 h-5 text-slate-600" />
+        <ToolTip>Home</ToolTip>
+      </Link>
+    </button>
+  );
+}
+
+function ToolTip({ children }) {
+  return (
+    <div className="absolute text-center whitespace-nowrap bg-slate-600 text-white text-xs rounded py-1 px-4 bottom-100 left-1/2 transform -translate-x-1/2 translate-y-1 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all ease-in-out duration-275">
+      {children}
+    </div>
+  );
+}

wasp-ai/src/client/components/Title.jsx

@@ -1,6 +1,5 @@
 import magicLogo from "../magic-app-gen-logo.png";
 import { Link } from "react-router-dom";
-import { RxQuestionMarkCircled } from "react-icons/rx";
 
 export function Title() {
   return (
@@ -14,10 +13,6 @@ export function Title() {
           <p className="md:text-base text-sm leading-relaxed text-gray-500">
             Generate your full-stack web app in Wasp, React, Node.js and Prisma
           </p>
-          <a href="#faq" className="flex items-center mt-2 space-x-1 text-gray-500 hover:text-gray-400">
-            <span className="text-sm font-normal">Learn more</span>
-            <RxQuestionMarkCircled className="text-base" />
-          </a>
         </div>
       </div>
     </div>