🐛 Fix collapse state persistence (#1546)

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;

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];

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"

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"