feat: implement modals with vue router 4 (#816)

Reviewed-on: https://kolaente.dev/vikunja/frontend/pulls/816
Reviewed-by: konrad <k@knt.li>

cypress/integration/list/list-history.spec.js

@@ -0,0 +1,56 @@
+import {ListFactory} from '../../factories/list'
+
+import '../../support/authenticateUser'
+import {prepareLists} from './prepareLists'
+
+describe('List History', () => {
+	prepareLists()
+	
+	it('should show a list history on the home page', () => {
+		cy.intercept(Cypress.env('API_URL') + '/namespaces*').as('loadNamespaces')
+		cy.intercept(Cypress.env('API_URL') + '/lists/*').as('loadList')
+		
+		const lists = ListFactory.create(6)
+
+		cy.visit('/')
+		cy.wait('@loadNamespaces')
+		cy.get('body')
+			.should('not.contain', 'Last viewed')
+
+		cy.visit(`/lists/${lists[0].id}`)
+		cy.wait('@loadNamespaces')
+		cy.wait('@loadList')
+		cy.visit(`/lists/${lists[1].id}`)
+		cy.wait('@loadNamespaces')
+		cy.wait('@loadList')
+		cy.visit(`/lists/${lists[2].id}`)
+		cy.wait('@loadNamespaces')
+		cy.wait('@loadList')
+		cy.visit(`/lists/${lists[3].id}`)
+		cy.wait('@loadNamespaces')
+		cy.wait('@loadList')
+		cy.visit(`/lists/${lists[4].id}`)
+		cy.wait('@loadNamespaces')
+		cy.wait('@loadList')
+		cy.visit(`/lists/${lists[5].id}`)
+		cy.wait('@loadNamespaces')
+		cy.wait('@loadList')
+
+		// cy.visit('/')
+		// cy.wait('@loadNamespaces')
+		// Not using cy.visit here to work around the redirect issue fixed in #1337
+		cy.get('nav.menu.top-menu a')
+			.contains('Overview')
+			.click()
+		
+		cy.get('body')
+			.should('contain', 'Last viewed')
+		cy.get('.list-cards-wrapper-2-rows')
+			.should('not.contain', lists[0].title)
+			.should('contain', lists[1].title)
+			.should('contain', lists[2].title)
+			.should('contain', lists[3].title)
+			.should('contain', lists[4].title)
+			.should('contain', lists[5].title)
+	})
+})

cypress/integration/list/list-view-gantt.spec.js

@@ -0,0 +1,76 @@
+import {formatISO, format} from 'date-fns'
+import {TaskFactory} from '../../factories/task'
+import {prepareLists} from './prepareLists'
+
+import '../../support/authenticateUser'
+
+describe('List View Gantt', () => {
+	prepareLists()
+	
+	it('Hides tasks with no dates', () => {
+		const tasks = TaskFactory.create(1)
+		cy.visit('/lists/1/gantt')
+
+		cy.get('.gantt-chart .tasks')
+			.should('not.contain', tasks[0].title)
+	})
+
+	it('Shows tasks from the current and next month', () => {
+		const now = new Date()
+		const nextMonth = now
+		nextMonth.setDate(1)
+		nextMonth.setMonth(now.getMonth() + 1)
+
+		cy.visit('/lists/1/gantt')
+
+		cy.get('.gantt-chart .months')
+			.should('contain', format(now, 'MMMM'))
+			.should('contain', format(nextMonth, 'MMMM'))
+	})
+
+	it('Shows tasks with dates', () => {
+		const now = new Date()
+		const tasks = TaskFactory.create(1, {
+			start_date: formatISO(now),
+			end_date: formatISO(now.setDate(now.getDate() + 4))
+		})
+		cy.visit('/lists/1/gantt')
+
+		cy.get('.gantt-chart .tasks')
+			.should('not.be.empty')
+		cy.get('.gantt-chart .tasks')
+			.should('contain', tasks[0].title)
+	})
+
+	it('Shows tasks with no dates after enabling them', () => {
+		TaskFactory.create(1, {
+			start_date: null,
+			end_date: null,
+		})
+		cy.visit('/lists/1/gantt')
+
+		cy.get('.gantt-options .fancycheckbox')
+			.contains('Show tasks which don\'t have dates set')
+			.click()
+
+		cy.get('.gantt-chart .tasks')
+			.should('not.be.empty')
+		cy.get('.gantt-chart .tasks .task.nodate')
+			.should('exist')
+	})
+
+	it('Drags a task around', () => {
+		const now = new Date()
+		TaskFactory.create(1, {
+			start_date: formatISO(now),
+			end_date: formatISO(now.setDate(now.getDate() + 4))
+		})
+		cy.visit('/lists/1/gantt')
+
+		cy.get('.gantt-chart .tasks .task')
+			.first()
+			.trigger('mousedown', {which: 1})
+			.trigger('mousemove', {clientX: 500, clientY: 0})
+			.trigger('mouseup', {force: true})
+	})
+})

cypress/integration/list/list-view-kanban.spec.js

@@ -0,0 +1,196 @@
+import {BucketFactory} from '../../factories/bucket'
+import {ListFactory} from '../../factories/list'
+import {TaskFactory} from '../../factories/task'
+import {prepareLists} from './prepareLists'
+
+import '../../support/authenticateUser'
+
+describe('List View Kanban', () => {
+	let buckets
+	prepareLists()
+
+	beforeEach(() => {
+		buckets = BucketFactory.create(2)
+	})
+
+	it('Shows all buckets with their tasks', () => {
+		const data = TaskFactory.create(10, {
+			list_id: 1,
+			bucket_id: 1,
+		})
+		cy.visit('/lists/1/kanban')
+
+		cy.get('.kanban .bucket .title')
+			.contains(buckets[0].title)
+			.should('exist')
+		cy.get('.kanban .bucket .title')
+			.contains(buckets[1].title)
+			.should('exist')
+		cy.get('.kanban .bucket')
+			.first()
+			.should('contain', data[0].title)
+	})
+
+	it('Can add a new task to a bucket', () => {
+		TaskFactory.create(2, {
+			list_id: 1,
+			bucket_id: 1,
+		})
+		cy.visit('/lists/1/kanban')
+
+		cy.getSettled('.kanban .bucket')
+			.contains(buckets[0].title)
+			.get('.bucket-footer .button')
+			.contains('Add another task')
+			.click()
+		cy.get('.kanban .bucket')
+			.contains(buckets[0].title)
+			.get('.bucket-footer .field .control input.input')
+			.type('New Task{enter}')
+
+		cy.get('.kanban .bucket')
+			.first()
+			.should('contain', 'New Task')
+	})
+
+	it('Can create a new bucket', () => {
+		cy.visit('/lists/1/kanban')
+
+		cy.get('.kanban .bucket.new-bucket .button')
+			.click()
+		cy.get('.kanban .bucket.new-bucket input.input')
+			.type('New Bucket{enter}')
+
+		cy.wait(1000) // Wait for the request to finish
+		cy.get('.kanban .bucket .title')
+			.contains('New Bucket')
+			.should('exist')
+	})
+
+	it('Can set a bucket limit', () => {
+		cy.visit('/lists/1/kanban')
+
+		cy.getSettled('.kanban .bucket .bucket-header .dropdown.options .dropdown-trigger')
+			.first()
+			.click()
+		cy.get('.kanban .bucket .bucket-header .dropdown.options .dropdown-menu .dropdown-item')
+			.contains('Limit: Not Set')
+			.click()
+		cy.get('.kanban .bucket .bucket-header .dropdown.options .dropdown-menu .dropdown-item .field input.input')
+			.first()
+			.type(3)
+		cy.get('[data-cy="setBucketLimit"]')
+			.first()
+			.click()
+
+		cy.get('.kanban .bucket .bucket-header span.limit')
+			.contains('0/3')
+			.should('exist')
+	})
+
+	it('Can rename a bucket', () => {
+		cy.visit('/lists/1/kanban')
+
+		cy.getSettled('.kanban .bucket .bucket-header .title')
+			.first()
+			.type('{selectall}New Bucket Title{enter}')
+		cy.get('.kanban .bucket .bucket-header .title')
+			.first()
+			.should('contain', 'New Bucket Title')
+	})
+
+	it('Can delete a bucket', () => {
+		cy.visit('/lists/1/kanban')
+
+		cy.getSettled('.kanban .bucket .bucket-header .dropdown.options .dropdown-trigger')
+			.first()
+			.click()
+		cy.get('.kanban .bucket .bucket-header .dropdown.options .dropdown-menu .dropdown-item')
+			.contains('Delete')
+			.click()
+		cy.get('.modal-mask .modal-container .modal-content .header')
+			.should('contain', 'Delete the bucket')
+		cy.get('.modal-mask .modal-container .modal-content .actions .button')
+			.contains('Do it!')
+			.click()
+
+		cy.get('.kanban .bucket .title')
+			.contains(buckets[0].title)
+			.should('not.exist')
+		cy.get('.kanban .bucket .title')
+			.contains(buckets[1].title)
+			.should('exist')
+	})
+
+	it('Can drag tasks around', () => {
+		const tasks = TaskFactory.create(2, {
+			list_id: 1,
+			bucket_id: 1,
+		})
+		cy.visit('/lists/1/kanban')
+
+		cy.getSettled('.kanban .bucket .tasks .task')
+			.contains(tasks[0].title)
+			.first()
+			.drag('.kanban .bucket:nth-child(2) .tasks .dropper')
+		
+		cy.get('.kanban .bucket:nth-child(2) .tasks')
+			.should('contain', tasks[0].title)
+		cy.get('.kanban .bucket:nth-child(1) .tasks')
+			.should('not.contain', tasks[0].title)
+	})
+
+	it('Should navigate to the task when the task card is clicked', () => {
+		const tasks = TaskFactory.create(5, {
+			id: '{increment}',
+			list_id: 1,
+			bucket_id: 1,
+		})
+		cy.visit('/lists/1/kanban')
+
+		cy.getSettled('.kanban .bucket .tasks .task')
+			.contains(tasks[0].title)
+			.should('be.visible')
+			.click()
+
+		cy.url()
+			.should('contain', `/tasks/${tasks[0].id}`, { timeout: 1000 })
+	})
+
+	it('Should remove a task from the kanban board when moving it to another list', () => {
+		const lists = ListFactory.create(2)
+		BucketFactory.create(2, {
+			list_id: '{increment}',
+		})
+		const tasks = TaskFactory.create(5, {
+			id: '{increment}',
+			list_id: 1,
+			bucket_id: 1,
+		})
+		const task = tasks[0]
+		cy.visit('/lists/1/kanban')
+
+		cy.getSettled('.kanban .bucket .tasks .task')
+			.contains(task.title)
+			.should('be.visible')
+			.click()
+
+		cy.get('.task-view .action-buttons .button', { timeout: 3000 })
+			.contains('Move task')
+			.click()
+		cy.get('.task-view .content.details .field .multiselect.control .input-wrapper input')
+			.type(`${lists[1].title}{enter}`)
+		// The requests happen with a 200ms timeout. Because of that, the results are not yet there when cypress
+		// presses enter and we can't simulate pressing on enter to select the item.
+		cy.get('.task-view .content.details .field .multiselect.control .search-results')
+			.children()
+			.first()
+			.click()
+
+		cy.get('.global-notification', { timeout: 1000 })
+			.should('contain', 'Success')
+		cy.go('back')
+		cy.get('.kanban .bucket')
+			.should('not.contain', task.title)
+	})
+})

cypress/integration/list/list-view-list.spec.js

@@ -0,0 +1,97 @@
+import {UserListFactory} from '../../factories/users_list'
+import {TaskFactory} from '../../factories/task'
+import {UserFactory} from '../../factories/user'
+import {ListFactory} from '../../factories/list'
+import {prepareLists} from './prepareLists'
+
+import '../../support/authenticateUser'
+
+describe('List View List', () => {
+	prepareLists()
+
+	it('Should be an empty list', () => {
+		cy.visit('/lists/1')
+		cy.url()
+			.should('contain', '/lists/1/list')
+		cy.get('.list-title h1')
+			.should('contain', 'First List')
+		cy.get('.list-title .dropdown')
+			.should('exist')
+		cy.get('p')
+			.contains('This list is currently empty.')
+			.should('exist')
+	})
+
+	it('Should navigate to the task when the title is clicked', () => {
+		const tasks = TaskFactory.create(5, {
+			id: '{increment}',
+			list_id: 1,
+		})
+		cy.visit('/lists/1/list')
+
+		cy.get('.tasks .task .tasktext')
+			.contains(tasks[0].title)
+			.first()
+			.click()
+
+		cy.url()
+			.should('contain', `/tasks/${tasks[0].id}`)
+	})
+
+	it('Should not see any elements for a list which is shared read only', () => {
+		UserFactory.create(2)
+		UserListFactory.create(1, {
+			list_id: 2,
+			user_id: 1,
+			right: 0,
+		})
+		const lists = ListFactory.create(2, {
+			owner_id: '{increment}',
+			namespace_id: '{increment}',
+		})
+		cy.visit(`/lists/${lists[1].id}/`)
+
+		cy.get('.list-title a.icon')
+			.should('not.exist')
+		cy.get('input.input[placeholder="Add a new task..."')
+			.should('not.exist')
+	})
+
+	it('Should only show the color of a list in the navigation and not in the list view', () => {
+		const lists = ListFactory.create(1, {
+			hex_color: '00db60',
+		})
+		TaskFactory.create(10, {
+			list_id: lists[0].id,
+		})
+		cy.visit(`/lists/${lists[0].id}/`)
+
+		cy.get('.menu-list li .list-menu-link .color-bubble')
+			.should('have.css', 'background-color', 'rgb(0, 219, 96)')
+		cy.get('.tasks-container .tasks .color-bubble')
+			.should('not.exist')
+	})
+
+	it('Should paginate for > 50 tasks', () => {
+		const tasks = TaskFactory.create(100, {
+			id: '{increment}',
+			title: i => `task${i}`,
+			list_id: 1,
+		})
+		cy.visit('/lists/1/list')
+
+		cy.get('.tasks-container .tasks')
+			.should('contain', tasks[99].title)
+
+		cy.get('.card-content .pagination .pagination-link')
+			.contains('2')
+			.click()
+
+		cy.url()
+			.should('contain', '?page=2')
+		cy.get('.tasks-container .tasks')
+			.should('contain', tasks[1].title)
+		cy.get('.tasks-container .tasks')
+			.should('not.contain', tasks[99].title)
+	})
+})

cypress/integration/list/list-view-table.spec.js

@@ -0,0 +1,52 @@
+import {TaskFactory} from '../../factories/task'
+
+import '../../support/authenticateUser'
+
+describe('List View Table', () => {
+	it('Should show a table with tasks', () => {
+		const tasks = TaskFactory.create(1)
+		cy.visit('/lists/1/table')
+
+		cy.get('.list-table table.table')
+			.should('exist')
+		cy.get('.list-table table.table')
+			.should('contain', tasks[0].title)
+	})
+
+	it('Should have working column switches', () => {
+		TaskFactory.create(1)
+		cy.visit('/lists/1/table')
+
+		cy.get('.list-table .filter-container .items .button')
+			.contains('Columns')
+			.click()
+		cy.get('.list-table .filter-container .card.columns-filter .card-content .fancycheckbox .check')
+			.contains('Priority')
+			.click()
+		cy.get('.list-table .filter-container .card.columns-filter .card-content .fancycheckbox .check')
+			.contains('Done')
+			.click()
+
+		cy.get('.list-table table.table th')
+			.contains('Priority')
+			.should('exist')
+		cy.get('.list-table table.table th')
+			.contains('Done')
+			.should('not.exist')
+	})
+
+	it('Should navigate to the task when the title is clicked', () => {
+		const tasks = TaskFactory.create(5, {
+			id: '{increment}',
+			list_id: 1,
+		})
+		cy.visit('/lists/1/table')
+
+		cy.get('.list-table table.table')
+			.contains(tasks[0].title)
+			.click()
+
+		cy.url()
+			.should('contain', `/tasks/${tasks[0].id}`)
+	})
+})

cypress/integration/list/list.spec.js

@@ -1,25 +1,11 @@
-import {formatISO, format} from 'date-fns'
-
 import {TaskFactory} from '../../factories/task'
-import {ListFactory} from '../../factories/list'
+import {prepareLists} from './prepareLists'
-import {UserListFactory} from '../../factories/users_list'
-import {UserFactory} from '../../factories/user'
-import {NamespaceFactory} from '../../factories/namespace'
-import {BucketFactory} from '../../factories/bucket'
 
 import '../../support/authenticateUser'
 
 describe('Lists', () => {
 	let lists
-
+	prepareLists((newLists) => (lists = newLists))
-	beforeEach(() => {
-		UserFactory.create(1)
-		NamespaceFactory.create(1)
-		lists = ListFactory.create(1, {
-			title: 'First List'
-		})
-		TaskFactory.truncate()
-	})
 
 	it('Should create a new list', () => {
 		cy.visit('/')
@@ -29,7 +15,7 @@ describe('Lists', () => {
 			.contains('New list')
 			.click()
 		cy.url()
-			.should('contain', '/namespaces/1/list')
+			.should('contain', '/lists/new/1')
 		cy.get('.card-header-title')
 			.contains('New list')
 		cy.get('input.input')
@@ -56,7 +42,7 @@ describe('Lists', () => {
 	})
 
 	it('Should rename the list in all places', () => {
-		const tasks = TaskFactory.create(5, {
+		TaskFactory.create(5, {
 			id: '{increment}',
 			list_id: 1,
 		})
@@ -112,429 +98,4 @@ describe('Lists', () => {
 		cy.location('pathname')
 			.should('equal', '/')
 	})
-
-	describe('List View', () => {
-		it('Should be an empty list', () => {
-			cy.visit('/lists/1')
-			cy.url()
-				.should('contain', '/lists/1/list')
-			cy.get('.list-title h1')
-				.should('contain', 'First List')
-			cy.get('.list-title .dropdown')
-				.should('exist')
-			cy.get('p')
-				.contains('This list is currently empty.')
-				.should('exist')
-		})
-
-		it('Should navigate to the task when the title is clicked', () => {
-			const tasks = TaskFactory.create(5, {
-				id: '{increment}',
-				list_id: 1,
-			})
-			cy.visit('/lists/1/list')
-
-			cy.get('.tasks .task .tasktext')
-				.contains(tasks[0].title)
-				.first()
-				.click()
-
-			cy.url()
-				.should('contain', `/tasks/${tasks[0].id}`)
-		})
-
-		it('Should not see any elements for a list which is shared read only', () => {
-			UserFactory.create(2)
-			UserListFactory.create(1, {
-				list_id: 2,
-				user_id: 1,
-				right: 0,
-			})
-			const lists = ListFactory.create(2, {
-				owner_id: '{increment}',
-				namespace_id: '{increment}',
-			})
-			cy.visit(`/lists/${lists[1].id}/`)
-
-			cy.get('.list-title a.icon')
-				.should('not.exist')
-			cy.get('input.input[placeholder="Add a new task..."')
-				.should('not.exist')
-		})
-
-		it('Should only show the color of a list in the navigation and not in the list view', () => {
-			const lists = ListFactory.create(1, {
-				hex_color: '00db60',
-			})
-			TaskFactory.create(10, {
-				list_id: lists[0].id,
-			})
-			cy.visit(`/lists/${lists[0].id}/`)
-
-			cy.get('.menu-list li .list-menu-link .color-bubble')
-				.should('have.css', 'background-color', 'rgb(0, 219, 96)')
-			cy.get('.tasks-container .tasks .color-bubble')
-				.should('not.exist')
-		})
-
-		it('Should paginate for > 50 tasks', () => {
-			const tasks = TaskFactory.create(100, {
-				id: '{increment}',
-				title: i => `task${i}`,
-				list_id: 1,
-			})
-			cy.visit('/lists/1/list')
-
-			cy.get('.tasks-container .tasks')
-				.should('contain', tasks[99].title)
-
-			cy.get('.card-content .pagination .pagination-link')
-				.contains('2')
-				.click()
-
-			cy.url()
-				.should('contain', '?page=2')
-			cy.get('.tasks-container .tasks')
-				.should('contain', tasks[1].title)
-			cy.get('.tasks-container .tasks')
-				.should('not.contain', tasks[99].title)
-		})
-	})
-
-	describe('Table View', () => {
-		it('Should show a table with tasks', () => {
-			const tasks = TaskFactory.create(1)
-			cy.visit('/lists/1/table')
-
-			cy.get('.table-view table.table')
-				.should('exist')
-			cy.get('.table-view table.table')
-				.should('contain', tasks[0].title)
-		})
-
-		it('Should have working column switches', () => {
-			TaskFactory.create(1)
-			cy.visit('/lists/1/table')
-
-			cy.get('.table-view .filter-container .items .button')
-				.contains('Columns')
-				.click()
-			cy.get('.table-view .filter-container .card.columns-filter .card-content .fancycheckbox .check')
-				.contains('Priority')
-				.click()
-			cy.get('.table-view .filter-container .card.columns-filter .card-content .fancycheckbox .check')
-				.contains('Done')
-				.click()
-
-			cy.get('.table-view table.table th')
-				.contains('Priority')
-				.should('exist')
-			cy.get('.table-view table.table th')
-				.contains('Done')
-				.should('not.exist')
-		})
-
-		it('Should navigate to the task when the title is clicked', () => {
-			const tasks = TaskFactory.create(5, {
-				id: '{increment}',
-				list_id: 1,
-			})
-			cy.visit('/lists/1/table')
-
-			cy.get('.table-view table.table')
-				.contains(tasks[0].title)
-				.click()
-
-			cy.url()
-				.should('contain', `/tasks/${tasks[0].id}`)
-		})
-	})
-
-	describe('Gantt View', () => {
-		it('Hides tasks with no dates', () => {
-			const tasks = TaskFactory.create(1)
-			cy.visit('/lists/1/gantt')
-
-			cy.get('.gantt-chart-container .gantt-chart .tasks')
-				.should('not.contain', tasks[0].title)
-		})
-
-		it('Shows tasks from the current and next month', () => {
-			const now = new Date()
-			const nextMonth = now
-			nextMonth.setDate(1)
-			nextMonth.setMonth(now.getMonth() + 1)
-
-			cy.visit('/lists/1/gantt')
-
-			cy.get('.gantt-chart-container .gantt-chart .months')
-				.should('contain', format(now, 'MMMM'))
-				.should('contain', format(nextMonth, 'MMMM'))
-		})
-
-		it('Shows tasks with dates', () => {
-			const now = new Date()
-			const tasks = TaskFactory.create(1, {
-				start_date: formatISO(now),
-				end_date: formatISO(now.setDate(now.getDate() + 4))
-			})
-			cy.visit('/lists/1/gantt')
-
-			cy.get('.gantt-chart-container .gantt-chart .tasks')
-				.should('not.be.empty')
-			cy.get('.gantt-chart-container .gantt-chart .tasks')
-				.should('contain', tasks[0].title)
-		})
-
-		it('Shows tasks with no dates after enabling them', () => {
-			TaskFactory.create(1, {
-				start_date: null,
-				end_date: null,
-			})
-			cy.visit('/lists/1/gantt')
-
-			cy.get('.gantt-chart-container .gantt-options .fancycheckbox')
-				.contains('Show tasks which don\'t have dates set')
-				.click()
-
-			cy.get('.gantt-chart-container .gantt-chart .tasks')
-				.should('not.be.empty')
-			cy.get('.gantt-chart-container .gantt-chart .tasks .task.nodate')
-				.should('exist')
-		})
-
-		it('Drags a task around', () => {
-			const now = new Date()
-			TaskFactory.create(1, {
-				start_date: formatISO(now),
-				end_date: formatISO(now.setDate(now.getDate() + 4))
-			})
-			cy.visit('/lists/1/gantt')
-
-			cy.get('.gantt-chart-container .gantt-chart .tasks .task')
-				.first()
-				.trigger('mousedown', {which: 1})
-				.trigger('mousemove', {clientX: 500, clientY: 0})
-				.trigger('mouseup', {force: true})
-		})
-	})
-
-	describe('Kanban', () => {
-		let buckets
-
-		beforeEach(() => {
-			buckets = BucketFactory.create(2)
-		})
-
-		it('Shows all buckets with their tasks', () => {
-			const data = TaskFactory.create(10, {
-				list_id: 1,
-				bucket_id: 1,
-			})
-			cy.visit('/lists/1/kanban')
-
-			cy.get('.kanban .bucket .title')
-				.contains(buckets[0].title)
-				.should('exist')
-			cy.get('.kanban .bucket .title')
-				.contains(buckets[1].title)
-				.should('exist')
-			cy.get('.kanban .bucket')
-				.first()
-				.should('contain', data[0].title)
-		})
-
-		it('Can add a new task to a bucket', () => {
-			const data = TaskFactory.create(2, {
-				list_id: 1,
-				bucket_id: 1,
-			})
-			cy.visit('/lists/1/kanban')
-
-			cy.get('.kanban .bucket')
-				.contains(buckets[0].title)
-				.get('.bucket-footer .button')
-				.contains('Add another task')
-				.click()
-			cy.get('.kanban .bucket')
-				.contains(buckets[0].title)
-				.get('.bucket-footer .field .control input.input')
-				.type('New Task{enter}')
-
-			cy.get('.kanban .bucket')
-				.first()
-				.should('contain', 'New Task')
-		})
-
-		it('Can create a new bucket', () => {
-			cy.visit('/lists/1/kanban')
-
-			cy.get('.kanban .bucket.new-bucket .button')
-				.click()
-			cy.get('.kanban .bucket.new-bucket input.input')
-				.type('New Bucket{enter}')
-
-			cy.wait(1000) // Wait for the request to finish
-			cy.get('.kanban .bucket .title')
-				.contains('New Bucket')
-				.should('exist')
-		})
-
-		it('Can set a bucket limit', () => {
-			cy.visit('/lists/1/kanban')
-
-			cy.get('.kanban .bucket .bucket-header .dropdown.options .dropdown-trigger')
-				.first()
-				.click()
-			cy.get('.kanban .bucket .bucket-header .dropdown.options .dropdown-menu .dropdown-item')
-				.contains('Limit: Not Set')
-				.click()
-			cy.get('.kanban .bucket .bucket-header .dropdown.options .dropdown-menu .dropdown-item .field input.input')
-				.first()
-				.type(3)
-			cy.get('[data-cy="setBucketLimit"]')
-				.first()
-				.click()
-
-			cy.get('.kanban .bucket .bucket-header span.limit')
-				.contains('0/3')
-				.should('exist')
-		})
-
-		it('Can rename a bucket', () => {
-			cy.visit('/lists/1/kanban')
-
-			cy.get('.kanban .bucket .bucket-header .title')
-				.first()
-				.type('{selectall}New Bucket Title{enter}')
-			cy.get('.kanban .bucket .bucket-header .title')
-				.first()
-				.should('contain', 'New Bucket Title')
-		})
-
-		it('Can delete a bucket', () => {
-			cy.visit('/lists/1/kanban')
-
-			cy.get('.kanban .bucket .bucket-header .dropdown.options .dropdown-trigger')
-				.first()
-				.click()
-			cy.get('.kanban .bucket .bucket-header .dropdown.options .dropdown-menu .dropdown-item')
-				.contains('Delete')
-				.click()
-			cy.get('.modal-mask .modal-container .modal-content .header')
-				.should('contain', 'Delete the bucket')
-			cy.get('.modal-mask .modal-container .modal-content .actions .button')
-				.contains('Do it!')
-				.click()
-
-			cy.get('.kanban .bucket .title')
-				.contains(buckets[0].title)
-				.should('not.exist')
-			cy.get('.kanban .bucket .title')
-				.contains(buckets[1].title)
-				.should('exist')
-		})
-
-		it('Can drag tasks around', () => {
-			const tasks = TaskFactory.create(2, {
-				list_id: 1,
-				bucket_id: 1,
-			})
-			cy.visit('/lists/1/kanban')
-
-			cy.get('.kanban .bucket .tasks .task')
-				.contains(tasks[0].title)
-				.first()
-				.drag('.kanban .bucket:nth-child(2) .tasks .dropper')
-			
-			cy.get('.kanban .bucket:nth-child(2) .tasks')
-				.should('contain', tasks[0].title)
-			cy.get('.kanban .bucket:nth-child(1) .tasks')
-				.should('not.contain', tasks[0].title)
-		})
-
-		it('Should navigate to the task when the task card is clicked', () => {
-			const tasks = TaskFactory.create(5, {
-				id: '{increment}',
-				list_id: 1,
-				bucket_id: 1,
-			})
-			cy.visit('/lists/1/kanban')
-
-			cy.getSettled('.kanban .bucket .tasks .task')
-				.contains(tasks[0].title)
-				.should('be.visible')
-				.click()
-
-			cy.url()
-				.should('contain', `/tasks/${tasks[0].id}`)
-		})
-
-		it('Should remove a task from the kanban board when moving it to another list', () => {
-			const lists = ListFactory.create(2)
-			BucketFactory.create(2, {
-				list_id: '{increment}',
-			})
-			const tasks = TaskFactory.create(5, {
-				id: '{increment}',
-				list_id: 1,
-				bucket_id: 1,
-			})
-			const task = tasks[0]
-			cy.visit('/lists/1/kanban')
-
-			cy.getSettled('.kanban .bucket .tasks .task')
-				.contains(task.title)
-				.should('be.visible')
-				.click()
-
-			cy.get('.task-view .action-buttons .button')
-				.contains('Move task')
-				.click()
-			cy.get('.task-view .content.details .field .multiselect.control .input-wrapper input')
-				.type(`${lists[1].title}{enter}`)
-			// The requests happen with a 200ms timeout. Because of that, the results are not yet there when cypress
-			// presses enter and we can't simulate pressing on enter to select the item.
-			cy.get('.task-view .content.details .field .multiselect.control .search-results')
-				.children()
-				.first()
-				.click()
-
-			cy.get('.global-notification', { timeout: 1000 })
-				.should('contain', 'Success')
-			cy.go('back')
-			cy.get('.kanban .bucket')
-				.should('not.contain', task.title)
-		})
-	})
-
-	describe('List history', () => {
-		it('should show a list history on the home page', () => {
-			const lists = ListFactory.create(6)
-
-			cy.visit('/')
-			cy.get('h3')
-				.contains('Last viewed')
-				.should('not.exist')
-
-			cy.visit(`/lists/${lists[0].id}`)
-			cy.visit(`/lists/${lists[1].id}`)
-			cy.visit(`/lists/${lists[2].id}`)
-			cy.visit(`/lists/${lists[3].id}`)
-			cy.visit(`/lists/${lists[4].id}`)
-			cy.visit(`/lists/${lists[5].id}`)
-
-			cy.visit('/')
-			cy.get('h3')
-				.contains('Last viewed')
-				.should('exist')
-			cy.get('.list-cards-wrapper-2-rows')
-				.should('not.contain', lists[0].title)
-				.should('contain', lists[1].title)
-				.should('contain', lists[2].title)
-				.should('contain', lists[3].title)
-				.should('contain', lists[4].title)
-				.should('contain', lists[5].title)
-		})
-	})
 })

cypress/integration/list/prepareLists.js

@@ -0,0 +1,16 @@
+import {ListFactory} from '../../factories/list'
+import {UserFactory} from '../../factories/user'
+import {NamespaceFactory} from '../../factories/namespace'
+import {TaskFactory} from '../../factories/task'
+
+export function prepareLists(setLists = () => {}) {
+	beforeEach(() => {
+		UserFactory.create(1)
+		NamespaceFactory.create(1)
+		const lists = ListFactory.create(1, {
+			title: 'First List'
+		})
+		setLists(lists)
+		TaskFactory.truncate()
+	})
+}

cypress/integration/task/task.spec.js

@@ -116,6 +116,7 @@ describe('Task', () => {
 				.should('be.visible')
 				.should('contain', 'Done')
 			cy.get('.task-view .action-buttons p.created')
+				.scrollIntoView()
 				.should('be.visible')
 				.should('contain', 'Done')
 		})
@@ -372,13 +373,13 @@ describe('Task', () => {
 
 			cy.visit(`/tasks/${tasks[0].id}`)
 
-			cy.get('.task-view .details.labels-list .multiselect .input-wrapper')
+			cy.getSettled('.task-view .details.labels-list .multiselect .input-wrapper')
 				.should('be.visible')
 				.should('contain', labels[0].title)
-			cy.get('.task-view .details.labels-list .multiselect .input-wrapper')
+			cy.getSettled('.task-view .details.labels-list .multiselect .input-wrapper')
 				.children()
 				.first()
-				.get('a.delete')
+				.get('[data-cy="taskDetail.removeLabel"]')
 				.click()
 
 			cy.get('.global-notification')

package.json

@@ -129,7 +129,7 @@
     "parser": "vue-eslint-parser",
     "parserOptions": {
       "parser": "@typescript-eslint/parser",
-      "ecmaVersion": 2021
+      "ecmaVersion": 2022
     },
     "ignorePatterns": [
       "*.test.*",

src/components/home/contentAuth.vue

@@ -1,8 +1,12 @@
 <template>
 	<div>
-		<a @click="$store.commit('menuActive', false)" class="menu-hide-button" v-if="menuActive">
+		<BaseButton
+			v-if="menuActive"
+			@click="$store.commit('menuActive', false)"
+			class="menu-hide-button" 
+		>
 			<icon icon="times" />
-		</a>
+		</BaseButton>
 		<div
 			:class="{'has-background': background}"
 			:style="{'background-image': background && `url(${background})`}"
@@ -16,18 +20,32 @@
 				]"
 				class="app-content"
 			>
-				<a @click="$store.commit('menuActive', false)" class="mobile-overlay" v-if="menuActive"></a>
+				<BaseButton
+					v-if="menuActive"
+					@click="$store.commit('menuActive', false)"
+					class="mobile-overlay"
+				/>
 
 				<quick-actions/>
 
-				<router-view/>
 
-				<router-view name="popup" v-slot="{ Component }">
+				<router-view :route="routeWithModal" v-slot="{ Component }">
-					<transition name="modal">
+					<keep-alive :include="['list.list', 'list.gantt', 'list.table', 'list.kanban']">
 						<component :is="Component" />
-					</transition>
+					</keep-alive>
 				</router-view>
 
+				<transition name="modal">
+					<modal
+						v-if="currentModal" 
+						@close="closeModal()"
+						variant="scrolling"
+						class="task-detail-view-modal"
+					>
+						<component :is="currentModal" />
+					</modal>
+				</transition>
+
 				<a
 					class="keyboard-shortcuts-button"
 					@click="showKeyboardShortcuts()"
@@ -41,7 +59,7 @@
 </template>
 
 <script lang="ts" setup>
-import {watch, computed} from 'vue'
+import {watch, computed, shallowRef, watchEffect, VNode, h} from 'vue'
 import {useStore} from 'vuex'
 import {useRoute, useRouter} from 'vue-router'
 import {useEventListener} from '@vueuse/core'
@@ -49,6 +67,59 @@ import {useEventListener} from '@vueuse/core'
 import {CURRENT_LIST, KEYBOARD_SHORTCUTS_ACTIVE, MENU_ACTIVE} from '@/store/mutation-types'
 import Navigation from '@/components/home/navigation.vue'
 import QuickActions from '@/components/quick-actions/quick-actions.vue'
+import BaseButton from '@/components/base/BaseButton.vue'
+
+function useRouteWithModal() {
+	const router = useRouter()
+	const route = useRoute()
+	const backdropView = computed(() => route.fullPath && window.history.state.backdropView)
+
+	const routeWithModal = computed(() => {
+		return backdropView.value
+			? router.resolve(backdropView.value)
+			: route
+	})
+
+	const currentModal = shallowRef<VNode>()
+	watchEffect(() => {
+		if (!backdropView.value) {
+			currentModal.value = undefined
+			return
+		}
+
+		// logic from vue-router
+		// https://github.com/vuejs/vue-router-next/blob/798cab0d1e21f9b4d45a2bd12b840d2c7415f38a/src/RouterView.ts#L125
+		const routePropsOption = route.matched[0]?.props.default
+		const routeProps = routePropsOption
+			? routePropsOption === true
+				? route.params
+				: typeof routePropsOption === 'function'
+					? routePropsOption(route)
+					: routePropsOption
+			: null
+
+		currentModal.value = h(
+			route.matched[0]?.components.default,
+			routeProps,
+		)
+	})
+
+	function closeModal() {
+		const historyState = computed(() => route.fullPath && window.history.state)
+
+		if (historyState.value) {
+			router.back()
+		} else {
+			const backdropRoute = historyState.value?.backdropView && router.resolve(historyState.value.backdropView)
+			router.push(backdropRoute)
+		}
+	}
+
+	return { routeWithModal, currentModal, closeModal }
+}
+
+const { routeWithModal, currentModal, closeModal } = useRouteWithModal()
+
 
 const store = useStore()
 
@@ -223,4 +294,6 @@ store.dispatch('labels/loadAllLabels')
 		display: none;
 	}
 }
+
+@include modal-transition();
 </style>

src/components/list/list-settings-dropdown.vue

@@ -2,21 +2,22 @@
 	<dropdown>
 		<template v-if="isSavedFilter">
 			<dropdown-item
-				:to="{ name: `${listRoutePrefix}.edit`, params: { listId: list.id } }"
+				:to="{ name: 'filter.settings.edit', params: { listId: list.id } }"
 				icon="pen"
 			>
 				{{ $t('menu.edit') }}
 			</dropdown-item>
 			<dropdown-item
-				:to="{ name: `${listRoutePrefix}.delete`, params: { listId: list.id } }"
+				:to="{ name: 'filter.settings.delete', params: { listId: list.id } }"
 				icon="trash-alt"
 			>
 				{{ $t('misc.delete') }}
 			</dropdown-item>
 		</template>
+
 		<template v-else-if="list.isArchived">
 			<dropdown-item
-				:to="{ name: `${listRoutePrefix}.archive`, params: { listId: list.id } }"
+				:to="{ name: 'list.settings.archive', params: { listId: list.id } }"
 				icon="archive"
 			>
 				{{ $t('menu.unarchive') }}
@@ -24,37 +25,38 @@
 		</template>
 		<template v-else>
 			<dropdown-item
-				:to="{ name: `${listRoutePrefix}.edit`, params: { listId: list.id } }"
+				:to="{ name: 'list.settings.edit', params: { listId: list.id } }"
 				icon="pen"
 			>
 				{{ $t('menu.edit') }}
 			</dropdown-item>
 			<dropdown-item
-				:to="{ name: `${listRoutePrefix}.background`, params: { listId: list.id } }"
 				v-if="backgroundsEnabled"
+				:to="{ name: 'list.settings.background', params: { listId: list.id } }"
 				icon="image"
 			>
 				{{ $t('menu.setBackground') }}
 			</dropdown-item>
 			<dropdown-item
-				:to="{ name: `${listRoutePrefix}.share`, params: { listId: list.id } }"
+				:to="{ name: 'list.settings.share', params: { listId: list.id } }"
 				icon="share-alt"
 			>
 				{{ $t('menu.share') }}
 			</dropdown-item>
 			<dropdown-item
-				:to="{ name: `${listRoutePrefix}.duplicate`, params: { listId: list.id } }"
+				:to="{ name: 'list.settings.duplicate', params: { listId: list.id } }"
 				icon="paste"
 			>
 				{{ $t('menu.duplicate') }}
 			</dropdown-item>
 			<dropdown-item
-				:to="{ name: `${listRoutePrefix}.archive`, params: { listId: list.id } }"
+				:to="{ name: 'list.settings.archive', params: { listId: list.id } }"
 				icon="archive"
 			>
 				{{ $t('menu.archive') }}
 			</dropdown-item>
 			<task-subscription
+				v-if="subscription"
 				class="dropdown-item has-no-shadow"
 				:is-button="false"
 				entity="list"
@@ -63,7 +65,7 @@
 				@change="sub => subscription = sub"
 			/>
 			<dropdown-item
-				:to="{ name: `${listRoutePrefix}.delete`, params: { listId: list.id } }"
+				:to="{ name: 'list.settings.delete', params: { listId: list.id } }"
 				icon="trash-alt"
 				class="has-text-danger"
 			>
@@ -73,56 +75,32 @@
 	</dropdown>
 </template>
 
-<script>
+<script setup lang="ts">
+import {ref, computed, watchEffect} from 'vue'
+import {useStore} from 'vuex'
+
 import {getSavedFilterIdFromListId} from '@/helpers/savedFilter'
 import Dropdown from '@/components/misc/dropdown.vue'
 import DropdownItem from '@/components/misc/dropdown-item.vue'
 import TaskSubscription from '@/components/misc/subscription.vue'
+import ListModel from '@/models/list'
+import SubscriptionModel from '@/models/subscription'
 
-export default {
+const props = defineProps({
-	name: 'list-settings-dropdown',
-	data() {
-		return {
-			subscription: null,
-		}
-	},
-	components: {
-		TaskSubscription,
-		DropdownItem,
-		Dropdown,
-	},
-	props: {
 	list: {
+		type: ListModel,
 		required: true,
 	},
-	},
+})
-	mounted() {
-		this.subscription = this.list.subscription
-	},
-	computed: {
-		backgroundsEnabled() {
-			return this.$store.state.config.enabledBackgroundProviders !== null && this.$store.state.config.enabledBackgroundProviders.length > 0
-		},
-		listRoutePrefix() {
-			let name = 'list'
 
-
+const subscription = ref<SubscriptionModel>()
-			if (this.$route.name !== null && this.$route.name.startsWith('list.')) {
+watchEffect(() => {
-				// HACK: we should implement a better routing for the modals
+	if (props.list.subscription) {
-				const settingsRoutes = ['edit', 'delete', 'archive', 'background', 'share', 'duplicate']
+		subscription.value = props.list.subscription
-				const suffix = settingsRoutes.find((route) => this.$route.name.endsWith(`.settings.${route}`))
-				name = this.$route.name.replace(`.settings.${suffix}`,'')
 	}
+})
 
-			if (this.isSavedFilter) {
+const store = useStore()
-				name = name.replace('list.', 'filter.')
+const backgroundsEnabled = computed(() => store.state.config.enabledBackgroundProviders?.length > 0)
-			}
+const isSavedFilter = computed(() => getSavedFilterIdFromListId(props.list.id) > 0)
-
-			return `${name}.settings`
-		},
-		isSavedFilter() {
-			return getSavedFilterIdFromListId(this.list.id) > 0
-		},
-	},
-}
 </script>

src/components/list/partials/filter-popup.vue

@@ -29,9 +29,10 @@
 
 <script>
 import Filters from '@/components/list/partials/filters'
-import {getDefaultParams} from '@/components/tasks/mixins/taskList'
 import Popup from '@/components/misc/popup'
 
+import {getDefaultParams} from '@/composables/taskList'
+
 export default {
 	name: 'filter-popup',
 	components: {

src/components/list/partials/filters.vue

@@ -191,7 +191,7 @@ import NamespaceService from '@/services/namespace'
 import EditLabels from '@/components/tasks/partials/editLabels.vue'
 
 import {objectToSnakeCase} from '@/helpers/case'
-import {getDefaultParams} from '@/components/tasks/mixins/taskList'
+import {getDefaultParams} from '@/composables/taskList'
 
 // FIXME: merge with DEFAULT_PARAMS in taskList.js
 const DEFAULT_PARAMS = {

src/components/misc/keyboard-shortcuts/index.vue

@@ -4,9 +4,11 @@
 			<template v-for="(s, i) in shortcuts" :key="i">
 				<h3>{{ $t(s.title) }}</h3>
 
-				<message class="mb-4">
+				<message class="mb-4" v-if="s.available">
 					{{
-						s.available($route) ? $t('keyboardShortcuts.currentPageOnly') : $t('keyboardShortcuts.allPages')
+						s.available($route)
+							? $t('keyboardShortcuts.currentPageOnly')
+							: $t('keyboardShortcuts.allPages')
 					}}
 				</message>
 
@@ -17,7 +19,8 @@
 							class="shortcut-keys"
 							is="dd"
 							:keys="sc.keys"
-							:combination="typeof sc.combination !== 'undefined' ? $t(`keyboardShortcuts.${sc.combination}`) : null"/>
+							:combination="sc.combination && $t(`keyboardShortcuts.${sc.combination}`)"
+						/>
 					</template>
 				</dl>
 			</template>
@@ -25,28 +28,18 @@
 	</modal>
 </template>
 
-<script>
+<script lang="ts" setup>
-import {KEYBOARD_SHORTCUTS_ACTIVE} from '@/store/mutation-types'
+import {useStore} from 'vuex'
-import Shortcut from '@/components/misc/shortcut.vue'
-import Message from '@/components/misc/message'
-import {KEYBOARD_SHORTCUTS} from './shortcuts'
 
-export default {
+import Shortcut from '@/components/misc/shortcut.vue'
-	name: 'keyboard-shortcuts',
+import Message from '@/components/misc/message.vue'
-	components: {
+
-		Message, 
+import {KEYBOARD_SHORTCUTS_ACTIVE} from '@/store/mutation-types'
-		Shortcut,
+import {KEYBOARD_SHORTCUTS as shortcuts} from './shortcuts'
-	},
+
-	data() {
+const store = useStore()
-		return {
+function close() {
-			shortcuts: KEYBOARD_SHORTCUTS,
+	store.commit(KEYBOARD_SHORTCUTS_ACTIVE, false)
-		}
-	},
-	methods: {
-		close() {
-			this.$store.commit(KEYBOARD_SHORTCUTS_ACTIVE, false)
-		},
-	},
 }
 </script>
 

src/components/misc/keyboard-shortcuts/shortcuts.ts

@@ -1,11 +1,24 @@
+import {RouteLocation} from 'vue-router'
+
 import {isAppleDevice} from '@/helpers/isAppleDevice'
 
 const ctrl = isAppleDevice() ? '⌘' : 'ctrl'
 
-export const KEYBOARD_SHORTCUTS = [
+interface Shortcut {
+	title: string
+	keys: string[]
+	combination?: 'then'
+}
+
+interface ShortcutGroup {
+	title: string
+	available?: (route: RouteLocation) => boolean
+	shortcuts: Shortcut[]
+}
+
+export const KEYBOARD_SHORTCUTS : ShortcutGroup[] = [
 	{
 		title: 'keyboardShortcuts.general',
-		available: () => null,
 		shortcuts: [
 			{
 				title: 'keyboardShortcuts.toggleMenu',
@@ -29,7 +42,7 @@ export const KEYBOARD_SHORTCUTS = [
 	},
 	{
 		title: 'keyboardShortcuts.list.title',
-		available: (route) => route.name.startsWith('list.'),
+		available: (route) => (route.name as string)?.startsWith('list.'),
 		shortcuts: [
 			{
 				title: 'keyboardShortcuts.list.switchToListView',
@@ -55,13 +68,7 @@ export const KEYBOARD_SHORTCUTS = [
 	},
 	{
 		title: 'keyboardShortcuts.task.title',
-		available: (route) => [
+		available: (route) => route.name === 'task.detail',
-			'task.detail',
-			'task.list.detail',
-			'task.gantt.detail',
-			'task.kanban.detail',
-			'task.detail',
-		].includes(route.name),
 		shortcuts: [
 			{
 				title: 'keyboardShortcuts.task.assign',

src/components/misc/ready.vue

@@ -52,9 +52,15 @@ import NoAuthWrapper from '@/components/misc/no-auth-wrapper.vue'
 import {ERROR_NO_API_URL} from '@/helpers/checkAndSetApiUrl'
 import {useOnline} from '@/composables/useOnline'
 
+import {useRouter, useRoute} from 'vue-router'
+import {getAuthForRoute} from '@/router'
+
+const router = useRouter()
+const route = useRoute()
+
 const store = useStore()
 
-const ready = computed(() => store.state.vikunjaReady)
+const ready = ref(false)
 const online = useOnline()
 
 const error = ref('')
@@ -63,7 +69,12 @@ const showLoading = computed(() => !ready.value && error.value === '')
 async function load() {
 	try {
 		await store.dispatch('loadApp')
-	} catch(e: any) {
+		const redirectTo = getAuthForRoute(route)
+		if (typeof redirectTo !== 'undefined') {
+			await router.push(redirectTo)
+		}
+		ready.value = true
+	} catch (e: any) {
 		error.value = e
 	}
 }

src/components/misc/subscription.vue

@@ -1,55 +1,47 @@
 <template>
 	<x-button
+		v-if="isButton"
 		variant="secondary"
 		:icon="iconName"
 		v-tooltip="tooltipText"
 		@click="changeSubscription"
 		:disabled="disabled || null"
-		v-if="isButton"
 	>
 		{{ buttonText }}
 	</x-button>
-	<a
+	<BaseButton
+		v-else
 		v-tooltip="tooltipText"
 		@click="changeSubscription"
 		:class="{'is-disabled': disabled}"
-		v-else
 	>
 		<span class="icon">
 			<icon :icon="iconName"/>
 		</span>
 		{{ buttonText }}
-	</a>
+	</BaseButton>
 </template>
 
 <script lang="ts" setup>
 import {computed, shallowRef} from 'vue'
 import {useI18n} from 'vue-i18n'
 
+import BaseButton from '@/components/base/BaseButton.vue'
+
 import SubscriptionService from '@/services/subscription'
 import SubscriptionModel from '@/models/subscription'
 
 import {success} from '@/message'
 
-const props = defineProps({
+interface Props {
-	entity: {
+  entity: string
-		required: true,
+  entityId: number
-		type: String,
+  subscription: SubscriptionModel
-	},
+  isButton?: boolean
-	subscription: {
+}
-		required: true,
+
-		validator(value) {
+const props = withDefaults(defineProps<Props>(), {
-			return value instanceof SubscriptionModel || value === null
+	isButton: true,
-		},
-	},
-	entityId: {
-		required: true,
-		type: Number,
-	},
-	isButton: {
-		type: Boolean,
-		default: true,
-	},
 })
 
 const subscriptionEntity = computed<string>(() => props.subscription.entity)

src/components/modal/modal.vue

@@ -1,4 +1,5 @@
 <template>
+	<!-- FIXME: transition should not be included in the modal -->
 	<transition name="modal">
 		<section
 			v-if="enabled"
@@ -21,6 +22,13 @@
 						'is-wide': wide
 					}"
 				>
+					<BaseButton
+						@click="emit('close')"
+						class="close"
+					>
+						<icon icon="times"/>
+					</BaseButton>
+
 					<slot>
 						<div class="header">
 							<slot name="header"></slot>
@@ -53,6 +61,8 @@
 </template>
 
 <script>
+import BaseButton from '@/components/base/BaseButton.vue'
+
 export const TRANSITION_NAMES = {
 	MODAL: 'modal',
 	FADE: 'fade',
@@ -70,6 +80,11 @@ function validValue(values) {
 
 export default {
 	name: 'modal',
+
+	components: {
+		BaseButton,
+	},
+
 	mounted() {
 		document.addEventListener('keydown', (e) => {
 			// Close the model when escape is pressed
@@ -197,17 +212,22 @@ export default {
 	}
 }
 
+.close {
+	position: fixed;
+	top: 5px;
+	right: 26px;
+	color: var(--white);
+	font-size: 2rem;
 
-
+	@media screen and (max-width: $desktop) {
-/* Transitions */
+		color: var(--dark);
-
+	}
-.modal-enter,
+}
-.modal-leave-active {
+</style>
-  opacity: 0;
+
-}
+<style lang="scss">
-
+// Close icon SVG uses currentColor, change the color to keep it visible
-.modal-enter .modal-container,
+.dark .task-detail-view-modal .close {
-.modal-leave-active .modal-container {
+	color: var(--grey-900);
-  transform: scale(0.9);
 }
 </style>

src/components/namespace/namespace-settings-dropdown.vue

@@ -16,13 +16,13 @@
 				{{ $t('menu.edit') }}
 			</dropdown-item>
 			<dropdown-item
-				:to="{ name: 'namespace.settings.share', params: { id: namespace.id } }"
+				:to="{ name: 'namespace.settings.share', params: { namespaceId: namespace.id } }"
 				icon="share-alt"
 			>
 				{{ $t('menu.share') }}
 			</dropdown-item>
 			<dropdown-item
-				:to="{ name: 'list.create', params: { id: namespace.id } }"
+				:to="{ name: 'list.create', params: { namespaceId: namespace.id } }"
 				icon="plus"
 			>
 				{{ $t('menu.newList') }}
@@ -34,6 +34,7 @@
 				{{ $t('menu.archive') }}
 			</dropdown-item>
 			<task-subscription
+				v-if="subscription"
 				class="dropdown-item has-no-shadow"
 				:is-button="false"
 				entity="namespace"

src/components/sharing/linkSharing.vue

@@ -264,4 +264,6 @@ export default {
 .sharables-list:not(.card-content) {
   overflow-y: auto
 }
+
+@include modal-transition();
 </style>

src/components/sharing/userTeam.vue

@@ -365,3 +365,7 @@ export default {
 	},
 }
 </script>
+
+<style lang="scss" scoped>
+@include modal-transition();
+</style>

src/components/tasks/edit-task.vue

@@ -67,7 +67,7 @@
 
 		<router-link
 			class="mt-2 has-text-centered is-block"
-			:to="{name: 'task.detail', params: {id: taskEditTask.id}}"
+			:to="taskDetailRoute"
 		>
 			{{ $t('task.openDetail') }}
 		</router-link>
@@ -97,6 +97,15 @@ export default {
 			taskEditTask: TaskModel,
 		}
 	},
+	computed: {
+		taskDetailRoute() {
+			return {
+				name: 'task.detail',
+				params: { id: this.taskEditTask.id },
+				state: { backdropView: this.$router.currentRoute.value.fullPath },
+			}
+		},
+	},
 	components: {
 		ColorPicker,
 		Reminders,

src/components/tasks/mixins/taskList.js

@@ -1,101 +0,0 @@
-import TaskCollectionService from '@/services/taskCollection'
-
-// FIXME: merge with DEFAULT_PARAMS in filters.vue
-export const getDefaultParams = () => ({
-	sort_by: ['position', 'id'],
-	order_by: ['asc', 'desc'],
-	filter_by: ['done'],
-	filter_value: ['false'],
-	filter_comparator: ['equals'],
-	filter_concat: 'and',
-})
-
-/**
- * This mixin provides a base set of methods and properties to get tasks on a list.
- */
-export default {
-	data() {
-		return {
-			taskCollectionService: new TaskCollectionService(),
-			tasks: [],
-
-			currentPage: 0,
-
-			loadedList: null,
-
-			searchTerm: '',
-
-			showTaskFilter: false,
-			params: {...getDefaultParams()},
-		}
-	},
-	watch: {
-		// Only listen for query path changes
-		'$route.query': {
-			handler: 'loadTasksForPage',
-			immediate: true,
-		},
-		'$route.path': 'loadTasksOnSavedFilter',
-	},
-	methods: {
-		async loadTasks(
-			page,
-			search = '',
-			params = null,
-			forceLoading = false,
-		) {
-			// Because this function is triggered every time on topNavigation, we're putting a condition here to only load it when we actually want to show tasks
-			// FIXME: This is a bit hacky -> Cleanup.
-			if (
-				this.$route.name !== 'list.list' &&
-				this.$route.name !== 'list.table' &&
-				!forceLoading
-			) {
-				return
-			}
-
-			if (params === null) {
-				params = this.params
-			}
-
-			if (search !== '') {
-				params.s = search
-			}
-
-			const list = {listId: parseInt(this.$route.params.listId)}
-
-			const currentList = {
-				id: list.listId,
-				params,
-				search,
-				page,
-			}
-			if (JSON.stringify(currentList) === JSON.stringify(this.loadedList) && !forceLoading) {
-				return
-			}
-
-			this.tasks = []
-			this.tasks = await this.taskCollectionService.getAll(list, params, page)
-			this.currentPage = page
-			this.loadedList = JSON.parse(JSON.stringify(currentList))
-		},
-
-		loadTasksForPage(e) {
-			// The page parameter can be undefined, in the case where the user loads a new list from the side bar menu
-			let page = Number(e.page)
-			if (typeof e.page === 'undefined') {
-				page = 1
-			}
-			let search = e.search
-			if (typeof e.search === 'undefined') {
-				search = ''
-			}
-			this.initTasks(page, search)
-		},
-		loadTasksOnSavedFilter() {
-			if (typeof this.$route.params.listId !== 'undefined' && parseInt(this.$route.params.listId) < 0) {
-				this.loadTasks(1, '', null, true)
-			}
-		},
-	},
-}

src/components/tasks/partials/attachments.vue

@@ -400,4 +400,6 @@ export default {
     transform: translate3d(0, -4px, 0);
   }
 }
+
+@include modal-transition();
 </style>

src/components/tasks/partials/comments.vue

@@ -162,7 +162,7 @@ import {mapState} from 'vuex'
 export default {
 	name: 'comments',
 	components: {
-		editor: AsyncEditor,
+		Editor: AsyncEditor,
 	},
 	props: {
 		taskId: {
@@ -339,4 +339,6 @@ export default {
 .media-content {
 	width: calc(100% - 48px - 2rem);
 }
+
+@include modal-transition();
 </style>

src/components/tasks/partials/description.vue

@@ -38,7 +38,7 @@ import {mapState} from 'vuex'
 export default {
 	name: 'description',
 	components: {
-		editor: AsyncEditor,
+		Editor: AsyncEditor,
 	},
 	data() {
 		return {

src/components/tasks/partials/editLabels.vue

@@ -19,7 +19,7 @@
 				:style="{'background': props.item.hexColor, 'color': props.item.textColor}"
 				class="tag">
 				<span>{{ props.item.title }}</span>
-				<a @click="removeLabel(props.item)" class="delete is-small"></a>
+				<button type="button" v-cy="'taskDetail.removeLabel'" @click="removeLabel(props.item)" class="delete is-small" />
 			</span>
 		</template>
 		<template #searchResult="props">
@@ -114,7 +114,10 @@ export default {
 		},
 
 		async removeLabel(label) {
-			const removeFromState = () => {
+			if (!this.taskId === 0) {
+				await this.$store.dispatch('tasks/removeLabel', {label: label, taskId: this.taskId})
+			}
+
 			for (const l in this.labels) {
 				if (this.labels[l].id === label.id) {
 					this.labels.splice(l, 1)
@@ -122,15 +125,6 @@ export default {
 			}
 			this.$emit('update:modelValue', this.labels)
 			this.$emit('change', this.labels)
-			}
-
-			if (this.taskId === 0) {
-				removeFromState()
-				return
-			}
-
-			await this.$store.dispatch('tasks/removeLabel', {label: label, taskId: this.taskId})
-			removeFromState()
 			this.$message.success({message: this.$t('task.label.removeSuccess')})
 		},
 

src/components/tasks/partials/kanban-card.vue

@@ -7,8 +7,8 @@
 			'has-light-text': !colorIsDark(task.hexColor) && task.hexColor !== `#${task.defaultColor}` && task.hexColor !== task.defaultColor,
 		}"
 		:style="{'background-color': task.hexColor !== '#' && task.hexColor !== `#${task.defaultColor}` ? task.hexColor : false}"
+		@click.exact="openTaskDetail()"
 		@click.ctrl="() => toggleTaskDone(task)"
-		@click.exact="() => $router.push({ name: 'task.kanban.detail', params: { id: task.id } })"
 		@click.meta="() => toggleTaskDone(task)"
 	>
 		<span class="task-id">
@@ -115,6 +115,13 @@ export default {
 				this.loadingInternal = false
 			}
 		},
+		openTaskDetail() {
+			this.$router.push({
+				name: 'task.detail',
+				params: { id: this.task.id },
+				state: { backdropView: this.$router.currentRoute.value.fullPath },
+			})
+		},
 	},
 }
 </script>

src/components/tasks/partials/relatedTasks.vue

@@ -365,4 +365,6 @@ export default {
 :deep(.multiselect .search-results button) {
 	padding: 0.5rem;
 }
+
+@include modal-transition();
 </style>

src/components/tasks/partials/singleTaskInList.vue

@@ -8,7 +8,7 @@
 		>
 		</span>
 		<router-link
-			:to="{ name: taskDetailRoute, params: { id: task.id } }"
+			:to="taskDetailRoute"
 			:class="{ 'done': task.done}"
 			class="tasktext">
 			<span>
@@ -129,10 +129,6 @@ export default {
 			type: Boolean,
 			default: false,
 		},
-		taskDetailRoute: {
-			type: String,
-			default: 'task.list.detail',
-		},
 		showList: {
 			type: Boolean,
 			default: false,
@@ -170,6 +166,14 @@ export default {
 				title: '',
 			} : this.$store.state.currentList
 		},
+		taskDetailRoute() {
+			return {
+				name: 'task.detail',
+				params: { id: this.task.id },
+				// TODO: re-enable opening task detail in modal
+				// state: { backdropView: this.$router.currentRoute.value.fullPath },
+			}
+		},
 	},
 	methods: {
 		async markAsDone(checked) {

src/components/tasks/partials/sort.vue

@@ -1,20 +1,21 @@
 <template>
-	<a @click="$emit('click')">
+	<BaseButton>
 		<icon icon="sort-up" v-if="order === 'asc'"/>
-		<icon icon="sort-up" rotation="180" v-else-if="order === 'desc'"/>
+		<icon icon="sort-up" v-else-if="order === 'desc'" rotation="180"/>
 		<icon icon="sort" v-else/>
-	</a>
+	</BaseButton>
 </template>
 
-<script>
+<script setup lang="ts">
-export default {
+import {PropType} from 'vue'
-	name: 'sort',
+import BaseButton from '@/components/base/BaseButton.vue'
-	props: {
+
+type Order = 'asc' | 'desc' | 'none'
+
+defineProps({
 	order: {
-			type: String,
+		type: String as PropType<Order>,
 		default: 'none',
 	},
-	},
+})
-	emits: ['click'],
-}
 </script>

src/composables/taskList.js

@@ -0,0 +1,111 @@
+import { ref, shallowReactive, watch, computed } from 'vue'
+import {useRoute} from 'vue-router'
+
+import TaskCollectionService from '@/services/taskCollection'
+
+// FIXME: merge with DEFAULT_PARAMS in filters.vue
+export const getDefaultParams = () => ({
+	sort_by: ['position', 'id'],
+	order_by: ['asc', 'desc'],
+	filter_by: ['done'],
+	filter_value: ['false'],
+	filter_comparator: ['equals'],
+	filter_concat: 'and',
+})
+
+const SORT_BY_DEFAULT = {
+	id: 'desc',
+}
+
+/**
+ * This mixin provides a base set of methods and properties to get tasks on a list.
+ */
+export function useTaskList(listId) {
+	const params = ref({...getDefaultParams()})
+	
+	const search = ref('')
+	const page = ref(1)
+
+	const sortBy = ref({ ...SORT_BY_DEFAULT })
+
+
+	// This makes sure an id sort order is always sorted last.
+	// When tasks would be sorted first by id and then by whatever else was specified, the id sort takes
+	// precedence over everything else, making any other sort columns pretty useless.
+	function formatSortOrder(params) {
+		let hasIdFilter = false
+		const sortKeys = Object.keys(sortBy.value)
+		for (const s of sortKeys) {
+			if (s === 'id') {
+				sortKeys.splice(s, 1)
+				hasIdFilter = true
+				break
+			}
+		}
+		if (hasIdFilter) {
+			sortKeys.push('id')
+		}
+		params.sort_by = sortKeys
+		params.order_by = sortKeys.map(s => sortBy.value[s])
+
+		return params
+	}
+
+	const getAllTasksParams = computed(() => {
+		let loadParams = {...params.value}
+
+		if (search.value !== '') {
+			loadParams.s = search.value
+		}
+
+		loadParams = formatSortOrder(loadParams)
+
+		return [
+			{listId: listId.value},
+			loadParams,
+			page.value || 1,
+		]
+	})
+
+	const taskCollectionService = shallowReactive(new TaskCollectionService())
+	const loading = computed(() => taskCollectionService.loading)
+	const totalPages = computed(() => taskCollectionService.totalPages)
+
+	const tasks = ref([])
+	async function loadTasks() {
+		tasks.value = await taskCollectionService.getAll(...getAllTasksParams.value)
+		return tasks.value
+	}
+
+	const route = useRoute()
+	watch(() => route.query, (query) => {
+		const { page: pageQueryValue, search: searchQuery } = query
+		if (searchQuery !== undefined) {
+			search.value = searchQuery
+		}
+		if (pageQueryValue !== undefined) {
+			page.value = parseInt(pageQueryValue)
+		}
+
+	}, { immediate: true })
+
+
+	// Only listen for query path changes
+	watch(() => JSON.stringify(getAllTasksParams.value), (newParams, oldParams) => {
+		if (oldParams === newParams) {
+			return
+		}
+
+		loadTasks()
+	}, { immediate: true })
+
+	return {
+		tasks,
+		loading,
+		totalPages,
+		currentPage: page,
+		loadTasks,
+		searchTerm: search,
+		params,
+	}
+}

src/composables/useTitle.ts

@@ -1,9 +1,9 @@
 import { computed, watchEffect } from 'vue'
 import { setTitle } from '@/helpers/setTitle'
 
-import { ComputedGetter, ComputedRef } from '@vue/reactivity'
+import { ComputedGetter } from '@vue/reactivity'
 
-export function useTitle<T>(titleGetter: ComputedGetter<T>) : ComputedRef<T> {
+export function useTitle(titleGetter: ComputedGetter<string>) {
 	const titleRef = computed(titleGetter)
 
 	watchEffect(() => setTitle(titleRef.value))

src/helpers/auth.ts

@@ -53,6 +53,7 @@ export async function refreshToken(persist: boolean): Promise<AxiosResponse> {
 		return response
 
 	} catch(e) {
+		// @ts-ignore
 		throw new Error('Error renewing token: ', { cause: e })
 	}
 }

src/helpers/saveListView.js

@@ -1,3 +1,5 @@
+// Save the current list view to local storage
+// We use local storage and not vuex here to make it persistent across reloads.
 export const saveListView = (listId, routeName) => {
 	if (routeName.includes('settings.')) {
 		return

src/helpers/setTitle.ts

@@ -1,4 +1,4 @@
-export function setTitle(title) {
+export function setTitle(title : undefined | string) {
 	document.title = (typeof title === 'undefined' || title === '')
 		? 'Vikunja'
 		: `${title} | Vikunja`

src/models/task.js

@@ -10,9 +10,6 @@ import {parseDateOrNull} from '@/helpers/parseDateOrNull'
 const SUPPORTS_TRIGGERED_NOTIFICATION = 'Notification' in window && 'showTrigger' in Notification.prototype
 
 export default class TaskModel extends AbstractModel {
-
-	defaultColor = '198CFF'
-
 	constructor(data) {
 		super(data)
 

src/router/index.ts

@@ -2,6 +2,8 @@ import { createRouter, createWebHistory, RouteLocation } from 'vue-router'
 import {saveLastVisited} from '@/helpers/saveLastVisited'
 import {store} from '@/store'
 
+import {saveListView, getListView} from '@/helpers/saveListView'
+
 import HomeComponent from '../views/Home.vue'
 import NotFoundComponent from '../views/404.vue'
 import About from '../views/About.vue'
@@ -13,9 +15,8 @@ import DataExportDownload from '../views/user/DataExportDownload.vue'
 // Tasks
 import ShowTasksInRangeComponent from '../views/tasks/ShowTasksInRange.vue'
 import LinkShareAuthComponent from '../views/sharing/LinkSharingAuth.vue'
-import TaskDetailViewModal from '../views/tasks/TaskDetailViewModal.vue'
-import TaskDetailView from '../views/tasks/TaskDetailView.vue'
 import ListNamespaces from '../views/namespaces/ListNamespaces.vue'
+import TaskDetailView from '../views/tasks/TaskDetailView.vue'
 // Team Handling
 import ListTeamsComponent from '../views/teams/ListTeams.vue'
 // Label Handling
@@ -25,11 +26,11 @@ import NewLabelComponent from '../views/labels/NewLabel.vue'
 import MigrationComponent from '../views/migrator/Migrate.vue'
 import MigrateServiceComponent from '../views/migrator/MigrateService.vue'
 // List Views
-import ShowListComponent from '../views/list/ShowList.vue'
+import ListList from '../views/list/ListList.vue'
-import Kanban from '../views/list/views/Kanban.vue'
+import ListGantt from '../views/list/ListGantt.vue'
-import List from '../views/list/views/List.vue'
+import ListTable from '../views/list/ListTable.vue'
-import Gantt from '../views/list/views/Gantt.vue'
+import ListKanban from '../views/list/ListKanban.vue'
-import Table from '../views/list/views/Table.vue'
+
 // List Settings
 import ListSettingEdit from '../views/list/settings/edit.vue'
 import ListSettingBackground from '../views/list/settings/background.vue'
@@ -80,7 +81,7 @@ const router = createRouter({
 
 		// Scroll to anchor should still work
 		if (to.hash) {
-			return {el: document.getElementById(to.hash.slice(1))}
+			return {el: to.hash}
 		}
 
 		// Otherwise just scroll to the top
@@ -201,320 +202,170 @@ const router = createRouter({
 		{
 			path: '/namespaces/new',
 			name: 'namespace.create',
-			components: {
+			component: NewNamespaceComponent,
-				popup: NewNamespaceComponent,
+			meta: {
-			},
+				showAsModal: true,
-		},
-		{
-			path: '/namespaces/:id/list',
-			name: 'list.create',
-			components: {
-				popup: NewListComponent,
 			},
 		},
 		{
 			path: '/namespaces/:id/settings/edit',
 			name: 'namespace.settings.edit',
-			components: {
+			component: NamespaceSettingEdit,
-				popup: NamespaceSettingEdit,
+			meta: {
+				showAsModal: true,
 			},
 		},
 		{
-			path: '/namespaces/:id/settings/share',
+			path: '/namespaces/:namespaceId/settings/share',
 			name: 'namespace.settings.share',
-			components: {
+			component: NamespaceSettingShare,
-				popup: NamespaceSettingShare,
+			meta: {
+				showAsModal: true,
 			},
 		},
 		{
 			path: '/namespaces/:id/settings/archive',
 			name: 'namespace.settings.archive',
-			components: {
+			component: NamespaceSettingArchive,
-				popup: NamespaceSettingArchive,
+			meta: {
+				showAsModal: true,
 			},
 		},
 		{
 			path: '/namespaces/:id/settings/delete',
 			name: 'namespace.settings.delete',
-			components: {
+			component: NamespaceSettingDelete,
-				popup: NamespaceSettingDelete,
+			meta: {
+				showAsModal: true,
 			},
 		},
 		{
 			path: '/tasks/:id',
 			name: 'task.detail',
 			component: TaskDetailView,
+			props: route => ({ taskId: parseInt(route.params.id as string) }),
 		},
 		{
 			path: '/tasks/by/upcoming',
 			name: 'tasks.range',
 			component: ShowTasksInRangeComponent,
 		},
+		{
+			path: '/lists/new/:namespaceId/',
+			name: 'list.create',
+			component: NewListComponent,
+			meta: {
+				showAsModal: true,
+			},
+		},
 		{
 			path: '/lists/:listId/settings/edit',
 			name: 'list.settings.edit',
-			components: {
+			component: ListSettingEdit,
-				popup: ListSettingEdit,
+			meta: {
+				showAsModal: true,
 			},
 		},
 		{
 			path: '/lists/:listId/settings/background',
 			name: 'list.settings.background',
-			components: {
+			component: ListSettingBackground,
-				popup: ListSettingBackground,
+			meta: {
+				showAsModal: true,
 			},
 		},
 		{
 			path: '/lists/:listId/settings/duplicate',
 			name: 'list.settings.duplicate',
-			components: {
+			component: ListSettingDuplicate,
-				popup: ListSettingDuplicate,
+			meta: {
+				showAsModal: true,
 			},
 		},
 		{
 			path: '/lists/:listId/settings/share',
 			name: 'list.settings.share',
-			components: {
+			component: ListSettingShare,
-				popup: ListSettingShare,
+			meta: {
+				showAsModal: true,
 			},
 		},
 		{
 			path: '/lists/:listId/settings/delete',
 			name: 'list.settings.delete',
-			components: {
+			component: ListSettingDelete,
-				popup: ListSettingDelete,
+			meta: {
+				showAsModal: true,
 			},
 		},
 		{
 			path: '/lists/:listId/settings/archive',
 			name: 'list.settings.archive',
-			components: {
+			component: ListSettingArchive,
-				popup: ListSettingArchive,
+			meta: {
+				showAsModal: true,
 			},
 		},
 		{
 			path: '/lists/:listId/settings/edit',
 			name: 'filter.settings.edit',
-			components: {
+			component: FilterEdit,
-				popup: FilterEdit,
+			meta: {
+				showAsModal: true,
 			},
 		},
 		{
 			path: '/lists/:listId/settings/delete',
 			name: 'filter.settings.delete',
-			components: {
+			component: FilterDelete,
-				popup: FilterDelete,
+			meta: {
+				showAsModal: true,
 			},
 		},
 		{
 			path: '/lists/:listId',
 			name: 'list.index',
-			component: ShowListComponent,
+			redirect(to) {
-			children: [
+				// Redirect the user to list view by default
+
+				const savedListView = getListView(to.params.listId)
+				console.debug('Replaced list view with', savedListView)
+
+				return {
+					name:  router.hasRoute(savedListView)
+						? savedListView
+						: 'list.list',
+					params: {listId: to.params.listId},
+				}
+			},
+		},
 		{
 			path: '/lists/:listId/list',
 			name: 'list.list',
-					component: List,
+			component: ListList,
-					children: [
+			beforeEnter: (to) => saveListView(to.params.listId, to.name),
-						{
+			props: route => ({ listId: parseInt(route.params.listId as string) }),
-							path: '/tasks/:id',
-							name: 'task.list.detail',
-							component: TaskDetailViewModal,
-						},
-						{
-							path: '/lists/:listId/settings/edit',
-							name: 'list.list.settings.edit',
-							component: ListSettingEdit,
-						},
-						{
-							path: '/lists/:listId/settings/background',
-							name: 'list.list.settings.background',
-							component: ListSettingBackground,
-						},
-						{
-							path: '/lists/:listId/settings/duplicate',
-							name: 'list.list.settings.duplicate',
-							component: ListSettingDuplicate,
-						},
-						{
-							path: '/lists/:listId/settings/share',
-							name: 'list.list.settings.share',
-							component: ListSettingShare,
-						},
-						{
-							path: '/lists/:listId/settings/delete',
-							name: 'list.list.settings.delete',
-							component: ListSettingDelete,
-						},
-						{
-							path: '/lists/:listId/settings/archive',
-							name: 'list.list.settings.archive',
-							component: ListSettingArchive,
-						},
-						{
-							path: '/lists/:listId/settings/edit',
-							name: 'filter.list.settings.edit',
-							component: FilterEdit,
-						},
-						{
-							path: '/lists/:listId/settings/delete',
-							name: 'filter.list.settings.delete',
-							component: FilterDelete,
-						},
-					],
 		},
 		{
 			path: '/lists/:listId/gantt',
 			name: 'list.gantt',
-					component: Gantt,
+			component: ListGantt,
-					children: [
+			beforeEnter: (to) => saveListView(to.params.listId, to.name),
-						{
+			props: route => ({ listId: parseInt(route.params.listId as string) }),
-							path: '/tasks/:id',
-							name: 'task.gantt.detail',
-							component: TaskDetailViewModal,
-						},
-						{
-							path: '/lists/:listId/settings/edit',
-							name: 'list.gantt.settings.edit',
-							component: ListSettingEdit,
-						},
-						{
-							path: '/lists/:listId/settings/background',
-							name: 'list.gantt.settings.background',
-							component: ListSettingBackground,
-						},
-						{
-							path: '/lists/:listId/settings/duplicate',
-							name: 'list.gantt.settings.duplicate',
-							component: ListSettingDuplicate,
-						},
-						{
-							path: '/lists/:listId/settings/share',
-							name: 'list.gantt.settings.share',
-							component: ListSettingShare,
-						},
-						{
-							path: '/lists/:listId/settings/delete',
-							name: 'list.gantt.settings.delete',
-							component: ListSettingDelete,
-						},
-						{
-							path: '/lists/:listId/settings/archive',
-							name: 'list.gantt.settings.archive',
-							component: ListSettingArchive,
-						},
-						{
-							path: '/lists/:listId/settings/edit',
-							name: 'filter.gantt.settings.edit',
-							component: FilterEdit,
-						},
-						{
-							path: '/lists/:listId/settings/delete',
-							name: 'filter.gantt.settings.delete',
-							component: FilterDelete,
-						},
-					],
 		},
 		{
 			path: '/lists/:listId/table',
 			name: 'list.table',
-					component: Table,
+			component: ListTable,
-					children: [
+			beforeEnter: (to) => saveListView(to.params.listId, to.name),
-						{
+			props: route => ({ listId: parseInt(route.params.listId as string) }),
-							path: '/lists/:listId/settings/edit',
-							name: 'list.table.settings.edit',
-							component: ListSettingEdit,
-						},
-						{
-							path: '/lists/:listId/settings/background',
-							name: 'list.table.settings.background',
-							component: ListSettingBackground,
-						},
-						{
-							path: '/lists/:listId/settings/duplicate',
-							name: 'list.table.settings.duplicate',
-							component: ListSettingDuplicate,
-						},
-						{
-							path: '/lists/:listId/settings/share',
-							name: 'list.table.settings.share',
-							component: ListSettingShare,
-						},
-						{
-							path: '/lists/:listId/settings/delete',
-							name: 'list.table.settings.delete',
-							component: ListSettingDelete,
-						},
-						{
-							path: '/lists/:listId/settings/archive',
-							name: 'list.table.settings.archive',
-							component: ListSettingArchive,
-						},
-						{
-							path: '/lists/:listId/settings/edit',
-							name: 'filter.table.settings.edit',
-							component: FilterEdit,
-						},
-						{
-							path: '/lists/:listId/settings/delete',
-							name: 'filter.table.settings.delete',
-							component: FilterDelete,
-						},
-					],
 		},
 		{
 			path: '/lists/:listId/kanban',
 			name: 'list.kanban',
-					component: Kanban,
+			component: ListKanban,
-					children: [
+			beforeEnter: (to) => saveListView(to.params.listId, to.name),
-						{
+			props: route => ({ listId: parseInt(route.params.listId as string) }),
-							path: '/tasks/:id',
-							name: 'task.kanban.detail',
-							component: TaskDetailViewModal,
-						},
-						{
-							path: '/lists/:listId/settings/edit',
-							name: 'list.kanban.settings.edit',
-							component: ListSettingEdit,
-						},
-						{
-							path: '/lists/:listId/settings/background',
-							name: 'list.kanban.settings.background',
-							component: ListSettingBackground,
-						},
-						{
-							path: '/lists/:listId/settings/duplicate',
-							name: 'list.kanban.settings.duplicate',
-							component: ListSettingDuplicate,
-						},
-						{
-							path: '/lists/:listId/settings/share',
-							name: 'list.kanban.settings.share',
-							component: ListSettingShare,
-						},
-						{
-							path: '/lists/:listId/settings/delete',
-							name: 'list.kanban.settings.delete',
-							component: ListSettingDelete,
-						},
-						{
-							path: '/lists/:listId/settings/archive',
-							name: 'list.kanban.settings.archive',
-							component: ListSettingArchive,
-						},
-						{
-							path: '/lists/:listId/settings/edit',
-							name: 'filter.kanban.settings.edit',
-							component: FilterEdit,
-						},
-						{
-							path: '/lists/:listId/settings/delete',
-							name: 'filter.kanban.settings.delete',
-							component: FilterDelete,
-						},
-					],
-				},
-			],
 		},
 		{
 			path: '/teams',
@@ -524,8 +375,9 @@ const router = createRouter({
 		{
 			path: '/teams/new',
 			name: 'teams.create',
-			components: {
+			component: NewTeamComponent,
-				popup: NewTeamComponent,
+			meta: {
+				showAsModal: true,
 			},
 		},
 		{
@@ -541,8 +393,9 @@ const router = createRouter({
 		{
 			path: '/labels/new',
 			name: 'labels.create',
-			components: {
+			component: NewLabelComponent,
-				popup: NewLabelComponent,
+			meta: {
+				showAsModal: true,
 			},
 		},
 		{
@@ -558,8 +411,9 @@ const router = createRouter({
 		{
 			path: '/filters/new',
 			name: 'filters.create',
-			components: {
+			component: FilterNew,
-				popup: FilterNew,
+			meta: {
+				showAsModal: true,
 			},
 		},
 		{
@@ -575,11 +429,7 @@ const router = createRouter({
 	],
 })
 
-router.beforeEach((to) => {
+export function getAuthForRoute(route: RouteLocation) {
-	return checkAuth(to)
-})
-
-function checkAuth(route: RouteLocation) {
 	const authUser = store.getters['auth/authUser']
 	const authLinkShare = store.getters['auth/authLinkShare']
 

src/store/index.js

@@ -18,6 +18,8 @@ import lists from './modules/lists'
 import attachments from './modules/attachments'
 import labels from './modules/labels'
 
+import ListModel from '@/models/list'
+
 import ListService from '../services/list'
 import {checkAndSetApiUrl} from '@/helpers/checkAndSetApiUrl'
 
@@ -37,13 +39,15 @@ export const store = createStore({
 		loading: false,
 		loadingModule: null,
 		// This is used to highlight the current list in menu for all list related views
-		currentList: {id: 0},
+		currentList: new ListModel({
+			id: 0,
+			isArchived: false,
+		}),
 		background: '',
 		hasTasks: false,
 		menuActive: true,
 		keyboardShortcutsActive: false,
 		quickActionsActive: false,
-		vikunjaReady: false,
 	},
 	mutations: {
 		[LOADING](state, loading) {
@@ -79,9 +83,6 @@ export const store = createStore({
 		[BACKGROUND](state, background) {
 			state.background = background
 		},
-		vikunjaReady(state, ready) {
-			state.vikunjaReady = ready
-		},
 	},
 	actions: {
 		async [CURRENT_LIST]({state, commit}, currentList) {
@@ -136,10 +137,9 @@ export const store = createStore({
 
 			commit(CURRENT_LIST, currentList)
 		},
-		async loadApp({commit, dispatch}) {
+		async loadApp({dispatch}) {
 			await checkAndSetApiUrl(window.API_URL)
 			await dispatch('auth/checkAuth')
-			commit('vikunjaReady', true)
 		},
 	},
 })

src/store/modules/auth.js

@@ -1,12 +1,12 @@
 import {HTTPFactory} from '@/http-common'
-import {getCurrentLanguage, saveLanguage} from '@/i18n'
+import {i18n, getCurrentLanguage, saveLanguage} from '@/i18n'
 import {LOADING} from '../mutation-types'
 import UserModel from '@/models/user'
 import UserSettingsService from '@/services/userSettings'
 import {getToken, refreshToken, removeToken, saveToken} from '@/helpers/auth'
 import {setLoading} from '@/store/helper'
-import {i18n} from '@/i18n'
 import {success} from '@/message'
+import {redirectToProvider} from '@/helpers/redirectToProvider'
 
 const AUTH_TYPES = {
 	'UNKNOWN': 0,
@@ -201,7 +201,19 @@ export default {
 			ctx.commit('authenticated', authenticated)
 			if (!authenticated) {
 				ctx.commit('info', null)
-				ctx.dispatch('config/redirectToProviderIfNothingElseIsEnabled', null, {root: true})
+				ctx.dispatch('redirectToProviderIfNothingElseIsEnabled')
+			}
+		},
+
+		redirectToProviderIfNothingElseIsEnabled({rootState}) {
+			const {auth} = rootState.config
+			if (
+				auth.local.enabled === false &&
+				auth.openidConnect.enabled &&
+				auth.openidConnect.providers?.length === 1 &&
+				window.location.pathname.startsWith('/login') // Kinda hacky, but prevents an endless loop.
+			) {
+				redirectToProvider(auth.openidConnect.providers[0], auth.openidConnect.redirectUrl)
 			}
 		},
 

src/store/modules/config.js

@@ -1,7 +1,6 @@
 import {CONFIG} from '../mutation-types'
 import {HTTPFactory} from '@/http-common'
 import {objectToCamelCase} from '@/helpers/case'
-import {redirectToProvider} from '../../helpers/redirectToProvider'
 import {parseURL} from 'ufo'
 
 export default {
@@ -75,16 +74,5 @@ export default {
 			ctx.commit(CONFIG, info)
 			return info
 		},
-
-		redirectToProviderIfNothingElseIsEnabled(ctx) {
-			if (ctx.state.auth.local.enabled === false &&
-				ctx.state.auth.openidConnect.enabled &&
-				ctx.state.auth.openidConnect.providers &&
-				ctx.state.auth.openidConnect.providers.length === 1 &&
-				window.location.pathname.startsWith('/login') // Kinda hacky, but prevents an endless loop.
-			) {
-				redirectToProvider(ctx.state.auth.openidConnect.providers[0])
-			}
-		},
 	},
 }

src/styles/common-imports.scss

@@ -16,6 +16,8 @@
 // since $tablet is defined by bulma we can just define it after importing the utilities
 $mobile: math.div($tablet, 2);
 
+@import "mixins";
+
 $family-sans-serif: 'Open Sans', Helvetica, Arial, sans-serif;
 $vikunja-font: 'Quicksand', sans-serif;
 

src/styles/mixins.scss

@@ -0,0 +1,12 @@
+/* Transitions */
+@mixin modal-transition() {
+	.modal-enter,
+	.modal-leave-active {
+		opacity: 0;
+	}
+
+	.modal-enter .modal-container,
+	.modal-leave-active .modal-container {
+		transform: scale(0.9);
+	}
+}

src/styles/theme/background.scss

@@ -14,7 +14,7 @@
   .box,
   .card,
   .switch-view,
-  .table-view .button,
+  .list-table .button,
   .filter-container .button,
   .search .button {
     box-shadow: none;

src/types/shims-vue.d.ts

@@ -3,6 +3,9 @@ declare module 'vue' {
 	const Vue: CompatVue
 	export default Vue
 	export * from '@vue/runtime-dom'
+
+	const { configureCompat } = Vue
+	export { configureCompat }
 }
 
 // https://next.vuex.vuejs.org/guide/migrating-to-4-0-from-3-x.html#typescript-support

src/types/vue-flatpickr-component.d.ts

@@ -0,0 +1 @@
+declare module 'vue-flatpickr-component';

src/views/Home.vue

@@ -23,7 +23,7 @@
 			<template v-if="defaultNamespaceId > 0">
 				<p class="mt-4">{{ $t('home.list.newText') }}</p>
 				<x-button
-					:to="{ name: 'list.create', params: { id: defaultNamespaceId } }"
+					:to="{ name: 'list.create', params: { namespaceId: defaultNamespaceId } }"
 					:shadow="false"
 					class="ml-2"
 				>

src/views/list/ListGantt.vue

@@ -1,6 +1,6 @@
 <template>
-	<div class="gantt-chart-container">
+	<ListWrapper class="list-gantt" :list-id="props.listId" viewName="gantt">
-		<card :padding="false" class="has-overflow">
+		<template #header>
 		<div class="gantt-options p-4">
 			<fancycheckbox class="is-block" v-model="showTaskswithoutDates">
 				{{ $t('list.gantt.showTasksWithoutDates') }}
@@ -44,65 +44,64 @@
 				</div>
 			</div>
 		</div>
+		</template>
+		
+		<template #default>
+		<div class="gantt-chart-container">
+		<card :padding="false" class="has-overflow">
+
 		<gantt-chart
 			:date-from="dateFrom"
 			:date-to="dateTo"
 			:day-width="dayWidth"
-			:list-id="Number($route.params.listId)"
+			:list-id="props.listId"
 			:show-taskswithout-dates="showTaskswithoutDates"
 		/>
 
-		<!-- This router view is used to show the task popup while keeping the gantt chart itself -->
-		<router-view v-slot="{ Component }">
-			<transition name="modal">
-				<component :is="Component" />
-			</transition>
-		</router-view>
-
 		</card>
 		</div>
+		</template>
+	</ListWrapper>
 </template>
 
-<script>
+<script setup lang="ts">
-import GanttChart from '../../../components/tasks/gantt-component'
+import { ref, computed } from 'vue'
 import flatPickr from 'vue-flatpickr-component'
-import Fancycheckbox from '../../../components/input/fancycheckbox'
-import {saveListView} from '@/helpers/saveListView'
 
-export default {
+import { useI18n } from 'vue-i18n'
-	name: 'Gantt',
+import { useStore } from 'vuex'
-	components: {
+
-		Fancycheckbox,
+import ListWrapper from './ListWrapper.vue'
-		flatPickr,
+import GanttChart from '@/components/tasks/gantt-component.vue'
-		GanttChart,
+import Fancycheckbox from '@/components/input/fancycheckbox.vue'
+
+const props = defineProps({
+	listId: {
+		type: Number,
+		required: true,
 	},
-	created() {
+})
-		// Save the current list view to local storage
+
-		// We use local storage and not vuex here to make it persistent across reloads.
+const DEFAULT_DAY_COUNT = 35 
-		saveListView(this.$route.params.listId, this.$route.name)
+
-	},
+const showTaskswithoutDates = ref(false)
-	data() {
+const dayWidth = ref(DEFAULT_DAY_COUNT)
-		return {
+
-			showTaskswithoutDates: false,
+const now = ref(new Date())
-			dayWidth: 35,
+const dateFrom = ref(new Date((new Date()).setDate(now.value.getDate() - 15)))
-			dateFrom: new Date((new Date()).setDate((new Date()).getDate() - 15)),
+const dateTo = ref(new Date((new Date()).setDate(now.value.getDate() + 30)))
-			dateTo: new Date((new Date()).setDate((new Date()).getDate() + 30)),
+
-		}
+const {t} = useI18n()
-	},
+const store = useStore()
-	computed: {
+const flatPickerConfig = computed(() => ({
-		flatPickerConfig() {
+	altFormat: t('date.altFormatShort'),
-			return {
-				altFormat: this.$t('date.altFormatShort'),
 	altInput: true,
 	dateFormat: 'Y-m-d',
 	enableTime: false,
 	locale: {
-					firstDayOfWeek: this.$store.state.auth.settings.weekStart,
+		firstDayOfWeek: store.state.auth.settings.weekStart,
 	},
-			}
+}))
-		},
-	},
-}
 </script>
 
 <style lang="scss">

src/views/list/ListKanban.vue

@@ -1,5 +1,6 @@
 <template>
-	<div class="kanban-view">
+	<ListWrapper class="list-kanban" :list-id="listId" viewName="kanban">
+		<template #header>
 			<div class="filter-container" v-if="isSavedFilter">
 			<div class="items">
 				<filter-popup
@@ -8,6 +9,10 @@
 				/>
 			</div>
 			</div>
+		</template>
+
+		<template #default>
+			<div class="kanban-view">
 			<div
 				:class="{ 'is-loading': loading && !oneTaskUpdating}"
 				class="kanban kanban-bucket-container loader-container"
@@ -204,18 +209,11 @@
 			</div>
 		</div>
 
-		<!-- This router view is used to show the task popup while keeping the kanban board itself -->
-		<router-view v-slot="{ Component }">
-			<transition name="modal">
-				<component :is="Component"/>
-			</transition>
-		</router-view>
-
 		<transition name="modal">
 			<modal
+				v-if="showBucketDeleteModal"
 				@close="showBucketDeleteModal = false"
 				@submit="deleteBucket()"
-				v-if="showBucketDeleteModal"
 			>
 				<template #header><span>{{ $t('list.kanban.deleteHeaderBucket') }}</span></template>
 
@@ -226,21 +224,23 @@
 			</modal>
 		</transition>
 		</div>
+		</template>
+	</ListWrapper>
 </template>
 
 <script>
 import draggable from 'vuedraggable'
 import cloneDeep from 'lodash.clonedeep'
 
-import BucketModel from '../../../models/bucket'
+import BucketModel from '../../models/bucket'
 import {mapState} from 'vuex'
-import {saveListView} from '@/helpers/saveListView'
+import Rights from '../../models/constants/rights.json'
-import Rights from '../../../models/constants/rights.json'
 import {LOADING, LOADING_MODULE} from '@/store/mutation-types'
+import ListWrapper from './ListWrapper'
 import FilterPopup from '@/components/list/partials/filter-popup.vue'
 import Dropdown from '@/components/misc/dropdown.vue'
 import {getCollapsedBucketState, saveCollapsedBucketState} from '@/helpers/saveCollapsedBucketState'
-import {calculateItemPosition} from '../../../helpers/calculateItemPosition'
+import {calculateItemPosition} from '../../helpers/calculateItemPosition'
 import KanbanCard from '@/components/tasks/partials/kanban-card'
 
 const DRAG_OPTIONS = {
@@ -257,11 +257,20 @@ const MIN_SCROLL_HEIGHT_PERCENT = 0.25
 export default {
 	name: 'Kanban',
 	components: {
+		ListWrapper,
 		KanbanCard,
 		Dropdown,
 		FilterPopup,
 		draggable,
 	},
+
+	props: {
+		listId: {
+			type: Number,
+			required: true,
+		},
+	},
+
 	data() {
 		return {
 			taskContainerRefs: {},
@@ -296,11 +305,7 @@ export default {
 			},
 		}
 	},
-	created() {
+
-		// Save the current list view to local storage
-		// We use local storage and not vuex here to make it persistent across reloads.
-		saveListView(this.$route.params.listId, this.$route.name)
-	},
 	watch: {
 		loadBucketParameter: {
 			handler: 'loadBuckets',
@@ -313,7 +318,7 @@ export default {
 		},
 		loadBucketParameter() {
 			return {
-				listId: this.$route.params.listId,
+				listId: this.listId,
 				params: this.params,
 			}
 		},
@@ -353,16 +358,11 @@ export default {
 
 	methods: {
 		loadBuckets() {
-			// Prevent trying to load buckets if the task popup view is active
-			if (this.$route.name !== 'list.kanban') {
-				return
-			}
-
 			const {listId, params} = this.loadBucketParameter
 
 			this.collapsedBuckets = getCollapsedBucketState(listId)
 
-			console.debug(`Loading buckets, loadedListId = ${this.loadedListId}, $route.params =`, this.$route.params)
+			console.debug(`Loading buckets, loadedListId = ${this.loadedListId}, $attrs = ${this.$attrs} $route.params =`, this.$route.params)
 
 			this.$store.dispatch('kanban/loadBucketsForList', {listId, params})
 		},
@@ -437,7 +437,7 @@ export default {
 			const task = await this.$store.dispatch('tasks/createNewTask', {
 				title: this.newTaskText,
 				bucketId,
-				listId: this.$route.params.listId,
+				listId: this.listId,
 			})
 			this.newTaskText = ''
 			this.$store.commit('kanban/addTaskToBucket', task)
@@ -459,7 +459,7 @@ export default {
 
 			const newBucket = new BucketModel({
 				title: this.newBucketTitle,
-				listId: parseInt(this.$route.params.listId),
+				listId: this.listId,
 			})
 
 			await this.$store.dispatch('kanban/createBucket', newBucket)
@@ -479,7 +479,7 @@ export default {
 		async deleteBucket() {
 			const bucket = new BucketModel({
 				id: this.bucketToDelete,
-				listId: parseInt(this.$route.params.listId),
+				listId: this.listId,
 			})
 
 			try {
@@ -567,7 +567,7 @@ export default {
 
 		collapseBucket(bucket) {
 			this.collapsedBuckets[bucket.id] = true
-			saveCollapsedBucketState(this.$route.params.listId, this.collapsedBuckets)
+			saveCollapsedBucketState(this.listId, this.collapsedBuckets)
 		},
 		unCollapseBucket(bucket) {
 			if (!this.collapsedBuckets[bucket.id]) {
@@ -575,7 +575,7 @@ export default {
 			}
 
 			this.collapsedBuckets[bucket.id] = false
-			saveCollapsedBucketState(this.$route.params.listId, this.collapsedBuckets)
+			saveCollapsedBucketState(this.listId, this.collapsedBuckets)
 		},
 	},
 }
@@ -746,4 +746,6 @@ $filter-container-height: '1rem - #{$switch-view-height}';
 .move-card-leave-active {
 	display: none;
 }
+
+@include modal-transition();
 </style>

src/views/list/ListList.vue

@@ -1,8 +1,6 @@
 <template>
-	<div
+	<ListWrapper class="list-list" :list-id="listId" viewName="list">
-		:class="{ 'is-loading': taskCollectionService.loading }"
+		<template #header>
-		class="loader-container is-max-width-desktop list-view"
-	>
 		<div
 			class="filter-container"
 			v-if="list.isSavedFilter && !list.isSavedFilter()"
@@ -26,7 +24,7 @@
 						</div>
 						<div class="control">
 							<x-button
-								:loading="taskCollectionService.loading"
+								:loading="loading"
 								@click="searchTasks"
 								:shadow="false"
 							>
@@ -47,7 +45,13 @@
 				/>
 			</div>
 		</div>
+		</template>
 
+		<template #default>
+		<div
+			:class="{ 'is-loading': loading }"
+			class="loader-container is-max-width-desktop list-view"
+		>
 		<card :padding="false" :has-content="false" class="has-overflow">
 			<template
 				v-if="!list.isArchived && canWrite && list.id > 0"
@@ -59,7 +63,7 @@
 				/>
 			</template>
 
-			<nothing v-if="ctaVisible && tasks.length === 0 && !taskCollectionService.loading">
+			<nothing v-if="ctaVisible && tasks.length === 0 && !loading">
 				{{ $t('list.list.empty') }}
 				<a @click="focusNewTaskInput()">
 					{{ $t('list.list.newTaskCta') }}
@@ -90,7 +94,6 @@
 								:disabled="!canWrite"
 								:the-task="t"
 								@taskUpdated="updateTasks"
-								task-detail-route="task.detail"
 							>
 								<template v-if="canWrite">
 									<span class="icon handle">
@@ -119,39 +122,32 @@
 			</div>
 
 			<Pagination 
-				:total-pages="taskCollectionService.totalPages"
+				:total-pages="totalPages"
 				:current-page="currentPage"
 			/>
 		</card>
-
-		<!-- This router view is used to show the task popup while keeping the kanban board itself -->
-		<router-view v-slot="{ Component }">
-			<transition name="modal">
-				<component :is="Component"/>
-			</transition>
-		</router-view>
 		</div>
+		</template>
+	</ListWrapper>
 </template>
 
 <script>
-import TaskService from '../../../services/task'
+import { ref, toRef, defineComponent } from 'vue'
-import TaskModel from '../../../models/task'
 
-import EditTask from '../../../components/tasks/edit-task'
+import ListWrapper from './ListWrapper.vue'
-import AddTask from '../../../components/tasks/add-task'
+import EditTask from '@/components/tasks/edit-task'
-import SingleTaskInList from '../../../components/tasks/partials/singleTaskInList'
+import AddTask from '@/components/tasks/add-task'
-import taskList from '../../../components/tasks/mixins/taskList'
+import SingleTaskInList from '@/components/tasks/partials/singleTaskInList'
-import {saveListView} from '@/helpers/saveListView'
+import { useTaskList } from '@/composables/taskList'
-import Rights from '../../../models/constants/rights.json'
+import Rights from '../../models/constants/rights.json'
 import FilterPopup from '@/components/list/partials/filter-popup.vue'
 import {HAS_TASKS} from '@/store/mutation-types'
 import Nothing from '@/components/misc/nothing.vue'
 import Pagination from '@/components/misc/pagination.vue'
-import Popup from '@/components/misc/popup'
+import {ALPHABETICAL_SORT} from '@/components/list/partials/filters.vue'
-import { ALPHABETICAL_SORT } from '@/components/list/partials/filters'
 
 import draggable from 'vuedraggable'
-import {calculateItemPosition} from '../../../helpers/calculateItemPosition'
+import {calculateItemPosition} from '../../helpers/calculateItemPosition'
 
 function sortTasks(tasks) {
 	if (tasks === null || tasks === []) {
@@ -171,13 +167,18 @@ function sortTasks(tasks) {
 	})
 }
 
-export default {
+export default defineComponent({
 	name: 'List',
+	
+	props: {
+		listId: {
+			type: Number,
+			required: true,
+		},
+	},
+
 	data() {
 		return {
-			taskService: new TaskService(),
-			isTaskEdit: false,
-			taskEditTask: TaskModel,
 			ctaVisible: false,
 			showTaskSearch: false,
 
@@ -188,11 +189,8 @@ export default {
 			},
 		}
 	},
-	mixins: [
-		taskList,
-	],
 	components: {
-		Popup,
+		ListWrapper,
 		Nothing,
 		FilterPopup,
 		SingleTaskInList,
@@ -201,10 +199,24 @@ export default {
 		draggable,
 		Pagination,
 	},
-	created() {
+
-		// Save the current list view to local storage
+	setup(props) {
-		// We use local storage and not vuex here to make it persistent across reloads.
+		const taskEditTask = ref(null)
-		saveListView(this.$route.params.listId, this.$route.name)
+		const isTaskEdit = ref(false)
+
+		// This function initializes the tasks page and loads the first page of tasks
+		// function beforeLoad() {
+		// 	taskEditTask.value = null
+		// 	isTaskEdit.value = false
+		// }
+
+		const taskList = useTaskList(toRef(props, 'listId'))
+
+		return {
+			taskEditTask,
+			isTaskEdit,
+			...taskList,
+		}
 	},
 	computed: {
 		isAlphabeticalSorting() {
@@ -244,17 +256,11 @@ export default {
 			// When clicking on the search button, @blur from the input is fired. If we
 			// would then directly hide the whole search bar directly, no click event
 			// from the button gets fired. To prevent this, we wait 200ms until we hide
-			// everything so the button has a chance of firering the search event.
+			// everything so the button has a chance of firing the search event.
 			setTimeout(() => {
 				this.showTaskSearch = false
 			}, 200)
 		},
-		// This function initializes the tasks page and loads the first page of tasks
-		initTasks(page, search = '') {
-			this.taskEditTask = null
-			this.isTaskEdit = false
-			this.loadTasks(page, search)
-		},
 		focusNewTaskInput() {
 			this.$refs.newTaskInput.$refs.newTaskInput.focus()
 		},
@@ -312,7 +318,7 @@ export default {
 			this.tasks[e.newIndex] = updatedTask
 		},
 	},
-}
+})
 </script>
 
 <style lang="scss" scoped>

src/views/list/ListTable.vue

@@ -0,0 +1,311 @@
+<template>
+	<ListWrapper class="list-table" :list-id="listId" viewName="table">
+		<template #header>
+			<div class="filter-container">
+			<div class="items">
+				<popup>
+					<template #trigger="{toggle}">
+						<x-button
+							@click.prevent.stop="toggle()"
+							icon="th"
+							variant="secondary"
+						>
+							{{ $t('list.table.columns') }}
+						</x-button>
+					</template>
+					<template #content="{isOpen}">
+						<card class="columns-filter" :class="{'is-open': isOpen}">
+							<fancycheckbox v-model="activeColumns.id">#</fancycheckbox>
+							<fancycheckbox v-model="activeColumns.done">
+								{{ $t('task.attributes.done') }}
+							</fancycheckbox>
+							<fancycheckbox v-model="activeColumns.title">
+								{{ $t('task.attributes.title') }}
+							</fancycheckbox>
+							<fancycheckbox v-model="activeColumns.priority">
+								{{ $t('task.attributes.priority') }}
+							</fancycheckbox>
+							<fancycheckbox v-model="activeColumns.labels">
+								{{ $t('task.attributes.labels') }}
+							</fancycheckbox>
+							<fancycheckbox v-model="activeColumns.assignees">
+								{{ $t('task.attributes.assignees') }}
+							</fancycheckbox>
+							<fancycheckbox v-model="activeColumns.dueDate">
+								{{ $t('task.attributes.dueDate') }}
+							</fancycheckbox>
+							<fancycheckbox v-model="activeColumns.startDate">
+								{{ $t('task.attributes.startDate') }}
+							</fancycheckbox>
+							<fancycheckbox v-model="activeColumns.endDate">
+								{{ $t('task.attributes.endDate') }}
+							</fancycheckbox>
+							<fancycheckbox v-model="activeColumns.percentDone">
+								{{ $t('task.attributes.percentDone') }}
+							</fancycheckbox>
+							<fancycheckbox v-model="activeColumns.created">
+								{{ $t('task.attributes.created') }}
+							</fancycheckbox>
+							<fancycheckbox v-model="activeColumns.updated">
+								{{ $t('task.attributes.updated') }}
+							</fancycheckbox>
+							<fancycheckbox v-model="activeColumns.createdBy">
+								{{ $t('task.attributes.createdBy') }}
+							</fancycheckbox>
+						</card>
+					</template>
+				</popup>
+				<filter-popup v-model="params" />
+			</div>
+			</div>
+		</template>
+
+		<template #default>
+			<div :class="{'is-loading': loading}" class="loader-container">
+			<card :padding="false" :has-content="false">
+			<div class="has-horizontal-overflow">
+				<table class="table has-actions is-hoverable is-fullwidth mb-0">
+					<thead>
+					<tr>
+						<th v-if="activeColumns.id">
+							#
+							<Sort :order="sortBy.id" @click="sort('id')"/>
+						</th>
+						<th v-if="activeColumns.done">
+							{{ $t('task.attributes.done') }}
+							<Sort :order="sortBy.done" @click="sort('done')"/>
+						</th>
+						<th v-if="activeColumns.title">
+							{{ $t('task.attributes.title') }}
+							<Sort :order="sortBy.title" @click="sort('title')"/>
+						</th>
+						<th v-if="activeColumns.priority">
+							{{ $t('task.attributes.priority') }}
+							<Sort :order="sortBy.priority" @click="sort('priority')"/>
+						</th>
+						<th v-if="activeColumns.labels">
+							{{ $t('task.attributes.labels') }}
+						</th>
+						<th v-if="activeColumns.assignees">
+							{{ $t('task.attributes.assignees') }}
+						</th>
+						<th v-if="activeColumns.dueDate">
+							{{ $t('task.attributes.dueDate') }}
+							<Sort :order="sortBy.due_date" @click="sort('due_date')"/>
+						</th>
+						<th v-if="activeColumns.startDate">
+							{{ $t('task.attributes.startDate') }}
+							<Sort :order="sortBy.start_date" @click="sort('start_date')"/>
+						</th>
+						<th v-if="activeColumns.endDate">
+							{{ $t('task.attributes.endDate') }}
+							<Sort :order="sortBy.end_date" @click="sort('end_date')"/>
+						</th>
+						<th v-if="activeColumns.percentDone">
+							{{ $t('task.attributes.percentDone') }}
+							<Sort :order="sortBy.percent_done" @click="sort('percent_done')"/>
+						</th>
+						<th v-if="activeColumns.created">
+							{{ $t('task.attributes.created') }}
+							<Sort :order="sortBy.created" @click="sort('created')"/>
+						</th>
+						<th v-if="activeColumns.updated">
+							{{ $t('task.attributes.updated') }}
+							<Sort :order="sortBy.updated" @click="sort('updated')"/>
+						</th>
+						<th v-if="activeColumns.createdBy">
+							{{ $t('task.attributes.createdBy') }}
+						</th>
+					</tr>
+					</thead>
+					<tbody>
+					<tr :key="t.id" v-for="t in tasks">
+						<td v-if="activeColumns.id">
+							<router-link :to="taskDetailRoutes[t.id]">
+								<template v-if="t.identifier === ''">
+									#{{ t.index }}
+								</template>
+								<template v-else>
+									{{ t.identifier }}
+								</template>
+							</router-link>
+						</td>
+						<td v-if="activeColumns.done">
+							<Done :is-done="t.done" variant="small" />
+						</td>
+						<td v-if="activeColumns.title">
+							<router-link :to="taskDetailRoutes[t.id]">{{ t.title }}</router-link>
+						</td>
+						<td v-if="activeColumns.priority">
+							<priority-label :priority="t.priority" :done="t.done" :show-all="true"/>
+						</td>
+						<td v-if="activeColumns.labels">
+							<labels :labels="t.labels"/>
+						</td>
+						<td v-if="activeColumns.assignees">
+							<user
+								:avatar-size="27"
+								:is-inline="true"
+								:key="t.id + 'assignee' + a.id + i"
+								:show-username="false"
+								:user="a"
+								v-for="(a, i) in t.assignees"
+							/>
+						</td>
+						<date-table-cell :date="t.dueDate" v-if="activeColumns.dueDate"/>
+						<date-table-cell :date="t.startDate" v-if="activeColumns.startDate"/>
+						<date-table-cell :date="t.endDate" v-if="activeColumns.endDate"/>
+						<td v-if="activeColumns.percentDone">{{ t.percentDone * 100 }}%</td>
+						<date-table-cell :date="t.created" v-if="activeColumns.created"/>
+						<date-table-cell :date="t.updated" v-if="activeColumns.updated"/>
+						<td v-if="activeColumns.createdBy">
+							<user
+								:avatar-size="27"
+								:show-username="false"
+								:user="t.createdBy"/>
+						</td>
+					</tr>
+					</tbody>
+				</table>
+			</div>
+
+			<Pagination 
+				:total-pages="totalPages"
+				:current-page="currentPage"
+			/>
+			</card>
+			</div>
+		</template>
+	</ListWrapper>
+</template>
+
+<script setup lang="ts">
+import { toRef, computed, Ref } from 'vue'
+
+import { useStorage } from '@vueuse/core'
+
+import ListWrapper from './ListWrapper.vue'
+import Done from '@/components/misc/Done.vue'
+import User from '@/components/misc/user.vue'
+import PriorityLabel from '@/components/tasks/partials/priorityLabel.vue'
+import Labels from '@/components/tasks/partials/labels.vue'
+import DateTableCell from '@/components/tasks/partials/date-table-cell.vue'
+import Fancycheckbox from '@/components/input/fancycheckbox.vue'
+import Sort from '@/components/tasks/partials/sort.vue'
+import FilterPopup from '@/components/list/partials/filter-popup.vue'
+import Pagination from '@/components/misc/pagination.vue'
+import Popup from '@/components/misc/popup.vue'
+
+import { useTaskList } from '@/composables/taskList'
+import TaskModel from '@/models/task'
+
+const ACTIVE_COLUMNS_DEFAULT = {
+	id: true,
+	done: true,
+	title: true,
+	priority: false,
+	labels: true,
+	assignees: true,
+	dueDate: true,
+	startDate: false,
+	endDate: false,
+	percentDone: false,
+	created: false,
+	updated: false,
+	createdBy: false,
+}
+
+const props = defineProps({
+	listId: {
+		type: Number,
+		required: true,
+	},
+})
+
+type Order = 'asc' | 'desc' | 'none'
+
+interface SortBy {
+	id : Order
+	done? : Order 
+	title? : Order 
+	priority? : Order 
+	due_date? : Order 
+	start_date? : Order 
+	end_date? : Order 
+	percent_done? : Order 
+	created? : Order 
+	updated? : Order 
+}
+
+const SORT_BY_DEFAULT : SortBy = {
+	id: 'desc',
+}
+
+const activeColumns = useStorage('tableViewColumns', { ...ACTIVE_COLUMNS_DEFAULT })
+const sortBy = useStorage<SortBy>('tableViewSortBy', { ...SORT_BY_DEFAULT })
+
+const taskList = useTaskList(toRef(props, 'listId'))
+
+const {
+	loading,
+	params,
+	totalPages,
+	currentPage,
+} = taskList
+const tasks : Ref<TaskModel[]> = taskList.tasks
+
+Object.assign(params.value, {
+	filter_by: [],
+	filter_value: [],
+	filter_comparator: [],
+})
+
+// FIXME: by doing this we can have multiple sort orders
+function sort(property : keyof SortBy) {
+	const order = sortBy.value[property]
+	if (typeof order === 'undefined' || order === 'none') {
+		sortBy.value[property] = 'desc'
+	} else if (order === 'desc') {
+		sortBy.value[property] = 'asc'
+	} else {
+		delete sortBy.value[property]
+	}
+}
+
+// TODO: re-enable opening task detail in modal
+// const router = useRouter()
+const taskDetailRoutes = computed(() => Object.fromEntries(
+	tasks.value.map(({id}) => ([
+		id,
+		{
+			name: 'task.detail',
+			params: { id },
+			// state: { backdropView: router.currentRoute.value.fullPath },
+		},
+	])),
+))
+</script>
+
+<style lang="scss" scoped>
+.table {
+	background: transparent;
+	overflow-x: auto;
+	overflow-y: hidden;
+
+	th {
+		white-space: nowrap;
+	}
+
+	.user {
+		margin: 0;
+	}
+}
+
+.columns-filter {
+	margin: 0;
+
+	&.is-open {
+		margin: 2rem 0 1rem;
+	}
+}
+</style>

src/views/list/ListWrapper.vue

@@ -0,0 +1,186 @@
+<template>
+	<div
+		:class="{ 'is-loading': listService.loading, 'is-archived': currentList.isArchived}"
+		class="loader-container"
+	>
+		<div class="switch-view-container">
+			<div class="switch-view">
+				<router-link
+					v-shortcut="'g l'"
+					:title="$t('keyboardShortcuts.list.switchToListView')"
+					:class="{'is-active': viewName === 'list'}"
+					:to="{ name: 'list.list',   params: { listId } }">
+					{{ $t('list.list.title') }}
+				</router-link>
+				<router-link
+					v-shortcut="'g g'"
+					:title="$t('keyboardShortcuts.list.switchToGanttView')"
+					:class="{'is-active': viewName === 'gantt'}"
+					:to="{ name: 'list.gantt',  params: { listId } }">
+					{{ $t('list.gantt.title') }}
+				</router-link>
+				<router-link
+					v-shortcut="'g t'"
+					:title="$t('keyboardShortcuts.list.switchToTableView')"
+					:class="{'is-active': viewName === 'table'}"
+					:to="{ name: 'list.table',  params: { listId } }">
+					{{ $t('list.table.title') }}
+				</router-link>
+				<router-link
+					v-shortcut="'g k'"
+					:title="$t('keyboardShortcuts.list.switchToKanbanView')"
+					:class="{'is-active': viewName === 'kanban'}"
+					:to="{ name: 'list.kanban', params: { listId } }">
+					{{ $t('list.kanban.title') }}
+				</router-link>
+			</div>
+			<slot name="header" />
+		</div>
+		<transition name="fade">
+			<Message variant="warning" v-if="currentList.isArchived" class="mb-4">
+				{{ $t('list.archived') }}
+			</Message>
+		</transition>
+
+		<slot />
+	</div>
+</template>
+
+<script setup lang="ts">
+import {ref, shallowRef, computed, watchEffect} from 'vue'
+import {useRoute} from 'vue-router'
+
+import Message from '@/components/misc/message.vue'
+
+import ListModel from '@/models/list'
+import ListService from '@/services/list'
+
+import {store} from '@/store'
+import {CURRENT_LIST} from '@/store/mutation-types'
+
+import {getListTitle} from '@/helpers/getListTitle'
+import {saveListToHistory} from '@/modules/listHistory'
+import { useTitle } from '@/composables/useTitle'
+
+const props = defineProps({
+	listId: {
+		type: Number,
+		required: true,
+	},
+	viewName: {
+		type: String,
+		required: true,
+	},
+})
+
+const route = useRoute()
+
+const listService = shallowRef(new ListService())
+const loadedListId = ref(0)
+
+const currentList = computed(() => {
+	return typeof store.state.currentList === 'undefined' ? {
+		id: 0,
+		title: '',
+		isArchived: false,
+		maxRight: null,
+	} : store.state.currentList
+})
+
+// call again the method if the listId changes
+watchEffect(() => loadList(props.listId))
+
+useTitle(() => currentList.value.id ? getListTitle(currentList.value) : '')
+
+async function loadList(listIdToLoad: number) {
+	const listData = {id: listIdToLoad}
+	saveListToHistory(listData)
+
+	// This invalidates the loaded list at the kanban board which lets it reload its content when
+	// switched to it. This ensures updates done to tasks in the gantt or list views are consistently
+	// shown in all views while preventing reloads when closing a task popup.
+	// We don't do this for the table view because that does not change tasks.
+	// FIXME: remove this
+	if (
+		props.viewName === 'list.list' ||
+		props.viewName === 'list.gantt'
+	) {
+		store.commit('kanban/setListId', 0)
+	}
+
+	// Don't load the list if we either already loaded it or aren't dealing with a list at all currently and
+	// the currently loaded list has the right set.
+	if (
+		(
+			listIdToLoad === loadedListId.value ||
+			typeof listIdToLoad === 'undefined' ||
+			listIdToLoad === currentList.value.id
+		)
+		&& typeof currentList.value !== 'undefined' && currentList.value.maxRight !== null
+	) {
+		return
+	}
+
+	console.debug(`Loading list, props.viewName = ${props.viewName}, $route.params =`, route.params, `, loadedListId = ${loadedListId.value}, currentList = `, currentList.value)
+
+	// We create an extra list object instead of creating it in list.value because that would trigger a ui update which would result in bad ux.
+	const list = new ListModel(listData)
+	try {
+		const loadedList = await listService.value.get(list)
+		await store.dispatch(CURRENT_LIST, loadedList)
+	} finally {
+		loadedListId.value = props.listId
+	}
+}
+</script>
+
+<style lang="scss" scoped>
+.switch-view-container {
+  @media screen and (max-width: $tablet) {
+    display: flex;
+    justify-content: center;
+  }
+}
+
+.switch-view {
+  background: var(--white);
+  display: inline-flex;
+  border-radius: $radius;
+  font-size: .75rem;
+  box-shadow: var(--shadow-sm);
+  height: $switch-view-height;
+  margin-bottom: 1rem;
+  padding: .5rem;
+
+  a {
+    padding: .25rem .5rem;
+    display: block;
+    border-radius: $radius;
+
+    transition: all 100ms;
+
+    &:not(:last-child) {
+      margin-right: .5rem;
+    }
+
+    &.is-active,
+    &:hover {
+      color: var(--switch-view-color);
+    }
+
+    &.is-active {
+      background: var(--primary);
+      font-weight: bold;
+      box-shadow: var(--shadow-xs);
+    }
+
+    &:hover {
+      background: var(--primary);
+    }
+  }
+}
+
+.is-archived .notification.is-warning {
+  margin-bottom: 1rem;
+}
+</style>

src/views/list/NewList.vue

@@ -61,7 +61,7 @@ export default {
 			}
 			this.showError = false
 
-			this.list.namespaceId = parseInt(this.$route.params.id)
+			this.list.namespaceId = parseInt(this.$route.params.namespaceId)
 			const list = await this.$store.dispatch('lists/createList', this.list)
 			this.$message.success({message: this.$t('list.create.createdSuccess') })
 			this.$router.push({

src/views/list/ShowList.vue

@@ -1,211 +0,0 @@
-<template>
-	<div
-		:class="{ 'is-loading': listService.loading, 'is-archived': currentList.isArchived}"
-		class="loader-container"
-	>
-		<div class="switch-view-container">
-			<div class="switch-view">
-				<router-link
-					v-shortcut="'g l'"
-					:title="$t('keyboardShortcuts.list.switchToListView')"
-					:class="{'is-active': $route.name.includes('list.list')}"
-					:to="{ name: 'list.list',   params: { listId: listId } }">
-					{{ $t('list.list.title') }}
-				</router-link>
-				<router-link
-					v-shortcut="'g g'"
-					:title="$t('keyboardShortcuts.list.switchToGanttView')"
-					:class="{'is-active': $route.name.includes('list.gantt')}"
-					:to="{ name: 'list.gantt',  params: { listId: listId } }">
-					{{ $t('list.gantt.title') }}
-				</router-link>
-				<router-link
-					v-shortcut="'g t'"
-					:title="$t('keyboardShortcuts.list.switchToTableView')"
-					:class="{'is-active': $route.name.includes('list.table')}"
-					:to="{ name: 'list.table',  params: { listId: listId } }">
-					{{ $t('list.table.title') }}
-				</router-link>
-				<router-link
-					v-shortcut="'g k'"
-					:title="$t('keyboardShortcuts.list.switchToKanbanView')"
-					:class="{'is-active': $route.name.includes('list.kanban')}"
-					:to="{ name: 'list.kanban', params: { listId: listId } }">
-					{{ $t('list.kanban.title') }}
-				</router-link>
-			</div>
-		</div>
-		<transition name="fade">
-			<message variant="warning" v-if="currentList.isArchived" class="mb-4">
-				{{ $t('list.archived') }}
-			</message>
-		</transition>
-
-		<router-view/>
-	</div>
-</template>
-
-<script>
-import Message from '@/components/misc/message'
-import ListModel from '../../models/list'
-import ListService from '../../services/list'
-import {CURRENT_LIST} from '../../store/mutation-types'
-import {getListView} from '../../helpers/saveListView'
-import {saveListToHistory} from '../../modules/listHistory'
-
-export default {
-	components: {Message},
-	data() {
-		return {
-			listService: new ListService(),
-			listLoaded: 0,
-		}
-	},
-	watch: {
-		// call again the method if the route changes
-		'$route.path': {
-			handler: 'loadList',
-			immediate: true,
-		},
-	},
-	computed: {
-		// Computed property to let "listId" always have a value
-		listId() {
-			return typeof this.$route.params.listId === 'undefined' ? 0 : this.$route.params.listId
-		},
-		background() {
-			return this.$store.state.background
-		},
-		currentList() {
-			return typeof this.$store.state.currentList === 'undefined' ? {
-				id: 0,
-				title: '',
-				isArchived: false,
-			} : this.$store.state.currentList
-		},
-	},
-	methods: {
-		replaceListView() {
-			const savedListView = getListView(this.$route.params.listId)
-			this.$router.replace({name: savedListView, params: {id: this.$route.params.listId}})
-			console.debug('Replaced list view with', savedListView)
-		},
-
-		async loadList() {
-			if (this.$route.name.includes('.settings.')) {
-				return
-			}
-
-			const listData = {id: parseInt(this.$route.params.listId)}
-
-			saveListToHistory(listData)
-
-			this.setTitle(this.currentList.id ? this.getListTitle(this.currentList) : '')
-
-			// This invalidates the loaded list at the kanban board which lets it reload its content when
-			// switched to it. This ensures updates done to tasks in the gantt or list views are consistently
-			// shown in all views while preventing reloads when closing a task popup.
-			// We don't do this for the table view because that does not change tasks.
-			if (
-				this.$route.name === 'list.list' ||
-				this.$route.name === 'list.gantt'
-			) {
-				this.$store.commit('kanban/setListId', 0)
-			}
-
-			// When clicking again on a list in the menu, there would be no list view selected which means no list
-			// at all. Users will then have to click on the list view menu again which is quite confusing.
-			if (this.$route.name === 'list.index') {
-				return this.replaceListView()
-			}
-
-			// Don't load the list if we either already loaded it or aren't dealing with a list at all currently and
-			// the currently loaded list has the right set.
-			if (
-				(
-					this.$route.params.listId === this.listLoaded ||
-					typeof this.$route.params.listId === 'undefined' ||
-					this.$route.params.listId === this.currentList.id ||
-					parseInt(this.$route.params.listId) === this.currentList.id
-				)
-				&& typeof this.currentList !== 'undefined' && this.currentList.maxRight !== null
-			) {
-				return
-			}
-
-			// Redirect the user to list view by default
-			if (
-				this.$route.name !== 'list.list' &&
-				this.$route.name !== 'list.gantt' &&
-				this.$route.name !== 'list.table' &&
-				this.$route.name !== 'list.kanban'
-			) {
-				return this.replaceListView()
-			}
-
-			console.debug(`Loading list, $route.name = ${this.$route.name}, $route.params =`, this.$route.params, `, listLoaded = ${this.listLoaded}, currentList = `, this.currentList)
-
-			// We create an extra list object instead of creating it in this.list because that would trigger a ui update which would result in bad ux.
-			const list = new ListModel(listData)
-			try {
-				const loadedList = await this.listService.get(list)
-				await this.$store.dispatch(CURRENT_LIST, loadedList)
-				this.setTitle(this.getListTitle(loadedList))
-			} finally {
-				this.listLoaded = this.$route.params.listId
-			}
-		},
-	},
-}
-</script>
-
-<style lang="scss" scoped>
-.switch-view-container {
-  @media screen and (max-width: $tablet) {
-    display: flex;
-    justify-content: center;
-  }
-}
-
-.switch-view {
-  background: var(--white);
-  display: inline-flex;
-  border-radius: $radius;
-  font-size: .75rem;
-  box-shadow: var(--shadow-sm);
-  height: $switch-view-height;
-  margin-bottom: 1rem;
-  padding: .5rem;
-
-  a {
-    padding: .25rem .5rem;
-    display: block;
-    border-radius: $radius;
-
-    transition: all 100ms;
-
-    &:not(:last-child) {
-      margin-right: .5rem;
-    }
-
-    &.is-active,
-    &:hover {
-      color: var(--switch-view-color);
-    }
-
-    &.is-active {
-      background: var(--primary);
-      font-weight: bold;
-      box-shadow: var(--shadow-xs);
-    }
-
-    &:hover {
-      background: var(--primary);
-    }
-  }
-}
-
-.is-archived .notification.is-warning {
-  margin-bottom: 1rem;
-}
-</style>

src/views/list/settings/share.vue

@@ -3,24 +3,38 @@
 		:title="$t('list.share.header')"
 		primary-label=""
 	>
-		<component
+		<template v-if="list">
+			<userTeam
 				:id="list.id"
-			:is="manageUsersComponent"
 				:userIsAdmin="userIsAdmin"
 				shareType="user"
-			type="list"/>
+				type="list"
-		<component
+			/>
+			<userTeam
 				:id="list.id"
-			:is="manageTeamsComponent"
 				:userIsAdmin="userIsAdmin"
 				shareType="team"
-			type="list"/>
+				type="list"
+			/>
+		</template>
 
-		<link-sharing :list-id="$route.params.listId" v-if="linkSharingEnabled" class="mt-4"/>
+		<link-sharing :list-id="listId" v-if="linkSharingEnabled" class="mt-4"/>
 	</create-edit>
 </template>
 
-<script>
+<script lang="ts">
+export default {
+	name: 'list-setting-share',
+}
+</script>
+
+<script lang="ts" setup>
+import {ref, computed, watchEffect} from 'vue'
+import {useStore} from 'vuex'
+import {useRoute} from 'vue-router'
+import {useI18n} from 'vue-i18n'
+import {useTitle} from '@vueuse/core'
+
 import ListService from '@/services/list'
 import ListModel from '@/models/list'
 import {CURRENT_LIST} from '@/store/mutation-types'
@@ -29,43 +43,30 @@ import CreateEdit from '@/components/misc/create-edit.vue'
 import LinkSharing from '@/components/sharing/linkSharing.vue'
 import userTeam from '@/components/sharing/userTeam.vue'
 
-export default {
+const {t} = useI18n()
-	name: 'list-setting-share',
-	data() {
-		return {
-			list: ListModel,
-			listService: new ListService(),
-			manageUsersComponent: '',
-			manageTeamsComponent: '',
-		}
-	},
-	components: {
-		CreateEdit,
-		LinkSharing,
-		userTeam,
-	},
-	computed: {
-		linkSharingEnabled() {
-			return this.$store.state.config.linkSharingEnabled
-		},
-		userIsAdmin() {
-			return this.list.owner && this.list.owner.id === this.$store.state.auth.info.id
-		},
-	},
-	created() {
-		this.loadList()
-	},
-	methods: {
-		async loadList() {
-			const list = new ListModel({id: this.$route.params.listId})
 
-			this.list = await this.listService.get(list)
+const list = ref()
-			await this.$store.dispatch(CURRENT_LIST, this.list)
+const title = computed(() => list.value?.title
-			// This will trigger the dynamic loading of components once we actually have all the data to pass to them
+	? t('list.share.title', {list: list.value.title})
-			this.manageTeamsComponent = 'userTeam'
+	: '',
-			this.manageUsersComponent = 'userTeam'
+)
-			this.setTitle(this.$t('list.share.title', {list: this.list.title}))
+useTitle(title)
-		},
+
-	},
+const store = useStore()
+const linkSharingEnabled = computed(() => store.state.config.linkSharingEnabled)
+const userIsAdmin = computed(() => 'owner' in list.value && list.value.owner.id === store.state.auth.info.id)
+
+async function loadList(listId: number) {
+	const listService = new ListService()
+	const newList = await listService.get(new ListModel({id: listId}))
+	await store.dispatch(CURRENT_LIST, newList)
+	list.value = newList
 }
+
+const route = useRoute()
+const listId = computed(() => route.params.listId !== undefined
+	? parseInt(route.params.listId as string)
+	: undefined,
+)
+watchEffect(() => listId.value !== undefined && loadList(listId.value))
 </script>

src/views/list/views/Table.vue

@@ -1,331 +0,0 @@
-<template>
-	<div :class="{'is-loading': taskCollectionService.loading}" class="table-view loader-container">
-		<div class="filter-container">
-			<div class="items">
-				<popup>
-					<template #trigger="{toggle}">
-						<x-button
-							@click.prevent.stop="toggle()"
-							icon="th"
-							variant="secondary"
-						>
-							{{ $t('list.table.columns') }}
-						</x-button>
-					</template>
-					<template #content="{isOpen}">
-						<card class="columns-filter" :class="{'is-open': isOpen}">
-							<fancycheckbox @change="saveTaskColumns" v-model="activeColumns.id">#</fancycheckbox>
-							<fancycheckbox @change="saveTaskColumns" v-model="activeColumns.done">
-								{{ $t('task.attributes.done') }}
-							</fancycheckbox>
-							<fancycheckbox @change="saveTaskColumns" v-model="activeColumns.title">
-								{{ $t('task.attributes.title') }}
-							</fancycheckbox>
-							<fancycheckbox @change="saveTaskColumns" v-model="activeColumns.priority">
-								{{ $t('task.attributes.priority') }}
-							</fancycheckbox>
-							<fancycheckbox @change="saveTaskColumns" v-model="activeColumns.labels">
-								{{ $t('task.attributes.labels') }}
-							</fancycheckbox>
-							<fancycheckbox @change="saveTaskColumns" v-model="activeColumns.assignees">
-								{{ $t('task.attributes.assignees') }}
-							</fancycheckbox>
-							<fancycheckbox @change="saveTaskColumns" v-model="activeColumns.dueDate">
-								{{ $t('task.attributes.dueDate') }}
-							</fancycheckbox>
-							<fancycheckbox @change="saveTaskColumns" v-model="activeColumns.startDate">
-								{{ $t('task.attributes.startDate') }}
-							</fancycheckbox>
-							<fancycheckbox @change="saveTaskColumns" v-model="activeColumns.endDate">
-								{{ $t('task.attributes.endDate') }}
-							</fancycheckbox>
-							<fancycheckbox @change="saveTaskColumns" v-model="activeColumns.percentDone">
-								{{ $t('task.attributes.percentDone') }}
-							</fancycheckbox>
-							<fancycheckbox @change="saveTaskColumns" v-model="activeColumns.created">
-								{{ $t('task.attributes.created') }}
-							</fancycheckbox>
-							<fancycheckbox @change="saveTaskColumns" v-model="activeColumns.updated">
-								{{ $t('task.attributes.updated') }}
-							</fancycheckbox>
-							<fancycheckbox @change="saveTaskColumns" v-model="activeColumns.createdBy">
-								{{ $t('task.attributes.createdBy') }}
-							</fancycheckbox>
-						</card>
-					</template>
-				</popup>
-				<filter-popup
-					v-model="params"
-					@update:modelValue="loadTasks()"
-				/>
-			</div>
-		</div>
-
-		<card :padding="false" :has-content="false">
-			<div class="has-horizontal-overflow">
-				<table class="table has-actions is-hoverable is-fullwidth mb-0">
-					<thead>
-					<tr>
-						<th v-if="activeColumns.id">
-							#
-							<sort :order="sortBy.id" @click="sort('id')"/>
-						</th>
-						<th v-if="activeColumns.done">
-							{{ $t('task.attributes.done') }}
-							<sort :order="sortBy.done" @click="sort('done')"/>
-						</th>
-						<th v-if="activeColumns.title">
-							{{ $t('task.attributes.title') }}
-							<sort :order="sortBy.title" @click="sort('title')"/>
-						</th>
-						<th v-if="activeColumns.priority">
-							{{ $t('task.attributes.priority') }}
-							<sort :order="sortBy.priority" @click="sort('priority')"/>
-						</th>
-						<th v-if="activeColumns.labels">
-							{{ $t('task.attributes.labels') }}
-						</th>
-						<th v-if="activeColumns.assignees">
-							{{ $t('task.attributes.assignees') }}
-						</th>
-						<th v-if="activeColumns.dueDate">
-							{{ $t('task.attributes.dueDate') }}
-							<sort :order="sortBy.due_date" @click="sort('due_date')"/>
-						</th>
-						<th v-if="activeColumns.startDate">
-							{{ $t('task.attributes.startDate') }}
-							<sort :order="sortBy.start_date" @click="sort('start_date')"/>
-						</th>
-						<th v-if="activeColumns.endDate">
-							{{ $t('task.attributes.endDate') }}
-							<sort :order="sortBy.end_date" @click="sort('end_date')"/>
-						</th>
-						<th v-if="activeColumns.percentDone">
-							{{ $t('task.attributes.percentDone') }}
-							<sort :order="sortBy.percent_done" @click="sort('percent_done')"/>
-						</th>
-						<th v-if="activeColumns.created">
-							{{ $t('task.attributes.created') }}
-							<sort :order="sortBy.created" @click="sort('created')"/>
-						</th>
-						<th v-if="activeColumns.updated">
-							{{ $t('task.attributes.updated') }}
-							<sort :order="sortBy.updated" @click="sort('updated')"/>
-						</th>
-						<th v-if="activeColumns.createdBy">
-							{{ $t('task.attributes.createdBy') }}
-						</th>
-					</tr>
-					</thead>
-					<tbody>
-					<tr :key="t.id" v-for="t in tasks">
-						<td v-if="activeColumns.id">
-							<router-link :to="{name: 'task.detail', params: { id: t.id }}">
-								<template v-if="t.identifier === ''">
-									#{{ t.index }}
-								</template>
-								<template v-else>
-									{{ t.identifier }}
-								</template>
-							</router-link>
-						</td>
-						<td v-if="activeColumns.done">
-							<Done :is-done="t.done" variant="small" />
-						</td>
-						<td v-if="activeColumns.title">
-							<router-link :to="{name: 'task.detail', params: { id: t.id }}">{{ t.title }}</router-link>
-						</td>
-						<td v-if="activeColumns.priority">
-							<priority-label :priority="t.priority" :done="t.done" :show-all="true"/>
-						</td>
-						<td v-if="activeColumns.labels">
-							<labels :labels="t.labels"/>
-						</td>
-						<td v-if="activeColumns.assignees">
-							<user
-								:avatar-size="27"
-								:is-inline="true"
-								:key="t.id + 'assignee' + a.id + i"
-								:show-username="false"
-								:user="a"
-								v-for="(a, i) in t.assignees"
-							/>
-						</td>
-						<date-table-cell :date="t.dueDate" v-if="activeColumns.dueDate"/>
-						<date-table-cell :date="t.startDate" v-if="activeColumns.startDate"/>
-						<date-table-cell :date="t.endDate" v-if="activeColumns.endDate"/>
-						<td v-if="activeColumns.percentDone">{{ t.percentDone * 100 }}%</td>
-						<date-table-cell :date="t.created" v-if="activeColumns.created"/>
-						<date-table-cell :date="t.updated" v-if="activeColumns.updated"/>
-						<td v-if="activeColumns.createdBy">
-							<user
-								:avatar-size="27"
-								:show-username="false"
-								:user="t.createdBy"/>
-						</td>
-					</tr>
-					</tbody>
-				</table>
-			</div>
-
-			<Pagination 
-				:total-pages="taskCollectionService.totalPages"
-				:current-page="currentPage"
-			/>
-		</card>
-
-		<!-- This router view is used to show the task popup while keeping the table view itself -->
-		<router-view v-slot="{ Component }">
-			<transition name="modal">
-				<component :is="Component" />
-			</transition>
-		</router-view>
-
-	</div>
-</template>
-
-<script>
-import taskList from '@/components/tasks/mixins/taskList'
-import Done from '@/components/misc/Done.vue'
-import User from '@/components/misc/user'
-import PriorityLabel from '@/components/tasks/partials/priorityLabel'
-import Labels from '@/components/tasks/partials/labels'
-import DateTableCell from '@/components/tasks/partials/date-table-cell'
-import Fancycheckbox from '@/components/input/fancycheckbox'
-import Sort from '@/components/tasks/partials/sort'
-import {saveListView} from '@/helpers/saveListView'
-import FilterPopup from '@/components/list/partials/filter-popup.vue'
-import Pagination from '@/components/misc/pagination.vue'
-import Popup from '@/components/misc/popup'
-
-export default {
-	name: 'Table',
-	components: {
-		Popup,
-		Done,
-		FilterPopup,
-		Sort,
-		Fancycheckbox,
-		DateTableCell,
-		Labels,
-		PriorityLabel,
-		User,
-		Pagination,
-	},
-	mixins: [
-		taskList,
-	],
-	data() {
-		return {
-			activeColumns: {
-				id: true,
-				done: true,
-				title: true,
-				priority: false,
-				labels: true,
-				assignees: true,
-				dueDate: true,
-				startDate: false,
-				endDate: false,
-				percentDone: false,
-				created: false,
-				updated: false,
-				createdBy: false,
-			},
-			sortBy: {
-				id: 'desc',
-			},
-		}
-	},
-	created() {
-		const savedShowColumns = localStorage.getItem('tableViewColumns')
-		if (savedShowColumns !== null) {
-			this.activeColumns = JSON.parse(savedShowColumns)
-		}
-		const savedSortBy = localStorage.getItem('tableViewSortBy')
-		if (savedSortBy !== null) {
-			this.sortBy = JSON.parse(savedSortBy)
-		}
-
-		this.params.filter_by = []
-		this.params.filter_value = []
-		this.params.filter_comparator = []
-
-		this.initTasks(1)
-
-		// Save the current list view to local storage
-		// We use local storage and not vuex here to make it persistent across reloads.
-		saveListView(this.$route.params.listId, this.$route.name)
-	},
-	methods: {
-		initTasks(page, search = '') {
-			// This makes sure an id sort order is always sorted last.
-			// When tasks would be sorted first by id and then by whatever else was specified, the id sort takes
-			// precedence over everything else, making any other sort columns pretty useless.
-			const sortKeys = Object.keys(this.sortBy)
-			let hasIdFilter = false
-			for (const s of sortKeys) {
-				if (s === 'id') {
-					sortKeys.splice(s, 1)
-					hasIdFilter = true
-					break
-				}
-			}
-			if (hasIdFilter) {
-				sortKeys.push('id')
-			}
-			
-			const params = this.params
-			params.sort_by = []
-			params.order_by = []
-			sortKeys.map(s => {
-				params.sort_by.push(s)
-				params.order_by.push(this.sortBy[s])
-			})
-			this.loadTasks(page, search, params)
-		},
-		sort(property) {
-			const order = this.sortBy[property]
-			if (typeof order === 'undefined' || order === 'none') {
-				this.sortBy[property] = 'desc'
-			} else if (order === 'desc') {
-				this.sortBy[property] = 'asc'
-			} else {
-				delete this.sortBy[property]
-			}
-			this.initTasks(this.currentPage, this.searchTerm)
-			// Save the order to be able to retrieve them later
-			localStorage.setItem('tableViewSortBy', JSON.stringify(this.sortBy))
-		},
-		saveTaskColumns() {
-			localStorage.setItem('tableViewColumns', JSON.stringify(this.activeColumns))
-		},
-	},
-}
-</script>
-
-<style lang="scss" scoped>
-.table-view {
-	.table {
-		background: transparent;
-		overflow-x: auto;
-		overflow-y: hidden;
-
-		th {
-			white-space: nowrap;
-		}
-
-		.user {
-			margin: 0;
-		}
-	}
-}
-
-.columns-filter {
-	margin: 0;
-
-	&.is-open {
-		margin: 2rem 0 1rem;
-	}
-}
-</style>

src/views/namespaces/ListNamespaces.vue

@@ -24,7 +24,7 @@
 
 		<section :key="`n${n.id}`" class="namespace" v-for="n in namespaces">
 			<x-button
-				:to="{name: 'list.create', params: {id:  n.id}}"
+				:to="{name: 'list.create', params: {namespaceId:  n.id}}"
 				class="is-pulled-right"
 				variant="secondary"
 				v-if="n.id > 0 && n.lists.length > 0"
@@ -51,7 +51,7 @@
 
 			<p class="has-text-centered has-text-grey mt-4 is-italic" v-if="n.lists.length === 0">
 				{{ $t('namespace.noLists') }}
-				<router-link :to="{name: 'list.create', params: {id:  n.id}}">
+				<router-link :to="{name: 'list.create', params: {namespaceId:  n.id}}">
 					{{ $t('namespace.createList') }}
 				</router-link>
 			</p>

src/views/namespaces/settings/share.vue

@@ -3,69 +3,67 @@
 		:title="title"
 		primary-label=""
 	>
-		<component
+		<template v-if="namespace">
+			<manageSharing
 				:id="namespace.id"
-			:is="manageUsersComponent"
 				:userIsAdmin="userIsAdmin"
 				shareType="user"
-			type="namespace"/>
+				type="namespace"
-		<component
+			/>
+			<manageSharing
 				:id="namespace.id"
-			:is="manageTeamsComponent"
 				:userIsAdmin="userIsAdmin"
 				shareType="team"
-			type="namespace"/>
+				type="namespace"
+			/>
+		</template>
 	</create-edit>
 </template>
 
-<script>
+<script lang="ts">
-import manageSharing from '@/components/sharing/userTeam.vue'
+export default {
-import CreateEdit from '@/components/misc/create-edit.vue'
+	name: 'namespace-setting-share',
+}
+</script>
+
+<script lang="ts" setup>
+import {ref, computed, watchEffect} from 'vue'
+import {useStore} from 'vuex'
+import {useRoute} from 'vue-router'
+import {useI18n} from 'vue-i18n'
+import {useTitle} from '@vueuse/core'
 
 import NamespaceService from '@/services/namespace'
 import NamespaceModel from '@/models/namespace'
 
-export default {
+import CreateEdit from '@/components/misc/create-edit.vue'
-	name: 'namespace-setting-share',
+import manageSharing from '@/components/sharing/userTeam.vue'
-	data() {
+
-		return {
+const {t} = useI18n()
-			namespaceService: new NamespaceService(),
+
-			namespace: new NamespaceModel(),
+const namespace = ref()
-			manageUsersComponent: '',
+
-			manageTeamsComponent: '',
+const title = computed(() => namespace.value?.title
-			title: '',
+	? t('namespace.share.title', { namespace: namespace.value.title })
-		}
+	: '',
-	},
+)
-	components: {
+useTitle(title)
-		CreateEdit,
+
-		manageSharing,
+const store = useStore()
-	},
+const userIsAdmin = computed(() => 'owner' in namespace.value && namespace.value.owner.id === store.state.auth.info.id)
-	beforeMount() {
+
-		this.namespace.id = this.$route.params.id
+async function loadNamespace(namespaceId: number) {
-	},
+	if (!namespaceId) return
-	watch: {
+	const namespaceService = new NamespaceService()
-		// call again the method if the route changes
+	namespace.value = await namespaceService.get(new NamespaceModel({id: namespaceId}))
-		'$route': {
+
-			handler: 'loadNamespace',
+	// TODO: set namespace in store
-			deep: true,
-			immediate: true,
-		},
-	},
-	computed: {
-		userIsAdmin() {
-			return this.namespace.owner && this.namespace.owner.id === this.$store.state.auth.info.id
-		},
-	},
-	methods: {
-		async loadNamespace() {
-			const namespace = new NamespaceModel({id: this.$route.params.id})
-			this.namespace = await this.namespaceService.get(namespace)
-			// This will trigger the dynamic loading of components once we actually have all the data to pass to them
-			this.manageTeamsComponent = 'manageSharing'
-			this.manageUsersComponent = 'manageSharing'
-			this.title = this.$t('namespace.share.title', { namespace: this.namespace.title })
-			this.setTitle(this.title)
-		},
-	},
 }
+
+const route = useRoute()
+const namespaceId = computed(() => route.params.namespaceId !== undefined
+	? parseInt(route.params.namespaceId as string)
+	: undefined,
+)
+watchEffect(() => namespaceId.value !== undefined && loadNamespace(namespaceId.value))
 </script>

src/views/tasks/ShowTasks.vue

@@ -231,23 +231,25 @@ export default {
 		},
 
 		setDatesToNextWeek() {
-			this.cStartDate = new Date()
+			const now = new Date()
-			this.cEndDate = new Date((new Date()).getTime() + 7 * 24 * 60 * 60 * 1000)
+			this.cStartDate = now
+			this.cEndDate = new Date(now.getTime() + 7 * 24 * 60 * 60 * 1000)
 			this.showOverdue = false
 			this.setDate()
 		},
 
 		setDatesToNextMonth() {
-			this.cStartDate = new Date()
+			const now = new Date()
-			this.cEndDate = new Date((new Date()).setMonth((new Date()).getMonth() + 1))
+			this.cStartDate = now
+			this.cEndDate = new Date((new Date()).setMonth(now.getMonth() + 1))
 			this.showOverdue = false
 			this.setDate()
 		},
 
 		showTodaysTasks() {
-			const d = new Date()
+			const now = new Date()
-			this.cStartDate = new Date()
+			this.cStartDate = now
-			this.cEndDate = new Date(d.setDate(d.getDate() + 1))
+			this.cEndDate = new Date((new Date()).setDate(now.getDate() + 1))
 			this.showOverdue = true
 			this.setDate()
 		},

src/views/tasks/TaskDetailView.vue

@@ -263,6 +263,7 @@
 							{{ task.done ? $t('task.detail.undone') : $t('task.detail.done') }}
 						</x-button>
 						<task-subscription
+							v-if="task.subscription"
 							entity="task"
 							:entity-id="task.id"
 							:subscription="task.subscription"
@@ -459,8 +460,10 @@ import {CURRENT_LIST} from '@/store/mutation-types'
 import {uploadFile} from '@/helpers/attachments'
 import ChecklistSummary from '../../components/tasks/partials/checklist-summary'
 
+
 export default {
 	name: 'TaskDetailView',
+	compatConfig: { ATTR_FALSE_VALUE: false },
 	components: {
 		ChecklistSummary,
 		TaskSubscription,
@@ -479,6 +482,14 @@ export default {
 		description,
 		heading,
 	},
+
+	props: {
+		taskId: {
+			type: Number,
+			required: true,
+		},
+	},
+
 	data() {
 		return {
 			taskService: new TaskService(),
@@ -529,10 +540,6 @@ export default {
 		},
 	},
 	computed: {
-		taskId() {
-			const {id} = this.$route.params
-			return id === undefined ? id : Number(id)
-		},
 		currentList() {
 			return this.$store.state[CURRENT_LIST]
 		},
@@ -948,4 +955,6 @@ $flash-background-duration: 750ms;
 		}
 	}
 }
+
+@include modal-transition();
 </style>

src/views/tasks/TaskDetailViewModal.vue

@@ -1,71 +0,0 @@
-<template>
-	<modal
-		@close="close()"
-		variant="scrolling"
-		class="task-detail-view-modal"
-	>
-				<a @click="close()" class="close">
-					<icon icon="times"/>
-				</a>
-				<task-detail-view/>
-	</modal>
-</template>
-
-<script>
-import TaskDetailView from './TaskDetailView'
-
-export default {
-	name: 'TaskDetailViewModal',
-	components: {
-		TaskDetailView,
-	},
-	data() {
-		return {
-			lastRoute: null,
-		}
-	},
-	beforeRouteEnter(to, from, next) {
-		next(vm => {
-			vm.lastRoute = from
-		})
-	},
-	beforeRouteLeave(to, from, next) {
-		if (from.name === 'task.kanban.detail' && to.name === 'task.detail') {
-			this.$router.replace({name: 'task.kanban.detail', params: to.params})
-			return
-		}
-
-		next()
-	},
-	methods: {
-		close() {
-			if (this.lastRoute === null) {
-				this.$router.back()
-			} else {
-				this.$router.push(this.lastRoute)
-			}
-		},
-	},
-}
-</script>
-
-<style lang="scss" scoped>
-.close {
-	position: fixed;
-	top: 5px;
-	right: 26px;
-	color: var(--white);
-	font-size: 2rem;
-
-	@media screen and (max-width: $desktop) {
-		color: var(--dark);
-	}
-}
-</style>
-
-<style lang="scss">
-// Close icon SVG uses currentColor, change the color to keep it visible
-.dark .task-detail-view-modal .close {
-	color: var(--grey-900);
-}
-</style>

src/views/teams/EditTeam.vue

@@ -308,4 +308,6 @@ export default {
     padding: 0;
   }
 }
+
+@include modal-transition();
 </style>