From 65c12bc7169a240bf9aa3f67fd3123ab0eeaf85a Mon Sep 17 00:00:00 2001
From: a2nr <anggoro.dwi.nr@gmail.com>
Date: Wed, 15 Apr 2026 20:03:36 +0700
Subject: [PATCH] remove reset button, move auto save indicator in velxio

---
 .../lib/components/CrosshairOverlay.svelte    | 21 ++++++---
 .../src/routes/lesson/[slug]/+page.svelte     | 43 +++++++++----------
 2 files changed, 35 insertions(+), 29 deletions(-)

diff --git a/frontend/src/lib/components/CrosshairOverlay.svelte b/frontend/src/lib/components/CrosshairOverlay.svelte
index 3333c9b..ff65feb 100644
--- a/frontend/src/lib/components/CrosshairOverlay.svelte
+++ b/frontend/src/lib/components/CrosshairOverlay.svelte
@@ -27,7 +27,8 @@
 	const LONG_PRESS_MS = 400;
 	const DOUBLE_TAP_MS = 300;
 	const HOLDING_TIMEOUT_MS = 5000;
-	const CURSOR_OFFSET_Y = -(parseInt(env.PUBLIC_CURSOR_OFFSET_Y || '50', 10));
+	const BASE_OFFSET_Y = -(parseInt(env.PUBLIC_CURSOR_OFFSET_Y || '50', 10));
+	let currentOffset = $derived(isTouchDevice ? BASE_OFFSET_Y : 0);
 
 	/**
 	 * State machine:
@@ -46,12 +47,18 @@
 	$effect(() => {
 		if (typeof window === 'undefined') return;
 		const mql = window.matchMedia('(hover: none) and (pointer: coarse)');
-		isTouchDevice = mql.matches;
-		const handler = (e: MediaQueryListEvent) => {
-			isTouchDevice = e.matches;
+		const checkTouch = () => {
+			isTouchDevice = mql.matches && window.innerWidth < 768;
+		};
+		
+		checkTouch();
+		mql.addEventListener('change', checkTouch);
+		window.addEventListener('resize', checkTouch);
+		
+		return () => {
+			mql.removeEventListener('change', checkTouch);
+			window.removeEventListener('resize', checkTouch);
 		};
-		mql.addEventListener('change', handler);
-		return () => mql.removeEventListener('change', handler);
 	});
 
 	function getIframeTarget(x: number, y: number): Element | null {
@@ -142,7 +149,7 @@
 		if (!overlayEl) return;
 		const rect = overlayEl.getBoundingClientRect();
 		crosshairX = viewportX - rect.left;
-		crosshairY = viewportY - rect.top + CURSOR_OFFSET_Y;
+		crosshairY = viewportY - rect.top + currentOffset;
 	}
 
 	function getCrosshairViewport(): { x: number; y: number } {
diff --git a/frontend/src/routes/lesson/[slug]/+page.svelte b/frontend/src/routes/lesson/[slug]/+page.svelte
index e0183c4..64b5dd1 100644
--- a/frontend/src/routes/lesson/[slug]/+page.svelte
+++ b/frontend/src/routes/lesson/[slug]/+page.svelte
@@ -101,7 +101,7 @@
 
 	// Auto-save Velxio state periodically
 	$effect(() => {
-		if (velxioReady && auth.isLoggedIn && !showSolution) {
+		if (velxioReady && $authLoggedIn && !showSolution) {
 			const interval = setInterval(() => {
 				const state = getVelxioState();
 				if (!state) return;
@@ -921,17 +921,14 @@
 							Hubungi guru jika masalah berlanjut.
 						</div>
 					{:else}
-						<div class="velxio-toolbar">
-							<button type="button" class="btn btn-secondary btn-sm" onclick={handleReset}>Reset</button>
-							{#if auth.isLoggedIn}
-								<div class="storage-indicator-inline" title={velxioSaving ? "Menyimpan draf..." : "Draf tersimpan di browser"}>
-									<span class="indicator-icon" class:saving={velxioSaving}>
-										{velxioSaving ? '●' : '☁'}
-									</span>
-									<span class="indicator-text">Auto-save</span>
-								</div>
-							{/if}
-						</div>
+						{#if $authLoggedIn}
+							<div class="storage-indicator-inline" title={velxioSaving ? "Menyimpan draf..." : "Draf tersimpan di browser"}>
+								<span class="indicator-icon" class:saving={velxioSaving}>
+									{velxioSaving ? '●' : '☁'}
+								</span>
+								<span class="indicator-text">Auto-save</span>
+							</div>
+						{/if}
 						<!-- svelte-ignore a11y_missing_attribute -->
 						<iframe
 							class="velxio-iframe"
@@ -1243,22 +1240,23 @@
 	}
 
 	/* ── Velxio (Arduino simulator) ─────────────────────── */
-	.velxio-toolbar {
-		display: flex;
-		align-items: center;
-		gap: 0.5rem;
-		padding: 0.4rem 0.5rem;
-		border-bottom: 1px solid var(--color-border);
-		flex-shrink: 0;
-	}
 	.storage-indicator-inline {
 		display: flex;
 		align-items: center;
 		gap: 6px;
-		font-size: 0.7rem;
+		font-size: 0.75rem;
 		color: var(--color-text-muted);
+		background: var(--color-bg-secondary);
+		padding: 3px 10px;
+		border-radius: 12px;
+		border: 1px solid var(--color-border);
+		position: absolute;
+		bottom: 1rem;
+		right: 1.5rem;
+		z-index: 10;
+		box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
 		pointer-events: none;
-		margin-left: auto;
+		opacity: 0.8;
 	}
 	.storage-indicator-inline .indicator-icon {
 		line-height: 1;
@@ -1278,6 +1276,7 @@
 		flex-direction: column;
 		flex: 1;
 		min-height: 0;
+		position: relative;
 	}
 	.velxio-panel.tab-hidden {
 		display: none;