Skip to content

Commit e13c2c9

Browse files
atyrodeatyrode
authored
refactor: simplify main menu (#63)
* feat: implement restore tutorial canvas functionality in SettingsDialog - Added a confirmation dialog for restoring the tutorial canvas, including warning messages about data loss. - Implemented the restore functionality with a button that triggers the canvas reset process. - Enhanced styling for the new buttons and confirmation section in SettingsDialog.scss. * style: update SettingsDialog styles and button text - Removed margin-bottom from the setting class in SettingsDialog.scss for improved layout consistency. - Changed button text from "Yes, Restore" to "I'm sure" in SettingsDialog.tsx for clearer user confirmation. * refactor: remove grid, zen, and view mode toggle functions from MainMenu - Eliminated handleGridToggle, handleZenModeToggle, and handleViewModeToggle functions to streamline the MainMenu component. - Removed associated menu items for toggling grid, zen, and view modes, simplifying the user interface.
1 parent 8f19f82 commit e13c2c9

File tree

3 files changed

+152
-54
lines changed

3 files changed

+152
-54
lines changed

‎src/frontend/src/ui/MainMenu.tsx‎

Lines changed: 0 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -137,35 +137,6 @@ export const MainMenuConfig: React.FC<MainMenuConfigProps> = ({
137137
setShowAccountModal(true);
138138
};
139139

140-
const handleGridToggle = () => {
141-
if (!excalidrawAPI) return;
142-
const appState = excalidrawAPI.getAppState();
143-
appState.gridModeEnabled = !appState.gridModeEnabled;
144-
appState.gridSize = 20;
145-
appState.gridStep = 5;
146-
excalidrawAPI.updateScene({
147-
appState: appState
148-
});
149-
};
150-
151-
const handleZenModeToggle = () => {
152-
if (!excalidrawAPI) return;
153-
const appState = excalidrawAPI.getAppState();
154-
appState.zenModeEnabled = !appState.zenModeEnabled;
155-
excalidrawAPI.updateScene({
156-
appState: appState
157-
});
158-
};
159-
160-
const handleViewModeToggle = () => {
161-
if (!excalidrawAPI) return;
162-
const appState = excalidrawAPI.getAppState();
163-
appState.viewModeEnabled = !appState.viewModeEnabled;
164-
excalidrawAPI.updateScene({
165-
appState: appState
166-
});
167-
};
168-
169140
const handleLogout = async () => {
170141
capture('logout_clicked');
171142

@@ -302,30 +273,6 @@ export const MainMenuConfig: React.FC<MainMenuConfigProps> = ({
302273
Action Button
303274
</MainMenu.Item>
304275
</MainMenu.Group>
305-
306-
<MainMenu.Separator />
307-
308-
<MainMenu.Group title="View">
309-
<MainMenu.Item
310-
icon={<Grid2x2 />}
311-
onClick={handleGridToggle}
312-
>
313-
Toggle grid
314-
</MainMenu.Item>
315-
<MainMenu.Item
316-
icon={<Eye />}
317-
onClick={handleViewModeToggle}
318-
>
319-
View mode
320-
</MainMenu.Item>
321-
<MainMenu.Item
322-
icon={<Coffee />}
323-
onClick={handleZenModeToggle}
324-
>
325-
Zen mode
326-
</MainMenu.Item>
327-
328-
</MainMenu.Group>
329276

330277
<MainMenu.Separator />
331278

‎src/frontend/src/ui/SettingsDialog.scss‎

Lines changed: 74 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,6 @@
4242
}
4343

4444
&__setting {
45-
margin-bottom: 1rem;
4645
padding: 0.5rem;
4746
border-radius: 4px;
4847
background-color: var(--dialog-bg-color);
@@ -59,4 +58,78 @@
5958
margin: 1rem 0;
6059
}
6160

61+
&__restore-button {
62+
display: flex;
63+
align-items: center;
64+
gap: 8px;
65+
padding: 8px 16px;
66+
background-color: var(--button-bg-color, #cc6d24);
67+
border: 1px solid var(--button-border-color, #ddd);
68+
border-radius: 4px;
69+
color: var(--text-primary-color);
70+
cursor: pointer;
71+
font-size: 0.9rem;
72+
transition: background-color 0.2s ease;
73+
74+
&:hover {
75+
background-color: var(--button-hover-bg-color, #a4571b);
76+
}
77+
}
78+
79+
&__confirmation {
80+
padding: 1rem;
81+
border-radius: 4px;
82+
background-color: var(--dialog-bg-color);
83+
border: 1px solid var(--warning-color, #f0ad4e);
84+
}
85+
86+
&__warning {
87+
color: var(--warning-color, #f0ad4e);
88+
font-weight: bold;
89+
margin: 1rem 0;
90+
}
91+
92+
&__actions {
93+
display: flex;
94+
gap: 8px;
95+
margin-top: 1rem;
96+
}
97+
98+
&__button {
99+
padding: 8px 16px;
100+
border-radius: 4px;
101+
cursor: pointer;
102+
font-size: 0.9rem;
103+
border: none;
104+
transition: background-color 0.2s ease;
105+
106+
&--restore {
107+
background-color: var(--danger-color, #d9534f);
108+
color: white;
109+
110+
&:hover {
111+
background-color: var(--danger-hover-color, #c9302c);
112+
}
113+
114+
&:disabled {
115+
background-color: var(--disabled-color, #cccccc);
116+
cursor: not-allowed;
117+
}
118+
}
119+
120+
&--cancel {
121+
background-color: var(--button-bg-color, #cc6d24);
122+
border: 1px solid var(--button-border-color, #ddd);
123+
color: var(--text-primary-color);
124+
125+
&:hover {
126+
background-color: var(--button-hover-bg-color, #a4571b);
127+
}
128+
129+
&:disabled {
130+
background-color: var(--disabled-color, #cccccc);
131+
cursor: not-allowed;
132+
}
133+
}
134+
}
62135
}

‎src/frontend/src/ui/SettingsDialog.tsx‎

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,9 @@ import React, { useState, useCallback, useEffect } from "react";
22
import { Dialog } from "@atyrode/excalidraw";
33
import { Range } from "./Range";
44
import { UserSettings, DEFAULT_SETTINGS } from "../types/settings";
5+
import { RefreshCw } from "lucide-react";
6+
import { normalizeCanvasData } from "../utils/canvasUtils";
7+
import { capture } from "../utils/posthog";
58
import "./SettingsDialog.scss";
69

710
interface SettingsDialogProps {
@@ -15,6 +18,8 @@ const SettingsDialog: React.FC<SettingsDialogProps> = ({
1518
}) => {
1619
const [modalIsShown, setModalIsShown] = useState(true);
1720
const [settings, setSettings] = useState<UserSettings>(DEFAULT_SETTINGS);
21+
const [showRestoreConfirmation, setShowRestoreConfirmation] = useState(false);
22+
const [isRestoring, setIsRestoring] = useState(false);
1823

1924
// Get current settings from excalidrawAPI when component mounts
2025
useEffect(() => {
@@ -35,6 +40,43 @@ const SettingsDialog: React.FC<SettingsDialogProps> = ({
3540
}
3641
}, [onClose]);
3742

43+
const handleRestoreTutorialCanvas = async () => {
44+
if (!excalidrawAPI) return;
45+
46+
try {
47+
setIsRestoring(true);
48+
capture('restore_tutorial_canvas_clicked');
49+
50+
// Fetch the default canvas data from the backend
51+
const response = await fetch('/api/canvas/default', {
52+
method: 'GET',
53+
credentials: 'include'
54+
});
55+
56+
if (!response.ok) {
57+
throw new Error(`Failed to fetch default canvas: ${response.statusText}`);
58+
}
59+
60+
const defaultCanvasData = await response.json();
61+
62+
// Normalize the canvas data before updating the scene
63+
const normalizedData = normalizeCanvasData(defaultCanvasData);
64+
65+
// Update the canvas with the normalized default data
66+
excalidrawAPI.updateScene(normalizedData);
67+
68+
console.log("Canvas reset to default successfully");
69+
70+
// Close the dialog after successful restore
71+
handleClose();
72+
} catch (error) {
73+
console.error("Failed to reset canvas:", error);
74+
} finally {
75+
setIsRestoring(false);
76+
setShowRestoreConfirmation(false);
77+
}
78+
};
79+
3880
/**
3981
* Updates a specific setting and syncs it with the excalidraw app state
4082
* @param key The setting key to update
@@ -92,6 +134,42 @@ const SettingsDialog: React.FC<SettingsDialogProps> = ({
92134
</div>
93135
</div>
94136
</div>
137+
138+
<div className="settings-dialog__section">
139+
<h3 className="settings-dialog__section-title">Canvas Management</h3>
140+
{showRestoreConfirmation ? (
141+
<div className="settings-dialog__confirmation">
142+
<p>Are you sure you want to restore the tutorial canvas?</p>
143+
<p className="settings-dialog__warning">This will replace your current canvas and cannot be undone!</p>
144+
<div className="settings-dialog__actions">
145+
<button
146+
className="settings-dialog__button settings-dialog__button--restore"
147+
onClick={handleRestoreTutorialCanvas}
148+
disabled={isRestoring}
149+
>
150+
{isRestoring ? "Restoring..." : "I'm sure"}
151+
</button>
152+
<button
153+
className="settings-dialog__button settings-dialog__button--cancel"
154+
onClick={() => setShowRestoreConfirmation(false)}
155+
disabled={isRestoring}
156+
>
157+
Cancel
158+
</button>
159+
</div>
160+
</div>
161+
) : (
162+
<div className="settings-dialog__setting">
163+
<button
164+
className="settings-dialog__restore-button"
165+
onClick={() => setShowRestoreConfirmation(true)}
166+
>
167+
<RefreshCw size={16} />
168+
<span>Restore Tutorial Canvas</span>
169+
</button>
170+
</div>
171+
)}
172+
</div>
95173
</div>
96174
);
97175

0 commit comments

Comments
 (0)