Update artifacts/fb-publisher/src/App.tsx

artifacts/fb-publisher/src/App.tsx

@@ -1,18 +1,41 @@
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { createClient } from "@supabase/supabase-js";
 import { Auth } from "@supabase/auth-ui-react";
 import { ThemeSupa } from "@supabase/auth-ui-shared";
 import { setAuthTokenGetter } from "@workspace/api-client-react";
-import { Switch, Route, Router as WouterRouter, Redirect } from "wouter";
-import { QueryClientProvider } from "@tanstack/react-query";
+import {
+  Switch,
+  Route,
+  useLocation,
+  Router as WouterRouter,
+  Redirect,
+} from "wouter";
+import { QueryClientProvider, useQueryClient } from "@tanstack/react-query";
 import { queryClient } from "./lib/queryClient";
+import { Toaster } from "@/components/ui/toaster";
+import { TooltipProvider } from "@/components/ui/tooltip";
+import Landing from "@/pages/Landing";
 import Publisher from "@/pages/Publisher";
+import Subscription from "@/pages/Subscription";
+import SubscriptionReturn from "@/pages/SubscriptionReturn";
+import InstallExtension from "@/pages/InstallExtension";
 import Admin from "@/pages/Admin";
+import NotFound from "@/pages/not-found";
+import UpdateBanner from "@/components/UpdateBanner";
 
 const supabaseUrl = "https://eijwjjbkluurxjiiuhay.supabase.co";
 const supabaseAnonKey = "sb_publishable_VZEm1rag3JF-39xXx2F5og_1oNkjR5h";
 const supabase = createClient(supabaseUrl, supabaseAnonKey);
 
+const basePath = import.meta.env.BASE_URL.replace(/\/$/, "");
+
+function stripBase(path: string): string {
+  return basePath && path.startsWith(basePath)
+    ? path.slice(basePath.length) || "/"
+    : path;
+}
+
+// ========== Supabase Auth Token Setter ==========
 function SupabaseAuthTokenSetter() {
   useEffect(() => {
     setAuthTokenGetter(async () => {
@@ -24,7 +47,45 @@ function SupabaseAuthTokenSetter() {
   return null;
 }
 
-function HomePage() {
+// ========== صفحات ==========
+function SignInPage() {
+  const [session, setSession] = useState<any>(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    supabase.auth.getSession().then(({ data: { session } }) => {
+      setSession(session);
+      setLoading(false);
+    });
+
+    // 🆕 تحويل تلقائي بعد تسجيل الدخول
+    const { data: { subscription } } = supabase.auth.onAuthStateChange((_event, session) => {
+      if (session) {
+        window.location.href = `${basePath}/app`;
+      }
+    });
+    return () => subscription.unsubscribe();
+  }, []);
+
+  if (loading) return <div className="min-h-screen bg-[#16162a] flex items-center justify-center text-white">جاري التحميل...</div>;
+  if (session) return <Redirect to="/app" />;
+
+  return (
+    <div className="flex min-h-[100dvh] items-center justify-center px-4 bg-[#16162a]">
+      <div className="w-full max-w-md">
+        <Auth
+          supabaseClient={supabase}
+          appearance={{ theme: ThemeSupa }}
+          providers={["google"]}
+          redirectTo={`${window.location.origin}${basePath}/app`}
+          view="sign_in"
+        />
+      </div>
+    </div>
+  );
+}
+
+function SignUpPage() {
   const [session, setSession] = useState<any>(null);
   const [loading, setLoading] = useState(true);
 
@@ -33,21 +94,53 @@ function HomePage() {
       setSession(session);
       setLoading(false);
     });
+
+    const { data: { subscription } } = supabase.auth.onAuthStateChange((_event, session) => {
+      if (session) {
+        window.location.href = `${basePath}/app`;
+      }
+    });
+    return () => subscription.unsubscribe();
   }, []);
 
-  if (loading) return <div className="min-h-screen bg-[#0f0f1e] flex items-center justify-center text-white">جاري التحميل...</div>;
+  if (loading) return <div className="min-h-screen bg-[#16162a] flex items-center justify-center text-white">جاري التحميل...</div>;
   if (session) return <Redirect to="/app" />;
 
   return (
-    <div className="min-h-screen bg-[#0f0f1e] flex items-center justify-center">
-      <div className="w-full max-w-md p-6">
-        <h1 className="text-white text-2xl font-bold text-center mb-6">FB Publisher PRO</h1>
-        <Auth supabaseClient={supabase} appearance={{ theme: ThemeSupa }} providers={["google"]} redirectTo={`${window.location.origin}`} />
+    <div className="flex min-h-[100dvh] items-center justify-center px-4 bg-[#16162a]">
+      <div className="w-full max-w-md space-y-4">
+        <Auth
+          supabaseClient={supabase}
+          appearance={{ theme: ThemeSupa }}
+          providers={["google"]}
+          redirectTo={`${window.location.origin}${basePath}/app`}
+          view="sign_up"
+        />
+        <div className="rounded-lg border border-red-500/30 bg-red-950/20 p-3 text-center text-sm text-red-300">
+          ⚠️ <strong>تنبيه هام لمكافحة السبام:</strong> التسجيل باستخدام البريد الإلكتروني المؤقت ممنوع تمامًا وسيؤدي إلى حظر الحساب فور اكتشافه.
+        </div>
       </div>
     </div>
   );
 }
 
+function HomePage() {
+  const [session, setSession] = useState<any>(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    supabase.auth.getSession().then(({ data: { session } }) => {
+      setSession(session);
+      setLoading(false);
+    });
+  }, []);
+
+  if (loading) return <div className="min-h-screen bg-[#16162a] flex items-center justify-center text-white">جاري التحميل...</div>;
+  if (session) return <Redirect to="/app" />;
+
+  return <Landing />;
+}
+
 function ProtectedPublisher() {
   const [session, setSession] = useState<any>(null);
   const [loading, setLoading] = useState(true);
@@ -59,23 +152,129 @@ function ProtectedPublisher() {
     });
   }, []);
 
