Add search to language switcher dropdown, remove translation script

src/components/language-switcher.tsx

@@ -3,7 +3,8 @@
 import Image from "next/image";
 import { useLocale } from "next-intl";
 import { useRouter } from "next/navigation";
-import { useTransition, useState, useRef, useEffect } from "react";
+import { useTransition, useState, useRef, useEffect, useMemo } from "react";
+import { Search } from "lucide-react";
 
 const LOCALES: { code: string; label: string; lang: string }[] = [
   { code: "nl", label: "Nederlands", lang: "nl" },
@@ -35,9 +36,21 @@ export function LanguageSwitcher() {
   const router = useRouter();
   const [pending, startTransition] = useTransition();
   const [open, setOpen] = useState(false);
+  const [search, setSearch] = useState("");
   const ref = useRef<HTMLDivElement>(null);
   const current = LOCALES.find((l) => l.code === locale) ?? LOCALES[0];
 
+  const filtered = useMemo(() => {
+    if (!search) return LOCALES;
+    const q = search.toLowerCase();
+    return LOCALES.filter(
+      (l) =>
+        l.label.toLowerCase().includes(q) ||
+        l.code.toLowerCase().includes(q) ||
+        l.lang.toLowerCase().includes(q),
+    );
+  }, [search]);
+
   useEffect(() => {
     function handleClick(e: MouseEvent) {
       if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false);
@@ -46,6 +59,10 @@ export function LanguageSwitcher() {
     return () => document.removeEventListener("mousedown", handleClick);
   }, []);
 
+  useEffect(() => {
+    if (!open) setSearch("");
+  }, [open]);
+
   function switchLocale(code: string) {
     if (code === locale) return;
     document.cookie = `NEXT_LOCALE=${code};path=/;max-age=31536000;samesite=strict;secure`;
@@ -76,8 +93,26 @@ export function LanguageSwitcher() {
       </button>
 
       {open && (
-        <div className="dropdown-menu absolute right-0 top-full mt-0.5 min-w-[160px] max-h-[300px] overflow-y-auto rounded-xl z-50 py-2">
+        <div className="dropdown-menu absolute right-0 top-full mt-0.5 min-w-[200px] rounded-xl z-50 py-2">
-          {LOCALES.map((l) => (
+          <div className="px-3 pb-1">
+            <div className="flex items-center gap-1.5 rounded-md border bg-background px-2 py-1.5 text-sm">
+              <Search className="h-3.5 w-3.5 text-muted-foreground" />
+              <input
+                type="text"
+                placeholder="Zoeken..."
+                value={search}
+                onChange={(e) => setSearch(e.target.value)}
+                className="flex-1 bg-transparent outline-none text-sm"
+                style={{ border: "none", padding: 0, margin: 0 }}
+                autoFocus
+              />
+            </div>
+          </div>
+          <div className="max-h-[260px] overflow-y-auto">
+            {filtered.length === 0 && (
+              <p className="px-3 py-4 text-center text-xs text-muted-foreground">Geen talen gevonden</p>
+            )}
+            {filtered.map((l) => (
               <button
                 key={l.code}
                 type="button"
@@ -87,7 +122,7 @@ export function LanguageSwitcher() {
                 }`}
                 style={{
                   color: "var(--color-text-readable, var(--color-text))",
-                background: "none",
+                  background: l.code === locale ? "color-mix(in srgb, var(--color-primary) 10%, transparent)" : "none",
                   border: "none",
                   cursor: "pointer",
                   width: "calc(100% - 8px)",
@@ -98,7 +133,8 @@ export function LanguageSwitcher() {
                   e.currentTarget.style.color = "var(--color-primary)";
                 }}
                 onMouseLeave={(e) => {
-                e.currentTarget.style.backgroundColor = "transparent";
+                  e.currentTarget.style.backgroundColor =
+                    l.code === locale ? "color-mix(in srgb, var(--color-primary) 10%, transparent)" : "transparent";
                   e.currentTarget.style.color = "var(--color-text)";
                 }}
               >
@@ -113,6 +149,7 @@ export function LanguageSwitcher() {
               </button>
             ))}
           </div>
+        </div>
       )}
     </div>
   );