sexy/components/sessions/SessionDescriptionEditor.tsx

"use client";

import { useEffect, useRef, useState } from "react";
import { useRouter } from "next/navigation";
import { Check, Loader2 } from "lucide-react";
import { toast } from "sonner";
import { cn } from "@/lib/utils";

const AUTOSAVE_DELAY_MS = 600;

export function SessionDescriptionEditor({
  sessionId,
  initialDescription,
}: {
  sessionId: number;
  initialDescription: string | null;
}) {
  const router = useRouter();
  const initial = initialDescription ?? "";
  const [value, setValue] = useState(initial);
  const [status, setStatus] = useState<"idle" | "saving" | "saved">("idle");
  const lastSaved = useRef(initial);

  useEffect(() => {
    // Unlike the session name, an empty description is a valid, saveable
    // state (it just means "no description"), so no non-empty guard here.
    if (value === lastSaved.current) return;

    setStatus("saving");
    const timer = setTimeout(async () => {
      const res = await fetch(`/api/sessions/${sessionId}`, {
        method: "PATCH",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ description: value }),
      });
      if (res.ok) {
        lastSaved.current = value;
        setStatus("saved");
        router.refresh();
      } else {
        setStatus("idle");
        toast.error("Could not save description");
      }
    }, AUTOSAVE_DELAY_MS);

    return () => clearTimeout(timer);
  }, [value, sessionId, router]);

  useEffect(() => {
    if (status !== "saved") return;
    const timer = setTimeout(() => setStatus("idle"), 1500);
    return () => clearTimeout(timer);
  }, [status]);

  return (
    <div className="mt-1 flex items-start gap-2">
      <textarea
        value={value}
        onChange={(e) => setValue(e.target.value)}
        placeholder="Add a description..."
        aria-label="Session description"
        rows={1}
        className="max-w-full min-w-0 resize-none border-b-2 border-transparent bg-transparent text-sm text-muted-foreground caret-primary outline-none transition-colors placeholder:text-muted-foreground/60 hover:border-b-primary focus:border-b-primary sm:max-w-xl [field-sizing:content]"
      />
      <div className="relative mt-0.5 flex size-4 shrink-0 items-center justify-center">
        <Loader2
          className={cn(
            "absolute size-4 animate-spin text-muted-foreground transition-opacity",
            status === "saving" ? "opacity-100" : "opacity-0",
          )}
        />
        <Check
          className={cn(
            "absolute size-4 text-primary transition-opacity",
            status === "saved" ? "opacity-100" : "opacity-0",
          )}
        />
      </div>
    </div>
  );
}