fix: wire user cookies through search and tighten cookie UX

Apply client cookies to YouTube search and suggest, clear them on reset, surface validation errors in settings, and validate admin cookie saves.

Author: bgwastu

src/app/admin/page.tsx

@@ -15,6 +15,7 @@ import {
   Title,
 } from "@mantine/core";
 import { IconAlertCircle, IconCheck, IconCookie } from "@tabler/icons-react";
+import { validateCookies } from "@/lib/cookies";
 
 export default function AdminPage() {
   const [password, setPassword] = useState("");
@@ -68,6 +69,15 @@ export default function AdminPage() {
     setCookiesError(null);
     setCookiesSuccess(false);
 
+    if (cookies.trim()) {
+      const validation = validateCookies(cookies);
+      if (!validation.valid) {
+        setCookiesError(validation.error || "Invalid cookie format.");
+        setCookiesLoading(false);
+        return;
+      }
+    }
+
     try {
       const res = await fetch("/api/admin/cookies", {
         method: "POST",
@@ -142,6 +152,7 @@ export default function AdminPage() {
                 placeholder={`# Netscape HTTP Cookie File
 .youtube.com\tTRUE\t/\tTRUE\t0\tCOOKIE_NAME\tVALUE`}
                 minRows={8}
+                maxRows={10}
                 autosize
                 styles={{
                   input: {

src/app/api/youtube/search/route.ts

@@ -1,4 +1,5 @@
-import { apiError, searchErrorCode } from "@/lib/apiError";
+import { searchErrorCode } from "@/lib/apiError";
+import { readRequestCookies } from "@/lib/cookies";
 import {
   type MusicSearchResult,
   type YouTubeSearchResult,
@@ -31,13 +32,16 @@ export async function GET(request: Request) {
   }
 
   try {
-    const musicResults = await searchMusic(query, { limit: Math.min(limit, 50) });
+    const cookies = readRequestCookies(request);
+    const searchOptions = { limit: Math.min(limit, 50), cookies };
+
+    const musicResults = await searchMusic(query, searchOptions);
 
     if (musicResults.length > 0) {
       return Response.json({ results: flattenToSearchResults(musicResults) });
     }
 
-    const videoResults = await searchYouTubeVideos(query, { limit: Math.min(limit, 50) });
+    const videoResults = await searchYouTubeVideos(query, searchOptions);
     return Response.json({ results: videoResults });
   } catch (error) {
     const message = error instanceof Error ? error.message : "Failed to search YouTube.";

src/app/api/youtube/suggest/route.ts

@@ -1,4 +1,5 @@
 import { searchErrorCode } from "@/lib/apiError";
+import { readRequestCookies } from "@/lib/cookies";
 import { getSearchSuggestions } from "@/lib/youtubei";
 
 export async function GET(request: Request) {
@@ -13,6 +14,7 @@ export async function GET(request: Request) {
   try {
     const suggestions = await getSearchSuggestions(query, {
       limit: Math.min(Math.max(limit || 10, 1), 20),
+      cookies: readRequestCookies(request),
     });
     return Response.json({ suggestions });
   } catch (error) {

src/app/page.tsx

@@ -48,6 +48,7 @@ import MediaResultRow, { type MediaResultItem } from "@/components/MediaResultRo
 import ResetModal from "@/components/ResetModal";
 import { useAppContext } from "@/context/AppContext";
 import type { Media } from "@/interfaces";
+import { cookieRequestHeaders } from "@/lib/cookies";
 import { SEARCH_ACCENT_VAR } from "@/lib/theme";
 import { getYouTubeId, isDirectMediaURL, isYoutubeURL } from "@/utils";
 import { setMediaCache } from "@/utils/cache";
@@ -318,7 +319,7 @@ function SearchPanel({
     try {
       const response = await fetch(
         `/api/youtube/suggest?q=${encodeURIComponent(clean)}&limit=10`,
-        { signal: controller.signal },
+        { signal: controller.signal, headers: cookieRequestHeaders() },
       );
       const data = (await response.json()) as {
         suggestions?: string[];
@@ -355,7 +356,7 @@ function SearchPanel({
       try {
         const response = await fetch(
           `/api/youtube/search?q=${encodeURIComponent(value)}&limit=${SEARCH_LIMIT}`,
-          { signal },
+          { signal, headers: cookieRequestHeaders() },
         );
         const data = (await response.json()) as {
           results?: YouTubeResult[];

src/components/CookiesModal.tsx

@@ -19,30 +19,35 @@ export default function CookiesModal({ opened, onClose }: CookiesModalProps) {
   const [cookies, setCookiesState] = useState("");
   const [customEnabled, setCustomEnabled] = useState(false);
   const [saving, setSaving] = useState(false);
+  const [validationError, setValidationError] = useState<string | null>(null);
 
   useEffect(() => {
     if (!opened) return;
     const id = requestAnimationFrame(() => {
       setCookiesState(getUserCookies());
       setCustomEnabled(isCustomCookiesEnabled());
+      setValidationError(null);
     });
     return () => cancelAnimationFrame(id);
   }, [opened]);
 
   const handleSave = async () => {
     setSaving(true);
+    setValidationError(null);
     try {
       if (customEnabled && cookies.trim()) {
         const validation = validateCookies(cookies);
         if (!validation.valid) {
-          setSaving(false);
+          setValidationError(validation.error || "Invalid cookie format.");
           return;
         }
       }
       setUserCookies(cookies);
       setCustomCookiesEnabled(customEnabled);
       onClose();
     } catch {
+      setValidationError("Failed to save cookies. Please try again.");
+    } finally {
       setSaving(false);
     }
   };
@@ -70,13 +75,20 @@ export default function CookiesModal({ opened, onClose }: CookiesModalProps) {
             </Text>
           }
           checked={customEnabled}
-          onChange={(e) => setCustomEnabled(e.currentTarget.checked)}
+          onChange={(e) => {
+            setCustomEnabled(e.currentTarget.checked);
+            setValidationError(null);
+          }}
         />
 
         {customEnabled && (
           <Textarea
             value={cookies}
-            onChange={(e) => setCookiesState(e.currentTarget.value)}
+            onChange={(e) => {
+              setCookiesState(e.currentTarget.value);
+              setValidationError(null);
+            }}
+            error={validationError}
             placeholder="Paste your exported cookies.txt here..."
             minRows={6}
             maxRows={10}

src/lib/cookies.ts

@@ -1,6 +1,8 @@
 const COOKIES_KEY = "moonlit-yt-cookies";
 const CUSTOM_COOKIES_ENABLED_KEY = "moonlit-custom-cookies-enabled";
 
+export const MOONLIT_COOKIES_HEADER = "X-Moonlit-Cookies";
+
 /** Get user cookies from localStorage */
 export function getUserCookies(): string {
   if (typeof window === "undefined") return "";
@@ -36,6 +38,26 @@ export function getCookiesToUse(): { cookies: string } {
   return { cookies: "" };
 }
 
+/** Headers to attach when calling server APIs that accept user cookies. */
+export function cookieRequestHeaders(): HeadersInit {
+  const { cookies } = getCookiesToUse();
+  if (!cookies.trim()) return {};
+  return { [MOONLIT_COOKIES_HEADER]: cookies };
+}
+
+/** Read user cookies sent from the client on a server request. */
+export function readRequestCookies(request: Request): string | undefined {
+  const cookies = request.headers.get(MOONLIT_COOKIES_HEADER)?.trim();
+  return cookies || undefined;
+}
+
+/** Remove saved user cookies and the enable preference. */
+export function clearUserCookies(): void {
+  if (typeof window === "undefined") return;
+  localStorage.removeItem(COOKIES_KEY);
+  localStorage.removeItem(CUSTOM_COOKIES_ENABLED_KEY);
+}
+
 /** Validate Netscape cookie format — each non-empty, non-comment line must have 7 tab-separated fields */
 export function validateCookies(content: string): { valid: boolean; error?: string } {
   if (!content.trim()) return { valid: true };

src/utils/reset.ts

@@ -1,4 +1,5 @@
 import localforage from "localforage";
+import { clearUserCookies } from "@/lib/cookies";
 import { clearPlaybackPrefs, clearShowVideoPref } from "@/lib/playerPrefs";
 
 export interface ResetOptions {
@@ -22,6 +23,7 @@ export async function resetAllData(options: ResetOptions = { settings: true }) {
         }
       }
       keysToRemove.forEach((key) => localStorage.removeItem(key));
+      clearUserCookies();
       clearShowVideoPref();
       clearPlaybackPrefs();
     }