feat(tutorial): implement comprehensive tutorial system with step guidance
All checks were successful
Chore App Build, Test, and Push Docker Images / build-and-push (push) Successful in 3m9s

- Added tutorial controller to manage tutorial state and progress.
- Introduced HelpButton component for contextual help throughout the application.
- Created various tutorial steps for onboarding and feature guidance.
- Integrated tutorial prompts in multiple components (ChildrenListView, LoginButton, ScheduleModal, etc.) to enhance user experience.
- Implemented logic to show tutorials based on user actions and state.
- Added functionality to dismiss and skip tutorial sessions.
- Established a mechanism to hydrate tutorial state from user profile.
This commit is contained in:
2026-05-26 16:54:45 -04:00
parent ec4912aa4a
commit d147bd6f27
23 changed files with 1338 additions and 5 deletions

View File

@@ -161,10 +161,11 @@
</template>
<script setup lang="ts">
import { ref, computed } from 'vue'
import { ref, computed, onMounted } from 'vue'
import ModalDialog from './ModalDialog.vue'
import TimePickerPopover from './TimePickerPopover.vue'
import DateInputField from './DateInputField.vue'
import { maybeShow as tutorialMaybeShow } from '@/tutorial/controller'
import {
setChoreSchedule,
deleteChoreSchedule,
@@ -258,6 +259,13 @@ const intervalTime = ref<TimeValue>({
const saving = ref(false)
const errorMsg = ref<string | null>(null)
onMounted(() => {
tutorialMaybeShow(
'create-chore-schedule',
() => document.querySelector('.day-chips .chip') as HTMLElement | null,
)
})
// ── original snapshot (for dirty detection) ──────────────────────────────────
const origMode = props.schedule?.mode ?? 'days'