Function PickPage

apps/app/src/app/pick/page.tsx:85–162

()

}

function PickPage() {
  const searchParams = useSearchParams();
  const sessionId = searchParams.get("session");

  const [picked, setPicked] = useState(false);
  const [error, setError] = useState("");

  const options = useMemo(() => pickRandom(ALL_PROMPTS, 3), []);

  // Notify desktop that QR was scanned
  useEffect(() => {
    if (sessionId) {
      fetch("/api/pick", {
        method: "PUT",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ sessionId }),
      }).catch(() => {});
    }
  }, [sessionId]);

  const handlePick = async (prompt: string) => {
    if (!sessionId || picked) return;
    setPicked(true);
    try {
      const res = await fetch("/api/pick", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ sessionId, prompt }),
      });
      if (!res.ok) throw new Error("Failed to submit");
    } catch {
      setError("Something went wrong. Try again.");
      setPicked(false);
    }
  };

  if (!sessionId) {
    return (
      <div style={styles.container}>
        <p style={styles.errorText}>Invalid link — scan the QR code from the main app.</p>
      </div>
    );
  }

  if (picked) {
    return (
      <div style={styles.container}>
        <div style={styles.successCard}>
          <span style={{ fontSize: 48 }}>&#10003;</span>
          <h2 style={styles.successTitle}>Sent!</h2>
          <p style={styles.successSub}>Look up at the big screen to see it come to life.</p>
        </div>
      </div>
    );
  }

  return (
    <div style={styles.container}>