From 450a5ee46cad4039d1531ff1b1273f1bdf319e97 Mon Sep 17 00:00:00 2001
From: James Lyne <jim+github@not-null.co.uk>
Date: Mon, 10 Jan 2022 19:36:06 +0000
Subject: [PATCH] Refactor sidebar sections

- Rename CollapsibleSection to SidebarSection with a collapsible prop
- Move section__content element to SidebarSection
- Move sidebar section styling to SidebarSection
---
 src/components/Sidebar.vue                    |  76 -------
 src/components/sidebar/CollapsibleSection.vue |  82 --------
 src/components/sidebar/PlayerList.vue         |  26 ++-
 src/components/sidebar/ServerList.vue         |  10 +-
 src/components/sidebar/SidebarSection.vue     | 191 ++++++++++++++++++
 src/components/sidebar/WorldList.vue          |  12 +-
 src/index.d.ts                                |   4 +
 src/main.ts                                   |   4 +-
 src/store/mutations.ts                        |  36 +++-
 src/store/state.ts                            |  13 +-
 10 files changed, 256 insertions(+), 198 deletions(-)
 delete mode 100644 src/components/sidebar/CollapsibleSection.vue
 create mode 100644 src/components/sidebar/SidebarSection.vue

diff --git a/src/components/Sidebar.vue b/src/components/Sidebar.vue
index ed40baa..e03398d 100644
--- a/src/components/Sidebar.vue
+++ b/src/components/Sidebar.vue
@@ -152,8 +152,6 @@ export default defineComponent({
 </script>
 
 <style lang="scss">
-@import '../scss/placeholders';
-
 .sidebar {
 	position: fixed;
 	z-index: 110;
@@ -230,80 +228,6 @@ export default defineComponent({
 		}
 	}
 
-	.sidebar__section {
-		@extend %panel;
-		margin-bottom: var(--ui-element-spacing);
-		box-sizing: border-box;
-		width: 100%;
-		max-width: 25rem;
-		flex: 0 0 auto;
-
-		.section__heading {
-			cursor: pointer;
-			user-select: none;
-			text-align: left;
-			align-items: center;
-			margin: 0;
-
-			button {
-				display: flex;
-				font-size: 2rem;
-				padding: 1.5rem 1.5rem 1rem;
-				margin: -1.5rem -1.5rem 0;
-				background-color: transparent;
-				font-weight: 400;
-				color: inherit;
-				width: calc(100% + 3rem);
-				align-items: center;
-				text-shadow: var(--text-shadow);
-
-				.svg-icon {
-					margin-left: auto;
-					width: 1.5rem;
-					height: 1.5rem;
-				}
-			}
-
-			&:hover, &:focus-visible, &.focus-visible, &:active {
-				background-color: transparent;
-			}
-		}
-
-		.section__content {
-			padding: 0 0.5rem;
-			margin: 0 -.5rem 1rem;
-			min-width: 0;
-
-			&:last-child {
-				margin-bottom: 0;
-			}
-		}
-
-		.section__skeleton {
-			font-style: italic;
-			color: var(--text-disabled);
-			text-align: center;
-			align-self: center;
-			margin-top: 1rem;
-		}
-
-		&.section--collapsed {
-			.section__heading button {
-				padding-bottom: 1.5rem;
-				margin-bottom: -1.5rem;
-			}
-
-			.section__content {
-				display: none;
-			}
-		}
-
-		@media (max-width: 320px) {
-			box-sizing: border-box;
-			width: 100%;
-		}
-	}
-
 	@media (max-width: 480px) {
 		padding-right: 7rem;
 		padding-top: 0.8rem;
diff --git a/src/components/sidebar/CollapsibleSection.vue b/src/components/sidebar/CollapsibleSection.vue
deleted file mode 100644
index 0c781b5..0000000
--- a/src/components/sidebar/CollapsibleSection.vue
+++ /dev/null
@@ -1,82 +0,0 @@
-<!--
-  - Copyright 2021 James Lyne
-  -
-  - Licensed under the Apache License, Version 2.0 (the "License");
-  - you may not use this file except in compliance with the License.
-  - You may obtain a copy of the License at
-  -
-  - http://www.apache.org/licenses/LICENSE-2.0
-  -
-  - Unless required by applicable law or agreed to in writing, software
-  - distributed under the License is distributed on an "AS IS" BASIS,
-  - WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-  - See the License for the specific language governing permissions and
-  - limitations under the License.
-  -->
-
-<template>
-	<section :class="{'sidebar__section': true, 'section--collapsible': true, 'section--collapsed': collapsed}">
-		<h2 class="section__heading">
-			<button :id="`${name}-heading`" type="button"
-			        @click.prevent="toggle" :title="title"
-			        :aria-expanded="!collapsed" :aria-controls="`${name}-content`">
-				<span>
-					<slot name="heading"></slot>
-				</span>
-				<SvgIcon name="arrow"></SvgIcon>
-			</button>
-		</h2>
-		<div :id="`${name}-content`" :aria-hidden="collapsed">
-			<slot></slot>
-		</div>
-	</section>
-</template>
-
-<script lang="ts">
-	import {useStore} from "@/store";
-	import {LiveAtlasSidebarSection} from "@/index";
-	import {defineComponent} from "@vue/runtime-core";
-	import SvgIcon from "@/components/SvgIcon.vue";
-	import '@/assets/icons/arrow.svg';
-	import {MutationTypes} from "@/store/mutation-types";
-	import {computed} from "vue";
-
-	export default defineComponent({
-		name: 'CollapsibleSection',
-		components: {SvgIcon},
-		props: {
-			name: {
-				type: String as () => LiveAtlasSidebarSection,
-				required: true,
-			}
-		},
-
-		setup(props) {
-			const store = useStore(),
-				title = computed(() => store.state.messages.toggleTitle),
-				collapsed = computed(() => store.state.ui.sidebar.collapsedSections.has(props.name));
-
-			const toggle = () => store.commit(MutationTypes.TOGGLE_SIDEBAR_SECTION_COLLAPSED_STATE, props.name);
-
-			return {
-				title,
-				collapsed,
-				toggle
-			}
-		}
-	});
-</script>
-
-<style lang="scss" scoped>
-	.section--collapsible {
-		.section__heading .svg-icon {
-			transform: rotate(180deg);
-		}
-
-		&.section--collapsed {
-			.section__heading .svg-icon {
-				transform: none;
-			}
-		}
-	}
-</style>
diff --git a/src/components/sidebar/PlayerList.vue b/src/components/sidebar/PlayerList.vue
index 1fc36be..67888f1 100644
--- a/src/components/sidebar/PlayerList.vue
+++ b/src/components/sidebar/PlayerList.vue
@@ -15,35 +15,33 @@
   -->
 
 <template>
-	<CollapsibleSection name="players" class="players">
+	<SidebarSection name="players" class="players">
 		<template v-slot:heading>{{ messageHeading }}</template>
 		<template v-slot:default>
-			<div class="section__content">
-				<input v-if="players && searchEnabled" id="players__search" type="text" name="search"
-				       v-model="searchQuery" :placeholder="messagePlayersSearchPlaceholder" @keydown="onKeydown">
-				<RadioList v-if="filteredPlayers.length" aria-labelledby="players-heading">
-					<PlayerListItem v-for="player in filteredPlayers" :key="player.name"
-					                :player="player"></PlayerListItem>
-				</RadioList>
-				<div v-else-if="searchQuery" class="section__skeleton">{{ messageSkeletonPlayersSearch }}</div>
-				<div v-else class="section__skeleton">{{ messageSkeletonPlayers }}</div>
-			</div>
+			<input v-if="players && searchEnabled" id="players__search" type="text" name="search"
+			       v-model="searchQuery" :placeholder="messagePlayersSearchPlaceholder" @keydown="onKeydown">
+			<RadioList v-if="filteredPlayers.length" aria-labelledby="players-heading">
+				<PlayerListItem v-for="player in filteredPlayers" :key="player.name"
+				                :player="player"></PlayerListItem>
+			</RadioList>
+			<div v-else-if="searchQuery" class="section__skeleton">{{ messageSkeletonPlayersSearch }}</div>
+			<div v-else class="section__skeleton">{{ messageSkeletonPlayers }}</div>
 		</template>
-	</CollapsibleSection>
+	</SidebarSection>
 </template>
 
 <script lang="ts">
 import PlayerListItem from "./PlayerListItem.vue";
 import {computed, defineComponent} from "@vue/runtime-core";
 import {useStore} from "@/store";
-import CollapsibleSection from "@/components/sidebar/CollapsibleSection.vue";
 import RadioList from "@/components/util/RadioList.vue";
 import {ref} from "vue";
+import SidebarSection from "@/components/sidebar/SidebarSection.vue";
 
 export default defineComponent({
 	components: {
+		SidebarSection,
 		RadioList,
-		CollapsibleSection,
 		PlayerListItem
 	},
 
diff --git a/src/components/sidebar/ServerList.vue b/src/components/sidebar/ServerList.vue
index 542a9e5..85a8671 100644
--- a/src/components/sidebar/ServerList.vue
+++ b/src/components/sidebar/ServerList.vue
@@ -15,28 +15,28 @@
   -->
 
 <template>
-	<CollapsibleSection v-if="servers.size > 1" name="servers">
+	<SidebarSection v-if="servers.size > 1" name="servers">
 		<template v-slot:heading>{{ heading }}</template>
 		<template v-slot:default>
-			<RadioList class="section__content" aria-labelledby="servers-heading">
+			<RadioList aria-labelledby="servers-heading">
 				<ServerListItem :server="server" v-for="[name, server] in servers" :key="name"></ServerListItem>
 			</RadioList>
 		</template>
-	</CollapsibleSection>
+	</SidebarSection>
 </template>
 
 <script lang="ts">
 import ServerListItem from './ServerListItem.vue';
 import {computed, defineComponent} from 'vue';
 import {useStore} from "@/store";
-import CollapsibleSection from "@/components/sidebar/CollapsibleSection.vue";
+import SidebarSection from "@/components/sidebar/SidebarSection.vue";
 import RadioList from "@/components/util/RadioList.vue";
 
 export default defineComponent({
 	name: 'ServerList',
 	components: {
 		RadioList,
-		CollapsibleSection,
+		SidebarSection,
 		ServerListItem
 	},
 
diff --git a/src/components/sidebar/SidebarSection.vue b/src/components/sidebar/SidebarSection.vue
new file mode 100644
index 0000000..b9ac83f
--- /dev/null
+++ b/src/components/sidebar/SidebarSection.vue
@@ -0,0 +1,191 @@
+<!--
+  - Copyright 2021 James Lyne
+  -
+  - Licensed under the Apache License, Version 2.0 (the "License");
+  - you may not use this file except in compliance with the License.
+  - You may obtain a copy of the License at
+  -
+  - http://www.apache.org/licenses/LICENSE-2.0
+  -
+  - Unless required by applicable law or agreed to in writing, software
+  - distributed under the License is distributed on an "AS IS" BASIS,
+  - WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  - See the License for the specific language governing permissions and
+  - limitations under the License.
+  -->
+
+<template>
+	<section :class="{
+		'sidebar__section': true,
+		'section--collapsible': collapsible,
+		'section--collapsed': collapsed
+	}" :data-section="name">
+		<h2 class="section__heading">
+			<button :id="`${name}-heading`" type="button"
+			        @click.prevent="toggle" :title="title"
+			        :aria-expanded="!collapsed" :aria-controls="`${name}-content`">
+				<span>
+					<slot name="heading"></slot>
+				</span>
+				<SvgIcon name="arrow"></SvgIcon>
+			</button>
+		</h2>
+		<div :id="`${name}-content`" class="section__content" :aria-hidden="collapsed">
+			<slot></slot>
+		</div>
+	</section>
+</template>
+
+<script lang="ts">
+import {useStore} from "@/store";
+import {LiveAtlasSidebarSection} from "@/index";
+import {defineComponent} from "@vue/runtime-core";
+import SvgIcon from "@/components/SvgIcon.vue";
+import '@/assets/icons/arrow.svg';
+import {MutationTypes} from "@/store/mutation-types";
+import {computed, ref} from "vue";
+
+export default defineComponent({
+	name: 'SidebarSection',
+	components: {SvgIcon},
+	props: {
+		name: {
+			type: String as () => LiveAtlasSidebarSection,
+			required: true,
+		},
+		collapsible: {
+			type: Boolean,
+			required: false,
+			default: true,
+		}
+	},
+
+	setup(props) {
+		const store = useStore(),
+			title = computed(() => store.state.messages.toggleTitle),
+			collapsed = computed(() => store.state.ui.sidebar[props.name].collapsed),
+			customPosition = computed(() => store.state.ui.sidebar[props.name].customPosition),
+			customSize = computed(() => store.state.ui.sidebar[props.name].customSize),
+			smallScreen = computed(() => store.state.ui.smallScreen),
+
+			offsetX = ref(0),
+			offsetY = ref(0);
+
+		const toggle = () => {
+			if(!props.collapsible) {
+				return;
+			}
+
+			store.commit(MutationTypes.TOGGLE_SIDEBAR_SECTION_COLLAPSED_STATE, props.name);
+		}
+
+		return {
+			title,
+			collapsed,
+			customPosition,
+			customSize,
+			smallScreen,
+			toggle,
+		}
+	}
+});
+</script>
+
+<style lang="scss">
+	@import '../../scss/placeholders';
+
+	.sidebar__section {
+		@extend %panel;
+		margin-bottom: var(--ui-element-spacing);
+		box-sizing: border-box;
+		width: 100%;
+		max-width: 25rem;
+		flex: 0 0 auto;
+
+		.section__heading {
+			cursor: pointer;
+			user-select: none;
+			text-align: left;
+			align-items: center;
+			margin: 0;
+
+			button {
+				display: flex;
+				font-size: 2rem;
+				padding: 1.5rem 1.5rem 1rem;
+				margin: -1.5rem -1.5rem 0;
+				background-color: transparent;
+				font-weight: 400;
+				color: inherit;
+				width: calc(100% + 3rem);
+				align-items: center;
+				text-shadow: var(--text-shadow);
+
+				.svg-icon {
+					margin-left: auto;
+					width: 1.5rem;
+					height: 1.5rem;
+				}
+			}
+
+			&:hover, &:focus-visible, &.focus-visible, &:active {
+				background-color: transparent;
+			}
+		}
+
+		.section__content {
+			padding: 0 0.5rem;
+			margin: 0 -.5rem 1rem;
+			min-width: 0;
+			position: relative;
+
+			&:last-child {
+				margin-bottom: 0;
+			}
+		}
+
+		.section__skeleton {
+			font-style: italic;
+			color: var(--text-disabled);
+			text-align: center;
+			align-self: center;
+			margin-top: 1rem;
+		}
+
+		&.section--collapsible {
+			.section__heading .svg-icon {
+				transform: rotate(180deg);
+			}
+
+			&.section--collapsed {
+				.section__heading .svg-icon {
+					transform: none;
+				}
+
+				.section__heading button {
+					padding-bottom: 1.5rem;
+					margin-bottom: -1.5rem;
+				}
+
+				.section__content {
+					display: none;
+				}
+			}
+
+			.section__content {
+				display: flex;
+				flex-direction: column;
+				align-items: stretch;
+				flex-shrink: 1;
+				min-height: 0;
+				overflow-y: auto;
+				overflow-x: hidden;
+			}
+		}
+
+		@media (max-width: 320px) {
+			box-sizing: border-box;
+			width: 100%;
+		}
+	}
+</style>
diff --git a/src/components/sidebar/WorldList.vue b/src/components/sidebar/WorldList.vue
index 75fb5ad..cda8a63 100644
--- a/src/components/sidebar/WorldList.vue
+++ b/src/components/sidebar/WorldList.vue
@@ -15,29 +15,29 @@
   -->
 
 <template>
-	<CollapsibleSection name="maps">
+	<SidebarSection name="maps">
 		<template v-slot:heading>{{ heading }}</template>
 		<template v-slot:default>
-			<RadioList v-if="worlds.size" class="section__content" aria-labelledby="maps-heading">
+			<RadioList v-if="worlds.size" aria-labelledby="maps-heading">
 				<WorldListItem :world="world" v-for="[name, world] in worlds" :key="`${prefix}_${currentServer}_${name}`"></WorldListItem>
 			</RadioList>
-			<div v-else class="section__content section__skeleton">{{ skeleton }}</div>
+			<div v-else class="section__skeleton">{{ skeleton }}</div>
 		</template>
-	</CollapsibleSection>
+	</SidebarSection>
 </template>
 
 <script lang="ts">
 import WorldListItem from './WorldListItem.vue';
 import {computed, defineComponent} from 'vue';
 import {useStore} from "@/store";
-import CollapsibleSection from "@/components/sidebar/CollapsibleSection.vue";
 import RadioList from "@/components/util/RadioList.vue";
+import SidebarSection from "@/components/sidebar/SidebarSection.vue";
 
 export default defineComponent({
 	name: 'WorldList',
 	components: {
+		SidebarSection,
 		RadioList,
-		CollapsibleSection,
 		WorldListItem
 	},
 
diff --git a/src/index.d.ts b/src/index.d.ts
index 7377c60..a3559a1 100644
--- a/src/index.d.ts
+++ b/src/index.d.ts
@@ -160,6 +160,10 @@ export type LiveAtlasUIModal = 'login' | 'settings';
 export type LiveAtlasSidebarSection = 'servers' | 'players' | 'maps';
 export type LiveAtlasDimension = 'overworld' | 'nether' | 'end';
 
+export type LiveAtlasSidebarSectionState = {
+	collapsed?: boolean;
+}
+
 interface LiveAtlasPlayer {
 	name: string;
 	displayName: string;
diff --git a/src/main.ts b/src/main.ts
index 08981a9..70c9953 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -43,7 +43,9 @@ console.info(`LiveAtlas version ${store.state.version} - https://github.com/JLyn
 
 store.subscribe((mutation, state) => {
 	if(mutation.type === 'toggleSidebarSectionCollapsedState' || mutation.type === 'setSidebarSectionCollapsedState') {
-		localStorage.setItem('collapsedSections', JSON.stringify(Array.from(state.ui.sidebar.collapsedSections)));
+		localStorage.setItem('uiSettings', JSON.stringify({
+			sidebar: state.ui.sidebar,
+		}));
 	}
 });
 
diff --git a/src/store/mutations.ts b/src/store/mutations.ts
index e89b305..176067f 100644
--- a/src/store/mutations.ts
+++ b/src/store/mutations.ts
@@ -39,7 +39,12 @@ import {
 	LiveAtlasMarker,
 	LiveAtlasMarkerSet,
 	LiveAtlasServerDefinition,
-	LiveAtlasServerConfig, LiveAtlasChat, LiveAtlasPartialComponentConfig, LiveAtlasComponentConfig, LiveAtlasUIModal
+	LiveAtlasServerConfig,
+	LiveAtlasChat,
+	LiveAtlasPartialComponentConfig,
+	LiveAtlasComponentConfig,
+	LiveAtlasUIModal,
+	LiveAtlasSidebarSectionState
 } from "@/index";
 import DynmapMapProvider from "@/providers/DynmapMapProvider";
 import Pl3xmapMapProvider from "@/providers/Pl3xmapMapProvider";
@@ -97,12 +102,27 @@ export type Mutations<S = State> = {
 
 export const mutations: MutationTree<State> & Mutations = {
 	[MutationTypes.INIT](state: State, config: LiveAtlasGlobalConfig) {
-		const collapsedSections = localStorage.getItem('collapsedSections'),
-			messageConfig = config?.messages || {},
+		const messageConfig = config?.messages || {},
 			uiConfig = config?.ui || {};
 
-		if(collapsedSections) {
-			state.ui.sidebar.collapsedSections = new Set(JSON.parse(collapsedSections));
+		try {
+			const uiSettings = JSON.parse(localStorage.getItem('uiSettings') || '{}');
+
+			if(uiSettings && uiSettings.sidebar) {
+				for(const element in uiSettings.sidebar) {
+					const elementState: LiveAtlasSidebarSectionState = uiSettings.sidebar[element];
+
+					if(!elementState) {
+						continue;
+					}
+
+					if(typeof state.ui.sidebar[element as LiveAtlasSidebarSection] !== 'undefined') {
+						state.ui.sidebar[element as LiveAtlasSidebarSection].collapsed = !!elementState.collapsed;
+					}
+				}
+			}
+		} catch(e) {
+			console.warn('Failed to load saved UI settings', e);
 		}
 
 		const messages: LiveAtlasGlobalMessageConfig = {
@@ -615,11 +635,7 @@ export const mutations: MutationTree<State> & Mutations = {
 	},
 
 	[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);
-		}
+		state.ui.sidebar[section].collapsed = !state.ui.sidebar[section].collapsed;
 	},
 
 	[MutationTypes.SET_LOGGED_IN](state: State, payload: boolean): void {
diff --git a/src/store/state.ts b/src/store/state.ts
index 11bd438..4fe5f1b 100644
--- a/src/store/state.ts
+++ b/src/store/state.ts
@@ -32,7 +32,10 @@ import {
 	LiveAtlasPlayer,
 	LiveAtlasMarkerSet,
 	LiveAtlasComponentConfig,
-	LiveAtlasServerConfig, LiveAtlasChat, LiveAtlasUIModal
+	LiveAtlasServerConfig,
+	LiveAtlasChat,
+	LiveAtlasUIModal,
+	LiveAtlasSidebarSectionState
 } from "@/index";
 import LiveAtlasMapDefinition from "@/model/LiveAtlasMapDefinition";
 
@@ -86,8 +89,8 @@ export type State = {
 		previouslyVisibleElements: Set<LiveAtlasUIElement>;
 
 		sidebar: {
-			collapsedSections: Set<LiveAtlasSidebarSection>;
-		}
+			[K in LiveAtlasSidebarSection]: LiveAtlasSidebarSectionState
+		};
 	};
 
 	parsedUrl?: LiveAtlasParsedUrl;
@@ -265,7 +268,9 @@ export const state: State = {
 		previouslyVisibleElements: new Set(),
 
 		sidebar: {
-			collapsedSections: new Set(),
+			servers: {},
+			players: {},
+			maps: {},
 		},
 	}
 };