fix: setting the last viewed list after navigating away from it

The new list background was set on the home page when navigating to the list. This was because the `CURRENT_LIST` was set to the last visited list, even after the call to `this.$store.commit(CURRENT_LIST, null)` because everything is async. I tracked the problem down to the call to `watchEffect` in the ListWrapper component. Apparently, `watchEffect` is called every time _the watched variable is assigned to_ and not only when it changes. When navigating away from the list, that watcher is getting called with the list id, the one already loaded, and sets it in store which in turn overrides the call from the contentAuth component.

src/views/list/ListWrapper.vue

@@ -47,7 +47,7 @@
 </template>
 
 <script setup lang="ts">
-import {ref, computed, watchEffect} from 'vue'
+import {ref, computed, watch} from 'vue'
 import {useRoute} from 'vue-router'
 
 import Message from '@/components/misc/message.vue'
@@ -88,6 +88,21 @@ const currentList = computed(() => {
 	} : store.state.currentList
 })
 
+// watchEffect would be called every time the prop would get a value assigned, even if that value was the same as before.
+// This resulted in loading and setting the list multiple times, even when navigating away from it.
+// This caused wired bugs where the list background would be set on the home page but only right after setting a new 
+// list background and then navigating to home. It also highlighted the list in the menu and didn't allow changing any
+// of it, most likely due to the rights not being properly populated.
+watch(
+	() => props.listId,
+	(listId, prevListId) => {
+		loadList(listId)
+	},
+	{
+		immediate: true,
+	}
+)
+
 // call the method again if the listId changes
 watchEffect(() => loadList(props.listId))