Bug fixes

components/tools/list-picker.tsx

@@ -20,7 +20,6 @@ export default function ListPicker() {
   const [display, setDisplay] = useState<string | null>(null);
   const [drawing, setDrawing] = useState(false);
   const [winner, setWinner] = useState<string | null>(null);
-  const [error, setError] = useState(false);
 
   const lastPaintRef = useRef(0);
   const textareaRef = useRef<HTMLTextAreaElement>(null);
@@ -32,10 +31,13 @@ export default function ListPicker() {
     .map((s) => s.trim())
     .filter(Boolean);
 
+  const insufficientItems = items.length < 2;
+
   const draw = () => {
     if (drawing) return;
-    if (items.length < 2) {
-      setError(true);
+    if (insufficientItems) {
+      setDisplay(null);
+      setWinner(null);
       play("tick");
       gsap.fromTo(
         textareaRef.current,
@@ -44,7 +46,6 @@ export default function ListPicker() {
       );
       return;
     }
-    setError(false);
 
     const pick = items[Math.floor(Math.random() * items.length)];
     setDrawing(true);
@@ -74,11 +75,16 @@ export default function ListPicker() {
         play("win");
         celebrateConfetti();
         if (removeAfterDraw) {
-          setText(
-            items
-              .filter((item) => item !== pick)
-              .join("\n"),
-          );
+          setText((prevText) => {
+            const currentItems = prevText
+              .split("\n")
+              .map((s) => s.trim())
+              .filter(Boolean);
+            const idx = currentItems.indexOf(pick);
+            if (idx === -1) return prevText;
+            currentItems.splice(idx, 1);
+            return currentItems.join("\n");
+          });
         }
       },
     });
@@ -95,11 +101,12 @@ export default function ListPicker() {
           ref={textareaRef}
           value={text}
           onChange={(e) => setText(e.target.value)}
+          disabled={drawing}
           rows={8}
           placeholder={"Ein Eintrag pro Zeile, z. B.\nAnna\nBen\nClara"}
           aria-label="Liste der Einträge, ein Eintrag pro Zeile"
-          className={`mt-4 w-full resize-none rounded-xl border bg-surface px-4 py-3 font-mono text-sm leading-relaxed outline-none transition focus:ring-2 ${
-            error
+          className={`mt-4 w-full resize-none rounded-xl border bg-surface px-4 py-3 font-mono text-sm leading-relaxed outline-none transition focus:ring-2 disabled:cursor-not-allowed disabled:opacity-60 ${
+            insufficientItems
               ? "border-clay/60 focus:border-clay/60 focus:ring-clay/20"
               : "border-line focus:border-primary/60 focus:ring-primary/20"
           }`}
@@ -109,12 +116,13 @@ export default function ListPicker() {
             type="checkbox"
             checked={removeAfterDraw}
             onChange={(e) => setRemoveAfterDraw(e.target.checked)}
-            className="h-4 w-4 cursor-pointer accent-primary"
+            disabled={drawing}
+            className="h-4 w-4 cursor-pointer accent-primary disabled:cursor-not-allowed"
           />
           Gezogene Einträge entfernen (ohne Zurücklegen)
         </label>
-        <p className={`mt-3 text-xs leading-relaxed ${error ? "font-semibold text-clay" : "text-ink-soft"}`}>
-          {error
+        <p className={`mt-3 text-xs leading-relaxed ${insufficientItems ? "font-semibold text-clay" : "text-ink-soft"}`}>
+          {insufficientItems
             ? "Bitte mindestens 2 Einträge eintragen."
             : "Ideal für Teams, Gruppen-Reihenfolgen oder Gewinnspiele."}
         </p>
@@ -133,7 +141,7 @@ export default function ListPicker() {
               >
                 <ListChecks className="h-8 w-8 text-primary/50" />
                 <p className="font-display text-xl font-medium text-ink-soft">
-                  {items.length >= 2
+                  {!insufficientItems
                     ? `${items.length} Einträge warten auf die Ziehung.`
                     : "Trage links mindestens 2 Einträge ein."}
                 </p>