-  if (loading) return <div className="min-h-screen bg-[#0f0f1e] flex items-center justify-center text-white">جاري التحميل...</div>;
-  if (!session) return <Redirect to="/" />;
+  if (loading) return <div className="min-h-screen bg-[#16162a] flex items-center justify-center text-white">جاري التحميل...</div>;
+  if (!session) return <Redirect to="/sign-in" />;
 
   return <Publisher />;
 }
 
-export default function App() {
+function ProtectedSubscription() {
+  const [session, setSession] = useState<any>(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    supabase.auth.getSession().then(({ data: { session } }) => {
+      setSession(session);
+      setLoading(false);
+    });
+  }, []);
+
+  if (loading) return <div className="min-h-screen bg-[#16162a] flex items-center justify-center text-white">جاري التحميل...</div>;
+  if (!session) return <Redirect to="/sign-in" />;
+
+  return <Subscription />;
+}
+
+function ProtectedExtension() {
+  const [session, setSession] = useState<any>(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    supabase.auth.getSession().then(({ data: { session } }) => {
+      setSession(session);
+      setLoading(false);
+    });
+  }, []);
+
+  if (loading) return <div className="min-h-screen bg-[#16162a] flex items-center justify-center text-white">جاري التحميل...</div>;
+  if (!session) return <Redirect to="/sign-in" />;
+
+  return <InstallExtension />;
+}
+
+function ServerKeepAlive() {
+  const [waking, setWaking] = useState(false);
+
+  useEffect(() => {
+    let wakingTimer: ReturnType<typeof setTimeout>;
+    const ping = () => {
+      wakingTimer = setTimeout(() => setWaking(true), 4000);
+      fetch("/api/healthz", { cache: "no-store" })
+        .then(() => { clearTimeout(wakingTimer); setWaking(false); })
+        .catch(() => { clearTimeout(wakingTimer); setWaking(false); });
+    };
+    ping();
+    const interval = setInterval(ping, 10 * 60 * 1000);
+    return () => { clearInterval(interval); clearTimeout(wakingTimer); };
+  }, []);
+
+  if (!waking) return null;
+
+  return (
+    <div className="fixed inset-0 z-[9999] flex items-center justify-center bg-[#16162a]/90 backdrop-blur-sm" dir="rtl">
+      <div className="bg-[#1f1f3a] border border-[#3a3a55] rounded-2xl p-8 text-center max-w-sm mx-4 shadow-2xl">
+        <div className="text-5xl mb-4">⚙️</div>
+        <h2 className="text-white text-xl font-bold mb-2">جاري تشغيل الخادم…</h2>
+        <p className="text-gray-400 text-sm leading-relaxed">الخادم كان في وضع السكون.<br />يستغرق الأمر بضع ثوانٍ، شكراً لصبرك.</p>
+        <div className="mt-5 flex justify-center gap-2">
+          {[0, 1, 2].map((i) => (
+            <div key={i} className="w-2.5 h-2.5 bg-[#bb86fc] rounded-full animate-bounce" style={{ animationDelay: `${i * 0.18}s` }} />
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function SupabaseQueryClientCacheInvalidator() {
+  const qc = useQueryClient();
+  const prevUserIdRef = useRef<string | null | undefined>(undefined);
+
+  useEffect(() => {
+    const { data: { subscription } } = supabase.auth.onAuthStateChange((_event, session) => {
+      const userId = session?.user?.id ?? null;
+      if (prevUserIdRef.current !== undefined && prevUserIdRef.current !== userId) {
+        qc.clear();
+      }
+      prevUserIdRef.current = userId;
+    });
+    return () => subscription.unsubscribe();
+  }, [qc]);
+
+  return null;
+}
+
+function SupabaseProviderWithRoutes() {
   return (
-    <QueryClientProvider client={queryClient}>
+    <>
+      <ServerKeepAlive />
       <SupabaseAuthTokenSetter />
-      <WouterRouter>
+      <SupabaseQueryClientCacheInvalidator />
+      <TooltipProvider>
         <Switch>
           <Route path="/" component={HomePage} />
+          <Route path="/sign-in/*?" component={SignInPage} />
+          <Route path="/sign-up/*?" component={SignUpPage} />
           <Route path="/app" component={ProtectedPublisher} />
+          <Route path="/subscription" component={ProtectedSubscription} />
+          <Route path="/subscription/return" component={SubscriptionReturn} />
+          <Route path="/extension" component={ProtectedExtension} />
           <Route path="/admin" component={Admin} />
+          <Route component={NotFound} />
         </Switch>
-      </WouterRouter>
-    </QueryClientProvider>
+        <UpdateBanner />
+        <Toaster />
+      </TooltipProvider>
+    </>
+  );
+}
+
+export default function App() {
+  return (
+    <WouterRouter base={basePath}>
+      <QueryClientProvider client={queryClient}>
+        <SupabaseProviderWithRoutes />
+      </QueryClientProvider>
+    </WouterRouter>
   );
 }