kolaytercih/src/components/tema-kisayolu.tsx

"use client";

import { useEffect } from "react";
import { useTheme } from "next-themes";
import { temayiGecisle } from "@/lib/tema-gecisi";

/** Tuş yazı alanında basıldıysa kısayol değildir. */
function yaziAlanindaMi(hedef: EventTarget | null) {
  if (!(hedef instanceof HTMLElement)) return false;
  if (hedef.isContentEditable) return true;
  const etiket = hedef.tagName;
  return etiket === "INPUT" || etiket === "TEXTAREA" || etiket === "SELECT";
}

/**
 * Klavye kısayolu: `D` açık ↔ koyu temayı değiştirir (ipucu footer'daki
 * TemaSecici'nin altında, Kbd ile). Değiştirici tuşla (⌘/Ctrl/Alt) ya da yazı
 * alanındayken çalışmaz; "sistem" seçiliyken o anki çözümlenmiş temanın
 * tersine, açık bir seçime geçer. Geçiş logodan yayılan maskeyle oynar.
 */
export function TemaKisayolu() {
  const { resolvedTheme, setTheme } = useTheme();

  useEffect(() => {
    const dinle = (e: KeyboardEvent) => {
      if (e.key !== "d" && e.key !== "D") return;
      if (e.metaKey || e.ctrlKey || e.altKey || e.repeat) return;
      if (yaziAlanindaMi(e.target)) return;
      e.preventDefault();
      const hedef = resolvedTheme === "dark" ? "light" : "dark";
      temayiGecisle(() => setTheme(hedef));
    };
    window.addEventListener("keydown", dinle);
    return () => window.removeEventListener("keydown", dinle);
  }, [resolvedTheme, setTheme]);

  return null;
}