feat: Add redirect modal for new version

Added a modal that appears on app load to inform users about the new version
at https://deepsite.hf.co/. Users can choose to redirect or continue with
the current version.

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

src/components/App.tsx

@@ -11,6 +11,7 @@ import Tabs from "./tabs/tabs";
 import AskAI from "./ask-ai/ask-ai";
 import { Auth } from "../utils/types";
 import Preview from "./preview/preview";
+import RedirectModal from "./redirect-modal/redirect-modal";
 
 function App() {
   const [htmlStorage, , removeHtmlStorage] = useLocalStorage("html_content");
@@ -25,6 +26,7 @@ function App() {
   const [html, setHtml] = useState((htmlStorage as string) ?? defaultHTML);
   const [isAiWorking, setisAiWorking] = useState(false);
   const [auth, setAuth] = useState<Auth | undefined>(undefined);
+  const [showRedirectModal, setShowRedirectModal] = useState(true);
 
   const fetchMe = async () => {
     const res = await fetch("/api/@me");
@@ -135,6 +137,9 @@ function App() {
 
   return (
     <div className="h-screen bg-gray-950 font-sans overflow-hidden">
+      {showRedirectModal && (
+        <RedirectModal onDismiss={() => setShowRedirectModal(false)} />
+      )}
       <Header
         onReset={() => {
           if (isAiWorking) {

src/components/redirect-modal/redirect-modal.tsx

@@ -0,0 +1,55 @@
+import { useState, useEffect } from "react";
+
+interface RedirectModalProps {
+  onDismiss: () => void;
+}
+
+const RedirectModal = ({ onDismiss }: RedirectModalProps) => {
+  const [isVisible, setIsVisible] = useState(false);
+
+  useEffect(() => {
+    setIsVisible(true);
+  }, []);
+
+  const handleRedirect = () => {
+    window.location.href = "https://deepsite.hf.co/";
+  };
+
+  return (
+    <div
+      className={`fixed inset-0 z-50 flex items-center justify-center transition-opacity duration-300 ${
+        isVisible ? "opacity-100" : "opacity-0"
+      }`}
+    >
+      <div
+        className="absolute inset-0 bg-black bg-opacity-75"
+        onClick={onDismiss}
+      />
+      <div className="relative bg-gray-900 rounded-lg shadow-2xl p-8 max-w-md w-full mx-4 transform transition-transform duration-300">
+        <h2 className="text-2xl font-bold text-white mb-4">
+          New Version Available!
+        </h2>
+        <p className="text-gray-300 mb-6">
+          A new and improved version of DeepSite is now available. We recommend
+          using the latest version for the best experience and newest features.
+        </p>
+        <div className="flex gap-4">
+          <button
+            onClick={handleRedirect}
+            className="flex-1 bg-blue-600 hover:bg-blue-700 text-white font-semibold py-3 px-6 rounded-lg transition-colors duration-200"
+          >
+            Go to Latest Version
+          </button>
+          <button
+            onClick={onDismiss}
+            className="flex-1 bg-gray-700 hover:bg-gray-600 text-white font-semibold py-3 px-6 rounded-lg transition-colors duration-200"
+          >
+            Continue Here
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default RedirectModal;