feat(UI-1361): remember full screen between projects (#1089)

Author: J1za

src/components/organisms/deployments/sessions/table/table.tsx

@@ -13,7 +13,7 @@ import { SessionStateType } from "@src/enums";
 import { useResize } from "@src/hooks";
 import { PopoverListItem } from "@src/interfaces/components/popover.interface";
 import { Session, SessionStateKeyType } from "@src/interfaces/models";
-import { useCacheStore, useModalStore, useProjectStore, useToastStore } from "@src/store";
+import { useCacheStore, useModalStore, useSharedBetweenProjectsStore, useToastStore } from "@src/store";
 import { SessionStatsFilterType } from "@src/types/components";
 import { calculateDeploymentSessionsStats, getShortId, initialSessionCounts } from "@src/utilities";
 
@@ -52,13 +52,13 @@ export const SessionsTable = () => {
 	const frameClass = "size-full bg-gray-1100 pb-3 pl-7 transition-all rounded-r-none";
 	const filteredEntityId = deploymentId || projectId!;
 	const [searchParams, setSearchParams] = useSearchParams();
-	const { splitScreenRatio, setEditorWidth } = useProjectStore();
+	const { splitScreenRatio, setEditorWidth } = useSharedBetweenProjectsStore();
 	const [leftSideWidth] = useResize({
 		direction: "horizontal",
 		...defaultSplitFrameSize,
 		initial: splitScreenRatio[projectId!]?.sessions || defaultSplitFrameSize.initial,
 		id: resizeId,
-		onChange: (width) => setEditorWidth({ sessions: width }),
+		onChange: (width) => setEditorWidth(projectId!, { sessions: width }),
 	});
 
 	const processStateFilter = (stateFilter?: string | null) => {

src/components/organisms/editorTabs.tsx

@@ -24,20 +24,15 @@ import { Button, IconButton, IconSvg, Loader, Spinner, Tab, Typography } from "@
 import { AKRoundLogo } from "@assets/image";
 import { Close, CompressIcon, ExpandIcon, SaveIcon } from "@assets/image/icons";
 
-export const EditorTabs = ({
-	isExpanded,
-	setExpanded,
-}: {
-	isExpanded: boolean;
-	setExpanded: (expandedState: boolean) => void;
-}) => {
-	const { projectId } = useParams();
+export const EditorTabs = () => {
+	const { projectId } = useParams() as { projectId: string };
 	const { t: tErrors } = useTranslation("errors");
 	const { t } = useTranslation("tabs", { keyPrefix: "editor" });
-	const { closeOpenedFile, openFileAsActive, openFiles, saveFile } = useFileOperations(projectId!);
+	const { closeOpenedFile, openFileAsActive, openFiles, saveFile } = useFileOperations(projectId);
 	const { currentProjectId, fetchResources } = useCacheStore();
 	const addToast = useToastStore((state) => state.addToast);
-	const { cursorPositionPerProject, setCursorPosition } = useSharedBetweenProjectsStore();
+	const { cursorPositionPerProject, setCursorPosition, fullScreenEditor, setFullScreenEditor } =
+		useSharedBetweenProjectsStore();
 	const activeEditorFileName =
 		(projectId && openFiles[projectId]?.find(({ isActive }: { isActive: boolean }) => isActive)?.name) || "";
 	const fileExtension = "." + last(activeEditorFileName.split("."));
@@ -197,7 +192,7 @@ export const EditorTabs = ({
 			setIsFirstCursorPositionChange(false);
 			return;
 		}
-		const cursorPosition = cursorPositionPerProject[projectId!]?.[activeEditorFileName];
+		const cursorPosition = cursorPositionPerProject[projectId]?.[activeEditorFileName];
 		const codeEditor = editorRef.current;
 		if (!cursorPosition && codeEditor) {
 			revealAndFocusOnLineInEditor(codeEditor, { lineNumber: 0, column: 0 });
@@ -288,21 +283,25 @@ export const EditorTabs = ({
 	}, [debouncedManualSave]);
 
 	const activeCloseIcon = (fileName: string) => {
-		const isActiveFile = openFiles[projectId!].find(({ isActive, name }) => name === fileName && isActive);
+		const isActiveFile = openFiles[projectId].find(({ isActive, name }) => name === fileName && isActive);
 
 		return cn("size-4 p-0.5 opacity-0 hover:bg-gray-1100 group-hover:opacity-100", {
 			"opacity-100": isActiveFile,
 		});
 	};
 
+	const toggleFullScreenEditor = () => {
+		setFullScreenEditor(projectId, !fullScreenEditor[projectId]);
+	};
+
 	const handleCloseButtonClick = (
 		event: React.MouseEvent<HTMLButtonElement | HTMLDivElement, MouseEvent>,
 		name: string
 	): void => {
 		event.stopPropagation();
 		closeOpenedFile(name);
-		if (!isExpanded || openFiles[projectId!]?.length !== 1) return;
-		setExpanded(false);
+		if (!fullScreenEditor[projectId] || openFiles[projectId]?.length !== 1) return;
+		toggleFullScreenEditor();
 	};
 
 	const isMarkdownFile = useMemo(() => activeEditorFileName.endsWith(".md"), [activeEditorFileName]);
@@ -387,8 +386,8 @@ export const EditorTabs = ({
 										</Button>
 									)}
 								</div>
-								<IconButton className="hover:bg-gray-1100" onClick={() => setExpanded(!isExpanded)}>
-									{isExpanded ? (
+								<IconButton className="hover:bg-gray-1100" onClick={toggleFullScreenEditor}>
+									{fullScreenEditor[projectId] ? (
 										<CompressIcon className="size-4 fill-white" />
 									) : (
 										<ExpandIcon className="size-4 fill-white" />

src/components/organisms/splitFrame.tsx

@@ -1,10 +1,10 @@
-import React, { useId, useState } from "react";
+import React, { useId } from "react";
 
 import { useParams } from "react-router-dom";
 
 import { SplitFrameProps } from "@interfaces/components";
 import { defaultSplitFrameSize } from "@src/constants";
-import { useProjectStore } from "@src/store";
+import { useSharedBetweenProjectsStore } from "@src/store";
 import { cn } from "@utilities";
 
 import { useResize } from "@hooks";
@@ -14,17 +14,16 @@ import { EditorTabs } from "@components/organisms";
 
 export const SplitFrame = ({ children }: SplitFrameProps) => {
 	const resizeHorizontalId = useId();
-	const { splitScreenRatio, setEditorWidth } = useProjectStore();
+	const { splitScreenRatio, fullScreenEditor, setEditorWidth } = useSharedBetweenProjectsStore();
 	const { projectId } = useParams();
 	const [leftSideWidth] = useResize({
 		direction: "horizontal",
 		...defaultSplitFrameSize,
 		initial: splitScreenRatio[projectId!]?.assets || defaultSplitFrameSize.initial,
 		id: resizeHorizontalId,
-		onChange: (width) => setEditorWidth({ assets: width }),
+		onChange: (width) => setEditorWidth(projectId!, { assets: width }),
 	});
-	const [isExpanded, setIsExpanded] = useState(false);
-
+	const isExpanded = React.useMemo(() => fullScreenEditor[projectId!], [fullScreenEditor, projectId]);
 	const rightFrameClass = cn(`h-full overflow-hidden rounded-l-none pb-0`, {
 		"rounded-2xl": !children || isExpanded,
 	});
@@ -47,7 +46,7 @@ export const SplitFrame = ({ children }: SplitFrameProps) => {
 
 			<div className="relative flex items-center overflow-hidden" style={{ width: `${rightSideWidth}%` }}>
 				<Frame className={rightFrameClass}>
-					<EditorTabs isExpanded={isExpanded} setExpanded={(expandedState) => setIsExpanded(expandedState)} />
+					<EditorTabs />
 				</Frame>
 			</div>
 		</div>

src/interfaces/store/projectStore.interface.ts

@@ -19,10 +19,8 @@ export interface ProjectStore {
 	latestOpened: LatestOpened;
 	renameProject: (projectId: string, projectName: string) => void;
 	isLoadingProjectsList: boolean;
-	splitScreenRatio: Record<string, { assets: number; sessions: number }>;
 	pendingFile?: File;
 	setPendingFile: (file?: File) => void;
-	setEditorWidth: ({ assets, sessions }: { assets?: number; sessions?: number }) => void;
 	isExporting: boolean;
 	setLatestOpened: (type: keyof Omit<LatestOpened, "projectId">, value: string, projectId?: string) => void;
 }

src/interfaces/store/sharedBetweenProjectsStore.interface.ts

@@ -7,4 +7,8 @@ export interface SharedBetweenProjectsStore {
 			[fileName: string]: EditorCodePosition;
 		};
 	};
+	fullScreenEditor: { [projectId: string]: boolean };
+	setFullScreenEditor: (projectId: string, value: boolean) => void;
+	splitScreenRatio: Record<string, { assets: number; sessions: number }>;
+	setEditorWidth: (projectId: string, { assets, sessions }: { assets?: number; sessions?: number }) => void;
 }

src/store/useProjectStore.ts

@@ -23,13 +23,11 @@ const defaultState: Omit<
 	| "deleteProject"
 	| "exportProject"
 	| "createProjectFromManifest"
-	| "setEditorWidth"
 	| "setPendingFile"
 	| "setLatestOpened"
 > = {
 	projectsList: [],
 	isLoadingProjectsList: true,
-	splitScreenRatio: {},
 	currentProjectId: undefined,
 	pendingFile: undefined,
 	isExporting: false,
@@ -67,21 +65,6 @@ const store: StateCreator<ProjectStore> = (set, get) => ({
 		});
 	},
 
-	setEditorWidth: ({ assets, sessions }) => {
-		const projectId = get().latestOpened.projectId;
-		if (!projectId) return;
-
-		set(({ splitScreenRatio }) => ({
-			splitScreenRatio: {
-				...splitScreenRatio,
-				[projectId]: {
-					assets: assets || splitScreenRatio[projectId]?.assets,
-					sessions: sessions || splitScreenRatio[projectId]?.sessions,
-				},
-			},
-		}));
-	},
-
 	setPendingFile: (file) => {
 		set((state) => {
 			state.pendingFile = file;

src/store/useSharedBetweenProjectsStore.ts

@@ -5,8 +5,10 @@ import { immer } from "zustand/middleware/immer";
 import { StoreName } from "@enums";
 import { SharedBetweenProjectsStore } from "@interfaces/store";
 
-const defaultState: Omit<SharedBetweenProjectsStore, "setCursorPosition"> = {
+const defaultState: Omit<SharedBetweenProjectsStore, "setCursorPosition" | "setFullScreenEditor" | "setEditorWidth"> = {
 	cursorPositionPerProject: {},
+	fullScreenEditor: {},
+	splitScreenRatio: {},
 };
 
 const store: StateCreator<SharedBetweenProjectsStore> = (set) => ({
@@ -21,6 +23,25 @@ const store: StateCreator<SharedBetweenProjectsStore> = (set) => ({
 
 			return state;
 		}),
+
+	setFullScreenEditor: (projectId, value) =>
+		set((state) => {
+			state.fullScreenEditor[projectId] = value;
+
+			return state;
+		}),
+
+	setEditorWidth: (projectId, { assets, sessions }) => {
+		set(({ splitScreenRatio }) => ({
+			splitScreenRatio: {
+				...splitScreenRatio,
+				[projectId]: {
+					assets: assets || splitScreenRatio[projectId]?.assets,
+					sessions: sessions || splitScreenRatio[projectId]?.sessions,
+				},
+			},
+		}));
+	},
 });
 
 export const useSharedBetweenProjectsStore = create(