From 4d08c92af56b89d8e79fb6eaf65873dc99fc3a12 Mon Sep 17 00:00:00 2001
From: Madhura68 <janpetervisser2@gmail.com>
Date: Sat, 25 Apr 2026 19:17:12 +0200
Subject: [PATCH] =?UTF-8?q?feat(todos):=20fix=20QuickInput=20=E2=80=94=20a?=
 =?UTF-8?q?llow=20input=20without=20a=20product=20selected?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Product select is no longer required; 'Geen product' is the default
- Input and submit button are no longer disabled for users with no products
- Form resets only on success (useEffect on state.success) instead of
  resetting on every submit including failures
- Inline error from server action is now displayed below the form
- Removed 'Maak eerst een product aan' message that blocked the form

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 components/todos/todo-list.tsx | 70 ++++++++++++++++------------------
 1 file changed, 33 insertions(+), 37 deletions(-)

diff --git a/components/todos/todo-list.tsx b/components/todos/todo-list.tsx
index a325261..1cdfe0f 100644
--- a/components/todos/todo-list.tsx
+++ b/components/todos/todo-list.tsx
@@ -41,39 +41,39 @@ interface TodoListProps {
 }
 
 function QuickInput({ products, isDemo }: { products: Product[]; isDemo: boolean }) {
-  const [, formAction] = useActionState(createTodoAction, undefined)
+  const [state, formAction] = useActionState(createTodoAction, undefined)
   const ref = useRef<HTMLFormElement>(null)
 
+  useEffect(() => {
+    if (state?.success) ref.current?.reset()
+  }, [state])
+
   return (
-    <form
-      ref={ref}
-      action={formAction}
-      onSubmit={() => setTimeout(() => ref.current?.reset(), 0)}
-      className="flex gap-2 mb-6"
-    >
-      <select
-        name="productId"
-        required
-        disabled={isDemo || products.length === 0}
-        className="border border-border rounded-lg px-3 py-1.5 text-sm bg-input-background shrink-0"
-      >
-        {products.length === 0 ? (
-          <option value="">Geen producten</option>
-        ) : (
-          products.map(p => <option key={p.id} value={p.id}>{p.name}</option>)
-        )}
-      </select>
-      <Input
-        name="title"
-        placeholder={isDemo ? 'Alleen-lezen in demo' : 'Nieuwe todo… (Enter om op te slaan)'}
-        disabled={isDemo || products.length === 0}
-        className="flex-1"
-        autoComplete="off"
-      />
-      <DemoTooltip show={isDemo}>
-        <QuickSubmitButton isDemo={isDemo || products.length === 0} />
-      </DemoTooltip>
-    </form>
+    <div className="mb-6 space-y-1">
+      <form ref={ref} action={formAction} className="flex gap-2">
+        <select
+          name="productId"
+          disabled={isDemo}
+          className="border border-border rounded-lg px-3 py-1.5 text-sm bg-input-background shrink-0"
+        >
+          <option value="">Geen product</option>
+          {products.map(p => <option key={p.id} value={p.id}>{p.name}</option>)}
+        </select>
+        <Input
+          name="title"
+          placeholder={isDemo ? 'Alleen-lezen in demo' : 'Nieuwe todo… (Enter om op te slaan)'}
+          disabled={isDemo}
+          className="flex-1"
+          autoComplete="off"
+        />
+        <DemoTooltip show={isDemo}>
+          <QuickSubmitButton isDemo={isDemo} />
+        </DemoTooltip>
+      </form>
+      {typeof state?.error === 'string' && (
+        <p className="text-xs text-error">{state.error}</p>
+      )}
+    </div>
   )
 }
 
@@ -260,15 +260,11 @@ export function TodoList({ todos, products, isDemo }: TodoListProps) {
     <div className="space-y-4">
       <QuickInput products={products} isDemo={isDemo} />
 
-      {products.length === 0 && (
-        <p className="text-sm text-muted-foreground">Maak eerst een product aan om todo&apos;s toe te voegen.</p>
-      )}
-
-      {todos.length === 0 && products.length > 0 ? (
+      {todos.length === 0 ? (
         <div className="bg-surface-container-low border border-border rounded-xl p-12 text-center">
           <p className="text-muted-foreground text-sm">Geen todo&apos;s. Voeg er een toe hierboven.</p>
         </div>
-      ) : todos.length > 0 ? (
+      ) : (
         <>
           <div className="bg-surface-container-low border border-border rounded-xl divide-y divide-border">
             {open.map(todo => (
@@ -321,7 +317,7 @@ export function TodoList({ todos, products, isDemo }: TodoListProps) {
             </div>
           )}
         </>
-      ) : null}
+      )}
 
       {promotePbi && (
         <PromotePbiDialog todo={promotePbi} products={products} onClose={() => setPromotePbi(null)} />