Merge branch 'main' into feature/blur-hash

# Conflicts:
#	package.json
#	src/components/home/contentAuth.vue
#	src/store/index.js
#	src/views/list/ShowList.vue

.drone.yml

@@ -116,36 +116,15 @@ steps:
       YARN_CACHE_FOLDER: .cache/yarn/
       CYPRESS_CACHE_FOLDER: .cache/cypress/
       CYPRESS_DEFAULT_COMMAND_TIMEOUT: 60000
+      CYPRESS_RECORD_KEY:
+        from_secret: cypress_project_key
     commands:
       - sed -i 's/localhost/api/g' dist/index.html
-      - yarn serve:dist & npx wait-on http://localhost:5000
-      - yarn test:frontend --browser chrome
+      - yarn serve:dist & npx wait-on http://localhost:4173
+      - yarn test:frontend --browser chrome --record
     depends_on:
-      - dependencies
       - build-prod
 
-  - name: upload-test-results
-    image: plugins/s3
-    pull: true
-    settings:
-      bucket: drone-test-results
-      access_key:
-        from_secret: test_results_aws_access_key_id
-      secret_key:
-        from_secret: test_results_aws_secret_access_key
-      endpoint: https://s3.fr-par.scw.cloud
-      region: fr-par
-      path_style: true
-      source: cypress/screenshots/**/**/*
-      strip_prefix: cypress/screenshots/
-      target: /${DRONE_REPO}/${DRONE_PULL_REQUEST}_${DRONE_BRANCH}/${DRONE_BUILD_NUMBER}/
-    depends_on:
-      - test-frontend
-    when:
-      status:
-        - failure
-        - success
-
   - name: deploy-preview
     image: node:16
     pull: true
@@ -157,6 +136,9 @@ steps:
       GITEA_TOKEN:
         from_secret: gitea_token
     commands:
+      - cp -r dist dist-preview
+      # Override the default api url used for preview
+      - sed -i 's|localhost:3456|try.vikunja.io|g' dist-preview/index.html
       - shasum -a 384 -c ./scripts/deploy-preview-netlify.js.sha384
       - node ./scripts/deploy-preview-netlify.js
     depends_on:
@@ -665,6 +647,6 @@ steps:
         from_secret: crowdin_key
 ---
 kind: signature
-hmac: 188ee90100c5fc5922a445e531e7a47453121edddb2a64a182eb23ed2bf602de
+hmac: 997e1badebe484ac29557c4af356e63db4d3d57f3d32e92d482f117f8cec64da
 
 ...

cypress.json

@@ -1,5 +1,5 @@
 {
-  "baseUrl": "http://localhost:5000",
+  "baseUrl": "http://localhost:4173",
   "env": {
     "API_URL": "http://localhost:3456/api/v1",
     "TEST_SECRET": "averyLongSecretToSe33dtheDB"
@@ -7,5 +7,6 @@
   "video": false,
   "retries": {
     "runMode": 2
-  }
+  },
+  "projectId": "181c7x"
 }

cypress/factories/bucket.js

@@ -1,4 +1,4 @@
-import faker from 'faker'
+import faker from '@faker-js/faker'
 import {Factory} from '../support/factory'
 import {formatISO} from 'date-fns'
 

cypress/factories/labels.js

@@ -1,4 +1,4 @@
-import faker from 'faker'
+import faker from '@faker-js/faker'
 
 import {Factory} from '../support/factory'
 import {formatISO} from 'date-fns'

cypress/factories/link_sharing.js

@@ -1,6 +1,6 @@
 import {Factory} from '../support/factory'
 import {formatISO} from "date-fns"
-import faker from 'faker'
+import faker from '@faker-js/faker'
 
 export class LinkShareFactory extends Factory {
 	static table = 'link_shares'

cypress/factories/list.js

@@ -1,6 +1,6 @@
 import {Factory} from '../support/factory'
 import {formatISO} from "date-fns"
-import faker from 'faker'
+import faker from '@faker-js/faker'
 
 export class ListFactory extends Factory {
 	static table = 'lists'

cypress/factories/namespace.js

@@ -1,4 +1,4 @@
-import faker from 'faker'
+import faker from '@faker-js/faker'
 import {Factory} from '../support/factory'
 import {formatISO} from 'date-fns'
 

cypress/factories/task.js

@@ -1,4 +1,4 @@
-import faker from 'faker'
+import faker from '@faker-js/faker'
 import {Factory} from '../support/factory'
 import {formatISO} from 'date-fns'
 

cypress/factories/task_comment.js

@@ -1,4 +1,4 @@
-import faker from 'faker'
+import faker from '@faker-js/faker'
 
 import {Factory} from '../support/factory'
 import {formatISO} from "date-fns"

cypress/factories/team.js

@@ -1,4 +1,4 @@
-import faker from 'faker'
+import faker from '@faker-js/faker'
 import {Factory} from '../support/factory'
 import {formatISO} from 'date-fns'
 

cypress/factories/user.js

@@ -1,4 +1,4 @@
-import faker from 'faker'
+import faker from '@faker-js/faker'
 
 import {Factory} from '../support/factory'
 import {formatISO} from "date-fns"

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')
+		
+		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')
+			.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 {UserListFactory} from '../../factories/users_list'
-import {UserFactory} from '../../factories/user'
-import {NamespaceFactory} from '../../factories/namespace'
-import {BucketFactory} from '../../factories/bucket'
+import {prepareLists} from './prepareLists'
 
 import '../../support/authenticateUser'
 
 describe('Lists', () => {
 	let lists
-
-	beforeEach(() => {
-		UserFactory.create(1)
-		NamespaceFactory.create(1)
-		lists = ListFactory.create(1, {
-			title: 'First List'
-		})
-		TaskFactory.truncate()
-	})
+	prepareLists((newLists) => (lists = newLists))
 
 	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,
 		})
@@ -86,7 +72,7 @@ describe('Lists', () => {
 			.should('contain', newListName)
 			.should('not.contain', lists[0].title)
 		cy.visit('/')
-		cy.get('.card-content .tasks')
+		cy.get('.card-content')
 			.should('contain', newListName)
 			.should('not.contain', lists[0].title)
 	})
@@ -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')
 		})
@@ -209,7 +210,7 @@ describe('Task', () => {
 			cy.visit(`/tasks/${tasks[0].id}`)
 
 			cy.get('.task-view .action-buttons .button')
-				.contains('Move task')
+				.contains('Move')
 				.click()
 			cy.get('.task-view .content.details .field .multiselect.control .input-wrapper input')
 				.type(`${lists[1].title}{enter}`)
@@ -236,7 +237,7 @@ describe('Task', () => {
 
 			cy.get('.task-view .action-buttons .button')
 				.should('be.visible')
-				.contains('Delete task')
+				.contains('Delete')
 				.click()
 			cy.get('.modal-mask .modal-container .modal-content .header')
 				.should('contain', 'Delete this task')
@@ -316,7 +317,7 @@ describe('Task', () => {
 			cy.visit(`/tasks/${tasks[0].id}`)
 
 			cy.get('.task-view .action-buttons .button')
-				.contains('Add labels')
+				.contains('Add Labels')
 				.should('be.visible')
 				.click()
 			cy.get('.task-view .details.labels-list .multiselect input')
@@ -343,7 +344,7 @@ describe('Task', () => {
 			cy.visit(`/tasks/${tasks[0].id}`)
 
 			cy.get('.task-view .action-buttons .button')
-				.contains('Add labels')
+				.contains('Add Labels')
 				.click()
 			cy.get('.task-view .details.labels-list .multiselect input')
 				.type(labels[0].title)
@@ -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')

cypress/integration/user/logout.spec.js

@@ -6,7 +6,7 @@ describe('Log out', () => {
 
 		cy.get('.navbar .user .username')
 			.click()
-		cy.get('.navbar .user .dropdown-menu a.dropdown-item')
+		cy.get('.navbar .user .dropdown-menu .dropdown-item')
 			.contains('Logout')
 			.click()
 

cypress/integration/user/registration.spec.js

@@ -25,7 +25,6 @@ context('Registration', () => {
 		cy.get('#username').type(fixture.username)
 		cy.get('#email').type(fixture.email)
 		cy.get('#password').type(fixture.password)
-		cy.get('#passwordValidation').type(fixture.password)
 		cy.get('#register-submit').click()
 		cy.url().should('include', '/')
 		cy.clock(1625656161057) // 13:00
@@ -43,7 +42,6 @@ context('Registration', () => {
 		cy.get('#username').type(fixture.username)
 		cy.get('#email').type(fixture.email)
 		cy.get('#password').type(fixture.password)
-		cy.get('#passwordValidation').type(fixture.password)
 		cy.get('#register-submit').click()
 		cy.get('div.message.danger').contains('A user with this username already exists.')
 	})

cypress/integration/user/settings.spec.js

@@ -8,12 +8,14 @@ describe('User Settings', () => {
 	})
 
 	it('Changes the user avatar', () => {
+		cy.intercept(`${Cypress.env('API_URL')}/user/settings/avatar/upload`).as('uploadAvatar')
+		
 		cy.visit('/user/settings/avatar')
 
 		cy.get('input[name=avatarProvider][value=upload]')
 			.click()
-		cy.get('input[type=file]', { timeout: 1000 })
-			.attachFile('image.jpg')
+		cy.get('input[type=file]', {timeout: 1000})
+			.selectFile('cypress/fixtures/image.jpg', {force: true}) // The input is not visible, but on purpose
 		cy.get('.vue-handler-wrapper.vue-handler-wrapper--south .vue-simple-handler.vue-simple-handler--south')
 			.trigger('mousedown', {which: 1})
 			.trigger('mousemove', {clientY: 100})
@@ -22,7 +24,7 @@ describe('User Settings', () => {
 			.contains('Upload Avatar')
 			.click()
 
-		cy.wait(3000) // Wait for the request to finish
+		cy.wait('@uploadAvatar')
 		cy.get('.global-notification')
 			.should('contain', 'Success')
 	})

cypress/support/index.js

@@ -1,6 +1,5 @@
 
 import './commands'
-import 'cypress-file-upload'
 import '@4tw/cypress-drag-drop'
 
 // see https://github.com/cypress-io/cypress/issues/702#issuecomment-587127275

netlify.toml

@@ -1,6 +1,6 @@
 [build]
   command = "yarn build"
-  publish = "dist"
+  publish = "dist-preview"
 
 [[redirects]]
   from = "/*"

package.json

@@ -5,7 +5,7 @@
   "scripts": {
     "serve": "vite",
     "serve:dist-dev": "node scripts/serve-dist.js",
-    "serve:dist": "vite preview",
+    "serve:dist": "vite preview --port 4173",
     "build": "vite build && workbox copyLibraries dist/",
     "build:modern-only": "BUILD_MODERN_ONLY=true vite build && workbox copyLibraries dist/",
     "build:dev": "vite build -m development --outDir dist-dev/",
@@ -18,82 +18,80 @@
     "browserslist:update": "npx browserslist@latest --update-db"
   },
   "dependencies": {
-    "@github/hotkey": "1.6.1",
+    "@github/hotkey": "2.0.0",
     "@kyvg/vue3-notification": "2.3.4",
-    "@sentry/tracing": "6.16.1",
-    "@sentry/vue": "6.16.1",
+    "@sentry/tracing": "6.19.3",
+    "@sentry/vue": "6.19.3",
     "@types/is-touch-device": "1.0.0",
-    "@vue/compat": "3.2.27",
-    "@vueuse/core": "7.5.2",
-    "@vueuse/router": "7.5.3",
+    "@vue/compat": "3.2.31",
+    "@vueuse/core": "8.2.3",
+    "@vueuse/router": "8.2.3",
     "blurhash": "^1.1.4",
     "bulma-css-variables": "0.9.33",
     "camel-case": "4.1.2",
-    "codemirror": "5.65.0",
+    "codemirror": "5.65.2",
     "copy-to-clipboard": "3.3.1",
     "date-fns": "2.28.0",
-    "dompurify": "2.3.4",
+    "dompurify": "2.3.6",
     "easymde": "2.16.1",
-    "flatpickr": "4.6.9",
+    "flatpickr": "4.6.11",
     "flexsearch": "0.7.21",
-    "highlight.js": "11.4.0",
+    "highlight.js": "11.5.0",
     "is-touch-device": "1.0.1",
     "lodash.clonedeep": "4.5.0",
     "lodash.debounce": "4.0.8",
-    "marked": "4.0.10",
+    "marked": "4.0.12",
     "register-service-worker": "1.7.2",
     "snake-case": "3.0.4",
-    "ufo": "0.7.9",
+    "ufo": "0.8.3",
     "v-tooltip": "4.0.0-beta.17",
-    "vue": "3.2.27",
-    "vue-advanced-cropper": "2.7.1",
+    "vue": "3.2.31",
+    "vue-advanced-cropper": "2.8.1",
     "vue-drag-resize": "2.0.3",
     "vue-flatpickr-component": "9.0.5",
-    "vue-i18n": "9.2.0-beta.28",
-    "vue-router": "4.0.12",
+    "vue-i18n": "9.2.0-beta.30",
+    "vue-router": "4.0.14",
     "vuedraggable": "4.1.0",
     "vuex": "4.0.2",
-    "workbox-precaching": "6.4.2"
+    "workbox-precaching": "6.5.2"
   },
   "devDependencies": {
     "@4tw/cypress-drag-drop": "2.1.0",
-    "@fortawesome/fontawesome-svg-core": "1.2.36",
-    "@fortawesome/free-regular-svg-icons": "5.15.4",
-    "@fortawesome/free-solid-svg-icons": "5.15.4",
+    "@faker-js/faker": "6.1.1",
+    "@fortawesome/fontawesome-svg-core": "6.1.1",
+    "@fortawesome/free-regular-svg-icons": "6.1.1",
+    "@fortawesome/free-solid-svg-icons": "6.1.1",
     "@fortawesome/vue-fontawesome": "3.0.0-5",
-    "@types/flexsearch": "0.7.2",
-    "@typescript-eslint/eslint-plugin": "5.9.1",
-    "@typescript-eslint/parser": "5.9.1",
-    "@vitejs/plugin-legacy": "1.6.4",
-    "@vitejs/plugin-vue": "2.0.1",
+    "@types/flexsearch": "0.7.3",
+    "@typescript-eslint/eslint-plugin": "5.17.0",
+    "@typescript-eslint/parser": "5.17.0",
+    "@vitejs/plugin-legacy": "1.8.0",
+    "@vitejs/plugin-vue": "2.3.1",
     "@vue/eslint-config-typescript": "10.0.0",
-    "autoprefixer": "10.4.2",
-    "axios": "0.24.0",
-    "browserslist": "4.19.1",
-    "caniuse-lite": "1.0.30001299",
-    "cypress": "9.2.1",
-    "cypress-file-upload": "5.0.8",
-    "esbuild": "0.14.11",
-    "eslint": "8.7.0",
-    "eslint-plugin-vue": "8.3.0",
-    "express": "4.17.2",
-    "faker": "5.5.3",
-    "netlify-cli": "8.8.2",
-    "happy-dom": "2.25.2",
-    "postcss": "8.4.5",
-    "postcss-preset-env": "7.2.3",
-    "rollup": "2.64.0",
-    "rollup-plugin-visualizer": "5.5.4",
-    "sass": "1.48.0",
-    "slugify": "1.6.5",
-    "typescript": "4.5.4",
-    "vite": "2.7.12",
+    "autoprefixer": "10.4.4",
+    "axios": "0.26.1",
+    "browserslist": "4.20.2",
+    "caniuse-lite": "1.0.30001324",
+    "cypress": "9.5.3",
+    "esbuild": "0.14.30",
+    "eslint": "8.12.0",
+    "eslint-plugin-vue": "8.5.0",
+    "express": "4.17.3",
+    "happy-dom": "2.55.0",
+    "netlify-cli": "9.13.5",
+    "postcss": "8.4.12",
+    "postcss-preset-env": "7.4.3",
+    "rollup": "2.70.1",
+    "rollup-plugin-visualizer": "5.6.0",
+    "sass": "1.49.11",
+    "typescript": "4.6.3",
+    "vite": "2.9.1",
     "vite-plugin-pwa": "0.11.13",
-    "vite-svg-loader": "3.1.2",
-    "vitest": "0.1.17",
-    "vue-tsc": "0.30.4",
-    "wait-on": "6.0.0",
-    "workbox-cli": "6.4.2"
+    "vite-svg-loader": "3.2.0",
+    "vitest": "0.8.2",
+    "vue-tsc": "0.33.9",
+    "wait-on": "6.0.1",
+    "workbox-cli": "6.5.2"
   },
   "eslintConfig": {
     "root": true,
@@ -131,7 +129,7 @@
     "parser": "vue-eslint-parser",
     "parserOptions": {
       "parser": "@typescript-eslint/parser",
-      "ecmaVersion": 2021
+      "ecmaVersion": 2022
     },
     "ignorePatterns": [
       "*.test.*",
@@ -147,5 +145,5 @@
     }
   },
   "license": "AGPL-3.0-or-later",
-  "packageManager": "yarn@1.22.17"
+  "packageManager": "yarn@1.22.18"
 }

scripts/deploy-preview-netlify.js

@@ -1,20 +1,24 @@
-const slugify = require('slugify')
 const {exec} = require('child_process')
 const axios = require('axios')
 
 const BOT_USER_ID = 513
 const giteaToken = process.env.GITEA_TOKEN
 const siteId = process.env.NETLIFY_SITE_ID
-const branchSlug = slugify(process.env.DRONE_SOURCE_BRANCH)
+const branchSlug = String(process.env.DRONE_SOURCE_BRANCH)
+						.trim()
+						.normalize('NFKD')
+						.toLowerCase()
+						.replace(/[.\s/]/g, '-')
+						.replace(/[^A-Za-z\d-]/g, '')
 const prNumber = process.env.DRONE_PULL_REQUEST
 
 const prIssueCommentsUrl = `https://kolaente.dev/api/v1/repos/vikunja/frontend/issues/${prNumber}/comments`
-const alias = `${prNumber}-${branchSlug}`
+const alias = `${prNumber}-${branchSlug}`.substring(0,37)
 const fullPreviewUrl = `https://${alias}--vikunja-frontend-preview.netlify.app`
 
 const promiseExec = cmd => {
 	return new Promise((resolve, reject) => {
-		exec(cmd, (error, stdout, stderr) => {
+		exec(cmd, (error, stdout) => {
 			if (error) {
 				reject(error)
 				return

scripts/deploy-preview-netlify.js.sha384

@@ -1 +1 @@
-55ce0faaa2c1919341617ccfaeccbb6029ac12107964ff488985cff13dd952f1a991df3ab0d4b0705deb761e508e6434  ./scripts/deploy-preview-netlify.js
+bb46342a0a08105b340ba7976cff9d80ef89901120ec0639669caa70bb7d2dbc43e78b1f635a7654ab2456e8358c98a4  ./scripts/deploy-preview-netlify.js

scripts/serve-dist.js

@@ -3,7 +3,7 @@ const express = require('express')
 const app = express()
 
 const p = path.join(__dirname, '..', 'dist-dev')
-const port = 5000
+const port = 4173
 
 app.use(express.static(p))
 // Handle urls set by the frontend

src/App.vue

@@ -1,7 +1,7 @@
 <template>
 	<ready>
 		<template v-if="authUser">
-			<top-navigation/>
+			<TheNavigation/>
 			<content-auth/>
 		</template>
 		<content-link-share v-else-if="authLinkShare"/>
@@ -27,7 +27,7 @@ import {success} from '@/message'
 
 import Notification from '@/components/misc/notification.vue'
 import KeyboardShortcuts from './components/misc/keyboard-shortcuts/index.vue'
-import TopNavigation from './components/home/topNavigation.vue'
+import TheNavigation from '@/components/home/TheNavigation.vue'
 import ContentAuth from './components/home/contentAuth.vue'
 import ContentLinkShare from './components/home/contentLinkShare.vue'
 import NoAuthWrapper from '@/components/misc/no-auth-wrapper.vue'
@@ -42,7 +42,7 @@ import {useBodyClass} from '@/composables/useBodyClass'
 const store = useStore()
 const router = useRouter()
 
-useBodyClass('is-touch', isTouchDevice)
+useBodyClass('is-touch', isTouchDevice())
 const keyboardShortcutsActive = computed(() => store.state.keyboardShortcutsActive)
 
 const authUser = computed(() => store.getters['auth/authUser'])

src/components/base/BaseButton.vue

@@ -69,10 +69,10 @@ watchEffect(() => {
 	}
 
 	// if there is a href we assume the user wants an external link via a link element
-	// we also set the attribute rel to "noopener" but make it possible to overwrite this by the user.
+	// we also set a predefined value for the attribute rel, but make it possible to overwrite this by the user.
 	if ('href' in attrs) {
 		nodeName = 'a'
-		bindings = {rel: 'noopener'}
+		bindings = {rel: 'noreferrer noopener nofollow'}
 	}
 
 	componentNodeName.value = nodeName

src/components/date/dateRanges.ts

@@ -0,0 +1,21 @@
+export const DATE_RANGES = {
+	// Format: 
+	// Key is the title, as a translation string, the first entry of the value array 
+	// is the "from" date, the second one is the "to" date.
+	'today': ['now/d', 'now/d+1d'],
+
+	'lastWeek': ['now/w-1w', 'now/w-2w'],
+	'thisWeek': ['now/w', 'now/w+1w'],
+	'restOfThisWeek': ['now', 'now/w+1w'],
+	'nextWeek': ['now/w+1w', 'now/w+2w'],
+	'next7Days': ['now', 'now+7d'],
+
+	'lastMonth': ['now/M-1M', 'now/M-2M'],
+	'thisMonth': ['now/M', 'now/M+1M'],
+	'restOfThisMonth': ['now', 'now/M+1M'],
+	'nextMonth': ['now/M+1M', 'now/M+2M'],
+	'next30Days': ['now', 'now+30d'],
+	
+	'thisYear': ['now/y', 'now/y+1y'],
+	'restOfThisYear': ['now', 'now/y+1y'],
+}

src/components/date/datemathHelp.vue

@@ -0,0 +1,131 @@
+<template>
+	<card
+		class="has-no-shadow how-it-works-modal"
+		:title="$t('input.datemathHelp.title')">
+		<p>
+			{{ $t('input.datemathHelp.intro') }}
+		</p>
+		<p>
+			<i18n-t keypath="input.datemathHelp.expression">
+				<code>now</code>
+				<code>||</code>
+			</i18n-t>
+		</p>
+		<p>
+			<i18n-t keypath="input.datemathHelp.similar">
+				<BaseButton
+					href="https://grafana.com/docs/grafana/latest/dashboards/time-range-controls/"
+					target="_blank">
+					Grafana
+				</BaseButton>
+				<BaseButton
+					href="https://www.elastic.co/guide/en/elasticsearch/reference/7.3/common-options.html#date-math"
+					target="_blank">
+					Elasticsearch
+				</BaseButton>
+			</i18n-t>
+		</p>
+		<p>{{ $t('misc.forExample') }}</p>
+		<ul>
+			<li><code>+1d</code>{{ $t('input.datemathHelp.add1Day') }}</li>
+			<li><code>-1d</code>{{ $t('input.datemathHelp.minus1Day') }}</li>
+			<li><code>/d</code>{{ $t('input.datemathHelp.roundDay') }}</li>
+		</ul>
+		<p>{{ $t('input.datemathHelp.supportedUnits') }}</p>
+		<table class="table">
+			<tbody>
+			<tr>
+				<td><code>s</code></td>
+				<td>{{ $t('input.datemathHelp.units.seconds') }}</td>
+			</tr>
+			<tr>
+				<td><code>m</code></td>
+				<td>{{ $t('input.datemathHelp.units.minutes') }}</td>
+			</tr>
+			<tr>
+				<td><code>h</code></td>
+				<td>{{ $t('input.datemathHelp.units.hours') }}</td>
+			</tr>
+			<tr>
+				<td><code>H</code></td>
+				<td>{{ $t('input.datemathHelp.units.hours') }}</td>
+			</tr>
+			<tr>
+				<td><code>d</code></td>
+				<td>{{ $t('input.datemathHelp.units.days') }}</td>
+			</tr>
+			<tr>
+				<td><code>w</code></td>
+				<td>{{ $t('input.datemathHelp.units.weeks') }}</td>
+			</tr>
+			<tr>
+				<td><code>M</code></td>
+				<td>{{ $t('input.datemathHelp.units.months') }}</td>
+			</tr>
+			<tr>
+				<td><code>y</code></td>
+				<td>{{ $t('input.datemathHelp.units.years') }}</td>
+			</tr>
+			</tbody>
+		</table>
+
+		<p>{{ $t('input.datemathHelp.someExamples') }}</p>
+		<table class="table">
+			<tbody>
+			<tr>
+				<td><code>now</code></td>
+				<td>{{ $t('input.datemathHelp.examples.now') }}</td>
+			</tr>
+			<tr>
+				<td><code>now+24h</code></td>
+				<td>{{ $t('input.datemathHelp.examples.in24h') }}</td>
+			</tr>
+			<tr>
+				<td><code>now/d</code></td>
+				<td>{{ $t('input.datemathHelp.examples.today') }}</td>
+			</tr>
+			<tr>
+				<td><code>now/w</code></td>
+				<td>{{ $t('input.datemathHelp.examples.beginningOfThisWeek') }}</td>
+			</tr>
+			<tr>
+				<td><code>now/w+1w</code></td>
+				<td>{{ $t('input.datemathHelp.examples.endOfThisWeek') }}</td>
+			</tr>
+			<tr>
+				<td><code>now+30d</code></td>
+				<td>{{ $t('input.datemathHelp.examples.in30Days') }}</td>
+			</tr>
+			<tr>
+				<td><code>{{ exampleDate }}||+1M/d</code></td>
+				<td>
+					<i18n-t keypath="input.datemathHelp.examples.datePlusMonth">
+						<code>{{ exampleDate }}</code>
+					</i18n-t>
+				</td>
+			</tr>
+			</tbody>
+		</table>
+	</card>
+</template>
+
+<script lang="ts" setup>
+import {format} from 'date-fns'
+import BaseButton from '@/components/base/BaseButton.vue'
+
+const exampleDate = format(new Date(), 'yyyy-MM-dd')
+</script>
+
+<style scoped>
+.how-it-works-modal {
+	font-size: 1rem;
+}
+
+p {
+	display: inline-block !important;
+}
+
+.base-button {
+	display: inline;
+}
+</style>

src/components/date/datepickerWithRange.vue

@@ -0,0 +1,254 @@
+<template>
+	<div class="datepicker-with-range-container">
+		<popup>
+			<template #trigger="{toggle}">
+				<slot name="trigger" :toggle="toggle" :buttonText="buttonText"></slot>
+			</template>
+			<template #content="{isOpen}">
+				<div class="datepicker-with-range" :class="{'is-open': isOpen}">
+					<div class="selections">
+						<BaseButton @click="setDateRange(null)" :class="{'is-active': customRangeActive}">
+							{{ $t('misc.custom') }}
+						</BaseButton>
+						<BaseButton
+							v-for="(value, text) in DATE_RANGES"
+							:key="text"
+							@click="setDateRange(value)"
+							:class="{'is-active': from === value[0] && to === value[1]}">
+							{{ $t(`input.datepickerRange.ranges.${text}`) }}
+						</BaseButton>
+					</div>
+					<div class="flatpickr-container input-group">
+						<label class="label">
+							{{ $t('input.datepickerRange.from') }}
+							<div class="field has-addons">
+								<div class="control is-fullwidth">
+									<input class="input" type="text" v-model="from"/>
+								</div>
+								<div class="control">
+									<x-button icon="calendar" variant="secondary" data-toggle/>
+								</div>
+							</div>
+						</label>
+						<label class="label">
+							{{ $t('input.datepickerRange.to') }}
+							<div class="field has-addons">
+								<div class="control is-fullwidth">
+									<input class="input" type="text" v-model="to"/>
+								</div>
+								<div class="control">
+									<x-button icon="calendar" variant="secondary" data-toggle/>
+								</div>
+							</div>
+						</label>
+						<flat-pickr
+							:config="flatPickerConfig"
+							v-model="flatpickrRange"
+						/>
+
+						<p>
+							{{ $t('input.datemathHelp.canuse') }}
+							<BaseButton class="has-text-primary" @click="showHowItWorks = true">
+								{{ $t('input.datemathHelp.learnhow') }}
+							</BaseButton>
+						</p>
+
+						<modal
+							@close="() => showHowItWorks = false"
+							:enabled="showHowItWorks"
+							transition-name="fade"
+							:overflow="true"
+							variant="hint-modal"
+						>
+							<DatemathHelp/>
+						</modal>
+					</div>
+				</div>
+			</template>
+		</popup>
+	</div>
+</template>
+
+<script lang="ts" setup>
+import {computed, ref, watch} from 'vue'
+import {useStore} from 'vuex'
+import {useI18n} from 'vue-i18n'
+
+import flatPickr from 'vue-flatpickr-component'
+import 'flatpickr/dist/flatpickr.css'
+
+import Popup from '@/components/misc/popup.vue'
+import {DATE_RANGES} from '@/components/date/dateRanges'
+import BaseButton from '@/components/base/BaseButton.vue'
+import DatemathHelp from '@/components/date/datemathHelp.vue'
+
+const store = useStore()
+const {t} = useI18n()
+
+const emit = defineEmits(['dateChanged'])
+
+// FIXME: This seems to always contain the default value - that breaks the picker
+const weekStart = computed<number>(() => store.state.auth.settings.weekStart ?? 0)
+const flatPickerConfig = computed(() => ({
+	altFormat: t('date.altFormatLong'),
+	altInput: true,
+	dateFormat: 'Y-m-d H:i',
+	enableTime: false,
+	wrap: true,
+	mode: 'range',
+	locale: {
+		firstDayOf7Days: weekStart.value,
+	},
+}))
+
+const showHowItWorks = ref(false)
+
+const flatpickrRange = ref('')
+
+const from = ref('')
+const to = ref('')
+
+function emitChanged() {
+	emit('dateChanged', {
+		dateFrom: from.value === '' ? null : from.value,
+		dateTo: to.value === '' ? null : to.value,
+	})
+}
+
+watch(
+	() => flatpickrRange.value,
+	(newVal: string | null) => {
+		if (newVal === null) {
+			return
+		}
+
+		const [fromDate, toDate] = newVal.split(' to ')
+
+		if (typeof fromDate === 'undefined' || typeof toDate === 'undefined') {
+			return
+		}
+
+		from.value = fromDate
+		to.value = toDate
+
+		emitChanged()
+	},
+)
+watch(() => from.value, emitChanged)
+watch(() => to.value, emitChanged)
+
+function setDateRange(range: string[] | null) {
+	if (range === null) {
+		from.value = ''
+		to.value = ''
+
+		return
+	}
+
+	from.value = range[0]
+	to.value = range[1]
+}
+
+const customRangeActive = computed<boolean>(() => {
+	return !Object.values(DATE_RANGES).some(range => from.value === range[0] && to.value === range[1])
+})
+
+const buttonText = computed<string>(() => {
+	if (from.value !== '' && to.value !== '') {
+		return t('input.datepickerRange.fromto', {
+			from: from.value,
+			to: to.value,
+		})
+	}
+
+	return t('task.show.select')
+})
+</script>
+
+<style lang="scss" scoped>
+.datepicker-with-range-container {
+	position: relative;
+}
+
+:deep(.popup) {
+	z-index: 10;
+	margin-top: 1rem;
+	border-radius: $radius;
+	border: 1px solid var(--grey-200);
+	background-color: var(--white);
+	box-shadow: $shadow;
+
+	&.is-open {
+		width: 500px;
+		height: 320px;
+	}
+}
+
+.datepicker-with-range {
+	display: flex;
+	width: 100%;
+	height: 100%;
+	position: absolute;
+}
+
+:deep(.flatpickr-calendar) {
+	margin: 0 auto 8px;
+	box-shadow: none;
+}
+
+.flatpickr-container {
+	width: 70%;
+	border-left: 1px solid var(--grey-200);
+	padding: 1rem;
+	font-size: .9rem;
+
+	// Flatpickr has no option to use it without an input field so we're hiding it instead
+	:deep(input.form-control.input) {
+		height: 0;
+		padding: 0;
+		border: 0;
+	}
+
+	.field .control :deep(.button) {
+		border: 1px solid var(--input-border-color);
+		height: 2.25rem;
+
+		&:hover {
+			border: 1px solid var(--input-hover-border-color);
+		}
+	}
+
+	.label, .input, :deep(.button) {
+		font-size: .9rem;
+	}
+}
+
+.selections {
+	width: 30%;
+	display: flex;
+	flex-direction: column;
+	padding-top: .5rem;
+	overflow-y: scroll;
+
+	button {
+		display: block;
+		width: 100%;
+		text-align: left;
+		padding: .5rem 1rem;
+		transition: $transition;
+		font-size: .9rem;
+		color: var(--text);
+		background: transparent;
+		border: 0;
+		cursor: pointer;
+
+		&.is-active {
+			color: var(--primary);
+		}
+
+		&:hover, &.is-active {
+			background-color: var(--grey-100);
+		}
+	}
+}
+</style>

src/components/home/Logo.vue

@@ -1,9 +1,12 @@
 <script setup lang="ts">
 import { computed } from 'vue'
+import { useNow } from '@vueuse/core'
+
 import LogoFull from '@/assets/logo-full.svg?component'
 import LogoFullPride from '@/assets/logo-full-pride.svg?component'
 
-const Logo = computed(() => new Date().getMonth() === 5 ? LogoFullPride : LogoFull)
+const now = useNow()
+const Logo = computed(() => now.value.getMonth() === 5 ? LogoFullPride : LogoFull)
 </script>
 
 <template>

src/components/home/MenuButton.vue

@@ -1,8 +1,7 @@
 <template>
-	<button
-		type="button"
-		@click="$store.commit('toggleMenu')"
+	<BaseButton
 		class="menu-show-button"
+		@click="$store.commit('toggleMenu')"
 		@shortkey="() => $store.commit('toggleMenu')"
 		v-shortcut="'Control+e'"
 		:title="$t('keyboardShortcuts.toggleMenu')"
@@ -10,11 +9,14 @@
 	/>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import {computed} from 'vue'
-import {store} from '@/store'
+import {useStore} from 'vuex'
 
-const menuActive = computed(() => store.menuActive)
+import BaseButton from '@/components/base/BaseButton.vue'
+
+const store = useStore()
+const menuActive = computed(() => store.state.menuActive)
 </script>
 
 <style lang="scss" scoped>
@@ -22,11 +24,6 @@ $lineWidth: 2rem;
 $size: $lineWidth + 1rem;
 
 .menu-show-button {
-	// FIXME: create general button component
-	appearance: none;
-	background-color: transparent;
-	border: 0;
-
 	min-height: $size;
 	width: $size;
 

src/components/home/TheNavigation.vue

@@ -1,9 +1,8 @@
 <template>
-	<nav
+	<header
 		:class="{'has-background': background}"
 		aria-label="main navigation"
 		class="navbar main-theme is-fixed-top"
-		role="navigation"
 	>
 		<router-link :to="{name: 'home'}" class="logo-link">
 			<Logo width="164" height="48"/>
@@ -33,12 +32,13 @@
 			</a>
 			<notifications/>
 			<div class="user">
-				<img :src="userAvatar" alt="" class="avatar" width="40" height="40"/>
 				<dropdown class="is-right" ref="usernameDropdown">
 					<template #trigger>
 						<x-button
 							variant="secondary"
-							:shadow="false">
+							:shadow="false"
+						>
+							<img :src="userAvatar" alt="" class="avatar" width="40" height="40"/>
 							<span class="username">{{ userInfo.name !== '' ? userInfo.name : userInfo.username }}</span>
 							<span class="icon is-small">
 								<icon icon="chevron-down"/>
@@ -46,92 +46,96 @@
 						</x-button>
 					</template>
 
-					<router-link :to="{name: 'user.settings'}" class="dropdown-item">
+					<BaseButton
+						:to="{name: 'user.settings'}"
+						class="dropdown-item"
+					>
 						{{ $t('user.settings.title') }}
-					</router-link>
-					<a
+					</BaseButton>
+					<BaseButton
+						v-if="imprintUrl"
 						:href="imprintUrl"
 						class="dropdown-item"
-						target="_blank"
-						rel="noreferrer noopener nofollow"
-						v-if="imprintUrl">
+					>
 						{{ $t('navigation.imprint') }}
-					</a>
-					<a
+					</BaseButton>
+					<BaseButton
+						v-if="privacyPolicyUrl"
 						:href="privacyPolicyUrl"
 						class="dropdown-item"
-						target="_blank"
-						rel="noreferrer noopener nofollow"
-						v-if="privacyPolicyUrl">
+					>
 						{{ $t('navigation.privacy') }}
-					</a>
-					<a @click="$store.commit('keyboardShortcutsActive', true)" class="dropdown-item">
+					</BaseButton>
+					<BaseButton
+						@click="$store.commit('keyboardShortcutsActive', true)"
+						class="dropdown-item"
+					>
 						{{ $t('keyboardShortcuts.title') }}
-					</a>
-					<router-link :to="{name: 'about'}" class="dropdown-item">
+					</BaseButton>
+					<BaseButton
+						:to="{name: 'about'}"
+						class="dropdown-item"
+					>
 						{{ $t('about.title') }}
-					</router-link>
-					<a @click="logout()" class="dropdown-item">
+					</BaseButton>
+					<BaseButton
+						@click="logout()"
+						class="dropdown-item"
+					>
 						{{ $t('user.auth.logout') }}
-					</a>
+					</BaseButton>
 				</dropdown>
 			</div>
 		</div>
-	</nav>
+	</header>
 </template>
 
-<script>
-import {mapState} from 'vuex'
-import {CURRENT_LIST, QUICK_ACTIONS_ACTIVE} from '@/store/mutation-types'
+<script setup langs="ts">
+import {ref, computed, onMounted, nextTick} from 'vue'
+import {useStore} from 'vuex'
+import {useRouter} from 'vue-router'
+
+import {QUICK_ACTIONS_ACTIVE} from '@/store/mutation-types'
 import Rights from '@/models/constants/rights.json'
+
 import Update from '@/components/home/update.vue'
 import ListSettingsDropdown from '@/components/list/list-settings-dropdown.vue'
 import Dropdown from '@/components/misc/dropdown.vue'
 import Notifications from '@/components/notifications/notifications.vue'
 import Logo from '@/components/home/Logo.vue'
+import BaseButton from '@/components/base/BaseButton.vue'
 import MenuButton from '@/components/home/MenuButton.vue'
 
-export default {
-	name: 'topNavigation',
-	components: {
-		Notifications,
-		Dropdown,
-		ListSettingsDropdown,
-		Update,
-		Logo,
-		MenuButton,
-	},
-	computed: {
-		...mapState({
-			userInfo: state => state.auth.info,
-			userAvatar: state => state.auth.avatarUrl,
-			userAuthenticated: state => state.auth.authenticated,
-			currentList: CURRENT_LIST,
-			background: 'background',
-			imprintUrl: state => state.config.legal.imprintUrl,
-			privacyPolicyUrl: state => state.config.legal.privacyPolicyUrl,
-			canWriteCurrentList: state => state.currentList.maxRight > Rights.READ,
-		}),
-	},
-	mounted() {
-		this.$nextTick(() => {
-			if (typeof this.$refs.usernameDropdown === 'undefined' || typeof this.$refs.listTitle === 'undefined') {
-				return
-			}
+const store = useStore()
 
-			const usernameWidth = this.$refs.usernameDropdown.$el.clientWidth
-			this.$refs.listTitle.style.setProperty('--nav-username-width', `${usernameWidth}px`)
-		})
-	},
-	methods: {
-		logout() {
-			this.$store.dispatch('auth/logout')
-			this.$router.push({name: 'user.login'})
-		},
-		openQuickActions() {
-			this.$store.commit(QUICK_ACTIONS_ACTIVE, true)
-		},
-	},
+const userInfo = computed(() => store.state.auth.info)
+const userAvatar = computed(() => store.state.auth.avatarUrl)
+const currentList = computed(() => store.state.currentList)
+const background = computed(() => store.state.background)
+const imprintUrl = computed(() => store.state.config.legal.imprintUrl)
+const privacyPolicyUrl = computed(() => store.state.config.legal.privacyPolicyUrl)
+const canWriteCurrentList = computed(() => store.state.currentList.maxRight > Rights.READ)
+
+const usernameDropdown = ref()
+const listTitle = ref()
+onMounted(async () => {
+	await nextTick()
+	if (typeof usernameDropdown.value === 'undefined' || typeof listTitle.value === 'undefined') {
+		return
+	}
+
+	const usernameWidth = usernameDropdown.value.$el.clientWidth
+	listTitle.value.style.setProperty('--nav-username-width', `${usernameWidth}px`)
+})
+
+const router = useRouter()
+function logout() {
+	store.dispatch('auth/logout')
+	router.push({name: 'user.login'})
+}
+
+function openQuickActions() {
+	store.commit(QUICK_ACTIONS_ACTIVE, true)
 }
 </script>
 
@@ -247,6 +251,7 @@ $hamburger-menu-icon-width: 28px;
 			border-radius: 100%;
 			vertical-align: middle;
 			height: 40px;
+			margin-right: var(--button-padding-horizontal);
 		}
 
 		:deep(.dropdown-trigger .button) {

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 || blurHash}"
 			:style="{'background-image': blurHash && `url(${blurHash})`}"
@@ -13,25 +17,39 @@
 				class="app-container-background background-fade-in"
 				:style="{'background-image': background && `url(${background})`}"></div>
 			<navigation/>
-			<div
+			<main
 				:class="[
 					{ 'is-menu-enabled': menuActive },
 					$route.name,
 				]"
 				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 }">
-					<transition name="modal">
+				<router-view :route="routeWithModal" v-slot="{ Component }">
+					<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()"
@@ -39,13 +57,13 @@
 				>
 					<icon icon="keyboard"/>
 				</a>
-			</div>
+			</main>
 		</div>
 	</div>
 </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'
@@ -53,6 +71,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()
 
@@ -167,10 +238,15 @@ store.dispatch('labels/loadAllLabels')
 		padding-top: $navbar-height;
 	}
 
-	.app-content {
-		padding: $navbar-height + 1.5rem 1.5rem 1rem 1.5rem;
-		z-index: 10;
-		position: relative;
+  .app-content {
+    padding: $navbar-height + 1.5rem 1.5rem 1rem 1.5rem;
+	z-index: 10;
+	position: relative;
+
+	// Used to make sure the spinner is always in the middle while loading
+	> .loader-container {
+      min-height: calc(100vh -  #{$navbar-height + 1.5rem + 1rem});
+	}
 
 		@media screen and (max-width: $tablet) {
 			margin-left: 0;
@@ -187,15 +263,10 @@ store.dispatch('labels/loadAllLabels')
 			}
 		}
 
-		&.task\.detail {
-			padding-left: 0;
-			padding-right: 0;
-		}
-
-		.card {
-			background: var(--white);
-		}
-	}
+    .card {
+      background: var(--white);
+    }
+  }
 }
 
 .mobile-overlay {
@@ -205,7 +276,9 @@ store.dispatch('labels/loadAllLabels')
 	bottom: 0;
 	left: 0;
 	right: 0;
-	background: rgba(250, 250, 250, 0.8);
+	height: 100vh;
+	width: 100vw;
+	background: hsla(var(--grey-100-hsl), 0.8);
 	z-index: 5;
 	opacity: 0;
 	transition: all $transition;
@@ -229,4 +302,6 @@ store.dispatch('labels/loadAllLabels')
 		display: none;
 	}
 }
+
+@include modal-transition();
 </style>

src/components/home/navigation.vue

@@ -1,12 +1,12 @@
 <template>
-	<div :class="{'is-active': menuActive}" class="namespace-container">
-		<div class="menu top-menu">
+	<aside :class="{'is-active': menuActive}" class="namespace-container">
+		<nav class="menu top-menu">
 			<router-link :to="{name: 'home'}" class="logo">
-				<Logo width="164" height="48" />
+				<Logo width="164" height="48"/>
 			</router-link>
 			<ul class="menu-list">
 				<li>
-					<router-link :to="{ name: 'home'}">
+					<router-link :to="{ name: 'home'}" v-shortcut="'g o'">
 						<span class="icon">
 							<icon icon="calendar"/>
 						</span>
@@ -14,7 +14,7 @@
 					</router-link>
 				</li>
 				<li>
-					<router-link :to="{ name: 'tasks.range'}">
+					<router-link :to="{ name: 'tasks.range'}" v-shortcut="'g u'">
 						<span class="icon">
 							<icon :icon="['far', 'calendar-alt']"/>
 						</span>
@@ -22,7 +22,7 @@
 					</router-link>
 				</li>
 				<li>
-					<router-link :to="{ name: 'namespaces.index'}">
+					<router-link :to="{ name: 'namespaces.index'}" v-shortcut="'g n'">
 						<span class="icon">
 							<icon icon="layer-group"/>
 						</span>
@@ -30,7 +30,7 @@
 					</router-link>
 				</li>
 				<li>
-					<router-link :to="{ name: 'labels.index'}">
+					<router-link :to="{ name: 'labels.index'}" v-shortcut="'g a'">
 						<span class="icon">
 							<icon icon="tags"/>
 						</span>
@@ -38,7 +38,7 @@
 					</router-link>
 				</li>
 				<li>
-					<router-link :to="{ name: 'teams.index'}">
+					<router-link :to="{ name: 'teams.index'}" v-shortcut="'g m'">
 						<span class="icon">
 							<icon icon="users"/>
 						</span>
@@ -46,31 +46,35 @@
 					</router-link>
 				</li>
 			</ul>
-		</div>
+		</nav>
 
-		<aside class="menu namespaces-lists loader-container is-loading-small" :class="{'is-loading': loading}">
-			<template v-for="(n, nk) in namespaces" :key="n.id" >
+		<nav class="menu namespaces-lists loader-container is-loading-small" :class="{'is-loading': loading}">
+			<template v-for="(n, nk) in namespaces" :key="n.id">
 				<div class="namespace-title" :class="{'has-menu': n.id > 0}">
 					<span
 						@click="toggleLists(n.id)"
 						class="menu-label"
-						v-tooltip="namespaceTitles[nk]">
+						v-tooltip="namespaceTitles[nk]"
+					>
+						<span
+							v-if="n.hexColor !== ''"
+							:style="{ backgroundColor: n.hexColor }"
+							class="color-bubble"
+						/>
 						<span class="name">
-							<span
-								:style="{ backgroundColor: n.hexColor }"
-								class="color-bubble"
-								v-if="n.hexColor !== ''">
-							</span>
 							{{ namespaceTitles[nk] }}
 						</span>
+						<a
+							class="icon is-small toggle-lists-icon pl-2"
+							:class="{'active': typeof listsVisible[n.id] !== 'undefined' ? listsVisible[n.id] : true}"
+							@click="toggleLists(n.id)"
+						>
+							<icon icon="chevron-down"/>
+						</a>
+						<span class="count" :class="{'ml-2 mr-0': n.id > 0}">
+							({{ namespaceListsCount[nk] }})
+						</span>
 					</span>
-					<a
-						class="icon is-small toggle-lists-icon"
-						:class="{'active': typeof listsVisible[n.id] !== 'undefined' ? listsVisible[n.id] : true}"
-						@click="toggleLists(n.id)"
-					>
-						<icon icon="chevron-down"/>
-					</a>
 					<namespace-settings-dropdown :namespace="n" v-if="n.id > 0"/>
 				</div>
 				<div
@@ -81,18 +85,20 @@
 					<!--
 						NOTE: a v-model / computed setter is not possible, since the updateActiveLists function
 						triggered by the change needs to have access to the current namespace
-					--> 
+					-->
 					<draggable
 						v-bind="dragOptions"
 						:modelValue="activeLists[nk]"
 						@update:modelValue="(lists) => updateActiveLists(n, lists)"
-						:group="`namespace-${n.id}-lists`"
+						group="namespace-lists"
 						@start="() => drag = true"
-						@end="e => saveListPosition(e, nk)"
+						@end="saveListPosition"
 						handle=".handle"
 						:disabled="n.id < 0 || null"
 						tag="transition-group"
 						item-key="id"
+						:data-namespace-id="n.id"
+						:data-namespace-index="nk"
 						:component-data="{
 							type: 'transition',
 							tag: 'ul',
@@ -134,7 +140,7 @@
 											:class="{'is-favorite': l.isFavorite}"
 											@click.prevent.stop="toggleFavoriteList(l)"
 											class="favorite">
-											<icon :icon="l.isFavorite ? 'star' : ['far', 'star']" />
+											<icon :icon="l.isFavorite ? 'star' : ['far', 'star']"/>
 										</span>
 									</a>
 								</router-link>
@@ -145,9 +151,9 @@
 					</draggable>
 				</div>
 			</template>
-		</aside>
-		<PoweredByLink />
-	</div>
+		</nav>
+		<PoweredByLink/>
+	</aside>
 </template>
 
 <script>
@@ -194,13 +200,13 @@ export default {
 			loading: state => state[LOADING] && state[LOADING_MODULE] === 'namespaces',
 		}),
 		activeLists() {
-			return this.namespaces.map(({lists}) => lists?.filter(item => !item.isArchived))
+			return this.namespaces.map(({lists}) => lists?.filter(item => typeof item !== 'undefined' && !item.isArchived))
 		},
 		namespaceTitles() {
-			return this.namespaces.map((namespace, index) => {
-				const title = this.getNamespaceTitle(namespace)
-				return `${title} (${this.activeLists[index]?.length ?? 0})`
-			})
+			return this.namespaces.map((namespace) => this.getNamespaceTitle(namespace))
+		},
+		namespaceListsCount() {
+			return this.namespaces.map((_, index) => this.activeLists[index]?.length ?? 0)
 		},
 	},
 	beforeCreate() {
@@ -237,15 +243,15 @@ export default {
 			this.listsVisible[namespaceId] = !this.listsVisible[namespaceId]
 		},
 		updateActiveLists(namespace, activeLists) {
-			// this is a bit hacky: since we do have to filter out the archived items from the list
+			// This is a bit hacky: since we do have to filter out the archived items from the list
 			// for vue draggable updating it is not as simple as replacing it.
-			// instead we iterate over the non archived items in the old list and replace them with the ones in their new order
-			const lists = namespace.lists.map((item) => {
-				if (item.isArchived) {
-					return item
-				}
-				return activeLists.shift()
-			})
+			// To work around this, we merge the active lists with the archived ones. Doing so breaks the order
+			// because now all archived lists are sorted after the active ones. This is fine because they are sorted 
+			// later when showing them anyway, and it makes the merging happening here a lot easier.
+			const lists = [
+				...activeLists,
+				...namespace.lists.filter(l => l.isArchived),
+			]
 
 			const newNamespace = {
 				...namespace,
@@ -255,8 +261,11 @@ export default {
 			this.$store.commit('namespaces/setNamespaceById', newNamespace)
 		},
 
-		async saveListPosition(e, namespaceIndex) {
-			const listsActive = this.activeLists[namespaceIndex]
+		async saveListPosition(e) {
+			const namespaceId = parseInt(e.to.dataset.namespaceId)
+			const newNamespaceIndex = parseInt(e.to.dataset.namespaceIndex)
+				
+			const listsActive = this.activeLists[newNamespaceIndex]
 			const list = listsActive[e.newIndex]
 			const listBefore = listsActive[e.newIndex - 1] ?? null
 			const listAfter = listsActive[e.newIndex + 1] ?? null
@@ -269,6 +278,7 @@ export default {
 				await this.$store.dispatch('lists/updateList', {
 					...list,
 					position,
+					namespaceId,
 				})
 			} finally {
 				this.listUpdating[list.id] = false
@@ -365,8 +375,9 @@ $vikunja-nav-selected-width: 0.4rem;
 
 		.menu-label {
 			.color-bubble {
-				width: 14px !important;
-				height: 14px !important;
+				width: 14px;
+				height: 14px;
+				flex-basis: auto;
 			}
 
 			.is-archived {
@@ -387,6 +398,12 @@ $vikunja-nav-selected-width: 0.4rem;
 					overflow: hidden;
 					text-overflow: ellipsis;
 					white-space: nowrap;
+					margin-right: auto;
+				}
+
+				.count {
+					color: var(--grey-500);
+					margin-right: .5rem;
 				}
 			}
 
@@ -482,7 +499,7 @@ $vikunja-nav-selected-width: 0.4rem;
 					height: 1rem;
 					vertical-align: middle;
 					padding-right: 0.5rem;
-					
+
 					&.handle {
 						opacity: 0;
 						transition: opacity $transition;
@@ -490,7 +507,7 @@ $vikunja-nav-selected-width: 0.4rem;
 						cursor: grab;
 					}
 				}
-				
+
 				&:hover .icon.handle {
 					opacity: 1;
 				}
@@ -542,7 +559,7 @@ $vikunja-nav-selected-width: 0.4rem;
 			span.list-menu-link, li > a {
 				padding-left: 2rem;
 				display: inline-block;
-				
+
 				.icon {
 					padding-bottom: .25rem;
 				}

src/components/home/update.vue

@@ -85,4 +85,8 @@ export default {
 		margin-left: .5rem;
 	}
 }
+
+.dark .update-notification {
+	color: var(--grey-200);
+}
 </style>

src/components/input/button.vue

@@ -66,7 +66,7 @@ const showIconOnly = computed(() => props.icon !== '' && typeof slots.default ==
   text-transform: uppercase;
   font-size: 0.85rem;
   font-weight: bold;
-  height: $button-height;
+  min-height: $button-height;
   box-shadow: var(--shadow-sm);
   display: inline-flex;
 

src/components/input/datepicker.vue

@@ -183,6 +183,10 @@ export default {
 				this.updateData()
 			},
 			get() {
+				if(!this.date) {
+					return ''
+				}
+
 				return format(this.date, 'yyy-LL-dd H:mm')
 			},
 		},

src/components/input/editor.vue

@@ -326,7 +326,7 @@ export default {
 			}
 
 			&.has-checkbox {
-				margin-left: -2em;
+				margin-left: -1.25rem;
 				list-style: none;
 			}
 		}

src/components/input/multiselect.vue

@@ -450,7 +450,6 @@ export default {
 
 		button {
 			background: transparent;
-			display: block;
 			text-align: left;
 			box-shadow: none;
 			border-radius: 0;
@@ -460,6 +459,7 @@ export default {
 			padding: .5rem;
 			border: none;
 			cursor: pointer;
+			color: var(--grey-800);
 
 			display: flex;
 			justify-content: space-between;

src/components/input/password.vue

@@ -0,0 +1,85 @@
+<template>
+	<div class="password-field">
+		<input
+			class="input"
+			id="password"
+			name="password"
+			:placeholder="$t('user.auth.passwordPlaceholder')"
+			required
+			:type="passwordFieldType"
+			autocomplete="current-password"
+			@keyup.enter="e => $emit('submit', e)"
+			:tabindex="props.tabindex"
+			@focusout="validate"
+			@input="handleInput"
+		/>
+		<a
+			@click="togglePasswordFieldType"
+			class="password-field-type-toggle"
+			:aria-label="passwordFieldType === 'password' ? $t('user.auth.showPassword') : $t('user.auth.hidePassword')"
+			v-tooltip="passwordFieldType === 'password' ? $t('user.auth.showPassword') : $t('user.auth.hidePassword')">
+			<icon :icon="passwordFieldType === 'password' ? 'eye' : 'eye-slash'"/>
+		</a>
+	</div>
+	<p class="help is-danger" v-if="!isValid">
+		{{ $t('user.auth.passwordRequired') }}
+	</p>
+</template>
+
+<script lang="ts" setup>
+import {ref, watch} from 'vue'
+import {useDebounceFn} from '@vueuse/core'
+
+const props = defineProps({
+	tabindex: String,
+	modelValue: String,
+	// This prop is a workaround to trigger validation from the outside when the user never had focus in the input.
+	validateInitially: Boolean,
+})
+
+const emit = defineEmits(['submit', 'update:modelValue'])
+
+const passwordFieldType = ref<String>('password')
+const password = ref<String>('')
+const isValid = ref<Boolean>(!props.validateInitially)
+
+watch(
+	() => props.validateInitially,
+	(doValidate: Boolean) => {
+		if (doValidate) {
+			validate()
+		}
+	},
+)
+
+function validate() {
+	useDebounceFn(() => {
+		isValid.value = password.value !== ''
+	}, 100)()
+}
+
+function togglePasswordFieldType() {
+	passwordFieldType.value = passwordFieldType.value === 'password'
+		? 'text'
+		: 'password'
+}
+
+function handleInput(e) {
+	password.value = e.target.value
+	emit('update:modelValue', e.target.value)
+}
+</script>
+
+<style scoped>
+.password-field {
+	position: relative;
+}
+
+.password-field-type-toggle {
+	position: absolute;
+	color: var(--grey-400);
+	top: 50%;
+	right: 1rem;
+	transform: translateY(-50%);
+}
+</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 {
-	name: 'list-settings-dropdown',
-	data() {
-		return {
-			subscription: null,
-		}
+const props = defineProps({
+	list: {
+		type: ListModel,
+		required: true,
 	},
-	components: {
-		TaskSubscription,
-		DropdownItem,
-		Dropdown,
-	},
-	props: {
-		list: {
-			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>()
+watchEffect(() => {
+	if (props.list.subscription) {
+		subscription.value = props.list.subscription
+	}
+})
 
-			if (this.$route.name !== null && this.$route.name.startsWith('list.')) {
-				// HACK: we should implement a better routing for the modals
-				const settingsRoutes = ['edit', 'delete', 'archive', 'background', 'share', 'duplicate']
-				const suffix = settingsRoutes.find((route) => this.$route.name.endsWith(`.settings.${route}`))
-				name = this.$route.name.replace(`.settings.${suffix}`,'')
-			}
-
-			if (this.isSavedFilter) {
-				name = name.replace('list.', 'filter.')
-			}
-
-			return `${name}.settings`
-		},
-		isSavedFilter() {
-			return getSavedFilterIdFromListId(this.list.id) > 0
-		},
-	},
-}
+const store = useStore()
+const backgroundsEnabled = computed(() => store.state.config.enabledBackgroundProviders?.length > 0)
+const isSavedFilter = computed(() => getSavedFilterIdFromListId(props.list.id) > 0)
 </script>

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

@@ -6,7 +6,7 @@
 	>
 		{{ $t('filters.clear') }}
 	</x-button>
-	<popup>
+	<popup :has-overflow="true">
 		<template #trigger="{toggle}">
 			<x-button
 				@click.prevent.stop="toggle()"
@@ -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

@@ -67,49 +67,49 @@
 		<div class="field">
 			<label class="label">{{ $t('task.attributes.dueDate') }}</label>
 			<div class="control">
-				<flat-pickr
-					:config="flatPickerConfig"
-					@on-close="setDueDateFilter"
-					class="input"
-					:placeholder="$t('filters.attributes.dueDateRange')"
-					v-model="filters.dueDate"
-				/>
+				<datepicker-with-range @dateChanged="values => setDateFilter('due_date', values)">
+					<template #trigger="{toggle, buttonText}">
+						<x-button @click.prevent.stop="toggle()" variant="secondary" :shadow="false" class="mb-2">
+							{{ buttonText }}
+						</x-button>
+					</template>
+				</datepicker-with-range>
 			</div>
 		</div>
 		<div class="field">
 			<label class="label">{{ $t('task.attributes.startDate') }}</label>
 			<div class="control">
-				<flat-pickr
-					:config="flatPickerConfig"
-					@on-close="setStartDateFilter"
-					class="input"
-					:placeholder="$t('filters.attributes.startDateRange')"
-					v-model="filters.startDate"
-				/>
+				<datepicker-with-range @dateChanged="values => setDateFilter('start_date', values)">
+					<template #trigger="{toggle, buttonText}">
+						<x-button @click.prevent.stop="toggle()" variant="secondary" :shadow="false" class="mb-2">
+							{{ buttonText }}
+						</x-button>
+					</template>
+				</datepicker-with-range>
 			</div>
 		</div>
 		<div class="field">
 			<label class="label">{{ $t('task.attributes.endDate') }}</label>
 			<div class="control">
-				<flat-pickr
-					:config="flatPickerConfig"
-					@on-close="setEndDateFilter"
-					class="input"
-					:placeholder="$t('filters.attributes.endDateRange')"
-					v-model="filters.endDate"
-				/>
+				<datepicker-with-range @dateChanged="values => setDateFilter('end_date', values)">
+					<template #trigger="{toggle, buttonText}">
+						<x-button @click.prevent.stop="toggle()" variant="secondary" :shadow="false" class="mb-2">
+							{{ buttonText }}
+						</x-button>
+					</template>
+				</datepicker-with-range>
 			</div>
 		</div>
 		<div class="field">
 			<label class="label">{{ $t('task.attributes.reminders') }}</label>
 			<div class="control">
-				<flat-pickr
-					:config="flatPickerConfig"
-					@on-close="setReminderFilter"
-					class="input"
-					:placeholder="$t('filters.attributes.reminderRange')"
-					v-model="filters.reminders"
-				/>
+				<datepicker-with-range @dateChanged="values => setDateFilter('reminders', values)">
+					<template #trigger="{toggle, buttonText}">
+						<x-button @click.prevent.stop="toggle()" variant="secondary" :shadow="false" class="mb-2">
+							{{ buttonText }}
+						</x-button>
+					</template>
+				</datepicker-with-range>
 			</div>
 		</div>
 
@@ -175,15 +175,14 @@
 </template>
 
 <script>
+import DatepickerWithRange from '@/components/date/datepickerWithRange'
 import Fancycheckbox from '../../input/fancycheckbox'
-import flatPickr from 'vue-flatpickr-component'
-import 'flatpickr/dist/flatpickr.css'
 
 import {includesById} from '@/helpers/utils'
-import {formatISO} from 'date-fns'
 import PrioritySelect from '@/components/tasks/partials/prioritySelect.vue'
 import PercentDoneSelect from '@/components/tasks/partials/percentDoneSelect.vue'
 import Multiselect from '@/components/input/multiselect.vue'
+import {parseDateOrString} from '@/helpers/time/parseDateOrString'
 
 import UserService from '@/services/user'
 import ListService from '@/services/list'
@@ -191,7 +190,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 = {
@@ -222,15 +221,15 @@ const DEFAULT_FILTERS = {
 	namespace: '',
 }
 
-export const ALPHABETICAL_SORT	= 'title'
+export const ALPHABETICAL_SORT = 'title'
 
 export default {
 	name: 'filters',
 	components: {
+		DatepickerWithRange,
 		EditLabels,
 		PrioritySelect,
 		Fancycheckbox,
-		flatPickr,
 		PercentDoneSelect,
 		Multiselect,
 	},
@@ -281,7 +280,7 @@ export default {
 				return this.params?.sort_by?.find(sortBy => sortBy === ALPHABETICAL_SORT) !== undefined
 			},
 			set(sortAlphabetically) {
-				this.params.sort_by	= sortAlphabetically
+				this.params.sort_by = sortAlphabetically
 					? [ALPHABETICAL_SORT]
 					: getDefaultParams().sort_by
 
@@ -291,19 +290,6 @@ export default {
 		foundLabels() {
 			return this.$store.getters['labels/filterLabelsByQuery'](this.labels, this.query)
 		},
-		flatPickerConfig() {
-			return {
-				altFormat: this.$t('date.altFormatLong'),
-				altInput: true,
-				dateFormat: 'Y-m-d H:i',
-				enableTime: true,
-				time_24hr: true,
-				mode: 'range',
-				locale: {
-					firstDayOfWeek: this.$store.state.auth.settings.weekStart,
-				},
-			}
-		},
 	},
 	methods: {
 		change() {
@@ -343,19 +329,12 @@ export default {
 				}
 			}
 		},
-		setDateFilter(filterName, variableName = null) {
-			if (variableName === null) {
-				variableName = filterName
-			}
-			
-			// Only filter if we have a start and end due date
-			if (this.filters[variableName] !== '') {
+		setDateFilter(filterName, {dateFrom, dateTo}) {
+			dateFrom = parseDateOrString(dateFrom, null)
+			dateTo = parseDateOrString(dateTo, null)
 
-				const parts = this.filters[variableName].split(' to ')
-
-				if (parts.length < 2) {
-					return
-				}
+			// Only filter if we have a date
+			if (dateFrom !== null && dateTo !== null) {
 
 				// Check if we already have values in params and only update them if we do
 				let foundStart = false
@@ -363,23 +342,23 @@ export default {
 				this.params.filter_by.forEach((f, i) => {
 					if (f === filterName && this.params.filter_comparator[i] === 'greater_equals') {
 						foundStart = true
-						this.params.filter_value[i] = formatISO(new Date(parts[0]))
+						this.params.filter_value[i] = dateFrom
 					}
 					if (f === filterName && this.params.filter_comparator[i] === 'less_equals') {
 						foundEnd = true
-						this.params.filter_value[i] = formatISO(new Date(parts[1]))
+						this.params.filter_value[i] = dateTo
 					}
 				})
 
 				if (!foundStart) {
 					this.params.filter_by.push(filterName)
 					this.params.filter_comparator.push('greater_equals')
-					this.params.filter_value.push(formatISO(new Date(parts[0])))
+					this.params.filter_value.push(dateFrom)
 				}
 				if (!foundEnd) {
 					this.params.filter_by.push(filterName)
 					this.params.filter_comparator.push('less_equals')
-					this.params.filter_value.push(formatISO(new Date(parts[1])))
+					this.params.filter_value.push(dateTo)
 				}
 				this.change()
 				return
@@ -513,24 +492,12 @@ export default {
 				this.params.filter_concat = 'or'
 			}
 		},
-		setDueDateFilter() {
-			this.setDateFilter('due_date', 'dueDate')
-		},
 		setPriority() {
 			this.setSingleValueFilter('priority', 'priority', 'usePriority')
 		},
-		setStartDateFilter() {
-			this.setDateFilter('start_date', 'startDate')
-		},
-		setEndDateFilter() {
-			this.setDateFilter('end_date', 'endDate')
-		},
 		setPercentDoneFilter() {
 			this.setSingleValueFilter('percent_done', 'percentDone', 'usePercentDone')
 		},
-		setReminderFilter() {
-			this.setDateFilter('reminders')
-		},
 		clear(kind) {
 			this[`found${kind}`] = []
 		},
@@ -609,7 +576,7 @@ export default {
 }
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .single-value-control {
 	display: flex;
 	align-items: center;
@@ -618,4 +585,8 @@ export default {
 		margin-left: .5rem;
 	}
 }
+
+:deep(.datepicker-with-range-container .popup) {
+	right: 0;
+}
 </style>

src/components/list/partials/list-card.vue

@@ -34,13 +34,14 @@
 </template>
 
 <script lang="ts" setup>
-import {ref, watch} from 'vue'
+import {PropType, ref, watch} from 'vue'
 import {useStore} from 'vuex'
 
 import ListService from '@/services/list'
 import {getBlobFromBlurHash} from '@/helpers/getBlobFromBlurHash'
 
 import {colorIsDark} from '@/helpers/color/colorIsDark'
+import ListModel from '@/models/list'
 
 const background = ref<string | null>(null)
 const backgroundLoading = ref(false)
@@ -48,7 +49,7 @@ const blurHashUrl = ref('')
 
 const props = defineProps({
 	list: {
-		type: Object,
+		type: Object as PropType<ListModel>,
 		required: true,
 	},
 	showArchived: {
@@ -81,7 +82,7 @@ async function loadBackground() {
 
 const store = useStore()
 
-function toggleFavoriteList(list) {
+function toggleFavoriteList(list: ListModel) {
 	// The favorites pseudo list is always favorite
 	// Archived lists cannot be marked favorite
 	if (list.id === -1 || list.isArchived) {

src/components/misc/api-config.vue

@@ -39,79 +39,68 @@
 	</div>
 </template>
 
-<script>
-import Message from '@/components/misc/message'
+<script setup lang="ts">
+import {ref, computed, watch} from 'vue'
+import {useI18n} from 'vue-i18n'
 import {parseURL} from 'ufo'
+
 import {checkAndSetApiUrl} from '@/helpers/checkAndSetApiUrl'
+import {success} from '@/message'
 
-export default {
-	name: 'apiConfig',
-	components: {
-		Message,
+import Message from '@/components/misc/message.vue'
+
+const props = defineProps({
+	configureOpen: {
+		type: Boolean,
+		required: false,
+		default: false,
 	},
-	data() {
-		return {
-			configureApi: false,
-			apiUrl: window.API_URL,
-			errorMsg: '',
-			successMsg: '',
+})
+const emit = defineEmits(['foundApi'])
+
+const apiUrl = ref(window.API_URL)
+const configureApi = ref(apiUrl.value === '')
+
+// Because we're only using this to parse the hostname, it should be fine to just prefix with http:// 
+// regardless of whether the url is actually reachable under http.
+const apiDomain = computed(() => parseURL(apiUrl.value, 'http://').host || parseURL(window.location.href).host)
+
+watch(() => props.configureOpen, (value) => {
+	configureApi.value = value
+}, {immediate: true})
+
+
+const {t} = useI18n()
+
+const errorMsg = ref('')
+const successMsg = ref('')
+
+async function setApiUrl() {
+	if (apiUrl.value === '') {
+		// Don't try to check and set an empty url
+		errorMsg.value = t('apiConfig.urlRequired')
+		return
+	}
+
+	try {
+		const url = await checkAndSetApiUrl(apiUrl.value)
+
+		if (url === '') {
+			// If the config setter function could not figure out a url					
+			throw new Error('URL cannot be empty.')
 		}
-	},
-	emits: ['foundApi'],
-	created() {
-		if (this.apiUrl === '') {
-			this.configureApi = true
-		}
-	},
-	computed: {
-		apiDomain() {
-			return parseURL(this.apiUrl).host || parseURL(window.location.href).host
-		},
-	},
-	props: {
-		configureOpen: {
-			type: Boolean,
-			required: false,
-			default: false,
-		},
-	},
-	watch: {
-		configureOpen: {
-			handler(value) {
-				this.configureApi = value
-			},
-			immediate: true,
-		},
-	},
-	methods: {
-		async setApiUrl() {
-			if (this.apiUrl === '') {
-				// Don't try to check and set an empty url
-				this.errorMsg = this.$t('apiConfig.urlRequired')
-				return
-			}
 
-			try {
-				const url = await checkAndSetApiUrl(this.apiUrl)
-
-				if (url === '') {
-					// If the config setter function could not figure out a url					
-					throw new Error('URL cannot be empty.')
-				}
-
-				// Set it + save it to local storage to save us the hoops
-				this.errorMsg = ''
-				this.$message.success({message: this.$t('apiConfig.success', {domain: this.apiDomain})})
-				this.configureApi = false
-				this.apiUrl = url
-				this.$emit('foundApi', this.apiUrl)
-			} catch (e) {
-				// Still not found, url is still invalid
-				this.successMsg = ''
-				this.errorMsg = this.$t('apiConfig.error', {domain: this.apiDomain})
-			}
-		},
-	},
+		// Set it + save it to local storage to save us the hoops
+		errorMsg.value = ''
+		apiUrl.value = url
+		success({message: t('apiConfig.success', {domain: apiDomain.value})})
+		configureApi.value = false
+		emit('foundApi', apiUrl.value)
+	} catch (e) {
+		// Still not found, url is still invalid
+		successMsg.value = ''
+		errorMsg.value = t('apiConfig.error', {domain: apiDomain.value})
+	}
 }
 </script>
 

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

@@ -4,9 +4,15 @@
 			<template v-for="(s, i) in shortcuts" :key="i">
 				<h3>{{ $t(s.title) }}</h3>
 
-				<message>
+				<message class="mb-4" v-if="s.available">
 					{{
-						s.available($route) ? $t('keyboardShortcuts.currentPageOnly') : $t('keyboardShortcuts.allPages')
+						typeof s.available === 'undefined' ?
+							$t('keyboardShortcuts.allPages') :
+							(
+								s.available($route)
+									? $t('keyboardShortcuts.currentPageOnly')
+									: $t('keyboardShortcuts.somePagesOnly')
+							)
 					}}
 				</message>
 
@@ -17,7 +23,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 +32,19 @@
 	</modal>
 </template>
 
-<script>
-import {KEYBOARD_SHORTCUTS_ACTIVE} from '@/store/mutation-types'
-import Shortcut from '@/components/misc/shortcut.vue'
-import Message from '@/components/misc/message'
-import {KEYBOARD_SHORTCUTS} from './shortcuts'
+<script lang="ts" setup>
+import {useStore} from 'vuex'
 
-export default {
-	name: 'keyboard-shortcuts',
-	components: {
-		Message, 
-		Shortcut,
-	},
-	data() {
-		return {
-			shortcuts: KEYBOARD_SHORTCUTS,
-		}
-	},
-	methods: {
-		close() {
-			this.$store.commit(KEYBOARD_SHORTCUTS_ACTIVE, false)
-		},
-	},
+import Shortcut from '@/components/misc/shortcut.vue'
+import Message from '@/components/misc/message.vue'
+
+import {KEYBOARD_SHORTCUTS_ACTIVE} from '@/store/mutation-types'
+import {KEYBOARD_SHORTCUTS as shortcuts} from './shortcuts'
+
+const store = useStore()
+
+function close() {
+	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',
@@ -17,6 +30,36 @@ export const KEYBOARD_SHORTCUTS = [
 			},
 		],
 	},
+	{
+		title: 'keyboardShortcuts.navigation.title',
+		shortcuts: [
+			{
+				title: 'keyboardShortcuts.navigation.overview',
+				keys: ['g', 'o'],
+				combination: 'then',
+			},
+			{
+				title: 'keyboardShortcuts.navigation.upcoming',
+				keys: ['g', 'u'],
+				combination: 'then',
+			},
+			{
+				title: 'keyboardShortcuts.navigation.namespaces',
+				keys: ['g', 'n'],
+				combination: 'then',
+			},
+			{
+				title: 'keyboardShortcuts.navigation.labels',
+				keys: ['g', 'a'],
+				combination: 'then',
+			},
+			{
+				title: 'keyboardShortcuts.navigation.teams',
+				keys: ['g', 'm'],
+				combination: 'then',
+			},
+		],
+	},
 	{
 		title: 'list.kanban.title',
 		available: (route) => route.name === 'list.kanban',
@@ -29,7 +72,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,14 +98,12 @@ export const KEYBOARD_SHORTCUTS = [
 	},
 	{
 		title: 'keyboardShortcuts.task.title',
-		available: (route) => [
-			'task.detail',
-			'task.list.detail',
-			'task.gantt.detail',
-			'task.kanban.detail',
-			'task.detail',
-		].includes(route.name),
+		available: (route) => route.name === 'task.detail',
 		shortcuts: [
+			{
+				title: 'keyboardShortcuts.task.done',
+				keys: ['t'],
+			},
 			{
 				title: 'keyboardShortcuts.task.assign',
 				keys: ['a'],
@@ -83,6 +124,14 @@ export const KEYBOARD_SHORTCUTS = [
 				title: 'keyboardShortcuts.task.related',
 				keys: ['r'],
 			},
+			{
+				title: 'keyboardShortcuts.task.move',
+				keys: ['m'],
+			},
+			{
+				title: 'keyboardShortcuts.task.color',
+				keys: ['c'],
+			},
 		],
 	},
 ]

src/components/misc/message.vue

@@ -1,18 +1,35 @@
 <template>
 	<div class="message-wrapper">
-		<div class="message" :class="variant">
+		<div class="message" :class="[variant, textAlignClass]">
 			<slot/>
 		</div>
 	</div>
 </template>
 
 <script lang="ts" setup>
-defineProps({
+import {computed, PropType} from 'vue'
+
+const TEXT_ALIGN_MAP = Object.freeze({
+	left: '',
+	center: 'has-text-centered',
+	right: 'has-text-right',
+})
+
+type textAlignVariants = keyof typeof TEXT_ALIGN_MAP
+
+const props = defineProps({
 	variant: {
 		type: String,
 		default: 'info',
 	},
+	textAlign: {
+		type: String as PropType<textAlignVariants>,
+		default: 'left',
+	},
 })
+
+const textAlignClass = computed(() => TEXT_ALIGN_MAP[props.textAlign])
+
 </script>
 
 <style lang="scss" scoped>

src/components/misc/no-auth-wrapper.vue

@@ -14,6 +14,9 @@
 				<div>
 					<h2 class="title" v-if="title">{{ title }}</h2>
 					<api-config/>
+					<Message v-if="motd !== ''" class="is-hidden-tablet mb-4">
+						{{ motd }}
+					</Message>
 					<slot/>
 				</div>
 				<legal/>
@@ -38,8 +41,8 @@ const store = useStore()
 const {t} = useI18n()
 
 const motd = computed(() => store.state.config.motd)
-// @ts-ignore
-const title = computed(() => t(route.meta.title ?? ''))
+
+const title = computed(() => t(route.meta?.title as string || ''))
 useTitle(() => title.value)
 </script>
 

src/components/misc/popup.vue

@@ -1,6 +1,6 @@
 <template>
 	<slot name="trigger" :isOpen="open" :toggle="toggle"></slot>
-	<div class="popup" :class="{'is-open': open}" ref="popup">
+	<div class="popup" :class="{'is-open': open, 'has-overflow': props.hasOverflow && open}" ref="popup">
 		<slot name="content" :isOpen="open"/>
 	</div>
 </template>
@@ -16,6 +16,13 @@ const toggle = () => {
 	open.value = !open.value
 }
 
+const props = defineProps({
+	hasOverflow: {
+		type: Boolean,
+		default: false,
+	},
+})
+
 function hidePopup(e) {
 	if (!open.value) {
 		return

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,53 +1,51 @@
 <template>
 	<x-button
+		v-if="isButton"
 		variant="secondary"
-		:icon="icon"
+		: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="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({
-	entity: {
-		required: true,
-		type: String,
-	},
-	subscription: {
-		required: true,
-	},
-	entityId: {
-		required: true,
-	},
-	isButton: {
-		type: Boolean,
-		default: true,
-	},
+interface Props {
+  entity: string
+  entityId: number
+  subscription: SubscriptionModel
+  isButton?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+	isButton: true,
 })
 
+const subscriptionEntity = computed<string>(() => props.subscription.entity)
+
 const emit = defineEmits(['change'])
 
 const subscriptionService = shallowRef(new SubscriptionService())
@@ -57,7 +55,7 @@ const tooltipText = computed(() => {
 	if (disabled.value) {
 		return t('task.subscription.subscribedThroughParent', {
 			entity: props.entity,
-			parent: props.subscription.entity,
+			parent: subscriptionEntity.value,
 		})
 	}
 
@@ -67,13 +65,13 @@ const tooltipText = computed(() => {
 })
 
 const buttonText = computed(() => props.subscription !== null ? t('task.subscription.unsubscribe') : t('task.subscription.subscribe'))
-const icon = computed(() => props.subscription !== null ? ['far', 'bell-slash'] : 'bell')
+const iconName = computed(() => props.subscription !== null ? ['far', 'bell-slash'] : 'bell')
 const disabled = computed(() => {
 	if (props.subscription === null) {
 		return false
 	}
 
-	return props.subscription.entity !== props.entity
+	return subscriptionEntity.value !== props.entity
 })
 
 function changeSubscription() {

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"
@@ -7,10 +8,10 @@
 				{ 'has-overflow': overflow },
 				variant,
 			]"
+			ref="modal"
 		>
 			<div
 				class="modal-container"
-				:class="{'has-overflow': overflow}"
 				@click.self.prevent.stop="$emit('close')"
 				v-shortcut="'Escape'"
 			>
@@ -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>
@@ -52,58 +60,37 @@
 	</transition>
 </template>
 
-<script>
-export const TRANSITION_NAMES = {
-	MODAL: 'modal',
-	FADE: 'fade',
-}
+<script lang="ts" setup>
+import BaseButton from '@/components/base/BaseButton.vue'
+import {ref, watch} from 'vue'
+import {useScrollLock} from '@vueuse/core'
 
-export const VARIANTS = {
-	DEFAULT: 'default',
-	HINT_MODAL: 'hint-modal',
-	SCROLLING: 'scrolling',
-}
+const props = withDefaults(defineProps<{
+	enabled?: boolean,
+	overflow?: boolean,
+	wide?: boolean,
+	transitionName?: 'modal' | 'fade',
+	variant?: 'default' | 'hint-modal' | 'scrolling',
+}>(), {
+	enabled: true,
+	transitionName: 'modal',
+	variant: 'default',
+})
 
-function validValue(values) {
-	return (value) => Object.values(values).includes(value)
-}
+defineEmits(['close', 'submit'])
 
-export default {
-	name: 'modal',
-	mounted() {
-		document.addEventListener('keydown', (e) => {
-			// Close the model when escape is pressed
-			if (e.keyCode === 27) {
-				this.$emit('close')
-			}
-		})
+const modal = ref<HTMLElement | null>(null)
+const scrollLock = useScrollLock(modal)
+
+watch(
+	() => props.enabled,
+	enabled => {
+		scrollLock.value = enabled
 	},
-	props: {
-		enabled: {
-			type: Boolean,
-			default: true,
-		},
-		overflow: {
-			type: Boolean,
-			default: false,
-		},
-		wide: {
-			type: Boolean,
-			default: false,
-		},
-		transitionName: {
-			type: String,
-			default: TRANSITION_NAMES.MODAL,
-			validator: validValue(TRANSITION_NAMES),
-		},
-		variant: {
-			type: String,
-			default: VARIANTS.DEFAULT,
-			validator: validValue(VARIANTS),
-		},
+	{
+		immediate: true,
 	},
-	emits: ['close', 'submit'],
-}
+)
 </script>
 
 <style lang="scss" scoped>
@@ -192,22 +179,26 @@ export default {
 			display: flex;
 			justify-content: space-between;
 			align-items: center;
-
 		}
 	}
 }
 
+.close {
+	position: fixed;
+	top: 5px;
+	right: 26px;
+	color: var(--white);
+	font-size: 2rem;
 
-
-/* Transitions */
-
-.modal-enter,
-.modal-leave-active {
-  opacity: 0;
+	@media screen and (max-width: $desktop) {
+		color: var(--grey-900);
+	}
 }
