From 4594c99b57f7c60e2f23e46afbd46a74191c977b Mon Sep 17 00:00:00 2001
From: Alicia Sykes <alicia@omg.lol>
Date: Fri, 26 Apr 2024 00:29:35 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20Fix=20collapse=20state=20persist?=
 =?UTF-8?q?ence=20(#1546)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/LinkItems/Collapsable.vue | 16 +++++++++++++---
 src/mixins/HomeMixin.js                  | 10 +++++++++-
 src/views/Home.vue                       |  2 +-
 src/views/Minimal.vue                    |  2 +-
 4 files changed, 24 insertions(+), 6 deletions(-)

diff --git a/src/components/LinkItems/Collapsable.vue b/src/components/LinkItems/Collapsable.vue
index 874a9345..91131ba4 100644
--- a/src/components/LinkItems/Collapsable.vue
+++ b/src/components/LinkItems/Collapsable.vue
@@ -64,7 +64,6 @@ export default {
       return this.$store.state.editMode;
     },
     sectionKey() {
-      if (this.isEditMode) return undefined;
       return `collapsible-${this.uniqueKey}`;
     },
     collapseClass() {
@@ -104,12 +103,23 @@ export default {
   watch: {
     checkboxState(newState) {
       this.isExpanded = newState;
+      this.updateLocalStorage(); // Save every change immediately
     },
-    uniqueKey() {
-      this.checkboxState = this.isExpanded;
+    uniqueKey(newVal, oldVal) {
+      if (newVal !== oldVal) {
+        this.refreshCollapseState(); // Refresh state when key changes
+      }
     },
   },
   methods: {
+    refreshCollapseState() {
+      this.checkboxState = this.isExpanded;
+    },
+    updateLocalStorage() {
+      const collapseState = this.locallyStoredCollapseStates();
+      collapseState[this.uniqueKey] = this.checkboxState;
+      localStorage.setItem(localStorageKeys.COLLAPSE_STATE, JSON.stringify(collapseState));
+    },
     /* Either expand or collapse section, based on it's current state */
     toggle() {
       this.checkboxState = !this.checkboxState;
diff --git a/src/mixins/HomeMixin.js b/src/mixins/HomeMixin.js
index aa58a316..6f163f88 100644
--- a/src/mixins/HomeMixin.js
+++ b/src/mixins/HomeMixin.js
@@ -28,7 +28,7 @@ const HomeMixin = {
       return this.$store.state.modalOpen;
     },
     pageId() {
-      return (this.subPageInfo && this.subPageInfo.pageId) ? this.subPageInfo.pageId : 'home';
+      return this.$store.state.currentConfigInfo?.confId || 'home';
     },
   },
   data: () => ({
@@ -84,6 +84,14 @@ const HomeMixin = {
     searching(searchValue) {
       this.searchValue = searchValue || '';
     },
+    /* Returns a unique ID based on the page and section name */
+    makeSectionId(section) {
+      const normalize = (str) => (
+        str ? str.trim().toLowerCase().replace(/[^a-zA-Z0-9]/g, '-')
+          : `unnamed-${(`000${Math.floor(Math.random() * 1000)}`).slice(-3)}`
+      );
+      return `${this.pageId || 'unknown-page'}-${normalize(section.name)}`;
+    },
     /* Returns true if there is one or more sections in the config */
     checkTheresData(sections) {
       const localSections = localStorage[localStorageKeys.CONF_SECTIONS];
diff --git a/src/views/Home.vue b/src/views/Home.vue
index 18eaf4af..b929e8b0 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -34,7 +34,7 @@
           :title="section.name"
           :icon="section.icon || undefined"
           :displayData="getDisplayData(section)"
-          :groupId="`${pageId}-section-${index}`"
+          :groupId="makeSectionId(section)"
           :items="section.filteredItems"
           :widgets="section.widgets"
           :searchTerm="searchValue"
diff --git a/src/views/Minimal.vue b/src/views/Minimal.vue
index 6b2d631f..9ec125fe 100644
--- a/src/views/Minimal.vue
+++ b/src/views/Minimal.vue
@@ -34,7 +34,7 @@
         :index="index"
         :title="section.name"
         :icon="section.icon || undefined"
-        :groupId="`section-${index}`"
+        :groupId="makeSectionId(section)"
         :items="filterTiles(section.items)"
         :widgets="section.widgets"
         :selected="selectedSection === index"