From 18760aec820e6d1054cf254caa87936d68a14a44 Mon Sep 17 00:00:00 2001
From: Aji Anaz <aji.anaz@gmail.com>
Date: Sun, 12 Jul 2026 01:47:24 +0700
Subject: [PATCH] feat: vertical toolbar di kanan tengah + Start Draw di kiri
 bawah

- Toolbar: flex-direction column, posisi awal kanan-tengah (vertikal center).
- Divider jadi horizontal (width 22px, height 1px).
- Tombol Start Draw/Stop Draw pindah dari pojok kanan atas ke kiri bawah.
- Logic drag/auto-fade/tool/color selection tidak diubah.
---
 AGENT.md                |  5 +++++
 src/lib/Toolbar.svelte  | 30 +++++++++++++++++++++++-------
 src/routes/+page.svelte |  2 +-
 3 files changed, 29 insertions(+), 8 deletions(-)

diff --git a/AGENT.md b/AGENT.md
index c7be090..a184c88 100644
--- a/AGENT.md
+++ b/AGENT.md
@@ -15,3 +15,8 @@
 ### Branch
 - Naming: `fix/<desc>`, `feat/<desc>`, `checkpoint/<desc>`
 - Base PR default: `develop`
+
+## Workflow — WAJIB
+- **JANGAN commit/push/PR sebelum user confirm perubahan working di app.**
+- Test lokal + user verify dulu, baru commit.
+- Kalau gagal/berubah, jangan langsung commit ulang.
diff --git a/src/lib/Toolbar.svelte b/src/lib/Toolbar.svelte
index d6b55d1..2910a56 100644
--- a/src/lib/Toolbar.svelte
+++ b/src/lib/Toolbar.svelte
@@ -11,7 +11,9 @@
 	let { onundo, onclear, onexit }: Props = $props();
 
 	// --- Draggable toolbar state ---
-	let position = $state<Point>({ x: 24, y: 24 });
+	// Start centered vertically on the right edge of the screen.
+	let position = $state<Point>({ x: 0, y: 0 });
+	let positioned = $state(false);
 	let dragging = $state(false);
 	let dragOffset: Point = { x: 0, y: 0 };
 
@@ -29,8 +31,21 @@
 		}, FADE_DELAY);
 	}
 
-	// Start auto-fade on mount
+	// Place toolbar at right-center on first layout.
+	function initPosition(): void {
+		if (positioned) return;
+		const tbW = 52; // approx toolbar width
+		const tbH = 380; // approx toolbar height
+		position = {
+			x: Math.max(16, window.innerWidth - tbW - 24),
+			y: Math.max(16, Math.round((window.innerHeight - tbH) / 2))
+		};
+		positioned = true;
+	}
+
+	// Start auto-fade + initial position on mount
 	$effect(() => {
+		initPosition();
 		resetFade();
 		return () => {
 			if (fadeTimer) clearTimeout(fadeTimer);
@@ -50,7 +65,7 @@
 	function onPointerMove(e: PointerEvent): void {
 		if (!dragging) return;
 		position = {
-			x: Math.max(0, Math.min(window.innerWidth - 100, e.clientX - dragOffset.x)),
+			x: Math.max(0, Math.min(window.innerWidth - 52, e.clientX - dragOffset.x)),
 			y: Math.max(0, Math.min(window.innerHeight - 60, e.clientY - dragOffset.y))
 		};
 	}
@@ -155,9 +170,10 @@
 	.toolbar {
 		position: fixed;
 		display: flex;
+		flex-direction: column;
 		align-items: center;
 		gap: 4px;
-		padding: 6px 8px;
+		padding: 8px 6px;
 		border-radius: 16px;
 		background: rgba(30, 30, 36, 0.72);
 		backdrop-filter: blur(20px) saturate(180%);
@@ -236,10 +252,10 @@
 	}
 
 	.divider {
-		width: 1px;
-		height: 22px;
+		width: 22px;
+		height: 1px;
 		background: rgba(255, 255, 255, 0.15);
-		margin: 0 2px;
+		margin: 2px 0;
 		flex-shrink: 0;
 	}
 
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 1eaea3b..b6e74f3 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -300,7 +300,7 @@
 
 	<button
 		onclick={toggleDrawMode}
-		style="position:fixed;top:8px;right:8px;z-index:99999;padding:8px 14px;background:#3b82f6;color:white;border:none;border-radius:8px;font:14px sans-serif;cursor:pointer;"
+		style="position:fixed;bottom:24px;left:24px;z-index:99999;padding:8px 14px;background:#3b82f6;color:white;border:none;border-radius:8px;font:14px sans-serif;cursor:pointer;"
 	>
 		{drawModeOn ? '🔴 STOP Draw' : '✏️ Start Draw'}
 	</button>