From 897f7f2ff9cf4f71fcdce7e96d0dffd3eb093b46 Mon Sep 17 00:00:00 2001
From: Hetu Nandu <hetunandu@gmail.com>
Date: Tue, 24 Dec 2024 11:08:09 +0530
Subject: [PATCH 1/9] chore: Remove announcement after action redesign

---
 .../Editor/IDE/EditorPane/components/Announcement.tsx | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/app/client/src/pages/Editor/IDE/EditorPane/components/Announcement.tsx b/app/client/src/pages/Editor/IDE/EditorPane/components/Announcement.tsx
index 354a70a481a..54181cab50b 100644
--- a/app/client/src/pages/Editor/IDE/EditorPane/components/Announcement.tsx
+++ b/app/client/src/pages/Editor/IDE/EditorPane/components/Announcement.tsx
@@ -4,6 +4,8 @@ import localStorage, { LOCAL_STORAGE_KEYS } from "utils/localStorage";
 import { SPLITPANE_ANNOUNCEMENT, createMessage } from "ee/constants/messages";
 import { getAssetUrl } from "ee/utils/airgapHelpers";
 import { ASSETS_CDN_URL } from "constants/ThirdPartyConstants";
+import { useFeatureFlag } from "utils/hooks/useFeatureFlag";
+import { FEATURE_FLAG } from "ee/entities/FeatureFlag";
 
 const Announcement = () => {
   const localStorageFlag =
@@ -22,6 +24,10 @@ const Announcement = () => {
     );
   };
 
