feat: Keep the last calculator mode the next time the user opens the app

src/App.tsx

@@ -4,6 +4,7 @@ import { AliveScope } from "react-activation";
 import { shortcuts } from "@/global";
 import { Mode, RenderedFunction } from "@/types";
 import Utils from "@/utils/Utils";
+import Storage from "@/utils/Storage";
 import { Axis } from "@/renderer/Graphics";
 
 import usePreloader from "@/hooks/usePreloader";
@@ -26,7 +27,7 @@ import StatusBar from "@/components/statusbar";
 import MainContext from "@/contexts/MainContext";
 
 const App: React.FC = () => {
-	const [mode, setMode] = useState<Mode>(Mode.GENERAL);
+	const [mode, setMode] = useState<Mode>(new Storage().getItem("ca-mode", Mode.GENERAL) as Mode);
 	const [functionList, setFunctionList] = useState<RenderedFunction[]>([]);
 	const [axis, setAxisType] = useState<Axis>(Axis.CARTESIAN);
 

src/components/navbar/ModeButton.tsx

@@ -1,9 +1,12 @@
 /* eslint-disable react-hooks/exhaustive-deps */
-import React, { useState, useEffect, useContext, useId } from "react";
+import React, { useState, useContext, useId } from "react";
 
 import { Mode } from "@/types";
 import Utils from "@/utils/Utils";
 import Emitter from "@/utils/Emitter";
+import Storage from "@/utils/Storage";
+
+import useEmitter from "@/hooks/useEmitter";
 
 import MainContext from "@/contexts/MainContext";
 
@@ -22,19 +25,17 @@ const ModeButton: React.FC<ModeButtonProps> = (props) => {
         new Emitter().emit("switch-mode", props.mode);
     };
 
-    useEffect(() => {
-        // default
-        new Emitter().emit("switch-mode", Mode.GENERAL);
-
-        new Emitter().on("switch-mode", (newMode: Mode) => {
+    useEmitter([
+        ["switch-mode", (newMode: Mode) => {
             setMode(newMode);
             setIsActive(newMode === props.mode);
 
             if(newMode === props.mode) {
                 document.title = "Calcium - "+ props.name;
+                new Storage().setItem("ca-mode", props.mode);
             }
-        });
-    }, []);
+        }]
+    ]);
 
     return (
         <div className="mode-button-container">

src/components/navbar/index.tsx

@@ -1,4 +1,4 @@
-import React, { useRef } from "react";
+import React, { useEffect, useRef } from "react";
 import Toggle from "@nocp/toggle";
 
 import ModeButton from "@/components/navbar/ModeButton";
@@ -8,6 +8,7 @@ import ConvertingDialog from "@/dialogs/ConvertingDialog";
 import SeniorityDialog from "@/dialogs/SeniorityDialog";
 import CurrencyDialog from "@/dialogs/CurrencyDialog";
 
+import Emitter from "@/utils/Emitter";
 import Storage from "@/utils/Storage";
 import useThemeDetector from "@/hooks/useThemeDetector";
 import { Mode, Theme } from "@/types";
@@ -20,13 +21,18 @@ const Navbar: React.FC = () => {
     const convertingDialogRef = useRef<Dialog>(null);
     const seniorityDialogRef = useRef<Dialog>(null);
     const currencyDialogRef = useRef<Dialog>(null);
-    const themeValue = new Storage().getItem("theme", useThemeDetector());
+    const themeValue = new Storage().getItem("ca-theme", useThemeDetector());
 
     const handleToggle = (isActive: boolean) => {
         document.body.setAttribute("theme", isActive ? Theme.LIGHT : Theme.DARK);
-        new Storage().setItem("theme", isActive ? Theme.LIGHT : Theme.DARK);
+        new Storage().setItem("ca-theme", isActive ? Theme.LIGHT : Theme.DARK);
     };
 
+    useEffect(() => {
+        // default
+        new Emitter().emit("switch-mode", new Storage().getItem("ca-mode", Mode.GENERAL) as Mode);
+    }, []);
+
     return (
         <>
             <nav className="navbar">

src/components/sidebar/index.tsx

@@ -21,7 +21,7 @@ const Sidebar: React.FC = () => {
     const { mode } = useContext(MainContext);
     const [sidebarOpen, setSidebarOpen] = useState<boolean>(!Utils.isMobile());
     const [width, setWidth] = useState<number>(362);
-    const themeValue = new Storage().getItem("theme", useThemeDetector());
+    const themeValue = new Storage().getItem("ca-theme", useThemeDetector());
 
     const layoutSwitch = (calcMode: Mode) => {
         switch(calcMode) {

src/types.ts

@@ -8,9 +8,9 @@ export interface ReducerAction<T, P> {
 }
 
 export enum Mode {
-    GENERAL = 0,
-    GRAPHING = 1,
-    PROGRAMMING = 2
+    GENERAL = "general",
+    GRAPHING = "graphing",
+    PROGRAMMING = "programming"
 }
 
 export enum Theme {