Implement Button Functionality for Launching Pieces OS

src/app/App.tsx

@@ -5,6 +5,7 @@ import {Application} from "@pieces.app/pieces-os-client";
 import {DataTextInput, DeleteAssetButton, RenameAssetInput} from './components/TextInput';
 import {Header} from './components/Header'
 import {connect} from './utils/Connect'
+import { Indicator } from "./components/Indicator";
 
 // types
 type LocalAsset = {
@@ -192,13 +193,4 @@ connect().then(__ => {
   }
   //agrim implemented - Upon connecting to the Pieces OS, there is a need to enhance the user experience by implementing a timer 
   //that automatically hides the "You're Connected" text and shrinks the button after a certain duration
-  let time = 3000;
-  setTimeout(() => {
-    if (_indicator != null) {
-      let indicatorText = document.getElementById("indicator_text");
-      indicatorText.innerText = "";
-      _indicator.style.transition = "all 0.3s ease";
-      _indicator.style.transform = "scale(0.8)";
-    }
-  }, time);
 })

src/app/components/Indicator.tsx

@@ -2,31 +2,19 @@ import * as React from "react";
 
 // @ts-ignore
 import check from "../icons/check.png";
-
-// this is your indicator badge that we will manipulate through the initial connect call. it will either
-// be green or red depending on the current status.
-
-// (4) So in your designs I saw that you wanted to add the 'text connected and secured' and a check to the circle indicator.
-// this should be pretty simple to add in with a few steps:
-//
-// a. First lets get the icon for the check mark - I got one from icons 8 here: https://icons8.com/icon/set/check/color
-// b. Now lets move the text inside the pill here that you suggested
-// c. then add the <img> element after the <span> you just added, styled it, and TODO: I added a ts-ignore above the image import (cant get it to go away)
-// d. added an id to the image for later and we are good to go for now.
-//
-// lets head over to the App.tsx file at /app/App.tsx and we can get going on rearranging some pieces and parts of this
-// landing index page.
+import { launchPiecesOS } from "../utils/launchPiecesOS";
 
 export function Indicator(): React.JSX.Element {
   return (
-      <>
-          <div style={{ display: "inherit", justifyContent: 'center', alignItems: 'center' }}>
-              {/*<p style={{ paddingRight: '10px' }}>Connection Status</p>*/}
-              <div id={"indicator"} style={{ backgroundColor: "red", height: '24px', borderRadius: '20px', border: '1px solid black', padding: '2px 10px', display: 'flex', flexWrap: 'wrap', alignItems: 'center'  }}>
-                <span id={"indicator_text"} style={{ color: "white", fontSize: '14px' }}>You're Connected!</span>
-                <img id={"checkmark"} src={check} alt={"checkmark"} style={{height: "20px", width: '20px', margin: '0 5px'}}/>
-              </div>
+    <>
+      <div style={{ display: "inherit", justifyContent: 'center', alignItems: 'center' }}>
+        <button style={{background:"transparent", border: '1px solid black'}}>
+          <div id={"indicator"} style={{ backgroundColor: "red", height: '24px', borderRadius: '20px', border: '1px solid black', padding: '4px 10px', display: 'flex', flexWrap: 'wrap', alignItems: 'center'  }} onClick={launchPiecesOS}>
+            <span id={"indicator_text"} style={{ color: "white", fontSize: '14px' }}>You're Connected!</span>
+            <img id={"checkmark"} src={check} alt={"checkmark"} style={{height: "20px", width: '20px', margin: '0 5px'}}/>
           </div>
-      </>
-  )
+        </button>
+      </div>
+    </>
+  );
 }

src/app/utils/launchPiecesOS.tsx

@@ -0,0 +1,34 @@
+import { connect } from './Connect';; // Import the Promise type
+
+const launchPiecesOS = async () => {
+  const url: string = 'pieces://launch';
+  try {
+    const isPiecesOSConnected = navigator.userAgent.includes('PiecesOS');
+    if (isPiecesOSConnected) {
+      console.log("Pieces OS is already connected.");
+      // Perform any additional actions for connected state
+    } else {
+      await window.open(url, '_blank');
+      console.log("Pieces OS is installed.");
+      window.location.reload();// Refresh the page
+    }
+  } catch {
+    console.error("Pieces OS is not installed.");
+  }
+  finally {
+    connect().then((data: JSON) => {
+      // define the indicator now that it exists.
+      const _indicator = document.getElementById("indicator");
+
+      // conditional for the response back on application.
+      //
+      // (1) first @jordan-pieces came in here and added this turing statement here inside a new
+      // if statement. this is an upgrade in comparison to the previous if statement that would not check to
+      // see if the _indicator itself is added to the DOM yet.
+      if (_indicator != null) {
+        _indicator != undefined ? _indicator.style.backgroundColor = "green" : _indicator.style.backgroundColor = "red";
+      }
+    })
+  } // Add a missing closing parenthesis and semicolon here
+}
+export { launchPiecesOS };