feat: open paywall after user idle for 1s

src/components/LeakyPaywall.vue

@@ -65,9 +65,23 @@ useEventListener(window, 'wheel', (event) => {
   }
 })
 
-// If user scroll over 40%, open the paywall
+const { idle } = useIdle(1000, {
+  events: ['mousedown', 'resize', 'keydown', 'wheel'],
+})
+
+const everIdle = ref(false)
+
+// Detect whenever user idle over 1s
+whenever(idle, () => {
+  everIdle.value = true
+})
+
+// If user scroll over 40%, we will need paywall
+const isNeedPaywall = computed(() => y.value > height.value * 0.4)
+
 whenever(
-  () => y.value > height.value * 0.4,
+  // Only if user idle, and over 40% will open paywall
+  logicAnd(everIdle, isNeedPaywall),
   async () => {
     scrollLock.value = true
     show.value = true