From 3379ba53b407808119feb73906b85f3eff840d68 Mon Sep 17 00:00:00 2001
From: Jon Grim <jonjongrim@gmail.com>
Date: Fri, 1 Dec 2023 16:34:00 +0100
Subject: [PATCH] Membership loading (#219)

* update sign in forms

* add some mobile treatment and clean up

* remove dashboard announcement
---
 src/App.vue                                   |  45 +--
 src/components/Modals/SignUpModal.vue         |  36 ++-
 src/components/Navigation/MobileNavHeader.vue |   2 +-
 src/components/SignUpForm.vue                 |  72 ++---
 src/components/UserMenu.vue                   |  29 +-
 src/pages/Community/CommunityBase.vue         |   4 +
 src/pages/Community/CommunityHome.vue         |   6 +-
 src/pages/Community/CommunityMembership.vue   |  40 ++-
 src/pages/Home/IllustratedLinkCard.vue        |   9 +-
 src/pages/Home/NextWeekGames.vue              |  39 +++
 src/pages/IndexPage.vue                       | 262 ++++++++++--------
 src/pages/PrivacyPolicy.vue                   |   8 +-
 src/pages/SignIn.vue                          |  38 +--
 src/pages/UserDashboard.vue                   |  26 --
 src/storeActions.ts                           |   5 +
 15 files changed, 347 insertions(+), 274 deletions(-)
 create mode 100644 src/pages/Home/NextWeekGames.vue

diff --git a/src/App.vue b/src/App.vue
index 84f05ed..6d89590 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -7,43 +7,15 @@
       @close="showNewProfileModal = false"
     />
     <OfflineIndicator />
-    <div
-      v-if="store.user && !shownDashboardAnnouncement"
-      class="z-50 fixed inset-x-0 mx-2 md:mx-auto w-fit rounded-xl bottom-6 p-6 bg-teal-200 text-teal-900 flex items-center gap-3 max-w-4xl"
-    >
-      <DismissButton
-        label="dismiss notification"
-        class="absolute top-2 right-2"
-        @click="shownDashboardAnnouncement = true"
-      />
-      <div class="grid grid-cols-6 gap-6">
-        <img
-          v-if="isSmAndLarger"
-          src="/public/images/task_done.png"
-          class="w-full"
-        />
-        <div
-          class="flex flex-col justify-center gap-2 col-span-full sm:col-span-5 sm:text-right"
-        >
-          <p class="md:text-lg font-semibold">
-            Your personal view of your next week of gaming is now available!
-          </p>
-          <p>
-            <router-link
-              to="/"
-              class="text-blue-700 underline"
-              @click="shownDashboardAnnouncement = true"
-              >Check it out now</router-link
-            >, or any time on the home page.
-          </p>
-        </div>
-      </div>
-    </div>
   </AppShell>
 </template>
 <script setup lang="ts">
 import { store } from "./store";
-import { getUserAccess, getUserMemberships } from "./storeActions";
+import {
+  getUserAccess,
+  getUserMemberships,
+  triggerUserAccessLoad,
+} from "./storeActions";
 import { supabase } from "./supabase";
 import ToasterManager from "./components/Toast/ToasterManager.vue";
 import { useRoute, useRouter } from "vue-router";
@@ -54,13 +26,7 @@ import { loadProfile } from "./api/profiles";
 import { log } from "./util/logger";
 import AppShell from "./layouts/AppShell.vue";
 import { Notification } from "./typings/Notification";
-import { useStorage, breakpointsTailwind, useBreakpoints } from "@vueuse/core";
-import DismissButton from "./components/Buttons/DismissButton.vue";
 
-const breakpoints = useBreakpoints(breakpointsTailwind);
-const isSmAndLarger = breakpoints.greater("sm");
-
-const shownDashboardAnnouncement = useStorage("dashboard-announcement", false);
 const route = useRoute();
 const router = useRouter();
 
@@ -80,6 +46,7 @@ supabase.auth.onAuthStateChange(async (event, session) => {
         }
         store.user = profile;
         store.userSettings = profile.user_settings;
+        triggerUserAccessLoad(session.user.id);
 
         if (!notificationSubscription.value) {
           loadNotificationsAndSubscribe();
diff --git a/src/components/Modals/SignUpModal.vue b/src/components/Modals/SignUpModal.vue
index 693424b..77a314b 100644
--- a/src/components/Modals/SignUpModal.vue
+++ b/src/components/Modals/SignUpModal.vue
@@ -1,5 +1,9 @@
 <template>
-  <BaseModal title="One sec, let's make you an account" :open="open">
+  <BaseModal
+    :title="showSignUpForm ? 'Create a new account' : 'Sign in to your account'"
+    :open="open"
+    @close="allowDismiss ? emit('cancel') : () => {}"
+  >
     <DismissButton
       v-if="allowDismiss"
       class="absolute top-4 right-4"
@@ -19,17 +23,22 @@
     </SignUpForm>
     <form
       v-else
-      class="flex flex-col space-y-4 lg:max-w-xl mx-auto"
+      class="flex flex-col lg:max-w-2xl mx-auto"
       @submit.prevent="handleLogin"
     >
-      <LinkButton
+      <BaseButton
         type="button"
-        class="text-sm text-brand-500 mr-auto"
+        size="bare"
+        class="text-blue-700 mr-auto"
         @click="showSignUpForm = true"
       >
         Need an account? Sign up
-      </LinkButton>
-      <div class="flex flex-col mt-6">
+      </BaseButton>
+      <div class="flex justify-center mt-6">
+        <GoogleButton @click="signInWithGoogle" />
+      </div>
+      <p class="text-xs text-slate-700 text-center my-4">OR</p>
+      <div class="flex flex-col">
         <form-label for="email"> Email </form-label>
         <form-input id="email" v-model="email" type="email" required />
       </div>
@@ -40,15 +49,11 @@
       <primary-button :is-loading="loading" class="mt-4">
         Sign in
       </primary-button>
-      <p class="text-xs text-slate-700 text-center my-4">OR</p>
-      <div class="flex justify-center">
-        <GoogleButton @click="signInWithGoogle" />
-      </div>
     </form>
   </BaseModal>
 </template>
 <script setup lang="ts">
-import { toRefs, ref } from "vue";
+import { ref, PropType } from "vue";
 import BaseModal from "./BaseModal.vue";
 import FormLabel from "@/components/Forms/FormLabel.vue";
 import FormInput from "@/components/Forms/FormInput.vue";
@@ -56,12 +61,12 @@ import PrimaryButton from "@/components/Buttons/PrimaryButton.vue";
 import SignUpForm from "@/components/SignUpForm.vue";
 import GoogleButton from "@/components/Buttons/GoogleButton.vue";
 import { supabase } from "@/supabase";
-import LinkButton from "@/components/Buttons/LinkButton.vue";
 import useToast from "@/components/Toast/useToast";
 import { log } from "@/util/logger";
 import { store } from "@/store";
 import DismissButton from "../Buttons/DismissButton.vue";
 import { loadProfile } from "@/api/profiles";
+import BaseButton from "../Buttons/BaseButton.vue";
 
 const { showSuccess, showError } = useToast();
 
@@ -74,8 +79,11 @@ const props = defineProps({
     type: Boolean,
     default: true,
   },
+  initialForm: {
+    type: String as PropType<"sign-up" | "sign-in">,
+    default: "sign-up",
+  },
 });
-toRefs(props);
 
 const emit = defineEmits(["signedIn", "cancel"]);
 
@@ -83,7 +91,7 @@ const email = ref("");
 const password = ref("");
 const loading = ref(false);
 
-const showSignUpForm = ref(true);
+const showSignUpForm = ref(props.initialForm === "sign-up");
 
 const handleSignUp = async ({
   email,
diff --git a/src/components/Navigation/MobileNavHeader.vue b/src/components/Navigation/MobileNavHeader.vue
index 5f28d23..72c7b91 100644
--- a/src/components/Navigation/MobileNavHeader.vue
+++ b/src/components/Navigation/MobileNavHeader.vue
@@ -119,7 +119,7 @@
               to="/login"
               active-class="text-brand-500 border-l border-brand-500 dark:border-brand-300"
             >
-              Sign in
+              Sign up or sign in
             </router-link>
           </menu-item>
           <MenuItem class="px-2 py-1 flex items-center">
diff --git a/src/components/SignUpForm.vue b/src/components/SignUpForm.vue
index 98ce040..94ebdb7 100644
--- a/src/components/SignUpForm.vue
+++ b/src/components/SignUpForm.vue
@@ -1,43 +1,50 @@
 <template>
-  <form
-    class="flex flex-col lg:max-w-xl mx-auto"
-    @submit.prevent="handleSubmit"
-  >
+  <form class="flex flex-col" @submit.prevent="handleSubmit">
     <slot name="heading">
       <Heading level="h1" as="h5" class="mb-3">Sign up</Heading>
     </slot>
-    <p class="text-sm font-medium">
+    <p class="font-medium mt-3">
       Sign up to join or start communities and play in games
     </p>
-    <LinkButton
+    <BaseButton
       type="button"
-      class="mr-auto mt-1 text-sm"
+      class="mr-auto mt-1 text-blue-700"
+      size="bare"
       @click="emit('signIn')"
     >
       Have an account already? Sign in
-    </LinkButton>
-    <form-label class="flex flex-col mt-6"> Email </form-label>
+    </BaseButton>
+    <div class="flex justify-center mt-12 mb-6">
+      <GoogleButton @click="emit('signUpWithGoogle')" />
+    </div>
+    <p class="text-xs text-slate-700 text-center my-4">OR</p>
+    <form-label class="flex flex-col mt-4"> Sign up with email </form-label>
     <form-input v-model="email" type="email" required />
-    <Popover class="relative">
-      <PopoverButton
-        type="button"
-        class="flex items-center gap-1 mr-auto mt-1 rounded-md hover:underline focus-styles"
-      >
-        <InformationCircleIcon class="w-4 h-4" />
-        <p class="text-xs text-slate-700">How will my email be used?</p>
-      </PopoverButton>
-
-      <PopoverPanel
-        class="absolute z-10 mt-2 bg-white p-4 rounded-md shadow-md border border-solid border-gray-100"
-      >
+    <LinkButton
+      type="button"
+      class="flex items-center gap-1 mr-auto mt-2 rounded-md hover:underline focus-styles"
+      @click="showEmailInfo = !showEmailInfo"
+    >
+      <InformationCircleIcon class="w-4 h-4" />
+      <p class="text-xs text-slate-700">How will my email be used?</p>
+    </LinkButton>
+    <Transition
+      enter-active-class="transition duration-150 ease-out"
+      enter-from-class="transform opacity-0"
+      enter-to-class="transform opacity-100"
+      leave-active-class="transition duration-75 ease-out"
+      leave-from-class="transform opacity-100"
+      leave-to-class="transform opacity-0"
+    >
+      <Well v-if="showEmailInfo" class="mt-3">
         <p class="text-sm leading-relaxed">
           Your email is used to notify you when RSVP status for games change,
           and is made available to the game facilitators and community
           administrators you join. You should sign up with a public email.
         </p>
-      </PopoverPanel>
-    </Popover>
-    <div class="mt-4">
+      </Well>
+    </Transition>
+    <div v-if="email.length > 0" class="mt-4">
       <form-label class="flex flex-col"> Password </form-label>
       <div class="flex items-end">
         <form-input
@@ -84,7 +91,10 @@
         {{ passwordError }}
       </p>
     </div>
-    <div class="text-xs text-slate-700 mt-6">
+    <primary-button :is-loading="loading" class="mt-6">
+      Sign up
+    </primary-button>
+    <div class="text-xs text-slate-700 mt-3">
       By signing up, you agree to the Playabl
       <router-link
         class="text-brand-500"
@@ -104,13 +114,6 @@
         Privacy Policy
       </router-link>
     </div>
-    <primary-button :is-loading="loading" class="mt-2">
-      Sign up
-    </primary-button>
-    <p class="text-xs text-slate-700 text-center my-4">OR</p>
-    <div class="flex justify-center">
-      <GoogleButton @click="emit('signUpWithGoogle')" />
-    </div>
   </form>
 </template>
 <script setup lang="ts">
@@ -120,7 +123,6 @@ import {
   EyeSlashIcon,
   InformationCircleIcon,
 } from "@heroicons/vue/24/outline";
-import { Popover, PopoverButton, PopoverPanel } from "@headlessui/vue";
 import FormLabel from "@/components/Forms/FormLabel.vue";
 import FormInput from "@/components/Forms/FormInput.vue";
 import Heading from "@/components/Heading.vue";
@@ -128,6 +130,8 @@ import PrimaryButton from "@/components/Buttons/PrimaryButton.vue";
 import LinkButton from "@/components/Buttons/LinkButton.vue";
 import GhostButton from "@/components/Buttons/GhostButton.vue";
 import GoogleButton from "@/components/Buttons/GoogleButton.vue";
+import BaseButton from "./Buttons/BaseButton.vue";
+import Well from "./Well.vue";
 
 const emit = defineEmits(["signUpWithEmail", "signUpWithGoogle", "signIn"]);
 
@@ -138,6 +142,8 @@ defineProps({
   },
 });
 
+const showEmailInfo = ref(false);
+
 const email = ref("");
 const password = ref("");
 const showPw = ref(false);
diff --git a/src/components/UserMenu.vue b/src/components/UserMenu.vue
index fbe8e3a..ec8702f 100644
--- a/src/components/UserMenu.vue
+++ b/src/components/UserMenu.vue
@@ -95,10 +95,28 @@
         </MenuItems>
       </transition>
     </Menu>
-    <router-link v-else to="/login" class="whitespace-nowrap hover:underline">
-      Sign in
-    </router-link>
+    <div v-else class="flex gap-3 items-center">
+      <PrimaryButton class="whitespace-nowrap" @click="signUpMode = 'sign-up'"
+        >Sign Up</PrimaryButton
+      >
+      <LinkButton class="whitespace-nowrap" @click="signUpMode = 'sign-in'">
+        Sign in
+      </LinkButton>
+    </div>
   </section>
+  <SignUpModal
+    v-if="signUpMode === 'sign-up'"
+    open
+    @signed-in="signUpMode = 'closed'"
+    @cancel="signUpMode = 'closed'"
+  />
+  <SignUpModal
+    v-if="signUpMode === 'sign-in'"
+    open
+    initial-form="sign-in"
+    @signed-in="signUpMode = 'closed'"
+    @cancel="signUpMode = 'closed'"
+  />
 </template>
 <script setup lang="ts">
 import { ref } from "vue";
@@ -112,8 +130,13 @@ import LoadingSpinner from "./LoadingSpinner.vue";
 import { log } from "@/util/logger";
 import UserAvatar from "./UserAvatar.vue";
 import flags from "@/util/flags";
+import PrimaryButton from "./Buttons/PrimaryButton.vue";
+import SignUpModal from "./Modals/SignUpModal.vue";
+import LinkButton from "./Buttons/LinkButton.vue";
+
 const activeMenuItem = "bg-gray-100 cursor-pointer";
 
+const signUpMode = ref<"sign-up" | "sign-in" | "closed">("closed");
 const isSigningOut = ref(false);
 const router = useRouter();
 
diff --git a/src/pages/Community/CommunityBase.vue b/src/pages/Community/CommunityBase.vue
index 9b06c51..14306c4 100644
--- a/src/pages/Community/CommunityBase.vue
+++ b/src/pages/Community/CommunityBase.vue
@@ -44,6 +44,7 @@ import {
 } from "@/api/communities";
 import { isUuid } from "@/util/uuid";
 import { getUpcomingCommunityEvents } from "@/api/communityEvents";
+import { triggerUserAccessLoad } from "@/storeActions";
 
 const currentRoute = useRoute();
 const router = useRouter();
@@ -117,6 +118,9 @@ const communityData = ref<Community>();
 const isLoading = ref(true);
 
 onMounted(async () => {
+  if (store?.user?.id) {
+    triggerUserAccessLoad(store.user.id);
+  }
   if (typeof id !== "string") throw new Error("Unusable community id param");
   if (!isUuid(id)) {
     const data = (await loadCommunityByShortName({
diff --git a/src/pages/Community/CommunityHome.vue b/src/pages/Community/CommunityHome.vue
index d51edee..03331a7 100644
--- a/src/pages/Community/CommunityHome.vue
+++ b/src/pages/Community/CommunityHome.vue
@@ -89,7 +89,11 @@
             v-else-if="communityStore.community.signup_method === 'REQUEST'"
             :is-loading="isJoining"
             class="w-full"
-            @click="displayRequestToJoinModal = true"
+            @click="
+              store.user
+                ? (displayRequestToJoinModal = true)
+                : (displaySignUp = true)
+            "
           >
             Request to join community
           </PrimaryButton>
diff --git a/src/pages/Community/CommunityMembership.vue b/src/pages/Community/CommunityMembership.vue
index 12d8be0..095d507 100644
--- a/src/pages/Community/CommunityMembership.vue
+++ b/src/pages/Community/CommunityMembership.vue
@@ -17,11 +17,11 @@
         </a>
       </div>
       <div class="grid gap-4">
-        <div v-for="level in accessLevels" :key="level.access_level_id.id">
-          <p>{{ level.access_level_id.name }}</p>
+        <div v-for="level in accessLevels" :key="level.id">
+          <p>{{ level.name }}</p>
           <p class="text-slate-600 text-sm">
-            {{ level.access_level_id.priority_access_time }}
-            {{ level.access_level_id.time_denomination }}
+            {{ level.priority_access_time }}
+            {{ level.time_denomination }}
           </p>
         </div>
       </div>
@@ -72,7 +72,7 @@
   </DeleteModal>
 </template>
 <script setup lang="ts">
-import { onMounted, ref } from "vue";
+import { computed, onMounted, ref } from "vue";
 import Heading from "@/components/Heading.vue";
 import SectionContainer from "@/components/SectionContainer.vue";
 import { AccessLevel } from "@/typings/AccessLevel";
@@ -80,23 +80,24 @@ import { store } from "@/store";
 import { loadUserCommunityAccessLevels } from "@/api/communityAccess";
 import { ROLES } from "@/util/roles";
 import { communityStore } from "./communityStore";
-import { loadUserCommunityMembership } from "@/api/communityMemberships";
-import { CommunityMembership } from "@/typings/CommunityMembership";
 import WarningButton from "@/components/Buttons/WarningButton.vue";
 import DeleteModal from "@/components/Modals/DeleteModal.vue";
 import { leaveCommunity } from "@/api/communities";
 import useToast from "@/components/Toast/useToast";
+import { triggerUserAccessLoad } from "@/storeActions";
 
 const { showSuccess, showError } = useToast();
 
 const loading = ref(true);
 const isLeaving = ref(false);
-const accessLevels = ref<{ access_level_id: AccessLevel }[]>([]);
-const membership = ref<CommunityMembership>();
+const accessLevels = ref<AccessLevel[]>([]);
+const membership = computed(() => {
+  return store.userCommunityMembership[communityStore.community.id];
+});
 const leaveCommunityModalOpen = ref(false);
 
 onMounted(async () => {
-  await Promise.all([getUserCommunityAccess(), getUserMembership()]);
+  await getUserCommunityAccess();
   loading.value = false;
 });
 
@@ -108,29 +109,20 @@ async function getUserCommunityAccess() {
     communityId: communityStore.community.id,
   });
   if (results) {
-    accessLevels.value = results;
-  }
-}
-
-async function getUserMembership() {
-  if (!store.user?.id) return;
-
-  const data = await loadUserCommunityMembership({
-    userId: store.user.id,
-    communityId: communityStore.community.id,
-  });
-  if (data) {
-    membership.value = data;
+    accessLevels.value = results.map(({ access_level_id: level }) => level);
   }
 }
 
 async function handleLeave() {
+  if (!store?.user?.id) {
+    return;
+  }
   isLeaving.value = true;
   try {
     await leaveCommunity(communityStore.community.id);
+    triggerUserAccessLoad(store?.user?.id);
     showSuccess({ message: `You have left ${communityStore.community.name}` });
     leaveCommunityModalOpen.value = false;
-    membership.value = undefined;
     accessLevels.value = [];
     communityStore.userRoleId = -1;
     communityStore.isAdmin = false;
diff --git a/src/pages/Home/IllustratedLinkCard.vue b/src/pages/Home/IllustratedLinkCard.vue
index 79ef1f7..f35ed70 100644
--- a/src/pages/Home/IllustratedLinkCard.vue
+++ b/src/pages/Home/IllustratedLinkCard.vue
@@ -4,9 +4,10 @@
     <p class="text-sm">
       {{ subTitle }}
     </p>
-    <div class="grid sm:grid-cols-3 md:grid-cols-5 gap-4 mt-6">
+    <div class="grid sm:grid-cols-3 md:grid-cols-5 gap-8 mt-6">
       <img
-        class="md:col-span-2 w-3/5 sm:w-full md:w-3/5 lg:w-full bg-cover mx-auto"
+        v-if="isSmAndLarger"
+        class="md:col-span-2 sm:w-full md:w-3/5 lg:w-full bg-cover mx-auto"
         :src="imgPath"
         alt=""
         width="100%"
@@ -30,6 +31,10 @@
 <script setup lang="ts">
 import { PropType } from "vue";
 import Heading from "../../components/Heading.vue";
+import { breakpointsTailwind, useBreakpoints } from "@vueuse/core";
+
+const breakpoints = useBreakpoints(breakpointsTailwind);
+const isSmAndLarger = breakpoints.greater("sm");
 
 defineProps({
   title: {
diff --git a/src/pages/Home/NextWeekGames.vue b/src/pages/Home/NextWeekGames.vue
new file mode 100644
index 0000000..c7448bd
--- /dev/null
+++ b/src/pages/Home/NextWeekGames.vue
@@ -0,0 +1,39 @@
+<template>
+  <section class="full-width bg-gradient-to-br from-blue-700 to-blue-900 py-12">
+    <div class="p-4 md:container md:mx-auto max-w-6xl">
+      <Heading id="find-your-next-game" as="h4" level="h4" class="text-white">
+        Ready for another game?
+      </Heading>
+      <p class="text-sm mt-2 mb-4 text-white">
+        Sessions with openings in the next seven days
+      </p>
+      <div
+        class="py-8 min-h-[212px] flex gap-6 overflow-auto snap-x snap-mandatory rounded-md"
+      >
+        <div
+          v-for="game in db.games"
+          :key="game.id"
+          class="snap-center flex-none w-[280px] md:w-[400px]"
+        >
+          <MiniGameItem
+            :session="game"
+            :all-game-sessions="game.game_id.sessions"
+          />
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+<script lang="ts" setup>
+import { PropType } from "vue";
+import Heading from "@/components/Heading.vue";
+import MiniGameItem from "../Community/MiniGameItem.vue";
+import { dashboard } from "../IndexPage.vue";
+
+defineProps({
+  db: {
+    type: Object as PropType<dashboard>,
+    required: true,
+  },
+});
+</script>
diff --git a/src/pages/IndexPage.vue b/src/pages/IndexPage.vue
index 358fe2a..e85856f 100644
--- a/src/pages/IndexPage.vue
+++ b/src/pages/IndexPage.vue
@@ -9,125 +9,117 @@
         new email.
       </p>
     </InfoBanner>
-    <div class="grid lg:grid-cols-2 gap-6 mt-8 mb-12">
-      <IllustratedLinkCard
-        img-path="/images/task_list.png"
-        title="Welcome to Playabl"
-        sub-title="Here are some guides to help you get started on Playabl"
-        :links="[
-          {
-            href: 'https://docs.playabl.io/guides/communities/finding-communities.html',
-            label: 'Finding and joining communities',
-            external: true,
-          },
-          {
-            href: 'https://docs.playabl.io/guides/games/finding-games.html',
-            label: 'Finding and joining games',
-            external: true,
-          },
-          {
-            href: 'https://docs.playabl.io/guides/communities/starting-a-community.html',
-            label: 'Starting a community',
-            external: true,
-          },
-          {
-            href: 'https://docs.playabl.io/guides/events/running-events.html',
-            label: 'Running a community event',
-            external: true,
-          },
-        ]"
-      />
-      <IllustratedLinkCard
-        img-path="/images/world_travel.png"
-        title="Jump To"
-        sub-title="Here are some links to help you get to gaming"
-        :links="[
-          {
-            href: '/login',
-            label: 'Sign in or create an account',
-          },
-          {
-            href: '/games/browse?sort.key=created_at&sort.dir=desc&filter=open',
-            label: 'Browse newest games across communities',
-          },
-          {
-            href: '/communities/browse?sort.key=member-count&sort.dir=desc',
-            label: 'Browse communities',
-          },
-          {
-            href: '/#find-your-next-game',
-            label: 'Find a game for this week',
-          },
-        ]"
-      />
-    </div>
-
-    <section v-if="store.user">
-      <div
-        class="full-width bg-brand-500 text-white min-h-[250px] md:min-h-[360px] lg:min-h-[415px]"
-      >
-        <div
-          class="py-4 md:container md:mx-auto max-w-6xl px-4 grid grid-cols-2 gap-2 items-center"
-        >
-          <div class="flex flex-col gap-2 place-self-center">
-            <p class="text-lg md:text-2xl">
-              Welcome {{ store.user.username || store.user.email }}
-            </p>
-            <p class="md:text-lg text-teal-300 font-semibold">
-              Here's your next week of gaming
+    <div class="flex flex-col gap-12">
+      <div class="grid lg:grid-cols-2 gap-6">
+        <IllustratedLinkCard
+          img-path="/images/task_list.png"
+          title="Welcome to Playabl"
+          sub-title="Here are some guides to help you get started on Playabl"
+          :links="[
+            {
+              href: 'https://docs.playabl.io/guides/communities/finding-communities.html',
+              label: 'Finding and joining communities',
+              external: true,
+            },
+            {
+              href: 'https://docs.playabl.io/guides/games/finding-games.html',
+              label: 'Finding and joining games',
+              external: true,
+            },
+            {
+              href: 'https://docs.playabl.io/guides/communities/starting-a-community.html',
+              label: 'Starting a community',
+              external: true,
+            },
+            {
+              href: 'https://docs.playabl.io/guides/events/running-events.html',
+              label: 'Running a community event',
+              external: true,
+            },
+          ]"
+        />
+        <IllustratedLinkCard
+          img-path="/images/world_travel.png"
+          title="Jump To"
+          sub-title="Here are some links to help you get to gaming"
+          :links="jumpToLinks"
+        />
+      </div>
+      <section v-if="store.user">
+        <div class="full-width bg-brand-500 text-white">
+          <div
+            class="py-12 md:container md:mx-auto max-w-6xl px-12 grid sm:grid-cols-3 gap-12 items-center"
+          >
+            <p v-if="loadingDb">
+              Loading your personal dashboard. One moment please.
             </p>
+            <div v-else class="sm:col-span-2 flex flex-col gap-2">
+              <p class="text-lg md:text-3xl lg:text-4xl">
+                Welcome {{ store.user.username || store.user.email }}
+              </p>
+              <p class="md:text-lg lg:text-xl text-teal-300 font-semibold">
+                Here's your next week of gaming
+              </p>
+            </div>
+            <img
+              v-if="isSmAndLarger"
+              src="/images/calendar.png"
+              class="bg-cover w-full max-w-sm"
+              alt=""
+            />
           </div>
-          <img
-            src="/images/calendar.png"
-            class="bg-cover w-full max-w-sm"
-            alt=""
-          />
         </div>
-      </div>
-
-      <div class="my-8 p-8 rounded-lg flex items-center gap-6 bg-teal-300">
-        <LightBulbIcon class="w-6 h-6 text-teal-700 shrink-0" />
-        <p class="text-teal-900 text-sm md:text-base">
-          You can click on a user's image or avatar and see more info about
-          times you've played together
-        </p>
-      </div>
-      <div class="flex flex-col gap-12 mt-12">
-        <UserDashboard :db="db" />
-      </div>
-    </section>
-    <section
-      v-else
-      id="find-your-next-game"
-      class="full-width bg-gradient-to-br from-blue-700 to-blue-900 py-12"
-    >
-      <div class="p-4 md:container md:mx-auto max-w-6xl">
-        <Heading as="h4" level="h4" class="text-white">
-          Ready for another game?
-        </Heading>
-        <p class="text-sm mt-2 mb-4 text-white">
-          Sessions with openings in the next seven days
-        </p>
         <div
-          class="py-8 min-h-[400px] flex gap-6 overflow-auto snap-x snap-mandatory rounded-md"
+          v-if="!loadingDb"
+          class="my-8 p-8 rounded-lg flex items-center gap-6 bg-teal-300"
         >
+          <LightBulbIcon class="w-6 h-6 text-teal-700 shrink-0" />
+          <p class="text-teal-900 text-sm md:text-base">
+            You can click on a user's image or avatar and see more info about
+            times you've played together
+          </p>
+        </div>
+        <div v-if="!loadingDb" class="flex flex-col gap-12 mt-12">
+          <UserDashboard :db="db" />
+        </div>
+      </section>
+      <section v-else id="sign-up">
+        <div class="full-width bg-brand-500 text-white">
           <div
-            v-for="game in db.games"
-            :key="game.id"
-            class="snap-center flex-none w-80"
+            class="py-12 md:container md:mx-auto max-w-6xl px-12 grid sm:grid-cols-3 gap-12 items-center"
           >
-            <MiniGameItem
-              :session="game"
-              :all-game-sessions="game.game_id.sessions"
+            <div class="flex flex-col gap-2 place-self-center sm:col-span-2">
+              <p class="text-lg md:text-3xl lg:text-4xl font-paytone">
+                Join roleplaying communities and games now with your free acount
+              </p>
+              <BaseButton
+                class="text-slate-700 font-bold mt-6 bg-teal-400"
+                @click="showSignUp = true"
+              >
+                Sign up now
+              </BaseButton>
+            </div>
+            <img
+              v-if="isSmAndLarger"
+              src="/images/task_done.png"
+              class="bg-cover w-full max-w-sm"
+              alt=""
             />
           </div>
         </div>
-      </div>
-    </section>
+      </section>
+      <NextWeekGames :db="db" />
+    </div>
+    <SignUpModal
+      :open="showSignUp"
+      initial-form="sign-up"
+      @signed-in="showSignUp = false"
+      @cancel="showSignUp = false"
+    />
   </BaseTemplate>
 </template>
 <script setup lang="ts">
-import { onMounted, ref } from "vue";
+import { computed, onMounted, ref, watch } from "vue";
 import InfoBanner from "@/components/Banners/InfoBanner.vue";
 import BaseTemplate from "@/layouts/BaseTemplate.vue";
 import { useRoute } from "vue-router";
@@ -138,9 +130,14 @@ import { LightBulbIcon } from "@heroicons/vue/24/outline";
 import client from "@/api/client";
 import { Session } from "@/typings/Session";
 import { Profile } from "@/typings/Profile";
-import Heading from "@/components/Heading.vue";
-import MiniGameItem from "./Community/MiniGameItem.vue";
 import { Game } from "@/typings/Game";
+import NextWeekGames from "./Home/NextWeekGames.vue";
+import SignUpModal from "@/components/Modals/SignUpModal.vue";
+import BaseButton from "@/components/Buttons/BaseButton.vue";
+import { breakpointsTailwind, useBreakpoints } from "@vueuse/core";
+
+const breakpoints = useBreakpoints(breakpointsTailwind);
+const isSmAndLarger = breakpoints.greater("sm");
 
 const route = useRoute();
 
@@ -149,6 +146,45 @@ const showConfirmEmailBanner = ref(
     "#message=Confirmation+link+accepted.+Please+proceed+to+confirm+link+sent+to+the+other+email",
   ),
 );
+const showSignUp = ref(false);
+
+const jumpToLinks = computed(() => {
+  if (store.user) {
+    return [
+      {
+        href: "/games/browse?sort.key=created_at&sort.dir=desc&filter=open",
+        label: "Browse newest games across communities",
+      },
+      {
+        href: "/communities/browse?sort.key=member-count&sort.dir=desc",
+        label: "Browse communities",
+      },
+      {
+        href: "/#find-your-next-game",
+        label: "Find a game for this week",
+      },
+    ];
+  } else {
+    return [
+      {
+        href: "/#sign-up",
+        label: "Sign in or create an account",
+      },
+      {
+        href: "/games/browse?sort.key=created_at&sort.dir=desc&filter=open",
+        label: "Browse newest games across communities",
+      },
+      {
+        href: "/communities/browse?sort.key=member-count&sort.dir=desc",
+        label: "Browse communities",
+      },
+      {
+        href: "/#find-your-next-game",
+        label: "Find a game for this week",
+      },
+    ];
+  }
+});
 
 export type sessionWithGame = Omit<Session, "game_id"> & {
   game_id: Game & {
@@ -189,8 +225,14 @@ const db = ref<dashboard>({
   playerHistory: {},
 });
 
-onMounted(async () => {
+const loadingDb = ref(false);
+
+async function loadDashboard() {
+  loadingDb.value = true;
   const { data } = await client.get("/.netlify/functions/dashboard");
   db.value = data;
-});
+  loadingDb.value = false;
+}
+onMounted(loadDashboard);
+watch(() => store.user, loadDashboard);
 </script>
diff --git a/src/pages/PrivacyPolicy.vue b/src/pages/PrivacyPolicy.vue
index 10e204e..8062383 100644
--- a/src/pages/PrivacyPolicy.vue
+++ b/src/pages/PrivacyPolicy.vue
@@ -1,7 +1,7 @@
 <template>
   <BaseTemplate>
     <Heading as="h1" level="h1">Privacy Policy</Heading>
-    <p class="text-xs text-slate-700 mt-2">Last updated: October 10th, 2023</p>
+    <p class="text-xs text-slate-700 mt-2">Last updated: December 1st, 2023</p>
     <p class="prose mt-12">
       The information we collect about you is not sold or transferred to any
       third party except to provide services to you as part of your use of the
@@ -57,8 +57,10 @@
       are comfortable with having available to others.
     </p>
     <p class="prose mt-6">
-      For any questions or concerns, or to request account deletion, contact
-      <a href="mailto:support@playabl.io">Playabl Support</a>.
+      For any questions or concerns, or to request account deletion,
+      <a target="_blank" href="https://github.com/Playabl-io/playabl/issues"
+        >please reach out on GitHub</a
+      >.
     </p>
   </BaseTemplate>
 </template>
diff --git a/src/pages/SignIn.vue b/src/pages/SignIn.vue
index 706c08a..157a8ff 100644
--- a/src/pages/SignIn.vue
+++ b/src/pages/SignIn.vue
@@ -4,27 +4,33 @@
       <p v-if="submitted" class="grid place-items-center text-xl font-bold">
         Awesome! Watch your email for a confirmation message very soon!
       </p>
-      <SignUpForm
-        v-else-if="displaySignUp"
-        :loading="loading"
-        @sign-in="displaySignUp = false"
-        @sign-up-with-email="handleSignUp"
-        @sign-up-with-google="signInWithGoogle"
-      />
+      <div v-else-if="displaySignUp" class="lg:max-w-2xl mx-auto">
+        <SignUpForm
+          :loading="loading"
+          @sign-in="displaySignUp = false"
+          @sign-up-with-email="handleSignUp"
+          @sign-up-with-google="signInWithGoogle"
+        />
+      </div>
       <form
         v-else
-        class="flex flex-col lg:max-w-xl mx-auto"
+        class="flex flex-col lg:max-w-2xl mx-auto"
         @submit.prevent="handleLogin"
       >
         <Heading level="h1" as="h5" class="mb-3">Sign in</Heading>
-        <LinkButton
-          class="self-start text-sm"
+        <BaseButton
           type="button"
+          size="bare"
+          class="text-blue-700 mr-auto"
           @click="displaySignUp = true"
         >
           Need an account? Sign up
-        </LinkButton>
-        <div class="flex flex-col mt-6">
+        </BaseButton>
+        <div class="flex justify-center mt-12">
+          <GoogleButton @click="signInWithGoogle" />
+        </div>
+        <p class="text-xs text-slate-700 text-center my-4">OR</p>
+        <div class="flex flex-col">
           <form-label for="email"> Email </form-label>
           <form-input id="email" v-model="email" type="email" required />
         </div>
@@ -44,14 +50,10 @@
         </primary-button>
         <RouterLink
           to="/forgot-password"
-          class="mt-6 text-sm text-slate-700 hover:underline"
+          class="mt-2 text-sm text-slate-700 hover:underline"
         >
           Forgot password?
         </RouterLink>
-        <p class="text-xs text-slate-700 text-center my-4">OR</p>
-        <div class="flex justify-center">
-          <GoogleButton @click="signInWithGoogle" />
-        </div>
       </form>
     </section>
   </BaseTemplate>
@@ -64,13 +66,13 @@ import PrimaryButton from "@/components/Buttons/PrimaryButton.vue";
 import { ref } from "vue";
 import { supabase } from "@/supabase";
 import BaseTemplate from "@/layouts/BaseTemplate.vue";
-import LinkButton from "@/components/Buttons/LinkButton.vue";
 import useToast from "@/components/Toast/useToast";
 import { log } from "@/util/logger";
 import { useRouter, useRoute } from "vue-router";
 import { store } from "@/store";
 import GoogleButton from "@/components/Buttons/GoogleButton.vue";
 import SignUpForm from "../components/SignUpForm.vue";
+import BaseButton from "@/components/Buttons/BaseButton.vue";
 
 const route = useRoute();
 const router = useRouter();
diff --git a/src/pages/UserDashboard.vue b/src/pages/UserDashboard.vue
index 0984e21..8490869 100644
--- a/src/pages/UserDashboard.vue
+++ b/src/pages/UserDashboard.vue
@@ -136,35 +136,10 @@
       </div>
     </div>
   </section>
-  <section class="full-width bg-gradient-to-br from-blue-700 to-blue-900 py-12">
-    <div class="p-4 md:container md:mx-auto max-w-6xl">
-      <Heading id="find-your-next-game" as="h4" level="h4" class="text-white">
-        Ready for another game?
-      </Heading>
-      <p class="text-sm mt-2 mb-4 text-white">
-        Sessions with openings in the next seven days
-      </p>
-      <div
-        class="py-8 min-h-[212px] flex gap-6 overflow-auto snap-x snap-mandatory rounded-md"
-      >
-        <div
-          v-for="game in db.games"
-          :key="game.id"
-          class="snap-center flex-none w-[280px] md:w-[400px]"
-        >
-          <MiniGameItem
-            :session="game"
-            :all-game-sessions="game.game_id.sessions"
-          />
-        </div>
-      </div>
-    </div>
-  </section>
 </template>
 <script lang="ts" setup>
 import { PropType } from "vue";
 import { store } from "@/store";
-import Heading from "@/components/Heading.vue";
 import { pluralize } from "@/util/grammar";
 import SessionName from "./Home/SessionName.vue";
 import SessionTime from "./Home/SessionTime.vue";
@@ -172,7 +147,6 @@ import MemberCheckAvatar from "./Home/MemberCheckAvatar.vue";
 import { dashboard } from "./IndexPage.vue";
 import { HeartIcon } from "@heroicons/vue/24/solid";
 import { breakpointsTailwind, useBreakpoints } from "@vueuse/core";
-import MiniGameItem from "./Community/MiniGameItem.vue";
 
 const breakpoints = useBreakpoints(breakpointsTailwind);
 const isMdAndLarger = breakpoints.greater("md");
diff --git a/src/storeActions.ts b/src/storeActions.ts
index 7f2036e..eb22c96 100644
--- a/src/storeActions.ts
+++ b/src/storeActions.ts
@@ -21,3 +21,8 @@ export async function getUserAccess(id: string) {
     store.userCommunityAccess = data;
   }
 }
+
+export async function triggerUserAccessLoad(id: string) {
+  getUserAccess(id);
+  getUserMemberships(id);
+}