+  const featureIsOutOfBeta = useFeatureFlag(
+    FEATURE_FLAG.release_actions_redesign_enabled,
+  );
+
   const modalFooter = () => (
     <>
       <Button
@@ -38,6 +44,11 @@ const Announcement = () => {
     </>
   );
 
+  // If the feature is out of beta, don't show the announcement
+  if (featureIsOutOfBeta) {
+    return null;
+  }
+
   return (
     <AnnouncementModal
       banner={getAssetUrl(`${ASSETS_CDN_URL}/splitpane-banner.svg`)}

From 559613ddbfdaecc1af01b83f7598091b3d17bff4 Mon Sep 17 00:00:00 2001
From: Hetu Nandu <hetunandu@gmail.com>
Date: Tue, 24 Dec 2024 15:39:46 +0530
Subject: [PATCH 2/9] Exp: Nudge using popover

---
 .../IDE/EditorTabs/ScreenModeToggle.tsx       | 76 ++++++++++++++++++-
 1 file changed, 74 insertions(+), 2 deletions(-)

diff --git a/app/client/src/pages/Editor/IDE/EditorTabs/ScreenModeToggle.tsx b/app/client/src/pages/Editor/IDE/EditorTabs/ScreenModeToggle.tsx
index f5f6a01bb5e..0860537936f 100644
--- a/app/client/src/pages/Editor/IDE/EditorTabs/ScreenModeToggle.tsx
+++ b/app/client/src/pages/Editor/IDE/EditorTabs/ScreenModeToggle.tsx
@@ -1,6 +1,15 @@
-import React, { useCallback } from "react";
+import React, { useCallback, useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
-import { Button, Tooltip } from "@appsmith/ads";
+import {
+  Button,
+  Flex,
+  Icon,
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+  Text,
+  Tooltip,
+} from "@appsmith/ads";
 
 import { getIDEViewMode } from "selectors/ideSelectors";
 import { EditorViewMode } from "ee/entities/IDE/constants";
@@ -14,6 +23,33 @@ import { setIdeEditorViewMode } from "actions/ideActions";
 import type { AppState } from "ee/reducers";
 import { selectFeatureFlagCheck } from "ee/selectors/featureFlagsSelectors";
 import { FEATURE_FLAG } from "ee/entities/FeatureFlag";
+import styled from "styled-components";
+
+const StyledPopoverContent = styled(PopoverContent)`
+  background: var(--ads-v2-color-bg-emphasis-max);
+  box-shadow: 0 1px 20px 0 #4c56641c;
+  border: none;
+`;
+
+const FocusButton = styled(Button)`
+  border: 2px solid #8bb0fa !important;
+`;
+
+const CloseIcon = styled(Icon)`
+  svg {
+    path {
+      fill: #ffffff;
+    }
+  }
+
+  padding: var(--ads-v2-spaces-2);
+  cursor: pointer;
+  border-radius: var(--ads-v2-border-radius);
+
+  &:hover {
+    background-color: #ffffff33;
+  }
+`;
 
 export const ScreenModeToggle = () => {
   const dispatch = useDispatch();
@@ -55,6 +91,8 @@ export const ScreenModeToggle = () => {
     }
   }, [dispatch, isAnimatedIDEEnabled]);
 
+  const [showNudge, setShowNudge] = useState(true);
+
   if (ideViewMode === EditorViewMode.SplitScreen) {
     return (
       <Tooltip
@@ -74,6 +112,40 @@ export const ScreenModeToggle = () => {
     );
   }
 
+  if (showNudge) {
+    return (
+      <Popover open>
+        <PopoverTrigger>
+          <FocusButton
+            className="ml-auto !min-w-[24px]"
+            data-testid={"t--ide-minimize"}
+            id={"editor-mode-minimize"}
+            isIconButton
+            kind="tertiary"
+            onClick={switchToSplitScreen}
+            startIcon={"minimize-v3"}
+          />
+        </PopoverTrigger>
+        <StyledPopoverContent align="center" side="left" size="sm">
+          <Flex
+            alignItems="flex-start"
+            backgroundColor="var(--ads-v2-color-bg-emphasis-max)"
+            gap="spaces-2"
+          >
+            <Text color="#fff" kind="heading-xs">
+              Write code and configure UI elements side by side
+            </Text>
+            <CloseIcon
+              name="close-line"
+              onClick={() => setShowNudge(false)}
+              size="md"
+            />
+          </Flex>
+        </StyledPopoverContent>
+      </Popover>
+    );
+  }
+
   return (
     <Tooltip
       content={createMessage(MINIMIZE_BUTTON_TOOLTIP)}

From 4c2664f391d0495359ad22e7c91fde626b03d7a7 Mon Sep 17 00:00:00 2001
From: Hetu Nandu <hetunandu@gmail.com>
Date: Tue, 24 Dec 2024 16:17:40 +0530
Subject: [PATCH 3/9] chore: Extract out Nudge component

---
 app/client/src/IDE/Components/Nudge/Nudge.tsx |  48 ++++++++
 app/client/src/IDE/Components/Nudge/index.ts  |   1 +
 app/client/src/IDE/Components/Nudge/styles.ts |  38 ++++++
 .../IDE/EditorTabs/ScreenModeToggle.tsx       | 110 +++++-------------
 4 files changed, 119 insertions(+), 78 deletions(-)
 create mode 100644 app/client/src/IDE/Components/Nudge/Nudge.tsx
 create mode 100644 app/client/src/IDE/Components/Nudge/index.ts
 create mode 100644 app/client/src/IDE/Components/Nudge/styles.ts

diff --git a/app/client/src/IDE/Components/Nudge/Nudge.tsx b/app/client/src/IDE/Components/Nudge/Nudge.tsx
new file mode 100644
index 00000000000..8cbecdde4f7
--- /dev/null
+++ b/app/client/src/IDE/Components/Nudge/Nudge.tsx
@@ -0,0 +1,48 @@
+import React, { useEffect, useState } from "react";
+import { Flex, Popover, Text } from "@appsmith/ads";
+import * as Styled from "./styles";
+import type { Align, Side } from "@radix-ui/react-popper";
+
+interface Props {
+  trigger: React.ReactNode;
+  onDismissClick: () => void;
+  message: string;
+  align?: Align;
+  side?: Side;
+}
+
+export const Nudge = (props: Props) => {
+  const [open, setOpen] = useState(false);
+
+  useEffect(function handleDelayOpenOnMount() {
+    const timer = setTimeout(() => {
+      setOpen(true);
+    }, 500);
+
+    return () => clearTimeout(timer);
+  }, []);
+
+  return (
+    <Popover open={open}>
+      <Styled.PopoverTrigger data-active={open}>
+        {props.trigger}
+      </Styled.PopoverTrigger>
+      <Styled.PopoverContent align={props.align} side={props.side} size="sm">
+        <Flex
+          alignItems="flex-start"
+          backgroundColor="var(--ads-v2-color-bg-emphasis-max)"
+          gap="spaces-2"
+        >
+          <Text color="#fff" kind="heading-xs">
+            {props.message}
+          </Text>
+          <Styled.CloseIcon
+            name="close-line"
+            onClick={props.onDismissClick}
+            size="md"
+          />
+        </Flex>
+      </Styled.PopoverContent>
+    </Popover>
+  );
+};
diff --git a/app/client/src/IDE/Components/Nudge/index.ts b/app/client/src/IDE/Components/Nudge/index.ts
new file mode 100644
index 00000000000..166ded472e5
--- /dev/null
+++ b/app/client/src/IDE/Components/Nudge/index.ts
@@ -0,0 +1 @@
+export { Nudge } from "./Nudge";
diff --git a/app/client/src/IDE/Components/Nudge/styles.ts b/app/client/src/IDE/Components/Nudge/styles.ts
new file mode 100644
index 00000000000..2044a44c1b0
--- /dev/null
+++ b/app/client/src/IDE/Components/Nudge/styles.ts
@@ -0,0 +1,38 @@
+import styled from "styled-components";
+import {
+  Icon,
+  PopoverContent as ADSPopoverContent,
+  PopoverTrigger as ADSPopoverTrigger,
+} from "@appsmith/ads";
+
+export const PopoverContent = styled(ADSPopoverContent)`
+  background: var(--ads-v2-color-bg-emphasis-max);
+  box-shadow: 0 1px 20px 0 #4c56641c;
+  border: none;
+`;
+
+export const PopoverTrigger = styled(ADSPopoverTrigger)`
+  border: 2px solid transparent !important;
+
+  &[data-active="true"] {
+    border: 2px solid var(--ads-v2-color-blue-300) !important;
+  }
+
+  transition: border 0.2s cubic-bezier(0.22, 0.61, 0.36, 1);
+`;
+
+export const CloseIcon = styled(Icon)`
+  svg {
+    path {
+      fill: #ffffff;
+    }
+  }
+
+  padding: var(--ads-v2-spaces-2);
+  cursor: pointer;
+  border-radius: var(--ads-v2-border-radius);
+
+  &:hover {
+    background-color: #ffffff33;
+  }
+`;
diff --git a/app/client/src/pages/Editor/IDE/EditorTabs/ScreenModeToggle.tsx b/app/client/src/pages/Editor/IDE/EditorTabs/ScreenModeToggle.tsx
index 0860537936f..4d3ec5ffd13 100644
--- a/app/client/src/pages/Editor/IDE/EditorTabs/ScreenModeToggle.tsx
+++ b/app/client/src/pages/Editor/IDE/EditorTabs/ScreenModeToggle.tsx
@@ -1,15 +1,6 @@
-import React, { useCallback, useState } from "react";
+import React, { useCallback, useMemo } from "react";
 import { useDispatch, useSelector } from "react-redux";
-import {
-  Button,
-  Flex,
-  Icon,
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-  Text,
-  Tooltip,
-} from "@appsmith/ads";
+import { Button, Tooltip } from "@appsmith/ads";
 
 import { getIDEViewMode } from "selectors/ideSelectors";
 import { EditorViewMode } from "ee/entities/IDE/constants";
@@ -23,33 +14,8 @@ import { setIdeEditorViewMode } from "actions/ideActions";
 import type { AppState } from "ee/reducers";
 import { selectFeatureFlagCheck } from "ee/selectors/featureFlagsSelectors";
 import { FEATURE_FLAG } from "ee/entities/FeatureFlag";
-import styled from "styled-components";
-
-const StyledPopoverContent = styled(PopoverContent)`
-  background: var(--ads-v2-color-bg-emphasis-max);
-  box-shadow: 0 1px 20px 0 #4c56641c;
-  border: none;
-`;
-
-const FocusButton = styled(Button)`
-  border: 2px solid #8bb0fa !important;
-`;
-
-const CloseIcon = styled(Icon)`
-  svg {
-    path {
-      fill: #ffffff;
-    }
-  }
-
-  padding: var(--ads-v2-spaces-2);
-  cursor: pointer;
-  border-radius: var(--ads-v2-border-radius);
-
-  &:hover {
-    background-color: #ffffff33;
-  }
-`;
+import { Nudge } from "IDE/Components/Nudge";
+import { useBoolean } from "usehooks-ts";
 
 export const ScreenModeToggle = () => {
   const dispatch = useDispatch();
@@ -77,11 +43,15 @@ export const ScreenModeToggle = () => {
     }
   }, [dispatch, isAnimatedIDEEnabled]);
 
+  const { setFalse: hideNudge, value: showNudge } = useBoolean(true);
+
   const switchToSplitScreen = useCallback(() => {
     AnalyticsUtil.logEvent("EDITOR_MODE_CHANGE", {
       to: EditorViewMode.SplitScreen,
     });
 
+    hideNudge();
+
     if ("startViewTransition" in document && isAnimatedIDEEnabled) {
       document.startViewTransition(() => {
         dispatch(setIdeEditorViewMode(EditorViewMode.SplitScreen));
@@ -89,9 +59,22 @@ export const ScreenModeToggle = () => {
     } else {
       dispatch(setIdeEditorViewMode(EditorViewMode.SplitScreen));
     }
-  }, [dispatch, isAnimatedIDEEnabled]);
+  }, [dispatch, hideNudge, isAnimatedIDEEnabled]);
 
-  const [showNudge, setShowNudge] = useState(true);
+  const maximiseButton = useMemo(
+    () => (
+      <Button
+        className="ml-auto !min-w-[24px]"
+        data-testid={"t--ide-minimize"}
+        id={"editor-mode-minimize"}
+        isIconButton
+        kind="tertiary"
+        onClick={switchToSplitScreen}
+        startIcon={"minimize-v3"}
+      />
+    ),
+    [switchToSplitScreen],
+  );
 
   if (ideViewMode === EditorViewMode.SplitScreen) {
     return (
@@ -114,35 +97,13 @@ export const ScreenModeToggle = () => {
 
   if (showNudge) {
     return (
-      <Popover open>
-        <PopoverTrigger>
-          <FocusButton
-            className="ml-auto !min-w-[24px]"
-            data-testid={"t--ide-minimize"}
-            id={"editor-mode-minimize"}
-            isIconButton
-            kind="tertiary"
-            onClick={switchToSplitScreen}
-            startIcon={"minimize-v3"}
-          />
-        </PopoverTrigger>
-        <StyledPopoverContent align="center" side="left" size="sm">
-          <Flex
-            alignItems="flex-start"
-            backgroundColor="var(--ads-v2-color-bg-emphasis-max)"
-            gap="spaces-2"
-          >
-            <Text color="#fff" kind="heading-xs">
-              Write code and configure UI elements side by side
-            </Text>
-            <CloseIcon
-              name="close-line"
-              onClick={() => setShowNudge(false)}
-              size="md"
-            />
-          </Flex>
-        </StyledPopoverContent>
-      </Popover>
+      <Nudge
+        align="center"
+        message="Write code and configure UI elements side by side"
+        onDismissClick={hideNudge}
+        side="left"
+        trigger={maximiseButton}
+      />
     );
   }
 
@@ -150,16 +111,9 @@ export const ScreenModeToggle = () => {
     <Tooltip
       content={createMessage(MINIMIZE_BUTTON_TOOLTIP)}
       key={createMessage(MINIMIZE_BUTTON_TOOLTIP)}
+      placement="left"
     >
-      <Button
-        className="ml-auto !min-w-[24px]"
-        data-testid={"t--ide-minimize"}
-        id={"editor-mode-minimize"}
-        isIconButton
-        kind="tertiary"
-        onClick={switchToSplitScreen}
-        startIcon={"minimize-v3"}
-      />
+      {maximiseButton}
     </Tooltip>
   );
 };

From f105539f847193a92ded192e61d02ef41098eaec Mon Sep 17 00:00:00 2001
From: Hetu Nandu <hetunandu@gmail.com>
Date: Tue, 24 Dec 2024 17:41:48 +0530
Subject: [PATCH 4/9] chore: Custom delay

---
 app/client/src/IDE/Components/Nudge/Nudge.tsx    | 16 ++++++++++------
 .../Editor/IDE/EditorTabs/ScreenModeToggle.tsx   |  1 +
 2 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/app/client/src/IDE/Components/Nudge/Nudge.tsx b/app/client/src/IDE/Components/Nudge/Nudge.tsx
index 8cbecdde4f7..b6ab833a444 100644
--- a/app/client/src/IDE/Components/Nudge/Nudge.tsx
+++ b/app/client/src/IDE/Components/Nudge/Nudge.tsx
@@ -9,18 +9,22 @@ interface Props {
   message: string;
   align?: Align;
   side?: Side;
+  delayOpen?: number;
 }
 
 export const Nudge = (props: Props) => {
   const [open, setOpen] = useState(false);
 
-  useEffect(function handleDelayOpenOnMount() {
-    const timer = setTimeout(() => {
-      setOpen(true);
-    }, 500);
+  useEffect(
+    function handleDelayOpenOnMount() {
+      const timer = setTimeout(() => {
+        setOpen(true);
+      }, props.delayOpen || 0);
 
-    return () => clearTimeout(timer);
-  }, []);
+      return () => clearTimeout(timer);
+    },
+    [props.delayOpen],
+  );
 
   return (
     <Popover open={open}>
diff --git a/app/client/src/pages/Editor/IDE/EditorTabs/ScreenModeToggle.tsx b/app/client/src/pages/Editor/IDE/EditorTabs/ScreenModeToggle.tsx
index 4d3ec5ffd13..25d04b5851b 100644
--- a/app/client/src/pages/Editor/IDE/EditorTabs/ScreenModeToggle.tsx
+++ b/app/client/src/pages/Editor/IDE/EditorTabs/ScreenModeToggle.tsx
@@ -99,6 +99,7 @@ export const ScreenModeToggle = () => {
     return (
       <Nudge
         align="center"
+        delayOpen={500}
         message="Write code and configure UI elements side by side"
         onDismissClick={hideNudge}
         side="left"

From af693636c01d29834a98231c6f5d4caf620fe34d Mon Sep 17 00:00:00 2001
From: Hetu Nandu <hetunandu@gmail.com>
Date: Tue, 24 Dec 2024 17:42:40 +0530
Subject: [PATCH 5/9] chore: Custom hook for nudge control

---
 .../Editor/IDE/EditorTabs/ScreenModeToggle.tsx  | 10 +++++-----
 app/client/src/pages/Editor/IDE/hooks.ts        | 17 +++++++++++++++++
 2 files changed, 22 insertions(+), 5 deletions(-)

diff --git a/app/client/src/pages/Editor/IDE/EditorTabs/ScreenModeToggle.tsx b/app/client/src/pages/Editor/IDE/EditorTabs/ScreenModeToggle.tsx
index 25d04b5851b..ee5a20d42cb 100644
--- a/app/client/src/pages/Editor/IDE/EditorTabs/ScreenModeToggle.tsx
+++ b/app/client/src/pages/Editor/IDE/EditorTabs/ScreenModeToggle.tsx
@@ -15,7 +15,7 @@ import type { AppState } from "ee/reducers";
 import { selectFeatureFlagCheck } from "ee/selectors/featureFlagsSelectors";
 import { FEATURE_FLAG } from "ee/entities/FeatureFlag";
 import { Nudge } from "IDE/Components/Nudge";
-import { useBoolean } from "usehooks-ts";
+import { useShowSideBySideNudge } from "../hooks";
 
 export const ScreenModeToggle = () => {
   const dispatch = useDispatch();
@@ -43,14 +43,14 @@ export const ScreenModeToggle = () => {
     }
   }, [dispatch, isAnimatedIDEEnabled]);
 
-  const { setFalse: hideNudge, value: showNudge } = useBoolean(true);
+  const [showNudge, dismissNudge] = useShowSideBySideNudge();
 
   const switchToSplitScreen = useCallback(() => {
     AnalyticsUtil.logEvent("EDITOR_MODE_CHANGE", {
       to: EditorViewMode.SplitScreen,
     });
 
-    hideNudge();
+    dismissNudge();
 
     if ("startViewTransition" in document && isAnimatedIDEEnabled) {
       document.startViewTransition(() => {
@@ -59,7 +59,7 @@ export const ScreenModeToggle = () => {
     } else {
       dispatch(setIdeEditorViewMode(EditorViewMode.SplitScreen));
     }
-  }, [dispatch, hideNudge, isAnimatedIDEEnabled]);
+  }, [dispatch, dismissNudge, isAnimatedIDEEnabled]);
 
   const maximiseButton = useMemo(
     () => (
@@ -101,7 +101,7 @@ export const ScreenModeToggle = () => {
         align="center"
         delayOpen={500}
         message="Write code and configure UI elements side by side"
-        onDismissClick={hideNudge}
+        onDismissClick={dismissNudge}
         side="left"
         trigger={maximiseButton}
       />
diff --git a/app/client/src/pages/Editor/IDE/hooks.ts b/app/client/src/pages/Editor/IDE/hooks.ts
index 25f724ef5f5..7de5ea2c86f 100644
--- a/app/client/src/pages/Editor/IDE/hooks.ts
+++ b/app/client/src/pages/Editor/IDE/hooks.ts
@@ -29,6 +29,10 @@ import { getCurrentBasePageId } from "selectors/editorSelectors";
 import { getCurrentEntityInfo } from "../utils";
 import { useEditorType } from "ee/hooks";
 import { useParentEntityInfo } from "ee/hooks/datasourceEditorHooks";
+import { useBoolean } from "usehooks-ts";
+import { isWidgetActionConnectionPresent } from "selectors/onboardingSelectors";
+import { useFeatureFlag } from "utils/hooks/useFeatureFlag";
+import { FEATURE_FLAG } from "ee/entities/FeatureFlag";
 
 export const useCurrentEditorState = () => {
   const [selectedSegment, setSelectedSegment] = useState<EditorEntityTab>(
@@ -198,3 +202,16 @@ export const useIDETabClickHandlers = () => {
 
   return { addClickHandler, tabClickHandler, closeClickHandler };
 };
+
+export const useShowSideBySideNudge: () => [boolean, () => void] = () => {
+  const widgetBindingsExist = useSelector(isWidgetActionConnectionPresent);
+  const isActionRedesignEnabled = useFeatureFlag(
+    FEATURE_FLAG.release_actions_redesign_enabled,
+  );
+
+  const { setFalse, value } = useBoolean(
+    widgetBindingsExist && isActionRedesignEnabled,
+  );
+
+  return [value, setFalse];
+};

From 3e673c86f3c2008dff7d142d265d6e12e7481690 Mon Sep 17 00:00:00 2001
From: Hetu Nandu <hetunandu@gmail.com>
Date: Wed, 25 Dec 2024 09:50:27 +0530
Subject: [PATCH 6/9] chore: Add local storage flag

---
 app/client/src/pages/Editor/IDE/hooks.ts | 14 ++++++++++++--
 app/client/src/utils/localStorage.tsx    |  3 +++
 2 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/app/client/src/pages/Editor/IDE/hooks.ts b/app/client/src/pages/Editor/IDE/hooks.ts
index 7de5ea2c86f..714bd3f4444 100644
--- a/app/client/src/pages/Editor/IDE/hooks.ts
+++ b/app/client/src/pages/Editor/IDE/hooks.ts
@@ -33,6 +33,7 @@ import { useBoolean } from "usehooks-ts";
 import { isWidgetActionConnectionPresent } from "selectors/onboardingSelectors";
 import { useFeatureFlag } from "utils/hooks/useFeatureFlag";
 import { FEATURE_FLAG } from "ee/entities/FeatureFlag";
+import localStorage, { LOCAL_STORAGE_KEYS } from "utils/localStorage";
 
 export const useCurrentEditorState = () => {
   const [selectedSegment, setSelectedSegment] = useState<EditorEntityTab>(
@@ -205,13 +206,22 @@ export const useIDETabClickHandlers = () => {
 
 export const useShowSideBySideNudge: () => [boolean, () => void] = () => {
   const widgetBindingsExist = useSelector(isWidgetActionConnectionPresent);
+
+  const localStorageFlag =
+    localStorage.getItem(LOCAL_STORAGE_KEYS.NUDGE_SHOWN_SPLIT_PANE) || "false";
+
   const isActionRedesignEnabled = useFeatureFlag(
     FEATURE_FLAG.release_actions_redesign_enabled,
   );
 
   const { setFalse, value } = useBoolean(
-    widgetBindingsExist && isActionRedesignEnabled,
+    widgetBindingsExist && isActionRedesignEnabled && !localStorageFlag,
   );
 
-  return [value, setFalse];
+  const dismissNudge = useCallback(() => {
+    setFalse();
+    localStorage.setItem(LOCAL_STORAGE_KEYS.NUDGE_SHOWN_SPLIT_PANE, "true");
+  }, [setFalse]);
+
+  return [value, dismissNudge];
 };
diff --git a/app/client/src/utils/localStorage.tsx b/app/client/src/utils/localStorage.tsx
index d20b985bd39..8866e0d2d3e 100644
--- a/app/client/src/utils/localStorage.tsx
+++ b/app/client/src/utils/localStorage.tsx
@@ -10,10 +10,12 @@ import { toast } from "@appsmith/ads";
 export const LOCAL_STORAGE_KEYS = {
   CANVAS_CARDS_STATE: "CANVAS_CARDS_STATE",
   SPLITPANE_ANNOUNCEMENT: "SPLITPANE_ANNOUNCEMENT",
+  NUDGE_SHOWN_SPLIT_PANE: "NUDGE_SHOWN_SPLIT_PANE",
 };
 
 class LocalStorageNotSupportedError extends Error {
   name: string;
+
   constructor() {
     super();
     this.name = "LOCAL_STORAGE_NOT_SUPPORTED";
@@ -29,6 +31,7 @@ class WebStorage {
 
     this._isSupported = this.isSupported();
   }
+
   // ref: https://github.com/Modernizr/Modernizr/blob/94592f279a410436530c7c06acc42a6e90c20150/feature-detects/storage/localstorage.js
   isSupported = () => {
     try {

From 47fab081d0b92414bbe9a8306176ba6811cb67a3 Mon Sep 17 00:00:00 2001
From: Hetu Nandu <hetunandu@gmail.com>
Date: Thu, 26 Dec 2024 13:47:41 +0530
Subject: [PATCH 7/9] fix: Add animation and arrow

---
 .../design-system/ads/src/Popover/Popover.tsx         |  3 ++-
 .../design-system/ads/src/Popover/Popover.types.ts    |  2 ++
 app/client/src/IDE/Components/Nudge/Nudge.tsx         |  7 ++++++-
 app/client/src/IDE/Components/Nudge/styles.ts         | 11 +++++++++++
 app/client/src/pages/Editor/IDE/hooks.ts              |  5 +++--
 5 files changed, 24 insertions(+), 4 deletions(-)

diff --git a/app/client/packages/design-system/ads/src/Popover/Popover.tsx b/app/client/packages/design-system/ads/src/Popover/Popover.tsx
index 34fc8d7ef27..44270713da4 100644
--- a/app/client/packages/design-system/ads/src/Popover/Popover.tsx
+++ b/app/client/packages/design-system/ads/src/Popover/Popover.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import type { PopoverTriggerProps } from "@radix-ui/react-popover";
-import { Close, Root, Trigger, Portal } from "@radix-ui/react-popover";
+import { Close, Root, Trigger, Portal, Arrow } from "@radix-ui/react-popover";
 
 import type { PopoverHeaderProps, PopoverContentProps } from "./Popover.types";
 import {
@@ -60,6 +60,7 @@ function PopoverContent({ size = "sm", ...props }: PopoverContentProps) {
         sideOffset={4}
         {...props}
       >
+        {props.showArrow ? <Arrow /> : null}
         {props.children}
       </StyledContent>
     </Portal>
diff --git a/app/client/packages/design-system/ads/src/Popover/Popover.types.ts b/app/client/packages/design-system/ads/src/Popover/Popover.types.ts
index c3e61cd2ce2..f78414b2f55 100644
--- a/app/client/packages/design-system/ads/src/Popover/Popover.types.ts
+++ b/app/client/packages/design-system/ads/src/Popover/Popover.types.ts
@@ -20,4 +20,6 @@ export type PopoverContentProps = {
   className?: string;
   /** the minimum size of the popover */
   size?: PopoverSize;
+  /** render an arrow pointing to the trigger */
+  showArrow?: boolean;
 } & RadixPopoverContentProps;
diff --git a/app/client/src/IDE/Components/Nudge/Nudge.tsx b/app/client/src/IDE/Components/Nudge/Nudge.tsx
index b6ab833a444..b7b74ed9599 100644
--- a/app/client/src/IDE/Components/Nudge/Nudge.tsx
+++ b/app/client/src/IDE/Components/Nudge/Nudge.tsx
@@ -31,7 +31,12 @@ export const Nudge = (props: Props) => {
       <Styled.PopoverTrigger data-active={open}>
         {props.trigger}
       </Styled.PopoverTrigger>
-      <Styled.PopoverContent align={props.align} side={props.side} size="sm">
+      <Styled.PopoverContent
+        align={props.align}
+        showArrow
+        side={props.side}
+        size="sm"
+      >
         <Flex
           alignItems="flex-start"
           backgroundColor="var(--ads-v2-color-bg-emphasis-max)"
diff --git a/app/client/src/IDE/Components/Nudge/styles.ts b/app/client/src/IDE/Components/Nudge/styles.ts
index 2044a44c1b0..5d0b51951aa 100644
--- a/app/client/src/IDE/Components/Nudge/styles.ts
+++ b/app/client/src/IDE/Components/Nudge/styles.ts
@@ -9,6 +9,17 @@ export const PopoverContent = styled(ADSPopoverContent)`
   background: var(--ads-v2-color-bg-emphasis-max);
   box-shadow: 0 1px 20px 0 #4c56641c;
   border: none;
+  transform-origin: var(--radix-popover-content-transform-origin);
+  animation: fadeIn 0.2s cubic-bezier(0, 0, 0.58, 1);
+
+  @keyframes fadeIn {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
 `;
 
 export const PopoverTrigger = styled(ADSPopoverTrigger)`
diff --git a/app/client/src/pages/Editor/IDE/hooks.ts b/app/client/src/pages/Editor/IDE/hooks.ts
index 714bd3f4444..178a02e9422 100644
--- a/app/client/src/pages/Editor/IDE/hooks.ts
+++ b/app/client/src/pages/Editor/IDE/hooks.ts
@@ -207,8 +207,9 @@ export const useIDETabClickHandlers = () => {
 export const useShowSideBySideNudge: () => [boolean, () => void] = () => {
   const widgetBindingsExist = useSelector(isWidgetActionConnectionPresent);
 
-  const localStorageFlag =
-    localStorage.getItem(LOCAL_STORAGE_KEYS.NUDGE_SHOWN_SPLIT_PANE) || "false";
+  const localStorageFlag = localStorage.getItem(
+    LOCAL_STORAGE_KEYS.NUDGE_SHOWN_SPLIT_PANE,
+  );
 
   const isActionRedesignEnabled = useFeatureFlag(
     FEATURE_FLAG.release_actions_redesign_enabled,

From fa662313cbe027a4790ffbdef2117472ae1bb3ea Mon Sep 17 00:00:00 2001
From: Hetu Nandu <hetunandu@gmail.com>
Date: Thu, 26 Dec 2024 13:51:43 +0530
Subject: [PATCH 8/9] fix: Review comments

---
 app/client/src/IDE/Components/Nudge/Nudge.tsx               | 2 +-
 app/client/src/IDE/Components/Nudge/styles.ts               | 4 ++--
 .../src/pages/Editor/IDE/EditorTabs/ScreenModeToggle.tsx    | 6 +++---
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/app/client/src/IDE/Components/Nudge/Nudge.tsx b/app/client/src/IDE/Components/Nudge/Nudge.tsx
index b7b74ed9599..d32eb14adf2 100644
--- a/app/client/src/IDE/Components/Nudge/Nudge.tsx
+++ b/app/client/src/IDE/Components/Nudge/Nudge.tsx
@@ -42,7 +42,7 @@ export const Nudge = (props: Props) => {
           backgroundColor="var(--ads-v2-color-bg-emphasis-max)"
           gap="spaces-2"
         >
-          <Text color="#fff" kind="heading-xs">
+          <Text color="var(--ads-v2-color-bg)" kind="heading-xs">
             {props.message}
           </Text>
           <Styled.CloseIcon
diff --git a/app/client/src/IDE/Components/Nudge/styles.ts b/app/client/src/IDE/Components/Nudge/styles.ts
index 5d0b51951aa..081c6ed10cf 100644
--- a/app/client/src/IDE/Components/Nudge/styles.ts
+++ b/app/client/src/IDE/Components/Nudge/styles.ts
@@ -29,13 +29,13 @@ export const PopoverTrigger = styled(ADSPopoverTrigger)`
     border: 2px solid var(--ads-v2-color-blue-300) !important;
   }
 
-  transition: border 0.2s cubic-bezier(0.22, 0.61, 0.36, 1);
+  transition: border 0.2s cubic-bezier(0, 0, 0.58, 1);
 `;
 
 export const CloseIcon = styled(Icon)`
   svg {
     path {
-      fill: #ffffff;
+      fill: var(--ads-v2-color-bg);
     }
   }
 
diff --git a/app/client/src/pages/Editor/IDE/EditorTabs/ScreenModeToggle.tsx b/app/client/src/pages/Editor/IDE/EditorTabs/ScreenModeToggle.tsx
index ee5a20d42cb..b570b564489 100644
--- a/app/client/src/pages/Editor/IDE/EditorTabs/ScreenModeToggle.tsx
+++ b/app/client/src/pages/Editor/IDE/EditorTabs/ScreenModeToggle.tsx
@@ -61,7 +61,7 @@ export const ScreenModeToggle = () => {
     }
   }, [dispatch, dismissNudge, isAnimatedIDEEnabled]);
 
-  const maximiseButton = useMemo(
+  const minimiseButton = useMemo(
     () => (
       <Button
         className="ml-auto !min-w-[24px]"
@@ -103,7 +103,7 @@ export const ScreenModeToggle = () => {
         message="Write code and configure UI elements side by side"
         onDismissClick={dismissNudge}
         side="left"
-        trigger={maximiseButton}
+        trigger={minimiseButton}
       />
     );
   }
@@ -114,7 +114,7 @@ export const ScreenModeToggle = () => {
       key={createMessage(MINIMIZE_BUTTON_TOOLTIP)}
       placement="left"
     >
-      {maximiseButton}
+      {minimiseButton}
     </Tooltip>
   );
 };

From d2b13a39011b74109d70df290bf9e3041f5bb1c5 Mon Sep 17 00:00:00 2001
From: Hetu Nandu <hetunandu@gmail.com>
Date: Fri, 27 Dec 2024 17:35:01 +0530
Subject: [PATCH 9/9] chore: Make sure tests dont have nudges

---
 .../cypress/support/Objects/Registry.ts       | 35 +++++++++++++++++++
 app/client/cypress/support/commands.js        |  2 ++
 2 files changed, 37 insertions(+)

diff --git a/app/client/cypress/support/Objects/Registry.ts b/app/client/cypress/support/Objects/Registry.ts
index ebc61b8413a..3b43cf5c8cc 100644
--- a/app/client/cypress/support/Objects/Registry.ts
+++ b/app/client/cypress/support/Objects/Registry.ts
@@ -35,6 +35,7 @@ import { AnvilSnapshot } from "../Pages/Anvil/AnvilSnapshot";
 
 export class ObjectsRegistry {
   private static aggregateHelper__: AggregateHelper;
+
   static get AggregateHelper(): AggregateHelper {
     if (ObjectsRegistry.aggregateHelper__ === undefined) {
       ObjectsRegistry.aggregateHelper__ = new AggregateHelper();
@@ -43,6 +44,7 @@ export class ObjectsRegistry {
   }
 
   private static assertHelper__: AssertHelper;
+
   static get AssertHelper(): AssertHelper {
     if (ObjectsRegistry.assertHelper__ === undefined) {
       ObjectsRegistry.assertHelper__ = new AssertHelper();
@@ -51,6 +53,7 @@ export class ObjectsRegistry {
   }
 
   private static jsEditor__: JSEditor;
+
   static get JSEditor(): JSEditor {
     if (ObjectsRegistry.jsEditor__ === undefined) {
       ObjectsRegistry.jsEditor__ = new JSEditor();
@@ -59,6 +62,7 @@ export class ObjectsRegistry {
   }
 
   private static commonLocators__: CommonLocators;
+
   static get CommonLocators(): CommonLocators {
     if (ObjectsRegistry.commonLocators__ === undefined) {
       ObjectsRegistry.commonLocators__ = new CommonLocators();
@@ -67,6 +71,7 @@ export class ObjectsRegistry {
   }
 
   private static entityExplorer__: EntityExplorer;
+
   static get EntityExplorer(): EntityExplorer {
     if (ObjectsRegistry.entityExplorer__ === undefined) {
       ObjectsRegistry.entityExplorer__ = new EntityExplorer();
@@ -75,6 +80,7 @@ export class ObjectsRegistry {
   }
 
   private static apiPage__: ApiPage;
+
   static get ApiPage(): ApiPage {
     if (ObjectsRegistry.apiPage__ === undefined) {
       ObjectsRegistry.apiPage__ = new ApiPage();
@@ -83,6 +89,7 @@ export class ObjectsRegistry {
   }
 
   private static adminSettings__: AdminSettings;
+
   static get AdminSettings(): AdminSettings {
     if (ObjectsRegistry.adminSettings__ === undefined) {
       ObjectsRegistry.adminSettings__ = new AdminSettings();
@@ -91,6 +98,7 @@ export class ObjectsRegistry {
   }
 
   private static homePage__: HomePage;
+
   static get HomePage(): HomePage {
     if (ObjectsRegistry.homePage__ === undefined) {
       ObjectsRegistry.homePage__ = new HomePage();
@@ -99,6 +107,7 @@ export class ObjectsRegistry {
   }
 
   private static dataSources__: DataSources;
+
   static get DataSources(): DataSources {
     if (ObjectsRegistry.dataSources__ === undefined) {
       ObjectsRegistry.dataSources__ = new DataSources();
@@ -107,6 +116,7 @@ export class ObjectsRegistry {
   }
 
   private static table__: Table;
+
   static get Table(): Table {
     if (ObjectsRegistry.table__ === undefined) {
       ObjectsRegistry.table__ = new Table();
@@ -115,6 +125,7 @@ export class ObjectsRegistry {
   }
 
   private static tabs__: Tabs;
+
   static get Tabs(): Tabs {
     if (ObjectsRegistry.tabs__ === undefined) {
       ObjectsRegistry.tabs__ = new Tabs();
@@ -123,6 +134,7 @@ export class ObjectsRegistry {
   }
 
   private static propertyPane__: PropertyPane;
+
   static get PropertyPane(): PropertyPane {
     if (ObjectsRegistry.propertyPane__ === undefined) {
       ObjectsRegistry.propertyPane__ = new PropertyPane();
@@ -131,6 +143,7 @@ export class ObjectsRegistry {
   }
 
   private static deployMode__: DeployMode;
+
   static get DeployMode(): DeployMode {
     if (ObjectsRegistry.deployMode__ === undefined) {
       ObjectsRegistry.deployMode__ = new DeployMode();
@@ -139,6 +152,7 @@ export class ObjectsRegistry {
   }
 
   private static gitSync__: GitSync;
+
   static get GitSync(): GitSync {
     if (ObjectsRegistry.gitSync__ === undefined) {
       ObjectsRegistry.gitSync__ = new GitSync();
@@ -147,6 +161,7 @@ export class ObjectsRegistry {
   }
 
   private static fakerHelper__: FakerHelper;
+
   static get FakerHelper(): FakerHelper {
     if (ObjectsRegistry.fakerHelper__ === undefined) {
       ObjectsRegistry.fakerHelper__ = new FakerHelper();
@@ -155,6 +170,7 @@ export class ObjectsRegistry {
   }
 
   private static debuggerHelper__: DebuggerHelper;
+
   static get DebuggerHelper(): DebuggerHelper {
     if (ObjectsRegistry.debuggerHelper__ === undefined) {
       ObjectsRegistry.debuggerHelper__ = new DebuggerHelper();
@@ -163,6 +179,7 @@ export class ObjectsRegistry {
   }
 
   private static appSettings__: AppSettings;
+
   static get AppSettings(): AppSettings {
     if (ObjectsRegistry.appSettings__ === undefined) {
       ObjectsRegistry.appSettings__ = new AppSettings();
@@ -171,6 +188,7 @@ export class ObjectsRegistry {
   }
 
   private static generalSettings__: GeneralSettings;
+
   static get GeneralSettings(): GeneralSettings {
     if (ObjectsRegistry.generalSettings__ === undefined) {
       ObjectsRegistry.generalSettings__ = new GeneralSettings();
@@ -179,6 +197,7 @@ export class ObjectsRegistry {
   }
 
   private static pageSettings__: PageSettings;
+
   static get PageSettings(): PageSettings {
     if (ObjectsRegistry.pageSettings__ === undefined) {
       ObjectsRegistry.pageSettings__ = new PageSettings();
@@ -187,6 +206,7 @@ export class ObjectsRegistry {
   }
 
   private static themeSettings__: ThemeSettings;
+
   static get ThemeSettings(): ThemeSettings {
     if (ObjectsRegistry.themeSettings__ === undefined) {
       ObjectsRegistry.themeSettings__ = new ThemeSettings();
@@ -195,6 +215,7 @@ export class ObjectsRegistry {
   }
 
   private static embedSettings__: EmbedSettings;
+
   static get EmbedSettings(): EmbedSettings {
     if (ObjectsRegistry.embedSettings__ === undefined) {
       ObjectsRegistry.embedSettings__ = new EmbedSettings();
@@ -203,6 +224,7 @@ export class ObjectsRegistry {
   }
 
   private static LibraryInstaller__: LibraryInstaller;
+
   static get LibraryInstaller(): LibraryInstaller {
     if (ObjectsRegistry.LibraryInstaller__ === undefined) {
       ObjectsRegistry.LibraryInstaller__ = new LibraryInstaller();
@@ -211,6 +233,7 @@ export class ObjectsRegistry {
   }
 
   private static peekOverlay__: PeekOverlay;
+
   static get PeekOverlay(): PeekOverlay {
     if (ObjectsRegistry.peekOverlay__ === undefined) {
       ObjectsRegistry.peekOverlay__ = new PeekOverlay();
@@ -219,6 +242,7 @@ export class ObjectsRegistry {
   }
 
   private static inviteModal__: InviteModal;
+
   static get InviteModal(): InviteModal {
     if (ObjectsRegistry.inviteModal__ === undefined) {
       ObjectsRegistry.inviteModal__ = new InviteModal();
@@ -227,6 +251,7 @@ export class ObjectsRegistry {
   }
 
   private static templates__: Templates;
+
   static get Templates(): Templates {
     if (ObjectsRegistry.templates__ === undefined) {
       ObjectsRegistry.templates__ = new Templates();
@@ -235,6 +260,7 @@ export class ObjectsRegistry {
   }
 
   private static onboarding__: Onboarding;
+
   static get Onboarding(): Onboarding {
     if (ObjectsRegistry.onboarding__ === undefined) {
       ObjectsRegistry.onboarding__ = new Onboarding();
@@ -243,6 +269,7 @@ export class ObjectsRegistry {
   }
 
   private static autoLayout__: AutoLayout;
+
   static get AutoLayout(): AutoLayout {
     if (ObjectsRegistry.autoLayout__ === undefined) {
       ObjectsRegistry.autoLayout__ = new AutoLayout();
@@ -251,6 +278,7 @@ export class ObjectsRegistry {
   }
 
   private static anvilLayout__: AnvilLayout;
+
   static get AnvilLayout(): AnvilLayout {
     if (ObjectsRegistry.anvilLayout__ === undefined) {
       ObjectsRegistry.anvilLayout__ = new AnvilLayout();
@@ -259,6 +287,7 @@ export class ObjectsRegistry {
   }
 
   private static wdsWidgets__: WDSWidgets;
+
   static get WDSWidgets(): WDSWidgets {
     if (ObjectsRegistry.wdsWidgets__ === undefined) {
       ObjectsRegistry.wdsWidgets__ = new WDSWidgets();
@@ -267,6 +296,7 @@ export class ObjectsRegistry {
   }
 
   private static anvilSnapshot__: AnvilSnapshot;
+
   static get AnvilSnapshot(): AnvilSnapshot {
     if (ObjectsRegistry.anvilSnapshot__ === undefined) {
       ObjectsRegistry.anvilSnapshot__ = new AnvilSnapshot();
@@ -275,6 +305,7 @@ export class ObjectsRegistry {
   }
 
   private static dataManager__: DataManager;
+
   static get DataManager(): DataManager {
     if (ObjectsRegistry.dataManager__ === undefined) {
       ObjectsRegistry.dataManager__ = new DataManager();
@@ -283,6 +314,7 @@ export class ObjectsRegistry {
   }
 
   private static gsheetHelper__: GsheetHelper;
+
   static get GSheetHelper(): GsheetHelper {
     if (ObjectsRegistry.gsheetHelper__ === undefined) {
       ObjectsRegistry.gsheetHelper__ = new GsheetHelper();
@@ -291,6 +323,7 @@ export class ObjectsRegistry {
   }
 
   private static communityTemplates__: CommunityTemplates;
+
   static get CommunityTemplates(): CommunityTemplates {
     if (ObjectsRegistry.communityTemplates__ === undefined) {
       ObjectsRegistry.communityTemplates__ = new CommunityTemplates();
@@ -299,6 +332,7 @@ export class ObjectsRegistry {
   }
 
   private static partialImportExport__: PartialImportExport;
+
   static get PartialImportExport(): PartialImportExport {
     if (ObjectsRegistry.partialImportExport__ === undefined) {
       ObjectsRegistry.partialImportExport__ = new PartialImportExport();
@@ -311,6 +345,7 @@ export const initLocalstorageRegistry = () => {
   cy.window().then((window) => {
     window.localStorage.setItem("ShowCommentsButtonToolTip", "");
     window.localStorage.setItem("updateDismissed", "true");
+    window.localStorage.setItem("NUDGE_SHOWN_SPLIT_PANE", "true");
   });
   localStorage.setItem("inDeployedMode", "false");
 };
diff --git a/app/client/cypress/support/commands.js b/app/client/cypress/support/commands.js
index 75dab161159..74294b336c7 100644
--- a/app/client/cypress/support/commands.js
+++ b/app/client/cypress/support/commands.js
@@ -19,6 +19,7 @@ import { v4 as uuidv4 } from "uuid";
 const dayjs = require("dayjs");
 const loginPage = require("../locators/LoginPage.json");
 import homePage from "../locators/HomePage";
+
 dayjs.extend(advancedFormat);
 
 const commonlocators = require("../locators/commonlocators.json");
@@ -54,6 +55,7 @@ export const initLocalstorage = () => {
   cy.window().then((window) => {
     window.localStorage.setItem("ShowCommentsButtonToolTip", "");
     window.localStorage.setItem("updateDismissed", "true");
+    window.localStorage.setItem("NUDGE_SHOWN_SPLIT_PANE", "true");
   });
 };