ExpansionPanel

src/components/ExpansionPanel.vue

@@ -1,13 +1,35 @@
 <script setup lang="ts">
-import { computed, ref } from 'vue'
+import { computed, ref, watch } from 'vue'
 
 interface Props {
   title: string
+  /** localStorage key for the open/closed state; defaults to one derived from the title. */
+  storageKey?: string
 }
 
 const icons = ['mdi-chevron-right', 'mdi-chevron-down']
-const isOpen = ref(true)
+const { title, storageKey } = defineProps<Props>()
-const { title } = defineProps<Props>()
+
+const key = computed(() => `expansion-panel:${storageKey ?? title}`)
+
+function readStoredOpen(): boolean {
+  try {
+    return localStorage.getItem(key.value) !== 'closed'
+  } catch {
+    // ignore storage errors (e.g. disabled in private mode)
+    return true
+  }
+}
+
+const isOpen = ref(readStoredOpen())
+
+watch(isOpen, (value) => {
+  try {
+    localStorage.setItem(key.value, value ? 'open' : 'closed')
+  } catch {
+    // ignore storage errors (e.g. disabled in private mode)
+  }
+})
 
 const icon = computed(() => {
   return isOpen.value ? icons[1] : icons[0]