slice-machine-ui 1.23.2-alpha.xru-auto-sync-provider.10 → 1.23.2-beta.10

package/components/ChangesEmptyState/OfflinePage.tsx

@@ -28,7 +28,7 @@ export const OfflinePage = () => {
         <Text
           sx={{ fontSize: "13px", lineHeight: "24px", textAlign: "center" }}
         >
-          Connect to the internet to sync your changes.
+          You need a stable internet connection to review and push changes
         </Text>
       </Flex>
     </Flex>

package/components/ChangesItems/ChangesItems.tsx

@@ -6,23 +6,19 @@ import { ChangesSectionHeader } from "@components/ChangesSectionHeader";
 import { CustomTypeTable } from "@components/CustomTypeTable/changesPage";
 import Grid from "@components/Grid";
 import { ComponentUI } from "@lib/models/common/ComponentUI";
+import { ModelStatusInformation } from "@src/hooks/useModelStatus";
 import ScreenshotChangesModal from "@components/ScreenshotChangesModal";
 import { countMissingScreenshots } from "@src/domain/slice";
 import { useScreenshotChangesModal } from "@src/hooks/useScreenshotChangesModal";
 import { ModelStatus } from "@lib/models/common/ModelStatus";
 import { LocalOrRemoteCustomType } from "@lib/models/common/ModelData";
 import { SharedSliceCard } from "@src/features/slices/sliceCards/SharedSliceCard";
-import { AuthStatus } from "@src/modules/userContext/types";
-import { ModelsStatuses } from "@src/features/sync/getUnSyncChanges";
 
 import { DevCollaborationExperiment } from "./DevCollaborationExperiment";
 
-interface ChangesItemsProps {
+interface ChangesItemsProps extends ModelStatusInformation {
   unSyncedCustomTypes: LocalOrRemoteCustomType[];
   unSyncedSlices: ComponentUI[];
-  modelsStatuses: ModelsStatuses;
-  authStatus: AuthStatus;
-  isOnline: boolean;
 }
 
 export const ChangesItems: React.FC<ChangesItemsProps> = ({

package/components/CustomTypeTable/changesPage.tsx

@@ -1,6 +1,7 @@
 import Link from "next/link";
 import React from "react";
 import { Box, Text } from "theme-ui";
+import { ModelStatusInformation } from "@src/hooks/useModelStatus";
 import { CustomTypeSM } from "@lib/models/common/CustomType";
 import { ModelStatus } from "@lib/models/common/ModelStatus";
 import {
@@ -9,26 +10,18 @@ import {
 } from "@lib/models/common/ModelData";
 import { StatusBadge } from "@src/features/changes/StatusBadge";
 import { CUSTOM_TYPES_CONFIG } from "@src/features/customTypes/customTypesConfig";
-import { AuthStatus } from "@src/modules/userContext/types";
-import { ModelsStatuses } from "@src/features/sync/getUnSyncChanges";
 
-interface CustomTypeTableProps {
+interface CustomTypeTableProps extends ModelStatusInformation {
   customTypes: LocalOrRemoteCustomType[];
-  modelsStatuses: ModelsStatuses;
-  authStatus: AuthStatus;
-  isOnline: boolean;
 }
 
 const firstColumnWidth = "40%";
 const secondColumnWidth = "40%";
 const thirdColumnWidth = "20%";
 
-const CustomTypeChangeRow: React.FC<{
-  ct: CustomTypeSM;
-  status: ModelStatus;
-  authStatus: AuthStatus;
-  isOnline: boolean;
-}> = ({ ct, status, authStatus, isOnline }) => {
+const CustomTypeChangeRow: React.FC<
+  { ct: CustomTypeSM; status: ModelStatus } & ModelStatusInformation
+> = ({ ct, status, authStatus, isOnline }) => {
   return (
     <>
       <Box as={"td"} style={{ width: firstColumnWidth }}>
@@ -87,6 +80,7 @@ export const CustomTypeTable: React.FC<CustomTypeTableProps> = ({
                   status={modelsStatuses.customTypes[customType.local.id]}
                   authStatus={authStatus}
                   isOnline={isOnline}
+                  modelsStatuses={modelsStatuses}
                   key={customType.local.id}
                 />
               </tr>
@@ -103,6 +97,7 @@ export const CustomTypeTable: React.FC<CustomTypeTableProps> = ({
                 status={modelsStatuses.customTypes[customType.remote.id]}
                 authStatus={authStatus}
                 isOnline={isOnline}
+                modelsStatuses={modelsStatuses}
                 key={customType.remote.id}
               />
             </tr>

package/components/DeleteSliceModal/index.tsx

@@ -7,7 +7,6 @@ import useSliceMachineActions from "@src/modules/useSliceMachineActions";
 import Card from "@components/Card";
 import { Button } from "@components/Button";
 import { deleteSlice } from "@src/features/slices/actions/deleteSlice";
-import { useAutoSync } from "@src/features/sync/AutoSyncProvider";
 
 type DeleteSliceModalProps = {
   isOpen: boolean;
@@ -22,7 +21,6 @@ export const DeleteSliceModal: React.FunctionComponent<
 > = ({ sliceId, sliceName, libName, isOpen, onClose }) => {
   const [isDeleting, setIsDeleting] = useState(false);
   const { deleteSliceSuccess } = useSliceMachineActions();
-  const { syncChanges } = useAutoSync();
   const { theme } = useThemeUI();
 
   const onDelete = async () => {
@@ -34,7 +32,6 @@ export const DeleteSliceModal: React.FunctionComponent<
       libraryID: libName,
       onSuccess: () => {
         deleteSliceSuccess(sliceId, libName);
-        syncChanges();
       },
     });
 

package/components/Forms/CreateCustomTypeModal/CreateCustomTypeModal.tsx

@@ -21,7 +21,6 @@ import {
 } from "@src/features/customTypes/actions/createCustomType";
 import { CUSTOM_TYPES_CONFIG } from "@src/features/customTypes/customTypesConfig";
 import { getFormat } from "@src/domain/customType";
-import { useAutoSync } from "@src/features/sync/AutoSyncProvider";
 
 import { InputBox } from "../components/InputBox";
 import { SelectRepeatable } from "../components/SelectRepeatable";
@@ -59,7 +58,6 @@ export const CreateCustomTypeModal: React.FC<CreateCustomTypeModalProps> = ({
   );
   const customTypesMessages = CUSTOM_TYPES_MESSAGES[format];
   const [isIdFieldPristine, setIsIdFieldPristine] = useState(true);
-  const { syncChanges } = useAutoSync();
   const router = useRouter();
 
   const onSubmit = async ({ id, label, repeatable }: FormValues) => {
@@ -88,8 +86,6 @@ export const CreateCustomTypeModal: React.FC<CreateCustomTypeModalProps> = ({
                 }
               : undefined,
         });
-
-        syncChanges();
       },
     });
 

package/components/Forms/CreateSliceModal/CreateSliceModal.tsx

@@ -9,7 +9,6 @@ import ModalFormCard from "@components/ModalFormCard";
 import { createSlice } from "@src/features/slices/actions/createSlice";
 import useSliceMachineActions from "@src/modules/useSliceMachineActions";
 import { getState } from "@src/apiClient";
-import { useAutoSync } from "@src/features/sync/AutoSyncProvider";
 
 import { validateSliceModalValues } from "../formsValidator";
 import { InputBox } from "../components/InputBox";
@@ -31,7 +30,6 @@ export const CreateSliceModal: FC<CreateSliceModalProps> = ({
 }) => {
   const { createSliceSuccess } = useSliceMachineActions();
   const [isCreatingSlice, setIsCreatingSlice] = useState(false);
-  const { syncChanges } = useAutoSync();
 
   const onSubmit = async (values: FormValues) => {
     const sliceName = values.sliceName;
@@ -47,8 +45,8 @@ export const CreateSliceModal: FC<CreateSliceModalProps> = ({
         const serverState = await getState();
         // Update Redux store
         createSliceSuccess(serverState.libraries);
+
         onSuccess(newSlice, libraryName);
-        syncChanges();
       },
     });
   };

package/components/Forms/RenameCustomTypeModal/RenameCustomTypeModal.tsx

@@ -13,7 +13,6 @@ import { CustomTypeFormat } from "@slicemachine/manager";
 import { CUSTOM_TYPES_MESSAGES } from "@src/features/customTypes/customTypesMessages";
 
 import { renameCustomType } from "@src/features/customTypes/actions/renameCustomType";
-import { useAutoSync } from "@src/features/sync/AutoSyncProvider";
 
 interface RenameCustomTypeModalProps {
   isChangesLocal: boolean;
@@ -33,7 +32,6 @@ export const RenameCustomTypeModal: React.FC<RenameCustomTypeModalProps> = ({
   const customTypeName = customType?.label ?? "";
   const customTypeId = customType?.id ?? "";
   const { renameCustomTypeSuccess } = useSliceMachineActions();
-  const { syncChanges } = useAutoSync();
 
   const [isRenaming, setIsRenaming] = useState(false);
 
@@ -48,10 +46,7 @@ export const RenameCustomTypeModal: React.FC<RenameCustomTypeModalProps> = ({
       await renameCustomType({
         model: customType,
         newLabel: values.customTypeName,
-        onSuccess: (renamedCustomType) => {
-          renameCustomTypeSuccess(renamedCustomType);
-          syncChanges();
-        },
+        onSuccess: renameCustomTypeSuccess,
       });
     }
     setIsRenaming(false);

package/components/Forms/RenameSliceModal/RenameSliceModal.tsx

@@ -6,7 +6,6 @@ import { SliceMachineStoreType } from "@src/redux/type";
 import { getLibraries, getRemoteSlices } from "@src/modules/slices";
 import { ComponentUI } from "@lib/models/common/ComponentUI";
 import { renameSlice } from "@src/features/slices/actions/renameSlice";
-import { useAutoSync } from "@src/features/sync/AutoSyncProvider";
 
 import { InputBox } from "../components/InputBox";
 import ModalFormCard from "../../ModalFormCard";
@@ -25,7 +24,6 @@ export const RenameSliceModal: React.FC<RenameSliceModalProps> = ({
   onClose,
 }) => {
   const { renameSliceSuccess } = useSliceMachineActions();
-  const { syncChanges } = useAutoSync();
   const { localLibs, remoteLibs } = useSelector(
     (store: SliceMachineStoreType) => ({
       localLibs: getLibraries(store),
@@ -41,7 +39,6 @@ export const RenameSliceModal: React.FC<RenameSliceModalProps> = ({
         newSliceName: values.sliceName,
         onSuccess: (renamedSlice) => {
           renameSliceSuccess(renamedSlice.from, renamedSlice.model);
-          syncChanges();
         },
       });
 

package/components/LoginModal/index.tsx

@@ -11,7 +11,7 @@ import {
   Text,
 } from "theme-ui";
 import SliceMachineModal from "@components/SliceMachineModal";
-import { checkAuthStatus, getState, startAuth } from "@src/apiClient";
+import { checkAuthStatus, startAuth } from "@src/apiClient";
 import { buildEndpoints } from "@lib/prismic/endpoints";
 import { startPolling } from "@lib/utils/poll";
 import { CheckAuthStatusResponse } from "@models/common/Auth";
@@ -25,12 +25,6 @@ import { getEnvironment } from "@src/modules/environment";
 import useSliceMachineActions from "@src/modules/useSliceMachineActions";
 import preferWroomBase from "@lib/utils/preferWroomBase";
 import { ToasterType } from "@src/modules/toaster";
-import { getUnSyncedChanges } from "@src/features/sync/getUnSyncChanges";
-import { normalizeFrontendCustomTypes } from "@lib/models/common/normalizers/customType";
-import { normalizeFrontendSlices } from "@lib/models/common/normalizers/slices";
-import { AuthStatus } from "@src/modules/userContext/types";
-import { useAutoSync } from "@src/features/sync/AutoSyncProvider";
-import { getActiveEnvironment } from "@src/features/environments/actions/getActiveEnvironment";
 
 interface ValidAuthStatus extends CheckAuthStatusResponse {
   status: "ok";
@@ -48,7 +42,7 @@ const LoginModal: React.FunctionComponent = () => {
       env: getEnvironment(store),
     }),
   );
-  const { syncChanges } = useAutoSync();
+
   const { closeModals, startLoadingLogin, stopLoadingLogin, openToaster } =
     useSliceMachineActions();
 
@@ -78,38 +72,6 @@ const LoginModal: React.FunctionComponent = () => {
       openToaster("Logged in", ToasterType.SUCCESS);
       stopLoadingLogin();
       closeModals();
-
-      const serverState = await getState();
-      const slices = normalizeFrontendSlices(
-        serverState.libraries,
-        serverState.remoteSlices,
-      );
-      const customTypes = Object.values(
-        normalizeFrontendCustomTypes(
-          serverState.customTypes,
-          serverState.remoteCustomTypes,
-        ),
-      );
-      const { changedCustomTypes, changedSlices } = getUnSyncedChanges({
-        authStatus: AuthStatus.AUTHORIZED,
-        customTypes,
-        isOnline: true,
-        libraries: serverState.libraries,
-        slices,
-      });
-      const { activeEnvironment } = await getActiveEnvironment();
-
-      if (
-        activeEnvironment?.kind === "dev" &&
-        (changedCustomTypes.length > 0 || changedSlices.length > 0)
-      ) {
-        syncChanges({
-          environment: activeEnvironment,
-          loggedIn: true,
-          changedCustomTypes,
-          changedSlices,
-        });
-      }
     } catch (e) {
       stopLoadingLogin();
       openToaster("Login failed", ToasterType.ERROR);

package/components/Navigation/ChangesListItem.tsx

@@ -0,0 +1,74 @@
+import { type FC } from "react";
+import Link from "next/link";
+import { useRouter } from "next/router";
+
+import { SideNavLink, SideNavListItem } from "@src/components/SideNav";
+import { RadarIcon } from "@src/icons/RadarIcon";
+import {
+  HoverCard,
+  HoverCardCloseButton,
+  HoverCardDescription,
+  HoverCardMedia,
+  HoverCardTitle,
+} from "@src/components/HoverCard";
+import useSliceMachineActions from "@src/modules/useSliceMachineActions";
+
+import { ChangesRightElement } from "./ChangesRightElement";
+
+export const ChangesListItem: FC = () => {
+  const { setSeenChangesToolTip } = useSliceMachineActions();
+  const open = useOpenChangesHoverCard();
+  const router = useRouter();
+
+  const onClose = () => {
+    setSeenChangesToolTip();
+  };
+
+  return (
+    <HoverCard
+      open={open}
+      openDelay={3000}
+      onClose={onClose}
+      side="right"
+      sideOffset={24}
+      collisionPadding={280}
+      trigger={
+        <SideNavListItem>
+          <SideNavLink
+            title="Changes"
+            href="/changes"
+            active={router.asPath.startsWith("/changes")}
+            component={Link}
+            Icon={RadarIcon}
+            RightElement={<ChangesRightElement />}
+          />
+        </SideNavListItem>
+      }
+    >
+      <HoverCardTitle>Push your changes</HoverCardTitle>
+      <HoverCardMedia component="image" src="/push.png" />
+      <HoverCardDescription>
+        When you click Save, your changes are saved locally. Then, you can push
+        your models to Prismic from the Changes page.
+      </HoverCardDescription>
+      <HoverCardCloseButton>Got it</HoverCardCloseButton>
+    </HoverCard>
+  );
+};
+
+// TODO(DT-1925): Reactivate this feature
+const useOpenChangesHoverCard = () => {
+  // const { hasSeenChangesToolTip, hasSeenSimulatorToolTip } = useSelector(
+  //   (store: SliceMachineStoreType) => ({
+  //     hasSeenChangesToolTip: userHasSeenChangesToolTip(store),
+  //     hasSeenSimulatorToolTip: userHasSeenSimulatorToolTip(store),
+  //   }),
+  // );
+
+  // return (
+  //   !hasSeenChangesToolTip &&
+  //   hasSeenSimulatorToolTip
+  // );
+
+  return false;
+};

package/components/Navigation/ChangesRightElement.tsx

@@ -0,0 +1,33 @@
+import { FC } from "react";
+
+import { useUnSyncChanges } from "@src/hooks/useUnSyncChanges";
+import { RightElement } from "@src/components/SideNav/SideNav";
+import { AuthStatus } from "@src/modules/userContext/types";
+import { useNetwork } from "@src/hooks/useNetwork";
+
+export const ChangesRightElement: FC = () => {
+  const isOnline = useNetwork();
+  const { unSyncedSlices, unSyncedCustomTypes, authStatus } =
+    useUnSyncChanges();
+  const numberOfChanges = unSyncedSlices.length + unSyncedCustomTypes.length;
+
+  if (
+    !isOnline ||
+    authStatus === AuthStatus.UNAUTHORIZED ||
+    authStatus === AuthStatus.FORBIDDEN
+  ) {
+    return <RightElement>Logged out</RightElement>;
+  }
+
+  if (numberOfChanges === 0) {
+    return null;
+  }
+
+  const formattedNumberOfChanges = numberOfChanges > 9 ? "+9" : numberOfChanges;
+
+  return (
+    <RightElement type="pill" data-cy="changes-number">
+      {formattedNumberOfChanges}
+    </RightElement>
+  );
+};

package/components/Navigation/Environment.tsx

@@ -1,40 +1,25 @@
-import { useState } from "react";
 import {
   Environment as EnvironmentType,
   isUnauthenticatedError,
   isUnauthorizedError,
 } from "@slicemachine/manager/client";
 
-import { getState, telemetry } from "@src/apiClient";
+import { telemetry } from "@src/apiClient";
 import { useEnvironments } from "@src/features/environments/useEnvironments";
 import { setEnvironment } from "@src/features/environments/actions/setEnvironment";
 import { useActiveEnvironment } from "@src/features/environments/useActiveEnvironment";
+import { getLegacySliceMachineState } from "@src/features/legacyState/actions/getLegacySliceMachineState";
 import useSliceMachineActions from "@src/modules/useSliceMachineActions";
 import { SideNavEnvironmentSelector } from "@src/components/SideNav";
 import { useNetwork } from "@src/hooks/useNetwork";
-import { useAutoSync } from "@src/features/sync/AutoSyncProvider";
-import { normalizeFrontendSlices } from "@lib/models/common/normalizers/slices";
-import { normalizeFrontendCustomTypes } from "@lib/models/common/normalizers/customType";
-import { getUnSyncedChanges } from "@src/features/sync/getUnSyncChanges";
-import { useAuthStatus } from "@src/hooks/useAuthStatus";
 
 export function Environment() {
   const { environments, error: useEnvironmentsError } = useEnvironments();
   const { activeEnvironment } = useActiveEnvironment();
   const { refreshState, openLoginModal } = useSliceMachineActions();
-  const { syncChanges } = useAutoSync();
   const isOnline = useNetwork();
-  const authStatus = useAuthStatus();
-  const [isSwitchingEnv, setIsSwitchingEnv] = useState(false);
-  const { autoSyncStatus } = useAutoSync();
 
   async function onSelect(environment: EnvironmentType) {
-    if (activeEnvironment?.name === environment.name) {
-      return;
-    }
-
-    setIsSwitchingEnv(true);
-
     void telemetry.track({
       event: "environment:switch",
       domain: environment.domain,
@@ -42,39 +27,9 @@ export function Environment() {
 
     await setEnvironment(environment);
 
-    const serverState = await getState();
-    refreshState(serverState);
-
-    const slices = normalizeFrontendSlices(
-      serverState.libraries,
-      serverState.remoteSlices,
-    );
-    const customTypes = Object.values(
-      normalizeFrontendCustomTypes(
-        serverState.customTypes,
-        serverState.remoteCustomTypes,
-      ),
-    );
-    const { changedCustomTypes, changedSlices } = getUnSyncedChanges({
-      authStatus,
-      customTypes,
-      isOnline,
-      libraries: serverState.libraries,
-      slices,
-    });
-
-    if (
-      environment.kind === "dev" &&
-      (changedCustomTypes.length > 0 || changedSlices.length > 0)
-    ) {
-      syncChanges({
-        environment,
-        changedCustomTypes,
-        changedSlices,
-      });
-    }
+    const legacySliceMachineState = await getLegacySliceMachineState();
 
-    setIsSwitchingEnv(false);
+    refreshState(legacySliceMachineState);
   }
 
   if (!isOnline) {
@@ -87,8 +42,6 @@ export function Environment() {
         environments={environments}
         activeEnvironment={activeEnvironment}
         onSelect={onSelect}
-        disabled={isSwitchingEnv || autoSyncStatus === "syncing"}
-        loading={isSwitchingEnv}
       />
     );
   }

package/components/Navigation/index.css.ts

@@ -1,5 +1,6 @@
 import { sprinkles } from "@prismicio/editor-ui";
 
 export const environmentDivider = sprinkles({
-  marginBlock: 16,
+  marginTop: 16,
+  marginBottom: 32,
 });

package/components/Navigation/index.test.tsx

@@ -131,8 +131,10 @@ describe("Side Navigation", () => {
   test.skip.each([
     ["Page types", "/"],
     ["Custom types", "/custom-types"],
-    ["Slices", "/slices"],
+    ["Changes", "/changes"],
+
     ["Changelog", "/changelog"],
+    ["Slices", "/slices"],
     // TODO: once we have a plan fo how to display individual libraries change this
     // ["Slices/a", "/slices#slices/a"],
     // ["Slices/b", "/slices#slices/b"]
@@ -154,17 +156,95 @@ describe("Side Navigation", () => {
     },
   );
 
-  test("should display the number of changes on the 'Review changes' item", async () => {
+  test("should display the number of changes on the 'Changes' item", async () => {
     renderSideNavigation({ canUpdate: true, hasChanges: true });
 
-    expect(await screen.findByText("Review changes")).toBeVisible();
+    expect(await screen.findByText("Changes")).toBeVisible();
     const changesItem = screen
-      .getByText("Review changes")
-      .closest("button") as HTMLButtonElement;
+      .getByText("Changes")
+      .closest("a") as HTMLAnchorElement;
 
     expect(within(changesItem).getByText("1")).toBeVisible();
   });
 
+  test("should not display the number of changes or 'Disconnect' on the 'Changes' item", async () => {
+    renderSideNavigation({ canUpdate: true, hasChanges: false });
+
+    expect(await screen.findByText("Changes")).toBeVisible();
+    const changesItem = screen
+      .getByText("Changes")
+      .closest("a") as HTMLAnchorElement;
+
+    expect(within(changesItem).queryByText("1")).not.toBeInTheDocument();
+    expect(
+      within(changesItem).queryByText("Logged out"),
+    ).not.toBeInTheDocument();
+  });
+
+  test("should display the information that user is disconnected on the 'Changes' item when unauthorized", async () => {
+    renderSideNavigation({
+      canUpdate: true,
+      hasChanges: true,
+      authStatus: AuthStatus.UNAUTHORIZED,
+    });
+
+    expect(await screen.findByText("Changes")).toBeVisible();
+    const changesItem = screen
+      .getByText("Changes")
+      .closest("a") as HTMLAnchorElement;
+
+    expect(within(changesItem).getByText("Logged out")).toBeVisible();
+  });
+
+  test("should display the information that user is disconnected on the 'Changes' item when forbidden", async () => {
+    renderSideNavigation({
+      canUpdate: true,
+      hasChanges: true,
+      authStatus: AuthStatus.FORBIDDEN,
+    });
+
+    expect(await screen.findByText("Changes")).toBeVisible();
+    const changesItem = screen
+      .getByText("Changes")
+      .closest("a") as HTMLAnchorElement;
+
+    expect(within(changesItem).getByText("Logged out")).toBeVisible();
+  });
+
+  test("should display the information that user is disconnected on the 'Changes' item when offline", async () => {
+    vi.spyOn(navigator, "onLine", "get").mockReturnValueOnce(false);
+
+    renderSideNavigation({
+      canUpdate: true,
+      hasChanges: true,
+    });
+
+    expect(await screen.findByText("Changes")).toBeVisible();
+    const changesItem = screen
+      .getByText("Changes")
+      .closest("a") as HTMLAnchorElement;
+
+    expect(within(changesItem).getByText("Logged out")).toBeVisible();
+  });
+
+  test("should not display the information that user is disconnected when user is online", async () => {
+    vi.spyOn(navigator, "onLine", "get").mockReturnValueOnce(true);
+
+    renderSideNavigation({
+      canUpdate: true,
+      hasChanges: true,
+    });
+
+    expect(await screen.findByText("Changes")).toBeVisible();
+    const changesItem = screen
+      .getByText("Changes")
+      .closest("a") as HTMLAnchorElement;
+
+    expect(
+      within(changesItem).queryByText("Logged out"),
+    ).not.toBeInTheDocument();
+  });
+
   test("Video Item with next", async (ctx) => {
     const adapter = createTestPlugin({
       meta: {

package/components/Navigation/index.tsx

@@ -11,6 +11,7 @@ import { MathPlusIcon } from "@src/icons/MathPlusIcon";
 import { SettingsIcon } from "@src/icons/SettingsIcon";
 import { CUSTOM_TYPES_CONFIG } from "@src/features/customTypes/customTypesConfig";
 import {
+  SideNavSeparator,
   SideNavLink,
   SideNavListItem,
   SideNavList,
@@ -29,7 +30,7 @@ import { CUSTOM_TYPES_MESSAGES } from "@src/features/customTypes/customTypesMess
 import { useGitIntegrationExperiment } from "@src/features/settings/git/useGitIntegrationExperiment";
 import { useRepositoryInformation } from "@src/hooks/useRepositoryInformation";
 
-import { ChangesItem } from "./ChangesItem";
+import { ChangesListItem } from "./ChangesListItem";
 import { Environment } from "./Environment";
 
 import * as styles from "./index.css";
@@ -75,8 +76,6 @@ const Navigation: FC = () => {
         href={repositoryUrl}
       />
 
-      <ChangesItem />
-
       <SideNavList>
         <SideNavListItem>
           <SideNavLink
@@ -108,6 +107,12 @@ const Navigation: FC = () => {
           />
         </SideNavListItem>
 
+        <SideNavSeparator />
+
+        <ChangesListItem />
+
+        <SideNavSeparator />
+
         <SideNavListItem>
           <SideNavLink
             title="Slices"

package/lib/builders/SliceBuilder/index.tsx

@@ -21,7 +21,7 @@ import { useSliceState } from "@src/features/slices/sliceBuilder/SliceBuilderPro
 import { AutoSaveStatusIndicator } from "@src/features/autoSave/AutoSaveStatusIndicator";
 
 export const SliceBuilder: FC = () => {
-  const { slice, actionQueueStatus } = useSliceState();
+  const { slice, autoSaveStatus } = useSliceState();
 
   const isSimulatorAvailableForFramework = useSelector(
     selectIsSimulatorAvailableForFramework,
@@ -33,10 +33,10 @@ export const SliceBuilder: FC = () => {
         <AppLayoutBackButton url="/slices" />
         <AppLayoutBreadcrumb folder="Slices" page={slice.model.name} />
         <AppLayoutActions>
-          <AutoSaveStatusIndicator status={actionQueueStatus} />
+          <AutoSaveStatusIndicator status={autoSaveStatus} />
           <SimulatorButton
             isSimulatorAvailableForFramework={isSimulatorAvailableForFramework}
-            disabled={actionQueueStatus !== "done"}
+            disabled={autoSaveStatus !== "saved"}
           />
         </AppLayoutActions>
       </AppLayoutHeader>