From d7d3ffeebddb9e10e199c9303fef99fe14797dcf Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Mon, 12 Feb 2024 22:22:55 +0100
Subject: [PATCH] feat(navigation): persist project open state in navigation

With this change, the project's collapsed open/closed state in the navigation survives a browser reload. Previously, all state would be lost after reloading.

Resolves https://kolaente.dev/vikunja/vikunja/issues/2067
---
 .../components/home/ProjectsNavigationItem.vue   | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/home/ProjectsNavigationItem.vue b/frontend/src/components/home/ProjectsNavigationItem.vue
index 89161da43..9f7df7c00 100644
--- a/frontend/src/components/home/ProjectsNavigationItem.vue
+++ b/frontend/src/components/home/ProjectsNavigationItem.vue
@@ -84,9 +84,10 @@
 </template>
 
 <script setup lang="ts">
-import {computed, ref} from 'vue'
+import {computed} from 'vue'
 import {useProjectStore} from '@/stores/projects'
 import {useBaseStore} from '@/stores/base'
+import {useStorage} from '@vueuse/core'
 
 import type {IProject} from '@/modelTypes/IProject'
 
@@ -112,7 +113,18 @@ const projectStore = useProjectStore()
 const baseStore = useBaseStore()
 const currentProject = computed(() => baseStore.currentProject)
 
-const childProjectsOpen = ref(true)
+// Persist open state across browser reloads. Using a seperate ref for the state 
+// allows us to use only one entry in local storage instead of one for every project id.
+type openState = { [key: number]: boolean }
+const childProjectsOpenState = useStorage<openState>('navigation-child-projects-open', {})
+const childProjectsOpen = computed({
+	get() {
+		return childProjectsOpenState.value[project.id] ?? true
+	},
+	set(open) {
+		childProjectsOpenState.value[project.id] = open
+	},
+})
 
 const childProjects = computed(() => {
 	return projectStore.getChildProjects(project.id)