feat: add onboarding tutorial for new users
Chore App Build, Test, and Push Docker Images / build-and-push (push) Failing after 3m4s

- Introduced a modular tutorial layer to guide new parents through the app setup process.
- Implemented a 3-step forced intro after first sign-in (PIN setup → child creation → chore creation).
- Added just-in-time contextual hints for various features as users encounter them.
- Persisted user progress on the backend with new fields in the User model.
- Created a new tutorial controller and step registry in the frontend for managing tutorial states.
- Added Help button for easy access to tutorial tips and a restart option in the user profile.
- Ensured accessibility and mobile responsiveness for the tutorial overlay.
- Included tests for backend and frontend functionalities related to the tutorial.
This commit is contained in:
2026-06-19 17:27:35 -04:00
parent d147bd6f27
commit e2bb9cd6b9
24 changed files with 1764 additions and 627 deletions
@@ -1,5 +1,5 @@
<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount, onUnmounted, watch } from 'vue'
import { ref, onMounted, onBeforeUnmount, onUnmounted, watch, nextTick } from 'vue'
import { useRouter } from 'vue-router'
import { getCachedImageUrl, revokeAllImageUrls } from '../../common/imageCache'
import { isParentAuthenticated } from '../../stores/auth'
@@ -160,9 +160,14 @@ function maybeTriggerCreateChildTutorial() {
if (loading.value) return
if (!tutorialReady.value) return
if (children.value.length === 0) {
tutorialMaybeShow('create-child', () => document.querySelector('.fab') as HTMLElement | null)
nextTick(() => {
tutorialMaybeShow('create-child')
})
} else {
void tutorialMark('has-created-child')
nextTick(() => {
tutorialMaybeShow('child-points')
})
}
}