From b6d639e0848a62d7aad54501c53f4f605314537e Mon Sep 17 00:00:00 2001
From: devleejb <devleejb@gmail.com>
Date: Thu, 31 Oct 2024 17:05:21 +0900
Subject: [PATCH 1/2] Add scroll sync enable options

---
 .../src/components/editor/DocumentView.tsx    |  4 +-
 .../src/components/headers/DocumentHeader.tsx | 23 ++++++-
 .../components/popovers/DocumentPopover.tsx   | 64 +++++++++++++++++++
 frontend/src/store/configSlice.ts             |  8 ++-
 4 files changed, 94 insertions(+), 5 deletions(-)
 create mode 100644 frontend/src/components/popovers/DocumentPopover.tsx

diff --git a/frontend/src/components/editor/DocumentView.tsx b/frontend/src/components/editor/DocumentView.tsx
index 1209458c..de756adc 100644
--- a/frontend/src/components/editor/DocumentView.tsx
+++ b/frontend/src/components/editor/DocumentView.tsx
@@ -6,10 +6,12 @@ import { ScrollSync, ScrollSyncPane } from "react-scroll-sync";
 import { EditorModeType, selectEditor } from "../../store/editorSlice";
 import Editor from "./Editor";
 import Preview from "./Preview";
+import { selectConfig } from "../../store/configSlice";
 
 function DocumentView() {
 	const editorStore = useSelector(selectEditor);
 	const windowWidth = useWindowWidth();
+	const configStore = useSelector(selectConfig);
 
 	if (!editorStore.doc || !editorStore.client)
 		return (
@@ -23,7 +25,7 @@ function DocumentView() {
 			{editorStore.mode === EditorModeType.BOTH && (
 				<Resizable axis={"x"} initial={windowWidth / 2} min={400}>
 					{({ position: width, separatorProps }) => (
-						<ScrollSync>
+						<ScrollSync enabled={!configStore.disableScrollSync}>
 							<div
 								id="wrapper"
 								style={{
diff --git a/frontend/src/components/headers/DocumentHeader.tsx b/frontend/src/components/headers/DocumentHeader.tsx
index 1575ffdf..e6a4374f 100644
--- a/frontend/src/components/headers/DocumentHeader.tsx
+++ b/frontend/src/components/headers/DocumentHeader.tsx
@@ -14,7 +14,7 @@ import {
 	Grid2 as Grid,
 	Typography,
 } from "@mui/material";
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { useNavigate } from "react-router-dom";
 import { useUserPresence } from "../../hooks/useUserPresence";
@@ -23,11 +23,12 @@ import { selectWorkspace } from "../../store/workspaceSlice";
 import { ShareRole } from "../../utils/share";
 import DownloadMenu from "../common/DownloadMenu";
 import ShareButton from "../common/ShareButton";
-import ThemeButton from "../common/ThemeButton";
 import UserPresenceList from "./UserPresenceList";
 import { selectDocument } from "../../store/documentSlice";
 import { useUpdateDocumentTitleMutation } from "../../hooks/api/workspaceDocument";
 import { useSnackbar } from "notistack";
+import DocumentPopover from "../popovers/DocumentPopover";
+import MoreVertIcon from "@mui/icons-material/MoreVert";
 
 function DocumentHeader() {
 	const dispatch = useDispatch();
@@ -42,6 +43,7 @@ function DocumentHeader() {
 	);
 	const isEditingDisabled = Boolean(editorState.shareRole);
 	const { enqueueSnackbar } = useSnackbar();
+	const [moreButtonanchorEl, setMoreButtonAnchorEl] = useState<HTMLButtonElement | null>(null);
 
 	useEffect(() => {
 		if (editorState.shareRole === ShareRole.READ) {
@@ -83,6 +85,14 @@ function DocumentHeader() {
 		enqueueSnackbar("The title is changed successfully", { variant: "success" });
 	};
 
+	const handleMoreButtonClick: React.MouseEventHandler<HTMLButtonElement> = (e) => {
+		setMoreButtonAnchorEl(e.currentTarget);
+	};
+
+	const handleDocumentMenuClose = () => {
+		setMoreButtonAnchorEl(null);
+	};
+
 	return (
 		<AppBar position="static" sx={{ zIndex: 100 }}>
 			<Toolbar>
@@ -148,7 +158,14 @@ function DocumentHeader() {
 						<Stack direction="row" justifyContent="end" gap={1}>
 							<UserPresenceList presenceList={presenceList} />
 							{!editorState.shareRole && <ShareButton />}
-							<ThemeButton />
+							<IconButton color="inherit" onClick={handleMoreButtonClick}>
+								<MoreVertIcon />
+							</IconButton>
+							<DocumentPopover
+								open={Boolean(moreButtonanchorEl)}
+								anchorEl={moreButtonanchorEl}
+								onClose={handleDocumentMenuClose}
+							/>
 						</Stack>
 					</Grid>
 				</Grid>
diff --git a/frontend/src/components/popovers/DocumentPopover.tsx b/frontend/src/components/popovers/DocumentPopover.tsx
new file mode 100644
index 00000000..7813471f
--- /dev/null
+++ b/frontend/src/components/popovers/DocumentPopover.tsx
@@ -0,0 +1,64 @@
+import {
+	ListItemIcon,
+	ListItemText,
+	MenuItem,
+	MenuList,
+	Popover,
+	PopoverProps,
+} from "@mui/material";
+import { useDispatch, useSelector } from "react-redux";
+import { selectConfig, setDisableScrollSync, setTheme, ThemeType } from "../../store/configSlice";
+import { useCurrentTheme } from "../../hooks/useCurrentTheme";
+import DarkModeIcon from "@mui/icons-material/DarkMode";
+import LightModeIcon from "@mui/icons-material/LightMode";
+import ToggleOnIcon from "@mui/icons-material/ToggleOn";
+import ToggleOffIcon from "@mui/icons-material/ToggleOff";
+
+function DocumentPopover(props: PopoverProps) {
+	const dispatch = useDispatch();
+	const themeMode = useCurrentTheme();
+	const configStore = useSelector(selectConfig);
+
+	const handleChangeTheme = () => {
+		dispatch(setTheme(themeMode == ThemeType.LIGHT ? ThemeType.DARK : ThemeType.LIGHT));
+	};
+
+	const handleScrollSyncChange = () => {
+		dispatch(setDisableScrollSync(!configStore.disableScrollSync));
+	};
+
+	return (
+		<Popover
+			anchorOrigin={{
+				vertical: "bottom",
+				horizontal: "right",
+			}}
+			transformOrigin={{
+				vertical: "top",
+				horizontal: "right",
+			}}
+			{...props}
+		>
+			<MenuList>
+				<MenuItem onClick={handleChangeTheme}>
+					<ListItemIcon>
+						{themeMode === "light" ? <LightModeIcon /> : <DarkModeIcon />}
+					</ListItemIcon>
+					<ListItemText>Appearance</ListItemText>
+				</MenuItem>
+				<MenuItem onClick={handleScrollSyncChange}>
+					<ListItemIcon>
+						{configStore.disableScrollSync ? (
+							<ToggleOffIcon />
+						) : (
+							<ToggleOnIcon color="primary" />
+						)}
+					</ListItemIcon>
+					<ListItemText>Panel Scroll Sync</ListItemText>
+				</MenuItem>
+			</MenuList>
+		</Popover>
+	);
+}
+
+export default DocumentPopover;
diff --git a/frontend/src/store/configSlice.ts b/frontend/src/store/configSlice.ts
index f4f40a09..8f8c67a1 100644
--- a/frontend/src/store/configSlice.ts
+++ b/frontend/src/store/configSlice.ts
@@ -17,12 +17,14 @@ export interface ConfigState {
 	theme: ThemeType;
 	drawerOpen: boolean;
 	codeKey: CodeKeyType;
+	disableScrollSync: boolean;
 }
 
 const initialState: ConfigState = {
 	theme: ThemeType.DEFAULT,
 	drawerOpen: true,
 	codeKey: CodeKeyType.SUBLIME,
+	disableScrollSync: false,
 };
 
 export const configSlice = createSlice({
@@ -38,10 +40,14 @@ export const configSlice = createSlice({
 		setCodeKeyType: (state, action: PayloadAction<CodeKeyType>) => {
 			state.codeKey = action.payload;
 		},
+		setDisableScrollSync: (state, action: PayloadAction<boolean>) => {
+			state.disableScrollSync = action.payload;
+		},
 	},
 });
 
-export const { setTheme, setDrawerOpen, setCodeKeyType } = configSlice.actions;
+export const { setTheme, setDrawerOpen, setCodeKeyType, setDisableScrollSync } =
+	configSlice.actions;
 
 export const selectConfig = (state: RootState) => state.config;
 

From 37ae1dcd0b38945caff2e189845cb320fdbcbdf3 Mon Sep 17 00:00:00 2001
From: devleejb <devleejb@gmail.com>
Date: Thu, 31 Oct 2024 17:26:21 +0900
Subject: [PATCH 2/2] Change `themeMode` comparison to strict equality

---
 frontend/src/components/editor/Editor.tsx            | 2 +-
 frontend/src/components/popovers/DocumentPopover.tsx | 2 +-
 frontend/src/components/popovers/ProfilePopover.tsx  | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/editor/Editor.tsx b/frontend/src/components/editor/Editor.tsx
index a7b5fd1e..82bf2ca7 100644
--- a/frontend/src/components/editor/Editor.tsx
+++ b/frontend/src/components/editor/Editor.tsx
@@ -77,7 +77,7 @@ function Editor(props: EditorProps) {
 				keymap.of(setKeymapConfig()),
 				basicSetup({ highlightSelectionMatches: false }),
 				markdown(),
-				themeMode == "light" ? xcodeLight : xcodeDark,
+				themeMode === "light" ? xcodeLight : xcodeDark,
 				EditorView.theme({ "&": { width: "100%" } }),
 				EditorView.lineWrapping,
 				EditorView.updateListener.of((update) => {
diff --git a/frontend/src/components/popovers/DocumentPopover.tsx b/frontend/src/components/popovers/DocumentPopover.tsx
index 7813471f..bb1fc562 100644
--- a/frontend/src/components/popovers/DocumentPopover.tsx
+++ b/frontend/src/components/popovers/DocumentPopover.tsx
@@ -20,7 +20,7 @@ function DocumentPopover(props: PopoverProps) {
 	const configStore = useSelector(selectConfig);
 
 	const handleChangeTheme = () => {
-		dispatch(setTheme(themeMode == ThemeType.LIGHT ? ThemeType.DARK : ThemeType.LIGHT));
+		dispatch(setTheme(themeMode === ThemeType.LIGHT ? ThemeType.DARK : ThemeType.LIGHT));
 	};
 
 	const handleScrollSyncChange = () => {
diff --git a/frontend/src/components/popovers/ProfilePopover.tsx b/frontend/src/components/popovers/ProfilePopover.tsx
index 566f7981..f8c29583 100644
--- a/frontend/src/components/popovers/ProfilePopover.tsx
+++ b/frontend/src/components/popovers/ProfilePopover.tsx
@@ -32,7 +32,7 @@ function ProfilePopover(props: PopoverProps) {
 	};
 
 	const handleChangeTheme = () => {
-		dispatch(setTheme(themeMode == ThemeType.LIGHT ? ThemeType.DARK : ThemeType.LIGHT));
+		dispatch(setTheme(themeMode === ThemeType.LIGHT ? ThemeType.DARK : ThemeType.LIGHT));
 	};
 
 	return (