Auto switch phases

islands/Routine.tsx

@@ -1,6 +1,8 @@
 import { DailyPhase, DailyPhaseModel, Task, toPhase } from '@homeman/models.ts'
-import { useSignal } from '@preact/signals'
+import { signal, useSignal } from '@preact/signals'
 import { excitement } from '@homeman/common.ts'
+import { IS_BROWSER } from '$fresh/runtime.ts'
+import { useEffect } from 'preact/hooks'
 
 export interface Props {
 	tasks: Task[]
@@ -19,12 +21,27 @@ const phaseEmoji: Record<DailyPhase, string> = {
 }
 
 type TaskGroups = Record<DailyPhase, TaskWithIndex[]>
+let lastPhaseSelection = new Date()
 
 export function Routine(
 	props: Props,
 ) {
 	const tasks = useSignal(props.tasks)
 	const currentPhase = useSignal(toPhase())
+
+	useEffect(() => {
+		if (IS_BROWSER) {
+			setInterval(() => {
+				const delta = (new Date()).getTime() - lastPhaseSelection.getTime()
+				const nowPhase = toPhase()
+				if (nowPhase != currentPhase.value && delta >= 5000) {
+					currentPhase.value = nowPhase
+					lastPhaseSelection = new Date()
+				}
+			}, 2_000)
+		}
+	}, [])
+
 	const taskGroups: TaskGroups = {
 		Morning: [],
 		Midday: [],
@@ -40,7 +57,7 @@ export function Routine(
 					<button
 						onClick={() => {
 							currentPhase.value = phase
-							console.log(currentPhase, phase)
+							lastPhaseSelection = new Date()
 						}}
 						class={`p-4 shrink-0 grow border-b-2 text-lg ${
 							currentPhase.value == phase