fix placeholder prompt (#1215)

ui/packages/app/src/main.ts

@@ -115,7 +115,6 @@ function handle_darkmode(target: HTMLElement) {
 	} else if (url.searchParams.get("__dark-theme") === "true") {
 		target.classList.add("dark");
 	} else {
-		console.log("boo");
 		use_system_theme(target);
 	}
 }

ui/packages/image/src/Sketch.svelte

@@ -1,5 +1,6 @@
 <script>
 	import { onMount, onDestroy, createEventDispatcher } from "svelte";
+	import { fade } from "svelte/transition";
 	import { LazyBrush } from "lazy-brush/src";
 	import ResizeObserver from "resize-observer-polyfill";
 
@@ -48,12 +49,12 @@
 	let values_changed = true;
 	let is_drawing = false;
 	let is_pressing = false;
-	let show_placeholder = false;
 	let lazy = null;
 	let chain_length = null;
 	let canvas_container = null;
 	let canvas_observer = null;
 	let save_data = "";
+	let line_count = 0;
 
 	onMount(() => {
 		Object.keys(canvas).forEach((key) => {
@@ -98,6 +99,7 @@
 		const _lines = lines.slice(0, -1);
 		clear();
 		draw_lines({ lines: _lines });
+		line_count = lines.length;
 		trigger_on_change();
 	}
 
@@ -155,13 +157,13 @@
 
 	let handle_draw_start = (e) => {
 		e.preventDefault();
-		show_placeholder = true;
 		is_pressing = true;
 		const { x, y } = get_pointer_pos(e);
 		if (e.touches && e.touches.length > 0) {
 			lazy.update({ x, y }, { both: true });
 		}
 		handle_pointer_move(x, y);
+		line_count += 1;
 	};
 
 	let handle_draw_move = (e) => {
@@ -274,13 +276,13 @@
 	};
 
 	export function clear() {
-		show_placeholder = false;
 		lines = [];
 		values_changed = true;
 		ctx.drawing.clearRect(0, 0, canvas.drawing.width, canvas.drawing.height);
 		ctx.temp.clearRect(0, 0, canvas.temp.width, canvas.temp.height);
 		ctx.drawing.fillStyle = "#FFFFFF";
 		ctx.drawing.fillRect(0, 0, canvas.drawing.width, canvas.drawing.height);
+		line_count = 0;
 	}
 
 	let loop = ({ once = false } = {}) => {
@@ -341,8 +343,9 @@
 	bind:offsetWidth={canvas_width}
 	bind:offsetHeight={canvas_height}
 >
-	{#if !show_placeholder}
+	{#if line_count === 0}
 		<div
+			transition:fade={{ duration: 50 }}
 			class="absolute inset-0 flex items-center justify-center z-40 pointer-events-none touch-none text-gray-400 md:text-xl"
 		>
 			Start drawing

ui/packages/theme/src/colors.ts

@@ -1,7 +1,5 @@
 import tw_colors from "tailwindcss/colors";
 
-console.log(tw_colors);
-
 export const ordered_colors = [
 	"red",
 	"green",