feat(tutorial): implement comprehensive tutorial system with step guidance

- 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.

frontend/src/components/reward/RewardView.vue

@@ -36,7 +36,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted } from 'vue'
+import { ref, onMounted, onUnmounted, watch } from 'vue'
 import { useRouter } from 'vue-router'
 import ItemList from '../shared/ItemList.vue'
 import MessageBlock from '@/components/shared/MessageBlock.vue'
@@ -47,6 +47,11 @@ import type { Reward } from '@/common/models'
 import { REWARD_FIELDS } from '@/common/models'
 
 import { eventBus } from '@/common/eventBus'
+import {
+  maybeShow as tutorialMaybeShow,
+  markStepSeen as tutorialMark,
+  tutorialReady,
+} from '@/tutorial/controller'
 
 const $router = useRouter()
 
@@ -62,6 +67,15 @@ function handleRewardModified(event: any) {
   }
 }
 
+watch([rewardCountRef, tutorialReady], ([count, ready]) => {
+  if (!ready) return
+  if (count === 0) {
+    tutorialMaybeShow('create-reward', () => document.querySelector('.fab') as HTMLElement | null)
+  } else if (typeof count === 'number' && count > 0) {
+    void tutorialMark('has-created-reward')
+  }
+})
+
 onMounted(() => {
   eventBus.on('reward_modified', handleRewardModified)
 })