changes to saved pinned apps

src/App.tsx

@@ -388,7 +388,7 @@ function App() {
 
   const qortalRequestCheckbox1Ref = useRef(null);
   useRetrieveDataLocalStorage();
-  useQortalGetSaveSettings(userInfo?.name);
+  useQortalGetSaveSettings(userInfo?.name, extState === "authenticated");
   const [fullScreen, setFullScreen] = useRecoilState(fullScreenAtom);
   const [isEnabledDevMode, setIsEnabledDevMode] =
     useRecoilState(enabledDevModeAtom);

src/atoms/global.ts

@@ -40,6 +40,10 @@ export const sortablePinnedAppsAtom = atom({
   {
     name: 'Q-Manager',
     service: 'APP'
+  },
+  {
+    name: 'Q-Blog',
+    service: 'APP'
   }
 ], 
 });

src/components/Apps/AppsDesktop.tsx

@@ -407,7 +407,7 @@ export const AppsDesktop = ({ mode, setMode, show , myName, goToHome, setDesktop
             />
      
         </ButtonBase> */}
-        <Save isDesktop disableWidth />
+        <Save isDesktop disableWidth myName={myName}/>
         {isEnabledDevMode && (
            <ButtonBase
            onClick={() => {

src/components/Apps/AppsDevMode.tsx

@@ -282,7 +282,7 @@ export const AppsDevMode = ({ mode, setMode, show , myName, goToHome, setDesktop
             />
     </IconWrapper>
         </ButtonBase>
-        <Save isDesktop disableWidth />
+        <Save isDesktop disableWidth myName={myName} />
         <ButtonBase
            onClick={() => {
              setDesktopViewMode('dev')

src/components/DesktopSideBar.tsx

@@ -11,7 +11,7 @@ import { useRecoilState } from 'recoil';
 import { enabledDevModeAtom } from '../atoms/global';
 import { AppsIcon } from '../assets/Icons/AppsIcon';
 
-export const DesktopSideBar = ({goToHome, setDesktopSideView, toggleSideViewDirects, hasUnreadDirects, isDirects, toggleSideViewGroups,hasUnreadGroups, isGroups, isApps, setDesktopViewMode, desktopViewMode }) => {
+export const DesktopSideBar = ({goToHome, setDesktopSideView, toggleSideViewDirects, hasUnreadDirects, isDirects, toggleSideViewGroups,hasUnreadGroups, isGroups, isApps, setDesktopViewMode, desktopViewMode, myName }) => {
     const [isEnabledDevMode, setIsEnabledDevMode] =  useRecoilState(enabledDevModeAtom)
 
   return (
@@ -98,7 +98,7 @@ export const DesktopSideBar = ({goToHome, setDesktopSideView, toggleSideViewDire
             />
      
         </ButtonBase> */}
-        <Save isDesktop disableWidth />
+        <Save isDesktop disableWidth myName={myName} />
         {/* <CoreSyncStatus imageSize="30px" position="left" /> */}
         {isEnabledDevMode && (
           <ButtonBase

src/components/Save/Save.tsx

@@ -9,14 +9,17 @@ import {
   settingsQDNLastUpdatedAtom,
   sortablePinnedAppsAtom,
 } from "../../atoms/global";
-import { ButtonBase } from "@mui/material";
+import { Box, ButtonBase, Popover, Typography } from "@mui/material";
 import { objectToBase64 } from "../../qdn/encryption/group-encryption";
 import { MyContext } from "../../App";
 import { getFee } from "../../background";
 import { CustomizedSnackbars } from "../Snackbar/Snackbar";
 import { SaveIcon } from "../../assets/svgs/SaveIcon";
 import { IconWrapper } from "../Desktop/DesktopFooter";
-export const Save = ({ isDesktop, disableWidth }) => {
+import { Spacer } from "../../common/Spacer";
+import { LoadingButton } from "@mui/lab";
+import { saveToLocalStorage } from "../Apps/AppsNavBar";
+export const Save = ({ isDesktop, disableWidth, myName }) => {
   const [pinnedApps, setPinnedApps] = useRecoilState(sortablePinnedAppsAtom);
   const [settingsQdnLastUpdated, setSettingsQdnLastUpdated] = useRecoilState(
     settingsQDNLastUpdatedAtom
@@ -31,7 +34,7 @@ export const Save = ({ isDesktop, disableWidth }) => {
   const [isLoading, setIsLoading] = useState(false);
   const [infoSnack, setInfoSnack] = useState(null);
   const [oldPinnedApps, setOldPinnedApps] = useRecoilState(oldPinnedAppsAtom);
-
+  const [anchorEl, setAnchorEl] = useState(null);
   const { show } = useContext(MyContext);
 
   const hasChanged = useMemo(() => {
@@ -83,9 +86,7 @@ export const Save = ({ isDesktop, disableWidth }) => {
           .sendMessage(
             "ENCRYPT_DATA",
             {
-            
+              data64,
-                data64,
-         
             },
             60000
           )
@@ -135,6 +136,7 @@ export const Save = ({ isDesktop, disableWidth }) => {
             message: "Sucessfully published to QDN",
           });
           setOpenSnack(true);
+          setAnchorEl(null)
         }
       }
     } catch (error) {
@@ -147,20 +149,31 @@ export const Save = ({ isDesktop, disableWidth }) => {
       setIsLoading(false);
     }
   };
+  const handlePopupClick = (event) => {
+    event.stopPropagation(); // Prevent parent onClick from firing
+    setAnchorEl(event.currentTarget);
+  };
+
+  const revertChanges = () => {
+    setPinnedApps(oldPinnedApps);
+    saveToLocalStorage("ext_saved_settings", "sortablePinnedApps", null);
+    setAnchorEl(null)
+  };
+
   return (
     <>
       <ButtonBase
-        onClick={saveToQdn}
+        onClick={handlePopupClick}
         disabled={
-          !hasChanged ||
+          // !hasChanged ||
-          !canSave ||
+          // !canSave ||
-          isLoading ||
+          isLoading 
-          settingsQdnLastUpdated === -100
+          // settingsQdnLastUpdated === -100
         }
       >
         {isDesktop ? (
           <IconWrapper
-          disableWidth={disableWidth}
+            disableWidth={disableWidth}
             color="rgba(250, 250, 250, 0.5)"
             label="Save"
             selected={false}
@@ -187,6 +200,204 @@ export const Save = ({ isDesktop, disableWidth }) => {
           />
         )}
       </ButtonBase>
+      <Popover
+        open={!!anchorEl}
+        anchorEl={anchorEl}
+        onClose={() => setAnchorEl(null)} // Close popover on click outside
+        anchorOrigin={{
+          vertical: "bottom",
+          horizontal: "center",
+        }}
+        transformOrigin={{
+          vertical: "top",
+          horizontal: "center",
+        }}
+        sx={{
+          width: "300px",
+          maxWidth: "90%",
+          maxHeight: "80%",
+          overflow: "auto",
+        }}
+      >
+        <Box
+          sx={{
+            padding: "15px",
+            display: "flex",
+            flexDirection: "column",
+            gap: 1,
+            width: '100%'
+          }}
+        >
+          {!myName ? (
+            <Box
+            sx={{
+              width: "100%",
+              display: "flex",
+              flexDirection: "column",
+              alignItems: "center",
+            }}
+          >
+            <Typography
+              sx={{
+                fontSize: "14px",
+              }}
+            >
+              You need a registered Qortal name to save your pinned apps to QDN.
+            </Typography>
+            </Box>
+          ) : (
+            <>
+               {hasChanged && (
+            <Box
+              sx={{
+                width: "100%",
+                display: "flex",
+                flexDirection: "column",
+                alignItems: "center",
+              }}
+            >
+              <Typography
+                sx={{
+                  fontSize: "14px",
+                }}
+              >
+                You have unsaved changes to your pinned apps. Save them to QDN.
+              </Typography>
+              <Spacer height="10px" />
+              <LoadingButton
+                sx={{
+                  backgroundColor: "var(--green)",
+                  color: "black",
+                  opacity: 0.7,
+                  "&:hover": {
+                    backgroundColor: "var(--green)",
+                    color: "black",
+                    opacity: 1,
+                  },
+                }}
+                size="small"
+                loading={isLoading}
+                onClick={saveToQdn}
+                variant="contained"
+              >
+                Save to QDN
+              </LoadingButton>
+              <Spacer height="20px" />
+              {!isNaN(settingsQdnLastUpdated) && settingsQdnLastUpdated > 0 && (
+                <>
+                  <Typography
+                    sx={{
+                      fontSize: "14px",
+                    }}
+                  >
+                    Don't like your current local changes? Would you like to
+                    reset to your saved QDN pinned apps?
+                  </Typography>
+                  <Spacer height="10px" />
+                  <LoadingButton
+                    size="small"
+                    loading={isLoading}
+                    onClick={revertChanges}
+                    variant="contained"
+                    sx={{
+                      backgroundColor: "var(--unread)",
+                      color: "black",
+                      opacity: 0.7,
+                      "&:hover": {
+                        backgroundColor: "var(--unread)",
+                        color: "black",
+                        opacity: 1,
+                      },
+                    }}
+                  >
+                    Revert to QDN
+                  </LoadingButton>
+                </>
+              )}
+              {!isNaN(settingsQdnLastUpdated) && settingsQdnLastUpdated === 0 && (
+                <>
+                  <Typography
+                    sx={{
+                      fontSize: "14px",
+                    }}
+                  >
+                    Don't like your current local changes? Would you like to
+                    reset to the default pinned apps?
+                  </Typography>
+                  <Spacer height="10px" />
+                  <LoadingButton
+                    loading={isLoading}
+                    onClick={revertChanges}
+                    variant="contained"
+                  >
+                    Revert to default
+                  </LoadingButton>
+                </>
+              )}
+            </Box>
+          )}
+          {!isNaN(settingsQdnLastUpdated) && settingsQdnLastUpdated === -100 && (
+            <Box
+              sx={{
+                width: "100%",
+                display: "flex",
+                flexDirection: "column",
+                alignItems: "center",
+              }}
+            >
+              <Typography
+                sx={{
+                  fontSize: "14px",
+                }}
+              >
+                The app was unable to download your existing QDN-saved pinned
+                apps. Would you like to overwrite those changes?
+              </Typography>
+              <Spacer height="10px" />
+              <LoadingButton
+                size="small"
+                loading={isLoading}
+                onClick={saveToQdn}
+                variant="contained"
+                sx={{
+                  backgroundColor: "var(--unread)",
+                  color: "black",
+                  opacity: 0.7,
+                  "&:hover": {
+                    backgroundColor: "var(--unread)",
+                    color: "black",
+                    opacity: 1,
+                  },
+                }}
+              >
+                Overwrite to QDN
+              </LoadingButton>
+            </Box>
+          )}
+           {!hasChanged && (
+            <Box
+              sx={{
+                width: "100%",
+                display: "flex",
+                flexDirection: "column",
+                alignItems: "center",
+              }}
+            >
+              <Typography
+                sx={{
+                  fontSize: "14px",
+                }}
+              >
+                You currently do not have any changes to your pinned apps
+              </Typography>
+              
+            </Box>
+          )}
+            </>
+          )}
+       
+        </Box>
+      </Popover>
       <CustomizedSnackbars
         duration={3500}
         open={openSnack}

src/useQortalGetSaveSettings.tsx

@@ -40,7 +40,6 @@ const getPublishRecord = async (myName) => {
       );
       data = await res.text();
     
-
     if(!data) throw new Error('Unable to fetch publish')
 
     const decryptedKey: any = await decryptResource(data);
@@ -53,7 +52,8 @@ const getPublishRecord = async (myName) => {
     }
   };
 
-export const useQortalGetSaveSettings = (myName) => {
+
+export const useQortalGetSaveSettings = (myName, isAuthenticated) => {
     const setSortablePinnedApps = useSetRecoilState(sortablePinnedAppsAtom);
     const setCanSave = useSetRecoilState(canSaveSettingToQdnAtom);
     const setSettingsQDNLastUpdated = useSetRecoilState(settingsQDNLastUpdatedAtom);
@@ -67,7 +67,7 @@ export const useQortalGetSaveSettings = (myName) => {
             const settings = await getPublish(myName)
             if(settings?.sortablePinnedApps && timestamp > settingsLocalLastUpdated){
                 setSortablePinnedApps(settings.sortablePinnedApps)
-              
+                
                 setSettingsQDNLastUpdated(timestamp || 0)
             } else if(settings?.sortablePinnedApps){
                 setSettingsQDNLastUpdated(timestamp || 0)
@@ -87,8 +87,8 @@ export const useQortalGetSaveSettings = (myName) => {
         }
     }, [])
     useEffect(()=> {
-        if(!myName || !settingsLocalLastUpdated) return
+        if(!myName || !settingsLocalLastUpdated || !isAuthenticated) return
         getSavedSettings(myName, settingsLocalLastUpdated)
-    }, [getSavedSettings, myName, settingsLocalLastUpdated])
+    }, [getSavedSettings, myName, settingsLocalLastUpdated, isAuthenticated])
  
 }

src/useRetrieveDataLocalStorage.tsx

@@ -23,8 +23,11 @@ export const useRetrieveDataLocalStorage = () => {
         const pinnedAppsLocal = fetchFromLocalStorage('ext_saved_settings')
         if(pinnedAppsLocal?.sortablePinnedApps){
             setSortablePinnedApps(pinnedAppsLocal?.sortablePinnedApps)
+            setSettingsLocalLastUpdated(pinnedAppsLocal?.timestamp || -1)
+        } else {
+            setSettingsLocalLastUpdated(-1)
         }
-        setSettingsLocalLastUpdated(pinnedAppsLocal?.timestamp || -1)
+      
     }, [])
     useEffect(()=> {