feat: add toggle button for showing active or archived projects

src/components/CospendNavigation.vue

@@ -64,7 +64,7 @@
 				</template>
 			</NcEmptyContent>
 			<AppNavigationProjectItem
-				v-for="id in sortedProjectIds"
+				v-for="id in filteredProjectIds"
 				:key="id"
 				:project="projects[id]"
 				:members="projects[id].members"
@@ -77,11 +77,30 @@
 			<div id="app-settings">
 				<div id="app-settings-header">
 					<NcAppNavigationItem
+						v-if="showArchivedProjects"
+						:name="t('cospend', 'Active projects')"
+						@click="showArchivedProjects = false">
+						<template #icon>
+							<CalendarIcon />
+						</template>
+						<template #counter>
+							<NcCounterBubble>
+								{{ sortedProjectIds.length - filteredProjectIds.length }}
+							</NcCounterBubble>
+						</template>
+					</NcAppNavigationItem>
+					<NcAppNavigationItem
+						v-if="!showArchivedProjects"
 						:name="t('cospend', 'Archived projects')"
-						@click="showSettings">
+						@click="showArchivedProjects = true">
 						<template #icon>
 							<ArchiveLockIcon />
 						</template>
+						<template #counter>
+							<NcCounterBubble>
+								{{ sortedProjectIds.length - filteredProjectIds.length }}
+							</NcCounterBubble>
+						</template>
 					</NcAppNavigationItem>
 					<NcAppNavigationItem
 						:name="t('cospend', 'Cospend settings')"
@@ -104,6 +123,7 @@ import PlusIcon from 'vue-material-design-icons/Plus.vue'
 import FileImportIcon from 'vue-material-design-icons/FileImport.vue'
 import CogIcon from 'vue-material-design-icons/Cog.vue'
 import ArchiveLockIcon from 'vue-material-design-icons/ArchiveLock.vue'
+import CalendarIcon from 'vue-material-design-icons/Calendar.vue'
 
 import NcAppNavigation from '@nextcloud/vue/dist/Components/NcAppNavigation.js'
 import NcEmptyContent from '@nextcloud/vue/dist/Components/NcEmptyContent.js'
@@ -112,6 +132,7 @@ import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 import NcModal from '@nextcloud/vue/dist/Components/NcModal.js'
 import NcTextField from '@nextcloud/vue/dist/Components/NcTextField.js'
+import NcCounterBubble from '@nextcloud/vue/dist/Components/NcCounterBubble.js'
 
 import AppNavigationProjectItem from './AppNavigationProjectItem.vue'
 
@@ -134,6 +155,7 @@ export default {
 		NcButton,
 		NcModal,
 		NcTextField,
+		NcCounterBubble,
 		CogIcon,
 		FileImportIcon,
 		PlusIcon,
@@ -141,6 +163,7 @@ export default {
 		FolderPlusIcon,
 		ArrowRightIcon,
 		ArchiveLockIcon,
+		CalendarIcon,
 	},
 	directives: {
 		ClickOutside,
@@ -177,9 +200,17 @@ export default {
 			importingProject: false,
 			showCreationModal: false,
 			newProjectName: '',
+			showArchivedProjects: false,
 		}
 	},
 	computed: {
+		filteredProjectIds(opposite = false) {
+			if (this.showArchivedProjects) { // show archived projects
+				return this.sortedProjectIds.filter(id => this.projects[id].archived !== null)
+			} else { // show active projects
+				return this.sortedProjectIds.filter(id => this.projects[id].archived === null)
+			}
+		},
 		sortedProjectIds() {
 			if (this.cospend.sortOrder === 'name') {
 				return Object.keys(this.projects).sort((a, b) => {