change save indicator

src/components/Save/Save.tsx

@@ -1,7 +1,7 @@
 import React, { useContext, useMemo, useState } from 'react'
 import { useRecoilState } from 'recoil';
 import isEqual from 'lodash/isEqual'; // Import deep comparison utility
-import { canSaveSettingToQdnAtom, sortablePinnedAppsAtom } from '../../atoms/global';
+import { canSaveSettingToQdnAtom, settingsLocalLastUpdatedAtom, settingsQDNLastUpdatedAtom, sortablePinnedAppsAtom } from '../../atoms/global';
 import { ButtonBase } from '@mui/material';
 import { objectToBase64 } from '../../qdn/encryption/group-encryption';
 import { MyContext } from '../../App';
@@ -10,12 +10,15 @@ import { CustomizedSnackbars } from '../Snackbar/Snackbar';
 import { SaveIcon } from '../../assets/svgs/SaveIcon';
 export const Save = () => {
     const [pinnedApps, setPinnedApps] = useRecoilState(sortablePinnedAppsAtom);
-    const [canSave, _] = useRecoilState(canSaveSettingToQdnAtom);
+    const [settingsQdnLastUpdated, setSettingsQdnLastUpdated] = useRecoilState(settingsQDNLastUpdatedAtom);
+    const [settingsLocalLastUpdated] = useRecoilState(settingsLocalLastUpdatedAtom);
+
+    const [canSave] = useRecoilState(canSaveSettingToQdnAtom);
     const [openSnack, setOpenSnack] = useState(false);
     const [isLoading, setIsLoading] = useState(false)
   const [infoSnack, setInfoSnack] = useState(null);
     const [oldPinnedApps, setOldPinnedApps] = useState(pinnedApps)
-    console.log('oldpin', {oldPinnedApps, pinnedApps})
+    console.log('oldpin', {oldPinnedApps, pinnedApps}, settingsQdnLastUpdated,  settingsLocalLastUpdated, settingsQdnLastUpdated < settingsLocalLastUpdated,)
     const { show } = useContext(MyContext);
 
     const hasChanged = useMemo(()=> {
@@ -35,14 +38,21 @@ export const Save = () => {
           }
         })
       }
-        return !isEqual(oldChanges, newChanges)
-    }, [oldPinnedApps, pinnedApps])
+      console.log('!isEqual(oldChanges, newChanges)', !isEqual(oldChanges, newChanges))
+      if(settingsQdnLastUpdated === -100) return false
+        return !isEqual(oldChanges, newChanges) || settingsQdnLastUpdated < settingsLocalLastUpdated
+    }, [oldPinnedApps, pinnedApps, settingsQdnLastUpdated,  settingsLocalLastUpdated])
 
     const saveToQdn = async ()=> {
       try {
         setIsLoading(true)
         const data64 = await objectToBase64({
-          sortablePinnedApps: pinnedApps
+          sortablePinnedApps: pinnedApps.map((item)=> {
+            return {
+              name: item?.name,
+              service: item?.service
+            }
+          })
         })
         const encryptData = await new Promise((res, rej) => {
           chrome?.runtime?.sendMessage(
@@ -95,6 +105,7 @@ export const Save = () => {
           console.log('saved', response)
           if(response?.identifier){
             setOldPinnedApps(pinnedApps)
+            setSettingsQdnLastUpdated(Date.now())
             setInfoSnack({
               type: "success",
               message:
@@ -115,11 +126,12 @@ export const Save = () => {
         setIsLoading(false)
       }
     }
+    console.log('settingsQdnLastUpdated', settingsQdnLastUpdated)
   return (
     <>
-    <ButtonBase  onClick={saveToQdn} disabled={!hasChanged || !canSave || isLoading}>
+    <ButtonBase  onClick={saveToQdn} disabled={!hasChanged || !canSave || isLoading || settingsQdnLastUpdated === -100}>
       <SaveIcon
-        color={(hasChanged && !isLoading) ? '#5EB049' : '#8F8F91'}
+        color={settingsQdnLastUpdated === -100 ? '#8F8F91' : (hasChanged && !isLoading) ? '#5EB049' : '#8F8F91'}
        />
       </ButtonBase>
      <CustomizedSnackbars