Allow the user to reset a single tutorial

Author: tristantr

frontend/src/lib/components/home/TutorialButton.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { CheckCircle2, Circle } from 'lucide-svelte'
+	import { CheckCircle2, Circle, RefreshCw } from 'lucide-svelte'
 	import type { ComponentType } from 'svelte'
 
 	interface Props {
@@ -10,6 +10,7 @@
 		isCompleted?: boolean
 		disabled?: boolean
 		comingSoon?: boolean
+		onReset?: () => void
 	}
 
 	let {
@@ -19,13 +20,18 @@
 		onclick,
 		isCompleted = false,
 		disabled = false,
-		comingSoon = false
+		comingSoon = false,
+		onReset
 	}: Props = $props()
+
+	let isHovered = $state(false)
 </script>
 
 <button
 	onclick={disabled || comingSoon ? undefined : onclick}
 	disabled={disabled || comingSoon}
+	onmouseenter={() => (isHovered = true)}
+	onmouseleave={() => (isHovered = false)}
 	class="group relative flex items-center gap-4 w-full px-4 py-3 first-of-type:!border-t-0 first-of-type:rounded-t-md last-of-type:rounded-b-md [*:not(:last-child)]:border-b border-b border-light transition-colors text-left last:border-b-0 {disabled || comingSoon
 		? 'opacity-50 cursor-not-allowed'
 		: 'hover:bg-surface-hover'}"
@@ -50,17 +56,40 @@
 
 	<!-- Status -->
 	<div class="flex items-center gap-1.5 flex-shrink-0">
-		<span
-			class="text-xs font-normal {isCompleted
-				? 'text-green-500'
-				: 'text-blue-300'}"
-		>
-			{isCompleted ? 'Completed' : 'Not started'}
-		</span>
-		{#if isCompleted}
-			<CheckCircle2 size={14} class="text-green-500 flex-shrink-0" />
-		{:else if !isCompleted}
-			<Circle size={14} class="text-blue-300 flex-shrink-0" />
+		{#if isCompleted && isHovered && onReset}
+			<div
+				role="button"
+				tabindex="0"
+				onclick={(e) => {
+					e.stopPropagation()
+					e.preventDefault()
+					onReset()
+				}}
+				onkeydown={(e) => {
+					if (e.key === 'Enter' || e.key === ' ') {
+						e.stopPropagation()
+						e.preventDefault()
+						onReset()
+					}
+				}}
+				class="flex items-center gap-1.5 px-2 py-1 text-xs font-normal text-secondary hover:text-primary hover:bg-surface-hover rounded transition-colors cursor-pointer"
+			>
+				<RefreshCw size={14} class="flex-shrink-0" />
+				Reset
+			</div>
+		{:else}
+			<span
+				class="text-xs font-normal {isCompleted
+					? 'text-green-500'
+					: 'text-blue-300'}"
+			>
+				{isCompleted ? 'Completed' : 'Not started'}
+			</span>
+			{#if isCompleted}
+				<CheckCircle2 size={14} class="text-green-500 flex-shrink-0" />
+			{:else if !isCompleted}
+				<Circle size={14} class="text-blue-300 flex-shrink-0" />
+			{/if}
 		{/if}
 	</div>
 </button>

frontend/src/lib/tutorialUtils.ts

@@ -116,6 +116,35 @@ export async function resetTutorialsByIndexes(tutorialIndexes: number[]) {
 	})
 }
 
+/**
+ * Reset (mark as incomplete) a single tutorial by index
+ */
+export async function resetTutorialByIndex(tutorialIndex: number) {
+	const currentTodos = get(tutorialsToDo)
+	
+	// Add the tutorial index back to todos if not already present
+	if (!currentTodos.includes(tutorialIndex)) {
+		const aft = [...currentTodos, tutorialIndex]
+		tutorialsToDo.set(aft)
+		skippedAll.set(false)
+		
+		// Get current progress bits
+		const currentResponse = await UserService.getTutorialProgress()
+		let bits: number = currentResponse.progress ?? 0
+		
+		// Clear bit for this tutorial index
+		const mask = 1 << tutorialIndex
+		bits = bits & ~mask
+		
+		await UserService.updateTutorialProgress({ 
+			requestBody: { 
+				progress: bits, 
+				skipped_all: false 
+			} 
+		})
+	}
+}
+
 export async function syncTutorialsTodos() {
 	const response = await UserService.getTutorialProgress()
 	const bits: number = response.progress!

frontend/src/routes/(root)/(logged)/tutorials/+page.svelte

@@ -15,7 +15,8 @@
 		getTutorialProgressCompleted,
 		skipAllTodos,
 		skipTutorialsByIndexes,
-		resetTutorialsByIndexes
+		resetTutorialsByIndexes,
+		resetTutorialByIndex
 	} from '$lib/tutorialUtils'
 	import { Button } from '$lib/components/common'
 	import { RefreshCw, CheckCheck, CheckCircle2, Circle } from 'lucide-svelte'
@@ -155,6 +156,15 @@
 		await syncTutorialsTodos()
 	}
 
+	// Reset a single tutorial
+	async function resetSingleTutorial(tutorialId: string) {
+		const tutorial = currentTabConfig.tutorials.find((t) => t.id === tutorialId)
+		if (!tutorial || tutorial.index === undefined) return
+
+		await resetTutorialByIndex(tutorial.index)
+		await syncTutorialsTodos()
+	}
+
 	// Calculate progress for each tab
 	function getTabProgress(tabId: TabId) {
 		const tabConfig = TUTORIALS_CONFIG[tabId]
@@ -297,6 +307,7 @@
 							isCompleted={isTutorialCompleted(tutorial.id)}
 							disabled={tutorial.active === false}
 							comingSoon={tutorial.comingSoon}
+							onReset={() => resetSingleTutorial(tutorial.id)}
 						/>
 					{/each}
 				</div>