[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",
@@ -120,6 +131,11 @@ query getStats {
   ]
 }
 
+query checkIfUserStarredWasp {
+  fn: import { checkIfUserStarredWasp } from "@server/operations.js",
+  entities: [Project]
+}
+
 query getNumProjects {
   fn: import { getNumProjects } from "@server/operations.js",
   entities: [
@@ -131,6 +147,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,58 @@
-import { StatusPill } from './StatusPill';
-import { Title } from './Title';
-import { signInUrl as gitHubSignInUrl } from '@wasp/auth/helpers/GitHub';
-import { AiFillGithub } from 'react-icons/ai';
+import { StatusPill } from "./StatusPill";
+import { Title } from "./Title";
+import { BiSolidUser, BiSolidHome } from "react-icons/bi";
+import { RxQuestionMarkCircled } from "react-icons/rx";
+import useAuth from "@wasp/auth/useAuth";
+import { Link } from "@wasp/router";
+
+export function Header({ currentStatus, isStatusVisible, isUserPage, setIsLoginModalOpen }) {
+  const { data: user } = useAuth();
 
-export function Header({ currentStatus, isStatusVisible }) {
   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 my-1 mr-1">
+            <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>
+
+            <div className="relative group">
+              <button
+                onClick={() => {
+                  if (!user) {
+                    setIsLoginModalOpen(true);
+                  } else {
+                   window.location.href = "/user";
+                  }
+                }}
+              >
+                <BiSolidUser className="w-5 h-5 text-slate-600" />
+                <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">
+                  My Apps
+                </div>
+              </button>
+            </div>
+          </div>
+          <StatusPill status={currentStatus.status} className="hidden md:flex">
+            {currentStatus.message}
+          </StatusPill>
+        </div>
+      )}
+      {isUserPage && (
+        <div className="flex items-center justify-center gap-3 mr-2">
+          <button className="relative group">
+            <Link to="/">
+              <BiSolidHome className="w-5 h-5 text-slate-600 mr-1" />
+              <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">
+                Home
+              </div>
+            </Link>
+          </button>
+        </div>
       )}
     </div>
   );
 }
-
-function GithubLoginButton() {
-  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>
-      )
-}

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>