feat: onboarding (#2)

* wip

* onboarding

* better onboarding

README.md

@@ -1,6 +1,6 @@
 # StudyHQ
 
-AI powered revision, exam generator and grader. 
+AI powered revision, exam generator and grader.
 
 https://studyhq.app
 
@@ -12,7 +12,6 @@ https://studyhq.app
 - Receive useful feedback
 - Retake exams to practice
 
-
 ## Coming soon
 
 - More customizable exams
@@ -21,7 +20,7 @@ https://studyhq.app
 
 ## TODO
 
-- Figure out how to price this! 
+- Figure out how to price this!
 - Allow bring your own API key
 
 # Screenshots

components/NewButtons.vue

@@ -7,6 +7,20 @@ const emits = defineEmits<{
   (e: "newThread"): void;
   (e: "newExam"): void;
 }>();
+
+const { guestMode, setShowSignUpModal } = useAuth();
+
+function maybeEmit(event: "newThread" | "newExam") {
+  if (guestMode.value) {
+    setShowSignUpModal(true);
+  } else {
+    if (event === "newExam") {
+      emits("newExam");
+    } else if (event === "newThread") {
+      emits("newThread");
+    }
+  }
+}
 </script>
 
 <template>
@@ -16,15 +30,15 @@ const emits = defineEmits<{
       size="xs"
       :disabled="disabled"
       :loading="disabled"
-      @click="emits('newThread')"
+      @click="maybeEmit('newThread')"
     >
       New Chat</UButton
     >
     <UButton
       size="xs"
       :disabled="disabled"
       :loading="disabled"
-      @click="emits('newThread')"
+      @click="maybeEmit('newThread')"
       >New Exam</UButton
     >
   </div>

components/SidebarLinks.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import SignUpModal from "./SignUpModal.vue";
+
 type NavLink = {
   label: string;
   icon: string;
@@ -15,6 +17,20 @@ const emits = defineEmits<{
   (e: "newThread"): void;
   (e: "newExam"): void;
 }>();
+
+const { guestMode, setShowSignUpModal } = useAuth();
+
+function maybeEmit(event: "newThread" | "newExam") {
+  if (guestMode.value) {
+    setShowSignUpModal(true);
+  } else {
+    if (event === "newExam") {
+      emits("newExam");
+    } else if (event === "newThread") {
+      emits("newThread");
+    }
+  }
+}
 </script>
 
 <template>
@@ -25,7 +41,7 @@ const emits = defineEmits<{
         size="xs"
         :disabled="disabled"
         :loading="disabled"
-        @click="emits('newThread')"
+        @click="maybeEmit('newThread')"
       >
         New Chat</UButton
       >
@@ -49,7 +65,7 @@ const emits = defineEmits<{
         size="xs"
         :disabled="disabled"
         :loading="disabled"
-        @click="emits('newExam')"
+        @click="maybeEmit('newExam')"
         >New Exam</UButton
       >
     </div>

components/SignUpModal.vue

@@ -0,0 +1,25 @@
+<script lang="ts" setup>
+defineProps<{
+  modelValue: boolean;
+}>();
+
+const emits = defineEmits<{
+  (e: "update:modelValue", payload: boolean): void;
+}>();
+</script>
+
+<template>
+  <UModal
+    :modelValue="modelValue"
+    @update:modelValue="(val) => emits('update:modelValue', val)"
+  >
+    <div class="p-8 text-center">
+      <p class="my-4 mb-10">Please sign up to continue using StudyHQ.</p>
+      <div class="flex justify-center mt-8 mb-4">
+        <SignInGoogle class="mr-2" />
+
+        <SignInGithub />
+      </div>
+    </div>
+  </UModal>
+</template>

composables/useAuth.ts

@@ -0,0 +1,16 @@
+import { ref } from "vue";
+
+const guestMode = ref(true);
+const showSignUpModal = ref(false);
+
+export function useAuth() {
+  const setGuest = () => (guestMode.value = true);
+  return {
+    setShowSignUpModal: (val: boolean) => {
+      showSignUpModal.value = val;
+    },
+    showSignUpModal,
+    guestMode,
+    setGuest,
+  };
+}

layouts/default.vue

@@ -2,7 +2,16 @@
 import { emitter } from "~/src/emitter";
 import { useIntervalFn, useMagicKeys } from "@vueuse/core";
 import SidebarLinks from "~/components/SidebarLinks.vue";
+import { useAuth } from "~/composables/useAuth";
+import SignUpModal from "~/components/SignUpModal.vue";
+
 const { ctrl, n } = useMagicKeys();
+const { clear, loggedIn } = useUserSession();
+const { guestMode, setShowSignUpModal, showSignUpModal } = useAuth();
+
+if (!loggedIn.value && !guestMode.value) {
+  await navigateTo("/");
+}
 
 const { data: threads, refresh: refreshThreads } =
   await useFetch("/api/threads");
@@ -15,17 +24,11 @@ declare global {
 
 const isOpen = ref(false);
 
-const { clear, loggedIn } = useUserSession();
-
 const { loading: signingOut, run: handleSignOut } = useLoading(async () => {
   await clear();
   await navigateTo("/");
 });
 
-if (!loggedIn.value) {
-  await navigateTo("/");
-}
-
 const { data: user, refresh: refreshUserData } = await useFetch("/api/user");
 
 // useIntervalFn(() => {
@@ -69,13 +72,21 @@ const examLinks = computed(() =>
 const { run: _handleNewThread, loading: creatingNewThread } = useCreateThread();
 
 async function handleNewThread() {
-  await _handleNewThread();
-  isOpen.value = false;
+  if (guestMode.value) {
+    setShowSignUpModal(true);
+  } else {
+    await _handleNewThread();
+    isOpen.value = false;
+  }
 }
 
 async function handleNewExam() {
-  isOpen.value = false;
-  await navigateTo(`/exams/new`);
+  if (guestMode.value) {
+    setShowSignUpModal(true);
+  } else {
+    isOpen.value = false;
+    await navigateTo(`/exams/new`);
+  }
 }
 
 watchEffect(() => {
@@ -96,6 +107,7 @@ const credit = computed(() => {
 
 <template>
   <UContainer class="pt-4">
+    <SignUpModal v-model="showSignUpModal" />
     <div class="flex justify-between items-center w-full mb-4 mx-2">
       <NuxtLink
         class="font-mono mr-4"
@@ -122,7 +134,7 @@ const credit = computed(() => {
             @click="() => (isOpen = true)"
           />
           <USlideover v-model="isOpen">
-            <div>
+            <div class="overflow-scroll">
               <div class="flex items-center justify-between mt-4 mx-2">
                 <UButton
                   @click="handleSignOut"