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,56 @@
+<script setup lang="ts">
+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,
+)
+</script>
+
+<template>
+  <v-card
+    v-if="showPopover"
+    class="redirect-prompt pa-4"
+    elevation="8"
+    rounded="lg"
+    max-width="280"
+  >
+    <div class="d-flex align-center justify-space-between">
+      <span class="text-body-1">Skip this page next time?</span>
+      <v-btn
+        :icon="mdiClose"
+        variant="text"
+        size="small"
+        color="warning"
+        density="comfortable"
+        aria-label="Dismiss"
+        @click="redirectStore.dismiss()"
+      />
+    </div>
+    <a
+      class="text-primary text-decoration-none hover:text-decoration-underline d-inline-flex align-center mt-1"
+      href="#"
+      @click.prevent="redirectStore.enable()"
+    >
+      Always open dashboard
+      <v-icon :icon="mdiArrowRight" size="small" class="ml-1" />
+    </a>
+  </v-card>
+</template>
+
+<style scoped>
+.redirect-prompt {
+  position: absolute;
+  right: 0;
+  top: 100%;
+  margin-top: 8px;
+  z-index: 10;
+}
+</style>

web/app/layouts/website.vue

@@ -100,16 +100,21 @@ function goToPricing() {
               Get Started
               <span v-show="lgAndUp">&nbsp;For Free</span>
             </v-btn>
-            <v-btn
+            <div
               v-show="authStore.authUser !== null"
-              color="primary"
-              variant="flat"
-              :class="{ 'mt-5': mdAndUp, 'mt-1': !mdAndUp }"
-              :size="lgAndUp ? 'large' : 'default'"
-              :to="{ name: 'threads' }"
+              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,9 @@
+export default defineNuxtRouteMiddleware(() => {
+  try {
+    if (localStorage.getItem('httpsms_redirect_to_threads') === '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'
+
+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() {
+      enabled.value = true
+      try {
+        localStorage.setItem(STORAGE_KEY, 'true')
+      } catch (error) {
+        console.error(error)
+      }
+      navigateTo('/threads', { replace: true })
+    }
+
+    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 }
+  },
+)