Revert "Migrate to HeroUI v3 and Tailwind CSS v4"

This reverts commit 6a9296f33d.

components/search-modal.tsx

@@ -1,8 +1,8 @@
 'use client';
 
 import { useEffect, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
 import { FiSearch, FiX } from 'react-icons/fi';
-import { Modal, Button, Spinner } from '@heroui/react';
 
 interface SearchModalProps {
   isOpen: boolean;
@@ -95,58 +95,87 @@ export function SearchModal({ isOpen, onClose }: SearchModalProps) {
     };
   }, [isOpen]);
 
-  return (
-    <Modal isOpen={isOpen} onOpenChange={(open) => !open && onClose()}>
-      <Modal.Backdrop variant="blur">
-        <Modal.Container placement="top" size="lg" className="pt-20">
-          <Modal.Dialog className="w-full max-w-3xl rounded-2xl border border-white/40 bg-white/95 shadow-2xl backdrop-blur-md dark:border-white/10 dark:bg-slate-900/95">
-            {/* Header */}
-            <Modal.Header className="flex items-center justify-between border-b border-slate-200 px-6 py-4 dark:border-slate-700">
-              <div className="flex items-center gap-2 text-slate-600 dark:text-slate-300">
-                <FiSearch className="h-5 w-5" />
-                <Modal.Heading className="text-sm font-medium">全站搜尋</Modal.Heading>
-              </div>
-              <Button
-                isIconOnly
-                variant="ghost"
-                onPress={onClose}
-                className="h-8 w-8 rounded-full text-slate-500 hover:bg-slate-100 hover:text-slate-700 dark:text-slate-400 dark:hover:bg-slate-800 dark:hover:text-slate-200"
-                aria-label="關閉搜尋"
-              >
-                <FiX className="h-5 w-5" />
-              </Button>
-            </Modal.Header>
+  useEffect(() => {
+    const handleEscape = (e: KeyboardEvent) => {
+      if (e.key === 'Escape' && isOpen) {
+        onClose();
+      }
+    };
 
-            {/* Search Container */}
-            <Modal.Body className="max-h-[60vh] overflow-y-auto p-6">
-              <div
-                ref={searchContainerRef}
-                className="pagefind-search"
-                data-pagefind-ui
-              />
-              {!isLoaded && (
-                <div className="flex items-center justify-center py-12">
-                  <div className="text-center">
-                    <Spinner size="lg" color="accent" />
-                    <p className="mt-4 text-sm text-slate-500 dark:text-slate-400">
-                      載入搜尋引擎...
-                    </p>
-                  </div>
-                </div>
-              )}
-            </Modal.Body>
+    document.addEventListener('keydown', handleEscape);
+    return () => document.removeEventListener('keydown', handleEscape);
+  }, [isOpen, onClose]);
 
-            {/* Footer */}
-            <Modal.Footer className="border-t border-slate-200 px-6 py-3 text-xs text-slate-500 dark:border-slate-700 dark:text-slate-400">
-              <div className="flex w-full items-center justify-between">
-                <span>按 ESC 關閉</span>
-                <span className="text-right">支援中英文全文搜尋</span>
+  useEffect(() => {
+    // Prevent body scroll when modal is open
+    if (isOpen) {
+      document.body.style.overflow = 'hidden';
+    } else {
+      document.body.style.overflow = '';
+    }
+    return () => {
+      document.body.style.overflow = '';
+    };
+  }, [isOpen]);
+
+  if (!isOpen) return null;
+
+  // Use portal to render modal at document body level to avoid z-index stacking context issues
+  if (typeof window === 'undefined') return null;
+
+  return createPortal(
+    <div
+      className="fixed inset-0 z-[9999] flex items-start justify-center bg-black/50 backdrop-blur-sm pt-20 px-4"
+      onClick={onClose}
+    >
+      <div
+        className="w-full max-w-3xl rounded-2xl border border-white/40 bg-white/95 shadow-2xl backdrop-blur-md dark:border-white/10 dark:bg-slate-900/95"
+        onClick={(e) => e.stopPropagation()}
+      >
+        {/* Header */}
+        <div className="flex items-center justify-between border-b border-slate-200 px-6 py-4 dark:border-slate-700">
+          <div className="flex items-center gap-2 text-slate-600 dark:text-slate-300">
+            <FiSearch className="h-5 w-5" />
+            <span className="text-sm font-medium">全站搜尋</span>
+          </div>
+          <button
+            onClick={onClose}
+            className="inline-flex h-8 w-8 items-center justify-center rounded-full text-slate-500 transition hover:bg-slate-100 hover:text-slate-700 dark:text-slate-400 dark:hover:bg-slate-800 dark:hover:text-slate-200"
+            aria-label="關閉搜尋"
+          >
+            <FiX className="h-5 w-5" />
+          </button>
+        </div>
+
+        {/* Search Container */}
+        <div className="max-h-[60vh] overflow-y-auto p-6">
+          <div
+            ref={searchContainerRef}
+            className="pagefind-search"
+            data-pagefind-ui
+          />
+          {!isLoaded && (
+            <div className="flex items-center justify-center py-12">
+              <div className="text-center">
+                <div className="inline-block h-8 w-8 animate-spin rounded-full border-4 border-solid border-blue-500 border-r-transparent"></div>
+                <p className="mt-4 text-sm text-slate-500 dark:text-slate-400">
+                  載入搜尋引擎...
+                </p>
               </div>
-            </Modal.Footer>
-          </Modal.Dialog>
-        </Modal.Container>
-      </Modal.Backdrop>
-    </Modal>
+            </div>
+          )}
+        </div>
+
+        {/* Footer */}
+        <div className="border-t border-slate-200 px-6 py-3 text-xs text-slate-500 dark:border-slate-700 dark:text-slate-400">
+          <div className="flex items-center justify-between">
+            <span>按 ESC 關閉</span>
+            <span className="text-right">支援中英文全文搜尋</span>
+          </div>
+        </div>
+      </div>
+    </div>,
+    document.body
   );
 }
 
@@ -164,10 +193,9 @@ export function SearchButton({ onClick }: { onClick: () => void }) {
   }, [onClick]);
 
   return (
-    <Button
-      variant="ghost"
-      onPress={onClick}
-      className="motion-link h-9 rounded-full bg-slate-100 px-3 py-1.5 text-sm text-slate-600 hover:bg-slate-200 dark:bg-slate-800 dark:text-slate-300 dark:hover:bg-slate-700"
+    <button
+      onClick={onClick}
+      className="motion-link inline-flex h-9 items-center gap-2 rounded-full bg-slate-100 px-3 py-1.5 text-sm text-slate-600 transition hover:bg-slate-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/40 dark:bg-slate-800 dark:text-slate-300 dark:hover:bg-slate-700"
       aria-label="搜尋 (Cmd+K)"
     >
       <FiSearch className="h-3.5 w-3.5" />
@@ -175,6 +203,6 @@ export function SearchButton({ onClick }: { onClick: () => void }) {
       <kbd className="hidden rounded bg-white px-1.5 py-0.5 text-xs font-semibold text-slate-500 shadow-sm dark:bg-slate-900 dark:text-slate-400 sm:inline-block">
         ⌘K
       </kbd>
-    </Button>
+    </button>
   );
 }