Allow a user to mark as completed a single tutorial

Author: tristantr

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

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { CheckCircle2, Circle, RefreshCw } from 'lucide-svelte'
+	import { CheckCircle2, Circle, RefreshCw, CheckCheck } from 'lucide-svelte'
 	import type { ComponentType } from 'svelte'
 
 	interface Props {
@@ -11,6 +11,7 @@
 		disabled?: boolean
 		comingSoon?: boolean
 		onReset?: () => void
+		onComplete?: () => void
 	}
 
 	let {
@@ -21,10 +22,38 @@
 		isCompleted = false,
 		disabled = false,
 		comingSoon = false,
-		onReset
+		onReset,
+		onComplete
 	}: Props = $props()
 
 	let isHovered = $state(false)
+
+	// Determine which action button to show
+	const actionButton = $derived(() => {
+		if (isCompleted && isHovered && onReset) {
+			return {
+				icon: RefreshCw,
+				label: 'Reset',
+				onClick: onReset
+			}
+		}
+		if (!isCompleted && isHovered && onComplete) {
+			return {
+				icon: CheckCheck,
+				label: 'Mark as completed',
+				onClick: onComplete
+			}
+		}
+		return null
+	})
+
+	function handleAction(e: MouseEvent | KeyboardEvent) {
+		const button = actionButton()
+		if (!button) return
+		e.stopPropagation()
+		e.preventDefault()
+		button.onClick()
+	}
 </script>
 
 <button
@@ -56,26 +85,22 @@
 
 	<!-- Status -->
 	<div class="flex items-center gap-1.5 flex-shrink-0">
-		{#if isCompleted && isHovered && onReset}
+		{#if actionButton()}
+			{@const button = actionButton()!}
+			{@const ActionIcon = button.icon}
 			<div
 				role="button"
 				tabindex="0"
-				onclick={(e) => {
-					e.stopPropagation()
-					e.preventDefault()
-					onReset()
-				}}
+				onclick={handleAction}
 				onkeydown={(e) => {
 					if (e.key === 'Enter' || e.key === ' ') {
-						e.stopPropagation()
-						e.preventDefault()
-						onReset()
+						handleAction(e)
 					}
 				}}
 				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
+				<ActionIcon size={14} class="flex-shrink-0" />
+				{button.label}
 			</div>
 		{:else}
 			<span
@@ -87,7 +112,7 @@
 			</span>
 			{#if isCompleted}
 				<CheckCircle2 size={14} class="text-green-500 flex-shrink-0" />
-			{:else if !isCompleted}
+			{:else}
 				<Circle size={14} class="text-blue-300 flex-shrink-0" />
 			{/if}
 		{/if}

frontend/src/lib/tutorialUtils.ts

@@ -117,32 +117,54 @@ export async function resetTutorialsByIndexes(tutorialIndexes: number[]) {
 }
 
 /**
- * Reset (mark as incomplete) a single tutorial by index
+ * Update a single tutorial's completion status by index
  */
-export async function resetTutorialByIndex(tutorialIndex: number) {
+async function updateTutorialStatusByIndex(tutorialIndex: number, completed: boolean) {
 	const currentTodos = get(tutorialsToDo)
+	const isInTodos = currentTodos.includes(tutorialIndex)
 
-	// 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 
-			} 
-		})
+	// Only update if the status needs to change
+	// isInTodos = true means NOT completed, isInTodos = false means completed
+	// So if completed === !isInTodos, we're already in the desired state
+	if (completed === !isInTodos) {
+		return // Already in the desired state
 	}
+	
+	// Update todos list
+	const aft = completed
+		? currentTodos.filter((x) => x !== tutorialIndex)
+		: [...currentTodos, tutorialIndex]
+	tutorialsToDo.set(aft)
+	skippedAll.set(false)
+	
+	// Get current progress bits
+	const currentResponse = await UserService.getTutorialProgress()
+	let bits: number = currentResponse.progress ?? 0
+	
+	// Update bit for this tutorial index
+	const mask = 1 << tutorialIndex
+	bits = completed ? bits | mask : bits & ~mask
+	
+	await UserService.updateTutorialProgress({
+		requestBody: {
+			progress: bits,
+			skipped_all: false
+		}
+	})
+}
+
+/**
+ * Reset (mark as incomplete) a single tutorial by index
+ */
+export async function resetTutorialByIndex(tutorialIndex: number) {
+	await updateTutorialStatusByIndex(tutorialIndex, false)
+}
+
+/**
+ * Mark a single tutorial as completed by index
+ */
+export async function completeTutorialByIndex(tutorialIndex: number) {
+	await updateTutorialStatusByIndex(tutorialIndex, true)
 }
 
 export async function syncTutorialsTodos() {

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

@@ -16,7 +16,8 @@
 		skipAllTodos,
 		skipTutorialsByIndexes,
 		resetTutorialsByIndexes,
-		resetTutorialByIndex
+		resetTutorialByIndex,
+		completeTutorialByIndex
 	} from '$lib/tutorialUtils'
 	import { Button } from '$lib/components/common'
 	import { RefreshCw, CheckCheck, CheckCircle2, Circle } from 'lucide-svelte'
@@ -159,10 +160,33 @@
 	// Reset a single tutorial
 	async function resetSingleTutorial(tutorialId: string) {
 		const tutorial = currentTabConfig.tutorials.find((t) => t.id === tutorialId)
-		if (!tutorial || tutorial.index === undefined) return
+		if (!tutorial || tutorial.index === undefined) {
+			console.warn(`Tutorial not found or has no index: ${tutorialId}`)
+			return
+		}
 
-		await resetTutorialByIndex(tutorial.index)
-		await syncTutorialsTodos()
+		try {
+			await resetTutorialByIndex(tutorial.index)
+			await syncTutorialsTodos()
+		} catch (error) {
+			console.error('Error resetting tutorial:', error)
+		}
+	}
+
+	// Mark a single tutorial as completed
+	async function completeSingleTutorial(tutorialId: string) {
+		const tutorial = currentTabConfig.tutorials.find((t) => t.id === tutorialId)
+		if (!tutorial || tutorial.index === undefined) {
+			console.warn(`Tutorial not found or has no index: ${tutorialId}`)
+			return
+		}
+
+		try {
+			await completeTutorialByIndex(tutorial.index)
+			await syncTutorialsTodos()
+		} catch (error) {
+			console.error('Error completing tutorial:', error)
+		}
 	}
 
 	// Calculate progress for each tab
@@ -308,6 +332,7 @@
 							disabled={tutorial.active === false}
 							comingSoon={tutorial.comingSoon}
 							onReset={() => resetSingleTutorial(tutorial.id)}
+							onComplete={() => completeSingleTutorial(tutorial.id)}
 						/>
 					{/each}
 				</div>