From 95b839355f8873e6c03e94b795363d68a48ca3f3 Mon Sep 17 00:00:00 2001
From: Gabriel Kaszewski <gabrielkaszewski@gmail.com>
Date: Sat, 11 Jul 2026 01:44:08 +0200
Subject: [PATCH] fix: portal search overlay to escape transform stacking
 context, auto-fill IMDB from ttXXXX input

---
 spa/src/components/search-overlay.tsx | 110 ++++++++++++++------------
 1 file changed, 60 insertions(+), 50 deletions(-)

diff --git a/spa/src/components/search-overlay.tsx b/spa/src/components/search-overlay.tsx
index 4301f4a..4b39bec 100644
--- a/spa/src/components/search-overlay.tsx
+++ b/spa/src/components/search-overlay.tsx
@@ -1,4 +1,5 @@
 import { useState } from "react"
+import { createPortal } from "react-dom"
 import { useTranslation } from "react-i18next"
 import { PenLine, Search, X } from "lucide-react"
 import { Button } from "@/components/ui/button"
@@ -27,6 +28,8 @@ type SearchOverlayProps = {
   onSelect: (movie: MovieSelection) => void
 }
 
+const IMDB_RE = /^tt\d{4,}$/i
+
 export function SearchOverlay({ open, onClose, onSelect }: SearchOverlayProps) {
   const { t } = useTranslation()
   const [query, setQuery] = useState("")
@@ -38,6 +41,15 @@ export function SearchOverlay({ open, onClose, onSelect }: SearchOverlayProps) {
   const debouncedQuery = useDebounce(query, 300)
   const { data, isPending } = useSearch({ q: debouncedQuery || undefined })
 
+  function handleQueryChange(value: string) {
+    setQuery(value)
+    if (IMDB_RE.test(value.trim())) {
+      setManualImdbId(value.trim())
+      setManual(true)
+      setQuery("")
+    }
+  }
+
   if (!open) return null
 
   const hasImdbId = manualImdbId.trim().length > 0
@@ -56,62 +68,58 @@ export function SearchOverlay({ open, onClose, onSelect }: SearchOverlayProps) {
     })
   }
 
-  if (manual) {
-    return (
-      <div className="fixed inset-0 z-50 flex flex-col glass-heavy">
-        <div className="flex items-center justify-between p-4">
-          <Button variant="ghost" size="sm" onClick={() => setManual(false)}>
-            {t("searchOverlay.backToSearch")}
-          </Button>
-          <Button variant="ghost" size="sm" onClick={onClose}>
-            {t("common.cancel")}
-          </Button>
-        </div>
-        <div className="flex-1 overflow-auto px-4">
-          <Card>
-            <CardHeader>
-              <CardTitle>{t("searchOverlay.addManuallyTitle")}</CardTitle>
-              <CardDescription>{t("searchOverlay.addManuallyDesc")}</CardDescription>
-            </CardHeader>
-            <CardContent className="space-y-4">
-              <div className="space-y-1.5">
-                <Label htmlFor="manual-imdb">{t("searchOverlay.imdbId")}</Label>
-                <Input id="manual-imdb" value={manualImdbId} onChange={(e) => setManualImdbId(e.target.value)} placeholder={t("searchOverlay.imdbPlaceholder")} autoFocus />
-                <p className="text-xs text-muted-foreground">{t("searchOverlay.imdbHelp")}</p>
-              </div>
-              <Separator />
-              <p className="text-xs text-muted-foreground">{t("searchOverlay.orSearchByTitle")}</p>
-              <div className="space-y-1.5">
-                <Label htmlFor="manual-title">{t("searchOverlay.titleLabel")} {!hasImdbId && "*"}</Label>
-                <Input id="manual-title" value={manualTitle} onChange={(e) => setManualTitle(e.target.value)} placeholder={t("searchOverlay.titlePlaceholder")} />
-              </div>
-              <div className="space-y-1.5">
-                <Label htmlFor="manual-year">{t("searchOverlay.releaseYear")} {!hasImdbId && "*"}</Label>
-                <Input id="manual-year" type="number" value={manualYear} onChange={(e) => setManualYear(e.target.value)} placeholder={t("searchOverlay.yearPlaceholder")} />
-              </div>
-              <div className="space-y-1.5">
-                <Label htmlFor="manual-director">{t("searchOverlay.director")}</Label>
-                <Input id="manual-director" value={manualDirector} onChange={(e) => setManualDirector(e.target.value)} placeholder={t("searchOverlay.directorPlaceholder")} />
-              </div>
-              <Button onClick={handleManualSubmit} disabled={!canSubmitManual} className="w-full">
-                {t("common.continue")}
-              </Button>
-            </CardContent>
-          </Card>
-        </div>
-      </div>
-    )
-  }
-
   const hasResults = (data?.movies?.items?.length ?? 0) > 0
   const searched = debouncedQuery.length > 0 && !isPending
 
