Centered Feedback Drawer

1"use client";
2 
3import { useRef, useState } from "react";
4import { motion, AnimatePresence } from "motion/react";
5 
6/**
7 * Centered Feedback Drawer — three emoji, one question.
8 *
9 * Not a form. Not a survey. Three faces —
10 * 🙁 😐 😊 — universally understood in an instant.
11 * Click one. It springs up, the others dim. A contextual
12 * textarea slides in: "What went wrong?" or "What did you
13 * enjoy?" — the interface reads your mood. Submit. Done.
14 *
15 * The faces are the interface.
16 */
17 
18/* ── Types ── */
19 
20export interface FeedbackData {
21  rating: number;
22  label: string;
23  message: string;
24}
25 
26export interface CenteredFeedbackDrawerProps {
27  open: boolean;
28  onOpenChange: (open: boolean) => void;
29  onSubmit?: (feedback: FeedbackData) => void;
30  sound?: boolean;
31}
32 
33/* ── Constants ── */
34 
35const RATINGS = [
36  { label: "Not great", placeholder: "What went wrong?" },
37  { label: "Okay", placeholder: "What could be better?" },
38  { label: "Great", placeholder: "What did you enjoy?" },
39];
40 
41/* ── Audio ── */
42 
43let _ctx: AudioContext | null = null;
44let _buf: AudioBuffer | null = null;
45 
46function audioCtx() {
47  if (!_ctx) {
48    _ctx = new (window.AudioContext ||
49      (window as unknown as { webkitAudioContext: typeof AudioContext })
50        .webkitAudioContext)();
51  }
52  if (_ctx.state === "suspended") _ctx.resume();
53  return _ctx;
54}
55 
56function ensureBuf(ac: AudioContext): AudioBuffer {
57  if (_buf && _buf.sampleRate === ac.sampleRate) return _buf;
58  const rate = ac.sampleRate;
59  const len = Math.floor(rate * 0.003);
60  const buf = ac.createBuffer(1, len, rate);
61  const ch = buf.getChannelData(0);
62  for (let i = 0; i < len; i++) {
63    const t = i / len;
64    ch[i] = (Math.random() * 2 - 1) * (1 - t) ** 4;
65  }
66  _buf = buf;
67  return buf;
68}
69 
70function playTick(last: React.MutableRefObject<number>) {
71  const now = performance.now();
72  if (now - last.current < 80) return;
73  last.current = now;
74  try {
75    const ac = audioCtx();
76    const buf = ensureBuf(ac);
77    const src = ac.createBufferSource();
78    const gain = ac.createGain();
79    src.buffer = buf;
80    src.playbackRate.value = 1.15;
81    gain.gain.value = 0.03;
82    src.connect(gain);
83    gain.connect(ac.destination);
84    src.start();
85  } catch {
86    /* silent */
87  }
88}
89 
90/* ── Emoji Faces ── */
91 
92const EMOJIS = ["🙁", "😐", "😊"];
93 
94/* ── Component ── */
95 
96export function CenteredFeedbackDrawer({
97  open,
98  onOpenChange,
99  onSubmit,
100  sound = true,
101// … truncated