Use mutation for collapsed state updates

src/components/sidebar/CollapsibleSection.vue

@@ -20,6 +20,7 @@
 	import {defineComponent} from "@vue/runtime-core";
 	import SvgIcon from "@/components/SvgIcon.vue";
 	import '@/assets/icons/arrow.svg';
+	import {MutationTypes} from "@/store/mutation-types";
 
 	export default defineComponent({
 		name: 'CollapsibleSection',
@@ -37,7 +38,7 @@
 			},
 
 			collapsed(): boolean {
-				return useStore().state.ui.collapsedSections.has(this.name);
+				return useStore().state.ui.sidebar.collapsedSections.has(this.name);
 			},
 		},
 
@@ -53,13 +54,7 @@
 			},
 
 			toggle() {
-				const store = useStore();
+				useStore().commit(MutationTypes.TOGGLE_SIDEBAR_SECTION_COLLAPSED_STATE, this.name);
-
-				if(this.collapsed) {
-					store.state.ui.collapsedSections.delete(this.name);
-				} else {
-					store.state.ui.collapsedSections.add(this.name);
-				}
 			}
 		}
 	});

src/store/mutation-types.ts

@@ -60,5 +60,8 @@ export enum MutationTypes {
 	TOGGLE_UI_ELEMENT_VISIBILITY = 'toggleUIElementVisibility',
 	SET_UI_ELEMENT_VISIBILITY = 'setUIElementVisibility',
 
+	TOGGLE_SIDEBAR_SECTION_COLLAPSED_STATE = 'toggleSidebarSectionCollapsedState',
+	SET_SIDEBAR_SECTION_COLLAPSED_STATE = 'setSidebarSectionCollapsedState',
+
 	SET_LOGGED_IN = 'setLoggedIn',
 }

src/store/mutations.ts

@@ -31,7 +31,7 @@ import {
 	DynmapWorldState, DynmapParsedUrl, DynmapChat
 } from "@/dynmap";
 import {DynmapProjection} from "@/leaflet/projection/DynmapProjection";
-import {LiveAtlasMessageConfig, LiveAtlasServerDefinition, LiveAtlasUIElement} from "@/index";
+import {LiveAtlasMessageConfig, LiveAtlasServerDefinition, LiveAtlasSidebarSection, LiveAtlasUIElement} from "@/index";
 
 export type CurrentMapPayload = {
 	worldName: string;
@@ -83,6 +83,9 @@ export type Mutations<S = State> = {
 	[MutationTypes.TOGGLE_UI_ELEMENT_VISIBILITY](state: S, payload: LiveAtlasUIElement): void
 	[MutationTypes.SET_UI_ELEMENT_VISIBILITY](state: S, payload: {element: LiveAtlasUIElement, state: boolean}): void
 
+	[MutationTypes.TOGGLE_SIDEBAR_SECTION_COLLAPSED_STATE](state: S, section: LiveAtlasSidebarSection): void
+	[MutationTypes.SET_SIDEBAR_SECTION_COLLAPSED_STATE](state: S, payload: {section: LiveAtlasSidebarSection, state: boolean}): void
+
 	[MutationTypes.SET_LOGGED_IN](state: S, payload: boolean): void
 }
 
@@ -532,6 +535,22 @@ export const mutations: MutationTree<State> & Mutations = {
 		payload.state ? state.ui.visibleElements.add(payload.element) : state.ui.visibleElements.delete(payload.element);
 	},
 
+	[MutationTypes.TOGGLE_SIDEBAR_SECTION_COLLAPSED_STATE](state: State, section: LiveAtlasSidebarSection): void {
+		if(state.ui.sidebar.collapsedSections.has(section)) {
+			state.ui.sidebar.collapsedSections.delete(section);
+		} else {
+			state.ui.sidebar.collapsedSections.add(section);
+		}
+	},
+
+	[MutationTypes.SET_SIDEBAR_SECTION_COLLAPSED_STATE](state: State, payload: {section: LiveAtlasSidebarSection, state: boolean}): void {
+		if (payload.state) {
+			state.ui.sidebar.collapsedSections.delete(payload.section);
+		} else {
+			state.ui.sidebar.collapsedSections.add(payload.section);
+		}
+	},
+
 	[MutationTypes.SET_LOGGED_IN](state: State, payload: boolean): void {
 		state.loggedIn = payload;
 	}

src/store/state.ts

@@ -65,7 +65,10 @@ export type State = {
 		smallScreen: boolean;
 		visibleElements: Set<LiveAtlasUIElement>;
 		previouslyVisibleElements: Set<LiveAtlasUIElement>;
+
+		sidebar: {
 			collapsedSections: Set<LiveAtlasSidebarSection>;
+		}
 	};
 
 	parsedUrl: DynmapParsedUrl;
@@ -209,8 +212,11 @@ export const state: State = {
 		smallScreen: false,
 		visibleElements:new Set(),
 		previouslyVisibleElements: new Set(),
+
+		sidebar: {
 			collapsedSections: new Set(),
 		},
+	},
 
 	parsedUrl: {
 		world: undefined,