+</style>
 
-.modal-enter .modal-container,
-.modal-leave-active .modal-container {
-  transform: scale(0.9);
+<style lang="scss">
+// Close icon SVG uses currentColor, change the color to keep it visible
+.dark .close {
+	color: var(--grey-900);
 }
 </style>

src/components/namespace/namespace-search.vue

@@ -13,6 +13,7 @@
 import {ref, computed} from 'vue'
 import {useStore} from 'vuex'
 import Multiselect from '@/components/input/multiselect.vue'
+import NamespaceModel from '@/models/namespace'
 
 const emit = defineEmits(['selected'])
 
@@ -25,7 +26,7 @@ function findNamespaces(newQuery: string) {
 	query.value = newQuery
 }
 
-function select(namespace) {
+function select(namespace: NamespaceModel) {
 	emit('selected', namespace)
 }
 </script>

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/notifications/notifications.vue

@@ -81,7 +81,7 @@ export default {
 			return this.notifications.filter(n => n.readAt === null).length
 		},
 		notifications() {
-			return this.allNotifications.filter(n => n.name !== '')
+			return this.allNotifications ? this.allNotifications.filter(n => n.name !== '') : []
 		},
 		...mapState({
 			userInfo: state => state.auth.info,

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/add-task.vue

@@ -5,12 +5,13 @@
 				<textarea
 					:disabled="taskService.loading || undefined"
 					class="add-task-textarea input"
+					:class="{'textarea-empty': newTaskTitle === ''}"
 					:placeholder="$t('list.list.addPlaceholder')"
 					rows="1"
 					v-focus
 					v-model="newTaskTitle"
 					ref="newTaskInput"
-					@keyup="errorMessage = ''"
+					@keyup="resetEmptyTitleError"
 					@keydown.enter="handleEnter"
 				/>
 				<span class="icon is-small is-left">
@@ -24,15 +25,18 @@
 					@click="addTask()"
 					icon="plus"
 					:loading="taskService.loading"
+					:aria-label="$t('list.list.add')"
 				>
-					{{ $t('list.list.add') }}
+					<span class="button-text">
+						{{ $t('list.list.add') }}
+					</span>
 				</x-button>
 			</p>
 		</div>
 		<p class="help is-danger" v-if="errorMessage !== ''">
 			{{ errorMessage }}
 		</p>
-		<quick-add-magic v-else />
+		<quick-add-magic v-else/>
 	</div>
 </template>
 
@@ -40,7 +44,7 @@
 import {ref, watch, unref, shallowReactive} from 'vue'
 import {useI18n} from 'vue-i18n'
 import {useStore} from 'vuex'
-import { tryOnMounted, debouncedWatch, useWindowSize, MaybeRef } from '@vueuse/core'
+import {tryOnMounted, debouncedWatch, useWindowSize, MaybeRef} from '@vueuse/core'
 
 import TaskService from '@/services/task'
 import QuickAddMagic from '@/components/tasks/partials/quick-add-magic.vue'
@@ -54,12 +58,12 @@ function useAutoHeightTextarea(value: MaybeRef<string>) {
 	const minHeight = ref(0)
 
 	// adapted from https://github.com/LeaVerou/stretchy/blob/47f5f065c733029acccb755cae793009645809e2/src/stretchy.js#L34
-	function resize(textareaEl: HTMLInputElement|undefined) {
+	function resize(textareaEl: HTMLInputElement | undefined) {
 		if (!textareaEl) return
 
 		let empty
 
-		// the value here is the the attribute value
+		// the value here is the attribute value
 		if (!textareaEl.value && textareaEl.placeholder) {
 			empty = true
 			textareaEl.value = textareaEl.placeholder
@@ -95,12 +99,12 @@ function useAutoHeightTextarea(value: MaybeRef<string>) {
 		}
 	})
 
-	const { width: windowWidth } = useWindowSize()
+	const {width: windowWidth} = useWindowSize()
 
 	debouncedWatch(
 		windowWidth,
 		() => resize(textarea.value),
-		{ debounce: 200 },
+		{debounce: 200},
 	)
 
 	// It is not possible to get notified of a change of the value attribute of a textarea without workarounds (setTimeout) 
@@ -129,12 +133,18 @@ const emit = defineEmits(['taskAdded'])
 const newTaskTitle = ref('')
 const newTaskInput = useAutoHeightTextarea(newTaskTitle)
 
-const { t } = useI18n()
+const {t} = useI18n()
 const store = useStore()
 
 const taskService = shallowReactive(new TaskService())
 const errorMessage = ref('')
 
+function resetEmptyTitleError() {
+	if (newTaskTitle.value !== '') {
+		errorMessage.value = ''
+	}
+}
+
 async function addTask() {
 	if (newTaskTitle.value === '') {
 		errorMessage.value = t('list.create.addTitleRequired')
@@ -194,9 +204,26 @@ function handleEnter(e: KeyboardEvent) {
 
 .add-task-button {
 	height: 2.5rem;
+
+	@media screen and (max-width: $mobile) {
+		.button-text {
+			display: none;
+		}
+		
+		:deep(.icon) {
+			margin: 0 !important;
+		}
+	}
 }
+
 .add-task-textarea {
 	transition: border-color $transition;
 	resize: none;
 }
+
+// Adding this class when the textarea has no text prevents the textarea from wrapping the placeholder.
+.textarea-empty {
+	white-space: nowrap;
+	text-overflow: ellipsis;
+}
 </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

@@ -34,7 +34,7 @@
 			>
 				<div class="filename">{{ a.file.name }}</div>
 				<div class="info">
-					<p class="collapses">
+					<p class="attachment-info-meta">
 						<i18n-t keypath="task.attachment.createdBy">
 							<span v-tooltip="formatDate(a.created)">
 								{{ formatDateSince(a.created) }}
@@ -289,21 +289,6 @@ export default {
             content: '·';
             padding: 0 .25rem;
           }
-
-          @media screen and (max-width: $mobile) {
-            &.collapses {
-              flex-direction: column;
-
-              > span:not(:last-child):after,
-              > a:not(:last-child):after {
-                display: none;
-              }
-
-              .user .username {
-                display: none;
-              }
-            }
-          }
         }
       }
     }
@@ -341,6 +326,10 @@ export default {
         height: auto;
         text-shadow: var(--shadow-md);
         animation: bounce 2s infinite;
+		
+		@media (prefers-reduced-motion: reduce) {
+          animation: none;
+		}
       }
 
       .hint {
@@ -357,6 +346,35 @@ export default {
   }
 }
 
+.attachment-info-meta {
+	display: flex;
+	align-items: center;
+	
+	:deep(.user) {
+		display: flex !important;
+		align-items: center;
+		margin: 0 .5rem;
+	}
+
+	@media screen and (max-width: $mobile) {
+		flex-direction: column;
+		align-items: flex-start;
+		
+		:deep(.user) {
+			margin: .5rem 0;
+		}
+
+		> span:not(:last-child):after,
+		> a:not(:last-child):after {
+			display: none;
+		}
+
+		.user .username {
+			display: none;
+		}
+	}
+}
+
 @keyframes bounce {
   from,
   20%,
@@ -382,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/createdUpdated.vue

@@ -0,0 +1,47 @@
+<template>
+	<p class="created">
+		<time :datetime="formatISO(task.created)" v-tooltip="formatDate(task.created)">
+			<i18n-t keypath="task.detail.created">
+				<span>{{ formatDateSince(task.created) }}</span>
+				{{ task.createdBy.getDisplayName() }}
+			</i18n-t>
+		</time>
+		<template v-if="+new Date(task.created) !== +new Date(task.updated)">
+			<br/>
+			<!-- Computed properties to show the actual date every time it gets updated -->
+			<time :datetime="formatISO(task.updated)" v-tooltip="updatedFormatted">
+				<i18n-t keypath="task.detail.updated">
+					<span>{{ updatedSince }}</span>
+				</i18n-t>
+			</time>
+		</template>
+		<template v-if="task.done">
+			<br/>
+			<time :datetime="formatISO(task.doneAt)" v-tooltip="doneFormatted">
+				<i18n-t keypath="task.detail.doneAt">
+					<span>{{ doneSince }}</span>
+				</i18n-t>
+			</time>
+		</template>
+	</p>
+</template>
+
+<script lang="ts" setup>
+import {computed, toRefs} from 'vue'
+import TaskModel from '@/models/task'
+import {formatDateLong, formatDateSince} from '@/helpers/time/formatDate'
+
+const props = defineProps({
+	task: {
+		type: TaskModel,
+		required: true,
+	},
+})
+
+const {task} = toRefs(props)
+
+const updatedSince = computed(() => formatDateSince(task.value.updated))
+const updatedFormatted = computed(() => formatDateLong(task.value.updated))
+const doneSince = computed(() => formatDateSince(task.value.doneAt))
+const doneFormatted = computed(() => formatDateLong(task.value.doneAt))
+</script>

src/components/tasks/partials/date-table-cell.vue

@@ -1,6 +1,8 @@
 <template>
 	<td v-tooltip="+date === 0 ? '' : formatDate(date)">
-		{{ +date === 0 ? '-' : formatDateSince(date) }}
+		<time :datetime="date ? formatISO(date) : null">
+			{{ +date === 0 ? '-' : formatDateSince(date) }}
+		</time>
 	</td>
 </template>
 

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,19 +19,19 @@
 				: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">
 			<span
 				v-if="typeof props.option === 'string'"
-				class="tag">
+				class="tag search-result">
 				<span>{{ props.option }}</span>
 			</span>
 			<span
 				v-else
 				:style="{'background': props.option.hexColor, 'color': props.option.textColor}"
-				class="tag">
+				class="tag search-result">
 				<span>{{ props.option.title }}</span>
 			</span>
 		</template>
@@ -114,23 +114,17 @@ export default {
 		},
 
 		async removeLabel(label) {
-			const removeFromState = () => {
-				for (const l in this.labels) {
-					if (this.labels[l].id === label.id) {
-						this.labels.splice(l, 1)
-					}
+			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)
 				}
-				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.$emit('update:modelValue', this.labels)
+			this.$emit('change', this.labels)
 			this.$message.success({message: this.$t('task.label.removeSuccess')})
 		},
 
@@ -152,6 +146,18 @@ export default {
 
 <style lang="scss" scoped>
 .tag {
-	margin: .5rem 0 0 .5rem;
+	margin: .25rem !important;
+}
+
+.tag.search-result {
+	margin: 0 !important;
+}
+
+:deep(.input-wrapper) {
+	padding: .25rem !important;
+}
+
+:deep(input.input) {
+	padding: 0 .5rem;
 }
 </style>

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">
@@ -28,9 +28,9 @@
 			<span class="icon">
 				<icon :icon="['far', 'calendar-alt']"/>
 			</span>
-			<span>
+			<time :datetime="formatISO(task.dueDate)">
 				{{ formatDateSince(task.dueDate) }}
-			</span>
+			</time>
 		</span>
 		<h3>{{ task.title }}</h3>
 		<progress
@@ -104,17 +104,25 @@ export default {
 		async toggleTaskDone(task) {
 			this.loadingInternal = true
 			try {
+				const done = !task.done
 				await this.$store.dispatch('tasks/update', {
 					...task,
-					done: !task.done,
+					done,
 				})
-				if (task.done) {
+				if (done) {
 					playPop()
 				}
 			} finally {
 				this.loadingInternal = false
 			}
 		},
+		openTaskDetail() {
+			this.$router.push({
+				name: 'task.detail',
+				params: { id: this.task.id },
+				state: { backdropView: this.$router.currentRoute.value.fullPath },
+			})
+		},
 	},
 }
 </script>
@@ -131,7 +139,6 @@ $task-background: var(--white);
 	border: 3px solid transparent;
 
 	font-size: .9rem;
-	margin: .5rem;
 	padding: .4rem;
 	border-radius: $radius;
 	background: $task-background;

src/components/tasks/partials/relatedTasks.vue

@@ -1,7 +1,7 @@
 <template>
 	<div class="task-relations">
 		<x-button
-			v-if="Object.keys(relatedTasks).length > 0"
+			v-if="editEnabled && Object.keys(relatedTasks).length > 0"
 			@click="showNewRelationForm = !showNewRelationForm"
 			class="is-pulled-right add-task-relation-button"
 			:class="{'is-active': showNewRelationForm}"
@@ -83,7 +83,8 @@
 			<span class="title">{{ rts.title }}</span>
 			<div class="tasks">
 				<div :key="t.id" class="task" v-for="t in rts.tasks">
-					<router-link :to="{ name: $route.name, params: { id: t.id } }" :class="{ 'done': t.done}">
+					<router-link :to="{ name: $route.name, params: { id: t.id } }"
+								 :class="{ 'is-strikethrough': t.done}">
 						<span
 							class="different-list"
 							v-if="t.listId !== listId"
@@ -156,6 +157,7 @@ export default {
 			relationToDelete: {},
 			saved: false,
 			showNewRelationForm: false,
+			query: '',
 		}
 	},
 	components: {
@@ -211,10 +213,20 @@ export default {
 	},
 	methods: {
 		async findTasks(query) {
+			this.query = query
 			this.foundTasks = await this.taskService.getAll({}, {s: query})
 		},
 
 		async addTaskRelation() {
+			if (this.newTaskRelationTask.id === 0 && this.query !== '') {
+				return this.createAndRelateTask(this.query)
+			}
+
+			if (this.newTaskRelationTask.id === 0) {
+				this.$message.error({message: this.$t('task.relation.taskRequired')})
+				return
+			}
+
 			const rel = new TaskRelationModel({
 				taskId: this.taskId,
 				otherTaskId: this.newTaskRelationTask.id,
@@ -274,10 +286,11 @@ export default {
 			return tasks
 				.map(task => {
 					// by doing this here once we can save a lot of duplicate calls in the template
+					const listAndNamespace = this.$store.getters['namespaces/getListAndNamespaceById'](task.listId, true)
 					const {
 						list,
 						namespace,
-					} = this.$store.getters['namespaces/getListAndNamespaceById'](task.listId, true)
+					} = listAndNamespace === null ? {list: null, namespace: null} : listAndNamespace
 
 					return {
 						...task,
@@ -364,4 +377,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>
@@ -39,14 +39,17 @@
 				:user="a"
 				v-for="(a, i) in task.assignees"
 			/>
-			<i
+			<time
+				:datetime="formatISO(task.dueDate)"
 				:class="{'overdue': task.dueDate <= new Date() && !task.done}"
+				class="is-italic"
 				@click.prevent.stop="showDefer = !showDefer"
 				v-if="+new Date(task.dueDate) > 0"
 				v-tooltip="formatDate(task.dueDate)"
+				:aria-expanded="showDefer ? 'true' : 'false'"
 			>
 				- {{ $t('task.detail.due', {at: formatDateSince(task.dueDate)}) }}
-			</i>
+			</time>
 			<transition name="fade">
 				<defer-task v-if="+new Date(task.dueDate) > 0 && showDefer" v-model="task" ref="deferDueDate"/>
 			</transition>
@@ -126,10 +129,6 @@ export default {
 			type: Boolean,
 			default: false,
 		},
-		taskDetailRoute: {
-			type: String,
-			default: 'task.list.detail',
-		},
 		showList: {
 			type: Boolean,
 			default: false,
@@ -167,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) {
@@ -183,10 +190,7 @@ export default {
 						this.$t('task.undoneSuccess'),
 				}, [{
 					title: 'Undo',
-					callback() {
-						this.task.done = !this.task.done
-						this.markAsDone(!checked)
-					},
+					callback: () => this.undoDone(checked),
 				}])
 			}
 
@@ -196,6 +200,11 @@ export default {
 				await updateFunc() // Don't delay it when un-marking it as it doesn't have an animation the other way around
 			}
 		},
+		
+		undoDone(checked) {
+			this.task.done = !this.task.done
+			this.markAsDone(!checked)
+		},
 
 		async toggleFavorite() {
 			this.task.isFavorite = !this.task.isFavorite

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>
-export default {
-	name: 'sort',
-	props: {
-		order: {
-			type: String,
-			default: 'none',
-		},
+<script setup lang="ts">
+import {PropType} from 'vue'
+import BaseButton from '@/components/base/BaseButton.vue'
+
+type Order = 'asc' | 'desc' | 'none'
+
+defineProps({
+	order: {
+		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/useColorScheme.ts

@@ -1,9 +1,9 @@
 import {computed, watch, readonly} from 'vue'
-import {useStorage, createSharedComposable, ColorSchema, usePreferredColorScheme, tryOnMounted} from '@vueuse/core'
+import {useStorage, createSharedComposable, BasicColorSchema, usePreferredColorScheme, tryOnMounted} from '@vueuse/core'
 
 const STORAGE_KEY = 'color-scheme'
 
-const DEFAULT_COLOR_SCHEME_SETTING: ColorSchema = 'light'
+const DEFAULT_COLOR_SCHEME_SETTING: BasicColorSchema = 'light'
 
 const CLASS_DARK = 'dark'
 const CLASS_LIGHT = 'light'
@@ -16,7 +16,7 @@ const CLASS_LIGHT = 'light'
 // - value is synced via `createSharedComposable`
 // https://github.com/vueuse/vueuse/blob/main/packages/core/useDark/index.ts 
 export const useColorScheme = createSharedComposable(() => {
-	const store = useStorage<ColorSchema>(STORAGE_KEY, DEFAULT_COLOR_SCHEME_SETTING)
+	const store = useStorage<BasicColorSchema>(STORAGE_KEY, DEFAULT_COLOR_SCHEME_SETTING)
 
 	const preferredColorScheme = usePreferredColorScheme()
 

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

@@ -1,4 +1,4 @@
-import {HTTPFactory} from '@/http-common'
+import {AuthenticatedHTTPFactory} from '@/http-common'
 import {AxiosResponse} from 'axios'
 
 let savedToken: string | null = null
@@ -6,8 +6,6 @@ let savedToken: string | null = null
 /**
  * Saves a token while optionally saving it to lacal storage. This is used when viewing a link share:
  * It enables viewing multiple link shares indipendently from each in multiple tabs other without overriding any other open ones.
- * @param token
- * @param persist
  */
 export const saveToken = (token: string, persist: boolean) => {
 	savedToken = token
@@ -18,7 +16,6 @@ export const saveToken = (token: string, persist: boolean) => {
 
 /**
  * Returns a saved token. If there is one saved in memory it will use that before anything else.
- * @returns {string|null}
  */
 export const getToken = (): string | null => {
 	if (savedToken !== null) {
@@ -39,20 +36,16 @@ export const removeToken = () => {
 
 /**
  * Refreshes an auth token while ensuring it is updated everywhere.
- * @returns {Promise<AxiosResponse<any>>}
  */
 export async function refreshToken(persist: boolean): Promise<AxiosResponse> {
-	const HTTP = HTTPFactory()
+	const HTTP = AuthenticatedHTTPFactory()
 	try {
-		const response = await HTTP.post('user/token', null, {
-			headers: {
-				Authorization: `Bearer ${getToken()}`,
-			},
-		})
+		const response = await HTTP.post('user/token')
 		saveToken(response.data.token, persist)
 		return response
 
 	} catch(e) {
+		// @ts-ignore
 		throw new Error('Error renewing token: ', { cause: e })
 	}
 }

src/helpers/isEmail.ts

@@ -0,0 +1,6 @@
+export function isEmail(email: string): Boolean {
+	const format = /^.+@.+$/
+	const match = email.match(format)
+
+	return match === null ? false : match.length > 0
+}

src/helpers/playPop.ts

@@ -3,11 +3,15 @@ import popSoundFile from '@/assets/audio/pop.mp3'
 export const playSoundWhenDoneKey = 'playSoundWhenTaskDone'
 
 export function playPop() {
-	const enabled = Boolean(localStorage.getItem(playSoundWhenDoneKey))
-	if(!enabled) {
+	const enabled = localStorage.getItem(playSoundWhenDoneKey) === 'true'
+	if (!enabled) {
 		return
 	}
 
+	playPopSound()
+}
+
+export function playPopSound() {
 	const popSound = new Audio(popSoundFile)
 	popSound.play()
-}
+}

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/helpers/time/formatDate.js

@@ -1,5 +1,5 @@
 import {createDateFromString} from '@/helpers/time/createDateFromString'
-import {format, formatDistanceToNow} from 'date-fns'
+import {format, formatDistanceToNow, formatISO as formatISOfns} from 'date-fns'
 import {enGB, de, fr, ru} from 'date-fns/locale'
 
 import {i18n} from '@/i18n'
@@ -44,3 +44,7 @@ export const formatDateSince = (date) => {
 		addSuffix: true,
 	})
 }
+
+export function formatISO(date) {
+	return date ? formatISOfns(date) : ''
+}

src/helpers/time/getNextWeekDate.ts

@@ -0,0 +1,3 @@
+export function getNextWeekDate(): Date {
+	return new Date((new Date()).getTime() + 7 * 24 * 60 * 60 * 1000)
+}

src/helpers/time/parseDate.ts

@@ -288,7 +288,7 @@ const getDateFromWeekday = (text: string): dateFoundResult => {
 }
 
 const getDayFromText = (text: string) => {
-	const matcher = /(([1-2][0-9])|(3[01])|(0?[1-9]))(st|nd|rd|th|\.)/ig
+	const matcher = /($| )(([1-2][0-9])|(3[01])|(0?[1-9]))(st|nd|rd|th|\.)($| )/ig
 	const results = matcher.exec(text)
 	if (results === null) {
 		return {
@@ -302,17 +302,17 @@ const getDayFromText = (text: string) => {
 	const day = parseInt(results[0])
 	date.setDate(day)
 
-	// If the parsed day is the 31st but the next month only has 30 days, setting the day to 31 will "overflow" the
-	// date to the next month, but the first.
+	// If the parsed day is the 31st (or 29+ and the next month is february) but the next month only has 30 days, 
+	// setting the day to 31 will "overflow" the date to the next month, but the first.
 	// This would look like a very weired bug. Now, to prevent that, we check if the day is the same as parsed after 
 	// setting it for the first time and set it again if it isn't - that would mean the month overflowed.
-	if (day === 31 && date.getDate() !== day) {
-		date.setDate(day)
-	}
-
-	if (date < now) {
+	while (date < now) {
 		date.setMonth(date.getMonth() + 1)
 	}
+	
+	if (date.getDate() !== day) {
+		date.setDate(day)
+	}
 
 	return {
 		foundText: results[0],

src/helpers/time/parseDateOrString.ts

@@ -0,0 +1,12 @@
+export function parseDateOrString(rawValue: string | undefined, fallback: any): string | Date {
+	if (typeof rawValue === 'undefined') {
+		return fallback
+	}
+
+	const d = new Date(rawValue)
+
+	// @ts-ignore if rawValue is an invalid date, isNan will return false.
+	return !isNaN(d)
+		? d
+		: rawValue
+}

src/http-common/index.js

@@ -1,7 +1,18 @@
 import axios from 'axios'
+import {getToken} from '@/helpers/auth'
 
-export const HTTPFactory = () => {
+export function HTTPFactory() {
 	return axios.create({
 		baseURL: window.API_URL,
 	})
 }
+
+export function AuthenticatedHTTPFactory(token = getToken()) {	
+	return axios.create({
+		baseURL: window.API_URL,
+		headers: {
+			Authorization: `Bearer ${token}`,
+			'Content-Type': 'application/json',
+		},
+	})
+}

src/i18n/index.js

@@ -1,4 +1,4 @@
-import { createI18n } from 'vue-i18n'
+import {createI18n} from 'vue-i18n'
 import langEN from './lang/en.json'
 
 export const i18n = createI18n({
@@ -19,6 +19,9 @@ export const availableLanguages = {
 	'vi-VN': 'Tiếng Việt',
 	'it-IT': 'Italiano',
 	'cs-CZ': 'Čeština',
+	'pl-PL': 'Polski',
+	'nl-NL': 'Nederlands',
+	'pt-PT': 'Português',
 }
 
 const loadedLanguages = ['en'] // our default language that is preloaded
@@ -30,6 +33,10 @@ const setI18nLanguage = lang => {
 }
 
 export const loadLanguageAsync = lang => {
+	if (!lang) {
+		return
+	}
+
 	if (
 		// If the same language
 		i18n.global.locale === lang ||

src/i18n/lang/cs-CZ.json

@@ -31,10 +31,9 @@
       "username": "Uživatelské jméno",
       "usernameEmail": "Uživatelské jméno nebo e-mail",
       "usernamePlaceholder": "např. Jarmil",
-      "email": "E-mailová adresa",
+      "email": "Email address",
       "emailPlaceholder": "např. jarmil{'@'}vikunja.io",
       "password": "Heslo",
-      "passwordRepeat": "Zopakovat heslo",
       "passwordPlaceholder": "např. • • • • • • • •",
       "forgotPassword": "Zapomenuté heslo?",
       "resetPassword": "Obnovit heslo",
@@ -45,12 +44,20 @@
       "totpTitle": "Kód dvoufaktorového ověření",
       "totpPlaceholder": "např. 123456",
       "login": "Přihlásit se",
-      "register": "Registrovat",
+      "createAccount": "Create account",
       "loginWith": "Přihlásit se pomocí {provider}",
       "authenticating": "Ověřování…",
       "openIdStateError": "Stav neodpovídá, odmítám pokračovat!",
       "openIdGeneralError": "Došlo k chybě při ověřování proti třetí straně.",
-      "logout": "Odhlásit se"
+      "logout": "Odhlásit se",
+      "emailInvalid": "Please enter a valid email address.",
+      "usernameRequired": "Please provide a username.",
+      "passwordRequired": "Please provide a password.",
+      "showPassword": "Show the password",
+      "hidePassword": "Hide the password",
+      "noAccountYet": "Don't have an account yet?",
+      "alreadyHaveAnAccount": "Already have an account?",
+      "remember": "Stay logged in"
     },
     "settings": {
       "title": "Nastavení",
@@ -61,7 +68,7 @@
       "currentPasswordPlaceholder": "Vaše současné heslo",
       "passwordsDontMatch": "Nové heslo se neshoduje s potvrzením hesla.",
       "passwordUpdateSuccess": "Heslo bylo úspěšně změněno.",
-      "updateEmailTitle": "Aktualizovat Vaši e-mailovou adresu",
+      "updateEmailTitle": "Update Your Email Address",
       "updateEmailNew": "Nová e-mailová adresa",
       "updateEmailSuccess": "Vaše e-mailová adresa byla úspěšně aktualizována. Poslali jsme vám odkaz pro její potvrzení.",
       "general": {
@@ -78,7 +85,8 @@
         "weekStartSunday": "Neděle",
         "weekStartMonday": "Pondělí",
         "language": "Jazyk",
-        "defaultList": "Výchozí seznam"
+        "defaultList": "Výchozí seznam",
+        "timezone": "Time Zone"
       },
       "totp": {
         "title": "Dvoufaktorové ověření",
@@ -327,6 +335,7 @@
       "archiveText": "Nebudete moci upravovat tento jmenný prostor ani vytvářet nové seznamy, dokud jej neodarchivujete. Všechny seznamy v tomto prostoru budou také archivovány.",
       "unarchiveText": "Budete moci vytvářet nové úkoly nebo je upravovat.",
       "success": "Prostor byl úspěšně archivován.",
+      "unarchiveSuccess": "The namespace was successfully un-archived.",
       "description": "Pokud je prostor archivován, nelze vytvořit nové seznamy nebo je upravit."
     },
     "delete": {
@@ -376,7 +385,7 @@
       "showDoneTasks": "Zobrazit dokončené úkoly",
       "sortAlphabetically": "Řadit podle abecedy",
       "enablePriority": "Povolit filtrování podle priority",
-      "enablePercentDone": "Povolit filtrování dle dokončenosti",
+      "enablePercentDone": "Enable Filter By Progress",
       "dueDateRange": "Rozsah termínu",
       "startDateRange": "Začátek období",
       "endDateRange": "Konec období",
@@ -476,7 +485,8 @@
     "showMenu": "Zobrazit nabídku",
     "hideMenu": "Skrýt nabídku",
     "forExample": "Například:",
-    "welcomeBack": "Vítejte zpět!"
+    "welcomeBack": "Vítejte zpět!",
+    "custom": "Custom"
   },
   "input": {
     "resetColor": "Obnovit barvu",
@@ -515,6 +525,57 @@
     "multiselect": {
       "createPlaceholder": "Vytvořit nový",
       "selectPlaceholder": "Kliknutím nebo stisknutím klávesy Enter vyberte"
+    },
+    "datepickerRange": {
+      "to": "To",
+      "from": "From",
+      "fromto": "{from} to {to}",
+      "ranges": {
+        "today": "Today",
+        "thisWeek": "This Week",
+        "restOfThisWeek": "The Rest of This Week",
+        "nextWeek": "Next Week",
+        "next7Days": "Next 7 Days",
+        "lastWeek": "Last Week",
+        "thisMonth": "This Month",
+        "restOfThisMonth": "The Rest of This Month",
+        "nextMonth": "Next Month",
+        "next30Days": "Next 30 Days",
+        "lastMonth": "Last Month",
+        "thisYear": "This Year",
+        "restOfThisYear": "The Rest of This Year"
+      }
+    },
+    "datemathHelp": {
+      "canuse": "You can use date math to filter for relative dates.",
+      "learnhow": "Check out how it works",
+      "title": "Date Math",
+      "intro": "Date Math allows you to specifiy relative dates which are resolved on the fly by Vikunja when applying the filter.",
+      "expression": "Each Date Math expression starts with an anchor date, which can either be {0}, or a date string ending with {1}. This anchor date can optionally be followed by one or more maths expressions.",
+      "similar": "These expressions are similar to the ones provided by {0} and {1}.",
+      "add1Day": "Add one day",
+      "minus1Day": "Subtract one day",
+      "roundDay": "Round down to the nearest day",
+      "supportedUnits": "Supported time units are:",
+      "someExamples": "Some examples of time expressions:",
+      "units": {
+        "seconds": "Seconds",
+        "minutes": "Minutes",
+        "hours": "Hours",
+        "days": "Days",
+        "weeks": "Weeks",
+        "months": "Months",
+        "years": "Years"
+      },
+      "examples": {
+        "now": "Right now",
+        "in24h": "In 24h",
+        "today": "Today at 00:00",
+        "beginningOfThisWeek": "The beginning of this week at 00:00",
+        "endOfThisWeek": "The end of this week",
+        "in30Days": "In 30 days",
+        "datePlusMonth": "{0} plus one month at 00:00 of that day"
+      }
     }
   },
   "task": {
@@ -532,12 +593,9 @@
       "titleCurrent": "Aktuální úkoly",
       "titleDates": "Úkoly od {from} do {to}",
       "noDates": "Zobrazit úkoly bez datumu",
-      "current": "Aktuální úkoly",
-      "from": "Úkoly od",
-      "until": "do",
-      "today": "Dnes",
-      "nextWeek": "Příští týden",
-      "nextMonth": "Příští měsíc",
+      "overdue": "Show overdue tasks",
+      "fromuntil": "Tasks from {from} until {until}",
+      "select": "Select a date range",
       "noTasks": "Nic na práci - užij si pěkný den!"
     },
     "detail": {
@@ -561,22 +619,22 @@
         "text2": "Tímto také odstraníte všechny přílohy, připomenutí a vztahy spojené s tímto úkolem a nelze je vrátit zpět!"
       },
       "actions": {
-        "assign": "Přiřadit uživateli",
-        "label": "Přidat štítky",
+        "assign": "Assign to User",
+        "label": "Add Labels",
         "priority": "Nastavit prioritu",
         "dueDate": "Nastavit termín",
-        "startDate": "Nastavit počáteční datum",
-        "endDate": "Nastavit koncové datum",
+        "startDate": "Set Start Date",
+        "endDate": "Set End Date",
         "reminders": "Nastavit připomenutí",
-        "repeatAfter": "Nastavit interval opakování",
-        "percentDone": "Nastavit procenta dokončeno",
-        "attachments": "Přidat přílohy",
-        "relatedTasks": "Přidat vztahy úkolu",
-        "moveList": "Přesunout úkol",
-        "color": "Nastavit barvu úkolu",
-        "delete": "Smazat úkol",
-        "favorite": "Uložit jako oblíbené",
-        "unfavorite": "Odebrat z oblíbených"
+        "repeatAfter": "Set Repeating Interval",
+        "percentDone": "Set Progress",
+        "attachments": "Add Attachments",
+        "relatedTasks": "Add Relation",
+        "moveList": "Move",
+        "color": "Set Color",
+        "delete": "Delete",
+        "favorite": "Add to Favorites",
+        "unfavorite": "Remove from Favorites"
       }
     },
     "attributes": {
@@ -589,7 +647,7 @@
       "dueDate": "Termín",
       "endDate": "Datum ukončení",
       "labels": "Štítky",
-      "percentDone": "% Hotovo",
+      "percentDone": "Progress",
       "priority": "Priorita",
       "relatedTasks": "Související úkoly",
       "reminders": "Připomínky",
@@ -776,17 +834,20 @@
     "general": "Obecné",
     "allPages": "Tyto zkratky fungují na všech stránkách.",
     "currentPageOnly": "Tyto zkratky fungují pouze na aktuální stránce.",
+    "somePagesOnly": "These shortcuts work only on some pages.",
     "toggleMenu": "Přepnout nabídku",
     "quickSearch": "Otevřít vyhledávání / panel rychlých akcí",
     "then": "potom",
     "task": {
       "title": "Stránka úkolů",
-      "done": "Hotovo",
-      "assign": "Přiřadit uživateli",
+      "done": "Mark task done / undone",
+      "assign": "Assign this task to a user",
       "labels": "Přidat štítky k tomuto úkolu",
       "dueDate": "Změnit termín tohoto úkolu",
       "attachment": "Přidat přílohu k tomuto úkolu",
-      "related": "Upravit související úkoly tohoto úkolu"
+      "related": "Upravit související úkoly tohoto úkolu",
+      "color": "Change the color of this task",
+      "move": "Move this task to another list"
     },
     "list": {
       "title": "Zobrazení seznamů",
@@ -794,6 +855,14 @@
       "switchToGanttView": "Přepnout na zobrazení gantt",
       "switchToKanbanView": "Přepnout na zobrazení kanbanu",
       "switchToTableView": "Přepnout na zobrazení tabulky"
+    },
+    "navigation": {
+      "title": "Navigation",
+      "overview": "Navigato to overview",
+      "upcoming": "Navigato to upcoming taks",
+      "namespaces": "Navigate to namepaces & lists",
+      "labels": "Navigate to labels",
+      "teams": "Navigate to teams"
     }
   },
   "update": {

src/i18n/lang/de-DE.json

@@ -7,7 +7,7 @@
     "lastViewed": "Zuletzt angesehen",
     "list": {
       "newText": "Du kannst eine neue Liste für deine neuen Aufgaben erstellen:",
-      "new": "New list",
+      "new": "Neue Liste",
       "importText": "Oder importiere deine Listen und Aufgaben aus anderen Diensten in Vikunja:",
       "import": "Deine Daten in Vikunja importieren"
     }
@@ -34,7 +34,6 @@
       "email": "E-Mail-Adresse",
       "emailPlaceholder": "z.B. frederic{'@'}vikunja.io",
       "password": "Passwort",
-      "passwordRepeat": "Gib dein Passwort erneut ein",
       "passwordPlaceholder": "z.B. •••••••••••",
       "forgotPassword": "Passwort vergessen?",
       "resetPassword": "Setze dein Passwort zurück",
@@ -45,12 +44,20 @@
       "totpTitle": "Zwei-Faktor-Authentifizierungscode",
       "totpPlaceholder": "z.B. 123456",
       "login": "Anmelden",
-      "register": "Registrieren",
+      "createAccount": "Account erstellen",
       "loginWith": "Mit {provider} anmelden",
       "authenticating": "Authentifizierung…",
       "openIdStateError": "Zustand stimmt nicht überein, fahre nicht fort!",
       "openIdGeneralError": "Es ist ein Fehler bei der externen Authentisierung aufgetreten.",
-      "logout": "Abmelden"
+      "logout": "Abmelden",
+      "emailInvalid": "Bitte gib eine gültige E-Mail-Adresse ein.",
+      "usernameRequired": "Bitte gib einen Anmeldenamen ein.",
+      "passwordRequired": "Bitte gib ein Passwort ein.",
+      "showPassword": "Passwort anzeigen",
+      "hidePassword": "Passwort verbergen",
+      "noAccountYet": "Noch kein Account?",
+      "alreadyHaveAnAccount": "Hast du bereits einen Account?",
+      "remember": "Angemeldet bleiben"
     },
     "settings": {
       "title": "Einstellungen",
@@ -78,7 +85,8 @@
         "weekStartSunday": "Sonntag",
         "weekStartMonday": "Montag",
         "language": "Sprache",
-        "defaultList": "Standard-Liste"
+        "defaultList": "Standard-Liste",
+        "timezone": "Zeitzone"
       },
       "totp": {
         "title": "Zwei-Faktor-Authentifizierung",
@@ -157,7 +165,7 @@
     "searchSelect": "Klicke auf oder drücke die Eingabetaste, um diese Liste auszuwählen",
     "shared": "Geteilte Listen",
     "create": {
-      "header": "New list",
+      "header": "Neue Liste",
       "titlePlaceholder": "Der Titel der Liste steht hier…",
       "addTitleRequired": "Bitte gebe einen Namen an.",
       "createdSuccess": "Die Liste wurde erfolgreich erstellt.",
@@ -315,7 +323,7 @@
     "namespaces": "Namespaces",
     "search": "Beginne zu schreiben, um einen Namespace zu suchen…",
     "create": {
-      "title": "New namespace",
+      "title": "Neuer Namespace",
       "titleRequired": "Bitte gebe einen Titel an.",
       "explanation": "Ein Namespace ist eine Sammlung von Listen, die du teilen und zur Organisation verwenden kannst. Jede Liste zu einem Namespace.",
       "tooltip": "Was ist ein Namespace?",
@@ -327,6 +335,7 @@
       "archiveText": "Du kannst diesen Namespace nicht mehr bearbeiten oder neue Listen erstellen, bis du die Archivierung rückgängig machst. Das gilt auch für alle Listen in diesem Namespace.",
       "unarchiveText": "Du kannst neue Aufgaben erstellen oder diese bearbeiten.",
       "success": "Der Namespace wurde erfolgreich archiviert.",
+      "unarchiveSuccess": "Der Namespace wurde erfolgreich wiederhergestellt.",
       "description": "In einem archivierten Namespace können Listen weder angelegt noch editiert werden."
     },
     "delete": {
@@ -376,14 +385,14 @@
       "showDoneTasks": "Erledigte Aufgaben anzeigen",
       "sortAlphabetically": "Alphabetisch sortieren",
       "enablePriority": "Filter nach Priorität aktivieren",
-      "enablePercentDone": "Filter nach % Erledigt aktivieren",
+      "enablePercentDone": "Filter nach Fortschritt aktivieren",
       "dueDateRange": "Fälligkeitsbereich",
       "startDateRange": "Startdatumsbereich",
       "endDateRange": "Enddatumsbereich",
       "reminderRange": "Erinnerungs-Datumsbereich"
     },
     "create": {
-      "title": "New Saved Filter",
+      "title": "Neuer gespeicherter Filter",
       "description": "Ein gespeicherter Filter ist eine virtuelle Liste, die bei jedem Zugriff aus einem Satz von Filtern errechnet wird. Einmal erstellt, erscheint diese in einem speziellen Namespace.",
       "action": "Neuen gespeicherten Filter erstellen"
     },
@@ -476,7 +485,8 @@
     "showMenu": "Menü anzeigen",
     "hideMenu": "Menü ausblenden",
     "forExample": "Zum Beispiel:",
-    "welcomeBack": "Willkommen zurück!"
+    "welcomeBack": "Willkommen zurück!",
+    "custom": "Benutzerdefiniert"
   },
   "input": {
     "resetColor": "Farbe zurücksetzen",
@@ -515,6 +525,57 @@
     "multiselect": {
       "createPlaceholder": "Neu erstellen",
       "selectPlaceholder": "Klicken oder Enter drücken zum Auswählen"
+    },
+    "datepickerRange": {
+      "to": "Bis",
+      "from": "Von",
+      "fromto": "{from} bis {to}",
+      "ranges": {
+        "today": "Heute",
+        "thisWeek": "Diese Woche",
+        "restOfThisWeek": "Der Rest dieser Woche",
+        "nextWeek": "Nächste Woche",
+        "next7Days": "Nächsten 7 Tage",
+        "lastWeek": "Letzte Woche",
+        "thisMonth": "Dieser Monat",
+        "restOfThisMonth": "Der Rest dieses Monats",
+        "nextMonth": "Nächster Monat",
+        "next30Days": "Nächsten 30 Tage",
+        "lastMonth": "Letzter Monat",
+        "thisYear": "Dieses Jahr",
+        "restOfThisYear": "Der Rest des Jahres"
+      }
+    },
+    "datemathHelp": {
+      "canuse": "Du kannst Datumsberechnung verwenden, um nach relativen Daten zu filtern.",
+      "learnhow": "Sieh dir an, wie es funktioniert",
+      "title": "Datumsberechnung",
+      "intro": "Die Datumsberechnung erlaubt es, relative Daten anzugeben, die bei der Anwendung des Filters von Vikunja aufgelöst werden.",
+      "expression": "Jeder Ausdruck der Datumsberechnung beginnt mit einem Datumswert, welcher entweder {0} sein kann oder mit {1} endet. Auf diesen Datumswert kann optional ein oder mehrere mathematische Ausdrücke folgen.",
+      "similar": "Diese Ausdrücke ähneln denen von {0} und {1}.",
+      "add1Day": "Einen Tag hinzufügen",
+      "minus1Day": "Einen Tag abziehen",
+      "roundDay": "Auf den nächsten Tag abrunden",
+      "supportedUnits": "Unterstützte Zeiteinheiten sind:",
+      "someExamples": "Einige Beispiele für Zeitausdrücke:",
+      "units": {
+        "seconds": "Sekunden",
+        "minutes": "Minuten",
+        "hours": "Stunden",
+        "days": "Tage",
+        "weeks": "Wochen",
+        "months": "Monate",
+        "years": "Jahre"
+      },
+      "examples": {
+        "now": "Jetzt",
+        "in24h": "In 24 Stunden",
+        "today": "Heute um 00:00 Uhr",
+        "beginningOfThisWeek": "Der Anfang dieser Woche um 00:00 Uhr",
+        "endOfThisWeek": "Das Ende dieser Woche",
+        "in30Days": "In 30 Tagen",
+        "datePlusMonth": "{0} plus einen Monat um 00:00 des Tages"
+      }
     }
   },
   "task": {
@@ -532,12 +593,9 @@
       "titleCurrent": "Aktuelle Aufgaben",
       "titleDates": "Aufgaben von {from} bis {to}",
       "noDates": "Aufgaben ohne Datum anzeigen",
-      "current": "Aktuelle Aufgaben",
-      "from": "Aufgaben von",
-      "until": "bis",
-      "today": "Heute",
-      "nextWeek": "Nächste Woche",
-      "nextMonth": "Nächster Monat",
+      "overdue": "Überfällige Aufgaben anzeigen",
+      "fromuntil": "Aufgaben von {from} bis {until}",
+      "select": "Datumsbereich wählen",
       "noTasks": "Nichts zu tun – Einen schönen Tag noch!"
     },
     "detail": {
@@ -545,7 +603,7 @@
       "chooseStartDate": "Klicke hier, um ein Startdatum zu setzen",
       "chooseEndDate": "Klicke hier, um ein Enddatum zu setzen",
       "move": "Aufgabe in eine andere Liste verschieben",
-      "done": "Mark task done!",
+      "done": "Als erledigt markieren!",
       "undone": "Als nicht erledigt markieren",
       "created": "Erstellt {0} von {1}",
       "updated": "Aktualisiert {0}",
@@ -569,13 +627,13 @@
         "endDate": "Enddatum setzen",
         "reminders": "Erinnerungen setzen",
         "repeatAfter": "Wiederholung setzen",
-        "percentDone": "Prozent erledigt setzen",
+        "percentDone": "Fortschritt einstellen",
         "attachments": "Anhänge hinzufügen",
-        "relatedTasks": "Aufgabenbeziehungen hinzufügen",
-        "moveList": "Aufgabe verschieben",
-        "color": "Taskfarbe setzen",
-        "delete": "Aufgabe löschen",
-        "favorite": "In Favoriten speichern",
+        "relatedTasks": "Beziehung hinzufügen",
+        "moveList": "Verschieben",
+        "color": "Farbe setzen",
+        "delete": "Löschen",
+        "favorite": "Zu Favoriten hinzufügen",
         "unfavorite": "Aus Favoriten entfernen"
       }
     },
@@ -589,7 +647,7 @@
       "dueDate": "Fälligkeitsdatum",
       "endDate": "Enddatum",
       "labels": "Labels",
-      "percentDone": "% erledigt",
+      "percentDone": "Fortschritt",
       "priority": "Priorität",
       "relatedTasks": "Verwandte Aufgaben",
       "reminders": "Erinnerungen",
@@ -776,17 +834,20 @@
     "general": "Allgemein",
     "allPages": "Diese Tastenkürzel funktionieren auf allen Seiten.",
     "currentPageOnly": "Diese Tastenkürzel funktionieren nur auf der aktuellen Seite.",
+    "somePagesOnly": "Funktioniert nur auf manchen Seiten.",
     "toggleMenu": "Das Menü umschalten",
     "quickSearch": "Such-/Schnellaktionsleiste öffnen",
     "then": "dann",
     "task": {
       "title": "Aufgabenseite",
-      "done": "Done",
-      "assign": "Benutzer:in zuweisen",
+      "done": "Aufgabe als erledigt / unerledigt markieren",
+      "assign": "Diese Aufgabe jemandem zuweisen",
       "labels": "Dieser Aufgabe ein Label hinzufügen",
       "dueDate": "Ändere das Fälligkeitsdatum dieser Aufgabe",
       "attachment": "Einen Anhang dieser Aufgabe hinzufügen",
-      "related": "Ändere die Abhängigen Aufgaben dieser Aufgabe"
+      "related": "Ändere die Abhängigen Aufgaben dieser Aufgabe",
+      "color": "Die Farbe dieser Aufgabe ändern",
+      "move": "Diese Aufgabe in eine andere Liste verschieben"
     },
     "list": {
       "title": "Listenansicht",
@@ -794,6 +855,14 @@
       "switchToGanttView": "Zur Ganttansicht wechseln",
       "switchToKanbanView": "Zur Kanbanansicht wechseln",
       "switchToTableView": "Zur Tabellenansicht wechseln"
+    },
+    "navigation": {
+      "title": "Navigation",
+      "overview": "Die Startseite aufrufen",
+      "upcoming": "Anstehende Aufgaben aufrufen",
+      "namespaces": "Namespaces & Listen aufrufen",
+      "labels": "Labels aufrufen",
+      "teams": "Teams aufrufen"
     }
   },
   "update": {
@@ -899,7 +968,7 @@
     "4015": "Dieser Aufgabenkommentar existiert nicht.",
     "4016": "Ungültiges Aufgabenfeld.",
     "4017": "Ungültiger Aufgabenfilter (Vergleichskriterium).",
-    "4018": "Invalid task filter concatenator.",
+    "4018": "Ungültige Verkettung von Aufgabenfiltern.",
     "4019": "Ungültiger Aufgabenfilter (Wert).",
     "5001": "Dieser Namespace existiert nicht.",
     "5003": "Du hast keinen Zugriff auf den Namespace.",

src/i18n/lang/de-swiss.json

@@ -7,7 +7,7 @@
     "lastViewed": "Zletscht ahglueget",
     "list": {
       "newText": "Du chasch e Liste für dini neue Uufgabe erstelle:",
-      "new": "New list",
+      "new": "Neue Liste",
       "importText": "Oder importier dini Liste und Uufgabe us anderne Dienst nach Vikunja:",
       "import": "Dini Date in Vikunja importiere"
     }
@@ -31,10 +31,9 @@
       "username": "Benutzernamä",
       "usernameEmail": "Benutzernamä oder E-Mail Adrässe",
       "usernamePlaceholder": "z.B. Hansruedi",
-      "email": "E-Mail Adrässe",
+      "email": "E-Mail-Adresse",
       "emailPlaceholder": "z.B. frederic{'@'}vikunja.io",
       "password": "Passwort",
-      "passwordRepeat": "Gib dis Passwort nomal iih",
       "passwordPlaceholder": "z.B. •••••••••••",
       "forgotPassword": "Passwort vergessen?",
       "resetPassword": "Setz diis Passwort zrugg",
@@ -45,12 +44,20 @@
       "totpTitle": "Zweifaktor Authentifizierigs Ziffere",
       "totpPlaceholder": "z.B. 123456",
       "login": "Iihlogge",
-      "register": "Registriere",
+      "createAccount": "Account erstellen",
       "loginWith": "Iihlogge mit {provider}",
       "authenticating": "Authentifiziere…",
       "openIdStateError": "Status stimmt nid überiih, ich verweigerä wiiter zmache!",
       "openIdGeneralError": "Es ist ein Fehler bei der externen Authentisierung aufgetreten.",
-      "logout": "Uuslogge"
+      "logout": "Uuslogge",
+      "emailInvalid": "Bitte gib eine gültige E-Mail-Adresse ein.",
+      "usernameRequired": "Bitte gib einen Anmeldenamen ein.",
+      "passwordRequired": "Bitte gib ein Passwort ein.",
+      "showPassword": "Passwort anzeigen",
+      "hidePassword": "Passwort verbergen",
+      "noAccountYet": "Noch kein Account?",
+      "alreadyHaveAnAccount": "Hast du bereits einen Account?",
+      "remember": "Angemeldet bleiben"
     },
     "settings": {
       "title": "Iihstellige",
@@ -61,7 +68,7 @@
       "currentPasswordPlaceholder": "Diis jetzige Passwort",
       "passwordsDontMatch": "Dis neue Passwort und siini Bestätigung stimmed nid überiih.",
       "passwordUpdateSuccess": "Dis Passwort isch erfolgriich aktualisiert wordä.",
-      "updateEmailTitle": "Dini E-Mail Adrässä änderä",
+      "updateEmailTitle": "Aktualisiere deine E-Mail-Adresse",
       "updateEmailNew": "Neui E-Mail Adrässä",
       "updateEmailSuccess": "Dini E-Mail Adrässä isch erfolgriich gänderet worde. Mir hend dir en Link gschickt, um si zu bestätigä.",
       "general": {
@@ -78,7 +85,8 @@
         "weekStartSunday": "Sunntig",
         "weekStartMonday": "Määntig",
         "language": "Sproch",
-        "defaultList": "Standard Liste"
+        "defaultList": "Standard Liste",
+        "timezone": "Zeitzone"
       },
       "totp": {
         "title": "Zweifaktor Authentifizierig",
@@ -95,9 +103,9 @@
         "disableSuccess": "Zweifaktor Authentifizierig isch erfolgriich uusgschalte wore."
       },
       "caldav": {
-        "title": "Caldav",
-        "howTo": "Du chasch Vikunja zu Caldav Applikatione verbinde, um dini Uufgabe vo verschidene Gräät zgseh. Gib die Url i dim Client iih:",
-        "more": "Meh Informatione über Caldav in Vikunja"
+        "title": "CalDAV",
+        "howTo": "Du chasch Vikunja zu CalDAV Applikatione verbinde, um dini Uufgabe vo verschidene Gräät zgseh. Gib die Url i dim Client iih:",
+        "more": "Meh Informatione über CalDAV in Vikunja"
       },
       "avatar": {
         "title": "Herr Der Elemente",
@@ -157,7 +165,7 @@
     "searchSelect": "Druck uf Enter um die Liste uuszwähle",
     "shared": "Teilti Liste",
     "create": {
-      "header": "New list",
+      "header": "Neue Liste",
       "titlePlaceholder": "Listetitl da ahgeh…",
       "addTitleRequired": "Bitte gib en Titl ah.",
       "createdSuccess": "Liste erfolgriich erstellt.",
@@ -315,7 +323,7 @@
     "namespaces": "Namensrüüm",
     "search": "Schriib, um nachemne Namensruum z'sueche…",
     "create": {
-      "title": "New namespace",
+      "title": "Neuer Namespace",
       "titleRequired": "Bitte gib en Titl ah.",
       "explanation": "En Namensruum isch e Gruppe vo Liste, wo du chasch zur Organisation benutze. Tatsächlich sind alli Listene emne Namensruum zuegwise.",
       "tooltip": "Was isch en Namensruum?",
@@ -327,6 +335,7 @@
       "archiveText": "Du hesch kei möglichkeit meh de Namensruum z'bearbeite oder neui Listene drin z'erstelle, bis du si wider ent-archiviert hesch. Das archiviert au grad alli Liste im Namensruum.",
       "unarchiveText": "Du chasch neui Liste erstelle oder bearbeite.",
       "success": "De Namensruum isch erfolgriich archiviert worde.",
+      "unarchiveSuccess": "Der Namespace wurde erfolgreich wiederhergestellt.",
       "description": "Wenn en Namensruum archiviert isch, chasch du kei neui Liste erstelle oder die bearbeite."
     },
     "delete": {
@@ -376,14 +385,14 @@
       "showDoneTasks": "Zeig die fertige Uufgabe",
       "sortAlphabetically": "Alphabetisch sortieren",
       "enablePriority": "Filter nach Priorität aktiviere",
-      "enablePercentDone": "Filter nach Prozent iihschalte",
+      "enablePercentDone": "Filter nach Fortschritt aktivieren",
       "dueDateRange": "Fälligkeitsberiich",
       "startDateRange": "Startdatumsbreiich",
       "endDateRange": "Enddatumsberiich",
       "reminderRange": "Errinnerigs Datumbereich"
     },
     "create": {
-      "title": "New Saved Filter",
+      "title": "Neuer gespeicherter Filter",
       "description": "En gspeicherete Filter isch e virtuelli Liste, welche vomene Satz a Filter zemmegsetzt wird, sobald me uf sie zuegriift. Wenn sie mal erstellt worde isch, erhaltet si ihren eigene Namensruum.",
       "action": "Neue gspeicherete Filter erstelle"
     },
@@ -476,7 +485,8 @@
     "showMenu": "Menü anzeigen",
     "hideMenu": "Menü ausblenden",
     "forExample": "Zum Beispiel:",
-    "welcomeBack": "Willkommen zurück!"
+    "welcomeBack": "Willkommen zurück!",
+    "custom": "Benutzerdefiniert"
   },
   "input": {
     "resetColor": "Farb zruggsetze",
@@ -515,6 +525,57 @@
     "multiselect": {
       "createPlaceholder": "Neu erstelle",
       "selectPlaceholder": "Druck uf Enter zum uuswähle"
+    },
+    "datepickerRange": {
+      "to": "Bis",
+      "from": "Von",
+      "fromto": "{from} bis {to}",
+      "ranges": {
+        "today": "Heute",
+        "thisWeek": "Diese Woche",
+        "restOfThisWeek": "Der Rest dieser Woche",
+        "nextWeek": "Nächste Woche",
+        "next7Days": "Nächsten 7 Tage",
+        "lastWeek": "Letzte Woche",
+        "thisMonth": "Dieser Monat",
+        "restOfThisMonth": "Der Rest dieses Monats",
+        "nextMonth": "Nächster Monat",
+        "next30Days": "Nächsten 30 Tage",
+        "lastMonth": "Letzter Monat",
+        "thisYear": "Dieses Jahr",
+        "restOfThisYear": "Der Rest des Jahres"
+      }
+    },
+    "datemathHelp": {
+      "canuse": "Du kannst Datumsberechnung verwenden, um nach relativen Daten zu filtern.",
+      "learnhow": "Sieh dir an, wie es funktioniert",
+      "title": "Datumsberechnung",
+      "intro": "Die Datumsberechnung erlaubt es, relative Daten anzugeben, die bei der Anwendung des Filters von Vikunja aufgelöst werden.",
+      "expression": "Jeder Ausdruck der Datumsberechnung beginnt mit einem Datumswert, welcher entweder {0} sein kann oder mit {1} endet. Auf diesen Datumswert kann optional ein oder mehrere mathematische Ausdrücke folgen.",
+      "similar": "Diese Ausdrücke ähneln denen von {0} und {1}.",
+      "add1Day": "Einen Tag hinzufügen",
+      "minus1Day": "Einen Tag abziehen",
+      "roundDay": "Auf den nächsten Tag abrunden",
+      "supportedUnits": "Unterstützte Zeiteinheiten sind:",
+      "someExamples": "Einige Beispiele für Zeitausdrücke:",
+      "units": {
+        "seconds": "Sekunden",
+        "minutes": "Minuten",
+        "hours": "Stunden",
+        "days": "Tage",
+        "weeks": "Wochen",
+        "months": "Monate",
+        "years": "Jahre"
+      },
+      "examples": {
+        "now": "Jetzt",
+        "in24h": "In 24 Stunden",
+        "today": "Heute um 00:00 Uhr",
+        "beginningOfThisWeek": "Der Anfang dieser Woche um 00:00 Uhr",
+        "endOfThisWeek": "Das Ende dieser Woche",
+        "in30Days": "In 30 Tagen",
+        "datePlusMonth": "{0} plus einen Monat um 00:00 des Tages"
+      }
     }
   },
   "task": {
@@ -532,12 +593,9 @@
       "titleCurrent": "Momentani Uufgabe",
       "titleDates": "Uufgabe vo {from} bis {to}",
       "noDates": "Zeig Uufgabe ohni Datum",
-      "current": "Momentani Uufgabe",
-      "from": "Uufgabe vo",
-      "until": "bis",
-      "today": "Hütt",
-      "nextWeek": "Negst Wuchä",
-      "nextMonth": "Negste Monet",
+      "overdue": "Überfällige Aufgaben anzeigen",
+      "fromuntil": "Aufgaben von {from} bis {until}",
+      "select": "Datumsbereich wählen",
       "noTasks": "Nichts zu tun – Einen schönen Tag noch!"
     },
     "detail": {
@@ -545,7 +603,7 @@
       "chooseStartDate": "Druck dah, um es Startdatum z'setze",
       "chooseEndDate": "Druck da, um es Enddatum z'setze",
       "move": "Schieb die Uufgab in e anderi Liste",
-      "done": "Mark task done!",
+      "done": "Als erledigt markieren!",
       "undone": "Als unerledigt markierä",
       "created": "Erstellt am {0} vo {1}",
       "updated": "{0} g'updatet",
@@ -562,20 +620,20 @@
       },
       "actions": {
         "assign": "Benutzer:in zuweisen",
-        "label": "Label hinzuefüege",
+        "label": "Label hinzufügen",
         "priority": "Priorität setzä",
         "dueDate": "Fälligkeitsdatum setze",
-        "startDate": "Startdatum setze",
-        "endDate": "Enddatum setze",
+        "startDate": "Startdatum setzen",
+        "endDate": "Enddatum setzen",
         "reminders": "Errinnerig iihstelle",
-        "repeatAfter": "En wiederholende Intervall setze",
-        "percentDone": "Prozentuelli Erledigung setze",
-        "attachments": "Aahang hinzuefüege",
-        "relatedTasks": "Uufgabsbeziehig hinzufüege",
-        "moveList": "Uufgab verschiebe",
-        "color": "Uufgab Farb setze",
-        "delete": "Uufgab chüble",
-        "favorite": "In Favoriten speichern",
+        "repeatAfter": "Wiederholung setzen",
+        "percentDone": "Fortschritt einstellen",
+        "attachments": "Anhänge hinzufügen",
+        "relatedTasks": "Beziehung hinzufügen",
+        "moveList": "Verschieben",
+        "color": "Farbe setzen",
+        "delete": "Löschen",
+        "favorite": "Zu Favoriten hinzufügen",
         "unfavorite": "Aus Favoriten entfernen"
       }
     },
@@ -589,7 +647,7 @@
       "dueDate": "Fälligkeitsdatum",
       "endDate": "Enddatum",
       "labels": "Labels",
-      "percentDone": "% fertig",
+      "percentDone": "Fortschritt",
       "priority": "Priorität",
       "relatedTasks": "Verwandti Uufgabe",
       "reminders": "Errinnerige",
@@ -776,17 +834,20 @@
     "general": "Allgemein",
     "allPages": "Die Chürzl funktioniered uf allne Siitene.",
     "currentPageOnly": "Die Chürzl funktioniered nur uf de momentane Siite.",
+    "somePagesOnly": "Funktioniert nur auf manchen Seiten.",
     "toggleMenu": "Menü umschalte",
     "quickSearch": "Suechi und Schnellaktionsliste öffne",
     "then": "dann",
     "task": {
       "title": "Uufgabesiite",
-      "done": "Done",
-      "assign": "Benutzer:in zuweisen",
+      "done": "Aufgabe als erledigt / unerledigt markieren",
+      "assign": "Diese Aufgabe jemandem zuweisen",
       "labels": "Labels ennere Uufgab hinzuefüege",
       "dueDate": "S'Fälligkeitsdatum für die Uufgab ändere",
       "attachment": "En Aahang dere Uufgab hinzuefüege",
-      "related": "Beziehige vo dere Uufgab bearbeite"
+      "related": "Beziehige vo dere Uufgab bearbeite",
+      "color": "Die Farbe dieser Aufgabe ändern",
+      "move": "Diese Aufgabe in eine andere Liste verschieben"
     },
     "list": {
       "title": "Listenansicht",
@@ -794,6 +855,14 @@
       "switchToGanttView": "Zur Ganttansicht wechseln",
       "switchToKanbanView": "Zur Kanbanansicht wechseln",
       "switchToTableView": "Zur Tabellenansicht wechseln"
+    },
+    "navigation": {
+      "title": "Navigation",
+      "overview": "Die Startseite aufrufen",
+      "upcoming": "Anstehende Aufgaben aufrufen",
+      "namespaces": "Namespaces & Listen aufrufen",
+      "labels": "Labels aufrufen",
+      "teams": "Teams aufrufen"
     }
   },
   "update": {
@@ -899,7 +968,7 @@
     "4015": "De Uufgabe Kommentar giz nid.",
     "4016": "Ungültigs Uufgabefeld.",
     "4017": "Ungültige Uufgabefilter vergliich.",
-    "4018": "Invalid task filter concatenator.",
+    "4018": "Ungültige Verkettung von Aufgabenfiltern.",
     "4019": "Ungültigi Uufgabe Filter Wert.",
     "5001": "De Namensruum existiert nid.",
     "5003": "Du hesch kei Zuegriff zu dem Namensruum.",

src/i18n/lang/en.json

@@ -31,10 +31,9 @@
       "username": "Username",
       "usernameEmail": "Username Or Email Address",
       "usernamePlaceholder": "e.g. frederick",
-      "email": "E-mail address",
+      "email": "Email address",
       "emailPlaceholder": "e.g. frederic{'@'}vikunja.io",
       "password": "Password",
-      "passwordRepeat": "Retype your password",
       "passwordPlaceholder": "e.g. •••••••••••",
       "forgotPassword": "Forgot your password?",
       "resetPassword": "Reset your password",
@@ -45,12 +44,20 @@
       "totpTitle": "Two Factor Authentication Code",
       "totpPlaceholder": "e.g. 123456",
       "login": "Login",
-      "register": "Register",
+      "createAccount": "Create account",
       "loginWith": "Log in with {provider}",
       "authenticating": "Authenticating…",
       "openIdStateError": "State does not match, refusing to continue!",
       "openIdGeneralError": "An error occured while authenticating against the third party.",
-      "logout": "Logout"
+      "logout": "Logout",
+      "emailInvalid": "Please enter a valid email address.",
+      "usernameRequired": "Please provide a username.",
+      "passwordRequired": "Please provide a password.",
+      "showPassword": "Show the password",
+      "hidePassword": "Hide the password",
+      "noAccountYet": "Don't have an account yet?",
+      "alreadyHaveAnAccount": "Already have an account?",
+      "remember": "Stay logged in"
     },
     "settings": {
       "title": "Settings",
@@ -61,7 +68,7 @@
       "currentPasswordPlaceholder": "Your current password",
       "passwordsDontMatch": "The new password and its confirmation don't match.",
       "passwordUpdateSuccess": "The password was successfully updated.",
-      "updateEmailTitle": "Update Your E-Mail Address",
+      "updateEmailTitle": "Update Your Email Address",
       "updateEmailNew": "New Email Address",
       "updateEmailSuccess": "Your email address was successfully updated. We've sent you a link to confirm it.",
       "general": {
@@ -78,7 +85,8 @@
         "weekStartSunday": "Sunday",
         "weekStartMonday": "Monday",
         "language": "Language",
-        "defaultList": "Default List"
+        "defaultList": "Default List",
+        "timezone": "Time Zone"
       },
       "totp": {
         "title": "Two Factor Authentication",
@@ -327,6 +335,7 @@
       "archiveText": "You won't be able to edit this namespace or create new lists until you un-archive it. This will also archive all lists in this namespace.",
       "unarchiveText": "You will be able to create new lists or edit it.",
       "success": "The namespace was successfully archived.",
+      "unarchiveSuccess": "The namespace was successfully un-archived.",
       "description": "If a namespace is archived, you cannot create new lists or edit it."
     },
     "delete": {
@@ -376,7 +385,7 @@
       "showDoneTasks": "Show Done Tasks",
       "sortAlphabetically": "Sort Alphabetically",
       "enablePriority": "Enable Filter By Priority",
-      "enablePercentDone": "Enable Filter By Percent Done",
+      "enablePercentDone": "Enable Filter By Progress",
       "dueDateRange": "Due Date Range",
       "startDateRange": "Start Date Range",
       "endDateRange": "End Date Range",
@@ -476,7 +485,8 @@
     "showMenu": "Show the menu",
     "hideMenu": "Hide the menu",
     "forExample": "For example:",
-    "welcomeBack": "Welcome Back!"
+    "welcomeBack": "Welcome Back!",
+    "custom": "Custom"
   },
   "input": {
     "resetColor": "Reset Color",
@@ -515,6 +525,60 @@
     "multiselect": {
       "createPlaceholder": "Create new",
       "selectPlaceholder": "Click or press enter to select"
+    },
+    "datepickerRange": {
+      "to": "To",
+      "from": "From",
+      "fromto": "{from} to {to}",
+      "ranges": {
+        "today": "Today",
+        
+        "thisWeek": "This Week",
+        "restOfThisWeek": "The Rest of This Week",
+        "nextWeek": "Next Week",
+        "next7Days": "Next 7 Days",
+        "lastWeek": "Last Week",
+        
+        "thisMonth": "This Month",
+        "restOfThisMonth": "The Rest of This Month",
+        "nextMonth": "Next Month",
+        "next30Days": "Next 30 Days",
+        "lastMonth": "Last Month",
+        
+        "thisYear": "This Year",
+        "restOfThisYear": "The Rest of This Year"
+      }
+    },
+    "datemathHelp": {
+      "canuse": "You can use date math to filter for relative dates.",
+      "learnhow": "Check out how it works",
+      "title": "Date Math",
+      "intro": "Date Math allows you to specifiy relative dates which are resolved on the fly by Vikunja when applying the filter.",
+      "expression": "Each Date Math expression starts with an anchor date, which can either be {0}, or a date string ending with {1}. This anchor date can optionally be followed by one or more maths expressions.",
+      "similar": "These expressions are similar to the ones provided by {0} and {1}.",
+      "add1Day": "Add one day",
+      "minus1Day": "Subtract one day",
+      "roundDay": "Round down to the nearest day",
+      "supportedUnits": "Supported time units are:",
+      "someExamples": "Some examples of time expressions:",
+      "units": {
+        "seconds": "Seconds",
+        "minutes": "Minutes",
+        "hours": "Hours",
+        "days": "Days",
+        "weeks": "Weeks",
+        "months": "Months",
+        "years": "Years"
+      },
+      "examples": {
+        "now": "Right now",
+        "in24h": "In 24h",
+        "today": "Today at 00:00",
+        "beginningOfThisWeek": "The beginning of this week at 00:00",
+        "endOfThisWeek": "The end of this week",
+        "in30Days": "In 30 days",
+        "datePlusMonth": "{0} plus one month at 00:00 of that day"
+      }
     }
   },
   "task": {
@@ -532,12 +596,9 @@
       "titleCurrent": "Current Tasks",
       "titleDates": "Tasks from {from} until {to}",
       "noDates": "Show tasks without dates",
-      "current": "Current tasks",
-      "from": "Tasks from",
-      "until": "until",
-      "today": "Today",
-      "nextWeek": "Next Week",
-      "nextMonth": "Next Month",
+      "overdue": "Show overdue tasks",
+      "fromuntil": "Tasks from {from} until {until}",
+      "select": "Select a date range",
       "noTasks": "Nothing to do — Have a nice day!"
     },
     "detail": {
@@ -561,22 +622,22 @@
         "text2": "This will also remove all attachments, reminders and relations associated with this task and cannot be undone!"
       },
       "actions": {
-        "assign": "Assign to a user",
-        "label": "Add labels",
+        "assign": "Assign to User",
+        "label": "Add Labels",
         "priority": "Set Priority",
         "dueDate": "Set Due Date",
-        "startDate": "Set a Start Date",
-        "endDate": "Set an End Date",
+        "startDate": "Set Start Date",
+        "endDate": "Set End Date",
         "reminders": "Set Reminders",
-        "repeatAfter": "Set a repeating interval",
-        "percentDone": "Set Percent Done",
-        "attachments": "Add attachments",
-        "relatedTasks": "Add task relations",
-        "moveList": "Move task",
-        "color": "Set task color",
-        "delete": "Delete task",
-        "favorite": "Save as favorite",
-        "unfavorite": "Remove from favorites"
+        "repeatAfter": "Set Repeating Interval",
+        "percentDone": "Set Progress",
+        "attachments": "Add Attachments",
+        "relatedTasks": "Add Relation",
+        "moveList": "Move",
+        "color": "Set Color",
+        "delete": "Delete",
+        "favorite": "Add to Favorites",
+        "unfavorite": "Remove from Favorites"
       }
     },
     "attributes": {
@@ -589,7 +650,7 @@
       "dueDate": "Due Date",
       "endDate": "End Date",
       "labels": "Labels",
-      "percentDone": "% Done",
+      "percentDone": "Progress",
       "priority": "Priority",
       "relatedTasks": "Related Tasks",
       "reminders": "Reminders",
@@ -676,6 +737,7 @@
       "deleteText1": "Are you sure you want to delete this task relation?",
       "deleteText2": "This cannot be undone!",
       "select": "Select a relation kind",
+      "taskRequired": "Please select a task or enter a new task title.",
       "kinds": {
         "subtask": "Subtask | Subtasks",
         "parenttask": "Parent Task | Parent Tasks",
@@ -776,17 +838,20 @@
     "general": "General",
     "allPages": "These shortcuts work on all pages.",
     "currentPageOnly": "These shortcuts work only on the current page.",
+    "somePagesOnly": "These shortcuts work only on some pages.",
     "toggleMenu": "Toggle The Menu",
     "quickSearch": "Open the search/quick action bar",
     "then": "then",
     "task": {
       "title": "Task Page",
-      "done": "Done",
-      "assign": "Assign to a user",
+      "done": "Mark task done / undone",
+      "assign": "Assign this task to a user",
       "labels": "Add labels to this task",
       "dueDate": "Change the due date of this task",
       "attachment": "Add an attachment to this task",
-      "related": "Modify related tasks of this task"
+      "related": "Modify related tasks of this task",
+      "color": "Change the color of this task",
+      "move": "Move this task to another list"
     },
     "list": {
       "title": "List Views",
@@ -794,6 +859,14 @@
       "switchToGanttView": "Switch to gantt view",
       "switchToKanbanView": "Switch to kanban view",
       "switchToTableView": "Switch to table view"
+    },
+    "navigation": {
+      "title": "Navigation",
+      "overview": "Navigato to overview",
+      "upcoming": "Navigato to upcoming taks",
+      "namespaces": "Navigate to namepaces & lists",
+      "labels": "Navigate to labels",
+      "teams": "Navigate to teams"
     }
   },
   "update": {

src/i18n/lang/es-ES.json

@@ -31,10 +31,9 @@
       "username": "Username",
       "usernameEmail": "Username Or Email Address",
       "usernamePlaceholder": "e.g. frederick",
-      "email": "E-mail address",
+      "email": "Email address",
       "emailPlaceholder": "e.g. frederic{'@'}vikunja.io",
       "password": "Password",
-      "passwordRepeat": "Retype your password",
       "passwordPlaceholder": "e.g. •••••••••••",
       "forgotPassword": "Forgot your password?",
       "resetPassword": "Reset your password",
@@ -45,12 +44,20 @@
       "totpTitle": "Two Factor Authentication Code",
       "totpPlaceholder": "e.g. 123456",
       "login": "Login",
-      "register": "Register",
+      "createAccount": "Create account",
       "loginWith": "Log in with {provider}",
       "authenticating": "Authenticating…",
       "openIdStateError": "State does not match, refusing to continue!",
       "openIdGeneralError": "An error occured while authenticating against the third party.",
-      "logout": "Logout"
+      "logout": "Logout",
+      "emailInvalid": "Please enter a valid email address.",
+      "usernameRequired": "Please provide a username.",
+      "passwordRequired": "Please provide a password.",
+      "showPassword": "Show the password",
+      "hidePassword": "Hide the password",
+      "noAccountYet": "Don't have an account yet?",
+      "alreadyHaveAnAccount": "Already have an account?",
+      "remember": "Stay logged in"
     },
     "settings": {
       "title": "Settings",
@@ -61,7 +68,7 @@
       "currentPasswordPlaceholder": "Your current password",
       "passwordsDontMatch": "The new password and its confirmation don't match.",
       "passwordUpdateSuccess": "The password was successfully updated.",
-      "updateEmailTitle": "Update Your E-Mail Address",
+      "updateEmailTitle": "Update Your Email Address",
       "updateEmailNew": "New Email Address",
       "updateEmailSuccess": "Your email address was successfully updated. We've sent you a link to confirm it.",
       "general": {
@@ -78,7 +85,8 @@
         "weekStartSunday": "Sunday",
         "weekStartMonday": "Monday",
         "language": "Language",
-        "defaultList": "Default List"
+        "defaultList": "Default List",
+        "timezone": "Time Zone"
       },
       "totp": {
         "title": "Two Factor Authentication",
@@ -327,6 +335,7 @@
       "archiveText": "You won't be able to edit this namespace or create new lists until you un-archive it. This will also archive all lists in this namespace.",
       "unarchiveText": "You will be able to create new lists or edit it.",
       "success": "The namespace was successfully archived.",
+      "unarchiveSuccess": "The namespace was successfully un-archived.",
       "description": "If a namespace is archived, you cannot create new lists or edit it."
     },
     "delete": {
@@ -376,7 +385,7 @@
       "showDoneTasks": "Show Done Tasks",
       "sortAlphabetically": "Sort Alphabetically",
       "enablePriority": "Enable Filter By Priority",
-      "enablePercentDone": "Enable Filter By Percent Done",
+      "enablePercentDone": "Enable Filter By Progress",
       "dueDateRange": "Due Date Range",
       "startDateRange": "Start Date Range",
       "endDateRange": "End Date Range",
@@ -476,7 +485,8 @@
     "showMenu": "Show the menu",
     "hideMenu": "Hide the menu",
     "forExample": "For example:",
-    "welcomeBack": "Welcome Back!"
+    "welcomeBack": "Welcome Back!",
+    "custom": "Custom"
   },
   "input": {
     "resetColor": "Reset Color",
@@ -515,6 +525,57 @@
     "multiselect": {
       "createPlaceholder": "Create new",
       "selectPlaceholder": "Click or press enter to select"
+    },
+    "datepickerRange": {
+      "to": "To",
+      "from": "From",
+      "fromto": "{from} to {to}",
+      "ranges": {
+        "today": "Today",
+        "thisWeek": "This Week",
+        "restOfThisWeek": "The Rest of This Week",
+        "nextWeek": "Next Week",
+        "next7Days": "Next 7 Days",
+        "lastWeek": "Last Week",
+        "thisMonth": "This Month",
+        "restOfThisMonth": "The Rest of This Month",
+        "nextMonth": "Next Month",
+        "next30Days": "Next 30 Days",
+        "lastMonth": "Last Month",
+        "thisYear": "This Year",
+        "restOfThisYear": "The Rest of This Year"
+      }
+    },
+    "datemathHelp": {
+      "canuse": "You can use date math to filter for relative dates.",
+      "learnhow": "Check out how it works",
+      "title": "Date Math",
+      "intro": "Date Math allows you to specifiy relative dates which are resolved on the fly by Vikunja when applying the filter.",
+      "expression": "Each Date Math expression starts with an anchor date, which can either be {0}, or a date string ending with {1}. This anchor date can optionally be followed by one or more maths expressions.",
+      "similar": "These expressions are similar to the ones provided by {0} and {1}.",
+      "add1Day": "Add one day",
+      "minus1Day": "Subtract one day",
+      "roundDay": "Round down to the nearest day",
+      "supportedUnits": "Supported time units are:",
+      "someExamples": "Some examples of time expressions:",
+      "units": {
+        "seconds": "Seconds",
+        "minutes": "Minutes",
+        "hours": "Hours",
+        "days": "Days",
+        "weeks": "Weeks",
+        "months": "Months",
+        "years": "Years"
+      },
+      "examples": {
+        "now": "Right now",
+        "in24h": "In 24h",
+        "today": "Today at 00:00",
+        "beginningOfThisWeek": "The beginning of this week at 00:00",
+        "endOfThisWeek": "The end of this week",
+        "in30Days": "In 30 days",
+        "datePlusMonth": "{0} plus one month at 00:00 of that day"
+      }
     }
   },
   "task": {
@@ -532,12 +593,9 @@
       "titleCurrent": "Current Tasks",
       "titleDates": "Tasks from {from} until {to}",
       "noDates": "Show tasks without dates",
-      "current": "Current tasks",
-      "from": "Tasks from",
-      "until": "until",
-      "today": "Today",
-      "nextWeek": "Next Week",
-      "nextMonth": "Next Month",
+      "overdue": "Show overdue tasks",
+      "fromuntil": "Tasks from {from} until {until}",
+      "select": "Select a date range",
       "noTasks": "Nothing to do — Have a nice day!"
     },
     "detail": {
@@ -561,22 +619,22 @@
         "text2": "This will also remove all attachments, reminders and relations associated with this task and cannot be undone!"
       },
       "actions": {
-        "assign": "Assign to a user",
-        "label": "Add labels",
+        "assign": "Assign to User",
+        "label": "Add Labels",
         "priority": "Set Priority",
         "dueDate": "Set Due Date",
-        "startDate": "Set a Start Date",
-        "endDate": "Set an End Date",
+        "startDate": "Set Start Date",
+        "endDate": "Set End Date",
         "reminders": "Set Reminders",
-        "repeatAfter": "Set a repeating interval",
-        "percentDone": "Set Percent Done",
-        "attachments": "Add attachments",
-        "relatedTasks": "Add task relations",
-        "moveList": "Move task",
-        "color": "Set task color",
-        "delete": "Delete task",
-        "favorite": "Save as favorite",
-        "unfavorite": "Remove from favorites"
+        "repeatAfter": "Set Repeating Interval",
+        "percentDone": "Set Progress",
+        "attachments": "Add Attachments",
+        "relatedTasks": "Add Relation",
+        "moveList": "Move",
+        "color": "Set Color",
+        "delete": "Delete",
+        "favorite": "Add to Favorites",
+        "unfavorite": "Remove from Favorites"
       }
     },
     "attributes": {
@@ -589,7 +647,7 @@
       "dueDate": "Due Date",
       "endDate": "End Date",
       "labels": "Labels",
-      "percentDone": "% Done",
+      "percentDone": "Progress",
       "priority": "Priority",
       "relatedTasks": "Related Tasks",
       "reminders": "Reminders",
@@ -776,17 +834,20 @@
     "general": "General",
     "allPages": "These shortcuts work on all pages.",
     "currentPageOnly": "These shortcuts work only on the current page.",
+    "somePagesOnly": "These shortcuts work only on some pages.",
     "toggleMenu": "Toggle The Menu",
     "quickSearch": "Open the search/quick action bar",
     "then": "then",
     "task": {
       "title": "Task Page",
-      "done": "Done",
-      "assign": "Assign to a user",
+      "done": "Mark task done / undone",
+      "assign": "Assign this task to a user",
       "labels": "Add labels to this task",
       "dueDate": "Change the due date of this task",
       "attachment": "Add an attachment to this task",
-      "related": "Modify related tasks of this task"
+      "related": "Modify related tasks of this task",
+      "color": "Change the color of this task",
+      "move": "Move this task to another list"
     },
     "list": {
       "title": "List Views",
@@ -794,6 +855,14 @@
       "switchToGanttView": "Switch to gantt view",
       "switchToKanbanView": "Switch to kanban view",
       "switchToTableView": "Switch to table view"
+    },
+    "navigation": {
+      "title": "Navigation",
+      "overview": "Navigato to overview",
+      "upcoming": "Navigato to upcoming taks",
+      "namespaces": "Navigate to namepaces & lists",
+      "labels": "Navigate to labels",
+      "teams": "Navigate to teams"
     }
   },
   "update": {

src/i18n/lang/fr-FR.json

@@ -7,7 +7,7 @@
     "lastViewed": "Dernière consultation",
     "list": {
       "newText": "Tu peux créer une nouvelle liste pour tes nouvelles tâches :",
-      "new": "New list",
+      "new": "Nouvelle liste",
       "importText": "Ou importe tes listes et tâches d’autres services dans Vikunja :",
       "import": "Importer tes données dans Vikunja"
     }
@@ -34,9 +34,8 @@
       "email": "Adresse courriel",
       "emailPlaceholder": "p. ex. frederic{'@'}vikunja.io",
       "password": "Mot de passe",
-      "passwordRepeat": "Retape ton mot de passe",
       "passwordPlaceholder": "p. ex. •••••••••••",
-      "forgotPassword": "Forgot your password?",
+      "forgotPassword": "Mot de passe oublié ?",
       "resetPassword": "Réinitialiser ton mot de passe",
       "resetPasswordAction": "M’envoyer un lien de réinitialisation du mot de passe",
       "resetPasswordSuccess": "Vérifie ta boîte de réception ! Tu devrais avoir un courriel contenant les instructions sur la manière de réinitialiser ton mot de passe.",
@@ -45,12 +44,20 @@
       "totpTitle": "Code d’authentification à deux facteurs",
       "totpPlaceholder": "p. ex. 123456",
       "login": "Se connecter",
-      "register": "S’inscrire",
+      "createAccount": "Créer un compte",
       "loginWith": "Se connecter avec {provider}",
       "authenticating": "Authentification…",
       "openIdStateError": "L’état ne correspond pas, impossible de continuer !",
       "openIdGeneralError": "Une erreur s'est produite lors de l'authentification contre un tiers.",
-      "logout": "Se déconnecter"
+      "logout": "Se déconnecter",
+      "emailInvalid": "Veuillez saisir une adresse courriel valide.",
+      "usernameRequired": "Veuillez saisir un nom d'utilisateur.",
+      "passwordRequired": "Veuillez fournir un mot de passe.",
+      "showPassword": "Afficher le mot de passe",
+      "hidePassword": "Masquer le mot de passe",
+      "noAccountYet": "Vous n'avez pas encore de compte ?",
+      "alreadyHaveAnAccount": "Vous avez déjà un compte ?",
+      "remember": "Rester connecté(e)"
     },
     "settings": {
       "title": "Paramètres",
@@ -61,7 +68,7 @@
       "currentPasswordPlaceholder": "Ton mot de passe actuel",
       "passwordsDontMatch": "Le nouveau mot de passe et sa confirmation ne correspondent pas.",
       "passwordUpdateSuccess": "Mot de passe mis à jour.",
-      "updateEmailTitle": "Mets à jour ton adresse électronique",
+      "updateEmailTitle": "Mettre à jour votre adresse courriel",
       "updateEmailNew": "Nouvelle adresse courriel",
       "updateEmailSuccess": "Mise à jour de l’adresse électronique. Clique sur le lien dans le courriel qui t’a été envoyé pour le confirmer.",
       "general": {
@@ -78,7 +85,8 @@
         "weekStartSunday": "dimanche",
         "weekStartMonday": "lundi",
         "language": "Langue",
-        "defaultList": "Liste par défaut"
+        "defaultList": "Liste par défaut",
+        "timezone": "Fuseau horaire"
       },
       "totp": {
         "title": "Authentification à deux facteurs",
@@ -103,7 +111,7 @@
         "title": "Avatar",
         "initials": "Initiales",
         "gravatar": "Gravatar",
-        "marble": "Marble",
+        "marble": "Bille",
         "upload": "Téléverser",
         "uploadAvatar": "Téléverser l’avatar",
         "statusUpdateSuccess": "Statut de l’avatar mis à jour.",
@@ -116,12 +124,12 @@
         "vikunja": "Vikunja"
       },
       "appearance": {
-        "title": "Color Scheme",
-        "setSuccess": "Saved change of color scheme to {colorScheme}",
+        "title": "Jeu de couleurs",
+        "setSuccess": "Changement du jeu de couleurs enregistré vers {colorScheme}",
         "colorScheme": {
-          "light": "Light",
-          "system": "System",
-          "dark": "Dark"
+          "light": "Clair",
+          "system": "Système",
+          "dark": "Sombre"
         }
       }
     },
@@ -157,7 +165,7 @@
     "searchSelect": "Clique ou appuie sur la touche Entrée pour sélectionner cette liste",
     "shared": "Listes partagées",
     "create": {
-      "header": "New list",
+      "header": "Nouvelle liste",
       "titlePlaceholder": "Entre le nom de la liste…",
       "addTitleRequired": "Indique un nom.",
       "createdSuccess": "Liste créée.",
@@ -315,7 +323,7 @@
     "namespaces": "Espaces de noms",
     "search": "Écris pour rechercher un espace de noms…",
     "create": {
-      "title": "New namespace",
+      "title": "Nouvel espace de noms",
       "titleRequired": "Indique un nom.",
       "explanation": "Des collections de listes pour partager et organiser vos listes. En fait, chaque liste appartient à un espace de noms.",
       "tooltip": "Qu’est-ce qu’un espace de noms ?",
@@ -327,6 +335,7 @@
       "archiveText": "Tu ne pourras pas modifier cet espace de noms ou créer de nouvelles listes tant que tu ne l’auras pas désarchivé. Ceci archivera également toutes les listes de cet espace de noms.",
       "unarchiveText": "Tu pourras créer de nouvelles listes ou les modifier.",
       "success": "Espace de noms archivé.",
+      "unarchiveSuccess": "Espace de noms archivé.",
       "description": "L’archivage d’un espace de noms signifie qu’on ne peut pas créer de nouvelles listes dans cet espace, ni le modifier."
     },
     "delete": {
@@ -374,16 +383,16 @@
       "includeNulls": "Inclure les tâches sans valeurs",
       "requireAll": "Exiger tous les filtres pour qu’une tâche s’affiche",
       "showDoneTasks": "Afficher les tâches terminées",
-      "sortAlphabetically": "Sort Alphabetically",
+      "sortAlphabetically": "Trier par ordre alphabétique",
       "enablePriority": "Activer le filtre par priorité",
-      "enablePercentDone": "Par % d’achèvement",
+      "enablePercentDone": "Activer le filtre par progression",
       "dueDateRange": "Plage de dates d’échéance",
       "startDateRange": "Plage de dates de début",
       "endDateRange": "Plage de dates de fin",
       "reminderRange": "Plage de dates de rappel"
     },
     "create": {
-      "title": "New Saved Filter",
+      "title": "Nouveau filtre enregistré",
       "description": "Un filtre enregistré est une liste virtuelle qui est calculée à partir d’un ensemble de filtres à chaque fois qu’on y accède. Une fois créé, il apparaît dans un espace de noms spécial.",
       "action": "Créer un nouveau filtre enregistré"
     },
@@ -475,8 +484,9 @@
     "download": "Télécharger",
     "showMenu": "Afficher le menu",
     "hideMenu": "Masquer le menu",
-    "forExample": "For example:",
-    "welcomeBack": "Welcome Back!"
+    "forExample": "Par exemple :",
+    "welcomeBack": "Heureux de vous revoir !",
+    "custom": "Custom"
   },
   "input": {
     "resetColor": "Réinitialiser la couleur",
@@ -515,6 +525,57 @@
     "multiselect": {
       "createPlaceholder": "Créer un nouveau",
       "selectPlaceholder": "Clique ou appuie sur la touche Entrée pour sélectionner"
+    },
+    "datepickerRange": {
+      "to": "To",
+      "from": "From",
+      "fromto": "{from} to {to}",
+      "ranges": {
+        "today": "Today",
+        "thisWeek": "This Week",
+        "restOfThisWeek": "The Rest of This Week",
+        "nextWeek": "Next Week",
+        "next7Days": "Next 7 Days",
+        "lastWeek": "Last Week",
+        "thisMonth": "This Month",
+        "restOfThisMonth": "The Rest of This Month",
+        "nextMonth": "Next Month",
+        "next30Days": "Next 30 Days",
+        "lastMonth": "Last Month",
+        "thisYear": "This Year",
+        "restOfThisYear": "The Rest of This Year"
+      }
+    },
+    "datemathHelp": {
+      "canuse": "You can use date math to filter for relative dates.",
+      "learnhow": "Check out how it works",
+      "title": "Date Math",
+      "intro": "Date Math allows you to specifiy relative dates which are resolved on the fly by Vikunja when applying the filter.",
+      "expression": "Each Date Math expression starts with an anchor date, which can either be {0}, or a date string ending with {1}. This anchor date can optionally be followed by one or more maths expressions.",
+      "similar": "These expressions are similar to the ones provided by {0} and {1}.",
+      "add1Day": "Add one day",
+      "minus1Day": "Subtract one day",
+      "roundDay": "Round down to the nearest day",
+      "supportedUnits": "Supported time units are:",
+      "someExamples": "Some examples of time expressions:",
+      "units": {
+        "seconds": "Seconds",
+        "minutes": "Minutes",
+        "hours": "Hours",
+        "days": "Days",
+        "weeks": "Weeks",
+        "months": "Months",
+        "years": "Years"
+      },
+      "examples": {
+        "now": "Right now",
+        "in24h": "In 24h",
+        "today": "Today at 00:00",
+        "beginningOfThisWeek": "The beginning of this week at 00:00",
+        "endOfThisWeek": "The end of this week",
+        "in30Days": "In 30 days",
+        "datePlusMonth": "{0} plus one month at 00:00 of that day"
+      }
     }
   },
   "task": {
@@ -532,12 +593,9 @@
       "titleCurrent": "Tâches actuelles",
       "titleDates": "Tâches du {from} au {to}",
       "noDates": "Afficher les tâches sans date",
-      "current": "Tâches actuelles",
-      "from": "Tâches du",
-      "until": "au",
-      "today": "Aujourd’hui",
-      "nextWeek": "La semaine prochaine",
-      "nextMonth": "Le mois prochain",
+      "overdue": "Show overdue tasks",
+      "fromuntil": "Tasks from {from} until {until}",
+      "select": "Select a date range",
       "noTasks": "Rien à faire — Passe une bonne journée !"
     },
     "detail": {
@@ -545,7 +603,7 @@
       "chooseStartDate": "Clique ici pour fixer une date de début",
       "chooseEndDate": "Clique ici pour fixer une date de fin",
       "move": "Déplacer une tâche vers une autre liste",
-      "done": "Mark task done!",
+      "done": "Marquer la tâche comme terminée !",
       "undone": "Marquer comme inachevé",
       "created": "Créé {0} par {1}",
       "updated": "Mis à jour {0}",
@@ -561,21 +619,21 @@
         "text2": "Ceci supprimera également toutes les pièces jointes, les rappels et les relations associés à cette tâche et ne pourra pas être annulé !"
       },
       "actions": {
-        "assign": "Assign to a user",
+        "assign": "Assigner à l'utilisateur",
         "label": "Ajouter des étiquettes",
         "priority": "Définir la priorité",
         "dueDate": "Définir l’échéance",
-        "startDate": "Définir une date de début",
-        "endDate": "Fixer une date de fin",
+        "startDate": "Définir la date de début",
+        "endDate": "Définir la date de fin",
         "reminders": "Définir des rappels",
         "repeatAfter": "Définir un intervalle de répétition",
-        "percentDone": "Définir le pourcentage d’achèvement",
+        "percentDone": "Définir la progression",
         "attachments": "Ajouter des pièces jointes",
-        "relatedTasks": "Ajouter des relations de tâches",
-        "moveList": "Déplacer la tâche",
-        "color": "Définir la couleur de la tâche",
-        "delete": "Supprimer la tâche",
-        "favorite": "Enregistrer comme favori",
+        "relatedTasks": "Ajouter une relation",
+        "moveList": "Déplacer",
+        "color": "Définir la couleur",
+        "delete": "Supprimer",
+        "favorite": "Ajouter aux favoris",
         "unfavorite": "Retirer des favoris"
       }
     },
@@ -589,7 +647,7 @@
       "dueDate": "Date d’échéance",
       "endDate": "Date de fin",
       "labels": "Étiquettes",
-      "percentDone": "% terminé",
+      "percentDone": "Progression",
       "priority": "Priorité",
       "relatedTasks": "Tâches connexes",
       "reminders": "Rappels",
@@ -726,8 +784,8 @@
       "dateCurrentYear": "utilisera l’année en cours",
       "dateNth": "utilisera le {day}e du mois en cours",
       "dateTime": "Combinez n’importe lequel des formats de date avec « {time} » (ou {timePM}) pour définir une heure.",
-      "repeats": "Repeating tasks",
-      "repeatsDescription": "To set a task as repeating in an interval, simply add '{suffix}' to the task text. The amount needs to be a number and can be omitted to use just the type (see examples)."
+      "repeats": "Tâches répétitives",
+      "repeatsDescription": "Pour définir une tâche comme répétitive dans un intervalle, il suffit d'ajouter « {suffix} » au texte de la tâche. Le montant doit être un nombre et peut être omis pour utiliser uniquement le type (voir exemples)."
     }
   },
   "team": {
@@ -776,17 +834,20 @@
     "general": "Général",
     "allPages": "Fonctionne sur toutes les pages.",
     "currentPageOnly": "Fonctionnent uniquement sur la page en cours.",
+    "somePagesOnly": "Ces raccourcis fonctionnent seulement sur certaines pages.",
     "toggleMenu": "Basculer le menu",
     "quickSearch": "Ouvrir la barre de recherche/action rapide",
     "then": "puis",
     "task": {
       "title": "Page de tâche",
-      "done": "Done",
-      "assign": "Assign to a user",
+      "done": "Mark task done / undone",
+      "assign": "Assigner cette tâche à un utilisateur",
       "labels": "Ajouter des étiquettes à cette tâche",
       "dueDate": "Modifier la date d’échéance de cette tâche",
       "attachment": "Ajouter une pièce jointe à cette tâche",
-      "related": "Modifier les tâches connexes de cette tâche"
+      "related": "Modifier les tâches connexes de cette tâche",
+      "color": "Changer la couleur de cette tâche",
+      "move": "Déplacer cette tâche dans une autre liste"
     },
     "list": {
       "title": "Vues en liste",
@@ -794,6 +855,14 @@
       "switchToGanttView": "Passer en vue Gantt",
       "switchToKanbanView": "Passer en vue kanban",
       "switchToTableView": "Passer en vue tableau"
+    },
+    "navigation": {
+      "title": "Navigation",
+      "overview": "Accéder à la vue d'ensemble",
+      "upcoming": "Accéder aux prochaines tâches",
+      "namespaces": "Accéder aux espaces de noms et listes",
+      "labels": "Accéder aux étiquettes",
+      "teams": "Accéder aux équipes"
     }
   },
   "update": {
@@ -814,7 +883,7 @@
     "url": "URL Vikunja",
     "urlPlaceholder": "Par exemple : https://localhost:3456",
     "change": "changer",
-    "use": "Using Vikunja installation at {0}",
+    "use": "Utiliser l’installation de Vikunja à {0}",
     "error": "Impossible de trouver ou d'utiliser l'installation de Vikunja sur « {domain} ». Veuillez essayer une autre URL.",
     "success": "Utilisation de l’installation Vikunja à « {domain} ».",
     "urlRequired": "Une URL est requise."
@@ -899,7 +968,7 @@
     "4015": "Le commentaire de la tâche n’existe pas.",
     "4016": "Champ de tâche invalide.",
     "4017": "Comparateur de filtre de tâche invalide.",
-    "4018": "Invalid task filter concatenator.",
+    "4018": "Concaténateur de filtre de tâche invalide.",
     "4019": "Valeur de filtre de tâche invalide.",
     "5001": "L’espace de noms n’existe pas.",
     "5003": "Tu n’as pas accès à l’espace de noms indiqué.",
@@ -908,7 +977,7 @@
     "5010": "Cette équipe n’a pas accès à cet espace de noms.",
     "5011": "Cet·e utilisateur·rice a déjà accès à cet espace de noms.",
     "5012": "L’espace de noms est archivé et ne peut donc être consulté qu’en lecture seule.",
-    "6001": "The team name cannot be empty.",
+    "6001": "Le nom de l'équipe ne peut pas être vide.",
     "6002": "L’équipe n’existe pas.",
     "6004": "L’équipe a déjà accès à cet espace de noms ou à cette liste.",
     "6005": "L’utilisateur·rice est déjà membre de cette équipe.",

src/i18n/lang/it-IT.json

@@ -7,7 +7,7 @@
     "lastViewed": "Ultima visualizzazione",
     "list": {
       "newText": "È possibile creare una nuova lista per le nuove attività:",
-      "new": "New list",
+      "new": "Nuova lista",
       "importText": "O importare le liste e le attività da altri servizi in Vikunja:",
       "import": "Importa i tuoi dati in Vikunja"
     }
@@ -17,14 +17,14 @@
     "text": "La pagina richiesta non esiste."
   },
   "ready": {
-    "loading": "Vikunja is loading…",
-    "errorOccured": "An error occured:",
-    "checkApiUrl": "Please check if the api url is correct.",
-    "noApiUrlConfigured": "No API url was configured. Please set one below:"
+    "loading": "Vikunja sta caricando…",
+    "errorOccured": "Si è verificato un errore:",
+    "checkApiUrl": "Controlla se l'URL API è corretto.",
+    "noApiUrlConfigured": "Nessun URL API configurato. Impostane uno qui sotto:"
   },
   "offline": {
-    "title": "You are offline.",
-    "text": "Please check your network connection and try again."
+    "title": "Sei offline.",
+    "text": "Controlla la connessione di rete e riprova."
   },
   "user": {
     "auth": {
@@ -34,9 +34,8 @@
       "email": "Indirizzo e-mail",
       "emailPlaceholder": "per es. frederic{'@'}vikunja.io",
       "password": "Password",
-      "passwordRepeat": "Digita di nuovo la tua password",
       "passwordPlaceholder": "es. ••••••••••••",
-      "forgotPassword": "Forgot your password?",
+      "forgotPassword": "Password dimenticata?",
       "resetPassword": "Reimposta la tua password",
       "resetPasswordAction": "Inviami il link per reimpostare la password",
       "resetPasswordSuccess": "Controlla la tua casella di posta! Dovresti avere un'e-mail con le istruzioni su come reimpostare la password.",
@@ -45,12 +44,20 @@
       "totpTitle": "Codice di autenticazione a due fattori",
       "totpPlaceholder": "es. 123456",
       "login": "Accedi",
-      "register": "Registrati",
+      "createAccount": "Crea account",
       "loginWith": "Accedi con {provider}",
       "authenticating": "Autenticazione…",
-      "openIdStateError": "State does not match, refusing to continue!",
+      "openIdStateError": "Stato non corrispondente, impossibile continuare!",
       "openIdGeneralError": "Si è verificato un errore durante l'autenticazione con terze parti.",
-      "logout": "Esci"
+      "logout": "Esci",
+      "emailInvalid": "Inserisci un indirizzo e-mail valido.",
+      "usernameRequired": "Inserisci un nome utente.",
+      "passwordRequired": "Inserisci una password.",
+      "showPassword": "Mostra la password",
+      "hidePassword": "Nascondi la password",
+      "noAccountYet": "Non hai un account?",
+      "alreadyHaveAnAccount": "Hai già un account?",
+      "remember": "Resta connesso"
     },
     "settings": {
       "title": "Impostazioni",
@@ -61,7 +68,7 @@
       "currentPasswordPlaceholder": "La tua password attuale",
       "passwordsDontMatch": "La nuova password e la conferma non coincidono.",
       "passwordUpdateSuccess": "Password aggiornata con successo.",
-      "updateEmailTitle": "Inserisci il tuo indirizzo e-mail",
+      "updateEmailTitle": "Aggiorna l'indirizzo e-mail",
       "updateEmailNew": "Nuovo indirizzo e-mail",
       "updateEmailSuccess": "Il tuo indirizzo e-mail è stato aggiornato correttamente. Ti abbiamo inviato un collegamento per confermarlo.",
       "general": {
@@ -78,7 +85,8 @@
         "weekStartSunday": "Domenica",
         "weekStartMonday": "Lunedì",
         "language": "Lingua",
-        "defaultList": "Lista predefinita"
+        "defaultList": "Lista predefinita",
+        "timezone": "Fuso Orario"
       },
       "totp": {
         "title": "Autenticazione a due fattori",
@@ -95,39 +103,39 @@
         "disableSuccess": "L'autenticazione a due fattori è stata disattivata."
       },
       "caldav": {
-        "title": "CalDav",
-        "howTo": "Puoi connettere Vikunja ai client caldav per visualizzare e gestire tutte le attività da diversi client. Inserisci questo URL nel tuo client:",
-        "more": "Ulteriori informazioni su caldav in Vikunja"
+        "title": "CalDAV",
+        "howTo": "Puoi connettere Vikunja ai client CalDAV per visualizzare e gestire tutte le attività da diversi client. Inserisci questo URL nel tuo client:",
+        "more": "Ulteriori informazioni su CalDAV in Vikunja"
       },
       "avatar": {
         "title": "Avatar",
         "initials": "Iniziali",
         "gravatar": "Gravatar",
-        "marble": "Marble",
+        "marble": "Marmo",
         "upload": "Carica",
         "uploadAvatar": "Carica Avatar",
-        "statusUpdateSuccess": "Avatar status was updated successfully!",
+        "statusUpdateSuccess": "Avatar aggiornato!",
         "setSuccess": "L'avatar è stato impostato con successo!"
       },
       "quickAddMagic": {
-        "title": "Quick Add Magic Mode",
+        "title": "Modalità Aggiunta Rapida Magica",
         "disabled": "Disabilitato",
         "todoist": "Todoist",
         "vikunja": "Vikunja"
       },
       "appearance": {
-        "title": "Color Scheme",
-        "setSuccess": "Saved change of color scheme to {colorScheme}",
+        "title": "Tema",
+        "setSuccess": "Tema cambiato in {colorScheme}",
         "colorScheme": {
-          "light": "Light",
-          "system": "System",
-          "dark": "Dark"
+          "light": "Chiaro",
+          "system": "Sistema",
+          "dark": "Scuro"
         }
       }
     },
     "deletion": {
-      "title": "Delete your Vikunja Account",
-      "text1": "The deletion of your account is permanent and cannot be undone. We will delete all your namespaces, lists, tasks and everything associated with it.",
+      "title": "Elimina il tuo Account Vikunja",
+      "text1": "La cancellazione del tuo account è permanente e non può essere annullata. Elimineremo tutti i tuoi namespace, liste, attività e tutto ciò che è ad esso associato.",
       "text2": "Per continuare, inserisci la tua password. Riceverai un'e-mail con ulteriori istruzioni.",
       "confirm": "Elimina il mio profilo",
       "requestSuccess": "Richiesta riuscita. Riceverai un'e-mail con ulteriori istruzioni.",
@@ -141,7 +149,7 @@
     },
     "export": {
       "title": "Esporta i tuoi dati Vikunja",
-      "description": "You can request a copy of all your Vikunja data. This include Namespaces, Lists, Tasks and everything associated to them. You can import this data in any Vikunja instance through the migration function.",
+      "description": "Puoi richiedere una copia di tutti i tuoi dati all'interno di Vikunja. Questo include i Namespace, le Liste, le Attività e tutto ciò che è loro associato. È possibile importare questi dati in qualsiasi istanza Vikunja attraverso la funzione di migrazione.",
       "descriptionPasswordRequired": "Inserisci la tua password per procedere:",
       "request": "Richiedi una copia dei miei dati Vikunja",
       "success": "Hai richiesto con successo i tuoi dati Vikunja! Ti invieremo un'e-mail una volta che saranno pronti da scaricare.",
@@ -157,7 +165,7 @@
     "searchSelect": "Fare clic o premere invio per selezionare questa lista",
     "shared": "Liste Condivise",
     "create": {
-      "header": "New list",
+      "header": "Nuova lista",
       "titlePlaceholder": "Il titolo della lista va qui…",
       "addTitleRequired": "Specifica un titolo.",
       "createdSuccess": "La lista è stata creata correttamente.",
@@ -191,7 +199,7 @@
     "duplicate": {
       "title": "Duplica questa lista",
       "label": "Duplica",
-      "text": "Select a namespace which should hold the duplicated list:",
+      "text": "Seleziona un namespace che dovrebbe contenere l'elenco duplicato:",
       "success": "Lista duplicata."
     },
     "edit": {
@@ -279,23 +287,23 @@
       "title": "Kanban",
       "limit": "Limite: {limit}",
       "noLimit": "Non Impostato",
-      "doneBucket": "Done bucket",
-      "doneBucketHint": "All tasks moved into this bucket will automatically marked as done.",
-      "doneBucketHintExtended": "All tasks moved into the done bucket will be marked as done automatically. All tasks marked as done from elsewhere will be moved as well.",
-      "doneBucketSavedSuccess": "The done bucket has been saved successfully.",
-      "deleteLast": "You cannot remove the last bucket.",
-      "addTaskPlaceholder": "Enter the new task title…",
+      "doneBucket": "Colonna attività completate",
+      "doneBucketHint": "Tutte le attività spostate in questa colonna verranno automaticamente contrassegnate come completate.",
+      "doneBucketHintExtended": "Tutte le attività spostate nella colonna attività completate saranno contrassegnate automaticamente come completate. Tutte le attività contrassegnate come completate altrove verranno anche spostate.",
+      "doneBucketSavedSuccess": "Colonna attività completate salvata.",
+      "deleteLast": "Impossibile eliminare l'ultima colonna.",
+      "addTaskPlaceholder": "Inserisci il nuovo titolo dell'attività…",
       "addTask": "Aggiungi un'attività",
       "addAnotherTask": "Aggiungi un'altra attività",
-      "addBucket": "Create a new bucket",
-      "addBucketPlaceholder": "Enter the new bucket title…",
-      "deleteHeaderBucket": "Delete the bucket",
-      "deleteBucketText1": "Are you sure you want to delete this bucket?",
-      "deleteBucketText2": "This will not delete any tasks but move them into the default bucket.",
-      "deleteBucketSuccess": "The bucket has been deleted successfully.",
-      "bucketTitleSavedSuccess": "The bucket title has been saved successfully.",
-      "bucketLimitSavedSuccess": "The bucket limit been saved successfully.",
-      "collapse": "Collapse this bucket"
+      "addBucket": "Crea una nuova colonna",
+      "addBucketPlaceholder": "Inserisci il titolo della nuova colonna…",
+      "deleteHeaderBucket": "Elimina la colonna",
+      "deleteBucketText1": "Confermi di voler eliminare questa colonna?",
+      "deleteBucketText2": "Questo non eliminerà nessuna attività, ma la sposterà nel bucket predefinito.",
+      "deleteBucketSuccess": "Colonna eliminata.",
+      "bucketTitleSavedSuccess": "Titolo della colonna salvato.",
+      "bucketLimitSavedSuccess": "Limite della colonna salvato.",
+      "collapse": "Comprimi questa colonna"
     },
     "pseudo": {
       "favorites": {
@@ -304,52 +312,53 @@
     }
   },
   "namespace": {
-    "title": "Namespaces & Lists",
+    "title": "Namespace e Liste",
     "namespace": "Namespace",
-    "showArchived": "Show Archived",
-    "noneAvailable": "You don't have any namespaces right now.",
-    "unarchive": "Un-Archive",
-    "archived": "Archived",
-    "noLists": "This namespace does not contain any lists.",
-    "createList": "Create a new list in this namespace.",
-    "namespaces": "Namespaces",
-    "search": "Type to search for a namespace…",
+    "showArchived": "Mostra Archiviati",
+    "noneAvailable": "Non hai alcun namespace in questo momento.",
+    "unarchive": "De-Archivia",
+    "archived": "Archiviato",
+    "noLists": "Questo namespace non contiene alcuna lista.",
+    "createList": "Crea una nuova lista in questo namespace.",
+    "namespaces": "Namespace",
+    "search": "Digita per cercare un namespace…",
     "create": {
-      "title": "New namespace",
-      "titleRequired": "Please specify a title.",
-      "explanation": "A namespace is a collection of lists you can share and use to organize your lists with. In fact, every list belongs to a namepace.",
-      "tooltip": "What's a namespace?",
-      "success": "The namespace was successfully created."
+      "title": "Nuovo namespace",
+      "titleRequired": "Specifica un titolo.",
+      "explanation": "Un namespace è una raccolta di liste che puoi condividere e che puoi usare per organizzare le tue liste. Infatti, ogni lista appartiene a un namespace.",
+      "tooltip": "Che cos'è un namespace?",
+      "success": "Namespace creato."
     },
     "archive": {
       "titleArchive": "Archivia \"{namespace}\"",
-      "titleUnarchive": "Un-Archive \"{namespace}\"",
-      "archiveText": "You won't be able to edit this namespace or create new lists until you un-archive it. This will also archive all lists in this namespace.",
-      "unarchiveText": "You will be able to create new lists or edit it.",
-      "success": "The namespace was successfully archived.",
-      "description": "If a namespace is archived, you cannot create new lists or edit it."
+      "titleUnarchive": "Disarchivia \"{namespace}\"",
+      "archiveText": "Non sarà possibile modificare questo namespace o creare nuove liste fino a quando non verrà disarchiviato. Questo archivierà anche tutte le liste in questo namespace.",
+      "unarchiveText": "Potrai creare nuove liste o modificarle.",
+      "success": "Namespace creato.",
+      "unarchiveSuccess": "Namespace estratto dall'archivio.",
+      "description": "Se un namespace è archiviato, non è possibile creare nuove liste o modificarlo."
     },
     "delete": {
-      "title": "Delete \"{namespace}\"",
-      "text1": "Are you sure you want to delete this namespace and all of its contents?",
+      "title": "Elimina \"{namespace}\"",
+      "text1": "Sei sicuro di voler rimuovere questo namespace e tutto il relativo contenuto?",
       "text2": "Questo include tutte le liste e le attività e NON PUÒ ESSERE RIPRISTINATO!",
-      "success": "The namespace was successfully deleted."
+      "success": "Namespace eliminato."
     },
     "edit": {
       "title": "Modifica \"{namespace}\"",
-      "success": "The namespace was successfully updated."
+      "success": "Namespace aggiornato."
     },
     "share": {
       "title": "Condividi \"{namespace}\""
     },
     "attributes": {
-      "title": "Namespace Title",
-      "titlePlaceholder": "The namespace title goes here…",
+      "title": "Titolo del Namespace",
+      "titlePlaceholder": "Il titolo del namespace va qui…",
       "description": "Descrizione",
-      "descriptionPlaceholder": "The namespaces description goes here…",
+      "descriptionPlaceholder": "La descrizione del namespace va qui…",
       "color": "Colore",
-      "archived": "Is Archived",
-      "isArchived": "This namespace is archived"
+      "archived": "Archiviato",
+      "isArchived": "Questo namespace è archiviato"
     },
     "pseudo": {
       "sharedLists": {
@@ -365,7 +374,7 @@
   },
   "filters": {
     "title": "Filtri",
-    "clear": "Clear Filters",
+    "clear": "Pulisci Filtri",
     "attributes": {
       "title": "Titolo",
       "titlePlaceholder": "Il titolo del filtro salvato va qui…",
@@ -374,17 +383,17 @@
       "includeNulls": "Includi attività che non hanno un valore impostato",
       "requireAll": "Tutti i filtri devono essere veri affinché l'attività venga mostrata",
       "showDoneTasks": "Mostra Attività Fatte",
-      "sortAlphabetically": "Sort Alphabetically",
+      "sortAlphabetically": "Ordine alfabetico",
       "enablePriority": "Abilita Filtro Per Priorità",
-      "enablePercentDone": "Abilitare Filtro Per Percentuale Fatta",
+      "enablePercentDone": "Abilita Filtro Per Progresso",
       "dueDateRange": "Intervallo Data Di Scadenza",
       "startDateRange": "Intervallo Data Iniziale",
       "endDateRange": "Intervallo Data Finale",
-      "reminderRange": "Reminder Date Range"
+      "reminderRange": "Intervallo date dei promemoria"
     },
     "create": {
-      "title": "New Saved Filter",
-      "description": "A saved filter is a virtual list which is computed from a set of filters each time it is accessed. Once created, it will appear in a special namespace.",
+      "title": "Nuovo Filtro Salvato",
+      "description": "Un filtro salvato è una lista virtuale che viene calcolata da un insieme di filtri di volta in volta. Una volta creato, apparirà in un namespace speciale.",
       "action": "Crea nuovo filtro salvato"
     },
     "delete": {
@@ -446,9 +455,9 @@
   },
   "navigation": {
     "overview": "Panoramica",
-    "upcoming": "Upcoming",
+    "upcoming": "Prossimamente",
     "settings": "Impostazioni",
-    "imprint": "Imprint",
+    "imprint": "Informazioni legali",
     "privacy": "Politica sulla Privacy"
   },
   "misc": {
@@ -464,19 +473,20 @@
     "searchPlaceholder": "Digita per cercare…",
     "previous": "Precedente",
     "next": "Successivo",
-    "poweredBy": "Powered by Vikunja",
+    "poweredBy": "Creato con Vikunja",
     "info": "Info",
-    "create": "Create",
+    "create": "Crea",
     "doit": "Fallo!",
     "saving": "Salvataggio…",
     "saved": "Salvato!",
     "default": "Predefinito",
     "close": "Chiudi",
     "download": "Scarica",
-    "showMenu": "Show the menu",
-    "hideMenu": "Hide the menu",
-    "forExample": "For example:",
-    "welcomeBack": "Welcome Back!"
+    "showMenu": "Mostra il menu",
+    "hideMenu": "Nascondi il menù",
+    "forExample": "Ad esempio:",
+    "welcomeBack": "Bentornato!",
+    "custom": "Custom"
   },
   "input": {
     "resetColor": "Ripristina Colore",
@@ -485,9 +495,9 @@
       "tomorrow": "Domani",
       "nextMonday": "Lunedì Prossimo",
       "thisWeekend": "Questo fine settimana",
-      "laterThisWeek": "Later This Week",
+      "laterThisWeek": "Alla fine di questa settimana",
       "nextWeek": "Prossima Settimana",
-      "chooseDate": "Choose a date"
+      "chooseDate": "Seleziona una data"
     },
     "editor": {
       "edit": "Modifica",
@@ -504,17 +514,68 @@
       "quote": "Citazione",
       "unorderedList": "Elenco puntato",
       "orderedList": "Elenco numerato",
-      "cleanBlock": "Clean Block",
+      "cleanBlock": "Pulisci Blocco",
       "link": "Link",
       "image": "Immagine",
       "table": "Tabella",
-      "horizontalRule": "Horizontal Rule",
-      "sideBySide": "Side By Side",
-      "guide": "Guide"
+      "horizontalRule": "Divisore Orizzontale",
+      "sideBySide": "Affianca",
+      "guide": "Guida"
     },
     "multiselect": {
-      "createPlaceholder": "Create new",
+      "createPlaceholder": "Crea nuovo",
       "selectPlaceholder": "Clicca o premere invio per selezionare"
+    },
+    "datepickerRange": {
+      "to": "To",
+      "from": "From",
+      "fromto": "{from} to {to}",
+      "ranges": {
+        "today": "Today",
+        "thisWeek": "This Week",
+        "restOfThisWeek": "The Rest of This Week",
+        "nextWeek": "Next Week",
+        "next7Days": "Next 7 Days",
+        "lastWeek": "Last Week",
+        "thisMonth": "This Month",
+        "restOfThisMonth": "The Rest of This Month",
+        "nextMonth": "Next Month",
+        "next30Days": "Next 30 Days",
+        "lastMonth": "Last Month",
+        "thisYear": "This Year",
+        "restOfThisYear": "The Rest of This Year"
+      }
+    },
+    "datemathHelp": {
+      "canuse": "You can use date math to filter for relative dates.",
+      "learnhow": "Check out how it works",
+      "title": "Date Math",
+      "intro": "Date Math allows you to specifiy relative dates which are resolved on the fly by Vikunja when applying the filter.",
+      "expression": "Each Date Math expression starts with an anchor date, which can either be {0}, or a date string ending with {1}. This anchor date can optionally be followed by one or more maths expressions.",
+      "similar": "These expressions are similar to the ones provided by {0} and {1}.",
+      "add1Day": "Add one day",
+      "minus1Day": "Subtract one day",
+      "roundDay": "Round down to the nearest day",
+      "supportedUnits": "Supported time units are:",
+      "someExamples": "Some examples of time expressions:",
+      "units": {
+        "seconds": "Seconds",
+        "minutes": "Minutes",
+        "hours": "Hours",
+        "days": "Days",
+        "weeks": "Weeks",
+        "months": "Months",
+        "years": "Years"
+      },
+      "examples": {
+        "now": "Right now",
+        "in24h": "In 24h",
+        "today": "Today at 00:00",
+        "beginningOfThisWeek": "The beginning of this week at 00:00",
+        "endOfThisWeek": "The end of this week",
+        "in30Days": "In 30 days",
+        "datePlusMonth": "{0} plus one month at 00:00 of that day"
+      }
     }
   },
   "task": {
@@ -532,20 +593,17 @@
       "titleCurrent": "Attività Attuali",
       "titleDates": "Attività dal {from} al {to}",
       "noDates": "Mostra attività senza date",
-      "current": "Attività attuali",
-      "from": "Tasks from",
-      "until": "until",
-      "today": "Oggi",
-      "nextWeek": "Settimana Prossima",
-      "nextMonth": "Prossimo Mese",
-      "noTasks": "Nothing to do — Have a nice day!"
+      "overdue": "Show overdue tasks",
+      "fromuntil": "Tasks from {from} until {until}",
+      "select": "Select a date range",
+      "noTasks": "Nessuna attività — Buona giornata!"
     },
     "detail": {
       "chooseDueDate": "Clicca qui per impostare una data di scadenza",
       "chooseStartDate": "Clicca qui per impostare una data di inizio",
       "chooseEndDate": "Clicca qui per impostare una data di fine",
       "move": "Sposta attività in un'altra lista",
-      "done": "Mark task done!",
+      "done": "Segna attività fatta!",
       "undone": "Segna come non completato",
       "created": "Creato {0} da {1}",
       "updated": "Aggiornato {0}",
@@ -554,29 +612,29 @@
       "deleteSuccess": "L'attività è stata eliminata con successo.",
       "belongsToList": "Questa attività appartiene alla lista '{list}'",
       "due": "Scadenza {at}",
-      "closePopup": "Close popup",
+      "closePopup": "Chiudi popup",
       "delete": {
         "header": "Elimina questa attività",
         "text1": "Sei sicuro di voler eliminare questa attività?",
         "text2": "Questo rimuoverà anche tutti gli allegati, i promemoria e le relazioni associati a questa attività e non può essere ripristinato!"
       },
       "actions": {
-        "assign": "Assign to a user",
-        "label": "Aggiungi etichette",
+        "assign": "Assegna all'Utente",
+        "label": "Aggiungi Etichette",
         "priority": "Imposta Priorità",
         "dueDate": "Imposta data di scadenza",
-        "startDate": "Imposta una data di inizio",
-        "endDate": "Imposta una data di fine",
+        "startDate": "Imposta Data Inizio",
+        "endDate": "Imposta Data Fine",
         "reminders": "Imposta promemoria",
-        "repeatAfter": "Set a repeating interval",
-        "percentDone": "Imposta Percentuale Completata",
-        "attachments": "Aggiungi allegati",
-        "relatedTasks": "Aggiungi attività collegate",
-        "moveList": "Sposta attività",
-        "color": "Imposta colore attività",
-        "delete": "Elimina attività",
-        "favorite": "Salva come preferito",
-        "unfavorite": "Rimuovi dai preferiti"
+        "repeatAfter": "Imposta Intervallo Ripetizione",
+        "percentDone": "Imposta Progresso",
+        "attachments": "Aggiungi Allegati",
+        "relatedTasks": "Aggiungi Relazione",
+        "moveList": "Sposta",
+        "color": "Imposta Colore",
+        "delete": "Elimina",
+        "favorite": "Aggiungi ai Preferiti",
+        "unfavorite": "Rimuovi dai Preferiti"
       }
     },
     "attributes": {
@@ -589,7 +647,7 @@
       "dueDate": "Data di scadenza",
       "endDate": "Data di fine",
       "labels": "Etichette",
-      "percentDone": "% Completata",
+      "percentDone": "Progresso",
       "priority": "Priorità",
       "relatedTasks": "Attività Collegate",
       "reminders": "Promemoria",
@@ -599,13 +657,13 @@
       "updated": "Aggiornato"
     },
     "subscription": {
-      "subscribedThroughParent": "You can't unsubscribe here because you are subscribed to this {entity} through its {parent}.",
-      "subscribed": "You are currently subscribed to this {entity} and will receive notifications for changes.",
-      "notSubscribed": "You are not subscribed to this {entity} and won't receive notifications for changes.",
-      "subscribe": "Subscribe",
-      "unsubscribe": "Unsubscribe",
-      "subscribeSuccess": "You are now subscribed to this {entity}",
-      "unsubscribeSuccess": "You are now unsubscribed to this {entity}"
+      "subscribedThroughParent": "Non puoi annullare l'iscrizione qui perché sei iscritto a questo {entity} attraverso il suo {parent}.",
+      "subscribed": "Sei attualmente iscritto a questo {entity} e riceverai notifiche per le modifiche.",
+      "notSubscribed": "Non sei iscritto a questo {entity} e non riceverai notifiche per le modifiche.",
+      "subscribe": "Iscriviti",
+      "unsubscribe": "Disiscriviti",
+      "subscribeSuccess": "Ti sei iscritto a questo {entity}",
+      "unsubscribeSuccess": "Ti sei disiscritto a questo {entity}"
     },
     "attachment": {
       "title": "Allegati",
@@ -623,41 +681,41 @@
     "comment": {
       "title": "Commenti",
       "loading": "Caricamento commenti…",
-      "edited": "edited {date}",
+      "edited": "modificato il {date}",
       "creating": "Creazione del commento…",
       "placeholder": "Aggiungi un commento…",
-      "comment": "Comment",
+      "comment": "Commenta",
       "delete": "Elimina questo commento",
       "deleteText1": "Sei sicuro di voler eliminare questo commento?",
       "deleteText2": "Questa azione non può essere annullata!",
       "addedSuccess": "Il commento è stato aggiunto correttamente."
     },
     "deferDueDate": {
-      "title": "Defer due date",
+      "title": "Rinvia data di scadenza",
       "1day": "1 giorno",
       "3days": "3 giorni",
       "1week": "1 settimana"
     },
     "description": {
-      "placeholder": "Click here to enter a description…",
-      "empty": "No description available yet."
+      "placeholder": "Clicca qui per inserire una descrizione…",
+      "empty": "Nessuna descrizione."
     },
     "assignee": {
-      "placeholder": "Type to assign a user…",
+      "placeholder": "Digita per assegnare un utente…",
       "selectPlaceholder": "Assegna questo utente",
-      "assignSuccess": "The user has been assigned successfully.",
-      "unassignSuccess": "The user has been unassigned successfully."
+      "assignSuccess": "Utente assegnato.",
+      "unassignSuccess": "Utente disassegnato."
     },
     "label": {
-      "placeholder": "Type to add a new label…",
-      "createPlaceholder": "Add this as new label",
+      "placeholder": "Digita per aggiungere una nuova etichetta…",
+      "createPlaceholder": "Aggiungila come nuova etichetta",
       "addSuccess": "Etichetta aggiunta.",
       "createSuccess": "Etichetta creata.",
       "removeSuccess": "Etichetta eliminata.",
       "addCreateSuccess": "Etichetta creata e aggiunta."
     },
     "priority": {
-      "unset": "Unset",
+      "unset": "Azzera",
       "low": "Bassa",
       "medium": "Media",
       "high": "Alta",
@@ -665,38 +723,38 @@
       "doNow": "FARE ORA"
     },
     "relation": {
-      "add": "Add a New Task Relation",
-      "new": "New Task Relation",
-      "searchPlaceholder": "Type search for a new task to add as related…",
-      "createPlaceholder": "Add this as new related task",
-      "differentList": "This task belongs to a different list.",
-      "differentNamespace": "This task belongs to a different namespace.",
-      "noneYet": "No task relations yet.",
-      "delete": "Delete Task Relation",
-      "deleteText1": "Are you sure you want to delete this task relation?",
+      "add": "Aggiungi Attività Collegata",
+      "new": "Nuova Attività Collegata",
+      "searchPlaceholder": "Digita per cercare un'attività da aggiungere come collegata…",
+      "createPlaceholder": "Aggiungi come attività collegata",
+      "differentList": "Questa attività è di una lista diversa.",
+      "differentNamespace": "Questa attività appartiene ad un namespace diverso.",
+      "noneYet": "Nessuna attività collegata.",
+      "delete": "Elimina Collegamento Attività",
+      "deleteText1": "Confermi di voler eliminare questo collegamento attività?",
       "deleteText2": "Questa azione non può essere annullata!",
-      "select": "Select a relation kind",
+      "select": "Seleziona un tipo di collegamento",
       "kinds": {
-        "subtask": "Subtask | Subtasks",
-        "parenttask": "Parent Task | Parent Tasks",
-        "related": "Related Task | Related Tasks",
+        "subtask": "Sotto-attività | Sotto-attività",
+        "parenttask": "Attività Principale | Attività Principale",
+        "related": "Attività Correlata | Attività Correlata",
         "duplicateof": "Duplicato Di | Duplicati Di",
-        "duplicates": "Duplicates | Duplicates",
-        "blocking": "Blocking | Blocking",
-        "blocked": "Blocked By | Blocked By",
-        "precedes": "Precedes | Precedes",
-        "follows": "Follows | Follows",
-        "copiedfrom": "Copied From | Copied From",
-        "copiedto": "Copied To | Copied To"
+        "duplicates": "Duplicato | Duplicati",
+        "blocking": "Bloccante | Bloccanti",
+        "blocked": "Bloccato Da | Bloccati Da",
+        "precedes": "Precede | Precede",
+        "follows": "Segue | Segue",
+        "copiedfrom": "Copiata Da | Copiate Da",
+        "copiedto": "Copiata In | Copiate In"
       }
     },
     "repeat": {
       "everyDay": "Ogni Giorno",
       "everyWeek": "Ogni Settimana",
       "everyMonth": "Ogni Mese",
-      "mode": "Repeat mode",
+      "mode": "Modalità Ripetizione",
       "monthly": "Mensilmente",
-      "fromCurrentDate": "From Current Date",
+      "fromCurrentDate": "Dalla Data Attuale",
       "each": "Ogni",
       "specifyAmount": "Specifica una quantità…",
       "hours": "Ore",
@@ -706,32 +764,32 @@
       "years": "Anni"
     },
     "quickAddMagic": {
-      "hint": "You can use Quick Add Magic",
+      "hint": "Puoi usare l'Aggiunta Rapida Magica",
       "what": "Cosa?",
-      "title": "Quick Add Magic",
-      "intro": "When creating a task, you can use special keywords to directly add attributes to the newly created task. This allows to add commonly used attributes to tasks much faster.",
+      "title": "Aggiunta Rapida Magica",
+      "intro": "Quando si crea un'attività, è possibile utilizzare parole chiave speciali per aggiungere direttamente attributi all'attività appena creata. Questo permette di aggiungere gli attributi comuni molto più velocemente.",
       "multiple": "Puoi usarlo più volte.",
-      "label1": "To add a label, simply prefix the name of the label with {prefix}.",
-      "label2": "Vikunja will first check if the label already exist and create it if not.",
-      "label3": "To use spaces, simply add a \" around the label name.",
-      "label4": "For example: {prefix}\"Label with spaces\".",
-      "priority1": "To set a task's priority, add a number 1-5, prefixed with a {prefix}.",
-      "priority2": "The higher the number, the higher the priority.",
-      "assignees": "To directly assign the task to a user, add their username prefixed with {prefix} to the task.",
-      "list1": "To set a list for the task to appear in, enter its name prefixed with {prefix}.",
-      "list2": "This will return an error if the list does not exist.",
+      "label1": "Per aggiungere un'etichetta, basta aggiungere il nome dell'etichetta preceduto da {prefix}.",
+      "label2": "Vikunja controllerà prima se l'etichetta esiste già e nel caso la creerà.",
+      "label3": "Per usare gli spazi, basta \" prima e dopo del nome dell'etichetta.",
+      "label4": "Per esempio: {prefix}\"Etichetta con spazi\".",
+      "priority1": "Per impostare la priorità di un'attività, aggiungi un numero 1-5, preceduto da {prefix}.",
+      "priority2": "Più alto è il numero, più alta è la priorità.",
+      "assignees": "Per assegnare direttamente l'attività a un utente, aggiungere il suo nome utente preceduto da {prefix} all'attività.",
+      "list1": "Per impostare una lista di appartenenza all'attività, inserisci il suo nome prefisso con {prefix}.",
+      "list2": "Ciò restituirà un errore se la lista non esiste.",
       "dateAndTime": "Data e ora",
-      "date": "Any date will be used as the due date of the new task. You can use dates in any of these formats:",
-      "dateWeekday": "any weekday, will use the next date with that date",
-      "dateCurrentYear": "will use the current year",
-      "dateNth": "will use the {day}th of the current month",
-      "dateTime": "Combine any of the date formats with \"{time}\" (or {timePM}) to set a time.",
-      "repeats": "Repeating tasks",
-      "repeatsDescription": "To set a task as repeating in an interval, simply add '{suffix}' to the task text. The amount needs to be a number and can be omitted to use just the type (see examples)."
+      "date": "Qualsiasi data verrà utilizzata come data di scadenza della nuova attività. È possibile utilizzare le date in uno qualsiasi di questi formati:",
+      "dateWeekday": "qualsiasi giorno della settimana, userà la data più vicina",
+      "dateCurrentYear": "userà l’anno corrente",
+      "dateNth": "userà il {day} del mese corrente",
+      "dateTime": "Combina uno qualsiasi dei formati di data con \"{time}\" (o {timePM}) per impostare un orario.",
+      "repeats": "Attività ricorrenti",
+      "repeatsDescription": "Per impostare un'attività come ricorrente in un intervallo, basta aggiungere '{suffix}' al testo dell'attività. La quantità deve essere un numero e può essere omesso per usare solo il tipo (vedi esempi)."
     }
   },
   "team": {
-    "title": "Teams",
+    "title": "Gruppi",
     "noTeams": "Non fai parte di nessun gruppo.",
     "create": {
       "title": "Crea un nuovo gruppo",
@@ -746,23 +804,23 @@
       "makeAdmin": "Rendi Amministratore",
       "success": "Gruppo aggiornato.",
       "userAddedSuccess": "Membro del gruppo aggiunto.",
-      "madeMember": "The team member was successfully made member.",
-      "madeAdmin": "The team member was successfully made admin.",
+      "madeMember": "Membro del gruppo reso membro.",
+      "madeAdmin": "Membro del gruppo reso amministratore.",
       "delete": {
         "header": "Elimina il gruppo",
         "text1": "Sei sicuro di voler eliminare questo gruppo e tutti i suoi membri?",
-        "text2": "All team members will lose access to lists and namespaces shared with this team. This CANNOT BE UNDONE!",
+        "text2": "Tutti i membri del gruppo perderanno l'accesso alle liste e ai namespace condivisi con questo gruppo. NON PUÒ ESSERE RIPRISTINATO!",
         "success": "Gruppo eliminato."
       },
       "deleteUser": {
         "header": "Rimuovi un utente dal gruppo",
         "text1": "Confermi di voler rimuovere questo utente dal gruppo?",
-        "text2": "They will lose access to all lists and namespaces this team has access to. This CANNOT BE UNDONE!",
+        "text2": "Perderanno l'accesso a tutte le liste e i namespace a cui questo gruppo ha accesso. NON PUÒ ESSERE RIPRISTINATO!",
         "success": "Utente rimosso dal gruppo."
       }
     },
     "attributes": {
-      "name": "Team Name",
+      "name": "Nome Gruppo",
       "namePlaceholder": "Il nome del gruppo va qui…",
       "nameRequired": "Specifica un nome.",
       "description": "Descrizione",
@@ -772,32 +830,43 @@
     }
   },
   "keyboardShortcuts": {
-    "title": "Keyboard Shortcuts",
-    "general": "General",
+    "title": "Tasti Rapidi",
+    "general": "Generali",
     "allPages": "Queste scorciatoie funzionano in tutte le pagine.",
     "currentPageOnly": "Queste scorciatoie funzionano solo nella pagina attuale.",
+    "somePagesOnly": "These shortcuts work only on some pages.",
     "toggleMenu": "Attiva/Disattiva Menu",
     "quickSearch": "Apri la barra di ricerca/azione rapida",
-    "then": "then",
+    "then": "e dopo",
     "task": {
-      "title": "Task Page",
-      "done": "Done",
-      "assign": "Assign to a user",
-      "labels": "Add labels to this task",
-      "dueDate": "Change the due date of this task",
-      "attachment": "Add an attachment to this task",
-      "related": "Modify related tasks of this task"
+      "title": "Pagina Attività",
+      "done": "Mark task done / undone",
+      "assign": "Assign this task to a user",
+      "labels": "Aggiungi etichette a questa attività",
+      "dueDate": "Modifica la data di scadenza di questa attività",
+      "attachment": "Aggiungi un allegato a questa attività",
+      "related": "Modifica le attività collegate a questa",
+      "color": "Change the color of this task",
+      "move": "Move this task to another list"
     },
     "list": {
-      "title": "List Views",
-      "switchToListView": "Switch to list view",
-      "switchToGanttView": "Switch to gantt view",
-      "switchToKanbanView": "Switch to kanban view",
-      "switchToTableView": "Switch to table view"
+      "title": "Viste Liste",
+      "switchToListView": "Passa alla vista Lista",
+      "switchToGanttView": "Passa alla vista Gantt",
+      "switchToKanbanView": "Passa alla vista Kanban",
+      "switchToTableView": "Passa alla vista Tabella"
+    },
+    "navigation": {
+      "title": "Navigation",
+      "overview": "Navigato to overview",
+      "upcoming": "Navigato to upcoming taks",
+      "namespaces": "Navigate to namepaces & lists",
+      "labels": "Navigate to labels",
+      "teams": "Navigate to teams"
     }
   },
   "update": {
-    "available": "There is an update for Vikunja available!",
+    "available": "È disponibile un aggiornamento per Vikunja!",
     "do": "Aggiorna Adesso"
   },
   "menu": {
@@ -805,136 +874,136 @@
     "archive": "Archivia",
     "duplicate": "Duplica",
     "delete": "Elimina",
-    "unarchive": "Un-Archive",
-    "setBackground": "Set background",
+    "unarchive": "Disarchivia",
+    "setBackground": "Imposta sfondo",
     "share": "Condividi",
     "newList": "Nuova lista"
   },
   "apiConfig": {
     "url": "URL Vikunja",
     "urlPlaceholder": "es. http://localhost:8080",
-    "change": "change",
-    "use": "Using Vikunja installation at {0}",
-    "error": "Could not find or use Vikunja installation at \"{domain}\". Please try a different url.",
-    "success": "Using Vikunja installation at \"{domain}\".",
-    "urlRequired": "A url is required."
+    "change": "modifica",
+    "use": "Usa l'installazione di Vikunja a {0}",
+    "error": "Impossibile trovare o usare l'installazione di Vikunja su \"{domain}\". Prova per favore con un altro Url.",
+    "success": "Utilizzando l'installazione di Vikunja su \"{domain}\".",
+    "urlRequired": "L'URL è obbligatorio."
   },
   "loadingError": {
-    "failed": "Loading failed, please {0}. If the error persists, please {1}.",
-    "tryAgain": "try again",
-    "contact": "contact us"
+    "failed": "Caricamento non riuscito, si prega di {0}. Se l'errore persiste, per favore {1}.",
+    "tryAgain": "riprova",
+    "contact": "Contattaci"
   },
   "notification": {
-    "title": "Notifications",
-    "none": "You don't have any notifications. Have a nice day!",
-    "explainer": "Notifications will appear here when actions on namespaces, lists or tasks you subscribed to happen."
+    "title": "Notifiche",
+    "none": "Nessuna notifica. Buona giornata!",
+    "explainer": "Le notifiche appariranno qui quando le azioni su Namespace, liste o attività a cui hai sottoscritto la sottoscrizione avvengono."
   },
   "quickActions": {
-    "commands": "Commands",
-    "placeholder": "Type a command or search…",
-    "hint": "You can use {list} to limit the search to a list. Combine {list} or {label} (labels) with a search query to search for a task with these labels or on that list. Use {assignee} to only search for teams.",
-    "tasks": "Tasks",
+    "commands": "Comandi",
+    "placeholder": "Digita un comando o cerca…",
+    "hint": "Puoi usare {list} per limitare la ricerca a una lista. Unisci {list} o {label} (etichette) alla ricerca per trovare un'attività con quelle etichette o in quella lista. Usa {assignee} per cercare solo i gruppi.",
+    "tasks": "Attivitá",
     "lists": "Liste",
-    "teams": "Teams",
-    "newList": "Enter the title of the new list…",
-    "newTask": "Enter the title of the new task…",
-    "newNamespace": "Enter the title of the new namespace…",
-    "newTeam": "Enter the name of the new team…",
-    "createTask": "Create a task in the current list ({title})",
-    "createList": "Create a list in the current namespace ({title})",
+    "teams": "Gruppi",
+    "newList": "Inserisci il titolo della nuova lista…",
+    "newTask": "Inserisci il titolo della nuova attività…",
+    "newNamespace": "Inserisci il titolo del nuovo namespace…",
+    "newTeam": "Inserisci il nome del nuovo gruppo…",
+    "createTask": "Crea un'attività nella lista attuale ({title})",
+    "createList": "Crea una lista nel namespace attuale ({title})",
     "cmds": {
-      "newTask": "New task",
-      "newList": "New list",
-      "newNamespace": "New namespace",
-      "newTeam": "New team"
+      "newTask": "Nuova attività",
+      "newList": "Nuova lista",
+      "newNamespace": "Nuovo Namespace",
+      "newTeam": "Nuovo gruppo"
     }
   },
   "date": {
-    "locale": "en",
+    "locale": "it",
     "altFormatLong": "j M Y H:i",
     "altFormatShort": "j M Y"
   },
   "error": {
     "error": "Errore",
-    "success": "Success",
+    "success": "Fatto",
     "0001": "Non ti è permesso farlo.",
-    "1001": "A user with this username already exists.",
+    "1001": "Esiste già un utente con questo nome utente.",
     "1002": "Un utente con questo indirizzo e-mail esiste già.",
-    "1004": "No username and password specified.",
+    "1004": "Nessun nome utente e password specificati.",
     "1005": "L'utente non esiste.",
     "1006": "Impossibile ottenere l'id utente.",
-    "1008": "No password reset token provided.",
-    "1009": "Invalid password reset token.",
+    "1008": "Nessun codice di reimpostazione password fornito.",
+    "1009": "Codice di reimpostazione password non valido.",
     "1010": "Token di conferma dell'e-mail non valido.",
-    "1011": "Wrong username or password.",
+    "1011": "Nome utente o password errati.",
     "1012": "Indirizzo e-mail dell'utente non confermato.",
     "1013": "La nuova password è vuota.",
     "1014": "La vecchia password è vuota.",
     "1015": "Autenticazione TOTP già abilitata per questo utente.",
     "1016": "Autenticazione TOTP non abilitata per questo utente.",
     "1017": "Codice TOTP non valido.",
-    "1018": "The user avatar type setting is invalid.",
+    "1018": "L'impostazione del tipo di avatar utente non è valida.",
     "2001": "L'ID non può essere vuoto o 0.",
     "2002": "Alcuni dati della richiesta non erano validi.",
     "3001": "La lista non esiste.",
-    "3004": "You need to have read permissions on that list to perform that action.",
+    "3004": "Devi avere i permessi di lettura su quella lista per eseguire quell'azione.",
     "3005": "Il titolo della lista non può essere vuoto.",
-    "3006": "The list share does not exist.",
+    "3006": "La condivisione della lista non esiste.",
     "3007": "Esiste già una lista con questo identificatore.",
-    "3008": "The list is archived and can therefore only be accessed read only. This is also true for all tasks associated with this list.",
-    "4001": "The list task text cannot be empty.",
-    "4002": "The list task does not exist.",
+    "3008": "La lista è archiviata e può quindi essere consultata solo in sola lettura. Questo vale anche per tutte le attività associate a questa lista.",
+    "4001": "Il testo delle attività della lista non può essere vuoto.",
+    "4002": "Lista di attività non esistente.",
     "4003": "Tutte le attività di modifica in blocco devono appartenere alla stessa lista.",
     "4004": "Hai bisogno di almeno un'attività quando si modificano in blocco le attività.",
     "4005": "Non hai il permesso di vedere l'attività.",
-    "4006": "You can't set a parent task as the task itself.",
-    "4007": "You can't create a task relation with an invalid kind of relation.",
-    "4008": "You can't create a task relation which already exists.",
-    "4009": "The task relation does not exist.",
-    "4010": "Cannot relate a task with itself.",
-    "4011": "The task attachment does not exist.",
-    "4012": "The task attachment is too large.",
-    "4013": "The task sort param is invalid.",
-    "4014": "The task sort order is invalid.",
-    "4015": "The task comment does not exist.",
-    "4016": "Invalid task field.",
-    "4017": "Invalid task filter comparator.",
-    "4018": "Invalid task filter concatenator.",
-    "4019": "Invalid task filter value.",
-    "5001": "The namespace does not exist.",
-    "5003": "You do not have access to the specified namespace.",
-    "5006": "The namespace name cannot be empty.",
-    "5009": "You need to have namespace read access to perform that action.",
-    "5010": "This team does not have access to that namespace.",
-    "5011": "This user has already access to that namespace.",
-    "5012": "The namespace is archived and can therefore only be accessed read only.",
-    "6001": "The team name cannot be empty.",
-    "6002": "The team does not exist.",
-    "6004": "The team already has access to that namespace or list.",
-    "6005": "The user is already a member of that team.",
-    "6006": "Cannot delete the last team member.",
-    "6007": "The team does not have access to the list to perform that action.",
-    "7002": "The user already has access to that list.",
+    "4006": "Non è possibile impostare un'attività principale come l'attività stessa.",
+    "4007": "Non è possibile creare una relazione di attività con un tipo di relazione non valido.",
+    "4008": "Non è possibile creare una relazione di attività già esistente.",
+    "4009": "La relazione di attività non esiste.",
+    "4010": "Non è possibile relazionare un'attività con se stessa.",
+    "4011": "L'allegato dell'attività non esiste.",
+    "4012": "L'allegato dell'attività è troppo grande.",
+    "4013": "Il parametro di ordinamento dei task non è valido.",
+    "4014": "L' ordinamento dei task non è valido.",
+    "4015": "Il commento all'attività non esiste.",
+    "4016": "Campo attività non valido.",
+    "4017": "Comparatore di filtri attività non valido.",
+    "4018": "Concatenatore filtro attività non valido.",
+    "4019": "Filtro attività non valido.",
+    "5001": "Il namespace non esiste.",
+    "5003": "Non hai accesso a questo namespace.",
+    "5006": "Il nome del namespace non può essere vuoto.",
+    "5009": "Devi avere accesso in lettura al namespace per effettuare questa operazione.",
+    "5010": "Il tuo gruppo non ha accesso a questo namespace.",
+    "5011": "Questo utente ha già accesso a quel namespace.",
+    "5012": "Il namespace è archiviato e può quindi essere accessibile solo in sola lettura.",
+    "6001": "Il nome del gruppo non può essere vuoto.",
+    "6002": "Gruppo non esistente.",
+    "6004": "Il team ha già accesso a questo namespace o lista.",
+    "6005": "L'utente è già membro di quel gruppo.",
+    "6006": "Non è possibile eliminare l'ultimo membro del gruppo.",
+    "6007": "Il gruppo non ha accesso alla lista per eseguire quell'azione.",
+    "7002": "L'utente ha già accesso a quella lista.",
     "7003": "Non hai accesso a quella lista.",
     "8001": "Questa etichetta esiste già in quell'attività.",
     "8002": "L'etichetta non esiste.",
     "8003": "Non hai accesso a questa etichetta.",
-    "9001": "The right is invalid.",
-    "10001": "The bucket does not exist.",
-    "10002": "The bucket does not belong to that list.",
-    "10003": "You cannot remove the last bucket on a list.",
-    "10004": "You cannot add the task to this bucket as it already exceeded the limit of tasks it can hold.",
-    "10005": "There can be only one done bucket per list.",
-    "11001": "The saved filter does not exist.",
-    "11002": "Saved filters are not available for link shares.",
-    "12001": "The subscription entity type is invalid.",
-    "12002": "You are already subscribed to the entity itself or a parent entity.",
-    "13001": "This link share requires a password for authentication, but none was provided.",
-    "13002": "The provided link share password was invalid."
+    "9001": "Permesso non valido.",
+    "10001": "Colonna non esistente.",
+    "10002": "La colonna non appartiene a quella lista.",
+    "10003": "Non puoi rimuovere l'ultima colonna di una lista.",
+    "10004": "Non puoi aggiungere l'attività a questa colonna perché ha già superato il limite di attività che può contenere.",
+    "10005": "Ci può essere solo una colonna completati per lista.",
+    "11001": "Filtro salvato non esistente.",
+    "11002": "I filtri salvati non sono disponibili per i link di condivisione.",
+    "12001": "Il tipo di entità sottoscritto non è valido.",
+    "12002": "Sei già iscritto all'entità stessa o a un'entità principale.",
+    "13001": "Questa condivisione di link richiede una password per l'autenticazione, ma non è stato inserita.",
+    "13002": "La password inserita per il link di condivisione è valida."
   },
   "about": {
-    "title": "About",
-    "frontendVersion": "Frontend Version: {version}",
-    "apiVersion": "API Version: {version}"
+    "title": "Informazioni",
+    "frontendVersion": "Versione Frontend: {version}",
+    "apiVersion": "Versione API: {version}"
   }
 }