Function TipsPanel

src/components/panels/TipsPanel.tsx:59–183

()

];

export default function TipsPanel() {
  const [open, setOpen] = useState(false);
  const [copied, setCopied] = useState(false);
  const [toastFading, setToastFading] = useState(false);

  useEffect(() => {
    if (!open) return;
    const handleKey = (e: KeyboardEvent) => {
      if (e.key === "Escape") { setOpen(false); trackEvent("panel_close", { panel: "tips" }); }
    };
    window.addEventListener("keydown", handleKey);
    return () => window.removeEventListener("keydown", handleKey);
  }, [open]);

  const copyToClipboard = useCallback(() => {
    const text = tipGroups
      .map((group) => {
        const rows = group.tips
          .map((tip) => `  ${tip.condition} → ${tip.approaches.join(", ")}`)
          .join("\n");
        return `${group.label}\n${rows}`;
      })
      .join("\n\n");
    navigator.clipboard.writeText(text);
    setCopied(true);
    setToastFading(false);
    trackEvent("copy_tips");
  }, []);

  useEffect(() => {
    if (!copied) return;
    const fadeTimer = setTimeout(() => setToastFading(true), 1500);
    const removeTimer = setTimeout(() => { setCopied(false); setToastFading(false); }, 2200);
    return () => { clearTimeout(fadeTimer); clearTimeout(removeTimer); };
  }, [copied]);

  return (
    <>
      {/* Tab button – rendered inline inside the fixed flex wrapper in page.tsx */}
      <button
        onClick={() => { setOpen(true); trackEvent("panel_open", { panel: "tips" }); }}
        className="rounded-r-xl bg-blue-600 px-2.5 py-4 text-white shadow-lg transition-colors hover:bg-blue-700"
        aria-label="Open tips"
      >
        <span className="flex items-center gap-2 text-sm font-semibold [writing-mode:vertical-lr]">
          <Lightbulb className="h-4 w-4 rotate-90" />
          Helpful Tips
        </span>
      </button>

      {/* Panel */}
      <div
        className={`fixed left-0 top-0 z-50 h-full w-80 transform border-r border-zinc-200 bg-white shadow-xl transition-transform duration-300 ease-in-out dark:border-zinc-700 dark:bg-zinc-900 ${
          open ? "translate-x-0" : "-translate-x-full"
        }`}
      >
        <div className="flex items-center justify-between bg-blue-600 px-4 py-3 text-white">
          <h2 className="flex items-center gap-2 text-base font-semibold">