-  return (
+  const content = manual ? (
+    <div className="fixed inset-0 z-50 flex flex-col glass-heavy">
+      <div className="flex items-center justify-between p-4">
+        <Button variant="ghost" size="sm" onClick={() => setManual(false)}>
+          {t("searchOverlay.backToSearch")}
+        </Button>
+        <Button variant="ghost" size="sm" onClick={onClose}>
+          {t("common.cancel")}
+        </Button>
+      </div>
+      <div className="flex-1 overflow-auto px-4">
+        <Card>
+          <CardHeader>
+            <CardTitle>{t("searchOverlay.addManuallyTitle")}</CardTitle>
+            <CardDescription>{t("searchOverlay.addManuallyDesc")}</CardDescription>
+          </CardHeader>
+          <CardContent className="space-y-4">
+            <div className="space-y-1.5">
+              <Label htmlFor="manual-imdb">{t("searchOverlay.imdbId")}</Label>
+              <Input id="manual-imdb" value={manualImdbId} onChange={(e) => setManualImdbId(e.target.value)} placeholder={t("searchOverlay.imdbPlaceholder")} autoFocus />
+              <p className="text-xs text-muted-foreground">{t("searchOverlay.imdbHelp")}</p>
+            </div>
+            <Separator />
+            <p className="text-xs text-muted-foreground">{t("searchOverlay.orSearchByTitle")}</p>
+            <div className="space-y-1.5">
+              <Label htmlFor="manual-title">{t("searchOverlay.titleLabel")} {!hasImdbId && "*"}</Label>
+              <Input id="manual-title" value={manualTitle} onChange={(e) => setManualTitle(e.target.value)} placeholder={t("searchOverlay.titlePlaceholder")} />
+            </div>
+            <div className="space-y-1.5">
+              <Label htmlFor="manual-year">{t("searchOverlay.releaseYear")} {!hasImdbId && "*"}</Label>
+              <Input id="manual-year" type="number" value={manualYear} onChange={(e) => setManualYear(e.target.value)} placeholder={t("searchOverlay.yearPlaceholder")} />
+            </div>
+            <div className="space-y-1.5">
+              <Label htmlFor="manual-director">{t("searchOverlay.director")}</Label>
+              <Input id="manual-director" value={manualDirector} onChange={(e) => setManualDirector(e.target.value)} placeholder={t("searchOverlay.directorPlaceholder")} />
+            </div>
+            <Button onClick={handleManualSubmit} disabled={!canSubmitManual} className="w-full">
+              {t("common.continue")}
+            </Button>
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  ) : (
     <div className="fixed inset-0 z-50 flex flex-col glass-heavy">
       <div className="flex items-center gap-3 p-4">
         <div className="relative flex-1">
           <Search className="absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" />
-          <Input value={query} onChange={(e) => setQuery(e.target.value)} placeholder={t("searchOverlay.searchPlaceholder")} className="pl-9" autoFocus />
+          <Input value={query} onChange={(e) => handleQueryChange(e.target.value)} placeholder={t("searchOverlay.searchPlaceholder")} className="pl-9" autoFocus />
           {query && (
             <Button variant="ghost" size="icon" onClick={() => setQuery("")} className="absolute right-3 top-1/2 size-6 -translate-y-1/2">
               <X className="size-4 text-muted-foreground" />
@@ -149,7 +157,7 @@ export function SearchOverlay({ open, onClose, onSelect }: SearchOverlayProps) {
             }}
             className="flex w-full items-center gap-3 rounded-lg p-2 text-left transition-colors active:bg-muted"
           >
-            <div className="h-14 w-10 flex-shrink-0 overflow-hidden rounded-md bg-muted">
+            <div className="h-14 w-10 shrink-0 overflow-hidden rounded-md bg-muted">
               {hit.poster_path && <img src={posterUrl(hit.poster_path)} alt="" className="size-full object-cover" />}
             </div>
             <div>
@@ -182,4 +190,6 @@ export function SearchOverlay({ open, onClose, onSelect }: SearchOverlayProps) {
       </div>
     </div>
   )
+
+  return createPortal(content, document.body)
 }