From 6c21f2fd008f83926f5d659e59c7a9c0c535f3c9 Mon Sep 17 00:00:00 2001
From: Bob <dv4xd@proton.me>
Date: Sun, 29 Sep 2024 15:23:36 +0800
Subject: [PATCH] problem: can't see characters remaining when adding new
 problem

---
 src/components/TextareaField.svelte |  4 ++++
 src/views/LogNewProblem.svelte      | 27 ++++++++++++---------------
 2 files changed, 16 insertions(+), 15 deletions(-)

diff --git a/src/components/TextareaField.svelte b/src/components/TextareaField.svelte
index 56355f4..b3e8d01 100644
--- a/src/components/TextareaField.svelte
+++ b/src/components/TextareaField.svelte
@@ -5,6 +5,7 @@
 	export let title: string = '';
 	export let value: string = '';
 	export let errorText: string = '';
+	export let promptText: string = '';
 </script>
 
 <div class="relative w-full">
@@ -17,6 +18,9 @@
 		{...options}
 		class="h-24 w-full rounded-lg border px-3 py-2 font-normal leading-relaxed"
 	/>
+	{#if promptText}
+		<div class="text-[13px] font-light text-green-500">{promptText}</div>
+	{/if}
 	{#if errorText}
 		<div class="mt-1.5 text-[13px] font-light text-red-500">{errorText}</div>
 	{/if}
diff --git a/src/views/LogNewProblem.svelte b/src/views/LogNewProblem.svelte
index e0c9ff5..1fafdfa 100644
--- a/src/views/LogNewProblem.svelte
+++ b/src/views/LogNewProblem.svelte
@@ -27,23 +27,22 @@
 	let isPublishing = false;
 
 	function validateInputs(tldr: string, para: string) {
-		const errors = {
+		const prompt = {
 			tldr: '',
 			para: ''
 		};
 
-		if (tldr.length > 140) {
-			errors.tldr = 'TLDR must be 140 characters or less';
+		if (tldr.length > 0) {
+			prompt.tldr = `( ${tldr.length} / 140 )`;
 		}
-		if (para.length > 560) {
-			errors.para = 'Paragraph must be 560 characters or less';
+		if (para.length > 0) {
+			prompt.para = `( ${para.length} / 560 )`;
 		}
 
-		return errors;
+		return prompt;
 	}
 
-	$: errors = validateInputs(tldr, para);
-	$: isValid = !errors.tldr && !errors.para;
+	$: prompt = validateInputs(tldr, para);
 
 	function publish(ndk: NDKSvelte) {
 		if (isPublishing) return;
@@ -57,10 +56,6 @@
 			throw new Error('no current user');
 		}
 
-		if (!isValid) {
-			throw new Error('input is not valid');
-		}
-
 		let e = new NDKEvent(ndk);
 		const identify = sha256(author.pubkey + tldr);
 		console.log('identify', identify);
@@ -105,7 +100,8 @@
 				<TextareaField
 					title="Title"
 					bind:value={tldr}
-					errorText={errors.tldr}
+					promptText={prompt.tldr}
+					maxlength={140}
 					options={{
 						placeholder: 'Enter a brief description (max 140 characters)',
 						style: 'height: 60px;'
@@ -114,7 +110,8 @@
 				<TextareaField
 					title="Description"
 					bind:value={para}
-					errorText={errors.para}
+					promptText={prompt.para}
+					maxlength={560}
 					options={{
 						placeholder: 'Enter a detailed description (max 560 characters)',
 						style: 'height: 180px;'
@@ -136,7 +133,7 @@
 				</RadioGroup.Root>
 				{#if $currentUser}
 					<Button
-						disabled={!tldr || !para || !isValid || isPublishing}
+						disabled={!tldr || !para || isPublishing}
 						on:click={() => publish($ndk)}
 						type="submit"
 					>