fix issues with new composable and store methods

src/components/home/TheNavigation.vue

@@ -1,6 +1,6 @@
 <template>
 	<header
-		:class="{'has-background': background, 'menu-active': menuActive}"
+		:class="{'has-background': hasBackground, 'menu-active': menuActive}"
 		aria-label="main navigation"
 		class="navbar main-theme is-fixed-top d-print-none"
 	>
@@ -114,7 +114,7 @@ import {useAuthStore} from '@/stores/auth'
 
 const baseStore = useBaseStore()
 const currentList = computed(() => baseStore.currentList)
-const background = computed(() => baseStore.background)
+const hasBackground = computed(() => Boolean(baseStore.currentList?.backgroundInformation))
 const canWriteCurrentList = computed(() => baseStore.currentList.maxRight > Rights.READ)
 const menuActive = computed(() => baseStore.menuActive)
 

src/router/index.ts

@@ -275,6 +275,7 @@ const router = createRouter({
 			meta: {
 				showAsModal: true,
 			},
+			props: route => ({ namespaceId: Number(route.params.namespaceId as string) }),
 		},
 		{
 			path: '/lists/:listId/settings/edit',
@@ -292,6 +293,7 @@ const router = createRouter({
 			meta: {
 				showAsModal: true,
 			},
+			props: route => ({ listId: Number(route.params.listId as string) }),
 		},
 		{
 			path: '/lists/:listId/settings/duplicate',
@@ -309,6 +311,7 @@ const router = createRouter({
 			meta: {
 				showAsModal: true,
 			},
+			props: route => ({ listId: Number(route.params.listId as string) }),
 		},
 		{
 			path: '/lists/:listId/settings/delete',
@@ -317,6 +320,7 @@ const router = createRouter({
 			meta: {
 				showAsModal: true,
 			},
+			props: route => ({ listId: Number(route.params.listId as string) }),
 		},
 		{
 			path: '/lists/:listId/settings/archive',
@@ -325,6 +329,7 @@ const router = createRouter({
 			meta: {
 				showAsModal: true,
 			},
+			props: route => ({ listId: Number(route.params.listId as string) }),
 		},
 		{
 			path: '/lists/:listId/settings/edit',

src/stores/lists.ts

@@ -3,6 +3,7 @@ import type {MaybeRef} from '@vueuse/core'
 import {acceptHMRUpdate, defineStore} from 'pinia'
 import {useI18n} from 'vue-i18n'
 import {useRouter} from 'vue-router'
+import router from '@/router'
 
 import type {IList} from '@/modelTypes/IList'
 import type {INamespace} from '@/modelTypes/INamespace'
@@ -36,8 +37,6 @@ export interface ListState {
 }
 
 export const useListStore = defineStore('list', () => {
-	const router = useRouter()
-
 	const baseStore = useBaseStore()
 	const namespaceStore = useNamespaceStore()
 

src/views/list/settings/background.vue

@@ -104,19 +104,19 @@ import debounce from 'lodash.debounce'
 
 import BaseButton from '@/components/base/BaseButton.vue'
 import CustomTransition from '@/components/misc/CustomTransition.vue'
+import CreateEdit from '@/components/misc/create-edit.vue'
 
 import {useBaseStore} from '@/stores/base'
 import {useListStore} from '@/stores/lists'
 import {useConfigStore} from '@/stores/config'
 
 import BackgroundUnsplashService from '@/services/backgroundUnsplash'
-import ListService from '@/services/list'
 
 import {useTitle} from '@/composables/useTitle'
 
-import CreateEdit from '@/components/misc/create-edit.vue'
 import type {IBackgroundImage} from '@/modelTypes/IBackgroundImage'
 import type {IList} from '@/modelTypes/IList'
+import {getBlurHash} from '@/helpers/blurhash'
 
 const SEARCH_DEBOUNCE = 300
 
@@ -141,13 +141,12 @@ const debounceNewBackgroundSearch = debounce(newBackgroundSearch, SEARCH_DEBOUNC
 	trailing: true,
 })
 
-const listService = shallowReactive(new ListService())
 const listStore = useListStore()
 const configStore = useConfigStore()
 
 const unsplashBackgroundEnabled = computed(() => configStore.enabledBackgroundProviders.includes('unsplash'))
 const uploadBackgroundEnabled = computed(() => configStore.enabledBackgroundProviders.includes('upload'))
-const hasBackground = computed(() => baseStore.background !== null)
+const hasBackground = computed(() => baseStore.currentList?.backgroundInformation !== undefined)
 
 // Show the default collection of backgrounds
 newBackgroundSearch()
@@ -169,7 +168,7 @@ async function searchBackgrounds(page = 1) {
 	const result = await backgroundService.getAll({}, {s: backgroundSearchTerm.value, p: page})
 	backgroundSearchResult.value = backgroundSearchResult.value.concat(result)
 	result.forEach((background: IBackgroundImage) => {
-		listService.getBlurHash(background.blurHash).then((b) => {
+		getBlurHash(background.blurHash).then((b) => {
 			backgroundBlurHashes.value[background.id] = b
 		})
 

src/views/list/settings/delete.vue

@@ -54,9 +54,10 @@ watch(
 		await taskCollectionService.getAll({listId: currentListId})
 		totalTasks.value = taskCollectionService.totalPages * taskCollectionService.resultCount
 	},
+	{immediate: true},
+
 )
 
-useTitle(() => t('list.delete.title', {list: list?.value?.title}))
-
 const {list, deleteList} = useList(listId)
+useTitle(() => t('list.delete.title', {list: list?.value?.title}))
 </script>