chore: Extracting out showNudge config from screen mode toggle comp…

…onent (#38833)

## Description

Extracting out `showNudge` config from screen mode toggle component to
make this component re-usable in other IDEs.

Fixes [#37690](#37690)

## Automation

/ok-to-test tags="@tag.Sanity, @tag.IDE"

### 🔍 Cypress test results
<!-- This is an auto-generated comment: Cypress test results  -->
> [!TIP]
> 🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉
> Workflow run:
<https://github.com/appsmithorg/appsmith/actions/runs/12948269268>
> Commit: 1a30130
> <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=12948269268&attempt=1"
target="_blank">Cypress dashboard</a>.
> Tags: `@tag.Sanity, @tag.IDE`
> Spec:
> <hr>Fri, 24 Jan 2025 11:40:32 UTC
<!-- end of auto-generated comment: Cypress test results  -->


## Communication
Should the DevRel and Marketing teams inform users about this change?
- [ ] Yes
- [ ] No


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

- **New Features**
- Introduced a new nudge system for side-by-side view functionality in
the editor.
- Enhanced user guidance with a dismissible nudge for screen mode
switching.

- **Improvements**
	- Refined state management for screen mode toggle by utilizing props.
- Improved component prop handling for better flexibility and
interactivity.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

app/client/src/pages/Editor/IDE/EditorTabs/ScreenModeToggle.tsx

@@ -15,9 +15,14 @@ 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 { useShowSideBySideNudge } from "../hooks";
 
-export const ScreenModeToggle = () => {
+interface Props {
+  showNudge?: boolean;
+  dismissNudge?: () => void;
+}
+
+export const ScreenModeToggle = (props: Props) => {
+  const { dismissNudge, showNudge = false } = props;
   const dispatch = useDispatch();
   const ideViewMode = useSelector(getIDEViewMode);
   const isAnimatedIDEEnabled = useSelector((state: AppState) => {
@@ -43,14 +48,14 @@ export const ScreenModeToggle = () => {
     }
   }, [dispatch, isAnimatedIDEEnabled]);
 
-  const [showNudge, dismissNudge] = useShowSideBySideNudge();
-
   const switchToSplitScreen = useCallback(() => {
     AnalyticsUtil.logEvent("EDITOR_MODE_CHANGE", {
       to: EditorViewMode.SplitScreen,
     });
 
-    dismissNudge();
+    if (dismissNudge) {
+      dismissNudge();
+    }
 
     if ("startViewTransition" in document && isAnimatedIDEEnabled) {
       document.startViewTransition(() => {
@@ -95,7 +100,7 @@ export const ScreenModeToggle = () => {
     );
   }
 
-  if (showNudge) {
+  if (showNudge && dismissNudge) {
     return (
       <Nudge
         align="center"

app/client/src/pages/Editor/IDE/EditorTabs/index.tsx

@@ -10,7 +10,11 @@ import {
 } from "ee/entities/IDE/constants";
 
 import Container from "./Container";
-import { useCurrentEditorState, useIDETabClickHandlers } from "../hooks";
+import {
+  useCurrentEditorState,
+  useIDETabClickHandlers,
+  useShowSideBySideNudge,
+} from "../hooks";
 import { SCROLL_AREA_OPTIONS, TabSelectors } from "./constants";
 import { AddButton } from "./AddButton";
 import { useLocation } from "react-router";
@@ -32,6 +36,7 @@ const EditorTabs = () => {
   const entities = useSelector(tabsConfig.listSelector, shallowEqual);
   const files = useSelector(tabsConfig.tabsSelector, shallowEqual);
   const isListViewActive = useSelector(getListViewActiveState);
+  const [showNudge, dismissNudge] = useShowSideBySideNudge();
 
   const location = useLocation();
   const dispatch = useDispatch();
@@ -147,7 +152,7 @@ const EditorTabs = () => {
         </ScrollArea>
         {files.length > 0 ? <AddButton /> : null}
         {/* Switch screen mode button */}
-        <ScreenModeToggle />
+        <ScreenModeToggle dismissNudge={dismissNudge} showNudge={showNudge} />
       </Container>
 
       {/* Overflow list */}