feat(web): redirect logged-in users from root to /threads (opt-in)

.github/workflows/web.yml

@@ -34,7 +34,7 @@ jobs:
       - uses: pnpm/action-setup@v6
         name: Install pnpm
         with:
-          version: 11
+          version: 11.11.0
 
       - name: Install dependencies 📦
         run: pnpm install
@@ -66,7 +66,7 @@ jobs:
       - uses: pnpm/action-setup@v6
         name: Install pnpm
         with:
-          version: 11
+          version: 11.11.0
 
       - name: Install dependencies 📦
         run: pnpm install

web/app/components/MessageThreadHeader.vue

@@ -27,6 +27,7 @@ const phonesStore = usePhonesStore()
 const threadsStore = useThreadsStore()
 const appStore = useAppStore()
 const notificationsStore = useNotificationsStore()
+const redirectPreferenceStore = useRedirectPreferenceStore()
 
 const selectedMenuItem = ref(-1)
 
@@ -71,6 +72,7 @@ async function logout() {
   authStore.resetState()
   phonesStore.resetState()
   threadsStore.resetState()
+  redirectPreferenceStore.resetState()
   notificationsStore.addNotification({
     type: 'info',
     message: 'You have successfully logged out',

web/app/components/RedirectPromptPopover.vue

@@ -0,0 +1,59 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { mdiClose, mdiArrowRight } from '@mdi/js'
+
+const route = useRoute()
+const authStore = useAuthStore()
+const redirectStore = useRedirectPreferenceStore()
+
+const showPopover = computed(
+  () =>
+    route.name === 'index' &&
+    authStore.authUser !== null &&
+    !redirectStore.enabled &&
+    !redirectStore.dismissedThisSession,
+)
+
+const menuOpen = computed({
+  get: () => showPopover.value,
+  set: (value: boolean) => {
+    if (!value) redirectStore.dismiss()
+  },
+})
+</script>
+
+<template>
+  <v-menu
+    v-model="menuOpen"
+    activator="parent"
+    location="bottom end"
+    offset="8"
+    :open-on-click="false"
+    :close-on-content-click="false"
+  >
+    <v-list width="280" class="py-0" rounded="lg" elevation="8">
+      <v-list-item>
+        <v-list-item-title class="text-body-1">
+          Skip this page next time?
+        </v-list-item-title>
+        <template #append>
+          <v-btn
+            :icon="mdiClose"
+            variant="text"
+            size="small"
+            color="warning"
+            density="comfortable"
+            aria-label="Dismiss"
+            @click="redirectStore.dismiss()"
+          />
+        </template>
+      </v-list-item>
+      <v-list-item class="text-primary" @click="redirectStore.enable()">
+        <v-list-item-title>Always open dashboard</v-list-item-title>
+        <template #append>
+          <v-icon :icon="mdiArrowRight" size="small" />
+        </template>
+      </v-list-item>
+    </v-list>
+  </v-menu>
+</template>

web/app/layouts/website.vue

@@ -80,7 +80,11 @@ function goToPricing() {
               Blog
             </v-btn>
             <v-btn
-              v-show="lgAndUp && authStore.authUser === null"
+              v-show="
+                lgAndUp &&
+                authStore.authStateChanged &&
+                authStore.authUser === null
+              "
               size="large"
               variant="text"
               color="primary"
@@ -90,7 +94,7 @@ function goToPricing() {
               Login
             </v-btn>
             <v-btn
-              v-show="authStore.authUser === null"
+              v-show="authStore.authStateChanged && authStore.authUser === null"
               color="primary"
               variant="flat"
               :class="{ 'mt-5': mdAndUp, 'mt-1': !mdAndUp }"
@@ -100,16 +104,21 @@ function goToPricing() {
               Get Started
               <span v-show="lgAndUp">&nbsp;For Free</span>
             </v-btn>
-            <v-btn
-              v-show="authStore.authUser !== null"
-              color="primary"
-              variant="flat"
-              :class="{ 'mt-5': mdAndUp, 'mt-1': !mdAndUp }"
-              :size="lgAndUp ? 'large' : 'default'"
-              :to="{ name: 'threads' }"
+            <div
+              v-show="authStore.authStateChanged && authStore.authUser !== null"
+              class="position-relative d-inline-block"
             >
-              Dashboard
-            </v-btn>
+              <v-btn
+                color="primary"
+                variant="flat"
+                :class="{ 'mt-5': mdAndUp, 'mt-1': !mdAndUp }"
+                :size="lgAndUp ? 'large' : 'default'"
+                :to="{ name: 'threads' }"
+              >
+                Dashboard
+              </v-btn>
+              <RedirectPromptPopover />
+            </div>
           </v-col>
         </v-row>
       </v-container>

web/app/middleware/redirectToThreads.ts

@@ -0,0 +1,11 @@
+import { STORAGE_KEY } from '~/stores/redirectPreference'
+
+export default defineNuxtRouteMiddleware(() => {
+  try {
+    if (localStorage.getItem(STORAGE_KEY) === 'true') {
+      return navigateTo('/threads', { replace: true })
+    }
+  } catch (error) {
+    console.error(error)
+  }
+})

web/app/pages/index.vue

@@ -28,6 +28,7 @@ import {
 
 definePageMeta({
   layout: 'website',
+  middleware: ['redirect-to-threads'],
 })
 
 useSeoMeta({

web/app/pages/settings/index.vue

@@ -47,6 +47,7 @@ const authStore = useAuthStore()
 const phonesStore = usePhonesStore()
 const billingStore = useBillingStore()
 const notificationsStore = useNotificationsStore()
+const redirectPreferenceStore = useRedirectPreferenceStore()
 
 const firebaseUser = ref<FirebaseUser | null>(null)
 const gravatarUrl = ref<string | null>(null)
@@ -773,6 +774,7 @@ async function deleteUserAccount() {
     await signOut(auth)
     authStore.resetState()
     phonesStore.resetState()
+    redirectPreferenceStore.resetState()
     notificationsStore.addNotification({
       type: 'info',
       message: 'You have successfully logged out',

web/app/stores/redirectPreference.ts

@@ -0,0 +1,47 @@
+import { defineStore } from 'pinia'
+import { ref } from 'vue'
+
+export const STORAGE_KEY = 'httpsms_redirect_to_threads'
+
+function readFlag(): boolean {
+  try {
+    return localStorage.getItem(STORAGE_KEY) === 'true'
+  } catch (error) {
+    console.error(error)
+    return false
+  }
+}
+
+export const useRedirectPreferenceStore = defineStore(
+  'redirectPreference',
+  () => {
+    const enabled = ref(readFlag())
+    const dismissedThisSession = ref(false)
+
+    function enable() {
+      try {
+        localStorage.setItem(STORAGE_KEY, 'true')
+        enabled.value = true
+        navigateTo('/threads', { replace: true })
+      } catch (error) {
+        console.error(error)
+      }
+    }
+
+    function dismiss() {
+      dismissedThisSession.value = true
+    }
+
+    function resetState() {
+      enabled.value = false
+      dismissedThisSession.value = false
+      try {
+        localStorage.removeItem(STORAGE_KEY)
+      } catch (error) {
+        console.error(error)
+      }
+    }
+
+    return { enabled, dismissedThisSession, enable, dismiss, resetState }
+  },
+)