Fix Model Price

src/shared/components/NineRemoteButton.js

@@ -1,104 +1,23 @@
 "use client";
 
-import { useState, useEffect, useRef } from "react";
-import NineRemoteModal from "./NineRemoteModal";
-
-// step 0-4 từ 9remote SSE: 0=Stopped,1=Preparing,2=Connecting,3=Tunneling,4=Ready
-const STEP = { STOPPED: 0, PREPARING: 1, CONNECTING: 2, TUNNELING: 3, READY: 4 };
-
-// Retry interval khi 9remote chưa chạy (30s để không spam)
-const RETRY_MS = 30000;
-
-const stepStyle = (step, installed) => {
-  if (!installed) return { color: "text-text-muted hover:text-text-main hover:bg-black/5 dark:hover:bg-white/5", glow: null };
-  switch (step) {
-    case STEP.READY:   return { color: "text-emerald-500 hover:bg-emerald-500/10", glow: "drop-shadow(0 0 6px rgb(16 185 129 / 0.7))" };
-    case STEP.STOPPED: return { color: "text-text-muted hover:text-text-main hover:bg-black/5 dark:hover:bg-white/5", glow: null };
-    default:           return { color: "text-amber-400 hover:bg-amber-400/10", glow: null };
-  }
-};
+import { useState } from "react";
+import NineRemotePromoModal from "./NineRemotePromoModal";
 
 export default function NineRemoteButton() {
   const [isOpen, setIsOpen] = useState(false);
-  const [installed, setInstalled] = useState(false);
-  const [step, setStep] = useState(STEP.STOPPED);
-  const esRef = useRef(null);
-  const retryRef = useRef(null);
-
-  const scheduleRetry = () => {
-    clearTimeout(retryRef.current);
-    retryRef.current = setTimeout(connect, RETRY_MS);
-  };
-
-  const connect = () => {
-    esRef.current?.close();
-    clearTimeout(retryRef.current);
-
-    const es = new EventSource("http://localhost:2208/api/ui/events");
-
-    es.onmessage = (e) => {
-      try {
-        const data = JSON.parse(e.data);
-        if (data.type === "state") {
-          setInstalled(true);
-          setStep(data.step ?? STEP.STOPPED);
-        }
-      } catch {}
-    };
-
-    es.onerror = () => {
-      es.close();
-      setStep(STEP.STOPPED);
-      // 9remote not running — retry after delay
-      scheduleRetry();
-    };
-
-    esRef.current = es;
-  };
-
-  useEffect(() => {
-    // Check installed once on mount (no polling, just 1 call)
-    fetch("/api/9remote/status")
-      .then((r) => r.json())
-      .then((d) => setInstalled(d.installed))
-      .catch(() => {});
-
-    connect();
-
-    return () => {
-      esRef.current?.close();
-      clearTimeout(retryRef.current);
-    };
-  }, []);
-
-  // When modal closes, reconnect SSE immediately (user may have just started 9remote)
-  const handleClose = () => {
-    setIsOpen(false);
-    setTimeout(connect, 800);
-  };
-
-  const { color, glow } = stepStyle(step, installed);
-  const isPulsing = installed && step >= STEP.PREPARING && step <= STEP.TUNNELING;
 
   return (
     <>
       <button
         onClick={() => setIsOpen(true)}
-        className={`relative flex items-center gap-1.5 px-2.5 py-1.5 rounded-lg transition-all ${color}`}
-        style={glow ? { filter: glow } : {}}
+        className="relative flex items-center gap-1.5 px-2.5 py-1.5 rounded-lg transition-all text-text-muted hover:text-text-main hover:bg-black/5 dark:hover:bg-white/5"
         title="9Remote"
       >
-        <span className={`material-symbols-outlined text-[18px]${isPulsing ? " animate-pulse" : ""}`}>
-          computer
-        </span>
+        <span className="material-symbols-outlined text-[18px]">computer</span>
         <span className="text-xs font-medium">Remote</span>
       </button>
 
-      <NineRemoteModal
-        isOpen={isOpen}
-        onClose={handleClose}
-        onInstalled={() => setInstalled(true)}
-      />
+      <NineRemotePromoModal isOpen={isOpen} onClose={() => setIsOpen(false)} />
     </>
   );
 }