Launch progress

src/components/PlaySection.tsx

@@ -16,22 +16,31 @@ interface PlaySectionProps {
 const PlaySection: React.FC<PlaySectionProps> = ({ version, account }) => {
   const [isLaunching, setIsLaunching] = useState(false);
   const [launchStatus, setLaunchStatus] = useState("");
+  const [progress, setProgress] = useState(0);
 
   useEffect(() => {
+    const unlistenProgress = listen<number>("launch-progress", (event) => {
+      setProgress(event.payload);
+    });
+
     const unlistenLaunchStatus = listen<string>("launch-status", (event) => {
       setLaunchStatus(event.payload);
     });
 
     const unlistenIsLaunching = listen<string>("is-launching", (event) => {
       setIsLaunching(event.payload === "true");
+      if (event.payload === "false") setProgress(0); // reset when done
     });
 
     return () => {
+      unlistenProgress.then((f) => f());
       unlistenLaunchStatus.then((f) => f());
       unlistenIsLaunching.then((f) => f());
     };
   }, []);
 
+  console.log(isLaunching);
+
   return (
     <div className="h-full relative">
       {/* Background Image */}
@@ -42,7 +51,7 @@ const PlaySection: React.FC<PlaySectionProps> = ({ version, account }) => {
       />
 
       {/* Centered Overlay */}
-      <div className="absolute inset-0 flex items-center justify-center">
+      <div className="absolute inset-0 flex flex-col items-center justify-center">
         <div className="relative group">
           <div className="absolute -inset-1 bg-linear-to-r from-blue-600 to-cyan-500 rounded-lg blur opacity-25 group-hover:opacity-50 transition duration-1000 group-hover:duration-200"></div>
 
@@ -68,6 +77,25 @@ const PlaySection: React.FC<PlaySectionProps> = ({ version, account }) => {
             )}
           </button>
         </div>
+        {
+          <div
+            className={cn(
+              "w-64 transition-opacity duration-700 opacity-0 absolute mt-28",
+              isLaunching && "opacity-100",
+            )}
+          >
+            <div className="h-2 w-full bg-white/10 rounded-full overflow-hidden">
+              <div
+                className="h-full bg-linear-to-r from-blue-500 to-cyan-400 transition-all duration-300"
+                style={{ width: `${progress}%` }}
+              />
+            </div>
+
+            <div className="text-xs text-center mt-1 text-white/70">
+              {progress}%
+            </div>
+          </div>
+        }
       </div>
     </div>
   );

src/index.css

@@ -53,3 +53,9 @@
 ::-webkit-scrollbar-thumb:hover {
   background: #3f3f46;
 }
+
+/* Define the fade-in animation */
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}