- online off line status updated

- echo added to rename

app/src/components/footer/Footer.tsx

@@ -1,5 +1,5 @@
-import React, { useEffect } from "react";
-import { HelpIcon } from "../icons/DashboardIcon";
+import React, { useEffect, useState } from "react";
+import { HelpIcon, WifiIcon } from "../icons/DashboardIcon";
 import { useLogger } from "../ui/log/LoggerContext";
 import { GetLogIcon } from "./getLogIcons";
 import {
@@ -31,6 +31,27 @@ const Footer: React.FC = () => {
 
   const { Leftnote, Middlenote, Rightnote } = useMouseNoteStore();
 
+  const [isOnline, setIsOnline] = useState<boolean>(navigator.onLine);
+
+  useEffect(() => {
+    const handleOnline = () => {
+      echo.success('You are back Online');
+      setIsOnline(true);
+    };
+    const handleOffline = () => {
+      echo.warn('Changes made now might not be saved');
+      echo.error('You are now Offline.');
+      setIsOnline(false);
+    };
+
+    window.addEventListener("online", handleOnline);
+    window.addEventListener("offline", handleOffline);
+
+    return () => {
+      window.removeEventListener("online", handleOnline);
+      window.removeEventListener("offline", handleOffline);
+    };
+  }, []);
   const mouseButtons = [
     {
       icon: <CurserLeftIcon />,
@@ -98,6 +119,16 @@ const Footer: React.FC = () => {
               <HelpIcon />
             </div>
           </div>
+          <div
+            className={`wifi-connection ${
+              isOnline ? "connected" : "disconnected"
+            }`}
+          >
+            <div className="icon">
+              <WifiIcon />
+            </div>
+            <div className="tooltip">{isOnline ? "Online" : "Offline"}</div>
+          </div>
         </div>
       </div>
 

app/src/components/icons/DashboardIcon.tsx

@@ -253,3 +253,20 @@ export function LogoutIcon() {
     </svg>
   );
 }
+
+export function WifiIcon() {
+  return (
+    <svg
+      width="12"
+      height="12"
+      viewBox="0 0 12 12"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M6.78458 7.91952C6.35145 7.4864 5.64945 7.4864 5.21633 7.91952C4.7832 8.35265 4.7832 9.05465 5.21633 9.48777C5.64945 9.9209 6.35145 9.9209 6.78458 9.48777C7.2177 9.05465 7.2177 8.35265 6.78458 7.91952ZM9.7902 6.48215L8.67945 7.5929C7.20008 6.11352 4.8012 6.11352 3.32183 7.5929L2.21108 6.48215C4.30395 4.38927 7.69733 4.38927 9.7902 6.48215ZM10.574 5.69802C8.04795 3.17202 3.95258 3.17202 1.42658 5.69802L0.283203 4.55465C3.4407 1.39715 8.55983 1.39715 11.7173 4.55465L10.574 5.69802Z"
+        fill="white"
+      />
+    </svg>
+  );
+}

app/src/components/ui/features/RenameTooltip.tsx

@@ -4,7 +4,6 @@ import {
   useLeftData,
   useTopData,
 } from "../../../store/visualization/useZone3DWidgetStore";
-import { useRenameModeStore } from "../../../store/builder/store";
 
 type RenameTooltipProps = {
   name: string;
@@ -20,6 +19,7 @@ const RenameTooltip: React.FC<RenameTooltipProps> = ({ name, onSubmit }) => {
   const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
     onSubmit(value.trim());
+    echo.info(`Selected Object has been renamed to ${value.trim()}`);
     setTop(0);
     setLeft(0);
   };

app/src/components/ui/inputs/RenameInput.tsx

@@ -12,7 +12,12 @@ interface RenameInputProps {
   canEdit?: boolean;
 }
 
-const RenameInput: React.FC<RenameInputProps> = ({ value, onRename, checkDuplicate, canEdit = true }) => {
+const RenameInput: React.FC<RenameInputProps> = ({
+  value,
+  onRename,
+  checkDuplicate,
+  canEdit = true,
+}) => {
   const [isEditing, setIsEditing] = useState(false);
   const [text, setText] = useState(value);
   const [isDuplicate, setIsDuplicate] = useState(false);
@@ -36,10 +41,10 @@ const RenameInput: React.FC<RenameInputProps> = ({ value, onRename, checkDuplica
   };
 
   const handleBlur = () => {
-
-    if (isDuplicate) return
+    if (isDuplicate) return;
     setIsEditing(false);
     if (onRename && !isDuplicate) {
+      echo.info(`Selected Object has been renamed to ${text}`)
       onRename(text);
     }
   };
@@ -52,6 +57,7 @@ const RenameInput: React.FC<RenameInputProps> = ({ value, onRename, checkDuplica
     if (e.key === "Enter" && !isDuplicate) {
       setIsEditing(false);
       if (onRename) {
+        echo.info(`Selected Object has been renamed to ${text}`)
         onRename(text);
       }
     }
@@ -80,4 +86,4 @@ const RenameInput: React.FC<RenameInputProps> = ({ value, onRename, checkDuplica
     </>
   );
 };
-export default RenameInput
+export default RenameInput;

app/src/pages/Project.tsx

@@ -101,6 +101,7 @@ const Project: React.FC = () => {
     if (email) {
       const token = localStorage.getItem("token");
       const refreshToken = localStorage.getItem("refreshToken");
+      echo.warn('Validating token');
       if (token) {
         useSocketStore
           .getState()
@@ -110,7 +111,7 @@ const Project: React.FC = () => {
         setOrganization(organization);
         setUserName(userName);
       }
-      echo.success("Log in successful");
+      echo.success("Project initialized and loaded successfully");
     } else {
       navigate("/");
     }

app/src/services/simulation/products/renameProductApi.ts

@@ -25,6 +25,7 @@ export const renameProductApi = async (body: {
 
     if (!response.ok) {
       console.error("Failed to rename product");
+      echo.error("Failed to rename product");
     }
 
     const result = await response.json();
@@ -32,11 +33,11 @@ export const renameProductApi = async (body: {
     return result;
   } catch (error) {
     echo.error("Failed to rename product Api");
-
     if (error instanceof Error) {
       console.log(error.message);
     } else {
       console.log("An unknown error occurred");
+      echo.log("An unknown error occurred");
     }
   }
 };

app/src/styles/components/footer/_footer.scss

@@ -63,7 +63,7 @@
       }
 
       .bg-dummy.right-bottom {
-        right: 68px;
+        right: 84px;
         bottom: 0;
         width: 20%;
         height: 100%;
@@ -79,7 +79,8 @@
       }
 
       .logs-detail,
-      .version {
+      .version,
+      .wifi-connection {
         @include flex-center;
         border-radius: #{$border-radius-extra-large};
         padding: 3px 6px;
@@ -107,7 +108,28 @@
         }
       }
 
-      .version {
+      .wifi-connection {
+        .tooltip {
+          transform: translateX(-16px);
+          &::after {
+            left: 76%;
+          }
+        }
+        &:hover {
+          .tooltip {
+            opacity: 1;
+          }
+        }
+        &.connected svg path {
+          fill: #1ec018;
+        }
+        &.disconnected svg path {
+          fill: #e44405;
+        }
+      }
+
+      .version,
+      .wifi-connection {
         background: var(--background-color);
         font-size: var(--font-size-tiny);
 
@@ -179,7 +201,7 @@
       background: var(--background-color);
       border-radius: #{$border-radius-medium};
       outline: 1px solid var(--border-color);
-      &:hover{
+      &:hover {
         background: var(--background-color-solid);
       }
     }
@@ -288,7 +310,7 @@
             font-family: monospace;
             font-size: var(--font-size-tiny);
             color: var(--icon-default-color-active);
-            &:last-child{
+            &:last-child {
               background: var(--background-color-button);
             }
           }