- 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;