Fix popovers for editing when sidebar is off

src/components/Area.jsx

@@ -11,6 +11,7 @@ import {
   ObjectType,
   tableThemes,
   defaultTableTheme,
+  State,
 } from "../data/data";
 import {
   AreaContext,
@@ -23,9 +24,8 @@ import {
 
 export default function Area(props) {
   const [hovered, setHovered] = useState(false);
-  const [saved, setSaved] = useState(false);
   const [editField, setEditField] = useState({});
-  const { layout } = useContext(LayoutContext);
+  const { layout, setState } = useContext(LayoutContext);
   const { settings } = useContext(SettingsContext);
   const { tab, setTab } = useContext(TabContext);
   const { updateArea, deleteArea } = useContext(AreaContext);
@@ -49,7 +49,6 @@ export default function Area(props) {
       onMouseEnter={() => setHovered(true)}
       onMouseLeave={() => {
         setHovered(false);
-        setSaved(false);
       }}
     >
       <foreignObject
@@ -96,6 +95,7 @@ export default function Area(props) {
                   ...prev,
                   openDialogue: false,
                 }));
+                setState(State.SAVING);
               }}
               stopPropagation
               content={
@@ -113,7 +113,6 @@ export default function Area(props) {
                       }
                       onFocus={(e) => setEditField({ name: e.target.value })}
                       onBlur={(e) => {
-                        setSaved(true);
                         if (e.target.value === editField.name) return;
                         setUndoStack((prev) => [
                           ...prev,
@@ -137,11 +136,12 @@ export default function Area(props) {
                             <Button
                               type="tertiary"
                               size="small"
-                              onClick={() =>
+                              onClick={() => {
                                 updateArea(props.areaData.id, {
                                   color: defaultTableTheme,
-                                })
-                              }
+                                });
+                                setState(State.SAVING);
+                              }}
                             >
                               Clear
                             </Button>
@@ -245,30 +245,6 @@ export default function Area(props) {
                     >
                       Delete
                     </Button>
-                    <Button
-                      block
-                      style={{ marginLeft: "8px" }}
-                      onClick={() => {
-                        if (!saved) {
-                          if (props.areaData.name === editField.name) return;
-                          setUndoStack((prev) => [
-                            ...prev,
-                            {
-                              action: Action.EDIT,
-                              element: ObjectType.AREA,
-                              aid: props.areaData.id,
-                              undo: editField,
-                              redo: { name: props.areaData.name },
-                              message: `Edit area name to ${props.areaData.name}`,
-                            },
-                          ]);
-                          setRedoStack([]);
-                          setSaved(false);
-                        }
-                      }}
-                    >
-                      Save
-                    </Button>
                   </div>
                 </div>
               }

src/components/AreaOverview.jsx

@@ -24,10 +24,12 @@ import {
   tableThemes,
   Action,
   ObjectType,
+  State,
 } from "../data/data";
-import { AreaContext, UndoRedoContext } from "../pages/Editor";
+import { AreaContext, LayoutContext, UndoRedoContext } from "../pages/Editor";
 
 export default function AreaOverview() {
+  const { setState } = useContext(LayoutContext);
   const { areas, addArea, deleteArea, updateArea } = useContext(AreaContext);
   const { setUndoStack, setRedoStack } = useContext(UndoRedoContext);
   const [editField, setEditField] = useState({});
@@ -135,9 +137,10 @@ export default function AreaOverview() {
                         <Button
                           type="tertiary"
                           size="small"
-                          onClick={() =>
-                            updateArea(i, { color: defaultTableTheme })
-                          }
+                          onClick={() => {
+                            updateArea(i, { color: defaultTableTheme });
+                            setState(State.SAVING);
+                          }}
                         >
                           Clear
                         </Button>

src/components/Note.jsx

@@ -6,7 +6,7 @@ import {
   TabContext,
   SelectContext,
 } from "../pages/Editor";
-import { Action, ObjectType, noteThemes, Tab } from "../data/data";
+import { Action, ObjectType, noteThemes, Tab, State } from "../data/data";
 import { Input, Button, Popover, Toast } from "@douyinfe/semi-ui";
 import {
   IconEdit,
@@ -22,7 +22,7 @@ export default function Note(props) {
   const fold = 24;
   const { updateNote, deleteNote } = useContext(NoteContext);
   const { setUndoStack, setRedoStack } = useContext(UndoRedoContext);
-  const { layout } = useContext(LayoutContext);
+  const { layout, setState } = useContext(LayoutContext);
   const { tab, setTab } = useContext(TabContext);
   const { selectedElement, setSelectedElement } = useContext(SelectContext);
 
@@ -146,6 +146,7 @@ export default function Note(props) {
                     ...prev,
                     openDialogue: false,
                   }));
+                  setState(State.SAVING);
                 }}
                 stopPropagation
                 content={